/*
 * Dolidays — foglio di stile statico (nessuna build, nessun npm).
 * Bootstrap 5.3 (public/vendor/bootstrap/) fornisce grid/utility/componenti;
 * questo file definisce i design token del brand e riveste i componenti
 * Bootstrap con lo stesso aspetto del vecchio design system Tailwind.
 */

/* ── Design tokens (chiaro/scuro via [data-bs-theme]) ──────────────────── */
:root {
    --dl-bg:           #F9F5EE;
    --dl-bg-surface:   #FFFFFF;
    --dl-tx-base:      #111827;
    --dl-tx-muted:     #5A6475;
    --dl-bd:           #D6DCE8;
    --dl-bd-focus:     #1A4B85;

    --dl-azure:        #1A4B85;
    --dl-azure-rgb:    26,75,133;
    --dl-azure-d:      #153D6E;
    --dl-azure-l:      #3A6DA8;
    --dl-azure-faint:  #EBF2FB;
    --dl-gold:         #C8900E;
    --dl-gold-rgb:     200,144,14;
    --dl-gold-l:       #E5A81A;
    --dl-gold-faint:   #FDF5E4;

    --dl-success:      #166534;
    --dl-success-rgb:  22,101,52;
    --dl-success-bg:   #DCFCE7;
    --dl-error:        #C0281C;
    --dl-error-rgb:    192,40,28;
    --dl-error-d:      #9A1D14;
    --dl-error-bg:     #FEE2E2;
    --dl-warn:         #92400E;
    --dl-warn-rgb:     146,64,14;
    --dl-warn-bg:      #FEF3C7;

    --dl-radius-sm: 6px;
    --dl-radius-md: 10px;
    --dl-radius-lg: 14px;
    --dl-radius-xl: 20px;

    --dl-shadow-sm: 0 1px 3px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
    --dl-shadow-md: 0 4px 12px rgba(17,24,39,.08), 0 2px 4px rgba(17,24,39,.04);
    --dl-shadow-lg: 0 12px 36px rgba(26,75,133,.12), 0 4px 8px rgba(26,75,133,.06);

    --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-display: 'Cormorant Garamond', Georgia, serif;
}

[data-bs-theme="dark"] {
    --dl-bg:           #0C1829;
    --dl-bg-surface:   #132240;
    --dl-tx-base:      #E2EAF4;
    --dl-tx-muted:     #8A9CB5;
    --dl-bd:           #1E3455;
    --dl-bd-focus:     #5B8DC8;

    --dl-azure:        #5B8DC8;
    --dl-azure-rgb:    91,141,200;
    --dl-azure-d:      #4D7FC0;
    --dl-azure-l:      #4D7FC0;
    --dl-azure-faint:  #0D2040;
    --dl-gold:         #D9A420;
    --dl-gold-rgb:     217,164,32;
    --dl-gold-l:       #F0BA30;
    --dl-gold-faint:   #1E1000;

    --dl-success:      #4ADE80;
    --dl-success-rgb:  74,222,128;
    --dl-success-bg:   #052e16;
    --dl-error:        #F0554A;
    --dl-error-rgb:    240,85,74;
    --dl-error-d:      #F97C73;
    --dl-error-bg:     #450a0a;
    --dl-warn:         #F0B23A;
    --dl-warn-rgb:     240,178,58;
    --dl-warn-bg:      #1c0a00;
}

/* ── Aliasing sulle variabili Bootstrap: le utility "RGBA(var(...))" come
      .text-bg-primary / .bg-primary / .alert-primary / i link seguono
      automaticamente il tema. I componenti compilati (.btn-primary, .card,
      ecc.) hanno invece colori fissi nel CSS di Bootstrap e vengono
      rivestiti esplicitamente più sotto. ─────────────────────────────────── */
:root, [data-bs-theme] {
    --bs-body-bg: var(--dl-bg);
    --bs-body-color: var(--dl-tx-base);
    --bs-border-color: var(--dl-bd);
    --bs-border-color-translucent: var(--dl-bd);
    --bs-body-font-family: var(--font-sans);
    --bs-link-color: var(--dl-azure);
    --bs-link-color-rgb: var(--dl-azure-rgb);
    --bs-link-hover-color: var(--dl-azure-d);
    --bs-link-hover-color-rgb: var(--dl-azure-rgb);
    --bs-emphasis-color: var(--dl-tx-base);
    --bs-secondary-color: var(--dl-tx-muted);

    --bs-primary: var(--dl-azure);
    --bs-primary-rgb: var(--dl-azure-rgb);
    --bs-success: var(--dl-success);
    --bs-success-rgb: var(--dl-success-rgb);
    --bs-danger: var(--dl-error);
    --bs-danger-rgb: var(--dl-error-rgb);
    --bs-warning: var(--dl-warn);
    --bs-warning-rgb: var(--dl-warn-rgb);
}

/* Spazio per la scrollbar verticale sempre riservato: senza, ogni volta che il
   contenuto cambia altezza (es. i risultati di una ricerca che si accorciano/
   allungano filtrando) la comparsa/scomparsa della scrollbar cambia la larghezza
   disponibile e il contenuto centrato (margin:0 auto) si sposta lateralmente —
   il "salto" a sinistra/destra lamentato filtrando gli alloggi. */
/* Rete di sicurezza: niente in questo sito ha bisogno di sporgere oltre la
   larghezza della pagina (le uniche eccezioni volute - tabelle, caroselli -
   hanno già il proprio overflow-x:auto sul contenitore interno). Un elemento
   più largo del viewport da qualche parte (capitato più volte in mobile,
   es. l'header) non deve più poter allargare/scrollare tutta la pagina.
   Solo su html, non su body: dargli un overflow-x esplicito senza un
   overflow-y altrettanto esplicito lo fa diventare "scrollabile" (overflow-y
   calcolato auto) - un contenitore di scroll in più tra la navbar e la
   finestra rompe il suo position:sticky, che smette di restare in cima. */
html { scroll-behavior: smooth; overflow-y: scroll; overflow-x: hidden; max-width: 100%; scrollbar-gutter: stable; }

body {
    font-family: var(--font-sans);
    background: var(--dl-bg);
    color: var(--dl-tx-base);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; color: var(--dl-tx-base); }

a { text-decoration: none; }

/* ── Passaggio chiaro/scuro graduale ────────────────────────────────────── */
*, *::before, *::after {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow;
    transition-duration: .45s;
    transition-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 1ms !important; }
}

/* ── Bottoni: stessa palette del vecchio design system ─────────────────── */
.btn {
    border-radius: var(--dl-radius-sm);
    font-weight: 600;
    font-size: .875rem;
}
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--dl-azure);
    --bs-btn-border-color: var(--dl-azure);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dl-azure-d);
    --bs-btn-hover-border-color: var(--dl-azure-d);
    --bs-btn-active-bg: var(--dl-azure-d);
    --bs-btn-active-border-color: var(--dl-azure-d);
    --bs-btn-disabled-bg: var(--dl-azure);
    --bs-btn-disabled-border-color: var(--dl-azure);
}
.btn-outline-primary {
    --bs-btn-color: var(--dl-azure);
    --bs-btn-border-color: var(--dl-azure);
    --bs-btn-hover-bg: var(--dl-azure-faint);
    --bs-btn-hover-color: var(--dl-azure);
    --bs-btn-hover-border-color: var(--dl-azure);
    --bs-btn-active-bg: var(--dl-azure-faint);
    --bs-btn-active-color: var(--dl-azure);
    --bs-btn-active-border-color: var(--dl-azure);
}
.btn-gold, .btn-gold:hover, .btn-gold:focus {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--dl-gold);
    --bs-btn-border-color: var(--dl-gold);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dl-gold-l);
    --bs-btn-hover-border-color: var(--dl-gold-l);
    --bs-btn-active-bg: var(--dl-gold-l);
    --bs-btn-active-border-color: var(--dl-gold-l);
}
.btn-ghost, .btn-outline-secondary {
    --bs-btn-color: var(--dl-tx-muted);
    --bs-btn-border-color: var(--dl-bd);
    --bs-btn-hover-bg: var(--dl-bg);
    --bs-btn-hover-color: var(--dl-tx-base);
    --bs-btn-hover-border-color: var(--dl-bd);
}
.btn-danger, .btn-danger:hover {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--dl-error);
    --bs-btn-border-color: var(--dl-error);
    --bs-btn-hover-bg: var(--dl-error-d);
    --bs-btn-hover-border-color: var(--dl-error-d);
}
.btn-danger-ghost, .btn-danger-ghost:hover {
    --bs-btn-color: var(--dl-error);
    --bs-btn-bg: var(--dl-error-bg);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--dl-error-bg);
    --bs-btn-hover-color: var(--dl-error-d);
}

/* ── Card ────────────────────────────────────────────────────────────── */
.card {
    --bs-card-bg: var(--dl-bg-surface);
    --bs-card-border-color: var(--dl-bd);
    border-radius: var(--dl-radius-lg);
    box-shadow: var(--dl-shadow-sm);
}
.card-header, .card-footer { background: var(--dl-bg); border-color: var(--dl-bd); }

/* ── Badge: varianti colore usate in tutto il sito ──────────────────────── */
.badge { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: .7rem; padding: .3rem .65rem; border-radius: 999px; }
.badge-blue  { background: var(--dl-azure-faint); color: var(--dl-azure); }
.badge-gold  { background: var(--dl-gold-faint);  color: var(--dl-gold); }
.badge-green { background: var(--dl-success-bg);  color: var(--dl-success); }
.badge-red   { background: var(--dl-error-bg);    color: var(--dl-error); }
.badge-gray  { background: var(--dl-bd);          color: var(--dl-tx-muted); }
.badge-amber { background: var(--dl-warn-bg);     color: var(--dl-warn); }

/* ── Form ────────────────────────────────────────────────────────────── */
.form-label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--dl-tx-muted); }
.form-control, .form-select {
    --bs-body-bg: var(--dl-bg-surface);
    background: var(--dl-bg-surface);
    border-color: var(--dl-bd);
    border-radius: var(--dl-radius-sm);
    color: var(--dl-tx-base);
}
.form-control:focus, .form-select:focus {
    border-color: var(--dl-bd-focus);
    box-shadow: 0 0 0 .2rem rgba(var(--dl-azure-rgb), .15);
    background: var(--dl-bg-surface);
    color: var(--dl-tx-base);
}
.form-text { font-size: .78rem; color: var(--dl-tx-muted); }
.form-check-input { accent-color: var(--dl-azure); }
.form-check-input:checked { background-color: var(--dl-azure); border-color: var(--dl-azure); }

