/* ── Deltabooking — usa direttamente le variabili di color.css (--theme,
   --theme-light, --theme-2, --theme-2-light, --success, --header, --text,
   --white, --black, --bg, --border, --border-2) — nessun alias locale, un'unica
   fonte di colore per tutto il sito, compreso questo modulo. ─────────────── */
.btn{transition:none!important}
/* ── Override brand Bootstrap ────────────────────────────────────────────── */
.bg-primary { background-color: var(--theme) !important; }

/* ── Componenti di pagina (usati fuori dai modali) ────────────────────────── */
.db-gallery-img {
    max-height: 500px;
    object-fit: cover;
}

.db-icon-sm {
    font-size: 1rem;
    vertical-align: middle;
}

.db-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.db-icon-circle .material-symbols-outlined { font-size: 20px; }

/* Fascia rapida sopra la descrizione (_attraction-detail.php): durata/città/voucher a
   colpo d'occhio, prima del testo lungo — box con etichetta sopra il valore, più
   evidente della semplice riga di testo con icona. */
/* Griglia fissa a 2 colonne (non flex-wrap): con flex-wrap il numero di voci per riga
   dipendeva dallo spazio disponibile e dalla lunghezza di ciascun testo, disordinato
   restringendo il viewport. 2 colonne fisse a qualunque larghezza = struttura sempre
   prevedibile. Solo divisore orizzontale tra una riga e la successiva — l'ultima riga
   (classe --last-row, calcolata lato server in _attraction-detail.php: nth-child da solo
   non distingue in modo affidabile l'ultima riga quando il totale voci è dispari) non ce
   l'ha. Nessun divisore verticale tra le due colonne. */
.attraction-detail__quick-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 2.5rem;
    margin-bottom: 2rem;
}
.attraction-detail__quick-fact {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border);
}
.attraction-detail__quick-fact--last-row {
    border-bottom: none;
}
.attraction-detail__quick-fact-icon {
    flex-shrink: 0;
    font-size: 1.75rem;
    color: var(--black);
}
.attraction-detail__quick-fact-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}
.attraction-detail__quick-fact-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--header);
}

.experience-info {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.experience-info > div {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.experience-info .text-wrapper span:first-child {
    display: block;
    font-size: 0.8rem;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.1rem;
}

.price-label {
    font-size: 1.5rem;
    font-weight: 700;
}

.price-label span {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text);
}

.text-toggle .btn-read-more {
    display: block;
    background: none;
    border: none;
    color: var(--theme);
    padding: 0;
    margin-top: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
}

/* Collassamento descrizione lunga: la classe --collapsible la aggiunge solo il JS
   (vedi public/js/main.js) — senza JS il contenuto resta sempre per intero visibile,
   il bottone (comunque presente nel markup) semplicemente non fa nulla al click. */
.text-toggle__content {
    transition: max-height .3s ease;
}
.text-toggle--collapsible:not(.text-toggle--expanded) .text-toggle__content {
    position: relative;
    max-height: 130px;
    overflow: hidden;
}
.text-toggle--collapsible:not(.text-toggle--expanded) .text-toggle__content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, var(--white));
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .text-toggle__content {
        transition: none;
    }
}

.duration-span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    background-color: var(--bg);
}

/* ── Modali prenotazione ──────────────────────────────────────────────────── */

/* Reset line-height al default Bootstrap (1.5): _attraction-booking-modal.php è incluso
   sia da _attraction-detail.php (layout completo del sito, main.css mette "body {
   line-height: 28px }") sia da deltabooking-booking-frame.php (pagina iframe standalone,
   NON carica main.css, resta al default di Bootstrap) — stesso identico modale, ma
   interlinea diversa a seconda di dove viene aperto, perché eredita quella del body
   ospitante (Bootstrap non sposta il modale fuori dal <body>). Fissato qui così il modale
   ha sempre lo stesso aspetto indipendentemente dalla pagina che lo include. */
:is(.db-calendar-modal, .db-carnet-calendar-modal) {
    line-height: 1.5;
}

/* Spinner di caricamento (calendario/eventi) nero invece del text-secondary di Bootstrap
   (grigio) — .spinner-border usa "border: ... solid currentcolor", basta il color qui. */
.db-spinner {
    color: var(--black);
}

/* Pulsanti Bootstrap override dentro i modali */
:is(.db-calendar-modal, .db-carnet-calendar-modal) .btn-primary {
    background: var(--theme);
    border-color: var(--theme);
    color: var(--white);
}
:is(.db-calendar-modal, .db-carnet-calendar-modal) .btn-info {
    background: var(--theme-light);
    border-color: var(--theme-light);
    color: var(--theme);
}
:is(.db-calendar-modal, .db-carnet-calendar-modal) .btn-outline-primary {
    border-color: var(--theme);
    color: var(--theme);
}
:is(.db-calendar-modal, .db-carnet-calendar-modal) .btn-outline-info {
    border-color: var(--theme-light);
    color: var(--theme);
}
:is(.db-calendar-modal, .db-carnet-calendar-modal) .btn-success {
    background: var(--theme-2);
    border-color: var(--theme-2);
    color: var(--white);
}
:is(.db-calendar-modal, .db-carnet-calendar-modal) .btn-success[data-db-action="carnet-proceed"]{    background: var(--black);
    border-color: var(--black);}
:is(.db-calendar-modal, .db-carnet-calendar-modal) .btn-success:hover {
    background: var(--black);
    border-color: var(--black);
}
:is(.db-calendar-modal, .db-carnet-calendar-modal) .btn {
    margin-bottom:10px
}
/* Bottone "indietro" nell'header del modal */
.db-modal-back {
    border: none;
    background: transparent;
    padding: 0;
    color: var(--header);
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 0.25rem;
    flex-shrink: 0;
}

.db-modal-back .material-symbols-outlined { font-size: 1.75rem; }

.db-modal-back:hover { color: var(--theme); }

/* Card riepilogo attrazione */
:is(.db-calendar-modal, .db-carnet-calendar-modal) .db-attraction-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
}
:is(.db-calendar-modal, .db-carnet-calendar-modal) .db-attraction-card {
    border: 1.5px solid var(--border);
    border-radius: 0.625rem;
    padding: 0.625rem 0.75rem;
}

:is(.db-carnet-accordion) .db-carnet-acc-item__header .db-attraction-card { border-radius: 0; padding:0; border:0}

:is(.db-calendar-modal, .db-carnet-calendar-modal) .db-attraction-card__img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

:is(.db-calendar-modal, .db-carnet-calendar-modal) .db-attraction-card__body {
    flex: 1;
    min-width: 0;
}

:is(.db-calendar-modal, .db-carnet-calendar-modal) .db-attraction-card__town {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--header);
    font-size: 0.7rem;
    font-weight: normal;
    margin-bottom: 0.25rem;
}

:is(.db-calendar-modal, .db-carnet-calendar-modal) .db-attraction-card__town .material-symbols-outlined {
    font-size: 0.9rem;
}

:is(.db-calendar-modal, .db-carnet-calendar-modal) .db-attraction-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--header);
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.db-attraction-card__town-sep { margin: 0 0.1rem; }

/* Variante compatta (dentro l'accordion carnet) */
.db-attraction-card--compact {
    background: transparent;
    padding: 0;
    gap: 0.5rem;
}

.db-attraction-card--compact .db-attraction-card__img {
    width: 70px;
    height: 70px;
}

.db-carnet-acc-item--included .db-attraction-card--compact .db-attraction-card__img {
    width: 40px;
    height: 40px;
}

/* Gruppo quantità biglietti */
:is(.db-calendar-modal, .db-carnet-calendar-modal) .qty-group {
    display: flex;
    align-items: center;
    justify-content: center;
}

:is(.db-calendar-modal, .db-carnet-calendar-modal) .qty-group .qty {
    width: 52px;
    text-align: center;
    border-radius: 0.375rem;
    background: transparent;
    border: 1px solid var(--border);
    color: inherit;
    -moz-appearance: textfield;
}

