/* ==========================================================================
   Tema shadcn/ui per il Booking Online (BOL2023)
   --------------------------------------------------------------------------
   Strato puramente grafico caricato DOPO tutti gli altri fogli di stile
   (vedi index.cfm: link nel <head> e ripetuto in fondo al <body>, dopo i CSS
   dei componenti inclusi nella pagina).

   Regole:
   - cambia solo colori, bordi, raggi, ombre, pesi del testo e transizioni:
     niente width/height/position/margin/padding dei contenitori (molti
     elementi sono posizionati in assoluto);
   - il colore del campeggio resta il colore primario: --sh-primary legge
     --color-light-button-big / --color-dark-button-big dai file
     css/campeggio/<campeggio>/custom-theme-color.css;
   - i colori neutri legacy (--color-light-* e --color-dark-*) vengono
     riallineati alla palette zinc di shadcn, cosi' tutti i CSS esistenti
     che li usano ereditano il nuovo aspetto senza essere modificati;
   - nessuna risorsa esterna: il testo usa lo stack di sistema (come shadcn);
     solo i titoli usano Plus Jakarta Sans, ospitata in fonts/ (licenza OFL).
   ========================================================================== */

/* Plus Jakarta Sans, variabile 400-800, solo i sottoinsiemi latin e
   latin-ext (le lingue del booking). swap: finche non arriva si vede il
   sans di sistema, mai testo invisibile */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root {
  --sh-font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  /* titoli (offerte, card struttura e tariffe, modale Dettagli) */
  --sh-font-display: 'Plus Jakarta Sans', var(--sh-font-sans);

  --sh-radius-sm: 0.375rem;
  --sh-radius: 0.625rem;
  --sh-radius-lg: 0.875rem;
  --sh-radius-xl: 1.25rem;

  --sh-shadow-xs: 0 1px 2px 0 rgb(24 39 32 / 0.05);
  --sh-shadow-sm: 0 1px 3px 0 rgb(24 39 32 / 0.07), 0 1px 2px -1px rgb(24 39 32 / 0.06);
  --sh-shadow-md: 0 6px 16px -4px rgb(24 39 32 / 0.1), 0 2px 4px -2px rgb(24 39 32 / 0.06);
  --sh-shadow-lg: 0 18px 40px -12px rgb(24 39 32 / 0.18), 0 4px 10px -4px rgb(24 39 32 / 0.08);

  --sh-transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;

  /* Chiaro: neutri tenui con una punta di salvia */
  --sh-background: #f6f7f6;
  --sh-foreground: #1b2420;
  --sh-card: #ffffff;
  --sh-card-foreground: #1b2420;
  --sh-popover: #ffffff;
  --sh-muted: #f0f3f1;
  --sh-muted-foreground: #66736d;
  --sh-accent: #eef2f0;
  --sh-accent-foreground: #1b2420;
  --sh-border: #e3e8e5;
  --sh-input: #d6ddd9;
  --sh-subtle: #f7f9f8;
  --sh-destructive: #d14343;
  --sh-success: #2f8a5b;
  --sh-warning: #c27a12;
  --sh-info: #3b74c4;

  --sh-primary: var(--color-light-button-big, #18181b);
  --sh-primary-foreground: var(--color-light-dropdown-active-color, #ffffff);
  --sh-ring: color-mix(in srgb, var(--sh-primary) 45%, transparent);
  --sh-ring-offset: var(--sh-card);
}

[data-theme='dark'] {
  --sh-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.2);
  --sh-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.25), 0 1px 2px -1px rgb(0 0 0 / 0.25);
  --sh-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --sh-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.35), 0 4px 6px -4px rgb(0 0 0 / 0.35);

  /* Scuro "leggero": grigio ardesia invece del quasi nero */
  --sh-background: #1d2220;
  --sh-foreground: #edf1ef;
  --sh-card: #252b29;
  --sh-card-foreground: #edf1ef;
  --sh-popover: #2a312e;
  --sh-muted: #343d3a;
  --sh-muted-foreground: #b6c1bc;
  --sh-accent: #333c39;
  --sh-accent-foreground: #edf1ef;
  --sh-border: #46514c;
  --sh-input: #5b6762;
  --sh-subtle: #2a312e;
  --sh-destructive: #ec7a7a;
  --sh-success: #6cc196;
  --sh-warning: #e7b04f;
  --sh-info: #84aee8;

  --sh-primary: var(--color-dark-button-big, #fafafa);
  --sh-primary-foreground: var(--color-dark-dropdown-active-color, #ffffff);
  --sh-ring-offset: var(--sh-card);
}

/* --------------------------------------------------------------------------
   2. Variabili legacy riallineate alla palette shadcn
   Stessi selettori dei file custom-theme-color.css (che le dichiarano anche
   su ::before/::after), cosi' l'override arriva anche agli pseudo-elementi.
   Restano invariati i colori del campeggio (button-big, dropdown-active-*,
   dropdown-text, header-columns) e quelli con un significato (calendar,
   warning, danger, success, info, manutenzione).
   -------------------------------------------------------------------------- */
:root,
:after,
:before,
:host {
  --color-light-white-back: #ffffff;
  --color-light-clear-back: #ffffff;
  --color-light-border: #e3e8e5;
  --color-light-border-light: #f0f3f1;
  --color-light-border-table: #e3e8e5;
  --color-light-text-highlight: #1b2420;
  --color-light-text: #66736d;
  --color-light-text-hover: #1b2420;
  --color-light-background: #f6f7f6;
  --color-light-footer: #66736d;
  --color-light-search-shadow: #e3e8e5;
  --color-light-background-striped: rgb(240 243 241 / 0.7);

  --color-dark-white-back: #252b29;
  --color-dark-clear-back: #2a312e;
  --color-dark-more-clear-back: #303836;
  --color-dark-border: #46514c;
  --color-dark-border-table: #46514c;
  --color-dark-text-highlight: #edf1ef;
  --color-dark-text: #b6c1bc;
  --color-dark-text-hover: #edf1ef;
  --color-dark-background: #1d2220;
  --color-dark-footer: #b6c1bc;
  --color-dark-search-shadow: #46514c;
  --color-dark-background-striped: rgb(48 56 54 / 0.5);
}

/* --------------------------------------------------------------------------
   3. Bootstrap: variabili globali
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme='light'] {
  --bs-font-sans-serif: var(--sh-font-sans);
  --bs-body-font-family: var(--sh-font-sans);
  --bs-body-color: var(--sh-foreground);
  --bs-body-bg: var(--sh-background);
  --bs-emphasis-color: var(--sh-foreground);
  --bs-secondary-color: var(--sh-muted-foreground);
  --bs-tertiary-bg: var(--sh-card);
  --bs-border-color: var(--sh-border);
  --bs-border-color-translucent: var(--sh-border);
  --bs-border-radius: var(--sh-radius);
  --bs-border-radius-sm: var(--sh-radius-sm);
  --bs-border-radius-lg: var(--sh-radius-lg);
  --bs-border-radius-xl: var(--sh-radius-xl);
  --bs-border-radius-inside: var(--sh-radius);
  --bs-box-shadow-sm: var(--sh-shadow-xs);
  --bs-box-shadow: var(--sh-shadow-md);
  --bs-box-shadow-lg: var(--sh-shadow-lg);
  --bs-focus-ring-color: var(--sh-ring);
  --bs-heading-color: var(--sh-foreground);
}

[data-theme='dark'],
[data-theme='dark'] body {
  --bs-body-color: var(--sh-foreground);
  --bs-body-bg: var(--sh-background);
  --bs-emphasis-color: var(--sh-foreground);
  --bs-secondary-color: var(--sh-muted-foreground);
  --bs-tertiary-bg: var(--sh-card);
  --bs-border-color: var(--sh-border);
  --bs-border-color-translucent: var(--sh-border);
  --bs-border-radius-inside: var(--sh-radius);
  --bs-heading-color: var(--sh-foreground);
}

body {
  font-family: var(--sh-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'rlig' 1, 'calt' 1;
}

::selection {
  background-color: color-mix(in srgb, var(--sh-primary) 25%, transparent);
}

/* --------------------------------------------------------------------------
   4. Navbar e footer
   -------------------------------------------------------------------------- */
.navbar.navbar-top {
  border-bottom: 1px solid var(--sh-border);
  box-shadow: none;
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}
.navbar-top {
  background-color: color-mix(in srgb, var(--sh-card) 92%, transparent) !important;
}
.navbar .nome-campeggio-navbar {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sh-foreground);
}

.navbar-footer {
  border-top: 1px solid var(--sh-border);
}

/* --------------------------------------------------------------------------
   5. Card
   -------------------------------------------------------------------------- */
.card {
  --bs-card-border-color: var(--sh-border);
  --bs-card-border-radius: var(--sh-radius-lg);
  --bs-card-inner-border-radius: calc(var(--sh-radius-lg) - 1px);
  --bs-card-bg: var(--sh-card);
  --bs-card-color: var(--sh-card-foreground);
  border-color: var(--sh-border);
  border-radius: var(--sh-radius-lg);
}
/* ombra leggera solo sulle card di primo livello */
.card:not(.card .card) {
  box-shadow: var(--sh-shadow-xs);
}
[data-theme='dark'] .card {
  --bs-card-border-color: var(--sh-border);
  border-color: var(--sh-border);
}
.card-header,
.card-footer {
  border-color: var(--sh-border);
}

/* --------------------------------------------------------------------------
   6. Pulsanti
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-border-radius: var(--sh-radius);
  --bs-btn-focus-box-shadow: 0 0 0 2px var(--sh-ring-offset), 0 0 0 4px var(--sh-ring);
  --bs-btn-disabled-opacity: 0.5;
  border-radius: var(--sh-radius);
  transition: var(--sh-transition);
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sh-ring-offset), 0 0 0 4px var(--sh-ring);
}

/* primary e success = colore del campeggio */
.btn-primary,
.btn-dettaglio-struttura,
.btn-user-dettagli,
.btn-user-area-privata {
  --bs-btn-color: var(--sh-primary-foreground);
  --bs-btn-bg: var(--sh-primary);
  --bs-btn-border-color: var(--sh-primary);
  --bs-btn-hover-color: var(--sh-primary-foreground);
  --bs-btn-hover-bg: color-mix(in srgb, var(--sh-primary) 90%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--sh-primary) 90%, #000);
  --bs-btn-active-color: var(--sh-primary-foreground);
  --bs-btn-active-bg: color-mix(in srgb, var(--sh-primary) 82%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--sh-primary) 82%, #000);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--sh-primary-foreground);
  --bs-btn-disabled-bg: var(--sh-primary);
  --bs-btn-disabled-border-color: var(--sh-primary);
  box-shadow: var(--sh-shadow-xs);
}

/* secondary = stile "outline" di shadcn */
.btn-secondary:not(.dropdown-toggle),
.btn-outline-secondary,
.btn-light {
  --bs-btn-color: var(--sh-foreground);
  --bs-btn-bg: var(--sh-card);
  --bs-btn-border-color: var(--sh-input);
  --bs-btn-hover-color: var(--sh-accent-foreground);
  --bs-btn-hover-bg: var(--sh-accent);
  --bs-btn-hover-border-color: var(--sh-input);
  --bs-btn-active-color: var(--sh-accent-foreground);
  --bs-btn-active-bg: var(--sh-accent);
  --bs-btn-active-border-color: var(--sh-input);
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: var(--sh-muted-foreground);
  --bs-btn-disabled-bg: var(--sh-card);
  --bs-btn-disabled-border-color: var(--sh-input);
  box-shadow: var(--sh-shadow-xs);
}

.btn-success {
  --bs-btn-bg: var(--sh-success);
  --bs-btn-border-color: var(--sh-success);
  --bs-btn-hover-bg: color-mix(in srgb, var(--sh-success) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--sh-success) 88%, #000);
}
.btn-danger {
  --bs-btn-bg: var(--sh-destructive);
  --bs-btn-border-color: var(--sh-destructive);
  --bs-btn-hover-bg: color-mix(in srgb, var(--sh-destructive) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--sh-destructive) 88%, #000);
}

/* il tema scuro legacy forza tutti i .btn al colore del campeggio con
   !important e un'opacita' al passaggio del mouse: la togliamo e lasciamo
   lavorare gli stati qui sopra */
[data-theme='dark'] .btn:hover,
[data-theme='dark'] .btn:active {
  opacity: 1;
}
[data-theme='dark'] .btn-primary:hover,
[data-theme='dark'] .btn-dettaglio-struttura:hover {
  filter: brightness(1.1);
}

/* frecce di navigazione tra gli step (arrows.css): restano link testuali,
   al passaggio del mouse prendono lo sfondo "ghost" di shadcn */
.sezione-struttura > .btn.btn-arrows-navigation {
  box-shadow: none;
  border-radius: var(--sh-radius);
}
.sezione-struttura > .btn.btn-arrows-navigation:hover,
[data-theme='dark'] .sezione-struttura > .btn.btn-arrows-navigation:hover {
  background-color: var(--sh-accent) !important;
  color: var(--sh-accent-foreground) !important;
  opacity: 1;
}

.btn-close {
  border-radius: var(--sh-radius-sm);
  opacity: 0.6;
  transition: var(--sh-transition);
}
.btn-close:hover {
  opacity: 1;
}
.btn-close:focus {
  box-shadow: 0 0 0 2px var(--sh-ring-offset), 0 0 0 4px var(--sh-ring);
}

/* --------------------------------------------------------------------------
   7. Campi dei form
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
  border-color: var(--sh-input);
  border-radius: var(--sh-radius);
  background-color: var(--sh-card);
  color: var(--sh-foreground);
  box-shadow: var(--sh-shadow-xs);
  transition: var(--sh-transition);
}
.form-control::placeholder {
  color: var(--sh-muted-foreground);
  opacity: 1;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--sh-primary);
  box-shadow: 0 0 0 3px var(--sh-ring);
  background-color: var(--sh-card);
  color: var(--sh-foreground);
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly]:not(.form-control-plaintext) {
  background-color: var(--sh-muted);
  color: var(--sh-muted-foreground);
}
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--sh-destructive);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-destructive) 30%, transparent);
}

/* il tema scuro legacy usava sfondi grigi chiari con testo scuro nei campi */
[data-theme='dark'] .form-control,
[data-theme='dark'] .form-select {
  background-color: var(--sh-subtle);
  border-color: var(--sh-input);
  color: var(--sh-foreground);
}
[data-theme='dark'] .input-group-text {
  border-width: 1px;
  background-color: var(--sh-muted);
  border-color: var(--sh-input);
  color: var(--sh-muted-foreground);
}

.input-group-text {
  border-color: var(--sh-input);
  background-color: var(--sh-muted);
  color: var(--sh-muted-foreground);
}

.form-check-input {
  border-color: var(--sh-input);
  transition: var(--sh-transition);
}
.form-check-input:checked {
  background-color: var(--sh-primary);
  border-color: var(--sh-primary);
}
.form-check-input:focus {
  border-color: var(--sh-primary);
  box-shadow: 0 0 0 3px var(--sh-ring);
}

/* --------------------------------------------------------------------------
   8. Menu a tendina, popover, tooltip, toast
   -------------------------------------------------------------------------- */
.dropdown-menu {
  --bs-dropdown-border-color: var(--sh-border);
  --bs-dropdown-border-radius: var(--sh-radius);
  --bs-dropdown-box-shadow: var(--sh-shadow-md);
  --bs-dropdown-link-hover-bg: var(--sh-accent);
  --bs-dropdown-link-active-bg: var(--sh-accent);
  --bs-dropdown-link-active-color: var(--sh-accent-foreground);
  border-color: var(--sh-border);
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-shadow-md);
}
[data-theme='dark'] .dropdown-menu {
  --bs-dropdown-bg: var(--sh-popover);
  --bs-dropdown-color: var(--sh-foreground);
  --bs-dropdown-link-color: var(--sh-foreground);
  --bs-dropdown-link-hover-color: var(--sh-foreground);
  --bs-dropdown-border-color: var(--sh-border);
  --bs-dropdown-link-hover-bg: var(--sh-accent);
  --bs-dropdown-link-active-bg: var(--sh-accent);
  --bs-dropdown-link-active-color: var(--sh-foreground);
  border-color: var(--sh-border);
}
.dropdown-item {
  transition: var(--sh-transition);
}

.popover {
  --bs-popover-border-color: var(--sh-border);
  --bs-popover-border-radius: var(--sh-radius);
  --bs-popover-box-shadow: var(--sh-shadow-md);
  --bs-popover-header-bg: var(--sh-card);
  box-shadow: var(--sh-shadow-md);
}
.popover-header {
  font-weight: 600;
  border-bottom-color: var(--sh-border);
}

.toast {
  --bs-toast-border-color: var(--sh-border);
  --bs-toast-border-radius: var(--sh-radius-lg);
  --bs-toast-box-shadow: var(--sh-shadow-lg);
  --bs-toast-header-border-color: var(--sh-border);
  --bs-toast-bg: var(--sh-card);
  --bs-toast-header-bg: var(--sh-card);
  --bs-toast-color: var(--sh-foreground);
  --bs-toast-header-color: var(--sh-foreground);
}

/* --------------------------------------------------------------------------
   9. Modali
   -------------------------------------------------------------------------- */
.modal {
  --bs-modal-border-color: var(--sh-border);
  --bs-modal-border-radius: var(--sh-radius-lg);
  --bs-modal-inner-border-radius: calc(var(--sh-radius-lg) - 1px);
  --bs-modal-box-shadow: var(--sh-shadow-lg);
  --bs-modal-header-border-color: var(--sh-border);
  --bs-modal-footer-border-color: var(--sh-border);
  --bs-modal-bg: var(--sh-card);
  --bs-modal-color: var(--sh-card-foreground);
}
.modal-content {
  border-color: var(--sh-border);
  box-shadow: var(--sh-shadow-lg);
}
.modal-title {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.modal-backdrop {
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.6;
}

/* --------------------------------------------------------------------------
   10. Tabelle
   -------------------------------------------------------------------------- */
.table {
  --bs-table-border-color: var(--sh-border);
  --bs-table-striped-bg: var(--sh-subtle) !important;
  --bs-table-hover-bg: var(--sh-muted);
}
.table > thead > tr > th,
.table > thead > tr > td {
  color: var(--sh-muted-foreground);
  font-weight: 500;
}
[data-theme='dark'] .table {
  --bs-table-color: var(--sh-foreground);
  --bs-table-bg: transparent;
  --bs-table-striped-color: var(--sh-foreground);
}

/* --------------------------------------------------------------------------
   11. Accordion, alert, badge, nav, paginazione
   -------------------------------------------------------------------------- */
.accordion {
  --bs-accordion-border-color: var(--sh-border);
  --bs-accordion-border-radius: var(--sh-radius-lg);
  --bs-accordion-inner-border-radius: calc(var(--sh-radius-lg) - 1px);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--sh-ring);
  --bs-accordion-active-bg: var(--sh-subtle);
  --bs-accordion-active-color: var(--sh-foreground);
  --bs-accordion-btn-focus-border-color: var(--sh-border);
}
.accordion-button {
  font-weight: 500;
}
[data-theme='dark'] .accordion-button,
[data-theme='dark'] .accordion,
[data-theme='dark'] .accordion-item {
  background-color: var(--sh-card);
  border-color: var(--sh-border);
}
[data-theme='dark'] .accordion-body {
  background-color: var(--sh-card);
}

