/* ==========================================================================
   Tema Fideuram Campus sopra Bootstrap 5.3.
   Colori dal logo: teal #009d95 e arancio #f36e22 non reggono testo bianco (3.4:1 e 3:1),
   quindi per bottoni e testo si usano le varianti scure (≥4.5:1); quelle piene restano decorative.
   ========================================================================== */

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../fonts/source-sans-3-latin-wght-normal-8PKsh_E.woff2") format('woff2');
}

:root {
    --brand-teal: #009d95;
    --brand-teal-dark: #007a73;
    --brand-teal-darker: #00625c;
    --brand-teal-soft: #e6f4f3;
    --brand-orange: #f36e22;
    --brand-orange-dark: #c4520f;
    --brand-orange-soft: #fdf0e8;
    --brand-gray: #adb5bd;
    --surface-page: #f5f7f7;
    --ink: #1c2b2a;
    --ink-muted: #56625f;
    --radius: .625rem;
    --shadow-sm: 0 1px 2px rgba(16, 40, 38, .06), 0 1px 3px rgba(16, 40, 38, .08);
    --shadow-md: 0 4px 12px rgba(16, 40, 38, .10);
    --ease: cubic-bezier(.2, .7, .3, 1);

    --bs-body-font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-color: var(--ink);
    --bs-body-color-rgb: 28, 43, 42;
    --bs-body-bg: #fff;
    --bs-secondary-color: var(--ink-muted);
    --bs-primary: var(--brand-teal-dark);
    --bs-primary-rgb: 0, 122, 115;
    --bs-primary-text-emphasis: var(--brand-teal-darker);
    --bs-primary-bg-subtle: var(--brand-teal-soft);
    --bs-primary-border-subtle: #a6d8d4;
    --bs-link-color: var(--brand-teal-dark);
    --bs-link-color-rgb: 0, 122, 115;
    --bs-link-hover-color: var(--brand-teal-darker);
    --bs-link-hover-color-rgb: 0, 98, 92;
    --bs-border-color: #dde3e2;
    --bs-border-radius: var(--radius);
    --bs-border-radius-lg: .875rem;
    --bs-focus-ring-color: rgba(0, 122, 115, .35);
    --bs-tertiary-bg: #ffffff;
}

/* Lo sfondo pagina è grigio chiaro solo sul body: input, card e tabelle restano bianchi via --bs-body-bg. */
body { -webkit-font-smoothing: antialiased; background-color: var(--surface-page); }
.text-muted, .text-body-secondary { color: var(--ink-muted) !important; }
h1, .h1, h2, .h2, h3, .h3 { font-weight: 700; letter-spacing: -.01em; }
h1, .h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem); }
a { text-underline-offset: .15em; }

/* Focus sempre visibile, con il colore del brand. */
:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
    outline: 0;
}

