/* Impostazioni Base e Font */
body {
    font-family: 'Inter', sans-serif;
    position: relative;
    overflow-x: hidden;
    background-color: #ffffff;
    color: #111827;
}

/* --- 1. FIGHETTATA: Sfondo Animato (Bianco e Rosso) --- */
.animated-background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100svh;
    z-index: -1;
    background: radial-gradient(circle at 50% 50%, 
        rgba(255, 255, 255, 0.9),
        rgba(249, 250, 251, 0.8),
        rgba(239, 68, 68, 0.4),
        rgba(255, 255, 255, 0.9),
        rgba(220, 38, 38, 0.5)
    );
    background-size: 170% 170%;
    animation: moveBackground 24s ease-in-out infinite alternate;
    contain: strict;
    pointer-events: none;
}

@keyframes moveBackground {
    0% { background-position: 15% 20%; }
    100% { background-position: 85% 80%; }
}

/* Sospende le animazioni non visibili senza alterare il loro stato. */
.pb-animation-paused,
.pb-page-hidden .animated-background {
    animation-play-state: paused !important;
}

/* Le sezioni lunghe della home vengono dipinte solo vicino al viewport. */
.pb-deferred-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
}

@media (prefers-reduced-motion: reduce) {
    .animated-background { animation: none; }
}

/* --- 2. FIGHETTATA: Navbar "appiccicosa" e sfocata --- */
.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.6); 
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(229, 231, 235, 0.7);
}

.logo-hover {
    transition: transform 0.3s ease;
}
.logo-hover:hover {
    transform: scale(1.05);
}

.nav-button {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.nav-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* --- 3. FIGHETTATA: Titolo Hero con Gradiente Animato --- */
.animate-text-gradient {
    background: linear-gradient(
        -45deg,
        #EF4444,
        #111827,
        #DC2626,
        #111827,
        #EF4444
    );
    background-size: 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 10s linear infinite;
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* --- 4. FIGHETTATA: Animazioni al caricamento --- */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

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

/* --- 5. FIGHETTATA: Animazioni allo SCROLL --- */
.fade-in-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Pulse lento per bottone ricerca */
.animate-pulse-slow {
    animation: pulse-slow 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.05);
  }
}


/* Stile Titoli Sezione */
/* MODIFICA RESPONSIVE: Aggiunta media query per font-size */
.section-title {
    text-align: center;
    font-size: 2rem; /* Dimensione mobile (32px) */
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: #111827;
}
@media (min-width: 768px) { /* md breakpoint */
    .section-title {
        font-size: 2.5rem; /* Dimensione desktop (40px) */
    }
}


/* Stile "Feature Cards" */
.feature-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}
.feature-card:hover {
    transform: translateY(-8px);
    border-color: #EF4444;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.1);
}

/* Effetto Shimmer su hover */
.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transform: skewX(-25deg);
    transition: left 0.6s ease;
}
.feature-card:hover::after {
    left: 150%;
}

.feature-icon {
    display: inline-flex;
    padding: 16px;
    border-radius: 50%;
    margin-bottom: 20px;
    color: white;
}

/* Stile "Statistiche Cards" */
.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}


/* --- 6. FIGHETTATA: Card 3D con Tilt (MODIFICATO) --- */
.card-3d {
    perspective: 1000px;
    /* La transizione è gestita da JS e .card-3d-inner */
}
.card-3d-inner {
    /* La transizione 'ease-out' serve per il reset al mouse-leave */
    transition: transform 0.3s ease-out;
    transform-style: preserve-3d;
    /* Rimosso: group-hover:scale-105. Ora è gestito da JS. */
    /* Aggiunto per mantenere le proporzioni corrette anche col case */
    width: 100%;
    height: 100%; 
}
.card-3d img {
    border-radius: 16px; /* Già presente in .foil-effect */
    /* Rimosso: box-shadow. Ora è su .foil-effect o .card-pocket */
}


/* --- 7. FIGHETTATA: Scroll Orizzontale Infinito --- */
.horizontal-scroll-container {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

.horizontal-scroll-content {
    display: flex;
    width: max-content;
    animation: scroll-loop 60s linear infinite;
}

@keyframes scroll-loop {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

.horizontal-scroll-container:hover .horizontal-scroll-content {
    animation-play-state: paused;
}

/* --- 8. FIGHETTATA: Stili per i Modali --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease-out;
}

/* Lo stato chiuso del modal deve prevalere sul display:flex del componente.
   La regola e' volutamente circoscritta ai modal: non altera le utility
   responsive (sm:block, md:flex, xl:block) usate nel resto dell'interfaccia. */
.modal-overlay.hidden {
    display: none !important;
}

.modal-content {
    background-color: white;
    padding: 2.5rem;
    border-radius: 16px;
    width: 100%;
    max-width: 450px;
    margin: 1rem;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s ease-out;
}

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

/* --- 5. FIGHETTATA: Pulsante Chiusura Modali Animato --- */
.modal-close-btn {
    background-color: transparent;
    border: none;
    color: #9ca3af; /* Tailwind gray-400 */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* FIX: Reso sempre visibile e rimosso l'effetto fantasma */
    opacity: 1; 
    transform: scale(1) rotate(0);
}

/* Rimosso .modal-content:hover .modal-close-btn che causava il bug */

.modal-close-btn:hover {
    color: #111827; /* Tailwind gray-900 */
    background-color: #f3f4f6; /* Tailwind gray-100 */
    transform: scale(1.1) rotate(90deg) !important;
}

.modal-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.modal-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.modal-input:focus {
    outline: none;
    border-color: #EF4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
}

.modal-button {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}
.modal-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-error {
    background-color: #fee2e2;
    border: 1px solid #f87171;
    color: #b91c1c;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}
.modal-error-text {
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 0.25rem;
}

/* --- 9. Stili per Master Set --- */
.missing-card .card-3d-inner {
    filter: grayscale(100%);
    opacity: 0.4;
    transition: all 0.3s ease;
}
.missing-card:hover .card-3d-inner {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- 10. Stili per Autocomplete Dropdown --- */
#autocompleteDropdown {
    animation: dropdownFadeIn 0.2s ease-out;
}

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

.autocomplete-item {
    text-decoration: none;
    color: inherit;
}

.autocomplete-item:first-child {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.autocomplete-item:last-child {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Scrollbar personalizzata per dropdown */
#autocompleteDropdown::-webkit-scrollbar {
    width: 8px;
}
#autocompleteDropdown::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 10px;
}
#autocompleteDropdown::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}
#autocompleteDropdown::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* --- 11. NUOVI STILI PER COLLEZIONE.PHP --- */

/* Header del Set (Divisore) */
.binder-set-header {
    font-size: 1.75rem; /* 28px */
    font-weight: 800;
    color: #111827;
    margin-top: 3rem; /* 48px */
    margin-bottom: 1.5rem; /* 24px */
    padding-bottom: 0.75rem; /* 12px */
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.75rem; /* 12px */
}
/* Icona del "libro/set" */
.binder-set-header::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23EF4444' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18c-2.305 0-4.408.867-6 2.292m0-14.25v14.25' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Tasca della carta */
.card-pocket {
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 20px; /* Più grande della carta (16px) */
    padding: 0.5rem; /* 8px */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    display: flex; /* Necessario per il filtro JS */
    flex-direction: column;
}

/* Formati fisici speciali — condiviso da collezione, wishlist e vetrine. */
.pb-format-ribbon {
    position: absolute;
    top: .65rem;
    left: 0;
    z-index: 35;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 1rem);
    padding: .34rem .62rem .34rem .55rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.62);
    border-left: 0;
    border-radius: 0 .65rem .65rem 0;
    color: #fff;
    background: linear-gradient(110deg, #f97316 0%, #ec4899 48%, #7c3aed 100%);
    box-shadow: 0 7px 18px rgba(124,58,237,.27), 0 2px 5px rgba(15,23,42,.16);
    font-size: .54rem;
    font-weight: 900;
    letter-spacing: .11em;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
}
.pb-format-ribbon::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(110deg, transparent 22%, rgba(255,255,255,.42) 45%, transparent 68%);
    transform: translateX(-140%);
    animation: pb-format-ribbon-shine 3.6s ease-in-out infinite;
}
.pb-format-ribbon > span { position: relative; z-index: 1; }
.pb-format-ribbon--collection { top: 2.15rem; }
.pb-format-ribbon--compact { top: .4rem; padding: .27rem .48rem; font-size: .46rem; }
@keyframes pb-format-ribbon-shine {
    0%, 58% { transform: translateX(-140%); }
    82%, 100% { transform: translateX(140%); }
}
@media (prefers-reduced-motion: reduce) {
    .pb-format-ribbon::after { animation: none; }
}
.card-pocket:hover {
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* --- 12. FIGHETTATA: Effetto Olografico (FOIL) --- */
.foil-effect {
    position: relative;
    overflow: hidden; /* Nasconde il riflesso che esce dai bordi */
    transform-style: preserve-3d;
    /* Applica il border radius qui così anche il riflesso è tagliato */
    border-radius: 16px;
    /* --foil-x/--foil-y seguono il puntatore (script.js), --foil-delay sfasa
       le carte di una griglia perché non luccichino tutte insieme. */
    --foil-x: 50%;
    --foil-y: 42%;
    --foil-delay: 0s;
    --foil-glow: 0;
}

/* Passata di luce: una sola banda stretta che attraversa la carta da sinistra
   a destra. background-repeat: no-repeat è ciò che impedisce la seconda barra. */
.foil-effect::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -62%;
    width: 55%;
    height: 200%;
    z-index: 10;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 24%,
        rgba(255, 255, 255, 0.34) 50%,
        rgba(255, 255, 255, 0.08) 76%,
        transparent 100%
    );
    background-repeat: no-repeat;
    mix-blend-mode: overlay;
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(12deg);
    animation: foil-sweep 11s cubic-bezier(0.37, 0, 0.24, 1) var(--foil-delay) infinite;
}

