/* ============================================================
   CRO EXTRA — stili plain per le 7 feature di conversione (Audit 2026)
   Questo file e' indipendente dal bundle Tailwind: bypassa il need di
   npm run build sul server. Va uploadato in public/css/cro-extra.css
   ed e' incluso via <link> in layouts/app.blade.php.
   ============================================================ */

/* ---------- Color tokens (ridichiarati per sicurezza) ---------- */
:root {
    --cro-green:       #2AB34A;
    --cro-green-dark:  #229A3F;
    --cro-green-soft:  #EAFBEF;
    --cro-violet:      #6E3FF3;
    --cro-yellow:      #FACC15;
    --cro-text:        #0B0F19;
    --cro-text-soft:   #475569;
    --cro-bg-soft:     #F7F9FC;
    --cro-border:      #E5E7EB;
}

/* ============================================================
   1. EARLY-BIRD BANNER (fallback aggiuntivo, gia' inline-styled)
   ============================================================ */
.cro-pulse-yellow {
    animation: cro-pulse 2s infinite;
}
@keyframes cro-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .85; transform: scale(1.04); }
}

/* ============================================================
   2. WHATSAPP FLOATING BUTTON
   ============================================================ */
.cro-wa {
    position: fixed;
    right: 16px;
    bottom: 96px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
@media (min-width: 768px) {
    .cro-wa {
        bottom: 24px;
        right: 24px;
    }
}
.cro-wa-btn {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    background: #25D366;
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease;
}
.cro-wa-btn:hover { transform: scale(1.1); }
.cro-wa-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: #25D366;
    opacity: 0.3;
    animation: cro-wa-ping 2.2s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes cro-wa-ping {
    0%   { transform: scale(1);   opacity: 0.4; }
    80%, 100% { transform: scale(1.5); opacity: 0; }
}
.cro-wa-icon {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    color: #FFFFFF;
}
.cro-wa-tooltip {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(11,15,25,.12);
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 700;
    color: #1F2937;
    white-space: nowrap;
}
@media (min-width: 768px) {
    .cro-wa:hover .cro-wa-tooltip { display: inline-flex; }
}

/* ============================================================
   3. STICKY MOBILE CTA BAR (tel + whatsapp + workshop)
   ============================================================ */
.cro-mobile-cta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 50;
    background: #E5E7EB;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
    border-top: 1px solid #E5E7EB;
}
@media (min-width: 768px) {
    .cro-mobile-cta { display: none; }
}
.cro-mobile-cta a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    background: #FFFFFF;
    text-decoration: none;
    transition: background 0.15s ease;
}
.cro-mobile-cta a:active { transform: scale(0.96); }
.cro-mobile-cta a.cro-mobile-cta--primary {
    background: var(--cro-green);
}
.cro-mobile-cta a.cro-mobile-cta--primary:hover {
    background: var(--cro-green-dark);
}
.cro-mobile-cta-label {
    font-size: 10px;
    font-weight: 700;
    color: #1F2937;
    margin-top: 4px;
}
.cro-mobile-cta--primary .cro-mobile-cta-label { color: #FFFFFF; }
.cro-mobile-cta-icon { width: 20px; height: 20px; color: #1F2937; }
.cro-mobile-cta-icon--green { color: #25D366; }
.cro-mobile-cta--primary .cro-mobile-cta-icon { color: #FFFFFF; }

/* Spazio in fondo body per non far coprire contenuto da sticky bar */
@media (max-width: 767.98px) {
    body { padding-bottom: 64px; }
}

/* ============================================================
   4. EXIT-INTENT MODAL
   ============================================================ */
.cro-exit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 70;
}
.cro-exit-modal-wrap {
    position: fixed;
    inset: 0;
    z-index: 71;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.cro-exit-modal {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 32px;
    max-width: 480px;
    width: 100%;
    position: relative;
    box-shadow: 0 24px 60px rgba(11,15,25,0.25);
}
@media (min-width: 768px) { .cro-exit-modal { padding: 40px; } }

/* ============================================================
   5. SOCIAL PROOF BAR
   ============================================================ */
.cro-proof-bar {
    background: linear-gradient(90deg, var(--cro-green-soft) 0%, #FFFFFF 50%, var(--cro-green-soft) 100%);
    border-top: 1px solid var(--cro-border);
    border-bottom: 1px solid var(--cro-border);
}
.cro-proof-bar-inner {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    flex-wrap: wrap;
}
.cro-proof-divider { color: #D1D5DB; display: none; }
@media (min-width: 768px) {
    .cro-proof-divider { display: inline; }
    .cro-proof-bar-inner { gap: 24px; font-size: 14px; }
}
.cro-stars { color: #F59E0B; letter-spacing: 1px; }
.cro-strong-green { color: var(--cro-green); font-weight: 800; }

/* ============================================================
   6. TRUST BADGES STRIP
   ============================================================ */
.cro-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
}
@media (min-width: 640px) { .cro-trust-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .cro-trust-grid { grid-template-columns: repeat(5, 1fr); } }
.cro-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px;
    border-radius: 12px;
    transition: background 0.18s;
}
.cro-trust-item:hover { background: var(--cro-bg-soft); }
.cro-trust-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: var(--cro-green-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.cro-trust-icon { width: 24px; height: 24px; color: var(--cro-green); }
.cro-trust-title { font-size: 12px; font-weight: 700; color: #1F2937; }
.cro-trust-sub { font-size: 10px; color: #6B7280; margin-top: 4px; }

/* ============================================================
   7. TESTIMONIALS (grid prestige fallback)
   ============================================================ */
.cro-testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}
@media (min-width: 768px) { .cro-testimonials-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   PROFESSIONS PAGES — padding ottimizzato mobile/desktop
   ============================================================ */
.prof-section { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 768px) { .prof-section { padding-top: 80px; padding-bottom: 80px; } }
.prof-hero { padding-top: 48px; padding-bottom: 56px; }
@media (min-width: 768px) { .prof-hero { padding-top: 80px; padding-bottom: 96px; } }
.prof-card { padding: 20px; }
@media (min-width: 768px) { .prof-card { padding: 28px; } }
.prof-card-tight { padding: 16px; }
@media (min-width: 768px) { .prof-card-tight { padding: 22px; } }
.prof-section-title { margin-bottom: 32px; }
@media (min-width: 768px) { .prof-section-title { margin-bottom: 48px; } }
.prof-grid-gap { gap: 16px; }
@media (min-width: 768px) { .prof-grid-gap { gap: 20px; } }

/* Container un filo più stretto per leggibilità */
.prof-container {
    max-width: 1180px;
    margin-left: auto; margin-right: auto;
    padding-left: 16px; padding-right: 16px;
}
@media (min-width: 768px) { .prof-container { padding-left: 32px; padding-right: 32px; } }

/* ============================================================
   ACCESSIBILITY: reduce motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .cro-wa-btn::before,
    .cro-pulse-yellow {
        animation: none !important;
    }
}