.alert {
  --bs-alert-border-radius: var(--sh-radius-lg);
  border-radius: var(--sh-radius-lg);
}

.badge {
  --bs-badge-font-weight: 600;
  --bs-badge-border-radius: var(--sh-radius-sm);
  border-radius: var(--sh-radius-sm);
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--sh-border);
  --bs-nav-tabs-border-radius: var(--sh-radius);
  --bs-nav-tabs-link-active-border-color: var(--sh-border) var(--sh-border) var(--sh-card);
  --bs-nav-tabs-link-active-bg: var(--sh-card);
}
.nav-link {
  transition: var(--sh-transition);
}
.nav-pills {
  --bs-nav-pills-border-radius: var(--sh-radius);
  --bs-nav-pills-link-active-bg: var(--sh-primary);
  --bs-nav-pills-link-active-color: var(--sh-primary-foreground);
}

.pagination {
  --bs-pagination-border-color: var(--sh-border);
  --bs-pagination-border-radius: var(--sh-radius);
  --bs-pagination-active-bg: var(--sh-primary);
  --bs-pagination-active-border-color: var(--sh-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 3px var(--sh-ring);
}

.placeholder {
  border-radius: var(--sh-radius-sm);
}

hr {
  border-color: var(--sh-border);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   12. Barra di ricerca (home) e riepilogo laterale (step 1-2)
   -------------------------------------------------------------------------- */
.search-input-field .dropdown-menu,
.dropdown-persone-tipipersona {
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-shadow-md);
}

/* barra di ricerca della home (search*.css): pillola bianca con bordo
   sottile e ombra morbida al posto della cornice grigia e dell'ombra nera */
.search-container:has(> .search-button) {
  background-color: var(--sh-card);
  box-shadow: 0 0 0 1px var(--sh-border), var(--sh-shadow-lg);
}
[data-theme='dark'] .search-container:has(> .search-button) {
  background-color: var(--sh-card);
}
.search-container:has(> .search-button) > hr {
  background-color: var(--sh-border);
}
.search-button {
  transition: var(--sh-transition);
}
.search-button:hover {
  filter: brightness(0.92);
}

/* elenco persone (personList.css): contatori +/- come input shadcn */
.input-wrapper * {
  border-color: var(--sh-input) !important;
  background-color: var(--sh-card);
  color: var(--sh-foreground);
  transition: var(--sh-transition);
}
.input-wrapper button:hover {
  background-color: var(--sh-accent);
}
.dropdown-persone-item {
  border-bottom-color: var(--sh-border);
}
.dropdown-persone-counter {
  border-color: var(--sh-input);
}

/* pulsanti "elimina" (cestino) accanto a strutture e tipologie */
.lista-sezione-struttura-elimina,
.lista-sezione-struttura-elimina-left {
  border-color: var(--sh-input);
  color: var(--sh-muted-foreground);
  background-color: var(--sh-card);
  box-shadow: var(--sh-shadow-xs);
  transition: var(--sh-transition);
}
.lista-sezione-struttura-elimina:hover,
.lista-sezione-struttura-elimina-left:hover {
  color: var(--sh-destructive);
  border-color: color-mix(in srgb, var(--sh-destructive) 40%, var(--sh-input));
  background-color: color-mix(in srgb, var(--sh-destructive) 8%, var(--sh-card));
}

/* riepilogo laterale (leftSummary.css) */
.left-summary {
  border-radius: var(--sh-radius-lg);
}
.date-label-calendar,
#numero-notti {
  box-shadow: var(--sh-shadow-sm);
}
.row-totale-lsum,
tfoot {
  background-color: var(--sh-muted);
}
.button-aggiungi-tipologia,
.card-button {
  box-shadow: var(--sh-shadow-xs);
  transition: var(--sh-transition);
}
.button-aggiungi-tipologia:hover {
  opacity: 1;
  filter: brightness(0.92);
}

/* --------------------------------------------------------------------------
   13. Step 1-2: elenco strutture
   -------------------------------------------------------------------------- */
.card-struttura-foto,
.card-struttura-foto-immagine {
  border-radius: var(--sh-radius);
}
.titolo-struttura-label,
.titolo-sezione-struttura {
  letter-spacing: -0.01em;
}
.titolo-arrow-step {
  letter-spacing: -0.02em;
}
.titolo-struttura-disponibilita,
.descrizione-struttura-label {
  color: var(--sh-muted-foreground);
}
.me-error-red,
.prezzo-senza-offerta > span {
  color: var(--sh-destructive) !important;
}
.me-suggestion-orange {
  color: var(--sh-warning);
}

/* --------------------------------------------------------------------------
   13b. Step 2: servizi aggiuntivi (step2/components/info.css)
   -------------------------------------------------------------------------- */
.datepicker-servizi {
  border-color: var(--sh-input);
  color: var(--sh-foreground);
  background-color: var(--sh-card);
  box-shadow: var(--sh-shadow-xs);
  transition: var(--sh-transition);
}
.datepicker-servizi:focus {
  outline: none;
  border-color: var(--sh-primary);
  box-shadow: 0 0 0 3px var(--sh-ring);
}

/* --------------------------------------------------------------------------
   13c. Step 3: dati ospite, riepilogo, condizioni e scelta del pagamento
   (step3.css e src/pgs/step3/css_style.cfm)
   -------------------------------------------------------------------------- */
.accordion-item {
  border-color: var(--sh-border);
}
.accordion-button,
.accordion-button:not(.collapsed) {
  background-color: var(--sh-subtle);
  color: var(--sh-foreground);
  box-shadow: inset 0 -1px 0 var(--sh-border);
}
.accordion-button.collapsed {
  box-shadow: none;
}
.accordion-button:focus-visible {
  box-shadow: inset 0 0 0 2px var(--sh-ring);
}

/* note del cliente (stile Bulma .textarea) */
.textarea {
  border-color: var(--sh-input);
  border-radius: var(--sh-radius);
  background-color: var(--sh-card);
  color: var(--sh-foreground);
  box-shadow: var(--sh-shadow-xs);
  transition: var(--sh-transition);
}
.textarea:hover {
  border-color: #d4d4d8;
}
.textarea:focus,
.textarea:active {
  outline: none;
  border-color: var(--sh-primary);
  box-shadow: 0 0 0 3px var(--sh-ring);
}
.textarea::placeholder {
  color: var(--sh-muted-foreground);
}

/* interruttori privacy / termini / newsletter: rosso = da accettare,
   verde = accettato (significato invariato, tinte della palette) */
label[for='privacy'],
label[for='terms-conditions'],
label[for='newsletters'] {
  background: var(--sh-destructive);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.15);
  transition: var(--sh-transition);
}
input[type='checkbox']:checked + label[for='privacy'],
input[type='checkbox']:checked + label[for='terms-conditions'],
input[type='checkbox']:checked + label[for='newsletters'] {
  background: var(--sh-success);
}
label[for='privacy']:after,
label[for='terms-conditions']:after,
label[for='newsletters']:after {
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
}
input[type='checkbox']:focus-visible + label[for='privacy'],
input[type='checkbox']:focus-visible + label[for='terms-conditions'],
input[type='checkbox']:focus-visible + label[for='newsletters'] {
  outline: 2px solid var(--sh-ring);
  outline-offset: 2px;
}

/* totale e metodi di pagamento */
.riepilogo-totale-pagamento {
  border-color: var(--sh-border);
  border-radius: var(--sh-radius);
  background-color: var(--sh-card);
  box-shadow: var(--sh-shadow-xs);
}
.form-check-input[type='radio'] {
  border-color: #a1a1aa;
}
.form-check-input[type='radio']:checked {
  border-color: var(--sh-primary);
  background-color: var(--sh-primary);
}
.form-check-input[type='radio']:focus {
  border-color: var(--sh-primary);
  box-shadow: 0 0 0 3px var(--sh-ring);
}

/* conto alla rovescia del pagamento (anche nelle pagine Stripe / Banca Sella) */
#timer-pagamento {
  background-color: var(--sh-card);
  color: var(--sh-foreground);
  border-radius: var(--sh-radius-lg);
  box-shadow: 0 0 0 1px var(--sh-border), var(--sh-shadow-md);
}
#timer-pagamento-titolo {
  color: var(--sh-destructive);
}

/* --------------------------------------------------------------------------
   13d. Esito del pagamento: conferma, errore, annullo
   (src/pgs/pay.cfm e src/pay/<metodo>/conferma|errore|annullo.cfm)
   I titoli usavano Prata/Lato da Google Fonts: passano al font del tema.
   -------------------------------------------------------------------------- */
.pagamento-confermato {
  background-color: var(--sh-background);
  color: var(--sh-foreground);
}
.pagamento-confermato-titolo-testo,
.pagamento-confermato-dettagli-prenotazione-titolo {
  font-family: var(--sh-font-sans);
  letter-spacing: -0.02em;
  color: var(--sh-foreground);
}
.pagamento-confermato-sottotitolo {
  font-family: var(--sh-font-sans);
  color: var(--sh-muted-foreground);
}
.pagamento-confermato-sottotitolo b,
.pagamento-confermato-sottotitolo strong {
  color: var(--sh-foreground);
}
.pagamento-confermato-dettagli-prenotazione-tabella {
  --bs-table-border-color: var(--sh-border);
  --bs-table-bg: var(--sh-card);
  --bs-table-color: var(--sh-foreground);
  border-color: var(--sh-border);
}
.pagamento-confermato-dettagli-prenotazione-tabella th {
  background-color: var(--sh-muted);
  color: var(--sh-muted-foreground);
  font-weight: 500;
}
.pagamento-confermato-dettagli-prenotazione-riassunto-nome {
  color: var(--sh-muted-foreground);
}

/* --------------------------------------------------------------------------
   15. Pagine di pagamento autonome (fuori da index.cfm)
   stripe1.cfm, stripe2.cfm, bancaSella.cfm, worldline*.cfm, payWay.cfm:
   sfondo neutro, card bianche con bordo sottile, campi con linea grigia
   e pulsante col colore del campeggio.
   -------------------------------------------------------------------------- */
body:has(.pay-stripe-background),
body:has(.pay-bancasella-background),
body:has(.error-container) {
  background-color: var(--sh-background);
  color: var(--sh-foreground);
  font-family: var(--sh-font-sans);
}
.pay-stripe-background,
.pay-bancasella-background,
#step-2 {
  background-color: var(--sh-card);
  border-radius: var(--sh-radius-xl);
  box-shadow: 0 0 0 1px var(--sh-border), var(--sh-shadow-sm);
}
.pay-stripe-pic > img,
.pay-bancasella-pic > img {
  background-color: var(--sh-card);
  border-radius: var(--sh-radius-lg);
  box-shadow: 0 0 0 1px var(--sh-border), var(--sh-shadow-sm);
}
#stripe-checkout > iframe {
  border-radius: var(--sh-radius-lg);
}
.pay-bancasella-name {
  color: var(--sh-foreground);
  font-weight: 600;
}
.pay-bancasella-url {
  color: var(--sh-muted-foreground);
}
.pay-bancasella-background input {
  border-bottom-color: var(--sh-input) !important;
  color: var(--sh-foreground);
  transition: var(--sh-transition);
}
.pay-bancasella-background input:focus {
  outline: none;
  border-bottom-color: var(--sh-primary) !important;
  box-shadow: 0 1px 0 0 var(--sh-primary);
}
.pay-bancasella-button > button {
  font-family: var(--sh-font-sans);
  box-shadow: var(--sh-shadow-sm);
}
.preloader {
  border-radius: var(--sh-radius-xl);
}
.error-container .error-icon {
  color: var(--sh-destructive);
}
.error-container .error-text {
  color: var(--sh-muted-foreground);
}
#redirectToPayWayDiv {
  border-radius: var(--sh-radius-xl);
  box-shadow: 0 0 0 1px var(--sh-border), var(--sh-shadow-md);
}

/* ==========================================================================
   16. RIDISEGNO DEI COMPONENTI
   Layout piu moderno ottenuto con il CSS sul markup esistente (piu lo
   stepper aggiunto in arrows.cfm). Le classi e gli id usati dal JS non
   cambiano; le dimensioni che il JS imposta in linea restano valide.
   ========================================================================== */

/* ---- 16.1 Superfici comuni --------------------------------------------- */
:root {
  --sh-primary-soft: color-mix(in srgb, var(--sh-primary) 12%, var(--sh-card));
  --sh-primary-softer: color-mix(in srgb, var(--sh-primary) 6%, var(--sh-card));
  --sh-primary-border: color-mix(in srgb, var(--sh-primary) 35%, var(--sh-border));
}
[data-theme='dark'] {
  --sh-primary-soft: color-mix(in srgb, var(--sh-primary) 22%, var(--sh-card));
  --sh-primary-softer: color-mix(in srgb, var(--sh-primary) 12%, var(--sh-card));
  --sh-primary-border: color-mix(in srgb, var(--sh-primary) 50%, var(--sh-border));
}

body {
  background-color: var(--sh-background);
  color: var(--sh-foreground);
}

/* le card esterne degli step diventano superfici bianche con ombra morbida */
.step-page > .card,
.step-page .right-view-card.cardunclear,
.left-summary-card {
  border-radius: var(--sh-radius-xl);
  border-color: var(--sh-border);
  box-shadow: var(--sh-shadow-sm);
}
.step-page .right-view-card.cardunclear > .card-body > .card,
.left-summary-card > .card-body > .card {
  border-radius: var(--sh-radius-lg);
}

/* ---- 16.2 Header degli step con stepper -------------------------------- */
.right-view-arrows .sezione-struttura {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  position: relative;
}
.right-view-arrows .sezione-struttura:has(.sh-stepper) > .titolo-arrow-step {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  padding: 0;
}
.right-view-arrows .sezione-struttura > .btn-arrows-navigation {
  position: static;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 0.875rem;
  margin: 0 !important;
  line-height: 1.25;
}
.right-view-arrows .sezione-struttura > .btn-arrows-navigation .bi {
  font-size: 1rem;
}
.right-view-arrows .sezione-struttura > .btn-arrows-navigation-forward,
[data-theme='dark'] .right-view-arrows .sezione-struttura > .btn-arrows-navigation-forward {
  margin-left: auto !important;
  background-color: var(--sh-primary) !important;
  color: var(--sh-primary-foreground) !important;
  box-shadow: var(--sh-shadow-sm);
}
.right-view-arrows .sezione-struttura > .btn-arrows-navigation-forward:hover,
[data-theme='dark'] .right-view-arrows .sezione-struttura > .btn-arrows-navigation-forward:hover {
  background-color: color-mix(in srgb, var(--sh-primary) 88%, #000) !important;
  color: var(--sh-primary-foreground) !important;
}
/* frecce piu leggere: bi-arrow-right / bi-arrow-left al posto dei quadrati */
.right-view-arrows .btn-arrows-navigation-forward .bi-arrow-right-square::before {
  content: '\F138';
}
.right-view-arrows .btn-arrows-navigation .bi-arrow-left-square::before {
  content: '\F12F';
}

.sh-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sh-stepper-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sh-muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
.sh-stepper-item + .sh-stepper-item::before {
  content: '';
  display: block;
  width: clamp(14px, 3vw, 44px);
  height: 2px;
  margin-right: 0.25rem;
  border-radius: 2px;
  background-color: var(--sh-border);
}
.sh-stepper-item.is-done + .sh-stepper-item::before {
  background-color: var(--sh-primary);
}
.sh-stepper-dot {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1.5px solid var(--sh-input);
  background-color: var(--sh-card);
  color: var(--sh-muted-foreground);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}
.sh-stepper-item.is-done {
  color: var(--sh-foreground);
}
.sh-stepper-item.is-done .sh-stepper-dot {
  border-color: transparent;
  background-color: var(--sh-primary-soft);
  color: var(--sh-primary);
}
.sh-stepper-item.is-current {
  color: var(--sh-foreground);
  font-weight: 600;
}
.sh-stepper-item.is-current .sh-stepper-dot {
  border-color: var(--sh-primary);
  background-color: var(--sh-primary);
  color: var(--sh-primary-foreground);
  box-shadow: 0 0 0 4px var(--sh-primary-soft);
}
@media (max-width: 1250px) {
  .sh-stepper-item:not(.is-current) .sh-stepper-label {
    display: none;
  }
}

/* ---- 16.3 Riepilogo laterale ------------------------------------------- */
/* check-in / check-out: da cerchi a tessere */
#menu-left .date-label-calendar {
  width: calc(50% - 6px);
  height: auto;
  padding: 0.75rem 0.5rem 0.625rem;
  border-radius: var(--sh-radius-lg);
  background: var(--sh-primary-softer);
  box-shadow: inset 0 0 0 1px var(--sh-primary-border);
  color: var(--sh-muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-theme='dark'] #menu-left .date-label-calendar {
  background: var(--sh-primary-softer);
  color: var(--sh-muted-foreground);
}
#menu-left #giorno-checkin,
#menu-left #giorno-checkout {
  margin: 0.25rem 0 0.125rem;
  color: var(--sh-foreground);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
#menu-left #mese-checkin,
#menu-left #mese-checkout {
  color: var(--sh-muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: capitalize;
}
#menu-left #numero-notti {
  position: relative;
  z-index: 1;
  margin-top: -0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  /* verde un po' piu pieno dei riquadri di checkin e checkout */
  background: color-mix(in srgb, var(--sh-primary) 18%, var(--sh-card));
  box-shadow: 0 0 0 1px var(--sh-primary-border), var(--sh-shadow-xs);
  color: color-mix(in srgb, var(--sh-primary) 55%, var(--sh-foreground));
  font-size: 0.8125rem;
  font-weight: 600;
}
[data-theme='dark'] #menu-left #numero-notti {
  background: color-mix(in srgb, var(--sh-primary) 30%, var(--sh-card));
  color: var(--sh-foreground);
}
#menu-left .calendar-decoration {
  visibility: hidden;
}
/* la card che contiene date e calendario non ha cornice propria: il
   calendario ha gia il suo riquadro (index.custom.css), altrimenti si
   vedrebbe un riquadro dentro l'altro */
