/*
Theme Name: ePrize Theme
Theme URI: https://eprize.it
Author: Iglis Meloni
Author URI: https://eprize.it
Description: Tema personalizzato per ePrize S.r.l. - Tailwind CDN + Custom Styles
Version: 1.1
*/

/* Importa font e stili base */
body, p, a, li, span, div {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fredoka', sans-serif !important;
    letter-spacing: 0.5px;
}

body {
    background-color: #FAFAFA !important;
    color: #334155 !important;
    overflow-x: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

a {
    text-decoration: none !important;
    box-shadow: none !important;
    border: none !important;
}

img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* --- LOGICA SMART PER LOGIN --- 
   WordPress aggiunge automaticamente la classe 'logged-in' al body.
   Usiamo quella per gestire la visibilità.
*/
.wp-logged-in-only { display: none !important; }
body.logged-in .wp-logged-in-only { display: flex !important; }
body.logged-in .wp-guest-only { display: none !important; }

/* Soft Blobs */
.blob {
    position: absolute;
    filter: blur(80px);
    z-index: -1;
    opacity: 0.25;
}
.blob-1 { top: -10%; left: -10%; width: 500px; height: 500px; background: #a5b4fc; border-radius: 50%; }
.blob-2 { top: 30%; right: -15%; width: 400px; height: 400px; background: #fbcfe8; border-radius: 50%; }
.blob-3 { bottom: -10%; left: 10%; width: 600px; height: 600px; background: #bae6fd; border-radius: 50%; }

/* Elegant Glass */
.glass {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.03) !important;
    border-radius: 16px !important;
}

.header-glass {
    background: rgba(255, 255, 255, 0.98) !important; 
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8) !important;
    z-index: 9999 !important; 
    position: relative; 
}

/* Gentle Hover */
.hover-lift:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 30px -10px rgba(148, 163, 184, 0.2) !important;
    transition: all 0.3s ease-out;
}

/* Soft Button Style */
.btn-soft {
    transition: all 0.2s;
    box-shadow: 0 4px 14px 0 rgba(0,0,0,0.05);
}
.btn-soft:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.btn-soft:active {
    transform: translateY(1px);
}

/* FAQ Details Styles (specifici per pagina FAQ ma utili globalmente) */
details > summary {
    list-style: none;
    cursor: pointer;
}
details > summary::-webkit-details-marker {
    display: none;
}
details[open] summary ~ * {
    animation: sweep .3s ease-in-out;
}
@keyframes sweep {
    0%    {opacity: 0; transform: translateY(-10px)}
    100%  {opacity: 1; transform: translateY(0)}
}
details[open] .faq-icon {
    transform: rotate(180deg);
}

/* Home Page specific styles */
.scratch-surface {
    background-color: #cbd5e1;
    background-image: linear-gradient(135deg, #cbd5e1 25%, #e2e8f0 25%, #e2e8f0 50%, #cbd5e1 50%, #cbd5e1 75%, #e2e8f0 75%, #e2e8f0 100%);
    background-size: 20px 20px;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.group:hover .scratch-surface {
    opacity: 0;
    transform: scale(1.1);
    pointer-events: none;
}

.prize-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prize-slide.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
/* --- STILI PAGINE LEGALI (Cookie/Privacy Policy) --- */
.prose h2 {
    color: #334155;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-family: 'Fredoka', sans-serif !important;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.prose h3 {
    color: #475569;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-family: 'Fredoka', sans-serif !important;
}

.prose p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: #475569;
}

.prose ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    color: #475569;
}

.prose li {
    margin-bottom: 0.5rem;
}

.prose strong {
    color: #1e293b;
    font-weight: 600;
}

.prose a {
    color: #818cf8;
    text-decoration: underline;
    transition: color 0.2s;
}

.prose a:hover {
    color: #6366f1;
}
/* --- STILI DASHBOARD & ADS --- */
.ad-placeholder {
    background-color: #f1f5f9;
    border: 2px dashed #cbd5e1;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden; /* Evita sbavature */
}
/* --- STILI PAGINA TRASPARENZA --- */
.card-danger {
    background: linear-gradient(135deg, #fff1f2 0%, #fff 100%) !important;
    border: 1px solid #fecaca !important; /* rosso chiaro */
    box-shadow: 0 10px 30px -10px rgba(239, 68, 68, 0.1) !important;
    border-radius: 24px !important;
}
/* --- STILI INPUT GENERICI (Per form di login, recupero password e contatti) --- */
input[type="text"], 
input[type="email"], 
input[type="password"] {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background-color: #f8fafc;
    transition: all 0.3s ease;
    outline: none;
    color: #334155;
    margin-bottom: 1rem; /* Spazio tra i campi */
}

input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="password"]:focus {
    background-color: #fff;
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.1);
}