/* ── Tabelle ─────────────────────────────────────────────────────────── */
.table {
    --bs-table-bg: var(--dl-bg-surface);
    --bs-table-color: var(--dl-tx-base);
    --bs-table-border-color: var(--dl-bd);
    --bs-table-hover-bg: var(--dl-bg);
    --bs-table-hover-color: var(--dl-tx-base);
    font-size: .875rem;
}
.table > thead { background: var(--dl-bg); }
.table thead th { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--dl-tx-muted); border-bottom-color: var(--dl-bd); white-space: nowrap; }
.table-responsive { border: 1px solid var(--dl-bd); border-radius: var(--dl-radius-md); }
.row-danger td { background: color-mix(in srgb, var(--dl-error-bg) 50%, transparent) !important; }

/* ── Alert ───────────────────────────────────────────────────────────── */
.alert-success { --bs-alert-color: var(--dl-success); --bs-alert-bg: var(--dl-success-bg); --bs-alert-border-color: transparent; }
.alert-danger  { --bs-alert-color: var(--dl-error);   --bs-alert-bg: var(--dl-error-bg);   --bs-alert-border-color: transparent; }
.alert-warning { --bs-alert-color: var(--dl-warn);    --bs-alert-bg: var(--dl-warn-bg);    --bs-alert-border-color: transparent; }
.alert-info    { --bs-alert-color: var(--dl-azure);   --bs-alert-bg: var(--dl-azure-faint);--bs-alert-border-color: transparent; }

/* ── Navbar / dropdown ───────────────────────────────────────────────── */
.navbar {
    --bs-navbar-color: var(--dl-tx-muted);
    --bs-navbar-hover-color: var(--dl-azure);
    --bs-navbar-active-color: var(--dl-azure);
    background: var(--dl-bg-surface);
    border-bottom: 1px solid var(--dl-bd);
}
.navbar .nav-link.active { background: var(--dl-azure-faint); border-radius: var(--dl-radius-sm); }
/* Sopra il breakpoint di espansione (navbar-expand-lg) i link stanno su una riga sola:
   in quella disposizione orizzontale, una voce come "Vuoi caricare il tuo alloggio?"
   che si spezza a metà frase sembra un bug. Nel menu a tendina mobile, invece, può
   tornare ad andare a capo liberamente: lì è normale e non deve tagliare il testo. */
@media (min-width: 992px) {
    .navbar-nav .nav-link { white-space: nowrap; }
}
/* EN e tema: stesso bottone piccolo e quadrato sia nella coppia accanto
   all'hamburger (mobile) sia nella lista voci (desktop) - flex forza l'icona
   (sole/luna) a centrarsi davvero invece di dipendere dal centraggio di
   default del bottone. */
.navbar-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.4rem;
}
.navbar-utility-row { display: flex; gap: .5rem; }

/* Menu mobile (sotto il breakpoint navbar-expand-lg): prima i link principali
   e il blocco account/lingua/tema erano indistinguibili - qui si separano solo
   con lo spazio (niente righe divisorie, tolte perché non piacevano). */
@media (max-width: 991.98px) {
    .navbar-collapse { padding-bottom: .5rem; }
    .navbar-nav-main .nav-link { padding-block: .55rem; }
    .navbar-account-block { margin-top: .75rem; padding-top: .5rem; }
    .navbar-account-block .nav-item { margin-bottom: .6rem; }
    .navbar-account-block .nav-item:last-child { margin-bottom: 0; }
}
.dropdown-menu {
    --bs-dropdown-bg: var(--dl-bg-surface);
    --bs-dropdown-link-color: var(--dl-tx-base);
    --bs-dropdown-link-hover-bg: var(--dl-bg);
    --bs-dropdown-border-color: var(--dl-bd);
}

/* ── Paginazione: pillole con frecce a icona invece delle classi Bootstrap
      .page-item/.page-link (sovrascritte in resources/views/vendor/pagination/
      bootstrap-5.blade.php, dove sotto i 576px comparivano "pagination.previous"/
      "pagination.next" testuali - chiavi mai tradotte - senza nemmeno i numeri). ── */
.dl-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .4rem; padding: 0; margin: 0; list-style: none;
}
.dl-pagination-link, .dl-pagination-ellipsis {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 .55rem;
    border-radius: var(--dl-radius-md); border: 1px solid var(--dl-bd);
    background: var(--dl-bg-surface); color: var(--dl-tx-base);
    font-size: .85rem; font-weight: 600; text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
a.dl-pagination-link:hover { border-color: var(--dl-azure); color: var(--dl-azure); background: var(--dl-azure-faint); }
.dl-pagination-item.is-active .dl-pagination-link {
    background: var(--dl-azure); border-color: var(--dl-azure); color: #fff; cursor: default;
}
.dl-pagination-ellipsis { border-color: transparent; background: none; color: var(--dl-tx-muted); min-width: 24px; padding: 0; }
.dl-pagination-arrow { border-radius: 999px; padding: 0; width: 38px; }
.dl-pagination-item.is-disabled .dl-pagination-link { opacity: .35; pointer-events: none; }

/* ── Breadcrumb ──────────────────────────────────────────────────────── */
.breadcrumb { font-size: .8rem; color: var(--dl-tx-muted); }
.breadcrumb-item a { color: var(--dl-tx-muted); }
.breadcrumb-item a:hover { color: var(--dl-azure); }
.breadcrumb-item.active { color: var(--dl-tx-muted); }

/* ── Backoffice (Admin + Sistema): layout a sidebar ─────────────────────── */
.backoffice-layout { display: flex; align-items: stretch; min-height: 100vh; }

.backoffice-sidebar {
    width: 252px; flex-shrink: 0;
    display: flex; flex-direction: column;
    background: var(--dl-bg-surface);
    border-right: 1px solid var(--dl-bd);
    padding: 1.25rem 1rem;
    /* --backoffice-navbar-h è impostata via JS (layouts/admin.blade.php) all'altezza reale
       della navbar: un valore fisso qui creava uno stacco visibile ogni volta che l'altezza
       reale della navbar era minore del top impostato (position:sticky spinge l'elemento
       giù fino al valore di "top" anche a scroll zero, se la posizione naturale è più in alto). */
    position: sticky; top: var(--backoffice-navbar-h, 5rem); height: calc(100vh - var(--backoffice-navbar-h, 5rem) - 1.5rem); overflow-y: auto;
}
.backoffice-sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 0 .5rem; margin-bottom: 1.5rem; }
.backoffice-sidebar-nav { display: flex; flex-direction: column; gap: .1rem; flex: 1; }
.backoffice-sidebar-heading {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--dl-tx-muted); margin: 1.1rem .75rem .4rem;
}
.backoffice-sidebar-heading:first-child { margin-top: 0; }
.backoffice-sidebar-link {
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem .75rem; border-radius: var(--dl-radius-sm);
    color: var(--dl-tx-muted); font-size: .875rem; font-weight: 600;
}
.backoffice-sidebar-link:hover { background: var(--dl-bg); color: var(--dl-tx-base); }
.backoffice-sidebar-link.active { background: var(--dl-azure-faint); color: var(--dl-azure); }
.backoffice-sidebar-footer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--dl-bd); }

.backoffice-sidebar-backdrop { display: none; }

.backoffice-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.backoffice-main { padding: 2rem 1.5rem; max-width: 1400px; width: 100%; }

@media (max-width: 767.98px) {
    .backoffice-sidebar {
        position: fixed; top: 0; left: 0; z-index: 1030;
        width: 80vw; max-width: 300px; height: 100vh;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: var(--dl-shadow-lg);
    }
    .backoffice-sidebar.is-open { transform: translateX(0); }
    .backoffice-sidebar-backdrop {
        position: fixed; inset: 0; z-index: 1029;
        background: rgba(9,14,24,.45);
        opacity: 0; pointer-events: none; transition: opacity .25s ease;
        display: block;
    }
    .backoffice-sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; }
    .backoffice-main { padding: 1.5rem 1rem; }
}

/* ── Layout helper riutilizzati dalle view (non Bootstrap-nativi) ───────── */
.page-wrap { max-width: 1180px; margin: 0 auto; padding: 2rem 1rem; }
.page-title { font-family: var(--font-display); font-weight: 600; color: var(--dl-tx-base); font-size: clamp(1.5rem, 3vw, 2.25rem); }
.page-sub { color: var(--dl-tx-muted); margin-top: .375rem; font-weight: 300; }

.text-muted-dl { color: var(--dl-tx-muted) !important; }
.text-ink { color: var(--dl-tx-base) !important; }
.bg-surface { background: var(--dl-bg-surface) !important; }
.bg-app { background: var(--dl-bg) !important; }
.border-dl { border-color: var(--dl-bd) !important; }

.ad-slot {
    display: flex; align-items: center; justify-content: center;
    min-height: 100px; background: var(--dl-bg);
    border: 1px dashed var(--dl-bd); border-radius: var(--dl-radius-md);
    margin: 2rem 0;
}
.ad-slot-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--dl-tx-muted); }

.font-display { font-family: var(--font-display); }

.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--dl-shadow-md); }

.obj-cover { object-fit: cover; }

/* Bootstrap's .text-white-50 (50% opacity) is used site-wide for muted text
   over photo/dark backgrounds (hero, page-hero, news article header,
   proprietari page, auth side panel) — at 50% it was too faint to read
   comfortably over bright photos. Raised globally; combined with the
   text-shadow rules above this keeps it readable everywhere it's used. */
.text-white-50 { color: rgba(255, 255, 255, .78) !important; }

/* ── Hero homepage: editoriale a due colonne con la foto in cornice (mai a piena
      larghezza: a 941x1672px reali si vedrebbe sgranata) invece dello sfondo
      fotografico steso dietro al testo delle versioni precedenti. ───────── */
.hero {
    position: relative;
    /* NON overflow:hidden: la tendina "Ospiti" (e i suggerimenti zona) della
       barra di ricerca qui dentro sono position:absolute e devono poter
       sporgere liberamente sotto la sezione - con overflow:hidden venivano
       tagliate a metà, mostrando solo "Adulti" e nascondendo il resto. Le
       decorazioni della foto (timbro, sole/luna) restano comunque ben dentro
       ai margini della sezione, quindi non serve per quelle. */
    /* Un solo radiale, ancorato in alto: quello in basso (rimosso) aveva il centro
       fuori dalla sezione ma restava comunque colore pieno fino al suo bordo,
       creando una riga netta di cambio colore proprio sopra la barra di ricerca. */
    background:
        radial-gradient(1100px 550px at 88% -15%, var(--dl-gold-faint) 0%, transparent 55%),
        var(--dl-bg);
    padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
}
.hero-grid {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    max-width: 1180px; margin: 0 auto; padding-inline: 1rem;
}
/* Senza questo, una colonna grid non si restringe mai sotto la larghezza
   "intrinseca" del suo contenuto (min-width:auto di default): un titolo largo
   può quindi spingere l'intera griglia oltre lo schermo su mobile, con scroll
   orizzontale su tutta la pagina. */
