:root {
            --bg-light: #fbfbfd;
            --bg-white: #ffffff;
            --bg-gray-1: #eef2f5; 
            --bg-gray-2: #e5e5ea;
            --text-dark: #1d1d1f;
            --text-gray: #86868b;
            --accent-blue: #0071e3;
        }
        html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
        body { margin: 0; padding: 60px 0 0 0; font-family: 'Inter', sans-serif; color: var(--text-dark); background-color: var(--bg-white); -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; }
        h1, h3 { letter-spacing: -0.02em; margin-top: 0; margin-bottom: 10px; }

        nav { position: fixed; top: 0; width: 100%; height: 60px; background-color: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); z-index: 1000; }
        /* 3 colonne uguali ai lati (1fr / auto / 1fr): il logo resta a
           sinistra, il link account/login a destra, e il menu principale
           (colonna centrale, larga solo quanto il suo contenuto) risulta
           perfettamente centrato perche' le due colonne laterali hanno
           sempre la stessa larghezza tra loro, qualunque cosa contengano. */
        .nav-container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
        .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; text-decoration: none; color: var(--text-dark); transition: color 0.3s ease; justify-self: start; }
        .nav-brand:hover { color: var(--accent-blue); }
        .nav-logo { height: 28px; width: auto; border-radius: 50%; object-fit: cover; }
        .mobile-menu-btn { display: none; }
        /* Contenitore dedicato per la campanella notifiche su telefono
           (21/09/2026, richiesta di ALFI): su schermi stretti il menu
           principale (.nav-menu-wrapper) resta "display:none" finche' non
           lo si apre col tasto MENU, quindi qualunque cosa venga inserita
           al suo interno (come la campanella, iniettata da site-config.js)
           restava invisibile insieme a lui. Questo div vive FUORI dal menu,
           tra logo e tasto MENU, e site-config.js sposta li' la campanella
           solo su schermi stretti - vedi insertBellItem() in site-config.js. */
        .nav-mobile-bell-slot { display: none; }
        /* Il div che raggruppa i due <ul> (menu centrale + account/login):
           "display:contents" lo rende invisibile alla griglia, cosi' i due
           <ul> al suo interno diventano direttamente le colonne 2 e 3. Su
           mobile questa regola viene sovrascritta piu' sotto, cosi' il div
           torna a comportarsi come il menu a tendina di sempre. */
        .nav-menu-wrapper { display: contents; }
        nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; align-items: center; }
        #nav-links { justify-self: center; }
        #nav-links-right { justify-self: end; }
        #nav-links a, #nav-links-right a { text-decoration: none; color: var(--text-dark); font-size: 12px; font-weight: 500; letter-spacing: -0.01em; transition: color 0.3s ease; text-transform: uppercase; }
        #nav-links a:hover, #nav-links-right a:hover { color: var(--accent-blue); }
        .separator { color: #d2d2d7; font-weight: 300; font-size: 14px; user-select: none; }
        #nav-links-right a.nav-cta { background-color: var(--accent-blue); color: #fff; padding: 8px 18px; border-radius: 30px; }
        #nav-links-right a.nav-cta:hover { background-color: color-mix(in srgb, var(--accent-blue) 80%, black); color: #fff; }
        #nav-tutorial-link { display: inline-flex; align-items: center; gap: 5px; }
        #nav-tutorial-lock { font-size: 10px; color: var(--text-gray); }
        .nav-icon-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-gray-1); color: var(--text-dark) !important; font-size: 13px; }
/* Icone circolari del menu (upload/salvati/notifiche/profilo) piu' vicine
   tra loro (23/09/2026, richiesta di ALFI: "i pallini sono troppo
   lontani") - margine negativo mirato solo sugli <li> che contengono
   un'icona (.nav-icon-btn), senza toccare il gap:20px di "nav ul" usato
   dalle voci di testo del menu. */