/* Bottone di invio generico */
input[type="submit"], button[type="submit"] {
    width: 100%;
    background-color: #818cf8;
    color: white;
    font-weight: bold;
    padding: 12px;
    border-radius: 9999px; /* Pill shape */
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

input[type="submit"]:hover, button[type="submit"]:hover {
    background-color: #6366f1;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* --- STILI PAGINA SOCIALE --- */

/* Animazione Battito Cuore */
@keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}
.animate-heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

/* Stili Modali */
.modal-overlay {
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
}
@keyframes slideUp {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.animate-slide-up {
    animation: slideUp 0.3s ease-out;
}

/* Card interne effetto vetro */
.glass-card-inner {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glass-card-inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    background: rgba(255, 255, 255, 0.9);
}
/* --- STILI PAGINA SIMULATORE --- */
input[type=range] {
    -webkit-appearance: none; 
    background: transparent; 
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #F05A38;
    cursor: pointer;
    margin-top: -10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #e2e8f0;
    border-radius: 2px;
}
/* Slider Rosa per la sezione Ads */
#ads-budget-slider::-webkit-slider-thumb {
    background: #db2777; /* pink-600 */
}

/* Animazioni fade tra step */
.fade-enter {
    animation: fadeIn 0.5s ease-in-out forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.hidden-step {
    display: none;
}

/* Card Selezionabili */
.type-card.active {
    border-color: #F05A38;
    background-color: #fffaf9;
    box-shadow: 0 10px 15px -3px rgba(240, 90, 56, 0.1);
}
.ad-type-card {
    cursor: pointer;
    transition: all 0.3s ease;
}
.ad-type-card.active-ad {
    border-color: #db2777;
    background-color: #fff1f2;
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(219, 39, 119, 0.15);
}
/* --- FIX GRAFICA FORM REGISTRAZIONE --- */
.wp-dashboard-container input, 
.wp-dashboard-container select {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    font-size: 1rem !important;
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    transition: all 0.3s ease !important;
}

.wp-dashboard-container input:focus, 
.wp-dashboard-container select:focus {
    background-color: #fff !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.1) !important;
    outline: none !important;
}

.wp-dashboard-container label {
    font-weight: 700 !important;
    color: #334155 !important;
    font-size: 0.9rem !important;
}

/* Stile per i bottoni "Prosegui" e "Indietro" nel modulo */
.wp-dashboard-container .step-button {
    cursor: pointer;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}
/* --- STILI CONTACT FORM 7 (ePrize Style) --- */

/* 1. Reset Strutturale */
.wpcf7 form .wpcf7-response-output {
    margin: 2em 0 1em !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    border: none !important;
    font-size: 0.9rem !important;
    text-align: center !important;
}
/* Stile Successo */
.wpcf7 form.sent .wpcf7-response-output {
    background-color: #ecfdf5 !important; /* green-50 */
    color: #059669 !important; /* green-600 */
    border: 1px solid #a7f3d0 !important;
}
/* Stile Errore */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    background-color: #fef2f2 !important; /* red-50 */
    color: #dc2626 !important; /* red-600 */
    border: 1px solid #fecaca !important;
}

/* 2. Nasconde loader e tag inutili */
.wpcf7-spinner { margin: 0 0 0 10px !important; }
.wpcf7 p { margin: 0 !important; padding: 0 !important; }
.wpcf7 br { display: none !important; }

/* 3. Stile Campi Input (Text, Email, Select, Textarea) */
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap select,
.wpcf7-form-control-wrap textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important; /* slate-200 */
    background-color: #f8fafc !important; /* slate-50 */
    color: #334155 !important; /* slate-700 */
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    margin-top: 4px !important;
}

/* Focus State (quando clicchi nel campo) */
.wpcf7-form-control-wrap input:focus,
.wpcf7-form-control-wrap select:focus,
.wpcf7-form-control-wrap textarea:focus {
    background-color: #ffffff !important;
    border-color: #818cf8 !important; /* indigo-400 */
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.1) !important;
    outline: none !important;
}

/* Placeholder Style */
.wpcf7-form-control-wrap input::placeholder,
.wpcf7-form-control-wrap textarea::placeholder {
    color: #94a3b8 !important; /* slate-400 */
    opacity: 1;
}

/* 4. Checkbox Privacy */
input[type="checkbox"] {
    accent-color: #4f46e5 !important; /* indigo-600 */
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* 5. Etichette (Labels) */
.wpcf7 label {
    font-size: 0.875rem !important; /* text-sm */
    font-weight: 700 !important; /* font-bold */
    color: #334155 !important; /* slate-700 */
    margin-bottom: 0.25rem !important;
    display: block !important;
}

/* 6. Pulsante Invio (Submit) */
/* Nota: CF7 usa input[type="submit"], ma il tuo codice usa <button>.
   Li stilizziamo entrambi per sicurezza. */
.wpcf7-submit, button[type="submit"] {
    background-color: #4f46e5 !important; /* indigo-600 */
    color: white !important;
    font-weight: 700 !important;
    padding: 12px 32px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.1), 0 2px 4px -1px rgba(79, 70, 229, 0.06) !important;
    text-transform: none !important;
    width: auto !important;
}