#menu-left > .card-body-top > .card.cardclear:has(.easepick-wrapper),
[data-theme='dark'] #menu-left > .card-body-top > .card.cardclear:has(.easepick-wrapper) {
  border: 0;
  background-color: transparent !important;
  box-shadow: none;
}
#menu-left > .card-body-top > .card.cardclear:has(.easepick-wrapper) > .search-container,
[data-theme='dark'] #menu-left > .card-body-top > .card.cardclear:has(.easepick-wrapper) > .search-container {
  padding: 0 0 0.75rem;
  background-color: transparent;
}
#menu-left > .card-body-top > .card.cardclear:has(.easepick-wrapper) > .hr-calendar {
  display: none;
}

/* elenco ospiti: righe pulite e contatori a pillola */
.dropdown-persone-item {
  border-bottom-color: var(--sh-border) !important;
}
.nome-tipipersona {
  font-weight: 500;
}
/* riepilogo laterale: piu respiro tra un tipo persona e l'altro */
/* leftSummary.css azzera il padding con !important e un selettore lungo:
   la classe ripetuta alza la specificita quanto basta per prevalere */
:is(#menu-left, #lista-strutture-left) .search-input-field > ul.dropdown-persone > a.dropdown-persone-item.dropdown-persone-item.dropdown-ospite-item {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}
:is(#menu-left, #lista-strutture-left) .search-input-field > ul.dropdown-persone > a.dropdown-persone-item + a.dropdown-persone-item {
  box-shadow: inset 0 1px 0 var(--sh-border);
}
/* dropdown*.css forza lo sfondo bianco con !important anche nel tema scuro */
.input-wrapper *,
[data-theme='dark'] .input-wrapper *,
[data-theme='dark'] .persone-counter > * {
  background-color: var(--sh-card) !important;
  color: var(--sh-foreground) !important;
}
.input-wrapper button:hover {
  background-color: var(--sh-accent) !important;
}
.input-wrapper button {
  font-weight: 600;
}
.input-wrapper button:first-child {
  border-radius: 999px 0 0 999px !important;
}
.input-wrapper button:last-child {
  border-radius: 0 999px 999px 0 !important;
}
.input-wrapper input {
  font-weight: 600;
}

/* pulsanti aggiungi / aggiorna tipologia */
.button-aggiungi-tipologia,
.card-button {
  border-radius: var(--sh-radius) !important;
  font-weight: 600;
}

/* ---- 16.4 Card delle strutture ----------------------------------------- */
.right-view-card-struttura > .card-body > .card.card-struttura,
.right-view-card-struttura > .card-body > .card.cardclear {
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  background-color: var(--sh-card);
  transition: var(--sh-transition);
}
.right-view-card-struttura > .card-body > .card.card-struttura:hover,
.right-view-card-struttura > .card-body > .card.cardclear:hover {
  border-color: var(--sh-primary-border);
  box-shadow: var(--sh-shadow-md);
}
/* vecchio separatore tra le strutture (<hr> in fondo alla card): con le
   card a riquadro faceva una riga doppia sul bordo inferiore */
.right-view-card-struttura > .card-body > .card > hr {
  display: none;
}
.card-struttura-foto.card,
[data-theme='dark'] .card-struttura-foto.card {
  border-color: transparent;
  background-color: transparent !important;
  box-shadow: none;
}
.card-struttura-foto-immagine,
.card-struttura-foto-immagine-small {
  border-radius: var(--sh-radius) !important;
}
.titolo-struttura-label {
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* disponibilita come badge */
.titolo-struttura-offerta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--sh-info) 12%, transparent);
  color: var(--sh-info);
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
  /* distacco dal bordo destro della card; lo spazio dal titolo e il gap
     della riga (sotto) */
  flex: 0 0 auto;
  margin: 0 0.75rem 0 0;
}
/* riga del titolo: se nome + badge non stanno su una riga, il badge va a
   capo sotto il nome invece di essere tagliato */
.card-struttura-info > .titolo-struttura {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
}
.card-struttura-info > .titolo-struttura > .titolo-struttura-label {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
/* foto piu alta (e blocco informazioni allineato); su mobile il layout e
   impilato e usa le misure di step.css */
@media (min-width: 601px) {
  .card-struttura-foto:not(.card-struttura-foto-servizi):not([style*='height']) {
    height: 240px;
  }
  .card-struttura-foto:not(.card-struttura-foto-servizi):not([style*='height']) > .card-body-struttura-foto {
    max-height: 238px;
  }
  .card-struttura-info:not(.card-servizi-info):not([style*='width']) {
    height: 240px;
  }
}
.titolo-struttura-offerta.titolo-struttura-disponibilita {
  background-color: color-mix(in srgb, var(--sh-destructive) 11%, transparent);
  color: var(--sh-destructive);
}
/* numero di persone: riga a se con un po' di respiro sopra e sotto */
.card-struttura-info .descrizione-struttura > .icone-struttura {
  display: block;
  margin: 0.5rem 0 0.375rem;
  line-height: 1.2;
}
/* "A partire da": subito sotto le icone dei servizi invece che ancorato
   al fondo della card (info.css / step.css lo posizionano in assoluto) */
.card-struttura-info .descrizione-struttura > .prezzo-minimo-struttura:not(.prezzo-minimo-servizi) {
  position: static;
  width: auto;
  margin-top: 0.625rem;
  overflow: visible;
}
/* segnaposto del prezzo durante il caricamento: un solo rettangolo, staccato
   dal bordo destro */
.card-struttura-info .descrizione-struttura > .prezzo-minimo-struttura.placeholder {
  display: block;
  width: min(220px, 60%);
  min-height: 1.25rem;
}
.card-struttura-info .descrizione-struttura > .prezzo-minimo-struttura.placeholder > .placeholder {
  display: none;
}
.prezzo-minimo-struttura {
  color: var(--sh-muted-foreground);
}
.prezzo-minimo-struttura .prezzo-struttura {
  color: var(--sh-foreground);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.servizi-struttura-icona {
  opacity: 0.8;
}

/* Dettagli e Visualizza tariffe: pulsanti secondari */
.btn.btn-dettaglio-show,
.btn.btn-visualizza-tariffe:not(.btn-add-servizio) {
  --bs-btn-color: var(--sh-foreground);
  --bs-btn-bg: var(--sh-card);
  --bs-btn-border-color: var(--sh-input);
  --bs-btn-hover-color: var(--sh-foreground);
  --bs-btn-hover-bg: var(--sh-accent);
  --bs-btn-hover-border-color: var(--sh-input);
  --bs-btn-active-color: var(--sh-foreground);
  --bs-btn-active-bg: var(--sh-accent);
  --bs-btn-active-border-color: var(--sh-input);
  font-weight: 500;
}
[data-theme='dark'] .btn.btn-dettaglio-show,
[data-theme='dark'] .btn.btn-visualizza-tariffe:not(.btn-add-servizio) {
  --bs-btn-color: var(--sh-foreground) !important;
  --bs-btn-bg: var(--sh-subtle) !important;
  --bs-btn-border-color: var(--sh-input) !important;
  --bs-btn-hover-color: var(--sh-foreground) !important;
  --bs-btn-hover-bg: var(--sh-accent) !important;
  --bs-btn-hover-border-color: var(--sh-input) !important;
  --bs-btn-active-color: var(--sh-foreground) !important;
  --bs-btn-active-bg: var(--sh-accent) !important;
  --bs-btn-active-border-color: var(--sh-input) !important;
}

/* ---- 16.5 Tariffe (rateList.css) --------------------------------------- */
.dettaglio-listino-struttura {
  display: flow-root;
  margin: 0.625rem 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  background-color: var(--sh-subtle);
  transition: var(--sh-transition);
}
.dettaglio-listino-struttura:hover {
  border-color: var(--sh-primary-border);
  background-color: var(--sh-primary-softer);
}
.dettaglio-visualizza-tariffe-inside > hr {
  display: none;
}
.dettaglio-listino-struttura-titolo {
  margin-left: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dettaglio-listino-struttura-dettagli {
  margin-left: 0;
  color: var(--sh-muted-foreground);
  text-align: left;
  line-height: 1.45;
}
.dettaglio-listino-struttura-condizioni,
.dettaglio-listino-struttura-prezzi-giornalieri {
  margin-left: 0;
  margin-right: 1rem;
  color: var(--sh-primary);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 3px;
}
.dettaglio-listino-struttura-condizioni:hover,
.dettaglio-listino-struttura-prezzi-giornalieri:hover {
  text-decoration: underline;
}
.dettaglio-listino-struttura-prezzo {
  text-align: right;
}
.dettaglio-listino-struttura-prezzo-testo {
  color: var(--sh-muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dettaglio-listino-struttura-prezzo-vecchio {
  color: var(--sh-destructive);
  font-size: 0.8125rem;
  font-weight: 500;
}
.dettaglio-listino-struttura-prezzo-nuovo {
  margin-top: 0;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}
.dettaglio-listino-struttura-prezzo-totale {
  margin-top: 0;
  color: var(--sh-muted-foreground);
  font-size: 0.8125rem;
}
.btn.dettaglio-listino-struttura-bottone {
  padding: 0.4rem 1.1rem;
  font-weight: 600;
  box-shadow: var(--sh-shadow-sm);
}

/* ==========================================================================
   17. RIDISEGNO: STEP 3, ESITO DEL PAGAMENTO, HOME
   ========================================================================== */

/* ---- 17.1 Step 3: ogni sezione e una card separata --------------------- */
#accordionPagamento > .accordion-item {
  margin-bottom: 0.875rem;
  border: 1px solid var(--sh-border) !important;
  border-radius: var(--sh-radius-lg) !important;
  background-color: var(--sh-card);
  box-shadow: var(--sh-shadow-xs);
  overflow: hidden;
}
#accordionPagamento > .accordion-item:last-child {
  margin-bottom: 0;
}
#accordionPagamento .accordion-button,
#accordionPagamento .accordion-button:not(.collapsed) {
  padding: 1rem 1.25rem;
  background-color: var(--sh-card) !important;
  color: var(--sh-foreground);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: none;
}
#accordionPagamento .accordion-button:not(.collapsed) {
  box-shadow: inset 0 -1px 0 var(--sh-border);
}
#accordionPagamento .accordion-button:hover {
  background-color: var(--sh-subtle) !important;
}
#accordionPagamento .accordion-body {
  background-color: var(--sh-card);
}

/* metodi di pagamento come tessere selezionabili */
.modalita-pagamento > hr {
  display: none;
}
.modalita-pagamento > .form-check {
  display: flow-root;
  position: relative;
  margin-bottom: 0.75rem;
  padding: 1rem 1rem 1rem 3rem;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  background-color: var(--sh-card);
  cursor: pointer;
  transition: var(--sh-transition);
}
.modalita-pagamento > .form-check:first-child {
  margin-bottom: 0.75rem;
}
.modalita-pagamento > .form-check:hover {
  border-color: var(--sh-primary-border);
  background-color: var(--sh-subtle);
}
.modalita-pagamento > .form-check:has(.form-check-input:checked) {
  border-color: var(--sh-primary);
  background-color: var(--sh-primary-softer);
  box-shadow: 0 0 0 3px var(--sh-primary-soft);
}
.modalita-pagamento > .form-check > .form-check-input {
  margin-left: -2rem;
  margin-top: 0.35rem;
  cursor: pointer;
}
.modalita-pagamento > .form-check > .form-check-label {
  width: 100%;
  cursor: pointer;
}
.modalita-pagamento .pagamento-right {
  color: var(--sh-muted-foreground);
  font-weight: 500;
  line-height: 1.5;
}
.titolo-pagamento > .testo {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* campi dei dati ospite */
.form-floating > .form-control,
.form-floating > .form-select {
  border-radius: var(--sh-radius);
}
.form-floating > label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: var(--sh-muted-foreground);
}
/* Bootstrap disegna dietro l'etichetta un rettangolo col colore della
   pagina: nel tema scuro (campi piu chiari della pagina) si vedeva come
   una macchia */
.form-floating > label::after,
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-select ~ label::after {
  background-color: transparent !important;
}
/* freccia degli accordion visibile anche nel tema scuro */
[data-theme='dark'] .accordion-button::after {
  filter: invert(1) brightness(1.4);
}
/* riepilogo del metodo scelto (es. Bonifico Bancario / Totale) */
#pricePagaDefault,
.imgPagaDefault {
  color: var(--sh-foreground);
}
.pricePagaDefault-totale {
  color: var(--sh-muted-foreground);
}
/* riga del totale nel riepilogo */
tfoot,
[data-theme='dark'] tfoot {
  background-color: var(--sh-muted);
}

/* ---- 17.2 Esito del pagamento: card centrale ---------------------------- */
.pagamento-confermato > .pagamento-confermato-block {
  max-width: 780px;
  margin: 0 auto 3rem;
  padding: 2.5rem 2rem 1.5rem;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-xl);
  background-color: var(--sh-card);
  box-shadow: var(--sh-shadow-md);
}
.pagamento-confermato > .pagamento-confermato-block .pagamento-confermato-sottotitolo {
  width: min(560px, 100%);
}
.pagamento-confermato-titolo-immagine > img {
  filter: drop-shadow(0 6px 14px rgb(24 39 32 / 0.12));
}

/* ---- 17.3 Home: pannello di ricerca ------------------------------------ */
/* le misure della barra sono variabili (custom-theme-size.css): le
   ridefiniamo per un pannello piu alto e arioso, con angoli morbidi */
@media (min-width: 1001px) {
  :root {
    --search-bar-height: 52px;
    --search-bar-border-width: 6px;
    --search-bar-outer-border-radius: 18px;
    --search-bar-inner-border-radius: 12px;
  }
}
.search-container:has(> .search-button),
[data-theme='dark'] .search-container:has(> .search-button) {
  background-color: var(--sh-card);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sh-border) 70%, transparent), 0 28px 56px -20px rgb(10 20 15 / 0.45), 0 8px 18px -8px rgb(10 20 15 / 0.2);
}
.search-container:has(> .search-button) > .search-input-field {
  border-radius: var(--search-bar-inner-border-radius) !important;
  background-color: transparent;
  transition: var(--sh-transition);
}
.search-container:has(> .search-button) > .search-input-field:hover {
  background-color: var(--sh-muted);
}
.search-container:has(> .search-button) > hr {
  width: 1px;
  background-color: var(--sh-border);
}
.search-container:has(> .search-button) .search-input,
.search-container:has(> .search-button) .search-input::placeholder,
.search-container:has(> .search-button) #nome-bottone-persone,
.search-container:has(> .search-button) #nome-bottone-tipologia-0 {
  color: var(--sh-foreground);
  font-size: 15px;
  font-weight: 500;
}
.search-container:has(> .search-button) .label-checkout {
  color: var(--sh-muted-foreground);
}
.search-container:has(> .search-button) .search-input,
.search-container:has(> .search-button) .search-input:hover,
.search-container:has(> .search-button) .search-input:active,
.search-container:has(> .search-button) .btn.show {
  border-radius: var(--search-bar-inner-border-radius) !important;
  background-color: transparent !important;
}
.search-container:has(> .search-button) .bi-calendar,
.search-container:has(> .search-button) .tipologia-dropdown-arrow {
  color: var(--sh-primary);
}
.search-container:has(> .search-button) > .search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: var(--search-bar-inner-border-radius) !important;
  background-color: var(--sh-primary);
  color: var(--sh-primary-foreground);
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--sh-shadow-sm);
}
.search-container:has(> .search-button) > .search-button:hover {
  background-color: color-mix(in srgb, var(--sh-primary) 88%, #000);
  filter: none;
}
.carousel-img {
  filter: saturate(1.05) brightness(0.86);
}

/* menu "Persone": pannello piu largo, righe ordinate, contatori tondi */
@media (min-width: 1001px) {
  #dropdown-persone.dropdown-persone-tipipersona.active,
  .custom-dropdown .dropdown-menu.dropdown-persone-tipipersona.active {
    top: calc(var(--search-bar-height) + 10px);
    width: 320px;
  }
}
.custom-dropdown .dropdown-menu.dropdown-persone-tipipersona.active,
.dropdown-persone-tipipersona.show {
  padding: 6px;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  background-color: var(--sh-popover);
  box-shadow: var(--sh-shadow-lg);
}
.dropdown-persone-tipipersona > .dropdown-item-tipipersona,
[data-theme='dark'] #dropdown-persone > .dropdown-item-tipipersona {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 52px;
  padding: 0.5rem 0.625rem;
  border: 0 !important;
  border-radius: var(--sh-radius) !important;
  background-color: transparent;
  color: var(--sh-foreground);
  white-space: normal;
}
.dropdown-persone-tipipersona > .dropdown-item-tipipersona + .dropdown-item-tipipersona {
  box-shadow: inset 0 1px 0 var(--sh-border);
}
.dropdown-persone-tipipersona > .dropdown-item-tipipersona:hover,
.dropdown-persone-tipipersona > .dropdown-item-tipipersona:active {
  background-color: var(--sh-subtle);
}
.dropdown-persone-tipipersona .nome-tipipersona {
  flex: 1 1 auto;
  width: auto;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}