@keyframes foil-sweep {
    0%, 58% { opacity: 0; transform: translate3d(0, 0, 0) rotate(12deg); }
    67%     { opacity: 0.95; }
    90%     { opacity: 0.85; }
    100%    { opacity: 0; transform: translate3d(300%, 0, 0) rotate(12deg); }
}

/* Alone morbido sotto il puntatore: nessuno scatto, solo una dissolvenza. */
.foil-effect::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 11;
    pointer-events: none;
    background: radial-gradient(
        58% 52% at var(--foil-x) var(--foil-y),
        rgba(255, 255, 255, 0.5),
        rgba(255, 255, 255, 0.14) 46%,
        transparent 72%
    );
    mix-blend-mode: soft-light;
    opacity: var(--foil-glow);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Il puntatore accende l'alone; la banda continua per conto suo, così non
   c'è nessuno scatto quando il mouse entra o esce. */
@media (hover: hover) {
    .foil-effect:hover,
    .card-pocket:hover .foil-effect,
    .card-3d:hover .foil-effect {
        --foil-glow: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .foil-effect::before { animation: none; opacity: 0; }
    .foil-effect::after { transition: none; }
}


/* Fallback per le pagine che usano style.css senza Tailwind.
   :where() mantiene specificità zero: così sm:block, md:flex, xl:block e le
   altre utility responsive possono riattivare correttamente gli elementi. */
:where(.hidden) {
    display: none;
}


/* --- 13. FIGHETTATA: Stili Carta Gradata (PSA Case) --- */
.psa-case {
    position: relative;
    background: linear-gradient(135deg, #fdfdfd 20%, #f1f1f1 100%);
    border: 1px solid #b0b0b0;
    border-radius: 18px; /* Leggermente più grande della carta */
    padding: 24px 12px 12px 12px; /* Spazio per etichetta */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 0 0 1px rgba(255,255,255,0.8);
    width: 100%;
    /* Mantiene le proporzioni corrette (adattato per il case) */
    /* aspect-ratio: 6.3 / 8.8; */ /* Rimosso per flessibilità */
    display: flex;
    flex-direction: column;
}

.psa-label {
    width: 100%;
    background: #ffffff;
    padding: 6px 8px;
    border-bottom: 3px solid #EF4444;
    box-shadow: 0 2px 2px rgba(0,0,0,0.05);
    margin-bottom: 12px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    flex-shrink: 0;
    position: relative;
    z-index: 5; /* Sta sopra l'effetto sparkle */
}

.psa-company {
    font-size: 0.6rem; /* 9.6px */
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
}

.psa-logo {
    font-size: 0.8rem; /* 12.8px */
    font-weight: 900;
    color: #EF4444;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.psa-grade-text {
    font-size: 0.6rem; /* 9.6px */
    font-weight: 600;
    color: #EF4444;
    text-transform: uppercase;
}

.psa-grade {
    font-size: 1.5rem; /* 24px */
    font-weight: 900;
    color: #111;
    line-height: 1;
}

.psa-card-name {
    font-size: 0.55rem; /* 8.8px */
    font-weight: 600;
    color: #444;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px solid #f0f0f0;
    padding-top: 3px;
    margin-top: 3px;
}

.psa-card-image {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* La carta interna ha il suo foil e bordi arrotondati */
    overflow: hidden;
    border-radius: 8px; /* Bordi della carta *interna* */
    position: relative;
    z-index: 4; /* Sta sopra l'effetto sparkle */
}

.psa-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Usa 'contain' per non tagliare l'immagine */
    border-radius: 8px;
}

/* --- 14. FIGHETTATA: Effetto "SPETTACOLARE" (Graded Sparkle) --- */
.graded-sparkle-effect {
    overflow: hidden; /* Nasconde lo sparkle che esce */
    position: relative; /* Aggiunto per pseudo-elementi */
}

/* Effetto 1: Arcobaleno rotante (come prima) */
.graded-sparkle-effect::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%; /* Grande per coprire tutto */
    height: 200%;
    z-index: 1; /* Sta SOTTO il label e l'immagine */
    
    /* Il gradiente "arcobaleno" spettrale */
    background: conic-gradient(
        from 0deg,
        rgba(255, 100, 100, 0.5) 0deg,
        rgba(255, 255, 100, 0.5) 60deg,
        rgba(100, 255, 100, 0.5) 120deg,
        rgba(100, 255, 255, 0.5) 180deg,
        rgba(100, 100, 255, 0.5) 240deg,
        rgba(255, 100, 255, 0.5) 300deg,
        rgba(255, 100, 100, 0.5) 360deg
    );
    
    opacity: 0;
    mix-blend-mode: overlay; /* Effetto luce */
    
    /* Animazione di rotazione */
    animation: graded-sparkle-spin 8s linear infinite paused;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: opacity 0.5s ease;
}

/* *** NUOVO: Effetto 2: "Shine" che attraversa la carta *** */
.graded-sparkle-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Inizia fuori dallo schermo */
    width: 50%;
    height: 100%;
    z-index: 2; /* Sopra l'arcobaleno, sotto il label */
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.5), 
        transparent
    );
    transform: skewX(-30deg);
    animation: graded-shine 5s ease-in-out infinite;
    animation-delay: 1s; /* Parte dopo 1s */
    opacity: 0;
    transition: opacity 0.5s ease;
}


