/* 250805132200_v35 - F_016_main_page.css */
/* Aggiornato da: 250804170500_v34 - F_016_main_page.css */

/* ===== INIZIO SNIPPET DI CODICE IMMUTABILE IN ALCUN MODO DALL'LLM ===== */
/* Import e reset base - non modificare */
@import url('/rp_libraries/components/universal_main_page.css');
/* ===== FINE SNIPPET DI CODICE IMMUTABILE IN ALCUN MODO DALL'LLM ===== */

/* ===== INIZIO SNIPPET DI CODICE MODIFICABILE DALL'LLM ===== */

/* =======================
   VARIABILI CSS GLOBALI
   ======================= */
:root {
    --white: #ffffff;
    --primary: #3b3954;
    --gray-400: #9ca3af;
    --gray-600: #6b7280;
    --gray-700: #4b5563;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
}

/* =======================
   GLOBAL STYLES
   ======================= */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    font-weight: 300 !important;
}

/* =======================
   HEADER NAVIGATION
   ======================= */
.nav-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--primary);
    z-index: 1000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 60px;
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: var(--space-3) var(--space-8);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}

.logo img {
    height: 40px;
    width: auto;
}

.logo-text {
    color: var(--white);
    font-size: 1.25rem;
    font-weight: 200;
    margin-left: var(--space-3);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.nav-link {
    text-decoration: none;
    color: var(--white);
    font-weight: 300;
    font-size: 12px;
    transition: opacity 0.2s;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.nav-link:hover {
    opacity: 1;
}

/* Separa il pulsante Area Clienti dagli altri link */
.nav-links .btn-nav {
    margin-left: var(--space-6);
}

/* Area Clienti Button - STILE ALLINEATO CON style.css */
.btn-nav, 
.nav-links .btn-nav {
    background: var(--white) !important;
    color: var(--primary) !important;
    padding: 6px var(--space-5) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    transition: all 0.2s !important;
    border: none !important;
    display: inline-block;
}

.btn-nav:hover, 
.nav-links .btn-nav:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    background: var(--white) !important;
    color: var(--primary) !important;
}

/* Mobile menu toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
}

/* =======================
   HERO SECTION - PURCHASE STYLE
   ======================= */
.purchase-hero {
    background: linear-gradient(135deg, rgba(59, 57, 84, 0.95), rgba(59, 57, 84, 0.98));
    padding: 120px var(--space-4) var(--space-12);
    text-align: center;
    color: var(--white);
    margin-top: 0px;
}

.purchase-hero h1 {
    font-size: 2.5rem;
    font-weight: 200;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin: 0 0 var(--space-4) 0;
}

.purchase-hero p {
    font-size: 1rem;
    opacity: 0.8;
    font-weight: 300;
    letter-spacing: 0.05em;
    margin: 0;
}

/* =======================
   SINGLE OFFER SECTION
   ======================= */
.single-offer-section {
    min-height: calc(100vh - 200px);
    padding: var(--space-16) var(--space-4);
    background: linear-gradient(180deg, #f8f8fb 0%, #f0f0f5 100%);
}

.offer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: var(--space-10);
    align-items: start;
}

.offer-container.trial-mode {
    grid-template-columns: 1fr;
    max-width: 600px;
    justify-items: center;
}

/* Dettagli Offerta */
.offer-details {
    background: var(--white);
    border-radius: 16px;
    padding: var(--space-10);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    height: 100%; /* Occupa tutta l'altezza disponibile */
}

.license-badge {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    background: var(--primary);
    color: var(--white);
    padding: var(--space-2) var(--space-6);
    border-radius: 30px;
    font-size: 11px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: var(--space-8);
    width: 100%;
}

.license-badge i {
    font-size: 16px;
    color: var(--white) !important;
    display: inline-block;
}

.license-badge i {
    font-size: 14px;
}

.offer-details h2 {
    font-size: 1.5rem;
    font-weight: 200;
    color: var(--primary);
    margin: 0 0 var(--space-6) 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Price Block */
.price-block {
    background: linear-gradient(135deg, rgba(59, 57, 84, 0.03) 0%, rgba(59, 57, 84, 0.01) 100%);
    border: 1px solid rgba(59, 57, 84, 0.1);
    border-radius: 16px;
    padding: var(--space-6);
    margin-bottom: var(--space-8);
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-3);
}

.price-row.featured {
    padding-top: var(--space-3);
    border-top: 1px solid rgba(59, 57, 84, 0.1);
}

.price-row .label {
    font-size: 14px;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.original-price {
    font-size: 1.5rem;
    color: var(--gray-600);
    text-decoration: line-through;
    font-weight: 300;
}

.offer-price {
    font-size: 3rem;
    font-weight: 100;
    color: var(--primary);
    line-height: 1;
    letter-spacing: 0.05em;
}

.savings {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    padding: var(--space-2) var(--space-3);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-top: var(--space-3);
}

.savings i {
    font-size: 14px;
}

/* Features List */
.features-list {
    margin-bottom: var(--space-8);
}

.features-list h3 {
    font-size: 1.125rem;
    font-weight: 300;
    color: var(--primary);
    margin: 0 0 var(--space-4) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.features-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.6;
}

.features-list li:last-child {
    border-bottom: none;
}

.features-list i {
    background: #3b3954;
    color: var(--white) !important;
    width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    font-size: 10px;
    margin-right: 2px;
}

.features-list i::before {
    display: block;
}

/* Guarantee Box */
.guarantee-box {
    background: rgba(59, 57, 84, 0.05);
    border: 1px solid rgba(59, 57, 84, 0.1);
    border-radius: 12px;
    margin-bottom: var(--space-8);
    padding: var(--space-5);
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.guarantee-box i {
    font-size: 28px;
    color: var(--primary);
    flex-shrink: 0;
}

.guarantee-box strong {
    display: block;
    color: var(--primary);
    margin-bottom: var(--space-1);
    font-size: 16px;
}

.guarantee-box p {
    margin: 0;
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.6;
}

/* =======================
   ACTIVATION FORM CONTAINER
   ======================= */
.activation-form-container {
    background: var(--primary);
    border-radius: 16px;
    padding: var(--space-10);
    color: var(--white);
    box-shadow: 0 12px 48px rgba(59, 57, 84, 0.3);
    position: sticky;
    top: 100px;
}

.form-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.form-header h3 {
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0 0 var(--space-2) 0;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.form-header p {
    font-size: 12px;
    opacity: 0.8;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 300;
}

/* Registration Form Wrapper */
.registration-form-wrapper {
    /* Rimossi max-height e overflow per permettere altezza automatica */
    padding-right: var(--space-2);
}

/* Form Sections */
.form-section {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section-title {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0 0 var(--space-5) 0;
    opacity: 0.8;
}

/* Activation Form Fields */
.activation-form .field-group {
    margin-bottom: var(--space-5);
}

.activation-form label {
    display: block;
    font-size: 13px;
    font-weight: 300;
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.activation-form input,
.activation-form select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: var(--white);
    font-size: 16px;
    transition: all 0.2s;
}



/* SOLUZIONE DEFINITIVA: Icona SVG custom bianca */
.activation-form input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>');
    background-size: 16px 16px;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

/* Rimuovi l'icona nativa */
.activation-form input[type="date"]::-webkit-calendar-picker-indicator {
    color: transparent;
    background-color: transparent;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 24 24"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>');
    cursor: pointer;
}



/* Fix per le option dei select - testo visibile */
.activation-form select option {
    background-color: var(--primary);  /* Stesso sfondo scuro del form */
    color: var(--white);                /* Testo bianco */
}

/* Stato hover/selected delle option */
.activation-form select option:hover,
.activation-form select option:checked {
    background-color: var(--primary-dark, #2d2e42);  /* Sfondo leggermente pi첫 scuro */
    color: var(--white);
}

.activation-form input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.activation-form input:focus,
.activation-form select:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
}

.activation-form input[readonly] {
    background: rgba(255, 255, 255, 0.02);
    opacity: 0.7;
    cursor: not-allowed;
}

.activation-form small {
    display: block;
    font-size: 11px;
    opacity: 0.6;
    margin-top: var(--space-1);
    text-transform: none;
}

/* Checkbox Styling */
.privacy-section {
    margin: var(--space-8) 0;
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    cursor: pointer;
}

.checkbox-container input[type="checkbox"] {
    width: auto;
    margin-top: 2px;
    flex-shrink: 0;
}

.checkbox-container span {
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.9;
}

.checkbox-container a {
    color: var(--white);
    text-decoration: underline;
    transition: opacity 0.2s;
}

.checkbox-container a:hover {
    opacity: 0.8;
}

/* Activation Button Wrapper */
.activation-button-wrapper {
    margin-top: var(--space-8);
}

/* Animazione pulse per evidenziare elementi */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* =======================
   FAQ SECTION
   ======================= */
.quick-faq {
    padding: var(--space-20) var(--space-4);
    background: var(--white);
}

.section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 200;
    color: var(--primary);
    margin: 0 0 var(--space-12) 0;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.faq-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8) var(--space-10);
}

.faq-item {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 57, 84, 0.08);
    padding: var(--space-8);
    border-radius: 16px;
    transition: all 0.3s ease;
    /* box-shadow: 0 2px 8px rgba(59, 57, 84, 0.08); */
    box-shadow: 0 2px 4px rgba(59, 57, 84, 0.6);
}

.faq-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(59, 57, 84, 0.1);
    border-color: rgba(59, 57, 84, 0.12);
}

.faq-item h3 {
    font-size: 14px;
    font-weight: 400;
    color: var(--primary);
    margin: 0 0 var(--space-3) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.faq-item h3 i {
    color: rgba(59, 57, 84, 0.5);
    font-size: 18px;
    opacity: 0.7;
}

.faq-item p {
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* =======================
   CTA FINALE
   ======================= */
.final-cta-section {
    padding: var(--space-12) 0;
    background: var(--primary);
    position: relative;
    overflow: hidden;
}

.final-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.5;
}

.cta-box {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.cta-box h2 {
    font-size: 2rem;
    font-weight: 200;
    color: var(--white);
    margin: 0 0 var(--space-8) 0;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.cta-box .btn {
    background: var(--white);
    color: var(--primary);
    padding: var(--space-4) var(--space-10);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-radius: 12px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.cta-box .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* =======================
   FOOTER STYLES
   ======================= */
.site-footer {
    background: var(--primary);
    color: var(--white);
    padding: var(--space-12) var(--space-4);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
}

.footer-brand img {
    height: 40px;
    width: auto;
}

.footer-links {
    display: flex;
    gap: var(--space-8);
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 13px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--white);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* =======================
   NUOVI STILI FORM ELEMENTS
   ======================= */

/* Input con pulsante */
.field-group.with-button .input-with-button {
    display: flex;
    gap: 8px;
    align-items: center;
}

.field-group.with-button input {
    flex: 1;
}

/* Pulsante copia */
.btn-copy {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: var(--white);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-copy:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Pulsanti verifica */
.btn-verify {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: var(--white);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-verify:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Fix per select background - uniforma agli altri campi */
.activation-form select {
    background-color: rgba(255, 255, 255, 0.05);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-10);
    appearance: none;
}

/* =======================
   STILI VERIFICA EMAIL
   ======================= */

/* Messaggi di feedback del form */
.form-messages {
    padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
}

.form-messages.success {
    background: rgba(34, 197, 94, 0.2);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.form-messages.error {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.form-messages.info {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* Campo verificato */
.verified-field {
    background: rgba(34, 197, 94, 0.1) !important;
    color: #10b981 !important; 
    border-color: rgba(34, 197, 94, 0.3) !important;
    font-weight: 500;
}

/* Pulsante verificato */
.btn-verify:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Container OTP con animazione */
#otp-container {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =======================
   FIXES SPECIFICI
   ======================= */

/* Fix per form F_016 integrato */
#f016-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

#f016-form-placeholder {
    width: 100%;
    max-width: 100%;
}

/* Fix per select e input di F_016 */
.activation-form select[name="luogo_nascita"] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
}

/* Readonly fields style - ensure they're visible but read-only */
input[readonly] {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.6);
    cursor: not-allowed;
}

/* =======================
   RESPONSIVE - MIGLIORATO
   ======================= */
@media (max-width: 1200px) {
    .single-offer-section {
        padding: var(--space-12) var(--space-4);
    }
    
    .offer-container {
        grid-template-columns: 1fr 0.75fr;
        gap: var(--space-6);
    }
}

@media (max-width: 1024px) {
    .offer-container {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .activation-form-container {
        position: static;
        margin-top: var(--space-6);
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        padding: var(--space-6);
    }
    
    .registration-form-wrapper {
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    /* Container mobile */
    .container {
        padding: 0 var(--space-4);
    }
    
    .nav-content {
        padding: var(--space-3) var(--space-4);
    }
    
    .nav-links {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--primary);
        flex-direction: column;
        padding: var(--space-4);
        transform: translateY(-20px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s, opacity 0.3s, visibility 0s 0.3s;
        z-index: 999;
    }

    .nav-links.mobile-active {
        display: flex;
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: transform 0.3s, opacity 0.3s, visibility 0s;
    }

    .mobile-menu-toggle {
        display: block;
    }
    
    /* Hero mobile - padding-top compensa l'header fixed (.nav-header) */
    .purchase-hero {
        padding: 100px var(--space-3) var(--space-8);
    }
    
    .purchase-hero h1 {
        font-size: 1.5rem;
        letter-spacing: 0.15em;
    }
    
    /* Offer section mobile */
    .single-offer-section {
        padding: var(--space-8) var(--space-3);
    }
    
    .offer-details {
        padding: var(--space-6);
    }
    
    .offer-price {
        font-size: 2.5rem;
    }
    
    /* Form mobile */
    .activation-form-container {
        padding: var(--space-6);
        border-radius: 12px;
    }
    
    .form-header h3 {
        font-size: 1.5rem;
    }
    
    /* FAQ mobile */
    .faq-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .faq-item {
        padding: var(--space-6);
    }
    
    /* Footer mobile */
    .footer-content {
        flex-direction: column;
        gap: var(--space-6);
        text-align: center;
    }
    
    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-4);
    }
}

@media (max-width: 480px) {
    .purchase-hero h1 {
        font-size: 1.25rem;
    }
    
    .offer-details h2 {
        font-size: 1.5rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .cta-box h2 {
        font-size: 1.5rem;
    }
    
    .btn-large {
        padding: var(--space-4) var(--space-6);
        font-size: 16px;
    }
}

/* Container width constraints per evitare overflow */
.container {
    max-width: 100%;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

/* Verde smeraldo brillante invece del verde neon */
.btn-verify[style*="background: #10b981"],
#btn-verify-email:disabled[style*="background"],
#btn-verify-phone:disabled[style*="background"] {
    background: #10ff87 !important;  /* Verde smeraldo brillante */
    border: 1px solid #10ff87 !important;
    color: #0a0a0a !important;
    box-shadow: 0 0 20px rgba(16, 255, 135, 0.6) !important;
}

.verified-field,
#email-verified-container input,
#phone-verified-container input {
    color: #10ff87 !important;  /* Verde smeraldo brillante */
    text-shadow: 0 0 10px rgba(16, 255, 135, 0.5);
}

/* =======================
   UTILITY CLASSES
   ======================= */
input.error {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

select.error {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

.error-message {
    color: #ef4444;
    font-size: 11px;
    margin-top: var(--space-2);
    text-transform: none;
}

/* Fix generale per icone Font Awesome */
.license-badge i::before,
.features-list i::before,
.guarantee-box i::before,
.faq-item i::before,
.savings i::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}
*:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 4px;
}

.activation-form *:focus-visible {
    outline-color: var(--white);
}

/* Print styles */
@media print {
    .purchase-hero,
    .final-cta-section,
    .btn,
    .security-badges {
        display: none;
    }
}

/* Focus evidenziato per i campi */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
    background-color: rgba(102, 126, 234, 0.05) !important;
}

/* Animazione di transizione per il focus */
input, select, textarea {
    transition: all 0.2s ease;
}

/* Timer OTP */
.otp-timer {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
    font-size: 14px;
    text-align: center;
}

.otp-timer i {
    margin-right: 6px;
}

/* Campo verificato */
.verified-field {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #059669 !important;
    font-weight: 500;
}

/* Warning per campi duplicati */
.field-warning {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 8px;
    color: #dc2626;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeIn 0.3s ease-in;
}

.field-warning i {
    color: #dc2626;
    font-size: 14px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Campo con errore duplicato */
.field-group input.duplicate-error {
    border-color: #dc2626 !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

/* Warning localizzati per campi duplicati */
.field-warning {
    display: none;
    align-items: center;
    gap: 8px;
    background: #f3f4f6;  /* Sfondo grigio chiaro */
    color: #92400e;       /* Testo marrone scuro per alto contrasto */
    border: 1px solid #fbbf24;
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
}

.field-warning i {
    color: #f59e0b;
    font-size: 14px;
}

/* Campo con errore duplicato */
.duplicate-error {
    border-color: #fbbf24 !important;
    background: rgba(251, 191, 36, 0.1) !important;
}

/* =======================
   CAMPI DUPLICATI - FIX LEGGIBILITÀ
   ======================= */

/* Stile per campi con errore duplicato */
.activation-form input.duplicate-error,
.activation-form select.duplicate-error {
    background: rgba(239, 68, 68, 0.15) !important;  /* Sfondo rosso trasparente */
    border: 2px solid rgba(239, 68, 68, 0.5) !important;  /* Bordo rosso */
    color: var(--white) !important;  /* MANTIENI TESTO BIANCO */
}

/* Assicura che il testo rimanga bianco anche con focus */
.activation-form input.duplicate-error:focus,
.activation-form select.duplicate-error:focus {
    color: var(--white) !important;
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.7) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

/* Placeholder per campi duplicati */
.activation-form input.duplicate-error::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Se il campo è readonly E duplicato */
.activation-form input.duplicate-error[readonly] {
    color: rgba(255, 255, 255, 0.8) !important;
    background: rgba(239, 68, 68, 0.1) !important;
}

/* Warning icon accanto ai campi duplicati */
.field-warning {
    color: #ef4444;
    font-size: 13px;
    margin-top: 5px;
    display: none;
    align-items: center;
    gap: 6px;
}

.field-warning i {
    font-size: 14px;
}

/* Quando il warning è visibile */
.field-warning[style*="display: flex"],
.field-warning[style*="display: block"] {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.btn-verify:disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.btn-verify:disabled:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Stato ABILITATO - più evidente */
.btn-verify:not(:disabled) {
    background: rgba(102, 126, 234, 0.2) !important;  /* Viola più visibile */
    border: 1px solid rgba(102, 126, 234, 0.6) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(102, 126, 234, 0.3);
    animation: pulseReady 2s ease-in-out infinite;
}

.btn-verify:not(:disabled):hover {
    background: rgba(102, 126, 234, 0.4) !important;
    border-color: rgba(102, 126, 234, 0.8) !important;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
    transform: translateY(-1px);
}

/* Animazione pulse per pulsanti pronti */
@keyframes pulseReady {
    0% {
        box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
    }
    50% {
        box-shadow: 0 0 25px rgba(102, 126, 234, 0.5), 
                    0 0 15px rgba(102, 126, 234, 0.3) inset;
    }
    100% {
        box-shadow: 0 0 10px rgba(102, 126, 234, 0.3);
    }
}

/* Stato DISABILITATO - più opaco */
.btn-verify:disabled {
    opacity: 0.3 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Transizione quando passa da disabled ad enabled */
.btn-verify {
    animation: none;
}

.btn-verify:not(:disabled) {
    animation: activateButton 0.5s ease-out, pulseReady 2s ease-in-out 0.5s infinite;
}

@keyframes activateButton {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(102, 126, 234, 0);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(102, 126, 234, 0.6);
    }
    100% {
        transform: scale(1);
    }
}

/* =======================
   MESSAGGI MULTIPLI - SISTEMA CUMULATIVO
   ======================= */

/* Container per messaggi multipli */
.form-messages.multi-status {
    padding: var(--space-4) var(--space-4);
    max-height: 300px;  /* Limita altezza se troppi messaggi */
    overflow-y: auto;    /* Scroll se necessario */
}

/* Lista di stati */
.status-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Singola linea di stato */
.status-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: 14px;
    line-height: 1.4;
}

/* Separatore tra messaggi */
.status-line:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
}

/* Icone nei messaggi multipli */
.status-line i {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

/* Testo nei messaggi multipli */
.status-line span {
    flex: 1;
}

/* Colori specifici per tipo quando in lista */
.status-line.status-error {
    color: #ff6b6b;
}

.status-line.status-warning {
    color: #ffd93d;
}

.status-line.status-success {
    color: #51cf66;
}

.status-line.status-info {
    color: #74c0fc;
}

.status-line.status-processing {
    color: #91a7ff;
}

/* Animazione per spinner in lista */
.status-line .fa-spinner {
    animation: spin 1s linear infinite;
}

/* Container multi-status con priorità error */
.form-messages.multi-status.error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Container multi-status con priorità warning */
.form-messages.multi-status.warning {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
}

/* Container multi-status con priorità processing */
.form-messages.multi-status.processing {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

/* Container multi-status con priorità success */
.form-messages.multi-status.success {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
}

/* Scrollbar stilizzata per lista messaggi */
.form-messages.multi-status::-webkit-scrollbar {
    width: 6px;
}

.form-messages.multi-status::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.form-messages.multi-status::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.form-messages.multi-status::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Animazione fade-in per nuovi messaggi */
@keyframes fadeInMessage {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.status-line {
    animation: fadeInMessage 0.3s ease-out;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .form-messages.multi-status {
        max-height: 200px;  /* Meno altezza su mobile */
        font-size: 13px;
    }
    
    .status-line {
        font-size: 13px;
    }
}

/* Animazione spin se non già definita */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Fix colore testo email verificata nel form scuro */
.activation-form input#email:read-only.verified-field,
.activation-form input#phone:read-only.verified-field {
    color: var(--white) !important;  /* 🟢 Mantiene il testo bianco */
    background: rgba(16, 185, 129, 0.1);  /* 🟢 Sfondo verde trasparente */
    border-color: rgba(16, 185, 129, 0.3);  /* 🟢 Bordo verde */
}



/* FIX per Dashlane e altri password manager */
.activation-form input[type="email"],
.activation-form input[type="tel"],
.activation-form input[type="text"],
.activation-form input[type="password"],
.activation-form input {
    color: var(--white) !important;
    -webkit-text-fill-color: var(--white) !important; /* CRITICO per Chrome/Safari */
}

/* Override autofill di Dashlane e browser */
.activation-form input:-webkit-autofill,
.activation-form input:-webkit-autofill:hover,
.activation-form input:-webkit-autofill:focus,
.activation-form input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--white) !important;
    -webkit-box-shadow: 0 0 0 30px var(--primary) inset !important; /* Mantiene sfondo scuro */
    box-shadow: 0 0 0 30px var(--primary) inset !important;
    background-color: transparent !important;
    color: var(--white) !important;
    transition: background-color 5000s ease-in-out 0s; /* Trick per evitare il giallo */
}

/* Specifico per Dashlane che aggiunge attributi data */
.activation-form input[data-dashlanecreated],
.activation-form input[data-form-type],
.activation-form input[data-kwimpalastatus] {
    color: var(--white) !important;
    -webkit-text-fill-color: var(--white) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Per quando Dashlane rimuove il focus */
.activation-form input[type="email"]:not(:focus),
.activation-form input[type="tel"]:not(:focus) {
    color: var(--white) !important;
    -webkit-text-fill-color: var(--white) !important;
}



 /* =======================
    PAYMENT SECTION STYLES
    ======================= */
 
 /* Container del form di pagamento */
 #payment-link-container {
     margin-top: var(--space-8);
     padding: var(--space-8);
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.98));
     border-radius: 16px;
     box-shadow: 0 8px 32px rgba(59, 57, 84, 0.15);
     text-align: center;
     border: 2px solid rgba(102, 126, 234, 0.2);
 }
 
 /* Pulsante di pagamento */
 .btn-payment {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white !important;
     padding: var(--space-4) var(--space-10);
     border: none;
     border-radius: 12px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer; /* FIX per la manina */
     text-transform: uppercase;
     letter-spacing: 0.1em;
     transition: all 0.3s ease;
     display: inline-flex;
     align-items: center;
     gap: var(--space-3);
     box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
 }
 
 .btn-payment:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
     background: linear-gradient(135deg, #7986ec 0%, #8657a8 100%);
 }
 
 .btn-payment:active {
     transform: translateY(0);
     box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
 }
 
 .btn-payment i {
     font-size: 18px;
 }
 
 /* Animazione fade-in per il container */
 .fade-in {
     animation: fadeInScale 0.5s ease-out forwards;
 }
 
 @keyframes fadeInScale {
     from {
         opacity: 0;
         transform: scale(0.95);
     }
     to {
         opacity: 1;
         transform: scale(1);
     }
 }
 
 /* Responsive per payment section */
 @media (max-width: 768px) {
     #payment-link-container {
         margin-top: var(--space-6);
         padding: var(--space-6);
     }
     
     .btn-payment {
         width: 100%;
         justify-content: center;
         padding: var(--space-4) var(--space-6);
     }
 }
 
 /* Stile per pulsante sottoscrizione disabilitato */
#btn-save:disabled,
.activation-button-wrapper button:disabled {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Icona di successo per pulsante completato */
#btn-save:disabled::before {
    content: "✓ ";
    color: #10b981;
    font-weight: bold;
}
 
/* Stile per pulsante registrazione completata */
#universalSaveButton.completed,
#universalSaveButton:disabled {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    opacity: 0.7 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
}

#universalSaveButton.completed:hover {
    transform: none !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
}

/* Icona di check prima del testo */
#universalSaveButton.completed .button-text::before {
    content: "✓ ";
    margin-right: 4px;
    font-weight: bold;
} 