.dropdown-persone-tipipersona .input-wrapper {
  position: static;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: auto;
  height: auto;
  margin: 0;
}
.dropdown-persone-tipipersona .input-wrapper > button,
.dropdown-persone-tipipersona .input-wrapper > button:first-child,
.dropdown-persone-tipipersona .input-wrapper > button:last-child {
  position: static;
  width: 32px;
  max-width: none;
  height: 32px;
  padding: 0;
  border: 1px solid var(--sh-input) !important;
  border-radius: 999px !important;
  background-color: var(--sh-card) !important;
  color: var(--sh-foreground) !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.dropdown-persone-tipipersona .input-wrapper > button:hover {
  border-color: var(--sh-primary) !important;
  background-color: var(--sh-primary-softer) !important;
  color: var(--sh-primary) !important;
}
.dropdown-persone-tipipersona .input-wrapper > input,
[data-theme='dark'] .dropdown-persone-tipipersona .input-wrapper > input {
  position: static;
  /* spazio per 2 cifre, centrate tra - e +: dropdown1.css aggiunge
     margin-left 24px e search1.css (sotto i 1000px) width 100% !important */
  flex: none;
  width: 2.25rem !important;
  max-width: none !important;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  background-color: transparent !important;
  color: var(--sh-foreground) !important;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ==========================================================================
   18. ANIMAZIONI
   Solo opacita e "translate"/"scale" (proprieta separate da transform, che
   alcuni elementi usano per il posizionamento). Niente trasformazioni sulle
   card che contengono i modali Bootstrap. Tutto disattivato con
   "riduci movimento".
   ========================================================================== */
@keyframes sh-fade-up {
  from {
    opacity: 0;
    translate: 0 10px;
  }
  to {
    opacity: 1;
    translate: none;
  }
}
@keyframes sh-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes sh-pop {
  0% {
    opacity: 0;
    scale: 0.6;
  }
  60% {
    opacity: 1;
    scale: 1.08;
  }
  100% {
    opacity: 1;
    scale: none;
  }
}
@keyframes sh-ring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sh-primary) 45%, transparent);
  }
  100% {
    box-shadow: 0 0 0 10px transparent;
  }
}
@keyframes sh-grow-x {
  from {
    scale: 0 1;
  }
  to {
    scale: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    --sh-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* entrata delle superfici principali, a cascata */
  /* solo elementi presenti all'apertura della pagina: i contenuti che il
     booking inserisce o sostituisce via JS (card delle strutture, tariffe,
     badge) non si animano, altrimenti a ogni sostituzione dell'HTML
     l'animazione ripartirebbe e la lista sfarfallerebbe */
  .step-page > .right-view-arrows,
  .left-summary-card,
  .pagamento-confermato > .pagamento-confermato-block,
  .pay-stripe-background,
  .pay-bancasella-background {
    animation: sh-fade-up 0.5s var(--sh-ease-out) backwards;
  }
  .left-summary-card {
    animation-delay: 0.06s;
  }

  /* stepper: il passo corrente "respira" una volta, le linee si riempiono */
  .sh-stepper-item.is-current .sh-stepper-dot {
    animation: sh-ring 1.4s ease-out 0.4s 2;
  }
  .sh-stepper-item.is-done + .sh-stepper-item::before {
    transform-origin: left center;
    animation: sh-grow-x 0.5s var(--sh-ease-out) 0.2s backwards;
  }
  .sh-stepper-item.is-done .sh-stepper-dot .bi {
    display: inline-block;
    animation: sh-pop 0.4s var(--sh-ease-out) backwards;
  }

  /* tessere delle date */
  #menu-left .date-label-calendar,
  #menu-left #numero-notti {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }

  /* pulsanti: leggera pressione */
  .btn,
  .search-button,
  .button-aggiungi-tipologia,
  .input-wrapper button {
    transition: var(--sh-transition), scale 0.12s ease;
  }
  .btn:active,
  .search-button:active,
  .input-wrapper button:active {
    scale: 0.97;
  }

  /* foto delle strutture: zoom morbido al passaggio */
  .card-struttura-foto .card-body-struttura-foto {
    overflow: hidden;
    border-radius: var(--sh-radius);
  }
  .card-struttura-foto-immagine {
    transition: scale 0.5s var(--sh-ease-out), filter 0.3s ease;
  }
  .card-struttura:hover .card-struttura-foto-immagine {
    scale: 1.04;
  }

  /* metodo di pagamento selezionato */
  .modalita-pagamento > .form-check:has(.form-check-input:checked) .form-check-input {
    animation: sh-pop 0.3s var(--sh-ease-out);
  }

  /* modali: entrata dal basso con leggero zoom (Bootstrap anima gia l'opacita) */
  .modal.fade .modal-dialog {
    transition: transform 0.3s var(--sh-ease-out), scale 0.3s var(--sh-ease-out);
    scale: 0.97;
  }
  .modal.show .modal-dialog {
    scale: none;
  }

  /* menu a tendina e popover: dissolvenza (Popper usa transform per posizionarli) */
  .dropdown-menu.show,
  .popover.show {
    animation: sh-fade-in 0.15s ease backwards;
  }

  /* esito del pagamento: icona che compare con un piccolo rimbalzo */
  .pagamento-confermato-titolo-immagine > img {
    animation: sh-pop 0.6s var(--sh-ease-out) 0.25s backwards;
  }

  /* home: la barra di ricerca entra dal basso */
  .search-container:has(> .search-button) {
    animation: sh-fade-up 0.6s var(--sh-ease-out) 0.15s backwards;
  }

  /* interruttori privacy / newsletter */
  label[for='privacy']:after,
  label[for='terms-conditions']:after,
  label[for='newsletters']:after {
    transition-timing-function: var(--sh-ease-out);
  }
}

/* ==========================================================================
   19. FOOTER COMPATTO
   Stesso markup di src/cmp/base/footer.cfm (logica e id invariati: gli id
   dei loghi servono al cambio tema), impaginato come un footer moderno:
   marchio e lingue a sinistra, colonne compatte a destra, barra legale
   sottile in fondo.
   ========================================================================== */
:root {
  --footer-bottom-height: 52px;
  /* altezza indicativa del footer: la home la sottrae all'altezza del carosello */
  --footer-top-height: 220px;
}

.navbar-footer {
  box-shadow: none;
}
.navbar-footer-top,
[data-theme='dark'] .navbar-footer-top {
  min-height: 0;
  padding: 0;
  border-top: 1px solid var(--sh-border);
  background-color: var(--sh-card) !important;
}
.navbar-footer-top > .container-fluid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem 3rem;
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 1.5rem;
}

/* marchio e lingue */
.navbar-footer-top .logo-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
  margin: 0;
}
.navbar-footer-top .logo-footer .navbar-brand {
  margin: 0;
  padding: 0;
}
.navbar-footer-top .logo-footer img {
  height: 44px;
  width: auto;
}
.navbar-footer-top .logo-footer > br {
  display: none;
}
.navbar-footer-top .lingue-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  min-width: 0;
  margin: 0;
  text-align: left;
}
.navbar-footer-top .lingue-footer > a {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--sh-border);
  border-radius: 6px;
  line-height: 0;
  transition: var(--sh-transition);
}
.navbar-footer-top .lingue-footer > a:hover {
  border-color: var(--sh-primary-border);
  background-color: var(--sh-primary-softer);
}
.navbar-footer-top .lingue-footer .icone-footer-cc {
  width: 22px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
}
.navbar-footer-top .icone-footer-hover:hover {
  opacity: 1;
}

/* colonne */
.navbar-footer-top > .container-fluid > .d-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
}
.navbar-footer-top > .container-fluid > .d-flex > p {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
}
.navbar-footer-top > .container-fluid > .d-flex > p:last-child {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
}

/* titoli di colonna: piccoli, maiuscoletto grigio */
.navbar-footer-top .testo-footer-titolo,
[data-theme='dark'] .navbar-footer-top .testo-footer-titolo {
  min-width: 0;
  margin: 0;
  color: var(--sh-muted-foreground);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.navbar-footer-top .testo-footer-titolo > svg,
.navbar-footer-top .testo-footer-titolo > i {
  display: none;
}
/* seconda colonna dei contatti allineata alla prima (che ha il titolo sopra);
   classe doppia: la regola generale .contatti-footer viene dopo */
.navbar-footer-top .contatti-footer.contatti-footer-right {
  margin-top: calc(0.6875rem * 1.5 + 0.625rem);
}

/* metodi di pagamento: piccoli badge */
.navbar-footer-top .icone-footer-cc-div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  width: auto;
  max-width: 360px;
  min-width: 0;
  margin: 0.625rem 0 0;
  line-height: 0;
}
.navbar-footer-top .icone-footer-cc-div > .icone-footer-cc {
  height: 24px !important;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--sh-border);
}

/* social: pulsanti tondi */
.navbar-footer-top .icone-footer-social-div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  width: auto;
  max-width: 360px;
  min-width: 0;
  margin: 0.625rem 0 0;
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.navbar-footer-top .icone-footer-social-div > a,
[data-theme='dark'] .navbar-footer-top .icone-footer-social-div > a {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--sh-border);
  border-radius: 999px;
  color: var(--sh-muted-foreground);
  font-size: 0.8125rem;
  transition: var(--sh-transition);
}
.navbar-footer-top .icone-footer-social-div > a:hover,
[data-theme='dark'] .navbar-footer-top .icone-footer-social-div > a:hover {
  border-color: var(--sh-primary-border);
  background-color: var(--sh-primary-softer);
  color: var(--sh-primary);
}
.navbar-footer-top .fa-tripadvisor,
[data-theme='dark'] .navbar-footer-top .fa-tripadvisor {
  position: static;
  width: 18px;
  height: 14px;
  margin: 0;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* contatti: elenco compatto con icone nel colore del campeggio */
.navbar-footer-top .contatti-footer {
  width: auto;
  min-width: 0;
  max-width: 260px;
  margin: 0.625rem 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
}
/* ogni contatto: tessera con l'icona a sinistra (Bootstrap Icons al tratto,
   tutte della stessa misura), testo accanto; l'indirizzo va su due righe
   con la tessera centrata su entrambe */
.navbar-footer-top .contatti-footer > a,
[data-theme='dark'] .navbar-footer-top .contatti-footer > a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  column-gap: 0.625rem;
  margin-bottom: 0.5rem;
  color: var(--sh-foreground);
  font-weight: 400;
  line-height: 1.4;
  transition: var(--sh-transition);
}
.navbar-footer-top .contatti-footer > a:hover,
[data-theme='dark'] .navbar-footer-top .contatti-footer > a:hover {
  color: var(--sh-primary);
}
.navbar-footer-top .contatti-footer > a > svg,
.navbar-footer-top .contatti-footer > a > i {
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 1px solid var(--sh-primary-border);
  border-radius: var(--sh-radius);
  background-color: var(--sh-primary-softer);
  color: var(--sh-primary);
  font-size: 0.875rem;
  line-height: 1;
  transition: var(--sh-transition);
}
.navbar-footer-top .contatti-footer > a:hover > i,
.navbar-footer-top .contatti-footer > a:hover > svg {
  border-color: var(--sh-primary);
  background-color: var(--sh-primary);
  color: var(--sh-primary-foreground);
}
[data-theme='dark'] .navbar-footer-top .contatti-footer > a > i {
  color: color-mix(in srgb, var(--sh-primary) 45%, var(--sh-foreground));
}
[data-theme='dark'] .navbar-footer-top .contatti-footer > a:hover > i {
  color: var(--sh-primary-foreground);
}
.navbar-footer-top .contatti-footer-l2 {
  display: block;
  grid-column: 2;
  padding-left: 0;
  color: var(--sh-muted-foreground);
}