.hero-grid > * { min-width: 0; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--dl-azure); background: var(--dl-azure-faint); border: 1px solid rgba(var(--dl-azure-rgb),.15);
    padding: .5rem 1rem; border-radius: 999px; margin-bottom: 1.5rem;
}
.hero-eyebrow-icons { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.hero-title {
    font-weight: 600; letter-spacing: -.01em; text-wrap: balance; overflow-wrap: break-word;
    font-size: clamp(2rem, 8vw, 4.4rem); line-height: 1.04; margin: 0 0 1.4rem;
}
.hero-title em { font-style: italic; font-weight: 500; color: var(--dl-gold); }
.hero-sub { font-size: 1.15rem; color: var(--dl-tx-muted); max-width: 34rem; line-height: 1.6; margin: 0 0 2.2rem; overflow-wrap: break-word; }
.hero-trust-row { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.hero-trust-stat { display: flex; align-items: baseline; gap: .4rem; }
.hero-trust-stat b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--dl-tx-base); }
.hero-trust-stat span { font-size: .85rem; color: var(--dl-tx-muted); font-weight: 500; }
.hero-trust-item { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--dl-tx-muted); font-weight: 500; }
.hero-trust-item svg { color: var(--dl-azure); flex-shrink: 0; }

/* Foto in cornice a dimensione contenuta (non un fondale steso, così resta nitida
   anche se il file di partenza è piccolo) e un rapporto meno estremo di quello
   nativo (941x1672, molto verticale) per restare compatta in altezza. */
.hero-visual { position: relative; display: flex; justify-content: center; padding: .5rem 0 1rem; }
.hero-photo-stack { position: relative; width: min(320px, 100%); }
.hero-daynight { position: absolute; top: -34px; right: -30px; width: 74px; height: 74px; z-index: 1; }
.hero-sun, .hero-moon { position: absolute; inset: 0; transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; }
.hero-sun { opacity: 1; transform: translateY(0); }
.hero-moon { opacity: 0; transform: translateY(2rem); }
[data-bs-theme="dark"] .hero-sun { opacity: 0; transform: translateY(2rem); }
[data-bs-theme="dark"] .hero-moon { opacity: 1; transform: translateY(0); }
.hero-photo-card {
    position: relative; z-index: 2; border-radius: 22px; overflow: hidden;
    box-shadow: var(--dl-shadow-lg); border: 6px solid var(--dl-bg-surface);
    transform: rotate(-2.2deg); background: var(--dl-bg-surface); aspect-ratio: 3 / 4;
}
.hero-photo-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-stamp {
    position: absolute; z-index: 3; top: -22px; left: -26px;
    background: var(--dl-bg-surface); border-radius: 999px; box-shadow: var(--dl-shadow-lg);
    width: 92px; height: 92px; display: flex; align-items: center; justify-content: center;
    transform: rotate(-8deg);
}
.hero-stamp-inner {
    width: 76px; height: 76px; border-radius: 50%; border: 2px dashed var(--dl-gold);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: var(--font-display); color: var(--dl-azure); text-align: center; line-height: 1.05;
}
.hero-stamp-inner b { font-size: .95rem; font-weight: 700; }
.hero-stamp-inner span { font-size: .55rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dl-gold); }
.hero-verified-chip {
    position: absolute; z-index: 3; bottom: -18px; right: -22px;
    background: var(--dl-bg-surface); border-radius: 16px; box-shadow: var(--dl-shadow-lg);
    padding: .7rem 1rem; display: flex; align-items: center; gap: .5rem;
    transform: rotate(3deg); font-size: .85rem; font-weight: 700; color: var(--dl-tx-base);
}
.hero-verified-chip svg { color: var(--dl-success); flex-shrink: 0; }

/* Barra di ricerca: margine positivo, non negativo - il "ponte" con margine
   negativo si sovrapponeva alla riga "Alloggi/Pagamento sicuro" appena la
   colonna di testo era un po' più alta della foto (es. a certe larghezze).
   padding-inline qui perché .hero-searchbar-wrap è un fratello di .hero-grid
   (non un suo figlio): senza questo padding non eredita il respiro laterale
   della griglia e su mobile la barra tocca i bordi dello schermo. */
.hero-searchbar-wrap { position: relative; z-index: 4; margin-top: clamp(1rem, 1vw, 1rem); padding-inline: 1rem; }
.hero-searchbar-wrap .ricerca-bar { box-shadow: var(--dl-shadow-lg); }

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; min-height: 0; }
    .hero-visual { order: -1; padding-top: 0; }
    .hero-photo-stack { width: min(300px, 78%); }
    .hero-trust-row { gap: 1.1rem; }
    .hero-searchbar-wrap { margin-top: 1.25rem; }
}

.press-logo-chip {
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border-radius: var(--dl-radius-md); padding: .75rem 1.25rem;
    box-shadow: var(--dl-shadow-sm);
}

/* ── Barra di ricerca alloggi (home hero + /alloggi): riga unica sopra i
      767.98px, ma sotto va impilata in colonna, altrimenti tre campi + bottone
      in un'unica pillola non ci stanno su uno schermo da 360-390px. I popover
      (suggerimenti zona, ospiti) restano ancorati al loro segmento: su mobile
      lo stesso segmento diventa largo quanto la barra (vedi .ricerca-segment
      sotto), quindi allargare i popover a left:0/right:0 li tiene sempre
      dentro il viewport senza bisogno di calcoli su vw. ───────────────────── */
/* Il border-radius viveva nelle utility Bootstrap rounded-pill/rounded-circle
   nel markup, entrambe con !important: la media query qui sotto non riusciva
   a batterle, quindi su mobile la barra restava sempre a forma di pillola/
   cerchio enorme invece di squadrarsi. Portato qui, senza !important, così
   la media query può davvero sovrascriverlo. */
.ricerca-bar, .ricerca-segment { border-radius: 999px; }
.ricerca-submit { width: 46px; height: 46px; border-radius: 50%; }
@media (max-width: 767.98px) {
    .ricerca-bar { flex-wrap: wrap; justify-content: center; row-gap: .25rem; border-radius: var(--dl-radius-lg); padding: .5rem; }
    /* Più margine dai bordi del box: da impilati, con un solo campo per riga,
       il padding "da pillola" (pensato per stare fianco a fianco ad altri campi)
       lasciava il testo troppo vicino al bordo bianco. */
    .ricerca-segment { flex: 1 1 100%; width: 100%; padding: .85rem 1.1rem; }
    .ricerca-divider { display: none; }
    .ricerca-divider + .ricerca-segment { border-top: 1px solid var(--dl-bd); margin-top: .25rem; padding-top: .95rem; }
    .ricerca-submit { width: 100%; border-radius: 999px; margin-top: .5rem; }
    .ricerca-popover { left: 0; right: 0; min-width: 0; }
}
.ricerca-stepper-btn { width: 30px; height: 30px; }
@media (max-width: 767.98px) {
    .ricerca-stepper-btn { width: 40px; height: 40px; }
}

/* ── Card alloggio stile booking (home + listing) ─────────────────────────
   Redesign approvato su mockup (badge pet friendly, contatore animali, chip
   servizi in evidenza): vedi partials/alloggio-card.blade.php. ────────────── */
.alloggio-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--dl-bg-surface);
    border: 1px solid var(--dl-bd);
    border-radius: var(--dl-radius-xl);
    overflow: hidden;
    box-shadow: var(--dl-shadow-sm);
    color: var(--dl-tx-base);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.alloggio-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--dl-shadow-lg);
    border-color: var(--dl-azure-l);
    color: var(--dl-tx-base);
}
.alloggio-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--dl-bg);
    overflow: hidden;
}
.alloggio-card-media img { transition: transform .5s ease; }
.alloggio-card:hover .alloggio-card-media img { transform: scale(1.06); }
/* Pill generica sopra la foto: badge "pet friendly" della card pubblica (oro,
   per farlo risaltare come un vero logo) e riusata anche dal popup della mappa
   (vedi alloggi/index.blade.php, ICONA_ANIMALI) per restare coerenti lì senza
   bisogno di stili separati. */
.alloggio-card-badge {
    position: absolute; top: .65rem; left: .65rem;
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255,255,255,.94); color: var(--dl-gold);
    font-size: .68rem; font-weight: 700;
    padding: .35rem .65rem .35rem .55rem; border-radius: 999px;
    box-shadow: var(--dl-shadow-sm);
}
[data-bs-theme="dark"] .alloggio-card-badge { background: rgba(19,34,64,.94); }
/* Prezzo ripetuto anche sulla foto (oltre che nel footer): sulla griglia si
   scorre rapidamente tra molte card, averlo già visibile sull'immagine evita
   di dover leggere fino in fondo alla card per farsi un'idea del prezzo. */
.alloggio-card-price-badge {
    position: absolute; bottom: .65rem; right: .65rem; z-index: 1;
    background: var(--dl-azure); color: #fff; font-weight: 700; font-size: .78rem;
    padding: .38rem .7rem; border-radius: 999px; box-shadow: var(--dl-shadow-md);
    font-variant-numeric: tabular-nums;
}
.alloggio-card-price-badge span { font-weight: 400; opacity: .85; font-size: .68rem; }
/* Card di gestione "I miei alloggi" (proprietario): stato colorato al posto del
   pill neutro usato dalla card pubblica, per riconoscere bozza/attesa/pubblicato
   a colpo d'occhio. */
.alloggio-manage-card-status { position: absolute; top: .65rem; left: .65rem; box-shadow: var(--dl-shadow-sm); }
.alloggio-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 1.05rem 1.15rem 1.15rem;
}
.alloggio-card-location {
    display: flex; align-items: center; gap: .3rem;
    font-size: .78rem; color: var(--dl-tx-muted); margin: 0 0 .35rem;
}
.alloggio-card-location svg { flex-shrink: 0; color: var(--dl-azure); }
.alloggio-card-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--dl-tx-base);
    margin: 0 0 .6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
    min-height: calc(1.25em * 2);
}
.alloggio-card-facts {
    display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
    color: var(--dl-tx-muted); font-size: .78rem;
    padding-bottom: .75rem; margin-bottom: .75rem;
    border-bottom: 1px solid var(--dl-bd);
}
.alloggio-card-fact { display: inline-flex; align-items: center; gap: .3rem; }
/* Numero di animali ammessi: stesso stile compatto icona+numero degli altri
   fatti (ospiti/camere/bagni), ma in oro per farlo notare a chi cerca proprio
   questo - senza dover leggere il badge o aprire la scheda. */