:is(.db-calendar-modal, .db-carnet-calendar-modal) .qty-group .qty::-webkit-inner-spin-button,
:is(.db-calendar-modal, .db-carnet-calendar-modal) .qty-group .qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

:is(.db-calendar-modal, .db-carnet-calendar-modal) .qty-group .qty-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--header);
    border: 0;
    background: none;
    font-size: 1.2rem;
    line-height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
}

:is(.db-calendar-modal, .db-carnet-calendar-modal) .qty-group .qty-btn:hover { background: none; }

:is(.db-calendar-modal, .db-carnet-calendar-modal) .qty-group .qty-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Blocco quantità del modale voucher (_voucher-buy-modal.php): card bordata attorno a
   nome+prezzo+stepper, stesso trattamento visivo di .db-attraction-card nel modale
   attrazione (bordo + angoli arrotondati, per separare l'header dal contenuto) — qui
   applicato all'intero blocco invece che a un chip immagine+nome, perché il voucher
   non ha immagine e il form quantità è l'unico contenuto. Dentro: riga nome+prezzo
   unitario allineata a sinistra (si legge meglio del testo centrato), stepper
   ingrandito sotto come solo elemento centrato — è l'unico controllo interattivo del
   modale (a differenza di _attraction-booking-modal.php non c'è una lista di
   biglietti), ha senso resti lui il focus visivo. Specificity delle regole
   qty-group/qty-btn qui sotto uguale a quella base (3 classi): vince perché
   dichiarata dopo, nello stesso file. */
.db-voucher-qty {
    margin-top: 1.5rem;
    padding: 1.25rem 1.25rem 1.5rem;
    border: 1.5px solid var(--border);
    border-radius: 0.625rem;
}
.db-voucher-qty__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.db-voucher-qty__name {
    font-size: 1.05rem;
    color: var(--header);
}
.db-voucher-qty__price {
    font-size: 0.85rem;
    color: var(--text);
    white-space: nowrap;
}
.db-voucher-qty .qty-group.db-voucher-qty__stepper {
    gap: 1.25rem;
}
.db-voucher-qty .qty-group .qty-btn {
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
}
.db-voucher-qty .qty-group .qty {
    width: 68px;
    font-size: 1.4rem;
    font-weight: 700;
}

/* Lista biglietti */
.db-ticket-list {
    border-top: 0px solid var(--border);
    padding-top: 0.25rem;
}

.db-carnet-calendar-modal .db-ticket-list {
    border-top: none;
    padding-top: 0;
}

.db-ticket-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
}
.db-ticket-row-wrap:not(:last-child) { border-bottom: 1px solid var(--border); }

.db-ticket-cond-btn {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    color: var(--theme);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.db-ticket-cond-btn:hover { color: var(--theme); }
.db-ticket-cond-btn .material-symbols-outlined { font-size: 1.1rem; }

.db-ticket-cond-text {
    font-size: 0.82rem;
    color: var(--header);
    background: var(--theme-light);
    border-radius: 0.375rem;
    padding: 0.45rem 0.65rem;
    margin-bottom: 0.4rem;
}
.db-ticket-row__name {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 1rem;
    font-weight: 500;
    flex: 1;
    min-width: 0;
}

.db-ticket-row__name span { font-size: 1.3rem; }

.db-ticket-row__price {
    font-size: 1rem;
    font-weight: 300;
    width: 5rem;
    text-align: right;
    flex-shrink: 0;
}

.db-ticket-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.db-ticket-total__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
}

.db-ticket-total__amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--header);
}

/* Feature select (attrazioni normali) */
.db-calendar-modal .select-label.input-group.flex-column > .input-group-text {
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0 !important;
    border-bottom: 0;
    width: 100%;
}

.db-calendar-modal .select-label.input-group.flex-column > .form-select {
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius) !important;
    width: 100% !important;
    flex: 1 0 100%;
    margin-left: 0 !important;
    margin-top: -1px;
}

/* Slot info — posti disponibili (step 3) */
.db-slot-info-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
}

.db-slot-info-wrap::before {
    content: '';
    flex: 1;
}

/* ── Wizard stepper ──────────────────────────────────────────────────────── */
.db-wz-stepper {
    display: flex;
    align-items: flex-start;
}

.db-wz-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.db-wz-step__circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--white);
    color: var(--border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
}

.db-wz-step__icon {
    display: none;
    font-size: 1.35rem;
}

.db-wz-step__label-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width:80px
}

.db-wz-step__label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--border-2);
    text-transform: uppercase;
    max-width: 60px;
    text-align: center;
    line-height: 1.2;
}

.db-wz-step.active .db-wz-step__circle {
    border: 3px solid var(--header);
    background: none;
    color: var(--header);
}

.db-wz-step.active .db-wz-step__label {
    color: var(--header);
    font-weight: 700;
}

.db-wz-step.completed .db-wz-step__circle {
    border-color: var(--header);
    background: var(--header);
    color: var(--white);
}

.db-wz-step.completed .db-wz-step__num { display: none; }
.db-wz-step.completed .db-wz-step__icon { display: block; }

.db-wz-step.completed .db-wz-step__label {
    color: var(--header);
    width: auto;
    max-width: none;
    font-weight: 600;
    text-decoration: underline;
}

.db-wz-step.completed:hover .db-wz-step__label { text-decoration: none; }
.db-wz-step.completed { cursor: pointer; }

.db-wz-step.completed:hover .db-wz-step__circle {
    background: var(--theme);
    border-color: var(--theme);
}

.db-wz-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 1rem;
}

.db-wz-line.completed { background: var(--header); }

/* ── Calendario inline (daterangepicker) ─────────────────────────────────── */
.db-inline-calendar {
    position: relative;
    min-height: 310px;
}

.db-inline-calendar .daterangepicker {
    position: static !important;
    display: flex !important;
    float: none;
    box-shadow: none;
    border-radius: 0.5rem;
    margin: 0 0 0;
    padding: 20px 20px 30px;
    top: auto !important;
    left: auto !important;
    min-width: 0;
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
}

.db-carnet-acc-item .db-inline-calendar .daterangepicker { border: 0; padding: 0; }

.db-inline-calendar .daterangepicker::before,
.db-inline-calendar .daterangepicker::after { display: none; }
.db-inline-calendar .daterangepicker td.available:hover, .daterangepicker th.available:hover{background:none!important;}
.db-inline-calendar .daterangepicker .calendar-table .next:hover span, .db-inline-calendar .daterangepicker .calendar-table .prev:hover span{border-color:var(--theme)!important}
.db-calendar-modal .daterangepicker .drp-calendar,
.db-carnet-accordion .daterangepicker .drp-calendar {
    max-width: none;
    width: 100%;
    padding: 0 !important;
}

.db-calendar-modal .daterangepicker .drp-calendar.left,
.db-calendar-modal .daterangepicker .drp-calendar.right,
.db-carnet-accordion .daterangepicker .drp-calendar.left,
.db-carnet-accordion .daterangepicker .drp-calendar.right {
    width: 100%;
    padding: 0;
}

.db-inline-calendar .daterangepicker .calendar-table { border: none; }

.db-inline-calendar .daterangepicker .calendar-table table {
    width: 100%;
    border-collapse: collapse;
}

.db-inline-calendar .daterangepicker td.db-dp-filler {
    visibility: hidden;
    pointer-events: none;
}

.db-inline-calendar .daterangepicker .calendar-table tbody tr:not(:has(td:not(.db-dp-filler))) {
    display: none;
}

.db-inline-calendar .daterangepicker .calendar-table tbody td { position: relative; }

.db-inline-calendar .daterangepicker .calendar-table tbody td {
    width: 14.2857%;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    box-sizing: border-box;
    height: 58px;
}

.db-inline-calendar .daterangepicker .calendar-table th,
.db-inline-calendar .daterangepicker .calendar-table td { border-radius: 0.375rem; }

.db-inline-calendar .daterangepicker td.db-dp-available:not(.active) {
    color: var(--header)!important;
    font-weight: 400;
    padding-bottom: 0;
}