/* barra legale */
.navbar-footer-bottom,
[data-theme='dark'] .navbar-footer-bottom {
  min-height: var(--footer-bottom-height);
  padding: 0;
  border-top: 1px solid var(--sh-border);
  background-color: var(--sh-subtle) !important;
  color: var(--sh-muted-foreground) !important;
  /* stesso font dei titoli: la barra legale diventa una "firma" del sito */
  font-family: var(--sh-font-display);
}
.navbar-footer-bottom > .container-fluid {
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  gap: 0.75rem 2rem;
}
.navbar-footer-bottom .copyright-dacos {
  display: inline;
  margin-left: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.navbar-footer-bottom .copyright-dacos + .copyright-dacos::before {
  content: '\00B7';
  margin: 0 0.5rem;
}
.navbar-footer-bottom > .container-fluid > div:first-child {
  padding-left: 56px; /* spazio per il pulsante dei cookie */
}
.navbar-footer-bottom .crediti-footer {
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-left: 0;
}
.navbar-footer-bottom .credito-footer {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}
.navbar-footer-bottom .credito-footer-etichetta {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.navbar-footer-bottom .credito-footer-logo {
  width: 84px;
}
.navbar-footer-bottom .credito-footer-logo-gruppo {
  width: 120px;
}
[data-theme='dark'] .navbar-footer-bottom .credito-footer-logo {
  filter: brightness(0) invert(1) opacity(0.75);
}

@media (max-width: 760px) {
  .navbar-footer-top > .container-fluid,
  .navbar-footer-top > .container-fluid > .d-flex {
    flex-direction: column;
    gap: 1.75rem;
    text-align: left;
  }
  .navbar-footer-top .contatti-footer.contatti-footer-right {
    margin-top: 0;
  }
  /* sotto i 560px footer.css forza display:block e il gap non vale */
  .navbar-footer-top > .container-fluid > .d-flex > p + p {
    margin-top: 1.75rem;
  }
  .navbar-footer-bottom > .container-fluid > div:first-child {
    padding-left: 0;
  }
  .navbar-footer-bottom > .container-fluid {
    padding-bottom: 4.5rem; /* il pulsante dei cookie e fisso in basso a sinistra */
  }
}

/* ==========================================================================
   20. MODALI (Dettagli struttura, Termini e condizioni) E CARICAMENTO
   details.css, terms.css e gli stili in linea di src/pgs/step1.cfm.
   Markup e JavaScript invariati.
   ========================================================================== */

/* ---- 20.1 Modali: struttura comune ------------------------------------- */
.modal.show {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal-backdrop.show {
  opacity: 0.45;
}
.modal-content,
[data-theme='dark'] .modal-content {
  border: 0;
  border-radius: var(--sh-radius-xl);
  background-color: var(--sh-card);
  box-shadow: 0 0 0 1px var(--sh-border), 0 30px 60px -20px rgb(10 20 15 / 0.35);
  overflow: hidden;
}
.modal-header,
[data-theme='dark'] .modal-header {
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.5rem;
  border-bottom: 1px solid var(--sh-border);
  background-color: var(--sh-card);
}
.modal-footer,
[data-theme='dark'] .modal-footer {
  padding: 0.875rem 1.5rem;
  border-top: 1px solid var(--sh-border);
  background-color: var(--sh-subtle);
}
.modale-dettaglio-struttura-titolo,
.modale-termini-struttura-titolo,
[data-theme='dark'] .modale-dettaglio-struttura-titolo {
  margin: 0;
  color: var(--sh-foreground);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-align: left;
}
.modal-header > .btn-close,
.modale-dettaglio-struttura-chiudi,
.modale-termini-struttura-chiudi {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin: 0 !important;
  padding: 0;
  border-radius: 999px;
  background-color: var(--sh-muted);
  background-size: 0.75rem;
  opacity: 0.8;
}
.modal-header > .btn-close:hover {
  opacity: 1;
  background-color: var(--sh-accent);
}
[data-theme='dark'] .modal-header > button.btn-close {
  filter: invert(1) grayscale(1) brightness(1.7);
  background-color: #cfd6d3;
}
.modal-footer > .btn,
[data-theme='dark'] .modal-footer > .btn {
  --bs-btn-color: var(--sh-foreground) !important;
  --bs-btn-bg: var(--sh-card) !important;
  --bs-btn-border-color: var(--sh-input) !important;
  --bs-btn-hover-color: var(--sh-foreground) !important;
  --bs-btn-hover-bg: var(--sh-accent) !important;
  --bs-btn-hover-border-color: var(--sh-input) !important;
  --bs-btn-active-color: var(--sh-foreground) !important;
  --bs-btn-active-bg: var(--sh-accent) !important;
  --bs-btn-active-border-color: var(--sh-input) !important;
  padding: 0.45rem 1.1rem;
  font-weight: 500;
}

/* ---- 20.2 Dettagli della struttura ------------------------------------- */
.modale-dettaglio-struttura-div {
  display: none;
}
.modale-dettaglio-struttura-carousel {
  padding: 1.5rem 1.5rem 0.5rem;
}
.modale-dettaglio-struttura-carousel > .carousel {
  max-width: 100%;
  margin: 0 auto;
}
.modale-dettaglio-struttura-carousel .carousel-inner,
[data-theme='dark'] .modale-dettaglio-struttura-carousel .carousel-inner {
  border: 0;
  border-radius: var(--sh-radius-lg);
  box-shadow: 0 0 0 1px var(--sh-border);
}
.modale-dettaglio-struttura-carousel .carousel-control-prev,
.modale-dettaglio-struttura-carousel .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 999px;
  background-color: rgb(255 255 255 / 0.9);
  box-shadow: var(--sh-shadow-md);
  opacity: 1;
  translate: 0 -50%;
  transition: var(--sh-transition);
}
.modale-dettaglio-struttura-carousel .carousel-control-prev {
  left: 12px;
}
.modale-dettaglio-struttura-carousel .carousel-control-next {
  right: 12px;
}
.modale-dettaglio-struttura-carousel .carousel-control-prev:hover,
.modale-dettaglio-struttura-carousel .carousel-control-next:hover {
  background-color: #fff;
}
.modale-dettaglio-struttura-carousel .carousel-control-prev-icon,
.modale-dettaglio-struttura-carousel .carousel-control-next-icon {
  width: 1rem;
  height: 1rem;
  filter: invert(1) brightness(0.25);
}
.modale-dettaglio-struttura-carousel .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  margin: 0 4px;
  border: 0;
  border-radius: 999px;
  opacity: 0.55;
}
.modale-dettaglio-struttura-carousel .carousel-indicators .active {
  width: 20px;
  opacity: 1;
}

/* sezioni: titoletto grigio maiuscolo, contenuto leggibile */
.modal-body.modale-dettaglio-struttura-servizi-inclusi,
.modal-body.modale-dettaglio-struttura-servizi-obbligatori,
.modal-body.modale-dettaglio-struttura-testo1,
.modal-body.modale-dettaglio-struttura-testo {
  padding: 1rem 1.5rem;
  text-align: left;
}
.modal-body.modale-dettaglio-struttura-testo {
  padding-bottom: 1.75rem;
}
.modale-dettaglio-struttura-servizi-inclusi-titolo,
.modale-dettaglio-struttura-descrizione-titolo,
.modal-body.modale-dettaglio-struttura-servizi-obbligatori {
  color: var(--sh-muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}
.modale-dettaglio-struttura-descrizione-titolo,
.modale-dettaglio-struttura-servizi-inclusi-titolo {
  margin-bottom: 0.625rem;
}
/* titoli delle sezioni: stesso font dei titoli delle offerte, in tono
   normale invece del maiuscoletto grigio. "Supplementi" e testo diretto del
   modal-body: la tabella torna al sans piu sotto */
.modale-dettaglio-struttura-descrizione-titolo,
.modale-dettaglio-struttura-servizi-inclusi-titolo,
.modal-body.modale-dettaglio-struttura-servizi-obbligatori {
  margin-bottom: 0.5rem;
  color: var(--sh-foreground);
  font-family: var(--sh-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}
/* separatore leggero tra descrizione e caratteristiche */
.modal-body.modale-dettaglio-struttura-testo1 + .modal-body.modale-dettaglio-struttura-testo {
  margin: 0 1.5rem;
  padding-right: 0;
  padding-left: 0;
  border-top: 1px solid var(--sh-border);
}
.modale-dettaglio-struttura-descrizione {
  display: block;
  margin: 0;
  color: color-mix(in srgb, var(--sh-foreground) 82%, var(--sh-muted-foreground));
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  text-wrap: pretty;
}
/* paragrafi dell'editor: spaziatura compatta e regolare */
.modale-dettaglio-struttura-descrizione :is(p, ul, ol) {
  margin: 0 0 0.5rem;
}
.modale-dettaglio-struttura-descrizione > :last-child {
  margin-bottom: 0;
}
.modale-dettaglio-struttura-descrizione :is(strong, b) {
  color: var(--sh-foreground);
  font-weight: 600;
}
.modale-dettaglio-struttura-descrizione :is(ul, ol) {
  padding-left: 1.25rem;
}

/* servizi inclusi come chip */
.modal-body .servizi-struttura.modale-dettaglio-struttura-servizi-inclusi,
.modale-dettaglio-struttura-servizi-inclusi-icone {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
}
.modale-dettaglio-struttura-servizi-inclusi-icone-single {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background-color: var(--sh-muted);
  color: var(--sh-foreground);
  font-weight: 500;
}

/* supplementi: tabella chiara al posto di table-dark */
.table.modale-dettaglio-struttura-servizi-obbligatori-table {
  --bs-table-bg: var(--sh-card);
  --bs-table-color: var(--sh-foreground);
  --bs-table-striped-bg: var(--sh-subtle);
  --bs-table-striped-color: var(--sh-foreground);
  --bs-table-border-color: var(--sh-border);
  margin: 0.625rem 0 0;
  border: 1px solid var(--sh-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--sh-radius-lg);
  overflow: hidden;
  font-family: var(--sh-font-sans);
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
}
.table.modale-dettaglio-struttura-servizi-obbligatori-table > thead,
[data-theme='dark'] .table.modale-dettaglio-struttura-servizi-obbligatori-table > thead {
  background-color: var(--sh-muted);
}
.table.modale-dettaglio-struttura-servizi-obbligatori-table > thead th {
  background-color: var(--sh-muted);
  color: var(--sh-muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---- 20.3 Termini e condizioni ----------------------------------------- */
.modal-dialog:has(.modale-termini-struttura-titolo) {
  max-width: 660px;
}
.modale-termini-struttura-testo {
  max-height: calc(100vh - 230px);
  padding: 1.25rem 1.5rem 1.5rem;
  overflow-y: auto;
  color: var(--sh-foreground);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.65;
  text-align: left;
}
.modale-termini-struttura-testo ul,
.modale-termini-struttura-testo ol {
  padding-left: 1.25rem;
}
.modale-termini-struttura-testo li {
  margin-bottom: 0.375rem;
}
.modale-termini-struttura-testo li::marker {
  color: var(--sh-primary);
}

/* ---- 20.4 Caricamento delle tipologie ---------------------------------- */
/* niente libro animato: frase, barra sottile e schede "scheletro" */
div:has(> .book) {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.75rem;
}
div:has(> .book) > .book {
  display: none;
}
div:has(> .book) > .loader-text,
[data-theme='dark'] div:has(> .book) > .loader-text {
  order: 1;
  margin: 0.25rem 0 0;
  color: var(--sh-foreground);
  font-size: 0.9375rem;
  font-weight: 500;
}
div:has(> .book) > .loader {
  order: 2;
  width: 100%;
  margin: 0.875rem 0 0;
}
div:has(> .book) > .loader > .fake-loader-container {
  width: min(420px, 70%);
  margin: 0 auto;
}
.fake-loader-container,
[data-theme='dark'] .fake-loader-container {
  height: 6px;
  overflow: visible;
  border-radius: 999px;
  background: var(--sh-muted);
}
.fake-loader-progress-bar,
[data-theme='dark'] .fake-loader-progress-bar {
  border-radius: 999px;
  background-color: var(--sh-primary);
}
.fake-loader-progress-bar {
  transition: width 0.4s ease;
}
/* niente strisce animate (a 6px di altezza diventavano puntini che scorrono) */
.fake-loader-progress-bar.fake-loader-active,
[data-theme='dark'] .fake-loader-progress-bar.fake-loader-active {
  background-image: none;
  animation: none;
}
/* il libro animato e nascosto: fermiamo anche le sue animazioni */
div:has(> .book) > .book,
div:has(> .book) > .book * {
  animation: none !important;
}
.fake-loader-progress-indicator {
  top: 12px;
  margin-top: 0;
  color: var(--sh-muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
}
/* schede "scheletro": entrambe dopo frase e barra. Il booking imposta
   display:block in linea sul contenitore, quindi non si puo contare
   sull'ordine flex: la prima e disegnata dentro il blocco della barra
   (.loader::after), la seconda subito dopo (contenitore::after) */
div:has(> .book) > .loader::after,
div:has(> .book)::after {
  content: '';
  display: block;
  height: 150px;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  background:
    linear-gradient(var(--sh-muted), var(--sh-muted)) 16px 16px / 190px 118px no-repeat,
    linear-gradient(var(--sh-muted), var(--sh-muted)) 226px 20px / 34% 20px no-repeat,
    linear-gradient(var(--sh-muted), var(--sh-muted)) 226px 54px / 52% 11px no-repeat,
    linear-gradient(var(--sh-muted), var(--sh-muted)) 226px 72px / 46% 11px no-repeat,
    linear-gradient(var(--sh-muted), var(--sh-muted)) 226px 90px / 28% 11px no-repeat,
    linear-gradient(var(--sh-muted), var(--sh-muted)) right 16px bottom 16px / 130px 32px no-repeat,
    var(--sh-card);
}
div:has(> .book) > .loader::after {
  margin-top: 2.25rem;
}
div:has(> .book)::after {
  order: 3;
  margin-top: 0.875rem;
}
/* date alternative non selezionabili: grigio neutro invece del beige */
.data-alternativa-struttura-disabled {
  background-color: var(--sh-muted-foreground) !important;
}
@keyframes sh-pulse {
  50% {
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: no-preference) {
  div:has(> .book) > .loader::after,
  div:has(> .book)::after {
    animation: sh-pulse 1.6s ease-in-out infinite;
  }
  div:has(> .book)::after {
    animation-delay: 0.2s;
  }
}

/* ==========================================================================
   21. MENU TIPOLOGIE, POPOVER, RIEPILOGO DELLO STEP 2
   ========================================================================== */

/* ---- 21.1 Menu delle tipologie (select nativo) ------------------------- */
/* riepilogo laterale: campo con bordo, testo a sinistra, freccia centrata */
.search-container-tipologia .search-input-field-struttura {
  position: relative;
}
.search-container-tipologia select.nome-bottone-tipologia,
[data-theme='dark'] .search-container-tipologia select.nome-bottone-tipologia {
  width: 100%;
  height: 40px !important;
  padding: 0 2.25rem 0 0.75rem !important;
  border: 1px solid var(--sh-input) !important;
  border-radius: var(--sh-radius) !important;
  background-color: var(--sh-card) !important;
  color: var(--sh-foreground) !important;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 38px;
  text-align: left;
  box-shadow: var(--sh-shadow-xs);
  cursor: pointer;
}
.search-container-tipologia select.nome-bottone-tipologia:hover {
  border-color: var(--sh-primary-border) !important;
}
.search-container-tipologia select.nome-bottone-tipologia:focus-visible {
  border-color: var(--sh-primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--sh-ring);
}
.search-container-tipologia .search-input-field-struttura > .tipologia-dropdown-arrow {
  top: 50%;
  right: 12px;
  left: auto;
  height: auto;
  margin: 0;
  color: var(--sh-muted-foreground);
  line-height: 0;
  translate: 0 -50%;
  z-index: 3;
  pointer-events: none;
}

/* elenco aperto: dove il browser lo consente (appearance: base-select,
   Chrome/Edge 135+) diventa un pannello come i menu del tema; altrove
   resta l'elenco nativo con i colori del tema */
select.nome-bottone-tipologia option,
select.nome-bottone-tipologia optgroup {
  background-color: var(--sh-popover);
  color: var(--sh-foreground);
}
@supports (appearance: base-select) {
  select.nome-bottone-tipologia,
  select.nome-bottone-tipologia::picker(select) {
    appearance: base-select;
  }
  select.nome-bottone-tipologia::picker-icon {
    display: none;
  }
  /* classe ripetuta: ".custom-dropdown .dropdown-link" (dropdown*.css) impone
     inline-block, che con base-select porta il testo in alto. inline-flex
     (non flex) lascia la freccia assoluta sulla stessa riga del select */
  select.nome-bottone-tipologia.nome-bottone-tipologia {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
  }
  /* barra della home: testo centrato, con spazio a destra per la freccia */
  .search-container:has(> .search-button) select.nome-bottone-tipologia.nome-bottone-tipologia {
    justify-content: center;
    padding-right: 34px !important;
    padding-left: 12px !important;
  }
  /* le opzioni sono .dropdown-item: azzeriamo bordi e margini ereditati */
  /* step1.css impone sfondo e colore chiari con !important */
  select.nome-bottone-tipologia > option.dropdown-item {
    background-color: transparent !important;
    color: var(--sh-foreground) !important;
  }
  select.nome-bottone-tipologia > option.dropdown-item:hover,
  select.nome-bottone-tipologia > option.dropdown-item:focus-visible {
    background-color: var(--sh-accent) !important;
  }
  select.nome-bottone-tipologia > option.dropdown-item:checked {
    background-color: var(--sh-primary-soft) !important;
  }
  select.nome-bottone-tipologia > option.dropdown-item-gruppo,
  select.nome-bottone-tipologia > option.dropdown-item-nessuna {
    color: var(--sh-muted-foreground) !important;
  }
  select.nome-bottone-tipologia option.dropdown-item {
    justify-content: flex-start;
    min-height: 40px;
    margin: 0 0 4px !important;
    border: 0 !important;
    text-align: left;
    white-space: pre;
  }
  select.nome-bottone-tipologia option.dropdown-item-gruppo {
    min-height: 0;
    margin: 0.75rem 0 2px !important;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border-top: 1px solid var(--sh-border) !important;
    border-radius: 0;
    padding-top: 0.75rem;
    color: var(--sh-muted-foreground);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  select.nome-bottone-tipologia option.dropdown-item-nessuna {
    color: var(--sh-muted-foreground);
    font-style: italic;
  }
  select.nome-bottone-tipologia::picker(select) {
    min-width: anchor-size(width);
    max-height: min(420px, 70vh);
    margin-top: 6px;
    padding: 6px;
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-lg);
    background-color: var(--sh-popover);
    color: var(--sh-foreground);
    box-shadow: var(--sh-shadow-lg);
  }
  select.nome-bottone-tipologia optgroup {
    padding: 0;
    color: var(--sh-muted-foreground);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  select.nome-bottone-tipologia optgroup::before,
  select.nome-bottone-tipologia optgroup > legend {
    padding: 0.625rem 0.625rem 0.25rem;
  }
  select.nome-bottone-tipologia option {
    padding: 0.625rem 0.75rem;
    border-radius: var(--sh-radius-sm);
    background-color: transparent;
    color: var(--sh-foreground);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
  }
  select.nome-bottone-tipologia option:hover,
  select.nome-bottone-tipologia option:focus-visible {
    background-color: var(--sh-accent);
    outline: none;
  }
  select.nome-bottone-tipologia option:checked {
    background-color: var(--sh-primary-soft);
    color: var(--sh-foreground);
    font-weight: 600;
  }
  select.nome-bottone-tipologia option::checkmark {
    order: 1;
    margin-left: auto;
    color: var(--sh-primary);
  }
}

/* ---- 21.2 Popover informativo (offerte, avvisi) ------------------------ */
/* intestazione piena nel colore del campeggio, corpo chiaro */
.popover {
  --bs-popover-max-width: 320px;
  --bs-popover-border-color: var(--sh-primary);
  --bs-popover-border-radius: var(--sh-radius-lg);
  --bs-popover-inner-border-radius: calc(var(--sh-radius-lg) - 1px);
  --bs-popover-header-bg: var(--sh-primary);
  --bs-popover-header-color: var(--sh-primary-foreground);
  --bs-popover-header-padding-x: 1rem;
  --bs-popover-header-padding-y: 0.75rem;
  --bs-popover-body-color: var(--sh-foreground);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: 0.875rem;
  --bs-popover-bg: var(--sh-popover);
  --bs-popover-arrow-border: var(--sh-primary);
  border: 1px solid var(--sh-primary);
  box-shadow: 0 20px 44px -14px rgb(10 20 15 / 0.35);
}
.popover .popover-header {
  position: relative;
  margin: 0;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border-bottom: 0;
  background-color: var(--sh-primary);
  color: var(--sh-primary-foreground);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
}
.popover .popover-header::after {
  /* ::before e gia usato da Bootstrap per raccordare la freccetta */
  content: '\F430';
  position: absolute;
  top: 0.8rem;
  left: 1rem;
  color: var(--sh-primary-foreground);
  font-family: 'bootstrap-icons' !important;
  font-size: 1rem;
  font-weight: 400 !important;
  line-height: 1;
}
.popover .popover-header:empty {
  display: none;
}
.popover .popover-body {
  color: var(--sh-foreground);
  font-size: 0.875rem;
  line-height: 1.55;
}
.popover .popover-body p {
  margin-bottom: 0.375rem;
}
.popover .popover-body p:last-child {
  margin-bottom: 0;
}
.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^='bottom'] > .popover-arrow::after {
  border-bottom-color: var(--sh-primary);
}

/* ==========================================================================
   22. RIEPILOGO LATERALE (step 1-2): stile "ricevuta"
   leftSummary.cfm: ogni blocco .card-stutture-counter e una card con
   intestazione, righe con separatori tratteggiati e totale evidenziato.
   ========================================================================== */
#menu-left .card-stutture-counter > .card,
[data-theme='dark'] #menu-left .card-stutture-counter > .card.cardclear {
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  background-color: var(--sh-card) !important;
  box-shadow: var(--sh-shadow-xs);
  overflow: hidden;
}
/* intestazione del blocco (nome della tipologia o "Servizi Opzionali") */
#menu-left .card-stutture-counter .search-container-tipologia,
[data-theme='dark'] #menu-left .card-stutture-counter .search-container-tipologia {
  padding: 0.875rem 1rem;
  background-color: var(--sh-card);
}
#menu-left .card-stutture-counter .search-container-tipologia > .search-input-field {
  color: var(--sh-foreground);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: left;
}
#menu-left .card-stutture-counter .hr-tipologia {
  margin: 0;
  border-color: var(--sh-border);
  opacity: 1;
}
#menu-left .card-stutture-counter .search-container-bottom-tip {
  padding: 0.5rem 1rem 0.875rem;
}

/* righe: niente strisce, separatori tratteggiati, prezzi a destra */
#menu-left .search-container-bottom-tip > .table,
#menu-left .search-container-bottom-tip .table {
  --bs-table-striped-bg: transparent !important;
  --bs-table-bg: transparent;
  margin-bottom: 0;
  font-size: 0.875rem;
}
#menu-left .search-container-bottom-tip .table > tbody > tr > * {
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--sh-border);
  background-color: transparent;
  box-shadow: none;
}
#menu-left .search-container-bottom-tip .table th.table-price-title {
  color: var(--sh-muted-foreground) !important;
  font-weight: 500;
}
#menu-left .search-container-bottom-tip .table .table-quantity {
  color: var(--sh-muted-foreground) !important;
  font-size: 0.75rem;
  text-align: center;
}
#menu-left .search-container-bottom-tip .table .table-price {
  color: var(--sh-foreground) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
}
#menu-left .search-container-bottom-tip .table > tfoot,
[data-theme='dark'] #menu-left .search-container-bottom-tip .table > tfoot {
  background-color: transparent;
}
#menu-left .search-container-bottom-tip .table > tfoot > tr > * {
  padding: 0.625rem 0 0;
  border-top: 1px solid var(--sh-border);
  border-bottom: 0;
  background-color: transparent;
  box-shadow: none;
}
#menu-left .search-container-bottom-tip .table > tfoot th.table-price-title {
  color: var(--sh-foreground) !important;
  font-weight: 700;
}
#menu-left .search-container-bottom-tip .table > tfoot .table-price {
  font-weight: 700;
}
#menu-left .table-info-symbol > svg > path,
[data-theme='dark'] #menu-left .table-info-symbol > svg > path {
  fill: var(--sh-muted-foreground) !important;
}

/* nota "Tassa di soggiorno esclusa" */
#menu-left .div-tassa-soggiorno-esclusa:not(.hide) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: auto;
  margin: 0 1rem 0.875rem;
  padding: 0.4rem 0.625rem;
  border-radius: var(--sh-radius);
  background-color: var(--sh-subtle);
  color: var(--sh-muted-foreground) !important;
  font-size: 0.75rem;
  font-weight: 500;
}

/* totale complessivo: riquadro nel colore del campeggio */
#menu-left .card-stutture-counter > .card:not(.cardclear),
[data-theme='dark'] #menu-left .card-stutture-counter > .card:not(.cardclear) {
  border-color: var(--sh-primary-border);
  background-color: var(--sh-primary-softer) !important;
  box-shadow: none;
}
#menu-left .card-stutture-counter > .card:not(.cardclear) .search-container-bottom-tip {
  padding: 0.75rem 1rem;
}
#menu-left .card-stutture-counter > .card:not(.cardclear) .table > tfoot > tr > * {
  padding: 0;
  border-top: 0;
}
#menu-left .card-stutture-counter > .card:not(.cardclear) .table > tfoot th.table-price-title {
  font-size: 0.9375rem;
}
#menu-left .card-stutture-counter > .card:not(.cardclear) .table > tfoot .table-price {
  color: var(--sh-primary) !important;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
[data-theme='dark'] #menu-left .card-stutture-counter > .card:not(.cardclear) .table > tfoot .table-price {
  color: var(--sh-foreground) !important;
}

/* ==========================================================================
   23. STEP 3: CHECKOUT
   Colonna centrale, sezioni a card con icona (classi sh-sez-* aggiunte in
   src/pgs/step3/accordion_btn*.cfm), campi ariosi, riepilogo leggibile e
   pulsante di conferma in evidenza. Logica, id e campi invariati.
   ========================================================================== */