.alloggio-card-fact.is-pet { color: var(--dl-gold); font-weight: 600; }
.alloggio-card-fact.is-pet svg { color: var(--dl-gold); }
/* Fino a 3 servizi "in evidenza" (stesso flag admin dei filtri di ricerca):
   cosa offre l'alloggio a colpo d'occhio, senza dover aprire la scheda. */
.alloggio-card-amenities { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.alloggio-card-amenity {
    display: inline-flex; align-items: center; gap: .32rem;
    background: var(--dl-azure-faint); color: var(--dl-azure);
    border-radius: 999px; padding: .3rem .6rem .3rem .5rem;
    font-size: .7rem; font-weight: 600;
}
.alloggio-card-amenity svg { flex-shrink: 0; }
.alloggio-card-footer {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.alloggio-card-price { margin: 0; font-weight: 700; color: var(--dl-tx-base); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.alloggio-card-price span { font-weight: 400; font-size: .78rem; color: var(--dl-tx-muted); }
.alloggio-card-cta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 999px; flex-shrink: 0;
    background: var(--dl-azure-faint); color: var(--dl-azure);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.alloggio-card:hover .alloggio-card-cta { background: var(--dl-azure); color: #fff; transform: translateX(2px); }

/* ── Card riga prenotazione (proprietario + viaggiatore) ─────────────────── */
.booking-card {
    display: flex; align-items: center; gap: 1rem;
    background: var(--dl-bg-surface); border: 1px solid var(--dl-bd);
    border-radius: var(--dl-radius-lg); padding: .9rem 1.1rem;
    box-shadow: var(--dl-shadow-sm); color: var(--dl-tx-base); text-decoration: none;
}
.booking-card:hover { color: var(--dl-tx-base); border-color: var(--dl-azure-l); }
.booking-card-media {
    width: 84px; height: 84px; flex-shrink: 0;
    border-radius: var(--dl-radius-md); overflow: hidden; background: var(--dl-bg);
}
.booking-card-media img { width: 100%; height: 100%; object-fit: cover; }
.booking-card-body { flex-grow: 1; min-width: 0; }
.booking-card-title {
    font-family: var(--font-sans); font-weight: 700; font-size: .98rem;
    color: var(--dl-tx-base); margin: 0 0 .3rem;
}
.booking-card-meta {
    display: flex; flex-wrap: wrap; row-gap: .2rem; column-gap: .8rem;
    font-size: .8rem; color: var(--dl-tx-muted);
}
.booking-card-side {
    text-align: right; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: flex-end; gap: .4rem;
}
.booking-card-price { margin: 0; font-weight: 700; font-size: 1rem; color: var(--dl-tx-base); }
.booking-card-cta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
    background: var(--dl-azure-faint); color: var(--dl-azure);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.booking-card:hover .booking-card-cta { background: var(--dl-azure); color: #fff; transform: translateX(2px); }
@media (max-width: 575.98px) {
    .booking-card { flex-wrap: wrap; }
    .booking-card-side { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
    .booking-card-cta { display: none; }
}

/* ── Righe "richieste" in admin (valutazione immobile, caricamento alloggio):
      card invece di righe di tabella, più leggibili e già a posto su mobile
      (una tabella larga sotto costringerebbe a scorrere di lato). Non lette
      con un bordo laterale colorato, per notarle scorrendo la lista senza
      dover leggere ogni badge. ───────────────────────────────────────────── */
.lead-request-row {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem;
    background: var(--dl-bg-surface); border: 1px solid var(--dl-bd); border-left: 3px solid transparent;
    border-radius: var(--dl-radius-lg); padding: 1rem 1.2rem;
    box-shadow: var(--dl-shadow-sm);
}
.lead-request-row.is-new { border-left-color: var(--dl-gold); background: var(--dl-gold-faint); }
.lead-request-status { flex-shrink: 0; padding-top: .1rem; }
.lead-request-body { flex: 1 1 260px; min-width: 0; }
.lead-request-name { font-family: var(--font-sans); font-weight: 700; font-size: .98rem; color: var(--dl-tx-base); margin: 0 0 .25rem; }
.lead-request-contacts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .82rem; margin-bottom: .5rem; }
.lead-request-contacts a { color: var(--dl-tx-muted); }
.lead-request-contacts a:hover { color: var(--dl-azure); }
.lead-request-details { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .82rem; color: var(--dl-tx-muted); margin-bottom: .5rem; }
.lead-request-detail { display: inline-flex; align-items: center; gap: .3rem; }
.lead-request-detail svg { flex-shrink: 0; color: var(--dl-azure); }
.lead-request-message {
    font-size: .84rem; color: var(--dl-tx-base); font-style: italic;
    background: var(--dl-bg); border-radius: var(--dl-radius-sm); padding: .6rem .8rem;
    margin: 0; white-space: pre-wrap;
}
.lead-request-meta {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
    margin-left: auto; text-align: right;
}
.lead-request-date { font-size: .76rem; color: var(--dl-tx-muted); white-space: nowrap; }
@media (max-width: 575.98px) {
    .lead-request-row { flex-direction: column; }
    .lead-request-meta { align-items: flex-start; text-align: left; margin-left: 0; width: 100%; }
}

/* ── Mappa listing alloggi (Leaflet) ─────────────────────────────────────── */
.alloggi-map-sticky { position: sticky; top: 6rem; height: calc(100vh - 9rem); min-height: 420px; }
/* Mini-mappa nella pagina lista: volutamente piccola, il dettaglio vero sta
   nella vista espansa (bottone "Espandi", vedi .alloggi-map-list qui sotto). */
.alloggi-map-sticky-small { height: 460px; min-height: 460px; }
.alloggi-map-container {
    width: 100%; height: 100%;
    border-radius: var(--dl-radius-lg);
    border: 1px solid var(--dl-bd);
    overflow: hidden;
}
#mappa-alloggi-mobile { height: 100%; }
.alloggio-show-map {
    width: 100%; height: 340px;
    border-radius: var(--dl-radius-lg);
    border: 1px solid var(--dl-bd);
    overflow: hidden;
}
/* Marker "spillo" per i punti di interesse vicini (Nei dintorni), distinto dal marker
   dell'alloggio: rotondo con l'emoji della categoria, invece del prezzo delle mappe lista. */
.alloggio-show-map-poi-pin {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--dl-bg-surface); border: 1.5px solid var(--dl-gold);
    box-shadow: var(--dl-shadow-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; cursor: pointer;
}

/* ── "Nei dintorni": carosello a scorrimento orizzontale per categoria, al posto
      della griglia di box impilati (poco leggibile con tante voci per categoria) ──── */
.nearby-carousel-group { position: relative; }
.nearby-carousel-track {
    display: flex; gap: .9rem; overflow-x: auto; padding-bottom: .4rem;
    scroll-snap-type: x proximity; scroll-behavior: smooth;
    scrollbar-width: thin; scrollbar-color: var(--dl-gold) var(--dl-bg);
}
.nearby-carousel-track::-webkit-scrollbar { height: 6px; }
.nearby-carousel-track::-webkit-scrollbar-track { background: var(--dl-bg); border-radius: 999px; }
.nearby-carousel-track::-webkit-scrollbar-thumb { background: var(--dl-gold); border-radius: 999px; }
.nearby-carousel-track::-webkit-scrollbar-thumb:hover { background: var(--dl-gold-l); }
.nearby-carousel-card {
    flex: 0 0 250px; scroll-snap-align: start;
    display: flex; flex-direction: column;
    padding: 1rem; background: var(--dl-bg-surface); border: 1px solid var(--dl-bd);
    border-radius: var(--dl-radius-lg); transition: box-shadow .15s ease, border-color .15s ease;
}
.nearby-carousel-card:hover { box-shadow: var(--dl-shadow-sm); border-color: var(--dl-azure-l); }
.nearby-carousel-card-indirizzo {
    display: flex; align-items: flex-start; gap: .3rem;
    font-size: .78rem; color: var(--dl-tx-muted); line-height: 1.3;
}
.nearby-carousel-nav { display: flex; gap: .4rem; }
.nearby-carousel-arrow {
    width: 30px; height: 30px; border-radius: 999px;
    background: var(--dl-bg-surface); border: 1px solid var(--dl-bd); color: var(--dl-tx-base);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s ease;
}
.nearby-carousel-arrow:hover { background: var(--dl-bg); }
.nearby-carousel-arrow:disabled { opacity: .35; cursor: default; }
.nearby-carousel-arrow:disabled:hover { background: var(--dl-bg-surface); }
.leaflet-popup-content-wrapper { padding: 0; border-radius: var(--dl-radius-md); overflow: hidden; }
.leaflet-popup-content { margin: 0; width: 240px !important; }
.alloggi-map-popup { display: block; color: var(--dl-tx-base); }
.alloggi-map-popup-media { position: relative; }
.alloggi-map-popup-media .alloggio-card-badge { top: .5rem; left: .5rem; }
.alloggi-map-popup-body { padding: .6rem .75rem; }
.alloggi-map-popup-citta { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--dl-tx-muted); margin: 0 0 .15rem; }
.alloggi-map-popup-titolo { font-size: .85rem; font-weight: 700; margin: 0 0 .3rem; line-height: 1.25; }
.alloggi-map-popup-facts {
    display: flex; align-items: center; gap: .6rem;
    color: var(--dl-tx-muted); font-size: .72rem;
    padding-bottom: .45rem; margin-bottom: .45rem;
    border-bottom: 1px solid var(--dl-bd);
}
.alloggi-map-popup-fact { display: inline-flex; align-items: center; gap: .25rem; }
.alloggi-map-popup-servizi {
    font-size: .72rem; color: var(--dl-tx-muted); margin: 0 0 .5rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alloggi-map-popup-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.alloggi-map-popup-prezzo { font-size: .85rem; font-weight: 700; margin: 0; }
.alloggi-map-popup-prezzo span { font-weight: 400; color: var(--dl-tx-muted); font-size: .72rem; }
.alloggi-map-popup-cta {
    font-size: .68rem; font-weight: 700; color: var(--dl-azure);
    text-transform: uppercase; letter-spacing: .02em;
}

/* ── Pannello lista nella mappa a schermo intero (vedi .alloggi-map-expand) ─── */
.alloggi-map-list { width: 340px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid var(--dl-bd); background: var(--dl-bg-surface); }
.alloggi-map-list-item {
    display: flex; gap: .75rem; padding: .75rem 1rem;
    border-bottom: 1px solid var(--dl-bd); border-left: 3px solid transparent;
    text-decoration: none; color: var(--dl-tx-base);
    transition: background .15s ease, border-color .15s ease;
}
.alloggi-map-list-item:hover { background: var(--dl-bg); }
.alloggi-map-list-item.is-opened { background: var(--dl-azure-faint); border-left-color: var(--dl-azure); }
.alloggi-map-list-item-img { width: 68px; height: 68px; border-radius: var(--dl-radius-sm); object-fit: cover; flex-shrink: 0; background: var(--dl-bg); }
.alloggi-map-list-item-body { min-width: 0; }
.alloggi-map-list-item-citta { font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; color: var(--dl-tx-muted); margin: 0 0 .15rem; }
.alloggi-map-list-item-titolo {
    font-size: .82rem; font-weight: 700; margin: 0 0 .3rem; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.alloggi-map-list-item-facts { display: flex; align-items: center; gap: .5rem; color: var(--dl-tx-muted); font-size: .68rem; margin-bottom: .3rem; flex-wrap: wrap; }
.alloggi-map-list-item-fact { display: inline-flex; align-items: center; gap: .2rem; }
.alloggi-map-list-item-prezzo { font-size: .82rem; font-weight: 700; margin: 0; }
.alloggi-map-list-item-prezzo span { font-weight: 400; color: var(--dl-tx-muted); font-size: .68rem; }

/* Marker "pillola prezzo" (stile Booking/Airbnb) al posto dello spillo generico: mostra il
   prezzo a colpo d'occhio, e passa allo stato "aperto" (invertito) quando l'ospite lo clicca,
   per ricordare quali ha già guardato mentre confronta gli alloggi sulla mappa. */
.alloggi-map-price {
    display: inline-flex; align-items: center; white-space: nowrap;
    background: var(--dl-bg-surface); color: var(--dl-azure);
    border: 1.5px solid var(--dl-azure); border-radius: 999px;
    padding: .3rem .65rem; font-size: .78rem; font-weight: 700;
    box-shadow: var(--dl-shadow-sm);
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, color .15s ease;
}
.alloggi-map-price:hover { transform: translateY(-1px); box-shadow: var(--dl-shadow-md); }
.alloggi-map-price.is-opened { background: var(--dl-azure); color: #fff; border-color: var(--dl-azure); }
/* z-index sopra gli altri marker mentre il mouse ci passa/è aperto, per non finire
   coperto dai marker vicini quando la mappa è densa. */
.alloggi-map-price-wrap { z-index: 1; }
.alloggi-map-price-wrap.is-opened { z-index: 2; }

.alloggi-map-expand {
    position: absolute; top: .75rem; right: .75rem; z-index: 401;
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--dl-bg-surface); color: var(--dl-tx-base);
    border: 1px solid var(--dl-bd); border-radius: 999px;
    padding: .45rem .8rem; font-size: .78rem; font-weight: 600;
    box-shadow: var(--dl-shadow-md);
}
.alloggi-map-expand:hover { background: var(--dl-bg); }

/* ── Filtro categorie blog (/news) ───────────────────────────────────────── */
.news-filter-chip {
    display: inline-flex; align-items: center;
    padding: .45rem .95rem; border-radius: 999px;
    border: 1px solid var(--dl-bd); background: var(--dl-bg-surface);
    font-size: .85rem; font-weight: 600; color: var(--dl-tx-base);
    text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.news-filter-chip:hover { border-color: var(--dl-azure); color: var(--dl-tx-base); }
.news-filter-chip.is-active { background: var(--dl-azure); border-color: var(--dl-azure); color: #fff; }

/* ── Card articolo blog (/news) ──────────────────────────────────────────── */
.news-card-media { position: relative; overflow: hidden; }
.news-card-media img { transition: transform .45s ease; }
.news-card:hover .news-card-media img { transform: scale(1.06); }
.news-card-badge {
    position: absolute; top: .75rem; left: .75rem;
    background: rgba(9,14,24,.7); color: #fff; font-size: .7rem; font-weight: 700;
    padding: .3rem .7rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}
.news-card-meta { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--dl-tx-muted); }

/* ── Galleria alloggio (griglia stile Airbnb) ────────────────────────────── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 160px);
    gap: .5rem;
    border-radius: var(--dl-radius-lg);
    overflow: hidden;
}
.gallery-cell { position: relative; border: 0; padding: 0; margin: 0; background: var(--dl-bg); cursor: pointer; overflow: hidden; }
.gallery-cell img { transition: transform .4s ease; }
.gallery-cell:hover img { transform: scale(1.05); }
.gallery-cell-0 { grid-column: 1 / 3; grid-row: 1 / 3; }
.gallery-cell-1, .gallery-cell-2, .gallery-cell-3, .gallery-cell-4 { grid-column: span 1; grid-row: span 1; }
.gallery-more-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem;
}
/* Su mobile la griglia lascia il posto al carosello scorrevole qui sotto. */
.gallery-carousel-mobile { display: none; position: relative; }
@media (max-width: 767.98px) {
    .gallery-grid { display: none; }
    .gallery-carousel-mobile { display: block; }
}
.gallery-carousel-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; border-radius: var(--dl-radius-lg);
    scrollbar-width: none; -ms-overflow-style: none;
}
.gallery-carousel-track::-webkit-scrollbar { display: none; }
.gallery-carousel-slide {
    flex: 0 0 100%; aspect-ratio: 4 / 3; scroll-snap-align: start; scroll-snap-stop: always;
    border: 0; padding: 0; margin: 0; background: var(--dl-bg); cursor: pointer; overflow: hidden;
}
.gallery-carousel-counter {
    position: absolute; bottom: .75rem; right: .75rem; z-index: 2;
    background: rgba(9,14,24,.6); color: #fff; font-size: .74rem; font-weight: 700;
    padding: .3rem .65rem; border-radius: 999px; pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* ── Lightbox galleria ───────────────────────────────────────────────────── */
.gallery-lightbox {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(9,14,24,.97);
    display: none;
    flex-direction: column;
}
.gallery-lightbox.open { display: flex; }
.gallery-lightbox-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; color: #fff;
}
.gallery-lightbox-counter { font-size: .85rem; opacity: .8; }
.gallery-lightbox-close {
    background: transparent; border: 0; color: #fff;
    width: 38px; height: 38px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
}
.gallery-lightbox-close:hover { background: rgba(255,255,255,.12); }
.gallery-lightbox-stage {
    flex: 1; display: flex; align-items: center; justify-content: center;
    position: relative; min-height: 0; padding: 0 1rem;
}
.gallery-lightbox-stage img {
    max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px;
    opacity: 1; transform: translateX(0);
    transition: opacity .22s ease, transform .22s ease;
}
.gallery-lightbox-stage img.is-loading { opacity: 0; }
.gallery-lightbox-stage img.slide-from-right { transform: translateX(28px); }
.gallery-lightbox-stage img.slide-from-left { transform: translateX(-28px); }
.gallery-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,.1); border: 0; color: #fff;
    width: 44px; height: 44px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gallery-lightbox-nav:hover { background: rgba(255,255,255,.22); }
.gallery-lightbox-prev { left: .75rem; }
.gallery-lightbox-next { right: .75rem; }
.gallery-lightbox-thumbs {
    display: flex; gap: .5rem; overflow-x: auto;
    padding: 1rem 1.25rem 1.25rem;
}
.gallery-lightbox-thumb {
    flex-shrink: 0; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
    border: 2px solid transparent; padding: 0; opacity: .55; cursor: pointer;
}
.gallery-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-lightbox-thumb.active { border-color: var(--dl-gold-l); opacity: 1; }

/* ── Box prenotazione alloggio ───────────────────────────────────────────── */
.booking-widget {
    display: block;
    background: var(--dl-bg-surface);
    border: 1px solid var(--dl-bd);
    border-radius: var(--dl-radius-xl);
    box-shadow: var(--dl-shadow-lg);
    padding: 1.75rem;
}
.booking-widget-price { display: flex; align-items: baseline; gap: .4rem; margin-bottom: 1.5rem; }
.booking-widget-price-amount { font-family: var(--font-display); font-weight: 600; font-size: 2rem; color: var(--dl-tx-base); }
.booking-widget-price-unit { color: var(--dl-tx-muted); font-size: .9rem; }

.booking-field-group {
    border: 1px solid var(--dl-bd);
    border-radius: var(--dl-radius-md);
}
.booking-field { padding: .6rem .9rem; }
.booking-field-last { border-top: 1px solid var(--dl-bd); }
.booking-field-label {
    display: block; font-size: .65rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--dl-tx-muted); margin-bottom: .15rem;
}
.booking-field-input { display: flex; align-items: center; gap: .55rem; }
.booking-field-icon { color: var(--dl-azure); flex-shrink: 0; }
.booking-field-input input,
.booking-field-input select {
    border: 0; background: transparent; padding: 0; width: 100%;
    font-size: .9rem; color: var(--dl-tx-base); cursor: pointer;
    font-family: var(--font-sans);
}
.booking-field-input input:focus,
.booking-field-input select:focus { outline: none; box-shadow: none; }
.booking-field-input select { appearance: none; }

.booking-field-trigger {
    border: 0; background: transparent; padding: 0; width: 100%;
    text-align: left; cursor: pointer;
}
.booking-field-trigger span { font-size: .9rem; color: var(--dl-tx-base); }

.booking-guests-popover {
    position: absolute; top: calc(100% + .5rem); left: 0; right: 0; z-index: 40;
    background: var(--dl-bg-surface); border: 1px solid var(--dl-bd);
    border-radius: var(--dl-radius-md); box-shadow: var(--dl-shadow-lg);
    padding: .75rem 1rem;
}
.booking-stepper-btn { width: 28px; height: 28px; }
@media (max-width: 767.98px) {
    .booking-stepper-btn { width: 38px; height: 38px; }
}

.booking-widget .btn-gold { margin-top: .25rem; box-shadow: var(--dl-shadow-md); }

.booking-widget-mobile-bar, .booking-widget-close, .booking-widget-backdrop { display: none; }

/* ── Box prenotazione: barra fissa in basso su mobile ───────────────────── */
@media (max-width: 991.98px) {
    .booking-widget {
        position: fixed !important;
        /* bottom:0 da solo finiva sotto la barra degli strumenti di alcuni browser
           mobile (es. quella di Brave in basso, fuori dal controllo della pagina):
           quella barra copre il bordo reale dello schermo senza che bottom:0 se ne
           accorga, tagliando via prezzo e bottone "Prenota". env(safe-area-inset-
           bottom) copre solo l'home indicator di iOS (su Android resta 0 anche con
           la barra visibile) - --vv-bottom-offset è invece misurata via JS con la
           Visual Viewport API (vedi lo script in alloggi/show.blade.php) e copre
           qualunque barra del browser, su qualunque piattaforma. */
        left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--vv-bottom-offset, 0px)); top: auto !important;
        z-index: 1035;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 30px rgba(17,24,39,.18);
        max-height: 82vh;
        overflow-y: auto;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        transform: translateY(calc(100% - 64px));
        transition: transform .3s ease;
    }
    .booking-widget.is-expanded { transform: translateY(0); }

    .booking-widget-mobile-bar {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        width: 100%; border: 0; background: transparent; padding: 0 0 .25rem;
        cursor: pointer;
    }
    .booking-widget.is-expanded .booking-widget-mobile-bar { display: none; }

    .booking-widget-close {
        display: flex; align-items: center; justify-content: center;
        position: absolute; top: .75rem; right: 1rem;
        width: 32px; height: 32px; border-radius: 999px; border: 0;
        background: var(--dl-bg); color: var(--dl-tx-muted);
    }
    .booking-widget:not(.is-expanded) .booking-widget-close { display: none; }

    .booking-widget:not(.is-expanded) .booking-widget-price,
    .booking-widget:not(.is-expanded) .booking-widget-perforation,
    .booking-widget:not(.is-expanded) form,
    .booking-widget:not(.is-expanded) .text-center.py-4 { display: none; }

    .booking-widget-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1030;
        background: rgba(9,14,24,.45); opacity: 0; pointer-events: none;
        transition: opacity .3s ease;
    }
    .booking-widget.is-expanded ~ .booking-widget-backdrop { opacity: 1; pointer-events: auto; }
}

.booking-card-note {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    font-size: .75rem; color: var(--dl-tx-muted); text-align: center; line-height: 1.4;
    margin: .25rem 0 0;
}
.booking-card-note svg { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Pagina alloggio (alloggi/show)
   Usava font (Fraunces/Figtree) e una palette verde salvia proprie, diverse dal
   resto del sito: tolte per uniformare font/dimensioni/colori a tutte le pagine
   (--font-display/--font-sans e i token --dl-* del design system, come ovunque
   altrove) invece di avere questa pagina con uno stile a sé. ────────────────── */

.al-title { letter-spacing: -.01em; text-wrap: balance; font-size: clamp(1.9rem, 4vw, 3rem); }

.al-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .85rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
}
.al-chip-gold { background: var(--dl-gold-faint); color: var(--dl-gold); }

/* Barra "quick facts": sovrappone il bordo inferiore della galleria invece di
   stare in un box piatto dentro la colonna dei contenuti. */
.al-quickbar {
    background: var(--dl-bg-surface); border: 1px solid var(--dl-bd); border-radius: var(--dl-radius-xl);
    box-shadow: var(--dl-shadow-lg); position: relative; z-index: 3;
    /* Il "Mostra tutte le foto" tra la galleria e questa barra ha già il suo margine:
       una risalita più marcata (usata quando c'era solo la galleria sopra) ci finiva
       sovrapposta invece che solo "agganciata". */
    margin: -1rem 0 2.5rem;
    padding: 1.1rem clamp(1rem, 3vw, 1.75rem);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.al-qf {
    display: flex; align-items: center; gap: .75rem; padding: .3rem 1rem;
    border-right: 1px solid var(--dl-bd);
}
.al-qf:last-child { border-right: 0; }
.al-qf svg { color: var(--dl-azure); flex-shrink: 0; }
.al-qf b { display: block; font-size: 1rem; color: var(--dl-tx-base); font-family: var(--font-display); font-weight: 600; }
.al-qf span { display: block; font-size: .7rem; color: var(--dl-tx-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 1px; }
@media (max-width: 767.98px) {
    .al-quickbar { margin-top: -.75rem; grid-template-columns: repeat(2, 1fr); row-gap: .9rem; }
    .al-qf:nth-child(2n) { border-right: 0; }
}

.al-prose { max-width: 68ch; }

.al-host-card { display: flex; align-items: center; gap: .9rem; }
.al-host-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: var(--dl-azure-faint); color: var(--dl-azure);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
}
.al-host-name { font-size: .92rem; color: var(--dl-tx-base); }

.al-amenity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem 1.25rem; }
.al-amenity { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--dl-tx-base); }
.al-amenity svg { color: var(--dl-azure); }
@media (max-width: 575.98px) {
    .al-amenity-grid { grid-template-columns: repeat(2, 1fr); }
}