.db-inline-calendar .daterangepicker td .db-dp-seats {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.1;
    color: var(--theme);
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 1;
    text-align: center;
    width: 100%;
    padding: 0 4px 6px;
    text-transform: uppercase;
    white-space: normal;
    pointer-events: none;
}

.db-inline-calendar .daterangepicker td.disabled,
.db-inline-calendar .daterangepicker option.disabled {
    color: rgba(0,0,0,.3) !important;
    text-decoration: none !important;
}

.db-inline-calendar .daterangepicker td.active,
.db-inline-calendar .daterangepicker td.active:hover,
.db-inline-calendar .daterangepicker td:hover,
.db-inline-calendar .daterangepicker td.db-dp-today:not(.active) { background: none !important; }

.db-inline-calendar:not(.db-dp-active-on) .daterangepicker td.active.db-dp-available {
    color: var(--header) !important;
    font-weight: 400;
}
.db-inline-calendar:not(.db-dp-active-on) .daterangepicker td.active.db-dp-today {
    color: var(--header) !important;
}
.db-inline-calendar .daterangepicker td.db-dp-today {
    font-weight:bold!important
}
.db-inline-calendar.db-dp-active-on .daterangepicker td.active,
.db-inline-calendar.db-dp-active-on .daterangepicker td.active .db-dp-seats { color: var(--white) !important; }

.db-inline-calendar .daterangepicker td:not(.off,.disabled):hover,
.db-inline-calendar .daterangepicker td.active:hover,
.db-inline-calendar .daterangepicker td:hover .db-dp-seats,
.db-inline-calendar .daterangepicker td.active:hover .db-dp-seats{ color: var(--header) !important; }

.db-inline-calendar .daterangepicker td::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 18px;
    z-index: -1;
}

.db-inline-calendar.db-dp-active-on .daterangepicker td.active::before { background: var(--theme) !important; }
.db-inline-calendar .daterangepicker td:not(.off,.disabled):hover::before { background: var(--theme-light) !important; }
.db-inline-calendar .daterangepicker td.db-dp-today:not(.active) { color: inherit; }
.db-inline-calendar .daterangepicker .calendar-table th:not(.month) { font-weight: normal; }

/* ── Badge prima disponibilità ────────────────────────────────────────────── */
.db-first-avail {
    display: none;
    align-items: center;
    justify-content: space-between;
    background: var(--success);
    color: var(--white);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.db-first-avail__date {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.db-first-avail__date .material-symbols-outlined { font-size: 1rem; }

/* ── Prossima disponibilità (overlay calendario) ──────────────────────────── */
.db-calendar-wrap { position: relative; }

.db-next-avail {
    position: absolute;
    top: 70px;
    left: 1px;
    z-index: 1;
    width: calc(100% - 2px);
    height: calc(100% - 71px);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

.db-next-avail__btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 1.5rem;
    background: var(--bg);
    border: 1px solid var(--theme);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--theme);
    margin: 0 auto;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.33);
    margin-bottom: 30px;
}

.db-next-avail__btn:hover {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

.db-next-avail__btn .material-symbols-outlined {
    font-size: 1.5rem;
    color: var(--theme);
}

.db-next-avail__btn:hover .material-symbols-outlined { color: var(--white); }

.db-next-avail__btn .material-symbols-outlined:last-child {
    margin-left: auto;
    color: var(--border-2);
}

/* ── Colonne giorno + slot orari (step 2) ─────────────────────────────────── */
.db-day-view {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.db-day-view__header {
    position: relative;
    height: 52px;
    padding: 0 0.4rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.db-day-view__header-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.db-day-view__dow {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
}

.db-day-view__date {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--header);
    text-transform: capitalize;
}

.db-day-view__nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    color: var(--header);
    line-height: 1;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.db-day-view__nav-btn:hover {
    color: var(--theme);
}
.db-day-view__nav-btn[data-dir="prev"] { left: 0.25rem; }
.db-day-view__nav-btn[data-dir="next"] { right: 0.25rem; }

.db-day-view__nav-btn:disabled {
    opacity:0;
    cursor: default;
}


.db-day-view__nav-btn .material-symbols-outlined { font-size: 1.6rem; }

.db-day-view__slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 1rem;
}

.db-day-view__slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.5rem 0.25rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    background: var(--theme-light);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--header);
    cursor: pointer;
}

.db-day-view__slot:hover {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

.db-day-view__slot--selected {
    background: var(--theme) !important;
    border-color: var(--theme) !important;
    color: var(--white) !important;
}

.db-day-view__slot-time { font-weight: 500; }

.db-day-view__slot-seats {
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
}

.db-day-view__slot--selected .db-day-view__slot-seats,
.db-day-view__slot:hover .db-day-view__slot-seats { color: rgba(255, 255, 255, 0.85); }
/* ── Modal footer ─────────────────────────────────────────────────────────── */
:is(.db-calendar-modal, .db-carnet-calendar-modal) .modal-footer {
    flex-direction: column;
    align-items: stretch;
    border-top: 0;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ── Carnet accordion ─────────────────────────────────────────────────────── */
.db-carnet-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.db-carnet-accordion--locked .db-carnet-acc-item:not(.db-carnet-acc-item--open) {
    pointer-events: none;
    opacity: 0.45;
}

.db-carnet-acc-item {
    border: 1.5px solid var(--border);
    border-radius: 0.625rem;
    overflow: hidden;
}

.db-carnet-acc-item--open { border-color: var(--theme); }

.db-carnet-acc-item__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    user-select: none;
}
.db-carnet-acc-item:not(.db-carnet-acc-item--included, .db-carnet-acc-item--open) .db-carnet-acc-item__header{background: var(--theme-light);}
.db-carnet-acc-item--included .db-carnet-acc-item__header { cursor: default; }
.db-carnet-acc-item--included .db-carnet-acc-item__header:hover { background: none; }

.db-carnet-acc-item__title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.db-carnet-acc-item__body {
    padding: 0 0.75rem 0.875rem;
    border-top: 1px solid var(--theme-light);
}

.db-carnet-sub-header {
    display: flex;
    align-items: center;
    padding-top: 0.625rem;
    gap: 0.25rem;
}

.db-carnet-ready-badge { margin-top: 0.25rem; }
.db-carnet-slot-summary { font-size: 0.8rem; line-height: 1.4; color: var(--theme); }
.db-carnet-slot-summary__sub { color: var(--bs-secondary-color); }
/* Hover sui pulsanti dell'accordion carnet */
.db-carnet-acc-btn.btn-primary:hover,
.db-carnet-acc-btn.btn-primary:focus,
.db-carnet-acc-btn.btn-primary:active,
.db-carnet-acc-item__header:hover .btn-primary,
.db-carnet-acc-btn.btn-outline-primary:hover,
.db-carnet-acc-btn.btn-outline-primary:focus,
.db-carnet-acc-btn.btn-outline-primary:active,
.db-carnet-acc-item__header:hover .btn-outline-primary {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

.db-carnet-acc-btn.btn-info:hover,
.db-carnet-acc-btn.btn-info:focus,
.db-carnet-acc-btn.btn-info:active,
.db-carnet-acc-item__header:hover .btn-info,
.db-carnet-acc-btn.btn-outline-info:hover,
.db-carnet-acc-btn.btn-outline-info:focus,
.db-carnet-acc-btn.btn-outline-info:active,
.db-carnet-acc-item__header:hover .btn-outline-info {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}


.db-carnet-acc-item__header:hover .btn-secondary,
.db-carnet-acc-item__header:hover .btn-outline-secondary {
    color: var(--white);
    background-color: var(--theme-2);
    border-color: var(--theme-2);
}

/* ── Carnet slot summary (step 2) ─────────────────────────────────────────── */
.db-carnet-slots-summary {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--theme-light);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-top: 0; /* nel carrello è un <ul>: azzera solo il margine di default sopra
                       (il margine sotto resta alla classe utility mb-3 nel markup) */
}

.db-carnet-slot-row {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
}
.db-carnet-slot-row:not(:last-child) {border-bottom:1px solid var(--white);padding-bottom:0.55rem}

.db-carnet-slot-row__main {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.db-carnet-slot-row__name {
    font-weight: 600;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--header);
}
.db-carnet-slot-row__option {
    font-size: 0.9em;
    font-weight: 400;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.db-carnet-slot-row__date {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--header);
    white-space: nowrap;
    flex-shrink: 0;
}
.db-carnet-slot-row__date-icon {
    font-size: 14px;
}

/* Nel carrello (deltabooking-cart.php) stessa struttura del modale ma solo bordo, niente sfondo */
.db-cart-item .db-carnet-slots-summary {
    background: transparent;
    border: 1px solid var(--border);
}
.db-cart-item .db-carnet-slot-row:not(:last-child) {
    border-bottom-color: var(--border);
}
.db-cart-item .db-carnet-slot-row__name,
.db-cart-item .db-carnet-slot-row__date {
    color: var(--black);
}

.db-carnet-slot-row .badge {
    flex-shrink: 0;
    font-weight: 500;
}
.alert-primary{background:var(--theme-light);color:var(--header);border-color:var(--theme);line-height:1.2;font-size:0.85rem}
.db-carnet-acc-item.db-carnet-acc-item--ready .db-carnet-acc-item__header{background:transparent}
.modal-backdrop{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:1!important;background-color:rgba(0,0,0,.8)}

/* ── Dettaglio attrazione/carnet (_attraction-detail.php, _carnet-detail.php) ────────
   Bozza iniziale: da rifinire con l'utente in un secondo passaggio. ──────────────── */
/* Container più stretto su TUTTA questa pagina (non solo sul blocco testo, tentativo
   precedente: la larghezza cambiava a metà pagina, sembrava scucito) — header/titolo,
   galleria, contenuto e video usano tutti lo stesso .container più stretto, così anche
   un titolo lungo non si allarga a dismisura. Deliberatamente diverso dalle pagine di
   listato (categoria/macro/ricerca), che restano larghe perché mostrano griglie di card
   e ne beneficiano — stesso pattern di Booking/Airbnb (dettaglio più stretto per la
   lettura, listati più larghi per le griglie). .attraction-detail-header è passata come
   sectionClasses a _page-header.php solo da questa pagina, non tocca le altre che la
   riusano. Solo da 1200px in su (complementare a "max-width: 1199px", il breakpoint xl
   già usato in tutto main.css): senza media query il max-width:1200px, più specifico
   della regola responsive di Bootstrap dentro le sue media query, vinceva SEMPRE —
   anche sotto xl, dove tolto vincolo il container si allargava oltre i 720/960px
   standard e disallineava questa pagina rispetto a tutte le altre. */
@media (min-width: 1200px) {
    .attraction-detail-header .container,
    .attraction-gallery .container,
    .attraction-detail .container,
    .attraction-detail__videos .container {
        max-width: 1200px;
    }
}
.attraction-detail__block-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: var(--header);
}
@media (max-width: 575px) {
    .attraction-detail__block-title {
        font-size: 1.15rem;
    }
}