/* contenitore: niente card dentro la card, colonna centrale leggibile */
.full-view > .right-view-card:has(#accordionPagamento),
.full-view > .right-view-card:has(#accordionPagamento) > .card-body > .card {
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.full-view > .right-view-card:has(#accordionPagamento) > .card-body,
.full-view > .right-view-card:has(#accordionPagamento) > .card-body > .card > .card-body {
  padding-left: 0;
  padding-right: 0;
}
#accordionPagamento {
  max-width: 1000px;
  margin: 0 auto;
}

/* intestazioni delle sezioni con icona in un cerchio */
#accordionPagamento > .accordion-item > .accordion-header > .accordion-button {
  gap: 0.875rem;
  padding: 1.125rem 1.25rem;
  font-size: 1.0625rem;
  font-weight: 700;
}
#accordionPagamento > .accordion-item[class*='sh-sez-'] > .accordion-header > .accordion-button::before {
  /* il glifo (content) e definito sotto per ogni sezione */
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background-color: var(--sh-primary-soft);
  color: var(--sh-primary);
  font-family: 'bootstrap-icons';
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1;
}
#accordionPagamento > .sh-sez-dati > .accordion-header > .accordion-button::before { content: '\F4E1'; }
#accordionPagamento > .sh-sez-riepilogo > .accordion-header > .accordion-button::before { content: '\F50F'; }
#accordionPagamento > .sh-sez-note > .accordion-header > .accordion-button::before { content: '\F252'; }
#accordionPagamento > .sh-sez-condizioni > .accordion-header > .accordion-button::before { content: '\F52F'; }
#accordionPagamento > .sh-sez-coupon > .accordion-header > .accordion-button::before { content: '\F6CA'; }
#accordionPagamento > .sh-sez-pagamento > .accordion-header > .accordion-button::before { content: '\F2DC'; }
#accordionPagamento .accordion-body {
  padding: 1.25rem 1.25rem 1.5rem;
}

/* dati ospite */
#accordionPagamento .user-dashboard-sottotitolo {
  margin-bottom: 0.75rem;
  color: var(--sh-muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#accordionPagamento .form-floating > .form-control,
#accordionPagamento .form-floating > .form-select {
  height: 56px;
  min-height: 56px;
  border-color: var(--sh-input);
  background-color: var(--sh-card);
  font-size: 0.9375rem;
  font-weight: 500;
}
#accordionPagamento .form-floating > label {
  font-size: 0.8125rem;
}
#accordionPagamento .input-group-text {
  border-color: var(--sh-input);
  background-color: var(--sh-muted);
  color: var(--sh-muted-foreground);
  font-weight: 600;
}
#accordionPagamento .form-control.is-invalid,
#accordionPagamento .form-select.is-invalid {
  border-color: var(--sh-destructive);
  background-color: color-mix(in srgb, var(--sh-destructive) 4%, var(--sh-card));
}

/* riepilogo: tabella pulita senza strisce */
#accordionPagamento .sh-sez-riepilogo .table {
  --bs-table-striped-bg: transparent !important;
  --bs-table-bg: transparent;
  margin-bottom: 0;
  font-size: 0.9375rem;
}
#accordionPagamento .sh-sez-riepilogo .table > thead > tr > * {
  padding: 0 0.5rem 0.625rem;
  border-bottom: 1px solid var(--sh-border);
  color: var(--sh-muted-foreground) !important;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#accordionPagamento .sh-sez-riepilogo .table > tbody > tr > * {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px dashed var(--sh-border);
  background-color: transparent;
  box-shadow: none;
}
#accordionPagamento .sh-sez-riepilogo .table > tfoot,
[data-theme='dark'] #accordionPagamento .sh-sez-riepilogo .table > tfoot {
  background-color: transparent;
}
#accordionPagamento .sh-sez-riepilogo .table > tfoot > tr > * {
  padding: 0.875rem 0.5rem 0.25rem;
  border-top: 2px solid var(--sh-border);
  border-bottom: 0;
  background-color: transparent;
  box-shadow: none;
  font-size: 1.0625rem;
  font-weight: 700;
}
#accordionPagamento .sh-sez-riepilogo .table > tfoot > tr > *:last-child {
  color: var(--sh-primary) !important;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
[data-theme='dark'] #accordionPagamento .sh-sez-riepilogo .table > tfoot > tr > *:last-child {
  color: var(--sh-foreground) !important;
}

/* righe del riepilogo: risorsa principale in evidenza, dettagli in grigio */
#accordionPagamento .sh-sez-riepilogo .table > thead > tr > th:last-child,
#accordionPagamento .sh-sez-riepilogo .table > tbody > tr > td:last-child,
#accordionPagamento .sh-sez-riepilogo .table > tfoot > tr > td:last-child {
  text-align: right;
  white-space: nowrap;
}
#accordionPagamento .sh-sez-riepilogo .table > tbody > tr {
  transition: background-color 0.15s ease;
}
#accordionPagamento .sh-sez-riepilogo .table > tbody > tr:hover > * {
  background-color: var(--sh-subtle);
}
#accordionPagamento .sh-sez-riepilogo .table > tbody > tr > th {
  color: var(--sh-foreground) !important;
  font-weight: 500;
}
#accordionPagamento .sh-sez-riepilogo .table > tbody > tr:first-child > th {
  font-weight: 700;
}
#accordionPagamento .sh-sez-riepilogo .table > tbody > tr > td:nth-child(2),
#accordionPagamento .sh-sez-riepilogo .table > tbody > tr > td:nth-child(3) {
  color: var(--sh-muted-foreground) !important;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#accordionPagamento .sh-sez-riepilogo .table > tbody > tr > td:last-child {
  color: var(--sh-foreground) !important;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#accordionPagamento .sh-sez-riepilogo .table > tbody > tr > td:last-child > svg {
  margin-right: 0.25rem;
  color: var(--sh-muted-foreground);
}
#accordionPagamento .sh-sez-riepilogo .prezzo-senza-offerta {
  white-space: nowrap;
  text-align: right;
}
#accordionPagamento .sh-sez-riepilogo .prezzo-senza-offerta > img {
  width: 18px;
  height: 18px;
  margin-right: 0.25rem;
}
#accordionPagamento .sh-sez-riepilogo .prezzo-senza-offerta > span {
  color: var(--sh-muted-foreground) !important;
  font-size: 0.8125rem;
  text-decoration: line-through;
  text-decoration-color: var(--sh-destructive);
}

/* note */
#accordionPagamento .sh-sez-note .textarea {
  min-height: 110px;
  padding: 0.75rem 0.875rem;
}

/* condizioni: righe allineate */
#accordionPagamento .sh-sez-condizioni .accordion-body {
  display: grid;
  gap: 0.75rem;
}
#accordionPagamento .sh-sez-condizioni a {
  color: var(--sh-foreground);
  font-weight: 600;
  text-decoration-color: var(--sh-primary-border);
  text-underline-offset: 3px;
}
#accordionPagamento .sh-sez-condizioni a:hover {
  color: var(--sh-primary);
}

/* codice sconto: una riga sola fuori dall'accordion (accordion_btn5):
   icona e titolo a sinistra, campo a destra; l'esito (server o JS) va in
   cima, a tutta larghezza, con order: -1 */
#accordionPagamento .sh-coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding: 0.875rem 1.25rem;
}
#accordionPagamento .sh-coupon-titolo {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0;
  color: var(--sh-foreground);
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
}
#accordionPagamento .sh-coupon-icona {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background-color: var(--sh-primary-soft);
  color: var(--sh-primary);
  font-size: 1.0625rem;
  line-height: 1;
}
#accordionPagamento .sh-coupon > .input-group.sh-coupon-campo {
  flex: 0 1 340px;
  width: auto;
  max-width: 100%;
  margin: 0;
}
#accordionPagamento .sh-coupon-campo .form-control {
  height: 44px;
}
#accordionPagamento .sh-coupon-campo .btn {
  padding: 0 1.25rem;
  font-weight: 600;
}
#accordionPagamento .sh-coupon > .alert.sh-avviso {
  order: -1;
  flex: 1 0 100%;
  max-width: none;
  margin: 0;
}
/* telefono: titolo sopra, campo a tutta larghezza */
@media (max-width: 560px) {
  #accordionPagamento .sh-coupon > .input-group.sh-coupon-campo {
    flex-basis: 100%;
  }
}

/* pagamento: titolo e totale allineati, tessere a tutta larghezza */
#accordionPagamento .titolo-pagamento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin-bottom: 0.5rem;
}
#accordionPagamento .titolo-pagamento > .testo {
  position: static;
  width: auto;
  margin: 0;
  font-size: 1.125rem;
  text-align: left;
}
#accordionPagamento .riepilogo-totale-pagamento {
  position: static;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--sh-primary-border);
  background-color: var(--sh-primary-softer);
}
#accordionPagamento .modalita-pagamento > .form-check {
  width: 100%;
}
#accordionPagamento .modalita-pagamento > .form-check:first-child {
  margin-top: 0.75rem;
}

/* metodo scelto e pulsante di conferma */
#div-bottone-pagamento {
  margin-top: 1.25rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  background-color: var(--sh-card);
  box-shadow: var(--sh-shadow-xs);
  text-align: center;
}
#div-bottone-pagamento:not(:has(.bottone-pagamento:not([style*='display: none']))):not(:has(#pricePagaDefault:not(:empty))) {
  display: none;
}
#div-bottone-pagamento .bottone-pagamento {
  width: min(420px, 100%) !important;
  max-width: none !important;
  min-height: 52px;
  margin: 1rem auto 0 !important;
  margin-left: auto !important;
  border-radius: var(--sh-radius-lg);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--sh-primary) 70%, transparent);
}
#div-bottone-pagamento .bottone-pagamento:hover {
  translate: 0 -1px;
}
#pricePagaDefault {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* conto alla rovescia: badge in alto a destra */
#timer-pagamento {
  border: 1px solid color-mix(in srgb, var(--sh-destructive) 30%, var(--sh-border));
}

/* tema scuro: loghi dei metodi di pagamento su piastrina chiara (molti sono
   blu scuro e sparirebbero sul fondo) */
[data-theme='dark'] #accordionPagamento .logo-pagamento-medium {
  padding: 4px 8px;
  border-radius: 8px;
  background-color: #f6f7f6;
}
[data-theme='dark'] #accordionPagamento .modalita-pagamento .icone-footer-cc {
  border-radius: 4px;
}

/* ==========================================================================
   24. TOOLTIP E PREZZI GIORNALIERI
   Tooltip di Bootstrap come piccoli pannelli del tema; il contenuto dei
   prezzi giornalieri (step1/components/table.cfm e tableSupplements*.cfm)
   da righe monospace flottanti a elenco con prezzi allineati.
   ========================================================================== */
.tooltip {
  --bs-tooltip-bg: var(--sh-popover);
  --bs-tooltip-color: var(--sh-foreground);
  --bs-tooltip-opacity: 1;
  --bs-tooltip-border-radius: var(--sh-radius-lg);
  --bs-tooltip-padding-x: 0.75rem;
  --bs-tooltip-padding-y: 0.5rem;
  --bs-tooltip-font-size: 0.8125rem;
}
.tooltip .tooltip-inner {
  border: 1px solid var(--sh-border);
  box-shadow: 0 16px 36px -12px rgb(10 20 15 / 0.3), 0 2px 6px -2px rgb(10 20 15 / 0.1);
  font-weight: 500;
}
.tooltip.show {
  opacity: 1;
}

/* pannello dei prezzi giornalieri */
.tooltip .tooltip-inner:has(.prezzi-giornalieri-tabella) {
  padding: 0.75rem 0.875rem 0.625rem;
  text-align: left;
}
.tooltip .div-prezzi-giornalieri {
  min-width: 200px;
  margin: 0;
}
.prezzi-giornalieri-titolo,
.tooltip .prezzi-giornalieri-titolo {
  margin: 0 0 0.375rem;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--sh-border);
  background-color: transparent;
  box-shadow: none;
  color: var(--sh-foreground);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: left;
}
.prezzi-giornalieri-riga {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  height: auto;
  padding: 0.3rem 0.375rem;
  border-radius: var(--sh-radius-sm);
}
.prezzi-giornalieri-riga:nth-of-type(even) {
  background-color: var(--sh-subtle);
}
.prezzi-giornalieri-col-sx,
.prezzi-giornalieri-col-dx {
  float: none;
  margin: 0;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.prezzi-giornalieri-col-sx {
  color: var(--sh-muted-foreground);
  font-weight: 500;
  text-transform: capitalize;
}
.prezzi-giornalieri-col-dx {
  color: var(--sh-foreground);
  font-weight: 600;
}
.prezzi-giornalieri-div {
  margin: 0.375rem 0 0.5rem;
  border-color: var(--sh-border);
  opacity: 1;
}
.prezzi-giornalieri-totale {
  margin: 0;
  padding: 0 0.375rem;
  color: var(--sh-primary);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
}
[data-theme='dark'] .prezzi-giornalieri-totale {
  color: var(--sh-foreground);
}

/* ==========================================================================
   25. PULSANTI FLUTTUANTI: COOKIE E "TORNA SU"
   Coppia coordinata: tondi da 44px, fondo card, bordo sottile e ombra.
   ========================================================================== */
a#open_preferences_center,
.sh-torna-su {
  position: fixed;
  z-index: 99999;
  bottom: 16px;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--sh-border);
  border-radius: 999px;
  background-color: var(--sh-card);
  color: var(--sh-foreground);
  box-shadow: 0 8px 20px -8px rgb(10 20 15 / 0.35), 0 2px 4px -2px rgb(10 20 15 / 0.12);
  cursor: pointer;
  text-decoration: none;
  transition: var(--sh-transition), translate 0.15s ease;
}
a#open_preferences_center {
  left: 16px;
}
.sh-torna-su {
  right: 16px;
  font-size: 1.125rem;
  line-height: 1;
}
a#open_preferences_center > img {
  width: 20px;
  height: 20px;
  margin: 0;
}
a#open_preferences_center:hover,
.sh-torna-su:hover {
  border-color: var(--sh-primary-border);
  background-color: var(--sh-primary-softer);
  color: var(--sh-primary);
  translate: 0 -2px;
}
a#open_preferences_center:focus-visible,
.sh-torna-su:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sh-ring), 0 8px 20px -8px rgb(10 20 15 / 0.35);
}

/* ==========================================================================
   26. OFFERTE NEL RIEPILOGO LATERALE
   ========================================================================== */
/* titolo nel font dei titoli, con un filo di spaziatura: i nomi delle
   offerte arrivano spesso in maiuscolo dal gestionale */
.left-summary-card .offerta-container .offerta-label {
  font-family: var(--sh-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--sh-primary);
  text-wrap: balance;
}
[data-theme='dark'] .left-summary-card .offerta-container .offerta-label {
  color: color-mix(in srgb, var(--sh-primary) 45%, var(--sh-foreground));
}
.left-summary-card .offerta-descrizione {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--sh-muted-foreground);
  text-wrap: pretty;
}
/* seconda descrizione: sconto e validita, in evidenza */
.left-summary-card .offerta-descrizione + .offerta-descrizione {
  margin-top: 0.375rem;
  color: var(--sh-foreground);
  font-weight: 600;
}

/* ==========================================================================
   27. TIPOGRAFIA DELLE CARD STRUTTURA E DELLE TARIFFE (step 1)
   ========================================================================== */
/* nomi di struttura e tariffa nel font dei titoli; classe ripetuta per
   superare le regole delle sezioni precedenti */
.titolo-struttura .titolo-struttura-label.titolo-struttura-label {
  font-family: var(--sh-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.dettaglio-listino-struttura .dettaglio-listino-struttura-titolo.dettaglio-listino-struttura-titolo {
  font-family: var(--sh-font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* descrizioni: peso normale e tono piu morbido, cosi i titoli emergono */
.descrizione-struttura .descrizione-struttura-label.descrizione-struttura-label,
.dettaglio-listino-struttura .dettaglio-listino-struttura-dettagli.dettaglio-listino-struttura-dettagli {
  font-weight: 400;
  line-height: 1.55;
  color: color-mix(in srgb, var(--sh-foreground) 72%, var(--sh-muted-foreground));
  text-wrap: pretty;
}
/* descrizione della card: info.css la chiude in 54px, cioe 3 righe
   all'interlinea normale; con l'interlinea qui sopra la terza riga veniva
   tagliata a meta. Altezza libera e numero di righe con line-clamp
   (step.css sotto i 1150px ne lascia una sola, con !important) */
.descrizione-struttura .descrizione-struttura-label.descrizione-struttura-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  height: auto !important;
  max-height: none;
  overflow: hidden;
}
/* l'editor del gestionale giustifica il testo: in colonne strette crea
   spazi enormi tra le parole */
.dettaglio-listino-struttura .dettaglio-listino-struttura-dettagli *,
.descrizione-struttura .descrizione-struttura-label * {
  text-align: left !important;
}

/* ==========================================================================
   28. STEP 2: SERVIZI A GRIGLIA DI SCHEDE
   ========================================================================== */
/* il contenitore diventa una griglia: le schede dei servizi si affiancano
   (due per riga su desktop, una su telefono); intestazione della tipologia,
   "nessun servizio" e pulsante Prosegui occupano tutta la riga */
#right-card-search:has(> .right-view-card-servizi) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
  align-content: start;
}
#right-card-search:has(> .right-view-card-servizi) > :not(.right-view-card-servizi),
#right-card-search > .right-view-card-servizi:not(:has(.card-struttura-foto-servizi)) {
  grid-column: 1 / -1;
}
#right-card-search > .right-view-card-servizi:has(.card-struttura-foto-servizi) {
  width: auto;
  height: auto;
  margin: 0 !important;
  padding: 0;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  background-color: var(--sh-card);
  box-shadow: var(--sh-shadow-xs);
  overflow: visible;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
#right-card-search > .right-view-card-servizi:has(.card-struttura-foto-servizi):hover {
  border-color: var(--sh-primary-border);
  box-shadow: var(--sh-shadow-sm);
}
.right-view-card-servizi:has(.card-struttura-foto-servizi) > .card-body {
  height: 100%;
  padding: 0;
}
.right-view-card-servizi:has(.card-struttura-foto-servizi) > .card-body > .card,
[data-theme='dark'] .right-view-card-servizi:has(.card-struttura-foto-servizi) > .card-body > .card {
  height: 100%;
  margin: 0;
  border: 0;
  background-color: transparent;
  box-shadow: none;
}