#nav-links-right li:has(.nav-icon-btn, .nav-avatar-link, .notif-bell-btn) { margin-inline: -6px; }
        .nav-icon-btn:hover { background: var(--accent-blue); color: #fff !important; }

        /* Foto profilo al posto del testo "MY ACCOUNT" quando si e'
           loggati (23/09/2026, richiesta di ALFI, ispirato a Thangs/Cults):
           stesso cerchio/dimensione delle altre icone del menu (.nav-icon-btn
           qui sopra), cosi' Salvati + campanella + profilo sembrano un
           gruppetto di icone coerente invece di stili mescolati. Senza foto
           caricata (la maggior parte degli utenti, all'inizio) mostra
           un'iconcina persona invece di un cerchio vuoto - vedi
           updateNavAccountLink() in site-config.js. */
        .nav-avatar-link { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--bg-gray-1); }
        .nav-avatar-link:hover { box-shadow: 0 0 0 2px var(--accent-blue); }
        .nav-avatar-link .nav-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

        /* Campanella/e notifiche nel menu (iniettate da site-config.js) */
        .notif-bell-item { position: relative; display: flex; align-items: center; }
        .notif-bell-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-gray-1); border: none; cursor: pointer; font-size: 13px; padding: 0; }
        .notif-bell-btn:hover { background: var(--accent-blue); color: #fff !important; }
        .notif-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e0245e; color: #fff; font-size: 10px; font-weight: 700; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 2px var(--bg-white); }
                /* Richiesta ALFI 23/09/2026: "nuvola delle notifiche piu' lunga,
           cosi' posso vederne di piu'" - prima si fermava sempre a 420px
           anche su schermi grandi, con tanto spazio vuoto sotto sprecato.
           Ora si allunga quasi fino al fondo dello schermo (calc(100vh -
           64px): 44px di "top" + 20px di margine in fondo), invece di un
           numero fisso - la seconda riga con "dvh" e' il fallback per
           Safari da telefono (vedi stessa tecnica gia' usata per il popup
           dei piani in .modal-box qui sotto): i browser che non supportano
           "dvh" ignorano questa riga e restano sulla prima ("vh"). */
        .notif-dropdown { position: absolute; top: 44px; right: 0; width: 340px; max-width: 90vw; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--bg-white); border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); text-align: left; z-index: 1100; }
        .notif-dropdown-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; font-weight: 700; font-size: 0.85rem; text-transform: none; border-bottom: 1px solid #e5e5ea; position: sticky; top: 0; background: var(--bg-white); border-radius: 16px 16px 0 0; }
        .notif-mark-read-btn { background: none; border: none; color: var(--accent-blue); font-size: 0.72rem; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; padding: 0; text-transform: none; letter-spacing: 0; }
        .notif-mark-read-btn:hover { text-decoration: underline; }
        .notif-section-title { display: flex; align-items: center; gap: 8px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 12px 16px 8px; }
        .notif-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; text-decoration: none; color: var(--text-dark); text-transform: none; }
        .notif-item:link, .notif-item:visited { color: var(--text-dark); text-decoration: none; }
        /* #nav-links/#nav-links-right hanno una regola "a { text-transform: uppercase }"
           per le voci del menu: essendo su un ID, batte ".notif-item { text-transform: none }"
           (una classe) a parita' di tutto il resto - qui ripristiniamo none con la
           stessa "forza" (ID + classe) solo per le notifiche, senza toccare il menu. */
        #nav-links a.notif-item, #nav-links-right a.notif-item { text-transform: none; }
        a.notif-item:hover { background: var(--bg-gray-1); }
        .notif-item-thumb { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--bg-gray-2); }
        .notif-item-avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
        .notif-item-avatar-placeholder { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-gray-2); color: var(--text-gray); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }
        .notif-item-text { font-size: 0.8rem; line-height: 1.4; display: flex; flex-direction: column; gap: 2px; font-weight: 400; min-width: 0; }
        .notif-item-time { color: var(--text-gray); font-size: 0.7rem; }
        /* "margin-left: auto" spinge il pallino non-letto (se c'e') sempre
           in fondo alla riga della notifica. */
        .notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-blue); flex-shrink: 0; margin-left: auto; }
        .notif-empty, .notif-loading { padding: 24px 16px; text-align: center; color: var(--text-gray); font-size: 0.82rem; margin: 0; }
        /* Schede (tab) in cima al pannello notifiche, per switchare tra i
           tipi di notifica invece di scorrerle tutte in un'unica lista
           lunga (17/09/2026, richiesta di ALFI, ispirato a Thangs). */
        .notif-tabs { display: flex; gap: 2px; padding: 0 6px; border-bottom: 1px solid #e5e5ea; overflow-x: auto; position: sticky; top: 49px; background: var(--bg-white); z-index: 1; }
        .notif-tab { display: flex; align-items: center; gap: 6px; background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 8px; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700; color: var(--text-gray); cursor: pointer; white-space: nowrap; text-transform: none; letter-spacing: 0; }
        .notif-tab:hover { color: var(--text-dark); }
        .notif-tab.active { color: var(--accent-blue); border-bottom-color: var(--accent-blue); }
        .notif-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: #e0245e; flex-shrink: 0; }
        .notif-tab-panel .notif-empty { padding-top: 20px; }

        section { scroll-margin-top: 60px; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
        #digital-print { background-color: var(--bg-white); }
        #print-store { background-color: var(--bg-gray-1); } 
        #membership { background-color: var(--bg-white); } 
        #faq { background-color: var(--bg-gray-2); } 

        .section-header { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-bottom: 40px; width: 100%; }
        .section-header h2 { font-size: 2.2rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
        .section-subtitle { line-height: 1.5; color: var(--text-gray); font-size: 1.1rem; max-width: 600px; margin: 0; text-align: center; text-wrap: balance; }

        .action-buttons { display: flex; gap: 20px; justify-content: center; align-items: center; margin-top: 25px; flex-wrap: wrap; width: 100%; }
        .btn-primary, .btn-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 30px; font-size: 1rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease; }
        .btn-primary { background-color: var(--accent-blue); color: #fff; box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-blue) 20%, transparent); }
        .btn-primary:hover { background-color: color-mix(in srgb, var(--accent-blue) 80%, black); transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-blue) 30%, transparent); }
        .btn-secondary { background-color: var(--bg-gray-1); color: var(--text-dark); border: 1px solid #d2d2d7; }
        .btn-secondary:hover { background-color: #d2d2d7; transform: translateY(-2px); }

        .membership-cards { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: stretch; width: 100%; max-width: 1050px; margin-top: 0; }
        .plan-card { background: var(--bg-gray-1); border: 2px solid transparent; border-radius: 16px; padding: 40px 20px; flex: 1 1 0; min-width: 280px; text-align: center; text-decoration: none; color: var(--text-dark); box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; display: flex; flex-direction: column; justify-content: flex-start; }
        .plan-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); border-color: var(--accent-blue); }
        .plan-card h3 { font-size: 1.8rem; margin: 0; color: var(--text-dark); text-transform: uppercase; }
        .plan-card .downloads { display: flex; flex-direction: column; align-items: center; margin: 25px 0; font-size: 0.9rem; font-weight: 600; color: var(--text-gray); letter-spacing: 1px; text-transform: uppercase; }
        .plan-card .license { font-size: 0.85rem; font-weight: 700; padding: 10px 16px; border-radius: 20px; display: inline-block; margin: 0 auto; text-transform: uppercase; letter-spacing: 0.5px; width: fit-content; }
        .license.personal { background: #fdeaea; color: #d93025; }
        .license.commercial { background: #e6f4ea; color: #1e8e3e; }

        #map-container { position: relative; width: 100%; max-width: 1000px; height: 500px; margin: 0 auto; border-radius: 24px; overflow: hidden; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); background: #fff; }
        #map { height: 100%; width: 100%; z-index: 1; }
        #preview-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(2px); z-index: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s, backdrop-filter 0.3s; }
        #preview-overlay:hover { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(4px); }
        .expand-badge { background: #111; color: #fff; padding: 14px 28px; border-radius: 30px; font-size: 16px; font-weight: 600; box-shadow: 0 8px 20px rgba(0,0,0,0.25); pointer-events: none; display: flex; gap: 10px; align-items: center; transition: transform 0.3s; }
        #preview-overlay:hover .expand-badge { transform: scale(1.05); }
        #map-buttons-container { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2500; display: none; gap: 15px; align-items: center; width: max-content; max-width: 95vw; flex-wrap: wrap; justify-content: center; }
        #map-container.is-fullscreen #map-buttons-container { display: flex; }
        #add-shop-btn { background: #f1c40f; color: #111; border: none; padding: 12px 25px; border-radius: 30px; font-size: 15px; font-weight: bold; cursor: pointer; box-shadow: 0 8px 25px rgba(0,0,0,0.3); display: flex; gap: 8px; align-items: center; transition: transform 0.3s ease, background 0.2s; }
        #add-shop-btn:hover { background: #e6b700; transform: scale(1.05); }
        #close-fullscreen { background: #111; color: white; border: none; padding: 12px 30px; border-radius: 30px; font-size: 15px; font-weight: bold; cursor: pointer; box-shadow: 0 8px 25px rgba(0,0,0,0.3); display: flex; gap: 10px; align-items: center; transition: background 0.2s; }
        #close-fullscreen:hover { background: #333; }
        #map-container.is-fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; margin: 0; border-radius: 0; z-index: 9999; }
        #map-container.is-fullscreen #preview-overlay { display: none; }
        #map-container.is-fullscreen .header-container { opacity: 1; visibility: visible; }
        .header-container { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 850; text-align: center; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 15px 25px; border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); pointer-events: none; width: max-content; max-width: 90%; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
        .title-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
        .counter-badge { background: #111; color: #fff; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 12px; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
        /* "?" cliccabile nella mappa fullscreen (accanto al titolo "Authorized
           Shop") che spiega in 3 punti come funziona l'acquisto fisico. Stesso
           pattern visivo del popover social in design.html. .header-container
           ha pointer-events:none, quindi qui lo si riattiva esplicitamente. */
        .map-help-wrap { position: relative; display: inline-flex; pointer-events: auto; }
        .map-help-btn { background: none; border: none; padding: 0; margin: 0; width: 22px; height: 22px; font-size: 17px; color: #aaa; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.2s ease; }
        .map-help-btn:hover { color: var(--accent-blue); }
        .map-help-popover { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); padding: 14px 18px; display: none; z-index: 900; text-align: left; width: min(240px, 85vw); pointer-events: auto; }
        .map-help-popover.open { display: block; }
        .map-help-popover::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-bottom-color: #fff; }
        .map-help-popover ul { margin: 0; padding: 0 0 0 18px; list-style: disc; }
        .map-help-popover li { font-size: 13px; color: #333; line-height: 1.5; margin-bottom: 8px; }
        .map-help-popover li:last-child { margin-bottom: 0; }
        .header-container h3 { font-size: 22px; font-weight: 700; color: #111; margin: 0; }
        .header-container p { font-size: 14px; color: #666; margin: 5px 0 0 0; }
        .custom-marker-wrapper { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid white; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; }
        .custom-marker-wrapper i { transform: rotate(45deg); color: white; font-size: 16px; }
        .leaflet-popup-content-wrapper { border-radius: 16px; padding: 8px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); }
        .leaflet-popup-content { margin: 15px; min-width: 240px; position: relative;}
        .popup-content-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
        .popup-text-info { display: flex; flex-direction: column; flex-grow: 1; }
        .shop-name { font-size: 20px; font-weight: 700; color: #111; display: block; margin-bottom: 8px; }
        .header-link { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #f4f4f4; color: #222; border-radius: 50%; text-decoration: none; transition: 0.3s; font-size: 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .header-link:hover { background: #111; color: #fff; transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
        .shop-info-row { font-size: 13px; color: #555; display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
        .shop-links { display: flex; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
        .shop-links:empty { display: none; }
        .shop-links a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #f4f4f4; color: #222; border-radius: 50%; text-decoration: none; transition: 0.3s; cursor: pointer; }
        .shop-links a:hover { background: #111; color: #fff; transform: translateY(-3px); }
        .copy-tooltip { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); background: #333; color: white; padding: 4px 8px; border-radius: 4px; font-size: 10px; opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap; }
        .leaflet-popup-close-button { display: none !important; }

        .faq-container { max-width: 800px; width: 100%; text-align: left; margin-top: 0; }
        .faq-category { margin-top: 40px; margin-bottom: 10px; }
        .faq-category:first-child { margin-top: 0; }
        .faq-category h3 { font-size: 1.3rem; color: var(--text-dark); margin-bottom: 15px; border-bottom: 2px solid #d2d2d7; padding-bottom: 10px; display: flex; align-items: center; gap: 10px; }
        .faq-item { border-bottom: 1px solid #e5e5ea; }
        .faq-question { width: 100%; background: none; border: none; text-align: left; font-weight: 600; font-size: 1.15rem; color: var(--text-dark); padding: 20px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: inherit; transition: color 0.3s ease; }
        .faq-question:hover { color: var(--accent-blue); }
        .faq-question i { font-size: 1rem; color: var(--text-gray); transition: transform 0.3s ease; }
        .faq-question.active i { transform: rotate(180deg); }
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
        .faq-answer-content { padding-bottom: 20px; color: var(--text-gray); line-height: 1.6; font-size: 1.05rem; }
        .modulo-btn { display: inline-flex; align-items: center; gap: 8px; background-color: var(--accent-blue); color: var(--bg-white); padding: 12px 24px; border-radius: 8px; font-size: 1rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; margin: 10px 0; transition: background-color 0.3s ease, transform 0.2s ease; box-shadow: 0 4px 10px color-mix(in srgb, var(--accent-blue) 20%, transparent); }
        .modulo-btn:hover { background-color: color-mix(in srgb, var(--accent-blue) 80%, black); color: var(--bg-white); transform: translateY(-2px); }
        .form-dropdown { display: none; margin-top: 10px; margin-bottom: 20px; padding: 20px; background: #fbfbfd; border-radius: 12px; border: 1px solid #d2d2d7; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
        .form-dropdown-header { font-size: 0.95rem; color: var(--text-dark); margin-bottom: 12px; line-height: 1.6; }
        .form-template-textarea { width: 100%; height: 170px; font-family: monospace; font-size: 0.9rem; padding: 12px; border-radius: 8px; border: 1px solid #d2d2d7; resize: none; background: #fff; color: var(--text-dark); box-sizing: border-box; margin-bottom: 15px; }
        .copy-template-btn { display: inline-flex; align-items: center; gap: 8px; background-color: var(--text-dark); color: var(--bg-white); border: none; padding: 10px 20px; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease; }
        .copy-template-btn:hover { background-color: #333; }

        /* --- FOOTER SCURO E CENTRATO --- */
        footer { background-color: #1d1d1f; color: #f5f5f7; padding: 60px 20px; text-align: center; border-top: none; }
        footer h2 { font-size: 1.8rem; margin-bottom: 30px; color: #ffffff; letter-spacing: -0.02em; margin-top: 0; }
        .social-links { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 50px; }
        .social-links a { display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; background-color: #333336; color: #ffffff; border-radius: 50%; text-decoration: none; font-size: 24px; transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
        .social-links a:hover { background-color: var(--accent-blue); color: #ffffff; transform: scale(1.1); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
        
        .footer-columns { display: flex; justify-content: center; flex-wrap: wrap; gap: 80px; max-width: 1000px; margin: 0 auto; text-align: left; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 50px; }
        .footer-col { flex: 1; min-width: 200px; max-width: 300px; }
        .footer-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 1.2rem; font-weight: 800; color: #ffffff; margin-bottom: 15px; text-decoration: none; transition: color 0.3s; }
        .footer-brand:hover { color: var(--accent-blue); }
        .footer-brand img { height: 35px; border-radius: 50%; }
        .brand-col p { font-size: 0.95rem; color: #a1a1a6; line-height: 1.6; margin-bottom: 15px; text-align: left;}
        .copyright { font-size: 0.85rem; font-weight: 400; color: #86868b; line-height: 1.5; }
        .footer-col h3 { font-size: 1rem; color: #ffffff; margin-bottom: 20px; letter-spacing: 1px; }
        .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
        .footer-col ul li a { text-decoration: none; color: #a1a1a6; font-size: 0.95rem; font-weight: 500; transition: color 0.3s ease; }
        .footer-col ul li a:hover { color: #ffffff; }

        @media (max-width: 768px) {
            .nav-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 6px; padding: 10px 20px 8px; }
            .mobile-menu-btn { background: #111; color: #fff; padding: 10px 20px; border-radius: 30px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 20px rgba(0,0,0,0.25); border: none; cursor: pointer; display: none; gap: 8px; align-items: center; transition: transform 0.3s; font-family: 'Inter', sans-serif; }
            .mobile-menu-btn:hover { transform: scale(1.05); }
            .nav-mobile-bell-slot { display: flex; align-items: center; gap: 14px; }
            #nav-mobile-bell-slot li { list-style: none; }
            #nav-mobile-bell-slot a { text-decoration: none; color: var(--text-dark); }
            #nav-mobile-bell-slot .nav-cta { display: inline-flex; align-items: center; padding: 6px 14px; font-size: 11px; white-space: nowrap; background-color: var(--accent-blue); color: #fff; border-radius: 30px; }
            #nav-mobile-bell-slot #nav-admin-notif-item { order: 1; }
            #nav-mobile-bell-slot #nav-saved-item { order: 2; }
            #nav-mobile-bell-slot li:has(#nav-account-link) { order: 3; }
#nav-mobile-bell-slot li:has(#nav-upload-link) { order: 0; }
            /* Bug segnalato da ALFI (21/09/2026): ".notif-dropdown" sotto e'
               posizionata "right: 0" rispetto all'icona della campanella
               (".notif-bell-item", position:relative) - funzionava quando la
               campanella stava all'estremo bordo destro del menu (dentro
               #nav-links-right), perche' la tendina restava tutta dentro lo
               schermo estendendosi verso sinistra da li'. Ora pero' su
               telefono la campanella vive in mezzo alla barra (vedi
               #nav-mobile-bell-slot qui sopra), quindi la stessa tendina
               larga fino a 340px finiva quasi tutta FUORI dallo schermo a
               sinistra. Su schermi stretti la rendiamo "fixed" e ancorata ai
               bordi del viewport (non piu' all'icona) cosi' resta sempre
               centrata e dentro lo schermo, qualunque sia la larghezza del
               telefono o la posizione della campanella. */
            .notif-dropdown { position: fixed; top: 68px; left: 16px; right: 16px; width: auto; max-width: none; max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); }
            /* Su mobile il wrapper torna ad essere il pannello a tendina
               (non piu' "display:contents"): i due <ul> al suo interno si
               impilano uno sopra l'altro invece di stare fianco a fianco. */
            .nav-menu-wrapper { display: flex; position: static; width: 100%; flex-basis: 100%; background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin: 2px 0 0; padding: 4px 0 2px; box-shadow: none; border-bottom: none; border-top: 1px solid rgba(0,0,0,0.08); }
            .nav-menu-wrapper.active { display: flex; }
            .nav-menu-wrapper ul { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 6px; width: auto; }
            /* Pagine senza tasto MENU (hamburger): i link restano nascosti su
               mobile come prima di questa modifica, invece di andare a capo
               e sovrapporsi al contenuto sotto (qui non c'e' un tasto per
               aprirli comunque, quindi mostrarli a meta' non aiuterebbe). */
            .nav-container > ul { display: none; }
            nav ul li { width: 100%; text-align: center; }
            #nav-links a, #nav-links-right a { display: inline-flex; align-items: center; padding: 6px 6px; font-size: 10.5px; }
            .separator { display: none; }
            #nav-links li, #nav-links-right li { width: auto; }
            #nav-links li:has(a[href$="#faq"]) { display: none; }
            nav { height: auto; min-height: 60px; }
            body { padding-top: 104px; }
            section { scroll-margin-top: 60px; padding: 40px 15px; }
            .section-header h2 { font-size: 1.8rem; }
            /* Richiesta ALFI 21/09/2026: su mobile i 3 piani scorrono in
               orizzontale come un carosello (swipe), invece di impilarsi
               uno sotto l'altro costringendo a scorrere in verticale. */
            .membership-cards { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; justify-content: flex-start; gap: 16px; padding: 20px 28px 18px; margin: 0 -15px; width: calc(100% + 30px); max-width: calc(100% + 30px); scrollbar-width: none; }
            .membership-cards::-webkit-scrollbar { display: none; }
            .plan-card { padding: 25px 15px; min-width: 82%; flex: 0 0 82%; scroll-snap-align: center; box-sizing: border-box; }
            .plan-card h3 { font-size: 1.4rem; }
            .plan-card .downloads { margin: 15px 0; }
            #map-container { height: 400px; border-radius: 16px; }
            .header-container { padding: 10px 20px; }
            .header-container h3 { font-size: 18px; }
            .faq-question { font-size: 1.05rem; }
            .faq-category h3 { font-size: 1.2rem; }
            #map-buttons-container { bottom: 25px; gap: 10px; }
            #add-shop-btn, #close-fullscreen { padding: 10px 20px; font-size: 13px; }

            .footer-columns { flex-direction: column; gap: 40px; padding-top: 40px; align-items: center; text-align: center;}
            .footer-col { text-align: center; max-width: 100%; display: flex; flex-direction: column; align-items: center; }
            .brand-col p { text-align: center; }
            .footer-col ul { align-items: center; }
        }

/* ============================
   HOME: bivio "ho / non ho la stampante" (in cima alla home page,
   sopra "Latest Designs" - vedi initPrinterSwitch() in site-config.js)
   ============================ */
.printer-switch-wrap { text-align: center; padding: 24px 20px 4px; }
.printer-switch-label { font-size: 0.85rem; color: var(--text-gray); margin: 0 0 10px; font-weight: 600; }
.printer-switch { display: inline-flex; flex-wrap: wrap; justify-content: center; background: var(--bg-gray-1); border-radius: 30px; padding: 4px; gap: 4px; }
.printer-switch-btn { border: none; background: transparent; padding: 10px 18px; border-radius: 26px; font-size: 0.85rem; font-weight: 600; color: var(--text-gray); cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.25s ease; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.printer-switch-btn:hover { color: var(--text-dark); }
.printer-switch-btn.active { background: var(--accent-blue); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.printer-switch-btn.active:hover { color: #fff; }

/* ============================
   MEMBERSHIP: billing toggle + price (added for Supabase/Lemon Squeezy integration)
   ============================ */
.billing-toggle { display: inline-flex; background: var(--bg-gray-1); border-radius: 30px; padding: 4px; gap: 4px; margin-top: 10px; }
.billing-toggle-btn { border: none; background: transparent; padding: 10px 22px; border-radius: 26px; font-size: 0.9rem; font-weight: 600; color: var(--text-gray); cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.25s ease; display: flex; align-items: center; gap: 8px; }
.billing-toggle-btn.active { background: #fff; color: var(--text-dark); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.plan-price-row { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 22px; }
.plan-price { font-size: 1.7rem; font-weight: 800; color: var(--text-dark); }
.plan-price-amount { font-size: 2.5rem; }
.plan-price-old { font-size: 0.88rem; font-weight: 600; color: var(--text-gray); text-decoration: line-through; }
/* "billed annually", piccolo, mostrato solo sotto i prezzi annuali. Usiamo
   visibility (non display) cosi' lo spazio resta sempre riservato e nulla
   si sposta quando si passa da Monthly ad Annual. */
.plan-billed-caption { font-size: 0.72rem; color: var(--text-gray); margin: 2px 0 0; }
.plan-join-btn { width: 100%; box-sizing: border-box; justify-content: center; margin-top: 18px; }
.plan-card { cursor: default; position: relative; }
/* Contorno dello stesso colore del badge "Most Popular" (invece
   dell'azzurro, che e' gia' il colore di pulsanti/stati selezionati
   ovunque nel sito) - cosi' il piano in evidenza si riconosce a colpo
   d'occhio senza introdurre uno sfondo colorato che rischia di stonare. */
.plan-card.popular, .modal-plan-card.popular { border-color: #f5a623; box-shadow: 0 10px 28px rgba(245,166,35,0.22); }
/* Colore diverso dall'azzurro (quello e' gia' usato per pulsanti e stati
   selezionati) cosi' il badge "Most Popular" si distingue a colpo d'occhio
   invece di confondersi con il resto dell'interfaccia. */
.plan-popular-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: #f5a623; color: #fff; font-size: 0.72rem; font-weight: 700; padding: 6px 18px; border-radius: 20px; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 12px rgba(245,166,35,0.4); }
.plan-save-badge { position: absolute; top: 16px; right: 16px; background: #e6f4ea; color: #1e8e3e; font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 12px; letter-spacing: 0.2px; }
.plan-immediate-note { font-size: 0.78rem; color: var(--text-gray); text-align: center; margin: 24px 0 0; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.07); }

/* Tre punti di fiducia sotto le carte prezzo (screen "Yours Forever" ecc.) */
/* Raggruppati e centrati (non piu' una griglia a 3 colonne larga quanto le
   card dei piani sopra): prima stavano esattamente allineati sotto ciascun
   piano e sembravano appartenere a quel piano specifico, invece sono 3
   vantaggi validi per tutti i piani insieme. */
.plan-trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px; margin-top: 50px; max-width: 620px; width: 100%; }
.plan-trust-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; width: 150px; }
.plan-trust-item i { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg-gray-1); color: var(--accent-blue); font-size: 1.2rem; }
.plan-trust-item h4 { margin: 4px 0 0; font-size: 0.95rem; }
.plan-trust-item p { margin: 0; font-size: 0.82rem; color: var(--text-gray); }
@media (max-width: 768px) {
    /* Richiesta ALFI 21/09/2026: le 3 icone/vantaggi devono stare sulla
       stessa riga anche su mobile, non impilate una sotto l'altra. */
    .plan-trust-row { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; max-width: 100%; width: 100%; gap: 6px; margin-top: 32px; }
    .plan-trust-item { width: auto; flex: 0 1 72px; max-width: 72px; min-width: 0; gap: 6px; }
    .plan-trust-item i { width: 34px; height: 34px; font-size: 0.9rem; flex-shrink: 0; }
    .plan-trust-item h4 { font-size: 0.68rem; line-height: 1.2; }
    .plan-trust-item p { font-size: 0.6rem; line-height: 1.25; }
}

/* ============================
   LOGIN / ACCOUNT PAGES
   ============================ */
.auth-wrapper { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 60px 20px; }
.auth-card { background: var(--bg-white); border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.08); padding: 40px 35px; width: 100%; max-width: 400px; text-align: center; box-sizing: border-box; }
/* Fix QA 21/09/2026: senza box-sizing:border-box il padding si sommava alla
   larghezza al 100%, causando ~30px di scroll orizzontale su mobile
   (es. pagina My Account) invece di restare dentro lo schermo. */
@media (max-width: 480px) { .auth-card { padding: 32px 22px; } }
.auth-card h1 { font-size: 1.6rem; margin-bottom: 8px; }
.auth-card .auth-subtitle { color: var(--text-gray); font-size: 0.95rem; margin-bottom: 25px; }
.auth-tabs { display: flex; background: var(--bg-gray-1); border-radius: 30px; padding: 4px; margin-bottom: 25px; }
.auth-tab-btn { flex: 1; border: none; background: transparent; padding: 10px; border-radius: 26px; font-weight: 600; font-size: 0.9rem; cursor: pointer; font-family: 'Inter', sans-serif; color: var(--text-gray); transition: all 0.25s ease; }
.auth-tab-btn.active { background: #fff; color: var(--text-dark); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.auth-field { text-align: left; margin-bottom: 16px; }
.auth-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--text-dark); }
.auth-field input, .auth-field select { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; border: 1px solid #d2d2d7; font-size: 1rem; font-family: 'Inter', sans-serif; }
.auth-field select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 34px; background-color: #fff; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%2386868b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; color: var(--text-dark); }
.auth-field select:focus { outline: none; border-color: var(--accent-blue); }
.auth-field input:focus { outline: none; border-color: var(--accent-blue); }
.auth-submit-btn { width: 100%; border: none; background-color: var(--accent-blue); color: #fff; padding: 14px; border-radius: 30px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease; margin-top: 8px; }
.auth-submit-btn:hover { background-color: color-mix(in srgb, var(--accent-blue) 80%, black); }
.auth-submit-btn:disabled { opacity: 0.6; cursor: default; }
.auth-message { margin-top: 16px; font-size: 0.9rem; padding: 10px 14px; border-radius: 10px; display: none; }
.auth-message.error { display: block; background: #fdeaea; color: #d93025; }
.auth-message.success { display: block; background: #e6f4ea; color: #1e8e3e; }
.account-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid #e5e5ea; text-align: left; }
.account-row:last-child { border-bottom: none; }
.account-label { font-size: 0.85rem; color: var(--text-gray); text-transform: uppercase; letter-spacing: 0.5px; }
.account-value { font-weight: 600; color: var(--text-dark); }
.logout-btn { margin-top: 25px; background: none; border: 1px solid #d2d2d7; color: var(--text-dark); padding: 12px 24px; border-radius: 30px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.2s ease; }
.logout-btn:hover { background: #fdeaea; border-color: #d93025; color: #d93025; }

/* --- Foto profilo in My Account --- */
.account-avatar-row { text-align: center; margin-bottom: 6px; }
.account-avatar-wrap { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; margin: 0 auto 10px; background: var(--bg-gray-1); display: flex; align-items: center; justify-content: center; }
.account-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-avatar-placeholder { font-size: 1.8rem; color: var(--text-gray); }

/* --- Invito Discord, mostrato solo a chi ha MASTER o PRO attivo --- */
.account-discord-row { background: #eef6ff; border-radius: 12px; padding: 14px 16px; margin: 18px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; text-align: left; }
.account-discord-row span { font-weight: 600; font-size: 0.9rem; color: var(--text-dark); }
.account-discord-row .btn-primary { padding: 8px 16px; font-size: 0.85rem; white-space: nowrap; }
/* Stato del negozio in mappa (nella stessa scheda blu): "in mappa" e
   "scadenza/giorni rimasti" su due righe separate, ognuna con la sua
   icona, invece di un'unica frase con un trattino in mezzo. */
.account-shop-days-text { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; color: var(--text-dark); }
.account-shop-days-line { display: flex; align-items: center; gap: 8px; }
.account-shop-days-line i { color: var(--accent-blue); width: 16px; text-align: center; flex-shrink: 0; }

/* Interruttori on/off (notifiche in MY ACCOUNT) */
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: #d2d2d7; transition: 0.2s; border-radius: 26px; }
.toggle-switch .toggle-slider::before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: #fff; transition: 0.2s; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-switch input:checked + .toggle-slider { background-color: var(--accent-blue); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.toggle-switch input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; }

.account-notif-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #e5e5ea; }
.account-notif-row:last-of-type { border-bottom: none; }
.account-notif-row-label { font-size: 0.9rem; font-weight: 600; }
.account-notif-row-desc { font-size: 0.78rem; color: var(--text-gray); margin-top: 2px; }

/* Schede in cima a MY ACCOUNT (General/Notifications/Achievements/...), cosi'
   si passa da una sezione all'altra con un tasto invece di scorrere in giu'
   tra tante card impilate. */
.account-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 460px; width: 100%; }
.account-tab-btn { background: var(--bg-gray-1); color: var(--text-dark); border: none; border-radius: 20px; padding: 8px 16px; font-size: 0.82rem; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.account-tab-btn:hover { background: var(--bg-gray-2); }
.account-tab-btn.active { background: var(--accent-blue); color: #fff; }
.account-tab-btn.active:hover { background: color-mix(in srgb, var(--accent-blue) 80%, black); }

/* Nuvoletta "traguardo sbloccato", in basso a destra su qualsiasi pagina
   (iniettata da site-config.js) - resta finche' non la chiudi con la X o
   la clicchi (porta alla scheda Achievements di My Account).
   "bottom: 90px" (invece di 20px) perche' da 21/09/2026 c'e' sempre, sotto
   di lei, anche il bottone "?" del widget di assistenza (vedi piu' sotto) -
   cosi' non ci si sovrappongono mai. */
.achievement-toast { position: fixed; bottom: 90px; right: 20px; left: auto; max-width: 320px; width: calc(100% - 40px); background: var(--bg-white); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); padding: 16px 40px 16px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; z-index: 2000; animation: achievement-toast-in 0.25s ease; }
.achievement-toast-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.achievement-toast-text { line-height: 1.35; }
.achievement-toast-text strong { display: block; font-size: 0.88rem; }
.achievement-toast-text span { font-size: 0.78rem; color: var(--text-gray); }
.achievement-toast-close { position: absolute; top: 6px; right: 10px; background: none; border: none; font-size: 1.1rem; line-height: 1; color: var(--text-gray); cursor: pointer; padding: 4px; }
.achievement-toast-close:hover { color: var(--text-dark); }
@keyframes achievement-toast-in { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================
   WIDGET DI ASSISTENZA (21/09/2026): bottone "?" fisso in basso a destra
   su tutte le pagine, iniettato da site-config.js (injectSupportWidget()).
   Nascosto automaticamente se sei loggato come ADMIN_EMAIL (non ha senso
   scrivere assistenza a te stesso). Il colore giallo e' voluto diverso da
   --accent-blue: e' un elemento di utilita' fisso, non deve seguire la
   personalizzazione colore dell'account di chi guarda.
   ============================ */
.support-widget-btn { position: fixed; bottom: 20px; right: 20px; z-index: 1900; width: 56px; height: 56px; border-radius: 50%; background: #f5a623; color: #fff; border: none; font-size: 26px; font-weight: 800; font-family: 'Inter', sans-serif; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.25); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.support-widget-btn:hover { transform: scale(1.08); box-shadow: 0 10px 26px rgba(0,0,0,0.3); }
.support-widget-btn.is-hidden { display: none; }

.support-widget-panel { position: fixed; bottom: 20px; right: 20px; z-index: 1950; width: 340px; max-width: calc(100vw - 40px); max-height: min(560px, calc(100vh - 40px)); background: var(--bg-white); border-radius: 20px; box-shadow: 0 16px 40px rgba(0,0,0,0.25); display: none; flex-direction: column; overflow: hidden; }
.support-widget-panel.is-open { display: flex; animation: support-widget-in 0.2s ease; }
@keyframes support-widget-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.support-widget-header { background: #f5a623; color: #1d1d1f; padding: 16px 44px 14px 18px; position: relative; flex-shrink: 0; }
.support-widget-header h4 { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
.support-widget-header p { margin: 0; font-size: 12.5px; opacity: 0.85; line-height: 1.4; }
.support-widget-close { position: absolute; top: 10px; right: 12px; background: rgba(0,0,0,0.1); border: none; width: 26px; height: 26px; border-radius: 50%; font-size: 15px; cursor: pointer; color: #1d1d1f; }
.support-widget-close:hover { background: rgba(0,0,0,0.18); }

.support-widget-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.support-widget-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-gray); margin-bottom: 5px; }
.support-widget-body input[type="email"], .support-widget-body textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--bg-gray-2); border-radius: 12px; padding: 10px 12px; font-family: inherit; font-size: 13.5px; }
.support-widget-body textarea { min-height: 90px; resize: vertical; }
.support-widget-body input[readonly] { background: var(--bg-gray-1); color: var(--text-gray); }

.support-widget-images-row { display: flex; gap: 8px; flex-wrap: wrap; }
.support-widget-thumb { position: relative; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.support-widget-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.support-widget-thumb button { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: #1d1d1f; color: #fff; border: none; font-size: 11px; line-height: 1; cursor: pointer; padding: 0; }
.support-widget-attach-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent-blue); background: none; border: none; cursor: pointer; padding: 0; width: fit-content; }

.support-widget-submit { background: #1d1d1f; color: #fff; border: none; border-radius: 30px; padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer; }
.support-widget-submit:disabled { opacity: 0.5; cursor: default; }
.support-widget-status { font-size: 12.5px; color: var(--text-gray); text-align: center; min-height: 1em; }
.support-widget-status.is-error { color: #d93025; }
.support-widget-status.is-success { color: #1e8e3e; }
.support-widget-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 480px) {
    .support-widget-panel { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; }
    .achievement-toast { right: 16px; left: 16px; width: auto; max-width: none; }
}

/* Grafico ricavi (admin, dentro My Account > Revenue): tasti per il
   periodo + barre disegnate col semplice CSS (niente librerie esterne),
   cosi' il colore segue --accent-blue come tutto il resto del sito. */
.revenue-chart-toggle { display: flex; gap: 6px; margin: 14px 0 10px; flex-wrap: wrap; }
.revenue-range-btn { background: var(--bg-gray-1); color: var(--text-dark); border: none; border-radius: 14px; padding: 5px 12px; font-size: 0.75rem; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.revenue-range-btn:hover { background: var(--bg-gray-2); }
.revenue-range-btn.active { background: var(--accent-blue); color: #fff; }
.revenue-range-btn.active:hover { background: color-mix(in srgb, var(--accent-blue) 80%, black); }
.revenue-chart-wrap { overflow-x: auto; padding-bottom: 4px; }
.revenue-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; min-width: 100%; }
.revenue-chart-bar { flex: 0 0 auto; min-height: 2px; background: var(--accent-blue); border-radius: 3px 3px 0 0; transition: background 0.15s ease; cursor: default; }
.revenue-chart-bar:hover { background: color-mix(in srgb, var(--accent-blue) 80%, black); } .revenue-chart-bar-upload { background: #ff9500; } .revenue-chart-bar-upload:hover { background: color-mix(in srgb, #ff9500 80%, black); }
.revenue-chart-bar-wide { width: 20px; }
.revenue-chart-bar-thin { width: 8px; }
.revenue-chart-empty { font-size: 0.8rem; color: var(--text-gray); padding: 55px 0; text-align: center; width: 100%; }

.account-subs-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.88rem; }
.account-subs-table th, .account-subs-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e5e5ea; }
.account-subs-table th { color: var(--text-gray); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.4px; }
.account-subs-table td.subs-count { font-weight: 700; }

/* "Buyer Information" (23/09/2026, richiesta di ALFI - prima "All
   Customers") - tabella larga (fino a 900px, non i soliti 460px delle
   altre card di My Account). Niente scroll orizzontale (23/09/2026,
   seconda richiesta di ALFI - prima scorreva in orizzontale sotto i
   900px): le 8 colonne restano dentro la card, con testo piu' piccolo
   e a capo dove serve, invece della barra di scorrimento laterale.
   Righe separate anche in verticale da linee sottili (oltre a quella
   orizzontale sotto ogni riga) per staccare bene le colonne a colpo
   d'occhio. */
.customers-table-wrap { margin-top: 14px; overflow: hidden; }
.customers-table { width: 100%; border-collapse: collapse; font-size: 0.74rem; table-layout: fixed; }
.customers-table th, .customers-table td { text-align: left; padding: 7px 6px; border-bottom: 1px solid #e5e5ea; border-right: 1px solid #eeeef1; white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
.customers-table th:last-child, .customers-table td:last-child { border-right: none; }
.customers-table th { color: var(--text-gray); font-weight: 600; text-transform: uppercase; font-size: 0.6rem; letter-spacing: 0.3px; }
.customers-email-cell { color: var(--text-gray); }
/* Larghezze per colonna (table-layout:fixed sopra impone che la somma
   stia sempre dentro il 100%, senza scroll) - due varianti perche' la
   tabella completa ha 8 colonne (Username/Email in piu') mentre quella
   di dettaglio nella ricerca per email ne ha solo 6. */
.customers-table-full th:nth-child(1), .customers-table-full td:nth-child(1) { width: 13%; }
.customers-table-full th:nth-child(2), .customers-table-full td:nth-child(2) { width: 20%; }
.customers-table-full th:nth-child(3), .customers-table-full td:nth-child(3) { width: 15%; }
.customers-table-full th:nth-child(4), .customers-table-full td:nth-child(4) { width: 10%; }
.customers-table-full th:nth-child(5), .customers-table-full td:nth-child(5) { width: 9%; }
.customers-table-full th:nth-child(6), .customers-table-full td:nth-child(6) { width: 11%; }
.customers-table-full th:nth-child(7), .customers-table-full td:nth-child(7) { width: 11%; }
.customers-table-full th:nth-child(8), .customers-table-full td:nth-child(8) { width: 11%; text-align: center; }
.customers-table-compact th:nth-child(1), .customers-table-compact td:nth-child(1) { width: 26%; }
.customers-table-compact th:nth-child(2), .customers-table-compact td:nth-child(2) { width: 14%; }
.customers-table-compact th:nth-child(3), .customers-table-compact td:nth-child(3) { width: 14%; }
.customers-table-compact th:nth-child(4), .customers-table-compact td:nth-child(4) { width: 16%; }
.customers-table-compact th:nth-child(5), .customers-table-compact td:nth-child(5) { width: 16%; }
.customers-table-compact th:nth-child(6), .customers-table-compact td:nth-child(6) { width: 14%; text-align: center; }
@media (max-width: 480px) {
    .customers-table { font-size: 0.66rem; }
    .customers-table th, .customers-table td { padding: 5px 4px; }
}

/* Pallino di stato (23/09/2026) - prima solo un'icona colorata, ora uno
   sfondo pieno verde/rosso pieno con l'icona bianca sopra: si vede la
   differenza a colpo d'occhio anche in miniatura, senza dover leggere
   il tooltip. Stesso pallino sia per abbonamenti (Active/Cancelled) che
   per acquisti singoli (Paid/Refunded) - il testo esatto e' nel title. */
.customers-status-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 0.7rem; }
.customers-status-badge.active { background: #1e8e3e; }
.customers-status-badge.cancelled { background: #d93025; }
.customers-status-badge.purchase { background: #1a73e8; }

/* Paginazione a numeri con freccine (23/09/2026, richiesta di ALFI, al
   posto del vecchio "Previous / Page 1 / Next" testuale). */
.customers-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.customers-page-arrow { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--bg-gray-1); color: var(--text-dark); cursor: pointer; font-size: 0.8rem; }
.customers-page-arrow:hover:not(:disabled) { background: var(--bg-gray-2); }
.customers-page-arrow:disabled { opacity: 0.35; cursor: default; }
.customers-page-numbers { display: flex; align-items: center; gap: 2px; }
.customers-page-btn { min-width: 32px; height: 32px; padding: 0 6px; border-radius: 50%; border: none; background: none; color: var(--text-dark); font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }
.customers-page-btn:hover:not(:disabled) { background: var(--bg-gray-1); }
.customers-page-btn.active { background: var(--accent-blue); color: #fff; cursor: default; }
.customers-page-ellipsis { padding: 0 4px; color: var(--text-gray); font-size: 0.85rem; }

/* Risultato della ricerca per email dentro "Buyer Information"
   (23/09/2026) - stesso blocco ".member-lookup-result" gia' usato altrove
   in questa pagina, ma qui e' molto piu' alto (ci sta dentro una mini
   tabella + l'elenco download), quindi allineato in alto invece che al
   centro. */
.member-lookup-result.customers-search-result { align-items: flex-start; padding: 16px 0; }
.customers-search-section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-gray); margin: 14px 0 6px; }
.customers-downloads-list { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; }
.customers-downloads-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f0f0f3; flex-wrap: wrap; }
.customers-downloads-list li:last-child { border-bottom: none; }
.customers-download-title { font-weight: 600; flex: 1; min-width: 120px; }
.customers-download-date { color: var(--text-gray); font-size: 0.8rem; }
.customers-download-via { background: var(--bg-gray-1); color: var(--text-gray); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; padding: 2px 8px; border-radius: 10px; }

/* ============================
   DESIGN CARD (Digital Store + Latest Designs su homepage)
   ============================ */
.design-card { display: block; text-decoration: none; color: var(--text-dark); background: var(--bg-gray-1); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; }
.design-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.design-card .design-card-image-wrap { position: relative; width: 100%; aspect-ratio: 4 / 5; background: var(--bg-gray-2); overflow: hidden; }
.design-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le immagini di una card scorrono (transform) invece di cambiare di scatto
   quando si usano le frecce: una striscia flex con tutte le immagini,
   spostata con translateX. */
.design-card-track { display: flex; height: 100%; transition: transform 0.4s ease; }
.design-card-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; }
.design-card-body { padding: 14px 16px; }
.design-card-title { font-weight: 700; font-size: 1rem; }
.design-card-subtitle { color: var(--text-gray); font-size: 0.85rem; margin-top: 2px; }

/* Etichetta "New" sul design piu' recente, finche' non ne viene pubblicato
   uno piu' nuovo (index.html e digital-store.html) */
.design-card-new-badge { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; background: var(--accent-blue); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 4px 11px; border-radius: 20px; letter-spacing: 0.4px; text-transform: uppercase; box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-blue) 35%, transparent); }

/* Tondino "v2"/"v3"... facoltativo su un design che e' una nuova versione di
   uno gia' pubblicato (angolo opposto al badge "New" per non sovrapporsi) -
   index.html, digital-store.html, design.html ("You may also like") */
.design-card-version-badge { position: absolute; top: 10px; left: 10px; background: #f5a623; color: #fff; font-size: 0.68rem; font-weight: 800; padding: 4px 10px; border-radius: 20px; letter-spacing: 0.4px; text-transform: uppercase; box-shadow: 0 3px 10px rgba(245,166,35,0.4); }

/* Etichetta "Free" su un design segnato gratis da ALFI (20/09/2026) - in
   basso al centro (spostata li' il 20/09/2026 su richiesta di ALFI, si
   legge meglio), libera dagli angoli usati da "New"/versione cosi' le
   etichette non si sovrappongono mai anche se un design fosse
   contemporaneamente nuovo/versione/gratis -
   index.html, digital-store.html, design.html ("You may also like") */
.design-card-free-badge { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; background: #34c759; color: #fff; font-size: 0.68rem; font-weight: 700; padding: 4px 11px; border-radius: 20px; letter-spacing: 0.4px; text-transform: uppercase; box-shadow: 0 3px 10px rgba(52,199,89,0.35); white-space: nowrap; }

/* Etichetta libera (es. "POPULAR", "MOST DOWNLOADED") che ALFI imposta a
   mano su un design a pagamento, con l'icona del fuoco (20/09/2026) -
   stessa posizione in basso al centro del badge "Free": non si sovrappongono
   mai perche' un design gratis non prende mai questa etichetta (gestito a
   mano da ALFI, e ribadito qui come rete di sicurezza in fase di rendering
   - vedi labelBadge nei file qui sotto) -
   index.html, digital-store.html, design.html ("You may also like") */
.design-card-label-badge { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; background: #ff9500; color: #fff; font-size: 0.68rem; font-weight: 700; padding: 4px 11px; border-radius: 20px; letter-spacing: 0.4px; text-transform: uppercase; box-shadow: 0 3px 10px rgba(255,149,0,0.35); white-space: nowrap; }

/* Riquadro colorato attorno a un design che l'utente loggato ha gia'
   scaricato almeno una volta (20/09/2026, richiesta di ALFI: "cosi' li
   riconosci subito", stesso trattamento visivo gia' usato per i pezzi
   bonus sbloccati di MAG DRIVE - vedi .collection-card.unlocked in
   design.html) - solo digital-store.html per ora, vedi checkDownloadedDesigns()
   li' dentro. Bordo piu' spesso + alone sfumato (21/09/2026, richiesta di
   ALFI: "vorrei che il bordino fosse leggermente piu' evidente e poi
   magari avessero una piccola sfumatura") - il bordo netto passa da 3px a
   4px, e la seconda ombra (piu' larga e sfocata, stesso colore) crea
   l'alone sfumato attorno alla card. */
.design-card.downloaded { box-shadow: 0 0 0 4px var(--accent-blue), 0 6px 18px color-mix(in srgb, var(--accent-blue) 45%, transparent); }

/* Frecce trasparenti per scorrere le immagini di un design direttamente
   dalla card, senza aprire la pagina (digital-store.html) */
.card-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: #fff; border: none; border-radius: 50%; width: 34px; height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease, background 0.2s ease; z-index: 4; font-size: 0.85rem; }
.design-card:hover .card-nav-btn { opacity: 1; }
.card-nav-btn:hover { background: rgba(0,0,0,0.65); }
.card-nav-prev { left: 10px; }
.card-nav-next { right: 10px; }
@media (max-width: 700px) { .card-nav-btn { opacity: 1; width: 28px; height: 28px; font-size: 0.75rem; } }
.designs-empty { text-align: center; color: var(--text-gray); padding: 40px 20px; }
/* Sulla home "Latest Designs" scorre in orizzontale su UNA sola riga
   (carosello) invece di andare a capo come la griglia della Digital Store:
   le card hanno una larghezza fissa e il contenitore scorre con
   overflow-x, sia trascinando col dito (mobile) sia con le frecce
   qui sotto (desktop). */
.latest-designs-carousel-wrap { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; }
/* Niente "scroll-behavior: smooth" qui: si applicherebbe anche ai salti
   istantanei del loop infinito (JS qui sotto), rendendoli visibili invece
   che impercettibili. Lo scorrimento morbido delle frecce viene chiesto
   punto per punto via JS (scrollBy con behavior:'smooth'). */
.latest-designs-grid { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 4px 10px; scrollbar-width: none; }
.latest-designs-grid::-webkit-scrollbar { display: none; }
.latest-designs-grid .design-card { flex: 0 0 220px; scroll-snap-align: start; }
/* Frecce del carosello centrate sulle card (25/09/2026, segnalato da ALFI):
   prima top:40% le teneva piu' in alto; -3px compensa lo spazio in basso
   del carosello (padding 4px sopra, 10px sotto per l'ombra). */
.carousel-arrow { position: absolute; top: calc(50% - 3px); transform: translateY(-50%); z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: none; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-dark); font-size: 0.9rem; transition: background 0.2s ease, transform 0.2s ease; }
.carousel-arrow:hover { background: var(--bg-gray-1); }
.carousel-arrow-prev { left: -18px; }
.carousel-arrow-next { right: -18px; }
/* Su schermi stretti le frecce si nascondono: lo scorrimento a dito
   (swipe) basta ed evita che sporgano fuori dal bordo della pagina. */
@media (max-width: 900px) { .carousel-arrow { display: none; } }

/* ============================
   SEARCH BAR - riusata in Digital Store e Design History per cercare
   un design per nome (es. "flower") invece di scorrere tutta la griglia.
   ============================ */
.search-bar-wrap { position: relative; max-width: 420px; margin: 26px auto 0; }
.search-bar-wrap i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-gray); font-size: 0.95rem; pointer-events: none; }
.search-bar-wrap input { width: 100%; box-sizing: border-box; padding: 13px 18px 13px 44px; border-radius: 26px; border: 1px solid #d2d2d7; background: var(--bg-gray-1); font-size: 0.95rem; font-family: 'Inter', sans-serif; color: var(--text-dark); }
.search-bar-wrap input:focus { outline: none; border-color: var(--accent-blue); background: var(--bg-white); }
.search-bar-wrap input::placeholder { color: var(--text-gray); }
/* Barre di ordinamento accanto/sotto alla ricerca (es. Design History) */
.sort-bar { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.sort-btn { background: var(--bg-gray-1); border: none; padding: 9px 20px; border-radius: 20px; font-weight: 600; cursor: pointer; color: var(--text-gray); font-size: 0.86rem; font-family: 'Inter', sans-serif; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 7px; }
.sort-btn.active, .sort-btn:hover { background: var(--text-dark); color: #fff; }

/* ============================
   MEMBERSHIP PLAN CARDS - copy stile Thangs (tagline + elenco features)
   ============================ */
.plan-tagline { color: var(--text-gray); font-size: 0.9rem; margin: 8px 0 0; }
/* Banner "3 months free with annual" condiviso sopra le 3 carte: usiamo
   visibility invece di display cosi' lo spazio resta sempre riservato e le
   carte prezzo non si spostano quando si passa da Monthly ad Annual. */
.plan-annual-note { background: #fff4e5; color: #b8860b; font-size: 0.75rem; font-weight: 700; padding: 6px 12px; border-radius: 20px; display: inline-block; margin: 0 auto; text-transform: uppercase; letter-spacing: 0.4px; }
/* La spaziatura di default di .section-header (pensata per sezioni senza
   toggle/banner) lasciava troppo vuoto tra il banner "3 months free" e le
   card dei piani, rispetto al poco spazio sopra il banner: qui la
   restringiamo cosi' i due spazi sembrano piu' equilibrati. */
#membership .section-header { margin-bottom: 22px; }
/* Linea di separazione + un po' di spazio tra il tasto Join e l'elenco
   delle caratteristiche del piano. */
.plan-features { list-style: none; padding: 0; margin: 20px 0 24px; text-align: left; display: flex; flex-direction: column; gap: 10px; flex: 1; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 20px; }
.plan-features li { font-size: 0.88rem; color: var(--text-dark); display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.plan-features li i { color: var(--accent-blue); width: 16px; text-align: center; margin-top: 3px; flex-shrink: 0; }
.plan-features li span { flex: 1; }
.plan-features li:first-child { font-size: 1rem; font-weight: 700; color: var(--text-dark); }

/* ============================
   SUBSCRIBE MODAL (popup mostrato quando serve un abbonamento per scaricare)
   ============================ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 20px; box-sizing: border-box; }
.modal-box { background: #fff; border-radius: 20px; padding: 36px 30px; max-width: 1000px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-sizing: border-box; }
.modal-close-btn { position: absolute; top: 16px; right: 16px; background: var(--bg-gray-1); border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; color: var(--text-dark); }
.modal-close-btn:hover { background: var(--bg-gray-2); }
.modal-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.modal-plan-card { background: var(--bg-gray-1); border: 2px solid transparent; border-radius: 14px; padding: 24px 16px; text-align: center; display: flex; flex-direction: column; position: relative; }
.modal-plan-card h3 { margin: 0; font-size: 1.3rem; }
.modal-plan-card .plan-tagline { font-size: 0.8rem; min-height: 34px; }
.modal-plan-card .plan-price-row { margin-top: 14px; gap: 6px; }
.modal-plan-card .plan-price { font-size: 1.2rem; }
.modal-plan-card .plan-price-amount { font-size: 1.7rem; }
.modal-plan-card .plan-price-old { font-size: 0.85rem; }
.modal-plan-card .plan-features { text-align: left; font-size: 0.8rem; margin: 14px 0; gap: 8px; }
.modal-plan-card .plan-features li:first-child { font-size: 0.88rem; }
.modal-plan-card .plan-popular-badge { top: -11px; font-size: 0.64rem; padding: 5px 12px; }
.modal-plan-card .plan-save-badge { top: 10px; right: 10px; font-size: 0.64rem; padding: 3px 8px; }
.modal-plan-card .plan-immediate-note { font-size: 0.7rem; margin-top: 8px; }
.modal-plan-card .btn-primary { justify-content: center; }
.modal-plan-card .plan-features { flex-grow: 1; }
/* Card piano compatta (23/09/2026, richiesta di ALFI): di default nel
   popup mostra solo nome, frase, prezzo e JOIN - la lista funzionalita' e
   la nota "Immediate access" restano nascoste finche' non clicchi
   "See what's included", vedi il toggle .plan-details-toggle nel click
   handler di #subscribe-modal-plans in design.html/saved.html. */
.modal-plan-card .plan-features,
.modal-plan-card .plan-immediate-note { display: none; }
.modal-plan-card.expanded .plan-features { display: flex; }
.modal-plan-card.expanded .plan-immediate-note { display: block; }
.plan-details-toggle { background: none; border: none; color: var(--accent-blue); font-size: 0.78rem; font-weight: 600; cursor: pointer; margin-top: 14px; padding: 6px; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.plan-details-toggle:hover { text-decoration: underline; }
.plan-details-toggle i { font-size: 0.68rem; transition: transform 0.2s ease; }
.modal-plan-card.expanded .plan-details-toggle i { transform: rotate(180deg); }
@media (max-width: 768px) {
    /* Richiesta ALFI 22/09/2026: nel popup "Choose a membership plan" aperto
       da design.html (Buy from $X -> Subscription), le 3 card devono
       scorrere in orizzontale come .membership-cards nella home page,
       invece di impilarsi in verticale. */
    /* "touch-action: pan-x" (richiesta ALFI 22/09/2026 (3): "quando slido i
       piani qualche volta si muove anche il resto") dice al browser che qui
       il gesto e' SOLO orizzontale: senza, uno swipe leggermente in
       diagonale veniva interpretato anche come scroll verticale del popup
       (che scorre lui stesso in verticale), facendo "saltare" tutto insieme
       invece di scorrere solo le card. */
    .modal-plans { display: flex; flex-wrap: nowrap; overflow-x: auto; touch-action: pan-x; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; justify-content: flex-start; gap: 16px; margin: 24px -30px 0; padding: 4px 30px 10px; width: calc(100% + 60px); max-width: calc(100% + 60px); scrollbar-width: none; }
    .modal-plans::-webkit-scrollbar { display: none; }
    .modal-plan-card { min-width: 82%; flex: 0 0 82%; scroll-snap-align: center; box-sizing: border-box; }

/* Richiesta ALFI 22/09/2026 (2): "i piani che scorrono a mo di carosello
       vengono un po tagliati" - dentro al popup non c'era abbastanza altezza
       per titolo/sottotitolo/toggle + una card intera, quindi la card
       restava tagliata in basso (bisognava scrollare in verticale, oltre
       che in orizzontale, e non era ovvio). Qui rendiamo il popup quasi a
       schermo intero e accorciamo l'intestazione, cosi' la prima card si
       vede quasi per intero da subito. Scoperto con #subscribe-modal-overlay
       cosi' non tocca gli altri popup del sito (cancel-sub, avatar-crop,
       ecc.) che riusano le stesse classi .modal-box/.modal-overlay. */
    #subscribe-modal-overlay { padding: 10px; }
    /* "vh" su Safari mobile misura l'altezza MASSIMA possibile (barra
       indirizzi nascosta), non quella davvero visibile in quel momento:
       risultato, la card sfora sotto il bordo scuro del popup e si vede
       la pagina sotto non scurita ("un po tagliata" segnalato da ALFI su
       iPhone). "dvh" segue invece l'altezza visibile reale; teniamo "vh"
       come fallback per i browser che non supportano ancora "dvh". */
    #subscribe-modal-overlay .modal-box { padding: 20px 16px; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); -webkit-overflow-scrolling: touch; }
    #subscribe-modal-overlay .section-header { gap: 8px; }
    #subscribe-modal-overlay .section-header h2 { font-size: 1.2rem; }
    #subscribe-modal-overlay .section-subtitle { display: none; }
    #subscribe-modal-overlay .billing-toggle { margin-top: 2px; }
    #subscribe-modal-overlay .billing-toggle-btn { padding: 7px 16px; font-size: 0.82rem; }
    #subscribe-modal-overlay .plan-annual-note { font-size: 0.62rem; padding: 4px 10px; }
    /* Richiesta ALFI 22/09/2026 (3): la scritta "MOST POPULAR" (che sporge
       sopra il bordo della card con un top negativo) veniva tagliata in
       cima - perche' "overflow-x: auto" qui sopra costringe il browser a
       trattare anche l'asse verticale come "auto" (lo taglia), quindi
       serve abbastanza padding-top perche' il badge ci stia dentro senza
       dover sporgere fuori dall'area cliccabile/scrollabile. */
    #subscribe-modal-overlay .modal-plans { margin: 4px -16px 0; padding: 20px 16px 10px; width: calc(100% + 32px); max-width: calc(100% + 32px); }
    #subscribe-modal-overlay .modal-plan-card { padding: 16px 14px; }
    #subscribe-modal-overlay .modal-plan-card .plan-tagline { min-height: 0; }
    #subscribe-modal-overlay .modal-plan-card .plan-features { margin: 10px 0 16px; padding-top: 12px; gap: 6px; }
}

/* ============================
   DESIGN DETAIL PAGE - stampante, filamenti, materiali
   ============================ */
.design-subtitle { color: var(--text-gray); font-size: 1.05rem; margin: -4px 0 20px; }
.design-extra-section { margin-top: 26px; }
.design-extra-section h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-gray); margin-bottom: 12px; }
.extras-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; margin-top: 26px; align-items: start; }
.extras-grid .design-extra-section { margin-top: 0; }
.machine-card { display: block; text-decoration: none; color: var(--text-dark); border-radius: 14px; overflow: hidden; width: 100%; max-width: 220px; }
.machine-image-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--bg-gray-1); border-radius: 14px; overflow: hidden; }
.machine-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.machine-card:hover .machine-image-wrap img { transform: scale(1.05); }
/* Marca/nome stampante sempre visibili sopra la foto (non solo al passaggio
   del mouse), centrati, maiuscoli e leggermente sollevati dal bordo
   inferiore (non appiccicati in fondo). */
.machine-name-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 12px; background: linear-gradient(to top, rgba(29,29,31,0.95) 0%, rgba(29,29,31,0.55) 55%, transparent 100%); color: #fff; text-align: center; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; }
.machine-name-plain { background: var(--bg-gray-1); border-radius: 14px; padding: 14px 16px; width: fit-content; text-align: center; display: flex; flex-direction: column; align-items: center; }
/* Marca sopra (piccola, discreta) + nome sotto (in grassetto) - sia
   nell'overlay al passaggio del mouse che nella versione "senza foto". */
.machine-name-overlay .machine-brand, .machine-name-plain .machine-brand { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 2px; }
.machine-name-overlay .machine-brand { color: rgba(255,255,255,0.75); }
.machine-name-plain .machine-brand { color: var(--text-gray); }
.machine-name-overlay .machine-name { display: block; font-weight: 800; font-size: 0.92rem; line-height: 1.25; text-transform: uppercase; }
.machine-name-plain .machine-name { display: block; font-weight: 600; }
.filament-chip-list, .material-chip-list { display: flex; flex-wrap: wrap; gap: 10px; }
.filament-chip, .material-chip-view { display: flex; align-items: center; gap: 8px; background: var(--bg-gray-1); border-radius: 20px; padding: 8px 14px; font-size: 0.88rem; text-decoration: none; color: var(--text-dark); transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.filament-chip:hover, .material-chip-view:hover { background: var(--bg-gray-2); }
.filament-swatch { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); flex-shrink: 0; }
.material-chip-view i { color: var(--accent-blue); }