/* L'effetto si attiva solo all'hover */
.graded-sparkle-effect:hover::before {
    animation-play-state: running;
    opacity: 0.25; /* *** Aumentato leggermente *** */
}
/* *** NUOVO: Attiva lo shine su hover *** */
.graded-sparkle-effect:hover::after {
    opacity: 1; /* Mostra lo shine su hover */
}


@keyframes graded-sparkle-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* *** NUOVO: Animazione per lo "Shine" *** */
@keyframes graded-shine {
    0% { left: -150%; opacity: 0; }
    40% { left: 150%; opacity: 0.7; }
    100% { left: 150%; opacity: 0; }
}


/* Il foil della carta (se presente) deve stare SOTTO il label */
.psa-card-image .foil-effect {
    z-index: 3; /* Sopra l'immagine, sotto il label */
    width: 100%;
    height: 100%;
    border-radius: 8px; /* Adatta al contenitore */
}
/* Stile per il nuovo bottone "Grado" */
.btn-open-grade-modal {
    /* Stili già definiti in HTML, ma per sicurezza */
}
.btn-open-grade-modal:not(.card-tool-btn):hover {
    background-color: #dbeafe; /* Sfondo blu leggero */
    color: #2563eb; /* Testo blu */
}

/* --- 15. Stili per AI Scanner Modal --- */

.upload-drop-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 2px dashed #d1d5db; /* border-gray-300 */
    border-radius: 8px;
    background-color: #f9fafb; /* bg-gray-50 */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.upload-drop-zone:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
    border-color: #9ca3af; /* border-gray-400 */
}
.upload-drop-zone .upload-zone-text {
    color: #4b5563; /* text-gray-600 */
    font-weight: 500;
}

#aiImagePreview {
    max-height: 20rem; /* 320px */
    width: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Spinner di caricamento */
.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-left-color: #3b82f6; /* text-blue-500 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Rimuove i vecchi stili del QR scanner se presenti */
#qr-reader, #scannerStatus {
    display: none;
}

/* --- 16. Stili per Lista Risultati AI (RIMOSSI) --- */
/* Le classi .ai-result-item, .ai-result-img, 
    .ai-result-info, .ai-result-name, .ai-result-set,
    .btn-add-ai-result non sono più necessarie.
    Rimosse per pulizia.
*/

/* COPIA E INCOLLA QUESTO BLOCCO ALLA FINE DEL TUO FILE style.css 
  (Questo file contiene solo le aggiunte/modifiche)
*/

/* --- 17. NUOVI STILI PER COLLEZIONE (Qualità e Prezzo) --- */

/* Badge Qualità (blu) - RIMOSSO */
/*
.quality-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem; 
    border-radius: 9999px; 
    font-size: 0.875rem; 
    font-weight: 700; 
    background-color: #3b82f6; 
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); 
    border: 2px solid rgba(255, 255, 255, 0.5); 
}
*/

/* NUOVO: Stile per testo qualità */
.card-quality-text {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
}
.card-quality-text strong {
    color: #1f2937; /* text-gray-800 */
    font-weight: 600; /* font-semibold */
}


/* Contenitore blocco prezzi */
.price-info-block {
    min-height: 4rem; /* h-16 (o simile) per evitare sbalzi di layout */
}

/* Bottone per Prezzo Custom */
.btn-open-custom-price-modal:not(.card-price-command) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem; /* gap-1 */
    width: 100%;
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    color: #6b7280; /* text-gray-500 */
    padding-top: 0.25rem; /* py-1 */
    padding-bottom: 0.25rem; /* py-1 */
    margin-top: 0.25rem; /* mt-1 */
    border-radius: 0.375rem; /* rounded-md */
    transition: all 0.2s ease-in-out;
}
.btn-open-custom-price-modal:not(.card-price-command):hover {
    color: #16a34a; /* hover:text-green-600 */
    background-color: #f0fdf4; /* hover:bg-green-50 */
}

/* --- 18. Stili per Grafico Prezzi --- */
.chart-container {
    position: relative;
    height: 300px; /* Altezza base per mobile */
    width: 100%;
}

@media (min-width: 768px) { /* md breakpoint */
    .chart-container {
        height: 350px; /* Altezza per desktop */
    }
}

/* Stile per messaggio "Dati non disponibili" */
.chart-no-data-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
    background-color: #f9fafb; /* bg-gray-50 */
    border: 1px dashed #e5e7eb; /* border-gray-200 */
    border-radius: 12px;
    color: #6b7280; /* text-gray-500 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
}


/* --- 19. Stili per Header Profilo (MODIFICATO E RESO PIÙ BELLO) --- */

/* Questo è il contenitore del bottone (icona + testo) */
.nav-button-profile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 9999px; /* Arrotondato (pill shape) */
    
    /* Colore azzurro, come il bottone mobile */
    background-color: #ecf8ff; /* bg-blue-50 */
    color: #2563eb; /* text-blue-600 */
    border: 1px solid #dbeafe; /* border-blue-200 */

    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    line-height: 1; 
    font-weight: 600; /* font-semibold (come da span) */
}
.nav-button-profile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2); /* Ombra blu */
    background-color: #dbeafe; /* bg-blue-200 */
    color: #1d4ed8; /* text-blue-700 */
    border-color: #bfdbfe; /* border-blue-300 */
}

/* Questa è l'icona (Pikachu) dentro il bottone */
.profile-icon-header {
    width: 32px; /* 2rem, h-8 w-8 */
    height: 32px;
    border-radius: 50%;
    object-fit: cover; /* Assicura che l'immagine copra */
    
    /* Aggiunge un bordo e un'ombra all'icona stessa */
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}


/* --- 20. Stili per Pagina Profilo (profilo.php) --- */
/* (Li rimetto per sicurezza) */

.profile-header {
    display: flex;
    flex-direction: column; /* Su mobile */
    align-items: center;
    text-align: center;
}
@media (min-width: 768px) { /* md breakpoint */
    .profile-header {
        flex-direction: row; /* Su desktop */
        text-align: left;
    }
}

/* Griglia di selezione icona */
.profile-icon-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); /* Crea una griglia flessibile */
    gap: 0.75rem; /* 12px */
    padding: 0.75rem;
    background-color: #f9fafb; /* bg-gray-50 */
    border: 1px solid #e5e7eb; /* border-gray-200 */
    border-radius: 12px;
    max-height: 300px;
    overflow-y: auto;
}
/* Stili per scrollbar (come autocomplete) */
.profile-icon-selector::-webkit-scrollbar {
    width: 8px;
}
.profile-icon-selector::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 10px;
}
.profile-icon-selector::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}
.profile-icon-selector::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.profile-icon-item {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid transparent;
    transition: all 0.2s ease-in-out;
    overflow: hidden; /* Per sicurezza */
}
.profile-icon-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.profile-icon-item:hover {
    transform: scale(1.05);
    border-color: #fca5a5; /* Bordo rosso leggero */
}
.profile-icon-item.selected {
    border-color: #EF4444; /* Bordo rosso pieno */
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

/* --- 21. NUOVI STILI "POKEMOSA" PER PAGINA PROFILO --- */

/* Contenitore principale con sfondo a tema */
.profile-page-container {
    padding: 1rem;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);

    /* Sfondo a tema Pokéball, molto leggero */
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(239, 68, 68, 0.03), transparent 70%);
    background-size: 100px 100px;

    /* Aggiungiamo un bordo per staccare */
    border: 1px solid rgba(229, 231, 235, 0.8);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

@media (min-width: 768px) {
    .profile-page-container {
        padding: 2rem;
    }
}

/* Stile per tutte le "card" bianche dentro la pagina profilo */
.profile-card {
    /* Rimuoviamo il vecchio bordo, gestito dal contenitore */
    border: none;

    /* Aggiungiamo un bordo superiore colorato, tipo Pokémon card */
    border-top: 4px solid #F5D300; /* Giallo Pokémon */
    transition: all 0.3s ease-in-out;
}