/* --- Bottoni ------------------------------------------------------------- */
.btn { --bs-btn-font-weight: 600; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease); }
.btn-primary {
    --bs-btn-bg: var(--brand-teal-dark);
    --bs-btn-border-color: var(--brand-teal-dark);
    --bs-btn-hover-bg: var(--brand-teal-darker);
    --bs-btn-hover-border-color: var(--brand-teal-darker);
    --bs-btn-active-bg: #004f4a;
    --bs-btn-active-border-color: #004f4a;
    --bs-btn-disabled-bg: #8fa9a6;
    --bs-btn-disabled-border-color: #8fa9a6;
    --bs-btn-focus-shadow-rgb: 0, 122, 115;
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-teal-dark);
    --bs-btn-border-color: var(--brand-teal-dark);
    --bs-btn-hover-bg: var(--brand-teal-dark);
    --bs-btn-hover-border-color: var(--brand-teal-dark);
    --bs-btn-active-bg: var(--brand-teal-darker);
    --bs-btn-active-border-color: var(--brand-teal-darker);
    --bs-btn-focus-shadow-rgb: 0, 122, 115;
}
.btn-lg { --bs-btn-padding-y: .75rem; --bs-btn-padding-x: 1.5rem; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* --- Form ---------------------------------------------------------------- */
.form-label, legend.form-label { font-weight: 600; }
.form-control, .form-select { border-color: #c9d2d0; min-height: 2.75rem; }
.form-check-input { border-color: #8a9794; }
.form-check-input:checked { background-color: var(--brand-teal-dark); border-color: var(--brand-teal-dark); }
.form-text { color: var(--ink-muted); }
.required-mark { color: var(--brand-orange-dark); }

/* --- Superfici ----------------------------------------------------------- */
.surface { background: #fff; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); box-shadow: var(--shadow-sm); }
.card { --bs-card-border-color: var(--bs-border-color); --bs-card-border-radius: var(--bs-border-radius-lg); box-shadow: var(--shadow-sm); }
.alert { border-radius: var(--radius); }
.table { --bs-table-bg: transparent; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand-teal-dark); --bs-nav-link-color: var(--brand-teal-dark); --bs-nav-link-hover-color: var(--brand-teal-darker); }
.badge-brand { background: var(--brand-orange-soft); color: var(--brand-orange-dark); font-weight: 600; }

/* --- Header -------------------------------------------------------------- */
/* Filetto tricolore: richiama i tre archi della "C" del logo. */
.brand-stripe { height: 4px; background: linear-gradient(90deg, var(--brand-gray) 0 33.3%, var(--brand-teal) 33.3% 66.6%, var(--brand-orange) 66.6%); }
.site-header { background: #fff; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 1030; }
.site-header .navbar { --bs-navbar-padding-y: .625rem; }
.site-logo { display: block; height: 40px; width: auto; }
@media (max-width: 575.98px) { .site-logo { height: 32px; } }
.site-header .nav-link { font-weight: 600; color: var(--ink); min-height: 44px; display: flex; align-items: center; }
.site-header .nav-link:hover { color: var(--brand-teal-dark); }
.site-header .navbar-text { font-size: .9375rem; color: var(--ink-muted); }
.cart-link { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .375rem .75rem; border-radius: 999px; font-weight: 600; color: var(--ink); text-decoration: none; }
.cart-link:hover { background: var(--brand-teal-soft); color: var(--brand-teal-darker); }
.cart-count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .375rem; border-radius: 999px; background: var(--brand-orange-dark); color: #fff; font-size: .8125rem; font-weight: 700; line-height: 1; }
.cart-count.is-empty { background: #e4e9e8; color: var(--ink-muted); }

/* --- Hero home ----------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); box-shadow: var(--shadow-sm); }
.hero::after { content: ''; position: absolute; right: -90px; top: 50%; width: 280px; height: 280px; transform: translateY(-50%); border-radius: 50%; border: 22px solid var(--brand-teal); box-shadow: 0 0 0 22px var(--brand-gray), inset 0 0 0 22px var(--brand-orange); opacity: .14; pointer-events: none; }
@media (max-width: 767.98px) { .hero::after { display: none; } .checkout-steps { font-size: .8125rem; } }
.hero .eyebrow { color: var(--brand-orange-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; }
.hero p.lead { max-width: 46rem; color: var(--ink-muted); font-size: 1.125rem; }
.facts { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; margin: 0; list-style: none; }
.facts li { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9375rem; }
.facts .icon { color: var(--brand-teal-dark); }
.category-nav .btn { border-radius: 999px; }

/* --- Catalogo ------------------------------------------------------------ */
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 1rem; scroll-margin-top: 6rem; }
.section-title h2 { margin: 0; font-size: 1.5rem; }
.product-card { display: flex; flex-direction: column; color: inherit; border-radius: var(--bs-border-radius-lg); overflow: hidden; transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.product-card:hover { box-shadow: var(--shadow-md); border-color: #b9cfcc; transform: translateY(-2px); }
.product-card .card-media { aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid var(--bs-border-color); display: grid; place-items: center; padding: .75rem; }
/* contain: le copertine dei biglietti sono disegni tecnici, il ritaglio li rende illeggibili. */
.product-card img { width: 100%; height: 100%; object-fit: contain; }
.product-card .card-title { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.product-card .price { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.product-card .price small { font-weight: 400; color: var(--ink-muted); font-size: .875rem; }
.product-card .card-cta { color: var(--brand-teal-dark); font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; }
.product-card:hover .card-cta { text-decoration: underline; }

/* --- Pagina prodotto ----------------------------------------------------- */
.breadcrumb { --bs-breadcrumb-divider-color: var(--ink-muted); font-size: .9375rem; }
.product-gallery { position: sticky; top: 6rem; }
.product-main-image { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); padding: 1rem; }
.product-price { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.product-price small { font-size: 1rem; font-weight: 400; color: var(--ink-muted); }
.product-meta { font-size: .9375rem; color: var(--ink-muted); }
.step-label { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--brand-teal-soft); color: var(--brand-teal-darker); font-weight: 700; font-size: .875rem; margin-right: .5rem; }
.purchase-box { padding: 1.25rem; }
@media (min-width: 768px) { .purchase-box { padding: 1.5rem; } }

/* La descrizione è HTML importato dal vecchio shop (immagini con width fissa, tabelle): non deve allargare la pagina. */
.product-description { overflow-wrap: anywhere; }
.product-description img { max-width: 100%; height: auto !important; }
.product-description table { display: block; max-width: 100%; overflow-x: auto; }

/* Selettore varianti: tasselli per valore d'opzione, con miniatura se l'opzione ha immagini. */
.option-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-width: 4.5rem; min-height: 44px; max-width: 10rem; white-space: normal;
    --bs-btn-color: var(--ink); --bs-btn-bg: #fff; --bs-btn-border-color: #c9d2d0; --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--brand-teal-soft); --bs-btn-hover-border-color: var(--brand-teal);
    --bs-btn-active-color: var(--brand-teal-darker); --bs-btn-active-bg: var(--brand-teal-soft); --bs-btn-active-border-color: var(--brand-teal-dark); --bs-btn-font-weight: 600; }
/* Stato selezionato: bordo spesso + spunta, non solo colore. */
.btn-check:checked + .option-tile { color: var(--brand-teal-darker); background: var(--brand-teal-soft); border-color: var(--brand-teal-dark); box-shadow: inset 0 0 0 1px var(--brand-teal-dark); position: relative; }
.btn-check:checked + .option-tile::after { content: ''; position: absolute; top: -.5rem; right: -.5rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--brand-teal-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 80% no-repeat; }
.option-thumb { display: block; width: 60px; height: 60px; object-fit: contain; }
.btn-check:focus-visible + .option-tile { outline: 3px solid var(--brand-teal); outline-offset: 2px; }
.option-tile.option-unavailable { opacity: .55; border-style: dashed; }
.option-note { font-size: .75rem; line-height: 1; }
.product-thumb { border: 1px solid var(--bs-border-color); background: #fff; border-radius: .5rem; overflow: hidden; }
.product-thumb.active { border-color: var(--brand-teal-dark); box-shadow: 0 0 0 1px var(--brand-teal-dark); }
.product-thumb:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 2px; }
.product-thumb img { display: block; width: 64px; height: 64px; object-fit: contain; }

.qty-input { max-width: 8rem; }
.buy-bar .btn { white-space: nowrap; }
@media (max-width: 399.98px) { .buy-bar .btn-lg { --bs-btn-font-size: 1rem; --bs-btn-padding-x: .875rem; } .qty-input { max-width: 5rem; } }

/* Barra d'acquisto: su mobile resta in fondo allo schermo mentre si compilano i campi. */
@media (max-width: 767.98px) {
    .buy-bar { position: sticky; bottom: 0; z-index: 10; margin: 0 -1.25rem -1.25rem; padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--bs-border-color); box-shadow: 0 -4px 12px rgba(16, 40, 38, .08); border-radius: 0 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg); }
}

/* --- Carrello / checkout ------------------------------------------------- */
.checkout-steps { display: flex; gap: .5rem; padding: 0; margin: 0 0 1.5rem; list-style: none; counter-reset: step; font-size: .9375rem; }
.checkout-steps li { flex: 1; display: flex; align-items: center; gap: .5rem; padding-top: .5rem; border-top: 3px solid #dfe5e4; color: var(--ink-muted); font-weight: 600; counter-increment: step; }
.checkout-steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #e4e9e8; font-size: .8125rem; flex: none; }
.checkout-steps li.is-done { border-color: var(--brand-teal); color: var(--ink); }
.checkout-steps li.is-done::before { background: var(--brand-teal-soft); color: var(--brand-teal-darker); }
.checkout-steps li.is-current { border-color: var(--brand-teal-dark); color: var(--brand-teal-darker); }
.checkout-steps li.is-current::before { background: var(--brand-teal-dark); color: #fff; }
.summary-sticky { position: sticky; top: 6rem; }
.order-lines td, .order-lines th { padding-top: .875rem; padding-bottom: .875rem; }
.order-lines thead th { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); font-weight: 700; }
.order-lines tfoot td { border-bottom: 0; padding-top: .375rem; padding-bottom: .375rem; }
.order-lines tfoot tr.grand-total td { border-top: 2px solid var(--ink); padding-top: .75rem; font-size: 1.1875rem; }
.line-qty-form .form-control { width: 5rem; }

/* Sotto md la tabella righe diventa una pila di schede: niente scroll orizzontale. */
@media (max-width: 767.98px) {
    .order-lines thead { display: none; }
    .order-lines, .order-lines tbody, .order-lines tr, .order-lines td { display: block; width: 100%; }
    .order-lines tbody tr { padding: .75rem 0; border-bottom: 1px solid var(--bs-border-color); }
    .order-lines tbody td { border: 0; padding: .25rem 0; text-align: left !important; }
    .order-lines tbody td[data-label]:not([data-label=''])::before { content: attr(data-label) ': '; color: var(--ink-muted); font-size: .875rem; }
    .order-lines tfoot { display: block; }
    .order-lines tfoot tr { display: flex; justify-content: space-between; }
    .order-lines tfoot td { display: block; width: auto; }
    .order-lines tfoot td[colspan] { text-align: left !important; }
}
.compact-lines .order-lines thead { display: none; }

/* Le fieldset annidate del form checkout (billing/shipping) non devono raddoppiare i titoli. */
.checkout-form fieldset > legend, .checkout-form .form-section > h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
/* Metodi di pagamento come tasselli cliccabili per intero. */
.payment-options { display: grid; gap: .75rem; }
.payment-options .form-check { position: relative; margin: 0; padding: .875rem 1rem .875rem 2.75rem; border: 1px solid #c9d2d0; border-radius: var(--radius); min-height: 44px; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
.payment-options .form-check:hover { border-color: var(--brand-teal); }
.payment-options .form-check-input { margin-left: -1.75rem; }
.payment-options .form-check-label { font-weight: 600; cursor: pointer; }
.payment-options .form-check-label::after { content: ''; position: absolute; inset: 0; }
.payment-options .form-check:has(:checked) { border-color: var(--brand-teal-dark); background: var(--brand-teal-soft); box-shadow: inset 0 0 0 1px var(--brand-teal-dark); }
.checkout-form .form-section { padding: 1.25rem; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .checkout-form .form-section { padding: 1.5rem; } }

/* --- Auth ---------------------------------------------------------------- */
.auth-card { max-width: 30rem; margin: 1rem auto 0; padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: #fff; border-top: 1px solid var(--bs-border-color); color: var(--ink-muted); font-size: .9375rem; }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--brand-teal-dark); }
.site-footer .footer-links li + li { margin-top: .375rem; }

/* L'attributo hidden deve vincere anche sulle utility display di Bootstrap (es. d-flex), usate dal JS del selettore. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    .product-card:hover { transform: none; }
}