/* scheda: icona e nome in alto, prezzo a destra, descrizione, comandi in fondo */
.right-view-card-servizi .card-body.card-body-servizi {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    'foto   titolo'
    'foto   desc'
    'prezzo prezzo'
    'ctrl   ctrl';
  column-gap: 0.875rem;
  row-gap: 0.25rem;
  height: 100%;
  min-height: 0;
  padding: 1rem;
}
.card-body-servizi > link {
  display: none;
}
.card-body-servizi > .card-struttura-foto.card-struttura-foto-servizi {
  grid-area: foto;
  position: static;
  width: 56px !important;
  height: 56px !important;
  margin: 0;
  border: 0;
  border-radius: var(--sh-radius);
  background-color: var(--sh-muted);
  box-shadow: none;
  overflow: hidden;
}
.card-body-servizi .card-body-struttura-foto.card-body-struttura-foto-servizi {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  max-height: none !important;
  padding: 0.5rem;
}
.card-body-servizi .card-struttura-foto-servizi .card-struttura-foto-immagine {
  position: static;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  translate: none;
}
.card-body-servizi > .card-struttura-info.card-struttura-info-servizi,
.card-body-servizi > .card-struttura-info-servizi > .descrizione-struttura {
  display: contents;
}
.card-struttura-info-servizi > .card-body.titolo-struttura {
  grid-area: titolo;
  align-self: center;
  position: static;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.card-struttura-info-servizi .titolo-struttura .titolo-struttura-label.titolo-struttura-label {
  display: inline;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-family: var(--sh-font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
.card-struttura-info-servizi .titolo-struttura .titolo-struttura-label.servizio-opzionale-id,
.card-struttura-info-servizi .titolo-struttura .titolo-struttura-label.servizio-opzionale-idxt {
  display: none !important;
}
.card-struttura-info-servizi .descrizione-struttura .descrizione-struttura-label {
  grid-area: desc;
  position: static;
  display: -webkit-box;
  /* step.css (<=1150px) la riduce a una riga alta 17px */
  height: auto !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: auto !important;
  margin: 0;
  color: var(--sh-muted-foreground);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-wrap: pretty;
}
.card-struttura-info-servizi .descrizione-struttura .prezzo-minimo-struttura.prezzo-minimo-servizi {
  grid-area: prezzo;
  justify-self: end;
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  position: static;
  margin: 0.625rem 0 0;
  color: var(--sh-muted-foreground);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.prezzo-minimo-servizi > .prezzo-struttura {
  display: inline;
  color: var(--sh-foreground);
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* comandi in fondo, separati da una linea: date su tutta la riga, poi
   quantita a sinistra e Aggiungi a destra */
.card-struttura-info-servizi .descrizione-struttura > .modifica-servizio {
  grid-area: ctrl;
  position: relative;
  /* step2.css lo sposta con top: 50px !important */
  inset: auto !important;
  /* step.css (<=1150px): width calc(100% + 100px) !important */
  width: auto !important;
  min-width: 0;
  margin-top: 0.625rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--sh-border);
}
/* delServizio() rimette display: block inline: !important lo batte, mentre
   display: none (servizio aggiunto) resta escluso dal selettore */
.card-struttura-info-servizi .descrizione-struttura > .modifica-servizio:not(.modifica-servizio-hide):not([style*='none']) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'data data data'
    'qty  .    btn';
  grid-template-rows: 36px 36px;
  align-items: center;
  row-gap: 0.625rem;
}
.modifica-servizio > .datepicker-servizi {
  grid-area: data;
  position: static;
  width: 100%;
  min-width: 0;
  height: 36px;
  margin: 0;
  padding: 0 2.25rem 0 0.75rem;
  border: 1px solid var(--sh-input);
  border-radius: var(--sh-radius);
  font-size: 0.875rem;
  cursor: pointer;
}
.modifica-servizio > .icon-calendar-big {
  grid-area: data;
  justify-self: end;
  position: static;
  float: none;
  margin: 0 0.75rem 0 0 !important;
  color: var(--sh-primary);
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}
.modifica-servizio > .input-wrapper.input-wrapper-servizi {
  grid-area: qty;
  position: static;
  margin: 0;
}
.modifica-servizio > .btn.btn-add-servizio,
.modifica-servizio-hide > .btn.btn {
  grid-area: btn;
  position: static;
  width: var(--sh-btn-servizio);
  height: 36px;
  margin: 0;
  padding: 0 0.5rem;
}
.card-struttura-info-servizi .descrizione-struttura > .modifica-servizio.modifica-servizio-hide {
  text-align: right;
}
.right-view-card-servizi {
  --sh-btn-servizio: 100px;
}

/* servizio aggiunto: bordo e fondo nel colore del campeggio, spunta sull'icona */
#right-card-search > .right-view-card-servizi:has(.modifica-servizio-hide[style*='block']) {
  border-color: var(--sh-primary);
  background-color: var(--sh-primary-softer);
  box-shadow: 0 0 0 1px var(--sh-primary);
}
.right-view-card-servizi:has(.modifica-servizio-hide[style*='block']) .card-struttura-foto-servizi {
  position: relative;
  overflow: visible;
}
.right-view-card-servizi:has(.modifica-servizio-hide[style*='block']) .card-struttura-foto-servizi::after {
  content: '\F26E';
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--sh-card);
  border-radius: 999px;
  background-color: var(--sh-primary);
  color: var(--sh-primary-foreground);
  font-family: 'bootstrap-icons';
  font-size: 12px;
  line-height: 1;
}

/* riepilogo laterale, "Servizi opzionali": finche non c'e nessun servizio
   si vede solo il testo (personServiziLocked.cfm), senza tabella ne totale;
   il JS dello step 2 continua ad aggiornare la tabella nascosta */
.sh-servizi-vuoto {
  margin: 0;
  padding: 0.125rem 0 0.25rem;
  color: color-mix(in srgb, var(--sh-primary) 65%, var(--sh-muted-foreground));
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 500;
}
.sh-servizi-vuoto:has(+ #table-servizi-opzionali > tbody > tr:not(#table-servizi-opzionali-last)) {
  display: none;
}
#table-servizi-opzionali:not(:has(> tbody > tr:not(#table-servizi-opzionali-last))) {
  display: none;
}

/* ---- 28.1 Riepilogo laterale: icone (i), tooltip delle date, supplementi */
/* (i) dei riepiloghi (Supplementi, servizi opzionali, tabella dello step 3):
   stessa misura ovunque, allineata al testo (personListLocked.cfm,
   step2.cfm, finalSummaryTable.cfm) */
.sh-info-icona.sh-info-icona {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin: 0 0 0 0.375rem;
  padding: 0;
  color: var(--sh-muted-foreground);
  font-size: 13px;
  line-height: 1;
  vertical-align: -0.125em;
}
svg.sh-info-icona path {
  fill: currentColor !important;
}
/* nella tabella dello step 3 la (i) sta prima del prezzo */
.sh-info-icona.sh-info-icona-prima {
  margin: 0 0.375rem 0 0;
}
:is(tr, td)[data-bs-toggle]:has(.sh-info-icona) {
  cursor: help;
}
:is(tr, td)[data-bs-toggle]:has(.sh-info-icona):hover .sh-info-icona {
  color: var(--sh-primary);
}
/* il totale dei servizi lasciava spazio per la vecchia colonna della (i) */
#table-servizi-opzionali-totale.table-price {
  padding-right: var(--sh-pad-prezzo, 0.5rem);
}

/* tooltip delle date di un servizio: icona calendario a sinistra (step2.cfm) */
.tooltip .sh-tooltip-date {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-align: left;
}
.tooltip .sh-tooltip-date > i {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--sh-radius);
  background-color: var(--sh-primary-soft);
  color: var(--sh-primary);
  font-size: 1rem;
  line-height: 1;
}
[data-theme='dark'] .tooltip .sh-tooltip-date > i {
  color: color-mix(in srgb, var(--sh-primary) 45%, var(--sh-foreground));
}
.tooltip .sh-tooltip-date > span {
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

/* pannelli dei prezzi giornalieri e dei supplementi: una sola linea sotto
   il titolo, nomi senza "Ogni Iniziale Maiuscola", totale su due colonne */
.tooltip:has(.prezzi-giornalieri-tabella) {
  --bs-tooltip-max-width: 320px;
}
.prezzi-giornalieri-titolo + .prezzi-giornalieri-div {
  display: none;
}
.prezzi-giornalieri-riga > .prezzi-giornalieri-col-sx {
  text-transform: none;
}
.prezzi-giornalieri-riga > .prezzi-giornalieri-col-sx::first-letter {
  text-transform: uppercase;
}
.prezzi-giornalieri-riga > .prezzi-giornalieri-col-dx {
  white-space: nowrap;
}
.prezzi-giornalieri-totale:has(> .prezzi-giornalieri-totale-etichetta) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}
.prezzi-giornalieri-totale-etichetta {
  color: var(--sh-muted-foreground);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   29. STEP 3: INTERRUTTORI E PREFISSO TELEFONICO
   ========================================================================== */
/* interruttori di privacy, termini e newsletter, rifatti da zero in stile
   shadcn (Switch): binario grigio da spento, colore del campeggio da acceso,
   pallino bianco con la spunta. La checkbox resta nel markup (gli script ne
   leggono .checked) ma da invisibile diventa solo nascosta alla vista,
   cosi si raggiunge anche con il tasto Tab */
.check-condizioni {
  gap: 0.75rem;
  font-weight: 500;
}
.check-condizioni > input[type='checkbox']:is(#privacy, #terms-conditions, #newsletters) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  visibility: visible;
  opacity: 0;
}
.check-condizioni > input[type='checkbox'] + label:is([for='privacy'], [for='terms-conditions'], [for='newsletters']) {
  position: relative;
  display: block;
  flex: none;
  width: 44px;
  height: 24px;
  margin: 0;
  border-radius: 999px;
  background: var(--sh-input);
  box-shadow: inset 0 1px 2px rgb(10 20 15 / 0.12);
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.check-condizioni > input[type='checkbox'] + label:is([for='privacy'], [for='terms-conditions'], [for='newsletters']):hover {
  background: color-mix(in srgb, var(--sh-input) 82%, var(--sh-foreground));
}
.check-condizioni > input[type='checkbox'] + label:is([for='privacy'], [for='terms-conditions'], [for='newsletters'])::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(10 20 15 / 0.25), 0 1px 1px rgb(10 20 15 / 0.08);
  color: var(--sh-primary);
  font-family: 'bootstrap-icons';
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  transform: none;
  translate: 0;
  transition: translate 0.25s var(--sh-ease-out, ease), width 0.15s ease;
}
/* acceso: binario nel colore del campeggio, pallino a destra con la spunta */
.check-condizioni > input[type='checkbox']:checked + label:is([for='privacy'], [for='terms-conditions'], [for='newsletters']) {
  background: var(--sh-primary);
  box-shadow: none;
}
.check-condizioni > input[type='checkbox']:checked + label:is([for='privacy'], [for='terms-conditions'], [for='newsletters']):hover {
  background: color-mix(in srgb, var(--sh-primary) 88%, #000);
}
.check-condizioni > input[type='checkbox']:checked + label:is([for='privacy'], [for='terms-conditions'], [for='newsletters'])::after {
  content: '\F26E';
  left: 3px;
  transform: none;
  translate: 20px 0;
}
/* pressione: il pallino si allunga un poco, come negli switch nativi */
.check-condizioni > input[type='checkbox'] + label:is([for='privacy'], [for='terms-conditions'], [for='newsletters']):active::after {
  width: 22px;
}
.check-condizioni > input[type='checkbox']:checked + label:is([for='privacy'], [for='terms-conditions'], [for='newsletters']):active::after {
  translate: 16px 0;
}
.check-condizioni > input[type='checkbox']:focus-visible + label:is([for='privacy'], [for='terms-conditions'], [for='newsletters']) {
  outline: none;
  box-shadow: 0 0 0 3px var(--sh-ring);
}
@media (prefers-reduced-motion: reduce) {
  .check-condizioni > input[type='checkbox'] + label:is([for='privacy'], [for='terms-conditions'], [for='newsletters'])::after {
    transition: none;
  }
}

/* (i) della newsletter (accordion_btn4_condizioniGenerali.cfm): dentro il
   testo, centrata sull'altezza delle minuscole; apre il popover delle offerte */
.check-condizioni .sh-info-newsletter {
  display: inline-block;
  margin-left: 0.375rem;
  border-radius: 999px;
  line-height: 0;
  vertical-align: -0.1em;
  cursor: help;
}
.check-condizioni .sh-info-newsletter > .sh-info-icona.sh-info-icona {
  display: block;
  margin: 0;
  vertical-align: 0;
}
.check-condizioni .sh-info-newsletter:hover > .sh-info-icona,
.check-condizioni .sh-info-newsletter:focus-visible > .sh-info-icona {
  color: var(--sh-primary);
}
.check-condizioni .sh-info-newsletter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sh-ring);
}

/* prefisso telefonico: "+" e prefisso centrati in verticale nel campo.
   Il prefisso non ha etichetta, quindi non serve lo spazio in alto dei
   campi form-floating che lo spingeva in basso insieme al "+" */
.form-floating.input-group > .input-group-text {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.9375rem;
  line-height: 1;
}
.form-floating.input-group > .form-control.col-mobile-prefix {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0.375rem !important;
}

/* ==========================================================================
   30. AVVISI (.sh-avviso): esito del codice sconto
   Stile Alert di shadcn: card chiara con un filo del colore dell'esito,
   icona in un cerchio, titolo e dettaglio su due righe, chiusura discreta.
   Markup in accordion_btn5_haiUnCodiceSconto.cfm e step3.cfm (codice vuoto).
   ========================================================================== */
.alert.sh-avviso {
  --sh-avviso: var(--sh-muted-foreground);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 420px;
  margin: 0.25rem auto 0;
  padding: 0.75rem 2.75rem 0.75rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--sh-avviso) 28%, var(--sh-border));
  border-radius: var(--sh-radius-lg);
  background-color: color-mix(in srgb, var(--sh-avviso) 6%, var(--sh-card));
  box-shadow: var(--sh-shadow-xs);
  color: var(--sh-foreground);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: left;
}
.alert.sh-avviso.alert-danger {
  --sh-avviso: var(--sh-destructive);
}
.alert.sh-avviso.alert-success {
  --sh-avviso: var(--sh-success);
}
.alert.sh-avviso.alert-warning {
  --sh-avviso: var(--sh-warning);
}
.sh-avviso > .sh-avviso-icona {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--sh-avviso) 14%, transparent);
  color: var(--sh-avviso);
  font-size: 1.125rem;
  line-height: 1;
}
.sh-avviso > .sh-avviso-testo {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.sh-avviso > .sh-avviso-testo > strong {
  color: color-mix(in srgb, var(--sh-avviso) 70%, var(--sh-foreground));
  font-weight: 600;
}
.sh-avviso > .sh-avviso-testo > span {
  color: var(--sh-muted-foreground);
  overflow-wrap: anywhere;
}
/* codice applicato, come un'etichetta */
.sh-avviso .sh-avviso-codice {
  display: inline-block;
  padding: 0.0625rem 0.4375rem;
  border: 1px dashed color-mix(in srgb, var(--sh-avviso) 45%, transparent);
  border-radius: var(--sh-radius-sm);
  background-color: var(--sh-card);
  color: var(--sh-foreground);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.alert.sh-avviso > .btn-close {
  top: 50%;
  right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  padding: 0.5rem;
  border-radius: var(--sh-radius-sm);
  background-size: 0.625rem;
  opacity: 0.45;
  translate: 0 -50%;
}
.alert.sh-avviso > .btn-close:hover {
  background-color: color-mix(in srgb, var(--sh-avviso) 12%, transparent);
  opacity: 0.8;
}
[data-theme='dark'] .alert.sh-avviso > .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ==========================================================================
   31. INTESTAZIONI DI BLOCCO: "Struttura N" (step 1) e "Servizi aggiuntivi"
   (step 2). Card esterna e card interna avevano ciascuna 16px di margine
   interno: ora c'e un solo livello, compatto, con un fondo verde appena
   accennato (step1/components/strBlock.cfm, step2/components/strBlock.cfm)
   ========================================================================== */
.right-view-card[id^='struttura-block-']:not(:has(> .struttura-block-card:not([style*='none']))),
.right-view-card:not(.right-view-arrows):has(> .card-body > .card > .card-body > .sezione-struttura > .ospiti-sezione-struttura:only-child) {
  height: auto;
  border-color: var(--sh-primary-border) !important;
  background-color: color-mix(in srgb, var(--sh-primary) 12%, var(--sh-card)) !important;
  box-shadow: none !important;
}
/* nella griglia dei servizi lo spazio lo da il gap: con il margine sotto
   e height: 100% (step.css) l'intestazione si allungava di 20px */
#right-card-search:has(> .right-view-card-servizi) > .right-view-card:not(.right-view-card-servizi) {
  margin-bottom: 0 !important;
}
.right-view-card[id^='struttura-block-']:not(:has(> .struttura-block-card:not([style*='none']))) > .card-body,
.right-view-card:not(.right-view-arrows):has(> .card-body > .card > .card-body > .sezione-struttura > .ospiti-sezione-struttura:only-child) > .card-body {
  padding: 0 !important;
}
.right-view-card[id^='struttura-block-']:not(:has(> .struttura-block-card:not([style*='none']))) > .card-body > .card,
.right-view-card:not(.right-view-arrows):has(> .card-body > .card > .card-body > .sezione-struttura > .ospiti-sezione-struttura:only-child) > .card-body > .card {
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* titoli nel font dei titoli, a misura di intestazione */
.right-view-card[id^='struttura-block-'] .titolo-sezione-struttura {
  font-family: var(--sh-font-display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.right-view-card:not(.right-view-arrows) .sezione-struttura > .ospiti-sezione-struttura:only-child {
  font-family: var(--sh-font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
/* elimina struttura: sul fondo verde serve un fondo proprio */
.right-view-card[id^='struttura-block-'] .lista-sezione-struttura-elimina {
  background-color: var(--sh-card);
}
/* struttura gia scelta: la card sotto il titolo aveva sopra un <br> e un
   margine interno, oltre a quello dell'intestazione (circa 56px di vuoto) */
.right-view-card[id^='struttura-block-'] > .struttura-block-card > .card-body {
  padding-top: 0;
}
.right-view-card[id^='struttura-block-'] > .struttura-block-card > .card-body > br:first-child {
  display: none;
}

/* ==========================================================================
   32. RICHIAMO SULLE CONDIZIONI DA ACCETTARE (.blinking-text)
   step3.cfm (e le pagine di pagamento) aggiungono .blinking-text per 3
   secondi se si prova a pagare senza accettare privacy o termini. Al posto
   del lampeggio rosso pieno di css_style.cfm: una scossa breve, un riquadro
   rosso chiaro attorno alla riga con due onde che si allargano, anello
   rosso sull'interruttore e testo in rosso.
   ========================================================================== */
.check-condizioni.blinking-text {
  position: relative;
  isolation: isolate;
  width: fit-content;
  animation: sh-richiamo-scossa 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.check-condizioni.blinking-text::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -0.375rem -0.625rem;
  border-radius: var(--sh-radius-lg);
  background-color: color-mix(in srgb, var(--sh-destructive) 8%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sh-destructive) 45%, transparent);
  pointer-events: none;
  animation: sh-richiamo-onda 1.2s ease-out 0.3s 2 both;
}
.check-condizioni.blinking-text > input[type='checkbox'] + label:is([for]) {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sh-destructive) 35%, transparent);
}
.check-condizioni.blinking-text > a,
.check-condizioni.blinking-text > span {
  color: var(--sh-destructive) !important;
  transition: color 0.2s ease;
}
@keyframes sh-richiamo-scossa {
  10%, 90% { translate: -1px 0; }
  20%, 80% { translate: 2px 0; }
  30%, 50%, 70% { translate: -4px 0; }
  40%, 60% { translate: 4px 0; }
}
@keyframes sh-richiamo-onda {
  0% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--sh-destructive) 45%, transparent),
      0 0 0 0 color-mix(in srgb, var(--sh-destructive) 30%, transparent);
  }
  100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--sh-destructive) 45%, transparent),
      0 0 0 10px transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .check-condizioni.blinking-text,
  .check-condizioni.blinking-text::before {
    animation: none;
  }
}