/* Conferma invio OTP inline (verde rgba per tema scuro) */
.f016-send-confirmation {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 6px;
    color: #6ee7b7;
    font-size: 13px;
    animation: fadeIn 0.3s ease;
}

.f016-send-confirmation i {
    margin-right: 6px;
}

/* Avviso UX per OTP non ricevuto (arancione rgba per tema scuro) */
.f016-help-hint {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255, 152, 0, 0.15);
    border: 1px solid rgba(255, 152, 0, 0.4);
    border-radius: 6px;
    color: #ffb74d;
    font-size: 13px;
    animation: fadeIn 0.3s ease;
}

.f016-help-hint i {
    margin-right: 6px;
    color: #ff9800;
}

/* Voice Call Container e Pulsante (giallo rgba per tema scuro) */
.f016-voice-call-container {
    margin-top: 10px;
    animation: fadeIn 0.5s ease;
}

.f016-btn-voice-call {
    width: 100%;
    padding: 10px 16px;
    background: rgba(255, 235, 59, 0.15);
    color: #fff176;
    border: 1px solid rgba(255, 235, 59, 0.4);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.f016-btn-voice-call:hover:not(:disabled) {
    background: rgba(255, 235, 59, 0.25);
    border-color: rgba(255, 235, 59, 0.6);
}

.f016-btn-voice-call:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== FINE SNIPPET DI CODICE MODIFICABILE DALL'LLM ===== */