/* Deluxe Apartments · pagine ospite in stile SITO (deluxeapartments.it). Componenti condivisi.
   Carica DOPO mockup-sito-tokens.css. Cambia solo l'aspetto: markup, id e classi dei mockup restano quelli.
   Riferimenti al sito live (#dlxh): .btn 48 px 600 15 px raggio 4, .btn-secondary bordo inchiostro,
   .link sottolineato offset 3 px, .display-md 36/28 Cormorant 500, .title-serif 26/22 Cormorant 600,
   .label 13 px 500, .caption 12 px, .offer-band su pietra, header bianco caldo 96% + blur 12 px. */
html,body{background:var(--site-canvas);color:var(--site-body);font-family:var(--site-sans);font-size:16px;line-height:1.65;text-rendering:optimizeLegibility}
::selection{background:var(--site-primary-tint);color:var(--site-ink)}
:focus-visible{outline:2px solid var(--site-primary);outline-offset:2px}
b,strong{font-weight:700}
a{color:var(--site-primary);text-underline-offset:3px}

/* header: come .dh-header.is-solid del sito */
:root{--hh:76px}
.site-hd{height:var(--hh);background:rgba(250,250,248,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--site-hairline)}
.hd-in{max-width:1280px;padding:0 40px}
.logo img{height:30px}
.hd-ttl b{font:600 15px/1.25 var(--site-sans);color:var(--site-ink)}
.hd-ttl span{font-size:13px;color:var(--site-muted)}
.lang{background:transparent;padding:0;gap:4px}
.lang button{height:36px;min-width:36px;padding:0 6px;border-radius:0;background:transparent;color:var(--site-muted);font:500 14px/1 var(--site-sans);box-shadow:none!important;border-bottom:2px solid transparent}
.lang button[aria-pressed=true]{background:transparent;color:var(--site-ink);border-bottom-color:var(--site-brass)}
.demo-tag{border-radius:var(--site-r)}

/* titoli: serif del sito */
.pg-hd h1,.ghero h1{font:500 36px/1.12 var(--site-serif);letter-spacing:-.005em;color:var(--site-ink);text-wrap:balance}
.pg-hd p{color:var(--site-muted);font-size:16px;line-height:1.65;text-wrap:pretty}
.box h2,.sec>h2,.panel h2{font:600 24px/1.2 var(--site-serif);color:var(--site-ink);letter-spacing:0}
.box h2 .opt,.sec>h2 small{font-family:var(--site-sans)}
.eyebrow,.pg-hd .kicker{font:500 12px/1.2 var(--site-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--site-muted)}

/* superfici: niente card arrotondate da app, filetti sottili come il sito */
.box,.panel,.tile{border-radius:var(--site-r);border-color:var(--site-hairline);box-shadow:none}
.tile .ti{border-radius:var(--site-r);background:var(--site-primary-tint);color:var(--site-primary)}
.tile:hover{border-color:var(--site-ink)}

/* hero: il «momento scuro» del sito (primary-deep), titolo serif chiaro, dettagli ottone */
.ghero{background:var(--site-primary-deep);border-radius:var(--site-r);color:var(--site-on-primary)}
.ghero h1{color:var(--site-on-primary)}
.ghero .sub,.ghero .cd span,.ghero .when .n{color:var(--site-on-dark-muted)}
.ghero .when .ic,.ghero .hpill .ic{color:var(--site-brass-on-dark)}
.ghero .cd b{font-family:var(--site-serif);font-weight:500;font-variant-numeric:lining-nums}