.al-policy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; font-size: .92rem; }
.al-policy-list li {
    display: flex; gap: .75rem; align-items: baseline;
    padding: .75rem 1rem; background: var(--dl-bg-surface); border: 1px solid var(--dl-bd); border-radius: var(--dl-radius-md);
}
.al-policy-list b { color: var(--dl-azure); font-family: var(--font-display); font-size: 1.05rem; flex-shrink: 0; min-width: 3.4rem; }

/* Widget di prenotazione: spazio tra il prezzo e i campi data/ospiti, senza divisore
   visibile (le versioni precedenti, con tacca perforata o con un semplice border-top,
   non piacevano). */
.booking-widget-perforation { height: .5rem; }

/* ── Griglia foto alloggio (admin): drag&drop, copertina, dropzone ─────────── */
.foto-tile { cursor: grab; touch-action: none; }
.foto-tile.is-dragging { opacity: .35; }
.foto-tile-inner { background: var(--dl-bg); }
.foto-tile-star svg { color: var(--dl-gold); }
.foto-tile-remove svg { color: #fff; }

#foto-dropzone { transition: background-color .15s ease, border-color .15s ease; }
#foto-dropzone.is-dragover { background: var(--dl-azure-faint); border-color: var(--dl-azure) !important; }

/* ── Riordino righe tabella (admin): amenities/categorie amenities ─────────── */
.servizio-riga-riordinabile.is-dragging,
.categoria-riga-riordinabile.is-dragging { opacity: .35; }

/* ── Hub amenities (admin /admin/servizi): colonna categorie a sinistra +
      amenities della categoria selezionata a destra, per rendere visibile a
      colpo d'occhio la gerarchia categoria → amenities ─────────────────────── */
.amenity-hub-heading {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--dl-tx-muted); margin-bottom: .25rem;
}
.amenity-category-row {
    display: flex; align-items: center; gap: .6rem; min-width: 0;
    padding: .5rem .6rem; border-radius: var(--dl-radius-md);
    color: var(--dl-tx-base); text-decoration: none; font-size: .87rem;
    transition: background-color .15s ease, color .15s ease;
}
.amenity-category-row:hover { background: var(--dl-bg); color: var(--dl-tx-base); }
.amenity-category-row.is-active { background: var(--dl-azure-faint); color: var(--dl-azure-d); font-weight: 600; }
.amenity-category-row-icon { display: inline-flex; flex-shrink: 0; color: var(--dl-tx-muted); }
.amenity-category-row.is-active .amenity-category-row-icon { color: var(--dl-azure); }
/* Il testo lungo delle categorie ("Connettività e intrattenimento") deve potersi
   restringere e troncare invece di spingere la matita fuori dalla card: senza
   min-width:0 sulla catena flex, un flex-item non si restringe mai sotto la sua
   larghezza intrinseca, anche con text-truncate applicato. */