/* Tagline dell'esperienza (atom "subtitle"): spostata qui dall'intestazione di pagina per
   accorciarla (vedi .attraction-detail-header) — resta comunque la prima cosa che si legge
   della descrizione, solo più in basso nel flusso della pagina. */
.attraction-detail__subtitle {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--header);
    margin-bottom: .5rem;
}

.experience-info__icon {
    flex-shrink: 0;
    font-size: 1.4rem;
    color: var(--theme);
}

/* Lista semplice di allegati (era una fila di bottoni .theme-btn): un link per riga con
   icona documento, niente sfondo/bordo da pulsante. */
.attraction-detail__files-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.attraction-detail__files-list li:not(:last-child) {
    margin-bottom: 0.75rem;
}
.attraction-detail__file-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--header);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}
.attraction-detail__file-link .material-symbols-outlined {
    font-size: 1.2rem;
    flex-shrink: 0;
    color: var(--black);
    transition: color 0.2s ease;
}
.attraction-detail__file-link:hover,
.attraction-detail__file-link:hover .material-symbols-outlined {
    color: var(--theme);
}

.attraction-detail__info-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
/* Senza questo, il div di testo (titolo + indirizzo/testo) si restringe al proprio
   contenuto invece di occupare lo spazio rimanente della riga dopo l'icona — flex-basis
   di default è "auto", niente crescita senza flex-grow esplicito. */
.attraction-detail__info-row > div {
    flex: 1 1 0%;
    min-width: 0;
}

/* Stessa resa delle icone della fascia rapida in alto (.attraction-detail__quick-fact-icon):
   material symbol nero, nessun cerchio di sfondo. */
.attraction-detail__info-icon {
    flex-shrink: 0;
    font-size: 1.75rem;
    color: var(--black);
}

.attraction-detail__info-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--header);
}

.attraction-detail__map {
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Contenuto del fumetto (InfoWindow) dei marker di printGoogleMap() — vedi
   googleMapInfoWindowCard() in helpers/helpers.php. Google inserisce l'InfoWindow nel DOM
   della pagina, ma senza il nesting Bootstrap (.ratio/.card) del resto del sito: stile
   autonomo, non riusa altre classi del progetto.

   Il padding/header che Google riserva di default (solo per la propria X nativa) viene
   azzerato per far arrivare la foto a piena larghezza fino ai bordi del fumetto; la X
   nativa (.gm-ui-hover-effect) è nascosta e sostituita dal bottone custom in overlay
   sulla foto (.gmap-infowindow-close), agganciato alla chiusura reale in printGoogleMap(). */
.gm-style .gm-style-iw-c {
    padding: 0;
}
.gm-style .gm-style-iw-d {
    overflow: hidden !important;
    padding: 0;
}
.gm-style .gm-ui-hover-effect {
    display: none !important;
}
.gm-style .gm-style-iw-chr {
    height: 0;
    margin: 0;
    padding: 0;
}

.gmap-infowindow-card {
    position: relative;
    width: 220px;
}
.gmap-infowindow-card__img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
}
.gmap-infowindow-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.gmap-infowindow-close .material-symbols-outlined {
    font-size: 18px;
    color: var(--header);
}
.gmap-infowindow-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
}
.gmap-infowindow-card__name {
    font-weight: 600;
    color: var(--header);
    font-size: 0.9rem;
    line-height: 1.2;
}
.gmap-infowindow-card__address {
    font-size: 0.75rem;
    color: var(--text);
    line-height: 1.2;
}

/* Accordion "altri dettagli sul punto di incontro" (vedi main.js): pannello nascosto di
   default via JS, bottone testuale con chevron che ruota — stessa logica del bottone
   "Leggi tutto" (.btn-read-more) ma con un'etichetta esplicita invece di un fade. Bordo
   sotto (stesso trattamento di .attraction-detail__quick-fact) per staccarlo meglio dai
   punti successivi (note/condizioni di cancellazione). */
.attraction-detail__accordion {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
/* Ultimo pannello "Maggiori informazioni" in una serie (es. punti d'incontro del carnet,
   uno per attrazione): niente linea residua subito prima della fine della sezione. */
.attraction-detail__accordion--no-border {
    padding-bottom: 0;
    border-bottom: none;
}
.attraction-detail__accordion-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--theme);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}
.attraction-detail__accordion-icon {
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}
.attraction-detail__accordion-toggle[aria-expanded="true"] .attraction-detail__accordion-icon {
    transform: rotate(180deg);
}
.attraction-detail__accordion-panel {
    margin-top: 0.35rem;
}
@media (prefers-reduced-motion: reduce) {
    .attraction-detail__accordion-icon {
        transition: none;
    }
}

/* Sticky sul CONTENITORE (box + recensioni sotto), non più solo sul box: altrimenti le
   recensioni restano nel flusso normale e scorrono "dietro" al box che invece resta fermo,
   creando una sovrapposizione. Così si muovono/fermano insieme come un unico blocco. */