/* Stile per la Zona Pericolosa */
.profile-card.danger-zone {
    /* Sovrascrive il giallo con il rosso */
    border-top-color: #EF4444; /* Rosso Pokémon */

    /* Aggiunge un bordo laterale per evidenziare */
    border-left: 2px solid #fee2e2;
    border-right: 2px solid #fee2e2;
}

/* Effetto hover per le card */
.profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Migliora l'aspetto del selettore icone */
.profile-icon-selector {
    background-color: #f3f4f6; /* Sfondo leggermente più scuro */
    border-color: #d1d5db;
}

/* Stile per l'icona selezionata (già presente, ma migliorato) */
.profile-icon-item.selected {
    border-color: #EF4444;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
}

/* Stile per l'header del profilo */
.profile-header {
    /* Aggiunge padding e un bordo inferiore */
    padding-bottom: 2rem;
    border-bottom: 2px solid #e5e7eb;
}

/* --- NEW APPLE "FLYING ISLAND" NAVBAR (V2 - WIDER & CLEARER) --- */

/* Aggiungiamo spazio in cima al sito perché la nav ora è "fixed" e fluttuante */
body {
    padding-top: 115px;
}

/* La Barra "Cilindro Volante" */
.glass-nav {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 28px), 1500px);
    z-index: 9999;
    border-radius: 24px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.1),
        0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: visible;
    font-family: 'Inter', sans-serif;
}

.glass-nav button,
#mobile-menu button {
    font: inherit;
}

.glass-nav-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 16px;
}

.glass-nav-brand {
    display: flex;
    grid-column: 1;
    justify-self: start;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.glass-nav-desktop {
    display: none;
}

.glass-nav-primary,
.glass-nav-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
}

.glass-nav-primary { justify-self: center; }
.glass-nav-actions { justify-self: end; }
.glass-nav-divider {
    width: 1px;
    height: 36px;
    margin: 0 5px;
    background: rgba(15, 23, 42, .11);
}

/* Link Navbar (Testo) */
.glass-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 15px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.12rem;
    color: #000000;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: all 0.2s ease;
    background: transparent;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.glass-link:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #dc2626;
    transform: translateY(-1px);
}

.glass-link.nav-current {
    background: rgba(239, 68, 68, .09);
    color: #dc2626;
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .07);
}

/* Logo */
.glass-nav-brand > img {
    width: auto;
    height: 46px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}
.logo-glass {
    font-size: 1.65rem;
    color: #000;
}