.amenity-category-row-wrap { display: flex; align-items: stretch; gap: .1rem; min-width: 0; }
.amenity-category-row .text-truncate { min-width: 0; }
.amenity-category-row-wrap.is-dragging { opacity: .35; }
.amenity-category-drag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; flex-shrink: 0; color: var(--dl-tx-muted); cursor: grab;
}
.amenity-category-edit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; flex-shrink: 0; border-radius: var(--dl-radius-md);
    color: var(--dl-tx-muted); transition: background-color .15s ease, color .15s ease;
}
.amenity-category-edit:hover { background: var(--dl-bg); color: var(--dl-azure); }

/* ── Filtro amenities (ricerca /alloggi): bottone che apre un pannello a
      comparsa con i chip disposti a capo su più righe — stesso pattern del
      popover "Ospiti" della barra di ricerca qui sopra, invece della vecchia
      striscia sempre visibile a scorrimento orizzontale. ──── */
.amenity-filter-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--dl-bg-surface); border: 1px solid var(--dl-bd);
    border-radius: 999px; padding: .55rem 1rem;
    font-size: .85rem; font-weight: 600; color: var(--dl-tx-base);
    cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.amenity-filter-toggle:hover { border-color: var(--dl-azure); }
.amenity-filter-toggle[aria-expanded="true"] { border-color: var(--dl-azure); background: var(--dl-azure-faint); }
.amenity-filter-chevron { transition: transform .15s ease; }
.amenity-filter-toggle[aria-expanded="true"] .amenity-filter-chevron { transform: rotate(180deg); }
.amenity-filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 .3rem; border-radius: 999px;
    background: var(--dl-azure); color: #fff; font-size: .68rem; font-weight: 700;
}

.amenity-filter-panel {
    position: absolute; top: calc(100% + .5rem); left: 0; z-index: 60;
    width: 100%; min-width: 320px; max-width: 480px;
    background: var(--dl-bg-surface); border: 1px solid var(--dl-bd);
    border-radius: var(--dl-radius-md); box-shadow: var(--dl-shadow-lg);
    padding: 1rem;
}
.amenity-filter-panel-grid {
    display: flex; flex-wrap: wrap; gap: .5rem;
    max-height: 320px; overflow-y: auto; padding-bottom: .25rem;
}
.amenity-filter-panel-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; padding-top: .75rem; margin-top: .75rem; border-top: 1px solid var(--dl-bd);
}