.attraction-detail__sidebar-sticky {
    position: sticky;
    top: calc(var(--header-height, 80px) + 1rem);
}
.attraction-detail__booking-box {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    text-align: center;
}

/* Spaziatura compattata apposta (era 2rem/2rem): meno ingombro sopra al bottone di
   prenotazione aumenta le probabilità che sia già visibile senza scroll nella prima
   porzione di schermo, insieme al margine ridotto sotto la galleria (vedi .attraction-detail). */
.attraction-detail__booking-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--header);
    margin-bottom: 1rem;
    line-height:1.3
}

.attraction-detail__price {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--header);
    margin-bottom: 1.25rem;
}

/* Larghezza ristretta apposta: forza "a partire da" su due righe invece che su una sola
   riga larga, così il blocco prefisso occupa un'altezza vicina a quella del prezzo
   accanto (in linea con esso, non impilato sopra) invece di sembrare sproporzionato. */
.attraction-detail__price-prefix {
    font-size: 0.75rem;
    line-height: 1.15;
    font-weight: 400;
    color: var(--text);
    text-align: center;
}
.attraction-detail__price-suffix {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text);
}

.attraction-detail__booking-note {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    text-align: left;
}

/* Barra "Prenota ora" mobile (sotto lg, il box sidebar sopra è d-none in quel range) —
   vedi commento nel markup in _attraction-detail.php per il motivo di "sticky" invece di
   "fixed" e di dove è piazzata nel DOM (ultima figlia di <section class="attraction-detail">,
   non di .container). Il fondo/bordo restano a tutta larghezza sull'elemento esterno, ma il
   contenuto (prezzo + bottone) è dentro un .container annidato: stesso gutter orizzontale
   del resto della pagina, altrimenti a certe risoluzioni il testo non risultava allineato
   con la colonna del contenuto sopra. */
.attraction-detail__mobile-book-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding: 0.75rem 0;
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0px -13px 12px rgba(0, 0, 0, 0.08);
}
.attraction-detail__mobile-book-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.attraction-detail__mobile-book-bar-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.attraction-detail__mobile-book-bar-price-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--header);
}
.attraction-detail__mobile-book-bar-price-label {
    font-size: 0.7rem;
    color: var(--text);
}
/* Prenota (_carnet-detail.php, unico bottone senza wrapper azioni/Regala): flex-grow
   riempie tutto lo spazio libero accanto al prezzo — invariato. Su _attraction-detail.php
   invece, dentro .attraction-detail__mobile-book-bar-actions (sotto), questo flex-grow
   viene disattivato: qui Prenota può stare accanto a Regala, entrambi larghi quanto il
   loro contenuto, non più un bottone che si allunga a riempire lo spazio. */
.attraction-detail__mobile-book-bar-btn {
    flex: 1 1 auto;
    white-space: nowrap;
}
.attraction-detail__mobile-book-bar-price {
    flex-shrink: 0;
}
/* Gruppo Prenota+Regala (_attraction-detail.php): un solo wrapper così
   justify-content:space-between sul genitore distanzia SOLO prezzo e gruppo-azioni, non
   i tre elementi singolarmente. */
.attraction-detail__mobile-book-bar-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.attraction-detail__mobile-book-bar-actions .attraction-detail__mobile-book-bar-btn {
    flex: 0 0 auto;
}
/* Altezza esplicita condivisa: .theme-btn (Prenota, padding verticale 18-20px responsivo)
   e .attraction-detail__mobile-book-bar-gift-btn (Regala, 12px + font più piccolo) hanno
   padding/font-size diversi — affiancati risultavano visibilmente disallineati in
   altezza. padding-top/bottom azzerato + height fissa normalizza entrambi alla stessa
   misura; il centraggio verticale del testo resta via align-items:center (già presente
   su entrambi, .theme-btn di suo e .attraction-detail__mobile-book-bar-gift-btn sotto). */
.attraction-detail__mobile-book-bar-actions .attraction-detail__mobile-book-bar-btn,
.attraction-detail__mobile-book-bar-gift-btn {
    height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 22px;
    padding-right: 22px;
    min-width: 0;
}

/* Bottone/i "Regala": sfondo bianco/bordo, testo nero — trattamento "outline pulito"
   (due tentativi scartati prima di arrivare qui: gradiente a piena saturazione troppo
   acceso, poi la stessa tinta tenue di .gift-cta-section__box, nessuno dei due
   convinceva). Condiviso da sidebar desktop (.attraction-detail__booking-box) e bottone
   compatto della barra sticky mobile (vedi sotto). */
.attraction-detail__gift-btn {
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--black);
}
/* Hover identico a .attraction-detail__book-btn (sotto): stesso feedback per entrambe le
   azioni, Prenota e Regala, invece del default .theme-btn:hover (che non cambia sfondo). */
.attraction-detail__gift-btn:hover,
.attraction-detail__gift-btn:focus-visible {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}
/* Icona ingrandita rispetto alla dimensione ereditata da .material-symbols-outlined,
   per darle più peso visivo nel bottone della sidebar desktop. */
.attraction-detail__gift-btn .material-symbols-outlined {
    font-size: 22px;
}

/* Bottone "Prenota" della sidebar desktop: hover sfondo nero/testo bianco esplicito,
   scoped a questo solo bottone (non il generico .theme-btn:hover, usato in tutto il sito
   e che di default non cambia sfondo) — stesso feedback di Regala qui sopra. */
.attraction-detail__book-btn:hover,
.attraction-detail__book-btn:focus-visible {
    background: var(--black);
    color: var(--white);
}

/* Bottone "Regala" della barra sticky mobile: pill compatto A SÉ (non più un'unica
   pillola tagliata in due segmenti — tentativo scartato, esteticamente non convinceva) —
   staccato da Prenota da un gap (.attraction-detail__mobile-book-bar-inner ha già
   gap:1rem), icona + etichetta breve, flex-shrink:0 così non si stringe mai a favore di
   Prenota (che invece cresce, vedi .attraction-detail__mobile-book-bar-btn sopra). */
.attraction-detail__mobile-book-bar-gift-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    border-radius: 100px;
    font-family: "Manrope", sans-serif;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}
.attraction-detail__mobile-book-bar-gift-btn .material-symbols-outlined {
    font-size: 18px;
}

/* .experience-card__meta usa "justify-content: space-between" (pensato per allargarsi su
   tutta la card nei listing) — qui l'anteprima città/durata sta in una colonna stretta
   accanto alla thumbnail, quindi i due meta-item devono stare vicini, non alle estremità. */
.carnet-accordion-meta {
    justify-content: flex-start;
    margin-bottom: 0.5rem;
}

/* Accordion attrazioni dentro il dettaglio carnet (_carnet-detail.php): chevron inline che
   ruota all'apertura, stessa logica di .attraction-detail__accordion-icon — non più un
   badge d'angolo posizionato in absolute (veniva tagliato dall'overflow:hidden della card
   e non era coerente con nessun altro chevron del sito). */
.carnet-attraction-header .carnet-chevron {
    transition: transform .25s;
    font-size: 1.5rem;
    color: var(--black);
}
.carnet-attraction-header:not(.collapsed) .carnet-chevron {
    transform: rotate(180deg);
}

/* Banner "fa parte anche di questo/questi carnet" (vedi carnetsIncluding()): in cima alla
   colonna sinistra, prima dei quick facts/descrizione. Prima prova: nel box prezzo/prenotazione
   della sidebar, poi scartata (non convinceva) a favore di questa posizione. Stesso gradiente
   tenue (arancio->rosa) di .gift-cta-section__box in home. Un solo carnet:
   tutto il banner è un link (tag <a>). Più di uno: il banner è un <div>/accordion (stesso
   meccanismo generico .attraction-detail__accordion, vedi main.js) che apre una lista di
   mini-card — un unico hook invece di ripeterlo per ogni pacchetto. Il qualificatore di tag
   (a. / div.) distingue i due casi senza bisogno di classi modificatore aggiuntive. */