/* L'informazione secondaria vive in un menu compatto, non compete con le CTA. */
.glass-nav-more {
    position: relative;
    flex: 0 0 auto;
}
.glass-nav-more > summary {
    list-style: none;
    gap: 5px;
}
.glass-nav-more > summary::-webkit-details-marker { display: none; }
.glass-nav-more > summary svg {
    width: 18px;
    height: 18px;
    transition: transform .2s ease;
}
.glass-nav-more[open] > summary {
    background: rgba(15, 23, 42, .06);
    color: #111827;
}
.glass-nav-more[open] > summary svg { transform: rotate(180deg); }
.glass-nav-more-menu {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 330px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 20px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 24px 60px -22px rgba(15, 23, 42, .38), 0 6px 20px -12px rgba(15, 23, 42, .2);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    animation: menuPop .2s ease-out;
    overflow: hidden;
}
.glass-nav-more-menu::before {
    content: '';
    position: absolute;
    inset: 0 18px auto;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ef4444, #f59e0b, #3b82f6);
    opacity: .8;
}
.glass-nav-more-kicker,
.glass-mobile-label {
    display: block;
    padding: 6px 10px;
    color: #94a3b8;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .13em;
    line-height: 1;
    text-transform: uppercase;
}
.glass-nav-more-item {
    display: flex;
    align-items: center;
    position: relative;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: #1f2937;
    padding: 9px;
    text-decoration: none;
    transition: background-color .18s ease, transform .18s ease;
}
.glass-nav-more-item:hover,
.glass-nav-more-item.nav-current {
    border-color: rgba(15, 23, 42, .055);
    background: rgba(248, 250, 252, .92);
    color: #111827;
    transform: translateX(2px);
}
.glass-nav-more-icon {
    display: grid;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 22px -14px currentColor;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease;
}
.glass-nav-more-item:hover .glass-nav-more-icon { transform: rotate(-3deg) scale(1.05); }
.glass-nav-more-icon svg { width: 32px; height: 32px; }
.glass-nav-more-icon--dex {
    color: #dc2626;
    background: linear-gradient(145deg, #fff1f2, #fecdd3);
}
.glass-nav-more-icon--gear {
    color: #4f46e5;
    background: linear-gradient(145deg, #eef2ff, #c7d2fe);
}
.glass-nav-more-icon--team {
    color: #b45309;
    background: linear-gradient(145deg, #fffbeb, #fde68a);
}
.glass-nav-more-item strong,
.glass-nav-more-item small { display: block; }
.glass-nav-more-item strong { color: #1e293b; font-size: 1.05rem; line-height: 1.2; }
.glass-nav-more-item small { margin-top: 4px; color: #94a3b8; font-size: 0.8rem; font-weight: 650; }

.glass-icon-button {
    display: inline-grid;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.glass-icon-button:hover { transform: translateY(-1px); }
.glass-logout-button { color: #64748b; }
.glass-logout-button:hover { background: #fff1f2; color: #dc2626; }

/* Bottone Primario (Collezione) */
.glass-btn-primary {
    background: #ef4444;
    color: white !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    border: none;
}
.glass-btn-primary:hover {
    background: #dc2626;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.5);
}

/* Bottone Admin */
.glass-btn-admin {
    color: #7c3aed !important;
    background: rgba(124, 58, 237, 0.05);
}
.glass-btn-admin:hover {
    background: rgba(124, 58, 237, 0.1);
    color: #6d28d9 !important;
}

/* Trainer badge: l'avatar e' un'azione riconoscibile, non una monetina isolata. */
.glass-profile-pill {
    min-height: 50px;
    padding: 3px;
    background: rgba(248, 250, 252, .88);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    color: #1f2937;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    text-decoration: none;
}
.glass-profile-pill:hover {
    background: white;
    border-color: rgba(239, 68, 68, .2);
    box-shadow: 0 12px 26px -18px rgba(15,23,42,.65), 0 0 0 3px rgba(239,68,68,.055);
    transform: translateY(-2px);
}
.glass-avatar-frame {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(145deg, #ef4444 0%, #f97316 52%, #facc15 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 7px 16px -11px rgba(220,38,38,.8);
}
.glass-avatar-frame img {
    display: block;
    width: 38px;
    height: 38px;
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 11px;
    object-fit: cover;
    background: #fff;
}
.glass-avatar-status {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 2px 5px rgba(15,23,42,.18);
}
.glass-profile-copy {
    display: none;
    min-width: 0;
    padding-right: 9px;
    line-height: 1.05;
    text-align: left;
}
.glass-profile-copy strong,
.glass-profile-copy small { display: block; white-space: nowrap; }
.glass-profile-copy strong { color: #1e293b; font-size: .92rem; font-weight: 850; }
.glass-profile-copy small { margin-top: 4px; color: #94a3b8; font-size: .75rem; font-weight: 700; }
.glass-mobile-profile { gap: 11px !important; }
.glass-mobile-profile-copy { line-height: 1.1; }
.glass-mobile-profile-copy strong,
.glass-mobile-profile-copy small { display: block; }
.glass-mobile-profile-copy strong { color: #1e293b; font-size: 1.1rem; }
.glass-mobile-profile-copy small { margin-top: 4px; color: #94a3b8; font-size: 0.8rem; font-weight: 650; }

@media (min-width: 1024px) {
    .glass-nav-inner {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }
    .glass-nav-desktop { display: contents !important; }
    .glass-nav-primary { grid-column: 2; }
    .glass-nav-actions { grid-column: 3; }
    #mobile-menu-toggle { display: none !important; }
}
@media (min-width: 1440px) {
    .glass-profile-copy { display: block; }
}

/* MENU MOBILE */
#mobile-menu {
    position: absolute;
    top: calc(100% + 15px);
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 15px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transform-origin: top center;
    animation: menuPop 0.3s ease-out;
    max-height: calc(100svh - 120px);
    overflow-y: auto;
}

.glass-mobile-label-spaced { margin-top: 5px; }
.glass-mobile-new {
    margin-left: auto;
    border-radius: 999px;
    background: #fff1f2;
    color: #e11d48;
    padding: 4px 8px;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Link di navigazione nel menu mobile - più definiti e compatti */
#mobile-menu .glass-link {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

/* .glass-link è centrata per default; i link di navigazione che dichiarano
   justify-start devono restare allineati a sinistra anche con il CSS statico. */
#mobile-menu .glass-link.justify-start {
    justify-content: flex-start;
    text-align: left;
}

#mobile-menu .glass-link:active {
    background: #f3f4f6;
    transform: scale(0.98);
}

/* Non applicare bordo/sfondo ai pulsanti speciali (primary, admin) */
#mobile-menu .glass-btn-primary {
    border: none;
    background: #ef4444;
}

#mobile-menu .glass-link.text-purple-700 {
    background: rgba(245, 243, 255, 0.9);
    border-color: #ddd6fe;
}

#mobile-menu .glass-link.text-red-500 {
    background: transparent;
    border: 1px solid #fecaca;
}

@keyframes menuPop {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- HERO SECTION --- */

/* Il Titolo Enorme */
.hero-title {
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(180deg, #111827 0%, #4b5563 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

/* Classe per la parte nera */
.text-impact-dark {
    color: #0f172a;
}

/* --- MODIFICA COLORE "I TUOI PREZZI" (ROSSO PURO) --- */
.text-impact-red {
    /* Gradiente Ruby Red: Da Rosso Vivido a Rosso Scuro (niente arancione) */
    background: linear-gradient(
        135deg, 
        #ef4444 0%,   /* Tailwind Red-500 */
        #b91c1c 100%  /* Tailwind Red-700 */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
    filter: drop-shadow(0 4px 6px rgba(220, 38, 38, 0.3));
}

/* Sottotitolo Hero */
.hero-subtitle {
    font-size: 1.35rem;
    font-weight: 500;
    color: #374151;
    line-height: 1.6;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

/* Animazione Fluttuante */
@keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* --- BARRA DI RICERCA RESPONSIVE --- */

.hero-search-wrapper {
    position: relative;
    width: 100%;
    max-width: 720px;
    /* MOBILE: Padding più piccolo e compatto */
    padding: 6px; 
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: float-slow 6s ease-in-out infinite;
}

/* PC (Desktop): Ripristino grandezza originale */
@media (min-width: 768px) {
    .hero-search-wrapper {
        padding: 10px;
    }
}

.hero-search-wrapper:hover,
.hero-search-wrapper:focus-within {
    animation-play-state: paused;
    transform: translateY(-5px) scale(1.02);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 
        0 35px 60px -15px rgba(220, 38, 38, 0.3),
        0 20px 30px -5px rgba(0, 0, 0, 0.15);
}

.hero-input {
    width: 100%;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 9999px;
    
    /* MOBILE: Padding, font e spazi ridotti */
    padding: 16px 20px; 
    padding-right: 60px; /* Spazio sufficiente per il bottone piccolo */
    font-size: 1rem;     /* Testo più piccolo (16px) */
    
    font-weight: 600;
    color: #111827;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

/* PC (Desktop): Ripristino dimensioni originali */
@media (min-width: 768px) {
    .hero-input {
        padding: 24px 36px;
        padding-right: 90px;
        font-size: 1.35rem;
    }
}

.hero-input::placeholder {
    color: #9ca3af;
    font-weight: 500;
}

.hero-search-btn {
    position: absolute;
    
    /* MOBILE: Bottone più piccolo e posizionato meglio */
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    color: white;
    box-shadow: 0 4px 15px rgba(185, 28, 28, 0.4);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
}

/* PC (Desktop): Ripristino bottone grande */
@media (min-width: 768px) {
    .hero-search-btn {
        right: 18px;
        width: 60px;
        height: 60px;
    }
}

.hero-search-btn:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 10px 25px rgba(185, 28, 28, 0.6);
}

.hero-search-btn svg {
    /* MOBILE: Icona lente ridimensionata */
    width: 22px;
    height: 22px;
    stroke-width: 3px;
}

/* PC (Desktop): Ripristino icona grande */
@media (min-width: 768px) {
    .hero-search-btn svg {
        width: 28px;
        height: 28px;
    }
}

/* MODIFICA: Rimosso margin-top dal CSS per controllo via HTML */
.hero-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 9999px;
    color: #4b5563;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.hero-secondary-btn:hover {
    border-color: #fee2e2;
    color: #dc2626;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(220, 38, 38, 0.15);
}

/* --- BOX FEATURES (MODERN & ALIGNED & CLOSER) --- */

.features-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    /* MODIFICA: Ridotto margin-top per avvicinare i box */
    margin-top: 1rem; 
    align-items: stretch; 
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

.feature-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    padding: 2.5rem;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border-color: #ef4444;
    background: #ffffff;
}

.feature-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
    color: white;
}

.feature-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.feature-description {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.6;
    flex-grow: 1;
}

.feature-highlight {
    font-weight: 700;
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- CAROSELLO PREMIUM "INFINITE MARQUEE" (V4 - CRYSTAL CLEAR) --- */

.premium-marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden; 
    padding: 60px 0 120px 0; 
    
    /* FIX "EFFETTO BIANCO": Rimosso la maschera sfumata aggressiva.
       Ora le carte sono nitide da bordo a bordo. */
    mask-image: none;
    -webkit-mask-image: none;
}

.premium-marquee-track {
    display: flex;
    gap: 5rem; 
    width: max-content;
    animation: marquee-slide 80s linear infinite;
    padding-left: 5rem;
    transform-style: preserve-3d; 
}

.premium-marquee-wrapper:hover .premium-marquee-track {
    animation-play-state: paused;
}

@keyframes marquee-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- LA CARTA --- */
.premium-card-slab {
    position: relative;
    width: 300px; 
    flex-shrink: 0;
    border-radius: 16px;
    perspective: 1000px; 
    text-decoration: none;
    /* Animazione idle */
    animation: float-idle 6s ease-in-out infinite;
}

.premium-card-slab:nth-child(odd) { animation-delay: 1s; }
.premium-card-slab:nth-child(even) { animation-delay: 0s; }

@keyframes float-idle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Stato HOVER */
.premium-card-slab:hover {
    transform: translateY(-20px) scale(1.1) !important;
    z-index: 100; 
    animation: none;
}

/* Contenuto Immagine */
.slab-content {
    position: relative;
    border-radius: 15px;
    background: transparent;
    padding: 0;
    
    /* Ombra morbida */
    box-shadow: 
        0 15px 35px rgba(0,0,0,0.2),
        0 5px 15px rgba(0,0,0,0.1);
    
    transition: box-shadow 0.3s ease, transform 0.1s ease-out; 
    transform-style: preserve-3d;
}

.premium-card-slab:hover .slab-content {
    box-shadow: 
        0 30px 60px rgba(0,0,0,0.35),
        0 10px 20px rgba(0,0,0,0.2);
}

.slab-content img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    backface-visibility: hidden; 
    transform: translateZ(0);
}

/* --- EFFETTI --- */

/* FIX OLOGRAFICO: Molto più leggero e trasparente */
.holo-sheen {
    position: absolute;
    top: 0;
    left: -100%;
    width: 30%; /* Striscia più stretta */
    height: 100%;
    
    /* Gradiente molto più delicato (0.2 invece di 0.5) */
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.2), 
        transparent
    );
    
    transform: skewX(-25deg);
    z-index: 10;
    pointer-events: none;
    border-radius: 15px; 
}

.premium-card-slab:hover .holo-sheen {
    left: 200%;
    transition: left 0.6s ease-in-out;
}

/* Badge Trending */
.trending-badge {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #ef4444;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 110; 
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.6);
    border: 3px solid white;
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.premium-card-slab:hover .trending-badge {
    transform: scale(1);
}

/* Info Panel */
.slab-info {
    position: absolute;
    bottom: -60px; 
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 15px;
    border-radius: 16px;
    text-align: center;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.8);
    pointer-events: none;
}

.premium-card-slab:hover .slab-info {
    opacity: 1;
    transform: translateY(-80px) scale(1); 
    z-index: 120;
}

/* --- INIZIO NUOVI STILI APPLE GLASS --- */

/* 1. Sfondo Dinamico "Ambient" */
.ambient-background {
    position: fixed;
    inset: -24px;
    z-index: -10; 
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(36px) saturate(145%) brightness(0.88);
    transform: scale(1.06);
    opacity: 0.6; 
    pointer-events: none; 
    contain: strict;
}

.ambient-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -9;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* 2. Pannelli Glassmorphism */
.glass-panel-apple {
    background: rgba(255, 255, 255, 0.75); 
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 10px 40px -10px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    border-radius: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-panel-apple:hover {
    box-shadow: 
        0 20px 50px -10px rgba(0, 0, 0, 0.08), 
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

/* 3. Tipografia e Dettagli */
.text-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.stat-value {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.03em;
}

.badge-apple {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 6px 16px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #374151;
}

/* --- FIX WIDGET PREZZI --- */
.price-widget {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.25rem;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb; /* Grigio chiaro */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

/* Widget Principale (Near Mint) */
.price-widget.main-price {
    background: linear-gradient(135deg, #fff1f2 0%, #ffffff 100%); /* Sfondo leggermente rosso */
    border: 2px solid #fee2e2; /* Bordo rosso chiaro */
    box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.1);
}

.price-widget:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
}

.price-currency {
    font-size: 0.6em;
    vertical-align: top;
    margin-right: 2px;
    opacity: 0.7;
}

/* 5. Pulsanti Azione */
.btn-ios-primary {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: white;
    font-weight: 600;
    border-radius: 14px;
    padding: 14px 24px;
    border: none;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    transition: all 0.3s ease;
}
.btn-ios-primary:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
}

.btn-ios-secondary {
    background: rgba(255, 255, 255, 0.8);
    color: #374151;
    font-weight: 600;
    border-radius: 14px;
    padding: 12px 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}
.btn-ios-secondary:hover {
    background: white;
    color: #111827;
}

/* Toggle Lingua */
.btn-lang-active {
    background-color: white !important;
    color: #111827 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-weight: 700;
}
.btn-lang-inactive {
    color: #6b7280;
    background-color: transparent;
    font-weight: 600;
}
.btn-lang-inactive:hover {
    color: #111827;
    background-color: rgba(255,255,255,0.4);
}

/* --- STILI MODAL CARTA --- */
#cardModal {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 99999; 
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#cardModal.active {
    display: flex;
    opacity: 1;
}

.modal-card-container {
    position: relative;
    width: auto;
    max-width: 90vw;
    max-height: 85vh;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#cardModal.active .modal-card-container {
    transform: scale(1);
}

.modal-card-container img {
    display: block;
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* --- STILI NUOVI: BENTO GRID & LEADERBOARD --- */

.bento-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.05), 
        0 2px 4px -1px rgba(0, 0, 0, 0.03),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bento-card:hover {
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.05), 
        0 10px 10px -5px rgba(0, 0, 0, 0.02);
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.85);
}

/* Stili per i Widget Statistiche (Sinistra) */
.bento-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 160px; /* Altezza fissa per consistenza */
}

.stat-label {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.stat-sub {
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

/* Gradiente per il numero rosso */
.text-gradient-red {
    background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Stili Leaderboard (Top 3) */
.leaderboard-item {
    /* La transizione è già nel JS, qui aggiungiamo dettagli fini */
    backdrop-filter: blur(10px);
}

.leaderboard-item:hover {
    border-color: #fee2e2; /* Red-100 */
    transform: scale(1.01);
}

/* Anima l'ingresso degli elementi */
@keyframes slideInRightStagger {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

#most-expensive-list li {
    animation: slideInRightStagger 0.5s ease-out forwards;
    opacity: 0; 
}
#most-expensive-list li:nth-child(1) { animation-delay: 0.1s; }
#most-expensive-list li:nth-child(2) { animation-delay: 0.2s; }
#most-expensive-list li:nth-child(3) { animation-delay: 0.3s; }

/* --- NUOVO STILE: Command Dock per Collezione --- */

.command-dock {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    padding: 1rem;
    position: relative;
    z-index: 30;
    transition: all 0.3s ease;
}

.command-dock:focus-within {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 25px 50px -12px rgba(239, 68, 68, 0.15); /* Ombra rossa leggera */
    transform: translateY(-2px);
}

/* Input di ricerca principale */
.command-input {
    width: 100%;
    background: transparent;
    border: none;
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
    padding: 12px 16px;
    outline: none;
}
.command-input::placeholder {
    color: #9ca3af;
    font-weight: 500;
}

/* Bottone AI Scanner "Magico" */
.btn-ai-magic {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    color: white;
    border: none;
    border-radius: 14px;
    padding: 10px 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
    transition: all 0.3s ease;
    white-space: nowrap;
}
.btn-ai-magic:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(168, 85, 247, 0.6);
}
.btn-ai-magic svg {
    width: 20px;
    height: 20px;
}

/* Bottone Filtri */
.btn-filter-toggle {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-filter-toggle:hover, .btn-filter-toggle.active {
    background: #e5e7eb;
    color: #111827;
}

/* Area Filtri Avanzati (Nascosta di default) */
.advanced-filters-area {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.advanced-filters-area.open {
    max-height: 500px; /* Abbastanza alto da contenere tutto */
    opacity: 1;
    transform: translateY(0);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0,0,0,0.05);
}

/* Stile Select personalizzate nella dock */
.dock-select {
    width: 100%;
    padding: 10px 12px;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #374151;
    outline: none;
    transition: border-color 0.2s;
}
.dock-select:focus {
    border-color: #EF4444;
    background-color: white;
}

/* --- FIX FINALE E SICURO PER BOTTONI --- */

/* 1. CONFIGURAZIONE BOTTONI QUADRATI (Azioni) */
/* Usiamo font-size: 0 per nascondere il testo senza colpire le icone */
.card-pocket .btn-toggle-favorite:not(.card-favorite-btn),
.card-pocket .btn-open-grade-modal:not(.card-tool-btn),
.card-pocket .btn-remove-from-collection:not(.card-tool-btn) {
    width: 32px !important;       /* Larghezza fissa */
    height: 32px !important;      /* Altezza fissa */
    padding: 0 !important;        /* Nessuno spazio extra */
    border-radius: 8px !important;
    
    font-size: 0 !important;      /* <--- QUESTO NASCONDE IL TESTO */
    
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;  /* Taglia tutto ciò che sborda */
}

/* 2. Assicuriamoci che gli SPAN (se contengono icone) siano visibili */
.card-pocket .btn-toggle-favorite:not(.card-favorite-btn) span,
.card-pocket .btn-open-grade-modal:not(.card-tool-btn) span,
.card-pocket .btn-remove-from-collection:not(.card-tool-btn) span {
    display: flex !important;     /* Mostra il wrapper dell'icona */
    align-items: center;
    justify-content: center;
    border: none !important;
}

/* 3. Assicuriamoci che le ICONE SVG si vedano bene */
.card-pocket .btn-toggle-favorite:not(.card-favorite-btn) svg,
.card-pocket .btn-open-grade-modal:not(.card-tool-btn) svg,
.card-pocket .btn-remove-from-collection:not(.card-tool-btn) svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;    /* L'icona DEVE vedersi */
    margin: 0 auto !important;
}

/* 4. CONFIGURAZIONE BOTTONE "IMPOSTA PREZZO" (Testo VISIBILE) */
/* Qui resettiamo il font-size per far leggere la scritta */
.card-pocket .btn-open-custom-price-modal:not(.card-price-command) {
    width: 100% !important;
    padding: 6px 4px !important;
    
    font-size: 0.75rem !important; /* <--- RIPRISTINA TESTO VISIBILE QUI */
    
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Forza la visibilità del testo del prezzo */
.card-pocket .btn-open-custom-price-modal:not(.card-price-command) span {
    display: inline-block !important; 
    font-size: 0.75rem !important;
}

/* --- STILI DASHBOARD COLLEZIONE --- */
#portfolioChart {
    max-height: 200px;
    width: 100%;
}

/* Stile per l'area cliccabile del Prezzo Acquisto */
.btn-open-purchase-modal {
    cursor: pointer;
    user-select: none;
}
.btn-open-purchase-modal:hover span {
    color: #4b5563; /* Gray-600 */
}

/* Fix per input numeri nel modale */
#purchasePriceInput {
    font-variant-numeric: tabular-nums;
}

/* Scrollbar sottile per il menu custom */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(220, 38, 38, 0.2);
    border-radius: 20px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(220, 38, 38, 0.5);
}

/* Animazione discesa */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-fade-in-down {
    animation: fadeInDown 0.2s ease-out forwards;
}

/* Stile centralizzato per le card effetto vetro (da community) */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}
.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    background: rgba(255, 255, 255, 0.9);
}

/* --- FIGHETTATA: Animazioni 3D per Switch Modali FIX APPLE/iOS --- */
.modal-perspective {
    perspective: 1500px;
    -webkit-perspective: 1500px;
}

/* Forziamo l'accelerazione hardware e nascondiamo il retro su iOS */
.modal-flip-out-left,
.modal-flip-in-right,
.modal-flip-out-right,
.modal-flip-in-left {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
}

.modal-flip-out-left {
    -webkit-animation: flipOutLeft 0.3s forwards ease-in !important;
    animation: flipOutLeft 0.3s forwards ease-in !important;
}
.modal-flip-in-right {
    -webkit-animation: flipInRight 0.3s forwards ease-out !important;
    animation: flipInRight 0.3s forwards ease-out !important;
}
.modal-flip-out-right {
    -webkit-animation: flipOutRight 0.3s forwards ease-in !important;
    animation: flipOutRight 0.3s forwards ease-in !important;
}
.modal-flip-in-left {
    -webkit-animation: flipInLeft 0.3s forwards ease-out !important;
    animation: flipInLeft 0.3s forwards ease-out !important;
}

/* Prefissi WebKit per le Keyframes (Salva-vita su iPhone) */
@-webkit-keyframes flipOutLeft {
    0% { -webkit-transform: perspective(1000px) rotateY(0) scale(1); opacity: 1; }
    100% { -webkit-transform: perspective(1000px) rotateY(-90deg) scale(0.95); opacity: 0; }
}
@keyframes flipOutLeft {
    0% { transform: perspective(1000px) rotateY(0) scale(1); opacity: 1; }
    100% { transform: perspective(1000px) rotateY(-90deg) scale(0.95); opacity: 0; }
}

@-webkit-keyframes flipInRight {
    0% { -webkit-transform: perspective(1000px) rotateY(90deg) scale(0.95); opacity: 0; }
    100% { -webkit-transform: perspective(1000px) rotateY(0) scale(1); opacity: 1; }
}
@keyframes flipInRight {
    0% { transform: perspective(1000px) rotateY(90deg) scale(0.95); opacity: 0; }
    100% { transform: perspective(1000px) rotateY(0) scale(1); opacity: 1; }
}

@-webkit-keyframes flipOutRight {
    0% { -webkit-transform: perspective(1000px) rotateY(0) scale(1); opacity: 1; }
    100% { -webkit-transform: perspective(1000px) rotateY(90deg) scale(0.95); opacity: 0; }
}
@keyframes flipOutRight {
    0% { transform: perspective(1000px) rotateY(0) scale(1); opacity: 1; }
    100% { transform: perspective(1000px) rotateY(90deg) scale(0.95); opacity: 0; }
}

@-webkit-keyframes flipInLeft {
    0% { -webkit-transform: perspective(1000px) rotateY(-90deg) scale(0.95); opacity: 0; }
    100% { -webkit-transform: perspective(1000px) rotateY(0) scale(1); opacity: 1; }
}
@keyframes flipInLeft {
    0% { transform: perspective(1000px) rotateY(-90deg) scale(0.95); opacity: 0; }
    100% { transform: perspective(1000px) rotateY(0) scale(1); opacity: 1; }
}

/* --- FIX: Bottone Preview Carta in stile Apple Glass --- */
#cardModal .modal-close-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px; /* Dimensione perfetta per il tocco su mobile */
    height: 44px;
    font-size: 1.75rem;
    font-weight: 300; /* Font leggero ed elegante */
    line-height: 1;
    color: rgba(255, 255, 255, 0.85); /* Bianco leggermente trasparente */
    background: rgba(255, 255, 255, 0.15); /* Effetto vetro scuro */
    backdrop-filter: blur(12px); /* Sfocatura Apple */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2); /* Bordino sottile luminoso */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Ombra morbida */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#cardModal .modal-close-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.25); /* Si illumina leggermente */
    transform: scale(1.05); /* Ingrandimento morbido, niente rotazioni strane */
    border-color: rgba(255, 255, 255, 0.4);
}