.amenity-chip {
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
    padding: .45rem .85rem; border-radius: 999px;
    border: 1px solid var(--dl-bd); background: var(--dl-bg);
    font-size: .82rem; color: var(--dl-tx-base); cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.amenity-chip:hover { border-color: var(--dl-azure); }
.amenity-chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.amenity-chip.is-active { background: var(--dl-azure); border-color: var(--dl-azure); color: #fff; }

/* Stesso filtro amenities, ma quando galleggia sopra la mappa espansa (vedi
   alloggi/index.blade.php): il bottone sparisce, il pannello resta sempre
   aperto e riempie lo spazio dedicato in alto a destra invece di comparire
   come dropdown — non serve nemmeno il bottone "Applica", i checkbox
   ricaricano subito i marker (vedi il listener "change" più sotto nel JS). */
.alloggi-map-filtri-overlay {
    position: absolute; top: .75rem; right: .75rem; z-index: 401;
    max-width: 230px; max-height: calc(100% - 1.5rem); overflow: hidden;
}
.amenity-filter-bar.is-floating .amenity-filter-toggle { display: none; }
.amenity-filter-bar.is-floating .amenity-filter-panel {
    position: static; width: auto; max-width: none; min-width: 0;
    box-shadow: var(--dl-shadow-lg);
    display: flex; flex-direction: column; max-height: 100%;
}
.amenity-filter-bar.is-floating .amenity-filter-panel-grid {
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    max-height: none; overflow-y: auto; overflow-x: hidden; padding-right: .25rem;
}
.amenity-filter-bar.is-floating .amenity-chip { white-space: normal; }
.amenity-filter-bar.is-floating .amenity-filter-panel-footer { display: none; }

/* Sotto i 767.98px il pannello in colonna sopra descritto copre troppa mappa
   (fino al 60% della larghezza su un telefono) e nasconde i marker sotto:
   diventa una barra a piena larghezza ancorata in basso, con i chip in riga
   scorrevole invece che impilati in colonna. */
@media (max-width: 767.98px) {
    .alloggi-map-filtri-overlay {
        top: auto; bottom: .75rem; left: .75rem; right: .75rem;
        max-width: none; max-height: 45%;
    }
    .amenity-filter-bar.is-floating .amenity-filter-panel {
        flex-direction: column; max-height: 100%;
    }
    .amenity-filter-bar.is-floating .amenity-filter-panel-grid {
        flex-direction: row; align-items: center; flex-wrap: nowrap;
        overflow-x: auto; overflow-y: hidden; padding-right: 0;
    }
    .amenity-filter-bar.is-floating .amenity-chip { white-space: nowrap; padding: .5rem .85rem; }

    /* Pillola prezzo dei marker: era ~24-28px di altezza, sotto la soglia dei
       44px consigliata per un target touch, ed è il principale elemento
       interattivo della mappa. */
    .alloggi-map-price { padding: .45rem .8rem; font-size: .82rem; }

    /* Popup fisso a 240px: sulla maggior parte dei telefoni ci sta, ma su un
       viewport molto stretto (es. Galaxy Fold chiuso, ~280px) uscirebbe dai
       bordi nonostante l'auto-pan di Leaflet. */
    .leaflet-popup-content { width: min(240px, calc(100vw - 48px)) !important; }
}

/* ── Banner consenso cookie (Google Analytics, vedi partials/cookie-banner) ── */
.cookie-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080;
    background: var(--dl-bg-surface); border-top: 1px solid var(--dl-bd);
    box-shadow: 0 -6px 24px rgba(9,14,24,.12);
    padding: calc(1rem + env(safe-area-inset-bottom, 0px)) 1rem 1rem;
}
.cookie-banner-inner {
    max-width: 1180px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.cookie-banner-text { margin: 0; font-size: .85rem; color: var(--dl-tx-base); max-width: 640px; }
.cookie-banner-actions { display: flex; gap: .5rem; flex-shrink: 0; }
@media (max-width: 575.98px) {
    .cookie-banner-inner { flex-direction: column; align-items: stretch; }
    .cookie-banner-actions { justify-content: flex-end; }
}

/* ── Flatpickr (date-picker prenotazione) ───────────────────────────────── */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--dl-azure) !important;
    border-color: var(--dl-azure) !important;
}
.flatpickr-day.inRange {
    background: var(--dl-azure-faint) !important;
    border-color: var(--dl-azure-faint) !important;
    color: var(--dl-azure) !important;
}
.flatpickr-day:hover:not(.selected):not(.inRange):not(.startRange):not(.endRange) {
    background: var(--dl-azure-faint);
    color: var(--dl-azure);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    background: var(--dl-error-bg) !important;
    color: var(--dl-error) !important;
    text-decoration: line-through;
    opacity: 1;
}

/* ── Scroll reveal: usato sulle pagine secondarie (legal, come funziona, FAQ,
      proprietari) per una comparsa morbida dei blocchi mentre si scrolla ────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Page hero: banda in testa alle pagine secondarie, con variante foto+
      parallax leggero (via JS, vedi app.js) o variante "soft" solo gradiente ─── */
.page-hero { position: relative; overflow: hidden; }
.page-hero-bg {
    position: absolute; inset: -25% 0;
    background-size: cover; background-position: center;
    background-color: var(--dl-azure-d);
    will-change: transform;
}
.page-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6,20,35,.6) 0%, rgba(6,20,35,.4) 100%);
}
/* Variante per contenuto allineato in basso (es. header articolo blog): più
   scura sul fondo, dove sta il testo, trasparente in alto sulla foto. */
.page-hero-overlay-bottom {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6,20,35,.85) 0%, rgba(6,20,35,.35) 55%, transparent 100%);
}
.page-hero-content { position: relative; z-index: 2; }
/* Le regole globali h1..h6{color:var(--dl-tx-base)} (vedi inizio file) vincono
   sempre sul colore ereditato da un antenato, anche con !important: senza
   questa regola i titoli dentro un hero fotografico risultano scuri e
   illeggibili sopra la foto, a meno di impostare "text-white" a mano su
   ciascun heading (facile da dimenticare — da qui il fallback). */
.page-hero:not(.page-hero-soft) .page-hero-content h1,
.page-hero:not(.page-hero-soft) .page-hero-content h2,
.page-hero:not(.page-hero-soft) .page-hero-content h3 { color: #fff; }
.page-hero-soft { background: linear-gradient(135deg, var(--dl-azure-faint) 0%, var(--dl-gold-faint) 100%); }
.page-hero-icon {
    width: 56px; height: 56px; border-radius: 999px;
    background: rgba(255,255,255,.65); color: var(--dl-azure);
    display: inline-flex; align-items: center; justify-content: center;
}
[data-bs-theme="dark"] .page-hero-icon { background: rgba(19,34,64,.65); }

/* Eyebrow a pill (opzionale, con icona) per la variante foto: prima /proprietari
   e /carica-il-tuo-alloggio la ricreavano da capo con stili inline propri
   (leggermente diversi dal semplice testo colorato usato dalle altre pagine),
   ora condivisa da tutte le pagine con foto in testa. */
.page-hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
    padding: .5rem 1rem; border-radius: 999px; margin-bottom: 1rem;
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #fff;
}
.page-hero-eyebrow-icons { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }

/* ── Dashboard admin: card statistica con icona/accento colorato, righe
   elenco con divisore e mini-icona, al posto del testo nudo su sfondo
   bianco piatto usato prima. Il colore per-card arriva da --accent/
   --accent-bg impostate inline nel blade (nessuna nuova classe per
   ciascuna variante cromatica). ────────────────────────────────────────── */
.dash-stat-card { border-top: 3px solid var(--accent, var(--dl-azure)); }
.dash-stat-icon {
    width: 42px; height: 42px; border-radius: var(--dl-radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-bg, var(--dl-azure-faint)); color: var(--accent, var(--dl-azure));
    margin-bottom: .9rem;
}
.dash-section-title {
    display: flex; align-items: center; gap: .55rem;
    font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--dl-tx-muted); margin-bottom: .9rem;
}
.dash-section-icon {
    width: 26px; height: 26px; border-radius: var(--dl-radius-sm); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-bg, var(--dl-azure-faint)); color: var(--accent, var(--dl-azure));
}
.dash-list-row {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .6rem 0; border-bottom: 1px solid var(--dl-bd);
    text-decoration: none; color: inherit;
}
.dash-list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-list-row:first-child { padding-top: 0; }
.dash-list-row:hover { color: var(--dl-azure); }

/* ── Pagine legali (privacy, cookie, termini, recesso) ─────────────────────
   Testo lungo e denso: qui la leggibilità conta più della densità - liste con
   marker dorato invece del pallino di default, titoli con bordo d'accento,
   tabelle incorniciate come il resto del sito, e un indice laterale sticky
   (id/voci generati lato client, vedi partials/legal-page.blade.php). */
.legal-body { font-size: 1.02rem; line-height: 1.75; color: var(--dl-tx-base); }
.legal-body h2 {
    scroll-margin-top: 6.5rem;
    padding-left: .85rem; border-left: 3px solid var(--dl-gold);
}
.legal-body p { margin-bottom: 1rem; }
.legal-body ul { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.legal-body ul li {
    position: relative; padding-left: 1.4rem; margin-bottom: .6rem;
}
.legal-body ul li::before {
    content: ''; position: absolute; left: 0; top: .55em;
    width: 6px; height: 6px; border-radius: 999px; background: var(--dl-gold);
}
.legal-body a { color: var(--dl-azure); font-weight: 600; text-decoration-thickness: 1px; }
.legal-body a:hover { color: var(--dl-azure-d); }
.legal-body .table-responsive {
    border: 1px solid var(--dl-bd); border-radius: var(--dl-radius-lg);
    overflow: hidden; margin-bottom: 1.25rem;
}
.legal-body .table { margin-bottom: 0; }
.legal-body .table thead th { background: var(--dl-bg); font-size: .82rem; }

.legal-toc { position: sticky; top: 6rem; }
.legal-toc-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--dl-tx-muted); margin: 0 0 .75rem;
}
.legal-toc-nav { display: flex; flex-direction: column; gap: .1rem; border-left: 2px solid var(--dl-bd); }
.legal-toc-link {
    padding: .4rem .9rem; font-size: .85rem; color: var(--dl-tx-muted);
    text-decoration: none; border-left: 2px solid transparent; margin-left: -2px;
    transition: color .15s ease, border-color .15s ease;
}
.legal-toc-link:hover { color: var(--dl-tx-base); }
.legal-toc-link.is-active { color: var(--dl-azure); font-weight: 600; border-left-color: var(--dl-azure); }

/* ── Stat/highlight band (usata nella pagina Proprietari) ──────────────────── */
.stat-highlight { text-align: center; }
.stat-highlight-value {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.75rem); color: var(--dl-gold-l);
    line-height: 1;
}
.stat-highlight-label { color: var(--dl-tx-muted); font-size: .85rem; margin-top: .5rem; }

/* ── Timeline verticale/orizzontale a step (Come funziona, Proprietari) ─────── */
.step-timeline { position: relative; }
.step-timeline-num {
    width: 34px; height: 34px; border-radius: 999px;
    background: var(--dl-azure); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .9rem; flex-shrink: 0;
    position: relative; z-index: 1;
}
/* Riga che collega i numeri in fila (solo da lg in su, dove i 4 step stanno su
   un'unica riga: sotto quel breakpoint impilano e una riga orizzontale non
   avrebbe senso). */
@media (min-width: 992px) {
    .step-timeline-item { position: relative; }
    .step-timeline-item:not(:last-child)::after {
        content: '';
        position: absolute; top: 17px; left: 34px; right: 0;
        height: 2px; background: var(--dl-bd);
    }
}