.attraction-detail__carnet-banner {
    padding: 1rem;
    margin-bottom: 0.85rem;
    border-radius: 10px;
    background: linear-gradient(45deg, rgba(252, 200, 151, 0.4) 0%, rgba(247, 137, 161, 0.4) 60%);
    text-align: left;
}
a.attraction-detail__carnet-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}
.attraction-detail__carnet-banner.attraction-detail__accordion {
    border-bottom: none;
    padding-bottom: 1rem;
}
.attraction-detail__carnet-banner-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.attraction-detail__carnet-banner-hook {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--black);
}
.attraction-detail__carnet-banner-detail {
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--black);
}
/* Bottone icona-sola (freccia), usato sul banner a carnet singolo. */
.attraction-detail__carnet-banner-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 100px;
    background: var(--black);
    color: var(--white);
    transition: background-color 0.2s ease;
}
.attraction-detail__carnet-banner-cta .material-symbols-outlined {
    font-size: 16px;
}
a.attraction-detail__carnet-banner:hover .attraction-detail__carnet-banner-cta {
    background: #1a1a1a;
}

/* Toggle dell'accordion multi-carnet: sovrascrive lo stile generico di
   .attraction-detail__accordion-toggle (pensato per un'etichetta breve su una riga) — qui
   serve larghezza piena e testo/chevron alle due estremità, colore nero come il resto del
   banner invece del colore tema. text-align: left obbligatorio — <button> ha text-align:
   center di default nello UA stylesheet, che altrimenti sovrascrive (ereditandosi nei figli)
   il text-align: left di .attraction-detail__carnet-banner, l'unico elemento qui che non è
   un <button> (il banner a carnet singolo è un <a>, non soggetto a questo default). */
.attraction-detail__carnet-banner-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
    text-align: left;
    color: var(--black);
}
.attraction-detail__carnet-cards {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.85rem;
}
.attraction-detail__carnet-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem;
    border-radius: 8px;
    background: var(--white);
    text-decoration: none;
    transition: background-color 0.2s ease;
}
.attraction-detail__carnet-card:hover {
    background: var(--bg);
}
.attraction-detail__carnet-card-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.attraction-detail__carnet-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.attraction-detail__carnet-card-name {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--black);
}
.attraction-detail__carnet-card-count {
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--text);
}
/* Stesso cerchio di .attraction-detail__carnet-banner-cta (banner a carnet singolo), ma
   solo bordo invece di sfondo pieno — qui è ripetuto una volta per mini-card, uno sfondo
   nero pieno per ciascuna sarebbe stato troppo pesante sulla lista. */
.attraction-detail__carnet-card-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 100px;
    border: 1px solid var(--border);
    color: var(--black);
    font-size: 16px;
}
/* Nota generica (non nomina il gestore di pagamento: alcune attrazioni usano Setefi invece
   di Stripe, vedi DeltabookingSetefiConfig::isAvailableFor() in deltabooking-cart.php —
   un logo/brand specifico qui sarebbe falso per quelle). */
.attraction-detail__secure-payment {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--text);
}
.attraction-detail__secure-payment .material-symbols-outlined {
    font-size: 1rem;
}

.attraction-detail__videos {
    background: var(--header);
    padding: 3rem 0;
}

/* Carosello "Altre esperienze" (_attraction-detail.php + _carousel-highlight-section.php):
   bordo superiore per staccarlo visivamente dalla sezione dettaglio/box prenotazione sopra,
   niente altro sotto a fare da separatore prima del footer. */
.related-attractions-section {
    border-top: 1px solid var(--border);
}

/* ── Pagina carrello (deltabooking-cart.php) ──────────────────────────────────────────────
   Sostituisce i colori hex ereditati da un template esterno (#05073c, #6b7280, #e5e7eb,
   #eef0f9, ecc. — nessuno di questi corrisponde alle variabili del design system in
   color.css) con le variabili del progetto: var(--header) per i testi enfatizzati (era
   #05073c/#374151, entrambi vicini a --header), var(--text) per i testi secondari (era
   #6b7280/#9ca3af, quasi identico a --text), var(--border) per i bordi chiari (era
   #e5e7eb/#f0f0f5/#e9ebf5, tutti varianti dello stesso grigio), var(--bg) per gli sfondi
   chiari (era #f8f9fb/#f8f9fc/#f3f4f6), var(--theme)/var(--theme-light) per i badge
   informativi (era #05073c su #eef0f9, un blu scuro su lavanda che non richiama né il tema
   né l'accento del progetto). */
.db-cart-empty {
    border: 2px dashed var(--border);
}
.db-cart-empty__icon {
    font-size: 4rem;
    color: var(--border-2);
}
.db-cart-empty__text {
    color: var(--header);
}

/* Stesso trattamento di .db-cart-empty (box tratteggiato, icona grande, testo centrato)
   per coerenza visiva tra gli stati vuoti del sito. */
.db-ra-empty {
    border-radius: 20px;
    border: 1.5px solid var(--border);
}
.db-ra-empty__icon {
    font-size: 4rem;
    color: var(--border-2);
}
.db-ra-empty__text {
    color: var(--header);
}

/* Icona esito grande (cambio password / recupero password): stessa coppia di colori
   già usata per .db-ra-order__paid-state, non un rosso a sé stante. */
.db-ra-result-icon {
    font-size: 3rem;
}
.db-ra-result-icon--success {
    color: var(--success);
}
.db-ra-result-icon--error {
    color: var(--theme-2);
}
/* Contenuto molto corto (es. la form cambio password, solo 2 campi) faceva sembrare
   la pagina "schiacciata" — altezza minima per dare più presenza a prescindere da
   quanto sia effettivamente alto il contenuto della sezione attiva. */
.db-ra-content {
    min-height: 55vh;
}

.db-cart-welcome {
    color: var(--header);
}

.page-header--cart-flush {
    background: var(--white);
    padding-bottom: 0;
}

/* Titolo/sottotitolo allineati alla colonna centrata del contenuto sotto
   (deltabooking-user-restricted-area.php: .row.justify-content-center > .col-lg-8
   .col-xl-7) — _page-header.php li mette invece dentro un .container semplice a piena
   larghezza. Stesse percentuali delle colonne Bootstrap (66,67%/58,33%), non
   un'approssimazione: una colonna Bootstrap è già una % della riga, quindi coincide
   esattamente invece di dover indovinare una larghezza in px. */
.page-header--restricted-area .page-header__title,
.page-header--restricted-area .page-header__subtitle {
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 992px) {
    .page-header--restricted-area .page-header__title,
    .page-header--restricted-area .page-header__subtitle {
        max-width: 66.6667%;
    }
}
@media (min-width: 1200px) {
    .page-header--restricted-area .page-header__title,
    .page-header--restricted-area .page-header__subtitle {
        max-width: 58.3333%;
    }
}

.db-cart-auth-form--narrow {
    max-width: 400px;
}

.db-cart-box {
    border-radius: 20px;
    border: 1.5px solid var(--border);
}

.db-cart-box__auth-side {
    background: var(--bg);
    border-left: 1px solid var(--border);
    /* Angoli espliciti: .db-cart-box non ha più overflow:hidden (impediva lo sticky sotto),
       quindi gli sfondi pieni a contatto con il bordo esterno vanno arrotondati a mano.
       clip-path (non overflow:hidden!) clippa .db-cart-checkout quando lo sticky in basso
       lo porta nell'angolo reale: overflow:hidden crea sempre un "contenitore di scroll"
       per la spec, anche su questa colonna singola, e rompe comunque lo sticky al suo
       interno — clip-path no, perché non tocca la proprietà overflow. */
    border-radius: 0 0 20px 20px;
    clip-path: inset(0 round 0 0 20px 20px);
}
@media (min-width: 992px) {
    .db-cart-box__auth-side {
        border-radius: 0 20px 20px 0;
        clip-path: inset(0 round 0 20px 20px 0);
    }
}
.db-cart-box__auth-col > .db-cart-summary-sticky-wrapper > .db-cart-summary {
    border-radius: 0 0 0 20px;
    border-top: 1px solid var(--border);
    background: var(--white);
}
/* Sticky bottom solo da lg in su (colonne affiancate, .row stretch le pareggia in
   altezza): .db-cart-box__auth-col diventa flex-column, ma il totale sta dentro un
   wrapper dedicato (.db-cart-summary-sticky-wrapper, flex: 1 1 auto) che riempie SOLO
   lo spazio restante DOPO la lista item — stesso pattern di
   .db-cart-box__auth-side-sticky-wrapper per il riepilogo pagamento. Se il binario
   fosse l'intera colonna (lista compresa) lo sticky scorrerebbe sopra gli item invece
   di fermarsi dove finisce la lista. */