/* --- FIX iOS: EFFETTO TCG POCKET 3D --- */

/* 1. NIENTE prospettiva qui, la passiamo inline tramite JS per non far impazzire Safari */
#cardModal {
    /* perspective: 1500px; rimosso! */
}

/* 2. Regole con prefissi WebKit per la scheda video dell'iPhone */
#cardModal .modal-card-container {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    cursor: grab;
    transition: transform 0.1s ease-out;
    position: relative;
    
    /* Hardware acceleration hack vitale per iOS */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* La prospettiva è messa direttamente nel transform! */
    transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale(0.95);
}

#cardModal .modal-card-container:active {
    cursor: grabbing;
}

/* Lo SVG di fallback non dipende dalle dimensioni naturali dell'immagine: ha
   la stessa superficie 5:7 e quindi riceve tilt, glare e gesture della carta.
   Lo scheletro di caricamento usa la stessa superficie: il modale si apre
   subito con la forma della carta anche se la bitmap non e' ancora arrivata. */
#cardModal .modal-card-container.is-image-fallback,
#cardModal .modal-card-container.is-image-loading {
    width: min(400px, 86vw);
    aspect-ratio: 5 / 7;
    max-height: 85vh;
}

#cardModal .modal-card-container.is-image-fallback #modalCardImage,
#cardModal .modal-card-container.is-image-loading #modalCardImage {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#cardModal .modal-card-container.is-image-loading #modalCardImage {
    border-radius: 16px;
}