/* bottoni: .btn / .btn-primary / .btn-secondary del sito */
.btn{border-radius:var(--site-r);font:600 15px/1 var(--site-sans);letter-spacing:.005em;background:transparent;border:1px solid var(--site-ink);color:var(--site-ink);transition:background .25s var(--site-ease),color .25s var(--site-ease),transform .15s var(--site-ease)}
.btn:hover{background:var(--site-ink);color:var(--site-on-primary);border-color:var(--site-ink)}
.btn.primary{background:var(--site-primary);border-color:var(--site-primary);color:var(--site-on-primary)}
.btn.primary:hover{background:var(--site-primary-active);border-color:var(--site-primary-active)}
.btn.ghost{border-color:transparent;color:var(--site-primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:500}
.btn.ghost:hover{background:transparent;color:var(--site-primary-active);text-decoration-thickness:2px}
.btn.danger{border-color:var(--site-error);color:var(--site-error);background:transparent}
.btn.danger:hover{background:var(--site-error);color:#fff}
.btn.lg{height:48px;padding:0 24px;font-size:15px}
.btn.sm{height:36px;padding:0 14px;font-size:14px;border-radius:var(--site-r)}
.btn:disabled,.btn[aria-disabled=true]{background:var(--site-hairline);border-color:var(--site-hairline);color:var(--site-muted)}
.btn.on-dark{border-color:rgba(250,250,248,.5);color:var(--site-on-primary)}
.btn.on-dark:hover{background:var(--site-on-primary);color:var(--site-primary)}

/* campi */
.input,.select,.textarea,.input-group{border-radius:var(--site-r);border-color:var(--site-muted-soft);background:var(--site-surface)}
.fld>label,.fld>.lb{font:500 14px/1.3 var(--site-sans);color:var(--site-ink)}

/* pillole, avvisi, chip: forme del sito (pill solo per chip/filtri) */
.pill{font-weight:500}
.alert{border-radius:var(--site-r);line-height:1.55}
.alert.info{background:var(--site-stone);color:var(--site-ink)}
.alert.info .ic{color:var(--site-primary)}
.chip[aria-pressed=true]{background:var(--site-ink);border-color:var(--site-ink)}
.seg{border-radius:var(--site-r)} .seg button{border-radius:2px}
dialog{border-radius:var(--site-r);box-shadow:var(--site-float)}

/* passi del wizard: filetto blu e cerchio ottone sul fatto */
.wsteps li.on{border-top-color:var(--site-primary)} .wsteps li.on .n{background:var(--site-primary)}

/* piè di pagina in stile footer del sito, versione compatta */
.foot{color:var(--site-muted);font-size:13px}
.site-ft{background:var(--site-primary-deep);color:var(--site-on-dark-muted);margin-top:64px;padding:40px 40px 32px;font-size:14px;line-height:1.6}
.site-ft .in{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.site-ft img{height:26px;width:auto;display:block}
.site-ft a{color:var(--site-on-primary)}
.site-ft p{margin:0}

@media (max-width:760px){
  :root{--hh:64px}
  .hd-in{padding:0 20px}
  .logo img{height:24px}
  .pg-hd h1,.ghero h1{font-size:28px;line-height:1.15}
  .box h2,.sec>h2,.panel h2{font-size:22px}
  .site-ft{padding:32px 20px calc(28px + env(safe-area-inset-bottom));margin-top:48px}
}
@media print{.site-ft{background:none;color:var(--site-muted);padding:16px 0;margin-top:24px}.site-ft img{filter:none}}

/* icone in riquadro (portale, check-in, pagamento…): quadrate col raggio del sito, niente cerchi colorati da app */
.ti{border-radius:var(--site-r)!important}
.todo-l .ti{background:var(--site-stone);color:var(--site-brass)}
.conc .ti{background:var(--site-stone);color:var(--site-brass)}
.done .ti,.ok .ti{background:#e8f2ec;color:var(--site-success)}
/* filtri e chip = filter-chip del sito (attiva in inchiostro) */
.filters button{border-color:var(--site-hairline-strong);background:transparent}
.filters button[aria-pressed=true]{background:var(--site-ink);border-color:var(--site-ink)}
/* barra fissa in basso (wizard): bianco caldo con blur come l'header del sito */
.sticky-cta{background:rgba(250,250,248,.96)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top-color:var(--site-hairline)!important}
.wsteps-m b{font-family:var(--site-sans)}
.wsteps-m .bar i{background:var(--site-primary)}
.kv dt{color:var(--site-muted)} .kv dd{color:var(--site-ink)}
.lines .am{color:var(--site-ink)}
@media (max-width:760px){.hd-in:has(.hd-back) .logo img{height:20px}}
.btn:disabled,.btn[aria-disabled=true]{background:var(--site-stone)!important;border-color:var(--site-hairline)!important;color:var(--site-muted)!important}
.sticky-cta .btn{min-width:0;padding:0 12px;white-space:normal;line-height:1.15;text-align:center}
.box.res h1,.res h1{font:500 32px/1.15 var(--site-serif);color:var(--site-ink)}
@media (max-width:760px){.box.res h1,.res h1{font-size:28px}}