@media (min-width: 992px) {
    .db-cart-box__auth-col {
        display: flex;
        flex-direction: column;
    }
    .db-cart-box__auth-col > .db-cart-summary-sticky-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    .db-cart-box__auth-col > .db-cart-summary-sticky-wrapper > .db-cart-summary {
        position: sticky;
        bottom: 0;
        margin-top: auto;
    }
}
/* Sticky sul wrapper interno del form (non sulla colonna): la colonna resta stretch,
   così lo sfondo grigio continua a riempire tutta l'altezza della card anche quando la
   lista a sinistra è più lunga; stesso pattern di .attraction-detail__sidebar-sticky,
   che tiene conto dell'altezza del menu principale sticky sopra. */
@media (min-width: 992px) {
    .db-cart-box__auth-side-sticky {
        position: sticky;
        top: calc(var(--header-height, 80px) + 1rem);
    }
}
/* Variante per il riepilogo pagamento (utente loggato, vedi deltabooking-cart.php):
   contenuto corto (totale + bottone) — appeso in alto lascerebbe un vuoto sotto quando
   la lista item a sinistra è più alta; in basso resta invece sempre raggiungibile mentre
   si scorre la lista, come nei riepiloghi ordine dei carrelli e-commerce. Il form di
   login/registrazione (non loggato, più alto) resta invece sullo sticky in alto sopra.

   "position: sticky; bottom" da solo non allinea in basso: finché non si scorre
   abbastanza da farlo scattare, il blocco resta comunque nella sua posizione naturale in
   cima alla colonna. .db-cart-box__auth-side diventa quindi un flex-column (inerte per il
   form di login, che non ha margin-top:auto) e margin-top:auto spinge solo questo
   blocco in fondo di default, mentre lo sticky lo tiene ancorato scorrendo. */
@media (min-width: 992px) {
    .db-cart-box__auth-side {
        display: flex;
        flex-direction: column;
    }
    /* Contenitore dedicato solo allo sticky (vedi deltabooking-cart.php): riempie lo
       spazio restante della colonna DOPO la riga del codice sconto, invece di
       condividere il flex-column con quella riga — lo sticky/margin-top:auto calcola
       la propria altezza su questo box, non più sull'intera colonna, evitando che il
       messaggio d'errore del codice sconto (sopra, position:absolute) si sovrapponga. */
    .db-cart-box__auth-side-sticky-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        /* Piccolo margine per l'ingombro del feedback del form sconto sopra (position:
           absolute, non spinge il layout): senza, risulta visivamente attaccato. */
        margin-top: 1.3rem;
    }
    .db-cart-box__auth-side-sticky--bottom {
        top: auto;
        bottom: 0;
        margin-top: auto;
    }
}

.db-cart-item {
    padding: 2rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.db-cart-item:last-child {
    border-bottom: none;
}
.db-cart-item__remove-icon {
    font-size: 1.5rem;
}
.db-cart-item__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.db-cart-item__title {
    color: var(--black);
}
.db-cart-item__date {
    color: var(--black);
}
.db-cart-item__date-icon {
    font-size: 13px;
}
.db-cart-item__ticket-row {
    border-top: 1px solid var(--border);
}
/* Nella riga carnet il box "attrazioni incluse" separa già visivamente: niente bordo
   ridondante sulla prima riga biglietti (ora <li>) che lo segue subito dopo, dentro il <ul> */
.db-carnet-slots-summary + ul > .db-cart-item__ticket-row:first-child {
    border-top: none;
}
.db-cart-item__ticket-label {
    color: var(--black);
}
.db-cart-item__ticket-icon {
    font-size: 15px;
}
.db-cart-item__ticket-qty {
    color: var(--black);
}
.db-cart-item__note {
    background: var(--bg);
    color: var(--black);
}
.db-cart-item__total {
    color: var(--black);
}

/* "Scaduto" è uno stato a sé stante (non un colore del tema): rosso,
   convenzione universale per avviso/errore — introdotto solo qui, stesso
   approccio già usato sotto per lo stato "pending" del pagamento. */
.db-cart-badge--expired {
    color: var(--theme-2);
    line-height:1.3;
    border: 1px solid var(--theme-2);
    padding:0.5rem 0.75rem!important
}
.db-cart-badge--expired .material-symbols-outlined {
    font-size: 17px;
}
/* Badge "Attrazione regalo" (deltabooking-cart.php): stesso identico trattamento del
   badge scaduto sopra (bordo+colore, icona+testo), ma --theme (non --theme-2, riservato
   agli stati di errore/avviso) — un regalo non è un problema da segnalare. */
.db-cart-badge--gift {
    color: var(--black);
    line-height: 1.3;
    border: 1px solid var(--black);
}
.db-cart-badge--gift .material-symbols-outlined {
    font-size: 17px;
}
.db-cart-expired-text {
    color: var(--theme-2);
}
.db-cart-item__total--expired {
    text-decoration: line-through;
}
.db-cart-expired-link {
    color: var(--theme-2);
    text-decoration: none;
}
.db-cart-expired-link__text {
    text-decoration: underline;
}
.db-cart-expired-link__text:hover {
    text-decoration: none;
}
.db-cart-expired-link .material-symbols-outlined {
    font-size: 14px;
}


.db-cart-summary__label {
    letter-spacing: 0.5px;
    color: var(--black);
}
.db-cart-summary__value {
    font-size: 1.5rem;
    color: var(--header);
}
.db-cart-summary__original-value {
    color: var(--black);
}

/* Niente border-radius qui: il blocco è dentro l'elemento sticky e si sposta durante lo
   scroll — un angolo arrotondato "a metà colonna" mostrerebbe solo il grigio dietro alla
   curva. L'arrotondamento reale arriva dal clip-path di .db-cart-box__auth-side quando il
   blocco raggiunge davvero il fondo (non overflow:hidden: romperebbe lo sticky). */
.db-cart-checkout {
    background: var(--white);
    border-top: 1px solid var(--border);
    /* Centrato invece che a piena larghezza: da desktop il bottone .theme-btn non deve
       stirarsi a coprire tutta la colonna (comportamento di default di un flex-column
       senza align-items), resta della sua dimensione naturale, centrato insieme al testo
       di stato sopra. */
    align-items: center;
    text-align: center;
}
/* "In sospeso" è uno stato a se stante (non è né il colore del tema né quello di accento):
   ambra, convenzione universale per "in attesa" — nessuna variabile del progetto lo
   copriva già, introdotta qui perché serve solo in questo stato del carrello. */
.db-cart-pending-text {
    color: #b45309;
}
.db-cart-pending-btn {
    background: #b45309;
    color: var(--white);
}
.db-cart-pay-cc-btn {
    background: var(--success);
    color: var(--white);
}
/* .theme-btn non ha uno stato disabled proprio (nel resto del sito è sempre un CTA
   attivo) — serve qui per il bottone "tutto scaduto" del carrello. */
.theme-btn:disabled {
    background-color: var(--border);
    color: var(--text);
    cursor: not-allowed;
}
.db-cart-secure-note {
    color: var(--text);
    font-size: 0.8rem;
}
/* Badge col logo Stripe (public/immagini/stripe_white.svg, solo scritta bianca senza
   bordo): il bordino lo aggiunge il CSS, currentColor così segue automaticamente il
   colore del testo del bottone che lo contiene (bianco su .theme-btn). */
.db-cart-stripe-badge {
    display: inline-flex;
    align-items: center;
}
.db-cart-stripe-badge__img {
    height: 18px;
    width: auto;
    display: block;
}
/* Solo il bottone standard di pagamento (testo + logo Stripe): gap più stretto del
   default di .theme-btn (10px), qui il logo è un badge accessorio al testo, non un'altra
   voce equivalente — non deve toccare gli altri usi di .theme-btn nel resto del sito. */
.db-cart-stripe-pay-btn {
    gap: 5px;
}
.db-cart-secure-note .material-symbols-outlined {
    font-size: 16px;
}

/* Testo di default ereditato (--text, grigio) su sfondo già grigio (--bg) della colonna:
   contrasto troppo basso. */
.db-cart-item-count {
    color: var(--black);
}

/* Codice sconto (UI predisposta, non ancora attiva — vedi commento nel markup). */
.db-cart-discount {
    width: 100%;
}
@media (min-width: 992px) {
    .db-cart-discount {
        max-width: 260px;
    }
}
/* .invalid-feedback in position:absolute (sotto .form-floating, che ha già
   position:relative di suo da Bootstrap): esce dal flusso normale, quindi non fa più
   crescere l'altezza di .form-floating quando il messaggio compare — il bottone
   accanto (stessa altezza di input+label) non si stira più, senza bisogno di toccare
   align-items né l'HTML. */
.db-cart-discount-input-group .form-floating {
    position: relative;
}
.db-cart-discount-input-group .invalid-feedback {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}
/* Label del form-floating: grigio di default di Bootstrap, poco leggibile sullo sfondo
   già grigio della colonna (var(--bg)). */
.db-cart-discount-input-group .form-floating > label {
    color: var(--black);
}
.db-cart-discount-row {
    color: var(--black);
    border-bottom: 1px solid rgba(0,0,0,.2);
}
.db-cart-discount-row__value {
    background: var(--black);
    color: var(--white);
    padding: 1px 8px;
    font-size: 0.75rem;
    border-radius: 100px;
}

/* Tab Registrazione/Login nel form di autenticazione del carrello (_cart-auth.php):
   era un navy/lavanda (#2b2d5b su #f0f1f8) senza nessuna relazione col resto del progetto
   — nero/bianco secco, come richiesto. */
.db-cart-auth-tabs {
    background: var(--white);
    border: 1.5px solid var(--border);
}
.db-cart-auth-tabs .nav-link.active {
    background: var(--black);
    color: var(--white);
}
.db-cart-auth-tabs .nav-link:not(.active) {
    background: var(--white);
    color: var(--black);
}
/* Sottolineato: main.css toglie text-decoration a tutti gli <a>, ma qui il link è annidato
   dentro il testo della label del checkbox GDPR — senza un segnale non cromatico si confonde
   con il resto della frase (stesso font/peso), non solo nel carrello */
.gdpr-link {
    text-decoration: underline;
}
#cartTabLogin .gdpr-link,
#cartTabRegister .gdpr-link,
#cartTabLogin label,
#cartTabRegister label {
    color: var(--header);
}
.db-cart-auth-subtitle,
.db-cart-auth-forgot-link {
    color: var(--text);
}
/* Messaggio errore generico del form-processor (vendor): senza margine appare attaccato
   al bottone invio subito sopra */