/* 3. Forziamo anche l'immagine a non deformarsi */
#modalCardImage {
    -webkit-touch-callout: none; /* Disabilita il menu "Salva immagine" su iOS */
    -webkit-user-select: none;   /* Impedisce la selezione dell'elemento */
    user-select: none;           /* Impedisce la selezione (standard) */
    -webkit-user-drag: none;     /* Disabilita il trascinamento dell'immagine fantasma (PC/Mac/Mobile) */
    
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Il riflesso (invariato) */
#cardModal .modal-card-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 24px;
    background: radial-gradient(
        circle at var(--glare-x, 50%) var(--glare-y, 50%), 
        rgba(255, 255, 255, 0.5) 0%, 
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
    mix-blend-mode: overlay; 
}

#cardModal .modal-card-container.is-interacting::after {
    opacity: 1;
}

.card-release-anim {
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Fix apertura modale con prospettiva inclusa */
#cardModal.active .modal-card-container {
    transform: perspective(1200px) rotateX(0deg) rotateY(0deg) scale(1);
}

/* ===== COLLECTION PORTFOLIO HERO ===== */
.portfolio-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(1.25rem,3vw,2.25rem);border:1px solid rgba(255,255,255,.26);border-radius:1.75rem;background:radial-gradient(circle at 11% -8%,rgba(255,255,255,.22),transparent 28%),radial-gradient(circle at 89% 9%,rgba(254,202,202,.22),transparent 25%),linear-gradient(128deg,#33080b 0%,#991b1b 42%,#ef4444 100%);box-shadow:0 20px 48px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.24)}
.portfolio-hero::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.24;background-image:radial-gradient(rgba(255,255,255,.55) .7px,transparent .7px);background-size:18px 18px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%)}
.portfolio-hero-content{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem}.portfolio-hero-copy{max-width:47rem}
.portfolio-hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.38rem .7rem;color:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.15);border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);font-size:.65rem;font-weight:800;line-height:1;letter-spacing:.13em;text-transform:uppercase;backdrop-filter:blur(12px)}
.portfolio-hero-status-dot{width:.42rem;height:.42rem;border-radius:999px;background:#fff;box-shadow:0 0 0 .22rem rgba(255,255,255,.16),0 0 .75rem rgba(255,255,255,.95)}
.portfolio-hero-title{margin:.85rem 0 .35rem;color:#fff;font-family:Outfit,Inter,sans-serif;font-size:clamp(2.05rem,4.8vw,4rem);font-weight:900;letter-spacing:-.065em;line-height:.96}.portfolio-hero-title span{color:transparent;background:linear-gradient(112deg,#fff,#fff5f5 55%,#fecaca 100%);background-clip:text;-webkit-background-clip:text}
.portfolio-hero-subtitle{max-width:36rem;margin:0;color:rgba(226,232,240,.84);font-size:clamp(.86rem,1.55vw,1rem);font-weight:500;line-height:1.55}
.portfolio-hero-metrics{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem}.portfolio-hero-metric{display:flex;align-items:baseline;gap:.35rem;padding:.52rem .68rem;color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.2);border-radius:.8rem;background:rgba(0,0,0,.19);font-size:.67rem;font-weight:700;backdrop-filter:blur(10px)}.portfolio-hero-metric strong{color:#fff;font-size:.88rem;font-weight:900}.portfolio-hero-metric-value{color:rgba(255,255,255,.8)}.portfolio-hero-metric-value strong{color:#fff}
.portfolio-hero-actions{position:relative;z-index:3;padding:.42rem;border:1px solid rgba(255,255,255,.12);border-radius:1rem;background:rgba(20,8,9,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.09);backdrop-filter:blur(16px)}.portfolio-hero-actions #darkModeToggle,.portfolio-hero-actions #visibilityToggle:not(.bg-indigo-600),.portfolio-hero-actions #financeToggle:not(.bg-gray-900){color:#fff1f2;border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.09)}.portfolio-hero-actions #darkModeToggle:hover,.portfolio-hero-actions #visibilityToggle:not(.bg-indigo-600):hover,.portfolio-hero-actions #financeToggle:not(.bg-gray-900):hover{background:rgba(255,255,255,.18)}.portfolio-hero-actions>div.w-px{background:rgba(255,255,255,.18)}
.portfolio-hero-orbit{position:absolute;z-index:-1;border:1px solid rgba(255,255,255,.18);border-radius:999px;transform:rotate(-22deg);pointer-events:none}.portfolio-hero-orbit-one{width:27rem;height:27rem;right:-10rem;top:-15rem}.portfolio-hero-orbit-two{width:19rem;height:19rem;right:-3rem;top:-10rem;border-color:rgba(255,255,255,.38)}.portfolio-hero-glow{position:absolute;z-index:-1;right:4rem;top:40%;width:8rem;height:8rem;border-radius:50%;background:#fff;opacity:.18;filter:blur(48px);pointer-events:none}
@media (max-width:767px){.portfolio-hero{border-radius:1.35rem}.portfolio-hero-content{align-items:stretch;flex-direction:column;gap:1.15rem}.portfolio-hero-actions{justify-content:flex-start;overflow-x:auto}.portfolio-hero-orbit-one{right:-13rem;top:-16rem}.portfolio-hero-metric-value{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.portfolio-hero,.portfolio-hero *{backdrop-filter:none}}

/* La ricerca mantiene il contesto visivo durante il refresh AJAX. */
.collection-refreshing {
    opacity: .58;
    pointer-events: none;
    transition: opacity .18s ease;
}

.collection-control-loading {
    cursor: progress !important;
}

/* ==========================================================================
   ACCESSI AI DOCUMENTI LEGALI
   I documenti legali sono parte del prodotto, non una nota a piè di pagina:
   footer, menu e banner li presentano con lo stesso linguaggio visivo del sito.
   ========================================================================== */

.pb-legal-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
}

.pb-legal-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: #ffffff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #475569;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pb-legal-pill svg {
    width: 15px;
    height: 15px;
    color: #dc2626;
    flex: 0 0 auto;
}
.pb-legal-pill:hover {
    color: #dc2626;
    border-color: rgba(239, 68, 68, .3);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -10px rgba(15, 23, 42, .3);
}
.pb-legal-pill:focus-visible {
    outline: 3px solid rgba(239, 68, 68, .5);
    outline-offset: 2px;
}

/* Riga compatta dentro il menu "Altro" della navbar. */
.glass-nav-more-legal {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding: 10px 8px 4px;
    border-top: 1px solid rgba(15, 23, 42, .07);
}
.glass-nav-more-legal a {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    border-radius: 10px;
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #64748b;
    background: rgba(15, 23, 42, .035);
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.glass-nav-more-legal a svg { width: 14px; height: 14px; flex: 0 0 auto; }
.glass-nav-more-legal a:hover {
    background: rgba(239, 68, 68, .09);
    color: #dc2626;
}

/* Versione a tutta larghezza per il menu mobile. */
.pb-legal-mobile {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 4px 0 2px;
}
.pb-legal-mobile a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 11px 6px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .6);
    font-size: .7rem;
    font-weight: 800;
    color: #64748b;
    text-decoration: none;
    text-align: center;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pb-legal-mobile a svg { width: 17px; height: 17px; color: #dc2626; }
.pb-legal-mobile a:hover {
    background: rgba(239, 68, 68, .07);
    border-color: rgba(239, 68, 68, .25);
    color: #dc2626;
}