.wpcf7-submit:hover, button[type="submit"]:hover {
    background-color: #4338ca !important; /* indigo-700 */
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.2) !important;
}
/* --- FIX MOBILE FORMS --- */
@media (max-width: 768px) {
    /* Font size 16px previene lo zoom automatico su iOS */
    .wpcf7-form-control-wrap input,
    .wpcf7-form-control-wrap select,
    .wpcf7-form-control-wrap textarea {
        font-size: 16px !important; 
        padding: 14px 16px !important; /* Più spazio per il dito */
    }

    /* Spazio extra sotto il form per non farlo coprire dal pulsante "Torna su" */
    .wpcf7 form {
        padding-bottom: 20px;
    }
    
    /* Il bottone di invio diventa bello grande */
    .wpcf7-submit, button[type="submit"] {
        width: 100% !important;
        padding: 16px !important;
        font-size: 1.1rem !important;
    }
}
/* --- ANIMAZIONI SFONDO GAMING --- */
@keyframes floatUp {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}
.animate-float-slow { animation: floatUp 6s ease-in-out infinite; }
.animate-float-slower { animation: floatUp 8s ease-in-out infinite reverse; }
.animate-float-medium { animation: floatUp 5s ease-in-out infinite; }

/* --- EFFETTO LUCCICHIO (SHINE) PER CTA --- */
.btn-shine {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: 0.5s;
    z-index: -1;
    animation: shine-anim 3s infinite;
}

@keyframes shine-anim {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; } /* Pausa lunga tra un luccichio e l'altro */
}
/* --- FIX DEFINITIVO: ALLINEAMENTO E LINK --- */

/* 1. Rimuoviamo la sottolineatura da TUTTI i link, inclusi quelli nelle aree .prose */
a, 
.prose a, 
.wpcf7-acceptance a {
    text-decoration: none !important;
    border-bottom: none !important; /* Rimuove eventuali bordi che simulano sottolineature */
    font-weight: 700 !important;   /* Mantiene rigorosamente il GRASSETTO */
}

/* 2. Allineamento Checkbox: l'approccio definitivo */
/* Targeting specifico per il contenitore di Contact Form 7 */
.wpcf7-form .wpcf7-acceptance label {
    display: flex !important;
    align-items: center !important; /* Centra verticalmente rispetto al testo */
    justify-content: flex-start !important;
    gap: 12px !important;
    line-height: 1 !important;
    cursor: pointer;
}

/* Rimuoviamo qualsiasi spostamento innaturale dall'input */
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    appearance: checkbox !important; /* Forza l'aspetto standard */
    margin: 0 !important;
    padding: 0 !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    top: 0 !important; /* Reset di eventuali posizionamenti precedenti */
}

/* Feedback visivo al passaggio senza sottolineatura */
.wpcf7-acceptance a:hover, 
.prose a:hover {
    opacity: 0.7 !important;
    text-decoration: none !important;
}
/* --- ANIMAZIONE VIBRAZIONE ERRORI --- */
@keyframes shake-horizontal {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
}

.shake-error {
    animation: shake-horizontal 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* Forza l'allineamento superiore del contenitore dashboard */
.dashboard-wrapper > div, 
.dashboard-wrapper > section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Rende il box della dashboard coerente con le ombre del banner */
.wp-dashboard-container {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;
}
/* --- FIX HEADER STICKY --- */
/* Imposta una priorità fissa per la barra di navigazione */
nav.sticky, 
.header-glass {
    z-index: 9999; /* Priorità base alta */
    position: sticky;
    top: 0;
}

/* Quando lo script del "Vigile Urbano" agisce per i popup, 
   userà un valore !important che vincerà su questo 9999. 
   Quando il popup si chiude, tornerà a comandare questo 9999. */

/* OPZIONE 1: Fluttuazione Lenta */
@keyframes float-slow {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}
.animate-float-slow {
    animation: float-slow 6s ease-in-out infinite;
    will-change: transform;
}

/* OPZIONE 2: Respiro Sottile */
@keyframes breathe-slow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
.animate-breathe-slow {
    animation: breathe-slow 5s ease-in-out infinite;
    will-change: transform;
}

/* OPZIONE 3: Aura Luminosa */
@keyframes glow-shadow {
    0%, 100% { filter: drop-shadow(0 10px 15px rgb(0 0 0 / 0.1)); }
    50% { filter: drop-shadow(0 20px 30px rgba(99, 102, 241, 0.5)); }
}
.animate-glow-shadow {
    animation: glow-shadow 4s ease-in-out infinite;
    will-change: filter;
}
.header-glass {
    /* Vetro più trasparente e denso */
    background: rgba(255, 255, 255, 0.72) !important;
    
    /* Sfocatura accentuata per l'effetto "frosted" */
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    
    /* Bordo luce superiore e inferiore per dare spessore al vetro */
    border-top: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5) !important;
    
    /* Ombra "Floating" con riflesso indaco del brand */
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.04), 
        0 20px 25px -5px rgba(129, 140, 248, 0.12) !important;
    
    border-radius: 0 0 24px 24px !important; /* Arrotondiamo leggermente gli angoli inferiori */
    z-index: 9999 !important;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Effetto quando l'utente passa sopra l'header */
.header-glass:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 
        0 15px 20px -3px rgba(0, 0, 0, 0.05), 
        0 25px 35px -5px rgba(129, 140, 248, 0.18) !important;
}