#cartTabRegister [errormsgcontainerwrapper],
#cartTabLogin [errormsgcontainerwrapper] {
    margin-top: 1rem;
}

/* ── Area riservata (deltabooking-user-restricted-area.php) ──────────────────────────
   Riscritta da markup Bootstrap generico (card/table/badge di default, stili inline
   con colori hardcoded) a classi dedicate, stesso trattamento già fatto per
   _attraction-detail.php e deltabooking-cart.php. ────────────────────────────────── */

/* Stepper "sei tornato dal pagamento": stessa struttura di prima, colori da tema
   invece di hex hardcoded (#95c11f/#05073c). */
.db-ra-stepper {
    display: flex;
    align-items: center;
}
.db-ra-stepper__step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.db-ra-stepper__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--white);
}
.db-ra-stepper__circle .material-symbols-outlined {
    font-size: 18px;
}
.db-ra-stepper__circle--done {
    background: var(--success);
}
.db-ra-stepper__circle--current {
    background: var(--header);
}
.db-ra-stepper__line {
    flex-grow: 1;
    margin: 0 1rem;
    height: 2px;
    background: var(--header);
}
.db-ra-stepper__label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--header);
}

/* Card ordine: un <li> per ordine dentro .db-ra-orders (<ul>, annunciata come lista agli
   screen reader), non più <div class="card"> sciolti uno via l'altro. */
/* Stesso bordo/arrotondamento di .db-cart-box, per coerenza visiva coi box del
   carrello — niente ombra, solo bordo (come .db-cart-box). */
.db-ra-order,
.db-ra-card {
    border-radius: 20px;
    border: 1.5px solid var(--border);
}
.db-ra-order {
    margin-bottom: 1.5rem;
}

/* Pagine con una sola card-form (login, registrazione, cambio password): più spazio
   sotto la card prima del footer, invece di un margin-bottom sulla card stessa
   (che dipendeva dal min-height della sezione e spariva con form più lunghe).
   !important necessario: la classe utility .py-5 di Bootstrap imposta già
   padding-bottom con !important, altrimenti questo valore verrebbe ignorato. */
.db-ra-content--form-only {
    padding-bottom: 6rem !important;
}
.db-ra-order__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.db-ra-order__meta {
    padding: 0.5rem 1.5rem;
}
.db-ra-order__meta-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.db-ra-order__meta-row:last-child {
    border-bottom: none;
}
.db-ra-order__meta-label {
    color: var(--text);
    flex-shrink: 0;
    width: 150px;
}

/* Badge di stato ordine: colori da tema invece dei default Bootstrap bg-danger/
   bg-warning/bg-info. Ambra riusata dallo stesso stato "in sospeso" del carrello
   (.db-cart-pending-text) — stessa convenzione, nessuna variabile dedicata nel
   progetto per questo colore. */
.db-ra-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--white);
}
.db-ra-badge__icon {
    font-size: 14px;
}
.db-ra-badge--danger {
    background: var(--theme-2);
}
.db-ra-badge--warning {
    background: #b45309;
}
.db-ra-badge--info {
    background: var(--theme);
}
.db-ra-order__voucher-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--header);
    border-radius: 100px;
    color: var(--header);
    font-weight: 700;
    font-size: 0.875rem;
}
.db-ra-order__voucher-icon {
    font-size: 16px;
}

.db-ra-order__paid-state {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
}
.db-ra-order__paid-icon {
    font-size: 16px;
}
.db-ra-order__paid-state--danger {
    color: var(--theme-2);
}
.db-ra-order__paid-state--success {
    color: var(--success);
}
.db-ra-order__paid-state--pending {
    color: #b45309;
}

/* Righe articoli/carnet dell'ordine — stessa logica di raggruppamento del carrello,
   markup allineato a .db-cart-item invece di div generici con bg-light/border inline. */
.db-ra-order__items {
    padding: 0.75rem 1.5rem 0.5rem;
    border-top: 1px solid var(--border);
}
.db-ra-order__item {
    margin-bottom: 0.75rem;
}
.db-ra-order__item-date {
    color: var(--text);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}
.db-ra-order__item-ticket {
    color: var(--text);
    font-size: 0.875rem;
}
.db-ra-order__item-ticket-icon {
    font-size: 13px;
    opacity: 0.6;
}
.db-ra-order__item-note {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: var(--bg);
    color: var(--black);
}
.db-ra-order__carnet-slots {
    margin-top: 0.25rem;
}
.db-ra-order__carnet-slot {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--bg);
}

.db-ra-order__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border);
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
}
.db-ra-order__total-value {
    font-size: 1.25rem;
    color: var(--success);
    text-transform: none;
}