/* ==========================================================================
   33. ESITO DEL PAGAMENTO: BONIFICO E DETTAGLI DELLA PRENOTAZIONE
   pay/bonifico/conferma.cfm (dati bancari in card con copia) e, per la
   tabella dei dettagli, tutte le pagine di conferma che la usano
   ========================================================================== */
/* respiro sopra la card; dentro il booking c'e la barra fissa in alto, a
   cui pay.cfm riservava 60px: lo spazio si aggiunge a quello. Le pagine
   autonome (es. Worldline) non hanno la barra */
.pagamento-confermato {
  padding-top: 2rem;
}
.navbar-top ~ .pagamento-confermato {
  padding-top: calc(60px + 2rem);
}
.pagamento-confermato > .pagamento-confermato-block {
  padding: 2.25rem 2.25rem 1.75rem;
}
.pagamento-confermato-titolo-immagine > img {
  width: 112px;
  height: auto;
}
/* le icone di esito hanno tratti scuri: nel tema scuro un cerchio chiaro dietro */
[data-theme='dark'] .pagamento-confermato-titolo-immagine > img {
  padding: 14px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--sh-foreground) 90%, transparent);
}
.pagamento-confermato-titolo-testo {
  font-family: var(--sh-font-display);
}

/* dati bancari: card con righe etichetta / valore e pulsante di copia */
.sh-bonifico {
  width: min(560px, 100%);
  margin: 1.5rem auto 0;
  text-align: left;
}
.sh-bonifico-dati {
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  background-color: var(--sh-subtle);
  overflow: hidden;
}
.sh-bonifico-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.625rem 0.625rem 0.625rem 1rem;
}
.sh-bonifico-riga + .sh-bonifico-riga {
  border-top: 1px solid var(--sh-border);
}
.sh-bonifico-etichetta {
  color: var(--sh-muted-foreground);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sh-bonifico-valore {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  margin-left: auto;
}
.sh-bonifico-testo {
  color: var(--sh-foreground);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.sh-bonifico-testo b {
  font-weight: inherit;
}
.sh-bonifico .sh-copia {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--sh-radius);
  background: transparent;
  color: var(--sh-muted-foreground);
  font-size: 0.875rem;
  transition: var(--sh-transition);
}
.sh-bonifico .sh-copia:hover,
.sh-bonifico .sh-copia:focus-visible {
  border-color: var(--sh-border);
  background-color: var(--sh-card);
  color: var(--sh-foreground);
  outline: none;
}
.sh-bonifico .sh-copia.copiato {
  border-color: var(--sh-primary-border);
  background-color: var(--sh-primary-softer);
  color: var(--sh-primary);
}
/* avviso sulla validita della prenotazione */
.sh-bonifico-nota {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0.875rem 0 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--sh-warning) 30%, var(--sh-border));
  border-radius: var(--sh-radius-lg);
  background-color: color-mix(in srgb, var(--sh-warning) 7%, var(--sh-card));
  color: var(--sh-foreground);
  font-size: 0.875rem;
  line-height: 1.5;
}
.sh-bonifico-nota > i {
  flex: none;
  margin-top: 0.0625rem;
  color: var(--sh-warning);
  font-size: 1rem;
}

/* dettagli della prenotazione: da tabella a griglia a sei caselle in card */
.pagamento-confermato-dettagli-prenotazione {
  width: min(560px, 100%);
  margin: 2rem auto 0;
}
.pagamento-confermato-dettagli-prenotazione-titolo {
  display: block;
  margin: 0 0 0.75rem;
  font-family: var(--sh-font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: left;
}
/* css_style.cfm le stringe al 50% e mette le iniziali maiuscole */
.pagamento-confermato-dettagli-prenotazione-tabella {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--sh-border);
  border-radius: var(--sh-radius-lg);
  background-color: var(--sh-card);
  overflow: hidden;
  text-transform: none;
}
.pagamento-confermato-dettagli-prenotazione-tabella > .table {
  margin: 0 !important;
  border: 0;
  table-layout: fixed;
}
.pagamento-confermato-dettagli-prenotazione-tabella > .table > :not(caption) > * {
  border-width: 0;
}
.pagamento-confermato-dettagli-prenotazione-tabella > .table + .table {
  border-top: 1px dashed var(--sh-border);
}
.pagamento-confermato-dettagli-prenotazione-tabella > .table > :not(caption) > * > * {
  border: 0;
  background-color: transparent !important;
  box-shadow: none;
  text-align: left;
}
.pagamento-confermato-dettagli-prenotazione-tabella > .table th {
  padding: 0.875rem 1rem 0.125rem;
  color: var(--sh-muted-foreground);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pagamento-confermato-dettagli-prenotazione-tabella > .table td {
  padding: 0.125rem 1rem 0.875rem;
  color: var(--sh-foreground);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Worldline: i dati sono paragrafi "Etichetta: <b>valore</b>" */
.pagamento-confermato-dettagli-prenotazione-tabella > p {
  margin: 0;
  padding: 0.75rem 1rem;
  color: var(--sh-muted-foreground);
  font-size: 0.875rem;
  text-align: left;
}
.pagamento-confermato-dettagli-prenotazione-tabella > p + p {
  border-top: 1px dashed var(--sh-border);
}
.pagamento-confermato-dettagli-prenotazione-tabella > p b {
  color: var(--sh-foreground);
  font-weight: 600;
}
/* pagine di errore: ritorno alla home (bonifico/errore, generico/errore) */
.sh-esito-azioni {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}
.sh-esito-azioni > .btn {
  min-width: 200px;
  padding: 0.625rem 1.5rem;
  font-weight: 600;
}
/* stato ("opzionata", "confermata"...) con l'iniziale maiuscola */
.pagamento-confermato-dettagli-prenotazione-tabella > .table:last-child td:last-child::first-letter {
  text-transform: uppercase;
}
/* struttura e dati di accesso: righe compatte sotto la card */
.pagamento-confermato-dettagli-prenotazione-riassunto {
  display: block;
  width: 100%;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  text-align: left;
}
.pagamento-confermato-dettagli-prenotazione-tabella + .pagamento-confermato-dettagli-prenotazione-riassunto {
  margin-top: 0.875rem;
}
.pagamento-confermato-dettagli-prenotazione-riassunto-nome {
  font-style: normal;
}
.pagamento-confermato-dettagli-prenotazione-riassunto-nome a {
  color: var(--sh-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 560px) {
  .pagamento-confermato > .pagamento-confermato-block {
    padding: 1.75rem 1.25rem 1.25rem;
  }
  .pagamento-confermato-dettagli-prenotazione-tabella > .table th,
  .pagamento-confermato-dettagli-prenotazione-tabella > .table td {
    padding-right: 0.5rem;
    padding-left: 0.75rem;
  }
}

/* ==========================================================================
   34. FORM DI PAGAMENTO BANCA SELLA (src/pay/bancaSella.cfm)
   Il form e nostro (lo script di Banca Sella legge i campi per id): al posto
   di etichette centrate e campi a linea, un form come lo step 3. bancaSellaCSS
   usa id con larghezze fisse e altezze in pixel: servono !important.
   ========================================================================== */
.pay-bancasella-container {
  --sh-bs-larghezza: 440px;
  font-family: var(--sh-font-sans);
}
.pay-bancasella-container .pay-bancasella-background {
  width: min(var(--sh-bs-larghezza), calc(100vw - 2rem));
  max-height: none;
}
/* riepilogo in alto: nome, indirizzo e importo */
/* il logo del campeggio sporge sopra la card (margin-top negativo di
   bancaSellaCSS): niente margine interno in alto */
.pay-bancasella-container #pay-bancasella-pic-del {
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0 1.5rem 1.5rem;
}
.pay-bancasella-container .pay-bancasella-name {
  font-family: var(--sh-font-display);
  font-size: 1.25rem;
  font-weight: 700;
}
.pay-bancasella-container .pay-bancasella-url {
  margin-top: 0.125rem;
  font-family: var(--sh-font-sans);
  font-size: 0.8125rem;
}
.pay-bancasella-container .pay-bancasella-price {
  margin-top: 1rem;
  padding: 0;
  font-family: var(--sh-font-display);
}
.pay-bancasella-container .pay-bancasella-price-total {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  color: var(--sh-foreground);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pay-bancasella-container .pay-bancasella-price-euro {
  position: static;
  margin: 0;
  color: var(--sh-muted-foreground);
  font-size: 1.5rem;
  font-weight: 600;
}

/* campi: griglia con email, intestatario e numero a tutta larghezza,
   scadenza e CVV affiancati */
.pay-bancasella-container .pay-bancasella-background-id {
  margin-top: 1rem;
}
/* bancaSellaCSS tiene il contenitore alto almeno 450px (serve agli stati di
   caricamento e 3D Secure): col form lasciava un vuoto sopra il pulsante */
.pay-bancasella-container #pay-bancasella:has(> .pay-bancasella-background-id) {
  min-height: 0;
}
.pay-bancasella-container .pay-bancasella-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 0.75rem;
  padding: 1.5rem;
  text-align: left;
}
.pay-bancasella-container .pay-bancasella-row-single {
  grid-column: 1 / -1;
  height: auto !important;
  margin: 0 !important;
}
.pay-bancasella-container .pay-bancasella-row-single:has(#email) { grid-row: 1; }
.pay-bancasella-container .pay-bancasella-row-single:has(#card-holder) { grid-row: 2; }
.pay-bancasella-container .pay-bancasella-row-single:has(#card-number) { grid-row: 3; }
.pay-bancasella-container .pay-bancasella-row-single:has(#card-expiry) {
  grid-row: 4;
  grid-column: 1;
}
.pay-bancasella-container .pay-bancasella-row-single:has(#card-cvv) {
  grid-row: 4;
  grid-column: 2;
}
.pay-bancasella-container .email-label,
.pay-bancasella-container .card-text-label {
  display: block;
  margin: 0 0 0.375rem;
  padding: 0;
  color: var(--sh-foreground);
  font: 500 0.8125rem/1.3 var(--sh-font-sans);
  text-align: left;
}
.pay-bancasella-container .pay-bancasella-card input {
  display: block;
  width: 100% !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 0.875rem;
  border: 1px solid var(--sh-input) !important;
  border-radius: var(--sh-radius) !important;
  background-color: var(--sh-card);
  box-shadow: var(--sh-shadow-xs);
  color: var(--sh-foreground);
  font: 400 0.9375rem/1 var(--sh-font-sans);
  /* bancaSellaCSS: #email { font-size: large } */
  font-size: 0.9375rem !important;
  letter-spacing: 0;
  text-align: left !important;
  transition: var(--sh-transition);
}
.pay-bancasella-container .pay-bancasella-card input:focus {
  border-color: var(--sh-primary) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--sh-ring);
}
.pay-bancasella-container .pay-bancasella-card input:disabled {
  background-color: var(--sh-muted);
}
.pay-bancasella-container #card-number,
.pay-bancasella-container #card-expiry,
.pay-bancasella-container #card-cvv {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
/* il numero lascia spazio a destra per il logo del circuito */
.pay-bancasella-container #card-number {
  padding-right: 3.75rem;
}
.pay-bancasella-container #pay-bancasella-card-pic-front-circuit {
  position: static;
  grid-row: 3;
  grid-column: 1 / -1;
  align-self: end;
  justify-self: end;
  z-index: 2;
  height: 44px;
  margin: 0 0.625rem 0 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}
/* le immagini dei circuiti (img/cc/cc-generic/cc-generic-big-*.webp) sono
   400x252 col logo in alto a destra (306,14 - 387,65): si ritaglia solo
   il logo, in scala 0,5 */
.pay-bancasella-container #pay-bancasella-card-pic-front-circuit:not(:empty) {
  display: block;
  width: 41px;
  height: 26px;
  margin-bottom: 9px;
  overflow: hidden;
  border-radius: 4px;
}
.pay-bancasella-container #pay-bancasella-card-pic-front-circuit img {
  display: block;
  width: 200px;
  max-width: none;
  height: auto;
  translate: -153px -7px;
}

/* pulsante: a tutta larghezza della card, con il lucchetto */
.pay-bancasella-container .pay-bancasella-button {
  width: min(var(--sh-bs-larghezza), calc(100vw - 2rem));
  height: auto;
  margin: 1rem auto 0;
}
.pay-bancasella-container .pay-bancasella-button > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 1.25rem;
  border-radius: var(--sh-radius-lg);
  font: 600 1rem/1 var(--sh-font-display);
}
.pay-bancasella-container .pay-bancasella-button > button::before {
  content: '\F47A';
  font-family: 'bootstrap-icons';
  font-size: 1rem;
  font-weight: 400;
}

/* ==========================================================================
   35. STRIPE (src/pay/stripe1.cfm e stripe2.cfm) E TIMER DELLA SESSIONE
   Il modulo di pagamento e il Checkout incorporato di Stripe (iframe del
   gestore, non modificabile da qui): la pagina intorno diventa una card come
   le altre, col logo del campeggio che sporge in alto.
   ========================================================================== */
.pay-stripe-container {
  font-family: var(--sh-font-sans);
}
.pay-stripe-container .pay-stripe-logo > img {
  width: 96px;
  height: auto;
  margin-top: 1rem;
}
/* riquadro del Checkout di Stripe */
.pay-stripe-container > #stripe-checkout.stripe-checkout {
  max-width: 1040px;
  margin: 4.5rem auto 2.5rem;
  padding: 2.75rem 0.75rem 0.75rem;
  border-radius: var(--sh-radius-xl) !important;
  background-color: var(--sh-card);
  box-shadow: 0 0 0 1px var(--sh-border), var(--sh-shadow-md);
}
.pay-stripe-container > #stripe-checkout > iframe {
  border-radius: var(--sh-radius-lg);
}
.pay-stripe-container .pay-stripe-pic > img {
  width: 72px;
  height: 72px;
  margin-top: -20px;
  padding: 14px;
}
/* pagina di ritorno: l'esito non ha piu la card interna alta 700px fissi
   (stile in linea in stripe2.cfm) */
.pay-stripe-container #stripe-checkout .pay-stripe-background {
  width: auto;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
  box-shadow: none;
}
.pay-stripe-container #stripe-checkout .pagamento-confermato {
  padding: 0;
  background: transparent;
}
.pay-stripe-container #stripe-checkout .pagamento-confermato > .pagamento-confermato-block {
  max-width: 600px;
  margin: 0 auto;
  border: 0;
  box-shadow: none;
}
/* stripeCSS.cfm rimpicciolisce il titolo e sposta tabella e riepilogo */
.pay-stripe-container #stripe-checkout .pagamento-confermato-titolo-immagine {
  padding-top: 0.5rem;
}
.pay-stripe-container #stripe-checkout .pagamento-confermato-titolo-testo {
  margin-top: 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
}
.pay-stripe-container #stripe-checkout .pagamento-confermato-sottotitolo {
  font-size: 1rem;
  line-height: 1.55;
}
.pay-stripe-container #stripe-checkout .pagamento-confermato-dettagli-prenotazione-titolo {
  margin: 2rem 0 0.75rem;
}
.pay-stripe-container #stripe-checkout .pagamento-confermato-dettagli-prenotazione-tabella {
  margin-bottom: 0;
  padding: 0;
}
.pay-stripe-container #stripe-checkout .pagamento-confermato-dettagli-prenotazione-riassunto {
  margin-left: 0;
  font-size: 0.875rem;
}
@media (max-width: 600px) {
  .pay-stripe-container > #stripe-checkout.stripe-checkout {
    margin: 4.5rem 0.75rem 1.5rem;
    padding-top: 2.5rem;
  }
}

/* timer della sessione di pagamento (Stripe, Banca Sella, step 3): pillola in
   alto a destra con orologio, avviso piccolo e minuti in evidenza. Lo
   script scrive "ATTENZIONE" e "La sessione scadra tra:<br><b>mm:ss</b>" e
   mostra il riquadro con display: block in linea */
#timer-pagamento[style*='block'] {
  display: grid !important;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.75rem;
  width: auto;
  min-width: 0;
  padding: 0.625rem 1rem 0.625rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--sh-warning) 35%, var(--sh-border));
  border-radius: var(--sh-radius-lg);
  background-color: var(--sh-card);
  box-shadow: var(--sh-shadow-md);
  text-align: left;
  line-height: 1.3;
}
#timer-pagamento[style*='block']::before {
  content: '\F293';
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--sh-warning) 14%, transparent);
  color: var(--sh-warning);
  font-family: 'bootstrap-icons';
  font-size: 1.125rem;
  line-height: 1;
}
#timer-pagamento #timer-pagamento-titolo {
  color: var(--sh-warning);
  font: 600 0.6875rem/1.2 var(--sh-font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#timer-pagamento #timer-pagamento-sottotitolo {
  color: var(--sh-muted-foreground);
  font: 400 0.8125rem/1.3 var(--sh-font-sans);
}
#timer-pagamento #timer-pagamento-sottotitolo br {
  display: none;
}
#timer-pagamento #timer-pagamento-sottotitolo b {
  margin-left: 0.25rem;
  color: var(--sh-foreground);
  font: 700 1rem/1 var(--sh-font-display) !important;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   14. Scrollbar
   -------------------------------------------------------------------------- */
:root::-webkit-scrollbar {
  width: 12px;
  background-color: transparent;
}
:root::-webkit-scrollbar-track {
  -webkit-box-shadow: none;
  background-color: var(--sh-background);
}
:root::-webkit-scrollbar-thumb {
  -webkit-box-shadow: none;
  border: 2px solid var(--sh-background);
  border-radius: 999px;
  background-color: #d4d4d8;
}
[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background-color: #3f3f46;
}