/* ── Editor Quill (descrizione alloggio, IT/EN): il tema "snow" di default è
   grigio/bianco fisso e non segue il tema chiaro/scuro del sito — lo rivestiamo
   con gli stessi token di .form-control. Il wrapper (non il div passato a Quill)
   porta il d-none per lingua, perché Quill inserisce la sua toolbar come fratello
   del div bersaglio: nascondere solo quel div lascerebbe la toolbar visibile.
   Selettori con prefisso .wizard: quill.snow.css arriva via @push('styles'),
   che nel layout è incluso DOPO app.css — senza una specificità più alta le
   nostre regole perderebbero contro quelle di Quill nonostante l'ordine nel
   file sorgente. Scoping anche per non toccare gli altri due editor Quill del
   sito (proprietari/create, editor/articoli) non oggetto di questa modifica. */
.wizard .descrizione-editor-wrap.d-none { display: none; }
.wizard .ql-toolbar.ql-snow {
    border-color: var(--dl-bd);
    border-radius: var(--dl-radius-sm) var(--dl-radius-sm) 0 0;
    background: var(--dl-bg);
}
.wizard .ql-container.ql-snow {
    border-color: var(--dl-bd);
    border-radius: 0 0 var(--dl-radius-sm) var(--dl-radius-sm);
    background: var(--dl-bg-surface);
    font-family: var(--font-sans);
    font-size: .95rem;
}
.wizard .ql-editor { min-height: 180px; color: var(--dl-tx-base); line-height: 1.6; }
.wizard .ql-editor.ql-blank::before { color: var(--dl-tx-muted); font-style: normal; }
.wizard .descrizione-editor-wrap:focus-within .ql-toolbar.ql-snow,
.wizard .descrizione-editor-wrap:focus-within .ql-container.ql-snow { border-color: var(--dl-bd-focus); }
.wizard .ql-snow .ql-stroke { stroke: var(--dl-tx-muted); }
.wizard .ql-snow .ql-fill, .wizard .ql-snow .ql-stroke.ql-fill { fill: var(--dl-tx-muted); }
.wizard .ql-snow .ql-picker { color: var(--dl-tx-muted); }
.wizard .ql-snow.ql-toolbar button:hover .ql-stroke, .wizard .ql-snow .ql-toolbar button:hover .ql-stroke,
.wizard .ql-snow.ql-toolbar button.ql-active .ql-stroke, .wizard .ql-snow .ql-picker-label:hover .ql-stroke,
.wizard .ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: var(--dl-azure); }
.wizard .ql-snow.ql-toolbar button:hover .ql-fill, .wizard .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--dl-azure); }
.wizard .ql-snow.ql-toolbar button:hover, .wizard .ql-snow.ql-toolbar button.ql-active,
.wizard .ql-snow .ql-picker-label:hover, .wizard .ql-snow .ql-picker-label.ql-active { color: var(--dl-azure); }
.wizard .ql-snow .ql-picker-options {
    background: var(--dl-bg-surface); border-color: var(--dl-bd) !important;
    border-radius: var(--dl-radius-sm); box-shadow: var(--dl-shadow-md);
}
.wizard .ql-snow .ql-picker-item { color: var(--dl-tx-base); }
.wizard .ql-snow .ql-tooltip {
    background: var(--dl-bg-surface); border-color: var(--dl-bd); color: var(--dl-tx-base);
    box-shadow: var(--dl-shadow-md); border-radius: var(--dl-radius-sm);
}
.wizard .ql-snow .ql-tooltip input[type=text] {
    background: var(--dl-bg); border-color: var(--dl-bd); color: var(--dl-tx-base);
}

/* ── Wizard inserimento alloggio (admin + proprietario, stesso partial) ─────────
   Un pannello alla volta; i cerchi riprendono lo stile di .step-timeline-num
   sopra ma con stati interattivi (non ancora visitato / corrente / completato)
   e un collegamento cliccabile all'indietro. Sotto i 767.98px (stessa soglia
   mobile del resto del sito) le etichette spariscono tranne quella dello step
   corrente e una barra di progresso lineare prende il posto della fila di
   cerchi come indicatore principale, più leggibile su schermi stretti. */
.wizard-steps {
    display: flex; align-items: flex-start; gap: .35rem;
    margin-bottom: 2rem; overflow-x: auto; padding: .5rem .25rem .25rem;
}
.wizard-step {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    background: none; border: 0; padding: 0; flex: 1 1 0; min-width: 76px;
    cursor: not-allowed; opacity: .4;
}
.wizard-step.is-current, .wizard-step.is-done { cursor: pointer; opacity: 1; }
.wizard-step.is-done:hover .wizard-step-num { border-color: var(--dl-azure-d); }
.wizard-step:not(:last-child)::after {
    content: ''; position: absolute; top: 19px; left: calc(50% + 24px); right: calc(-50% + 24px);
    height: 2px; background: var(--dl-bd); z-index: 0; transition: background-color .25s ease;
}
.wizard-step.is-done:not(:last-child)::after { background: var(--dl-azure); }
.wizard-step-num {
    width: 38px; height: 38px; border-radius: 999px;
    background: var(--dl-bg-surface); border: 2px solid var(--dl-bd); color: var(--dl-tx-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .88rem; flex-shrink: 0;
    position: relative; z-index: 1;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.wizard-step.is-current .wizard-step-num {
    background: var(--dl-azure); border-color: var(--dl-azure); color: #fff;
    box-shadow: 0 0 0 4px var(--dl-azure-faint);
}
.wizard-step.is-done .wizard-step-num { background: var(--dl-azure-faint); border-color: var(--dl-azure); color: transparent; }
.wizard-step.is-done .wizard-step-num::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: var(--dl-azure) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/16px no-repeat;
}
.wizard-step-label { font-size: .72rem; font-weight: 600; text-align: center; color: var(--dl-tx-muted); line-height: 1.25; }
.wizard-step.is-current .wizard-step-label { color: var(--dl-tx-base); }

.wizard-progress { display: none; height: 5px; border-radius: 999px; background: var(--dl-bd); margin: -1rem 0 1.75rem; overflow: hidden; }
.wizard-progress-bar { height: 100%; background: linear-gradient(90deg, var(--dl-azure), var(--dl-azure-l)); border-radius: 999px; transition: width .3s ease; width: 0; }

@media (max-width: 767.98px) {
    .wizard-step-label { display: none; }
    .wizard-step.is-current .wizard-step-label {
        display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
        white-space: nowrap; margin-top: .2rem;
    }
    .wizard-progress { display: block; }
}

/* Pannelli: header con icona + titolo più leggibile, corpo con più respiro
   rispetto al padding stretto di default di Bootstrap (che dava l'effetto
   "schiacciato" lamentato), transizione morbida al cambio step. */
/* overflow:hidden qui (era per arrotondare gli angoli sotto .card-header) tagliava
   via la tendina dei suggerimenti città, che deve poter sporgere sotto la card:
   Bootstrap 5 arrotonda già da solo gli angoli di .card-header:first-child, quindi
   non serve comunque. */
.wizard-panel { border-color: var(--dl-bd); animation: wizard-panel-in .25s ease; }
@keyframes wizard-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wizard-panel-header {
    padding: 1.1rem 1.5rem; gap: .65rem; font-size: .95rem; font-weight: 700;
    color: var(--dl-tx-base); letter-spacing: .01em;
}
.wizard-panel-header svg { color: var(--dl-azure); flex-shrink: 0; }
.wizard-panel .card-body { padding: 1.85rem 1.5rem 2.1rem; }
@media (max-width: 575.98px) {
    .wizard-panel-header { padding: 1rem 1.15rem; }
    .wizard-panel .card-body { padding: 1.35rem 1.15rem 1.6rem; }
}

/* Barra di navigazione: resta agganciata in fondo allo scroll così i
   pulsanti Avanti/Indietro sono sempre a portata su form lunghi. */
#wizard-nav {
    position: sticky; bottom: 0; z-index: 20;
    background: var(--dl-bg); padding: 1rem 0 .25rem; margin-top: -.5rem;
    border-top: 1px solid var(--dl-bd);
}

/* Riepilogo finale: righe con separatore leggero invece del <dl> nudo. */
#wizard-riepilogo { row-gap: 0; }
#wizard-riepilogo dt, #wizard-riepilogo dd {
    padding: .7rem 0; margin: 0; border-bottom: 1px solid var(--dl-bd);
}
#wizard-riepilogo dt { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
#wizard-riepilogo dd { font-weight: 600; }

/* Servizi: chip selezionabili al posto della lista di checkbox compressa —
   stesso linguaggio visivo del filtro amenities in ricerca (.amenity-filter-toggle). */
.servizio-chip { position: relative; }
.servizio-chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.servizio-chip-label {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--dl-bd);
    background: var(--dl-bg-surface); color: var(--dl-tx-base);
    font-size: .82rem; font-weight: 600; line-height: 1.2;
    cursor: pointer; user-select: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.servizio-chip-label:hover { border-color: var(--dl-azure-l); }
.servizio-chip-check { display: none; flex-shrink: 0; }
.servizio-chip-input:checked + .servizio-chip-label {
    background: var(--dl-azure-faint); border-color: var(--dl-azure); color: var(--dl-azure-d);
}
.servizio-chip-input:checked + .servizio-chip-label .servizio-chip-check { display: inline-flex; }
.servizio-chip-input:focus-visible + .servizio-chip-label { outline: 2px solid var(--dl-azure); outline-offset: 2px; }

.servizi-check-gruppo { border-bottom: 1px solid var(--dl-bd); padding-bottom: .4rem; margin-bottom: .2rem; }
.servizi-check-gruppo:last-child { border-bottom: 0; }
.servizi-check-gruppo summary { list-style: none; }
.servizi-check-gruppo summary::-webkit-details-marker { display: none; }
.servizi-check-gruppo summary::before {
    content: ''; display: inline-block; width: 10px; height: 10px; flex-shrink: 0;
    border-right: 2px solid var(--dl-tx-muted); border-bottom: 2px solid var(--dl-tx-muted);
    transform: rotate(45deg); transition: transform .15s ease; margin-right: .15rem;
}
.servizi-check-gruppo[open] summary::before { transform: rotate(-135deg); }

/* Zona upload foto: più invitante della cornice tratteggiata minimale. */
#foto-dropzone {
    border-radius: var(--dl-radius-lg);
    background: var(--dl-bg);
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
#foto-dropzone:hover { border-color: var(--dl-azure-l) !important; background: var(--dl-azure-faint); }
#foto-dropzone.is-dragover { background: var(--dl-azure-faint); border-color: var(--dl-azure) !important; transform: scale(1.005); }

.foto-tile-inner { transition: box-shadow .15s ease, transform .15s ease; }
.foto-tile:hover .foto-tile-inner { box-shadow: var(--dl-shadow-md); transform: translateY(-2px); }