/* InfoIschia Hotel Detail Page Styles
Extracted from hotel_detail.html inline styles for maintainability.
Linked only by the hotel detail template. */
/* ============================================
CSS VARIABLES (inherits from common.css)
============================================ */
:root {
--primary: #1e3c72;
--primary-dark: #152a4f;
--secondary: #2a5298;
--accent: #f5a623;
--accent-hover: #e09000;
--light-bg: #f8f9fa;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
--shadow-md: 0 4px 20px rgba(0,0,0,0.12);
--shadow-lg: 0 8px 30px rgba(0,0,0,0.15);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
/* === Palette redesign 2026-04-22 === */
--cta-orange: #f5a623; /* CTA "Salva Preventivo" */
--cta-orange-hover: #d98f0e; /* hover CTA */
--price-amber: #e08b1a; /* prezzo principale, bordi card selezionata */
--price-struck: #8b3a2f; /* prezzo barrato + badge -% */
--supplement-neutral: #495057; /* supplementi, prezzi/notte, trattamento non sel. */
--badge-best-green: #3d8a5e; /* badge "Miglior prezzo" */
--savings-bg: #e8f5ea; /* banda risparmio sticky */
--savings-text: #1e6b2e; /* testo banda risparmio */
--savings-border: #c8e6cd; /* bordo banda risparmio */
--card-selected-bg: #fdf8f0; /* bg card camera/trattamento selezionata */
/* === T.60.g — Calendar tokens (owner mockup) === */
--ii-cal-avail-bg: #e8f3ee;
--ii-cal-avail-text: #2a6a47;
--ii-cal-range-bg: rgba(30,60,114,0.10);
--ii-cal-range-fill: #1e3c72;
/* === T.62.c — Modal mobile tokens (owner mockup) === */
/* T.62.h (owner): beige #f5f1ea sembrava saturo → token neutri freddi (grigio chiaro). */
--ii-hair: #e7e7eb; /* separatori sottili (era #e5e1d8 warm) */
--ii-bg-soft: #f4f5f8; /* body / room row (era #f5f1ea beige warm) */
--ii-ink1: #1a1a1a; /* testo principale */
--ii-ink3: #6b6b6b; /* testo secondario (era #8a8a8a, alzato per WCAG AA su testi piccoli) */
--ink3: #6b6b6b; /* alias usato da var(--ink3, …) sparsi nel file (prima non definito → fallback #8a8a8a) */
/* === Leggibilità — token line-height (additivi, nessun effetto finché non referenziati) === */
--lh-tight: 1.15; /* titoli/prezzi a riga singola */
--lh-base: 1.5; /* testo corrente */
--lh-relaxed: 1.65; /* paragrafi lunghi */
}
/* ============================================
T.60.g — Calendar custom (owner mockup)
Grafica pura HTML/CSS, no flatpickr dependency.
La logica di stato (available/range) viene applicata via classi
.day.is-available, .day.is-unavailable, .day.is-range-start, .is-range-end, .is-range-middle
dal renderer JS (logica server-side esistente: window.availableArrivals, window.blockedDates).
============================================ */
.ii-cal { font-family: inherit; }
.ii-cal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ii-cal__title { font-size: 15px; font-weight: 800; color: var(--primary, #1e3c72); margin: 0; }
.ii-cal__nav { width: 30px; height: 30px; border-radius: 50%; background: #f5f1ea; color: var(--primary, #1e3c72); border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s; font-size: 14px; line-height: 1; }
.ii-cal__nav:hover { background: var(--primary, #1e3c72); color: #fff; }
.ii-cal__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.ii-cal__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.ii-cal__weekday { font-size: 10.5px; font-weight: 800; color: #6b6b6b; letter-spacing: 0.6px; text-align: center; padding: 4px 0; text-transform: uppercase; }
.ii-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ii-cal__day-empty { padding: 8px 0; }
.day { padding: 8px 0; text-align: center; font-size: 13px; font-weight: 600; border-radius: 6px; transition: background .12s; user-select: none; }
.day.is-available { background: var(--ii-cal-avail-bg); color: var(--ii-cal-avail-text); cursor: pointer; }
.day.is-available:hover { background: #d4e9dc; }
.day.is-unavailable { background: transparent; color: #8a8a8a; opacity: 0.4; cursor: not-allowed; }
.day.is-range-start { background: var(--ii-cal-range-fill); color: #fff; font-weight: 800; border-radius: 6px 0 0 6px; }
.day.is-range-end { background: var(--ii-cal-range-fill); color: #fff; font-weight: 800; border-radius: 0 6px 6px 0; }
.day.is-range-middle { background: var(--ii-cal-range-bg); color: var(--primary, #1e3c72); border-radius: 0; }
/* ============================================
T.63 (2026-05-29) — Box età bambini (riquadro con badge numerato)
Mockup "Date e ospiti" Image #2. Una riga per bambino.
============================================ */
.hd-bp-ages { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; background: #fff; border: 1px solid var(--ii-hair, #e7e7eb); border-radius: 8px; padding: 8px 10px; }
.hd-bp-age-row { display: flex; align-items: center; gap: 10px; }
.hd-bp-age-badge { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #e8efff; color: var(--primary, #1e3c72); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.hd-bp-age-label { flex: 1 1 auto; font-size: 13px; font-weight: 700; color: var(--ii-ink1, #1a1a1a); }
.hd-bp-age-row .hd-bp-age-select { flex: 0 0 auto; background: #f4f5f8; border: 1px solid var(--ii-hair, #e7e7eb); border-radius: 6px; color: var(--primary, #1e3c72); font-size: 12.5px; font-weight: 700; padding: 6px 26px 6px 10px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-position: right 8px center; background-repeat: no-repeat; background-size: 10px; }
/* ============================================
T.62.c — Modal "Date e ospiti" mobile restyle (owner mockup)
Viewport: <576px. Riusa classi .hd-bp-* esistenti, solo CSS.
Logica selezione date / multi-room / età INVARIATA.
============================================ */
@media (max-width: 575.98px) {
/* Full-screen sheet bianco.
T.63.b (2026-05-29) FIX iOS header tagliato: `100vh` su iOS = viewport GRANDE
(barra indirizzi nascosta), più alto dell'area visibile → con il dialog
`modal-dialog-centered` l'header (titolo+X+Reset) finiva NASCOSTO sotto la barra
indirizzi e il footer in basso. Fix: `100dvh` (dynamic viewport height = area
realmente visibile, segue la barra indirizzi) con fallback `vh` per browser
vecchi, + `align-items: flex-start` per ancorare lo sheet in ALTO (non centrato)
così header e footer restano sempre dentro lo schermo. */
.modal-dialog.modal-xl, .modal-dialog.modal-lg { margin: 0 !important; max-width: 100% !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; align-items: flex-start !important; }
.hd-bp-modal { border-radius: 0 !important; box-shadow: none !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; display: flex; flex-direction: column; background: #fff !important; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* HEADER sticky top: X | "Date e ospiti" | Reset
T.62.h (owner): padding ridotto 10×16 per meno spazio sopra. */
.hd-bp-modal__header { flex-shrink: 0; padding: 10px 16px !important; background: #fff !important; border-bottom: 1px solid var(--ii-hair, #e5e1d8) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; position: relative; gap: 0; }
.hd-bp-modal__heading { flex: 1; justify-content: center; align-items: center; gap: 0; }
/* 2026-06-07 owner: testo/box modale "Date e ospiti" ingranditi (mobile). */
.hd-bp-modal__title { font-size: 16px !important; font-weight: 800 !important; color: var(--primary, #1e3c72) !important; }
.hd-bp-modal__subtitle { display: none !important; }
.hd-bp-modal__header .btn-close { position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%); margin: 0 !important; padding: 0 !important; filter: none !important; background: none !important; border: 0 !important; opacity: 1 !important; color: var(--ii-ink1, #1a1a1a) !important; width: 24px; height: 24px; font-size: 20px; line-height: 1; }
.hd-bp-modal__header .btn-close::before { content: '×'; }
.hd-bp-modal__header .btn-close * { display: none; }
.hd-bp-modal__reset-mobile { display: inline-block !important; position: absolute !important; right: 16px !important; top: 50% !important; transform: translateY(-50%); background: none !important; border: 0 !important; color: var(--secondary, #2a5298) !important; font-size: 11px !important; font-weight: 600 !important; padding: 4px 0 !important; }
/* BODY — T.63.d (2026-05-29 owner): scroll FALLBACK riabilitato sul mobile.
T.63.c aveva bloccato lo scroll (overflow:hidden) per evitare il jitter della barra
indirizzi iOS, ma su schermi corti (iPhone SE / barra URL visibile) il contenuto
NON entrava nel viewport e veniva COPERTO/TAGLIATO senza modo di raggiungerlo.
Fix: overflow-y:auto + overscroll-behavior:contain. Header/footer sono sibling del
body (flex-shrink:0), quindi lo scroll è solo interno e non li sposta mai;
`contain` blocca la propagazione al documento → niente rubber-band/jitter barra URL.
Su schermi alti non scrolla (contenuto entra); su schermi corti scrolla e niente
resta tagliato. Validato: viewport 600px → 113px scrollabili, header+footer fissi. */
.hd-bp-modal__body { flex: 1 1 auto; overflow-y: auto !important; min-height: 0; padding: 12px !important; background: #fff !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* RECAP PILL sotto header — T.62.i: padding 6×12, margin top -12 (= negativo body padding),
margin-bottom 4 (era 8). Riduce drasticamente spazio header→composizione. */
.hd-bp-summary { padding: 6px 12px !important; margin: -12px -12px 4px !important; border-bottom: 0 !important; background: #fff; gap: 6px !important; flex-wrap: wrap; min-height: 0; }
/* Se la summary è completamente vuota (no pill, no notti, no guests) la nasconde. */
.hd-bp-summary:has(.hd-bp-summary__date-pill.is-empty:only-child) { display: none !important; }
.hd-bp-summary__pills { gap: 6px !important; align-items: center; }
.hd-bp-summary__date-pill { padding: 5px 10px !important; background: var(--primary, #1e3c72) !important; color: #fff !important; border-radius: 999px !important; font-size: 10.5px !important; font-weight: 700 !important; display: inline-flex; align-items: center; gap: 5px; }
.hd-bp-summary__date-pill i { font-size: 10px; }
/* T.62.e (owner): mobile no-date → pill completamente nascosta (no fallback testo). */
.hd-bp-summary__date-pill.is-empty { display: none !important; }
.hd-bp-summary__meta { font-size: 10px !important; color: var(--ii-ink3, #8a8a8a) !important; font-weight: 600; }
/* Hide chip ospiti (info è nella sezione Composizione) e Cancella tutto (Reset header). */
.hd-bp-summary__meta--guests, #hdBpSummaryRooms { display: none !important; }
.hd-bp-summary__reset { display: none !important; }
/* BOX "COMPOSIZIONE OSPITI" — card bianca. T.62.h: meno spazio (padding 10, mb 10). */
.hd-bp-rooms-card { background: #fff !important; border-radius: 10px !important; padding: 10px !important; margin-bottom: 10px !important; border: 0 !important; }
.hd-bp-rooms-card__header { gap: 10px !important; margin-bottom: 10px !important; align-items: flex-start; }
.hd-bp-rooms-card__title { font-size: 16px !important; font-weight: 800 !important; color: var(--primary, #1e3c72) !important; }
.hd-bp-rooms-card__subtitle { font-size: 11px !important; color: var(--ii-ink3, #8a8a8a) !important; margin-top: 2px !important; }
.hd-bp-rooms-card__footer { display: none !important; /* info "Puoi aggiungere ancora N camere" nascosto in mobile, già nel subtitle. */ }
/* + Aggiungi camera (outline → disabled state quando rooms === max) */
.hd-bp-add-room-btn { border: 1.5px solid var(--primary, #1e3c72) !important; background: #fff !important; padding: 6px 11px !important; border-radius: 999px !important; font-size: 10.5px !important; font-weight: 700 !important; color: var(--primary, #1e3c72) !important; }
.hd-bp-add-room-btn__dot { display: none; }
.hd-bp-add-room-btn::before { content: '+'; font-weight: 800; font-size: 13px; margin-right: 4px; }
.hd-bp-add-room-btn:disabled { background: var(--ii-bg-soft, #f5f1ea) !important; border-color: var(--ii-hair, #e5e1d8) !important; color: var(--ii-ink3, #8a8a8a) !important; cursor: default !important; }
/* ROW SINGOLA CAMERA — T.62.g (owner mockup Image #10): bg light beige #f5f1ea,
NO border. Il contrasto col card esterna bianca evidenzia la singola camera. */
.hd-bp-room { background: var(--ii-bg-soft, #f5f1ea) !important; border: 0 !important; border-radius: 8px !important; padding: 10px 12px !important; gap: 8px !important; flex-direction: column !important; align-items: stretch !important; position: relative; margin-bottom: 8px; }
.hd-bp-room:last-child { margin-bottom: 0; }
/* Riga 1: titolo + remove */
.hd-bp-room__info { min-width: 0 !important; padding-right: 36px; /* leave space for remove btn */ }
.hd-bp-room__name { font-size: 13px !important; font-weight: 800 !important; color: var(--primary, #1e3c72) !important; display: inline; }
/* Meta inline accanto al nome (es. " · 2 adulti, 1 bambino") */
.hd-bp-room__meta { font-size: 12px !important; color: var(--ii-ink3, #8a8a8a) !important; font-weight: 600 !important; display: inline; margin-top: 0 !important; }
.hd-bp-room__meta::before { content: ' · '; }
/* Remove btn */
.hd-bp-room__remove { position: absolute !important; top: 8px !important; right: 8px !important; width: 26px !important; height: 26px !important; border: 1px solid var(--ii-hair, #e5e1d8) !important; background: #fff !important; color: #4a4a4a !important; border-radius: 50% !important; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.hd-bp-room__remove i { font-size: 10px; }
/* Riga 2: stepper Adulti + Bambini in 2 colonne 1fr 1fr */
.hd-bp-room__counters { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100%; }
/* Counter wrapper = card bianca con bordo light. */
/* T.63.e (2026-05-29 owner): campi Adulti/Bambini più ALTI su mobile (touch comfort).
padding verticale 4→9px + bottoni 24→28px = field height ~46px. */
.hd-bp-counter { flex: initial !important; min-width: 0 !important; background: #fff; border: 1px solid var(--ii-hair, #e5e1d8); border-radius: 8px; padding: 12px 12px; display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 0 !important; }
.hd-bp-counter__label { font-size: 13px !important; font-weight: 800 !important; color: var(--ii-ink3, #8a8a8a) !important; letter-spacing: 0.4px !important; text-transform: uppercase; }
.hd-bp-counter__row { background: transparent !important; padding: 0 !important; gap: 7px !important; }
/* T.62.f (owner): btn +/- bg #f4f5f8 leggero (era beige), interno bianco. */
.hd-bp-counter__btn { width: 33px !important; height: 33px !important; border-radius: 8px !important; border: 0 !important; background: #f4f5f8 !important; color: var(--primary, #1e3c72) !important; font-size: 18px !important; font-weight: 800 !important; box-shadow: none !important; padding: 0; }
.hd-bp-counter__btn:disabled { opacity: 0.4 !important; }
.hd-bp-counter__val { font-size: 16px !important; font-weight: 800 !important; color: var(--ii-ink1, #1a1a1a) !important; min-width: 18px !important; }
/* Riga 3 (T.62.f owner): chip età bambini AUTO-width, non full.
Restano nella stessa grid 2 colonne dei counter ADULTI/BAMBINI
(3° figlio = età primo bambino, 4° = età secondo, ecc). */
.hd-bp-room__counters > .hd-bp-counter:nth-child(n+3) {
background: #fff;
border: 1px solid var(--ii-hair, #e5e1d8);
border-radius: 6px;
padding: 3px 7px 3px 9px;
flex-direction: row !important;
gap: 5px !important;
font-size: 9.5px;
}
.hd-bp-room__counters > .hd-bp-counter:nth-child(n+3) .hd-bp-counter__label {
font-size: 9.5px !important;
font-weight: 700 !important;
letter-spacing: 0.2px !important;
text-transform: none;
}
.hd-bp-age-select { background: none !important; border: 0 !important; color: var(--primary, #1e3c72) !important; font-size: 10.5px !important; font-weight: 800 !important; padding: 0 12px 0 2px !important; outline: none !important; min-width: 0 !important; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,") !important; background-position: right center !important; background-repeat: no-repeat !important; background-size: 10px !important; }
/* T.63 — riquadro età full-width sotto i counter, fuori dalla grid 2-col. */
.hd-bp-ages { margin-top: 8px; padding: 11px 12px; gap: 8px; }
.hd-bp-age-row { gap: 10px; }
.hd-bp-age-badge { width: 26px !important; height: 26px !important; font-size: 13px !important; }
.hd-bp-age-label { font-size: 14.5px; font-weight: 700; }
.hd-bp-age-row .hd-bp-age-select { font-size: 14px; padding: 8px 28px 8px 11px; }
/* DIVIDER "Ora scegli le date" — T.62.h: margin più stretto 10/8. */
.hd-bp-divider { margin: 10px 0 8px !important; display: flex; align-items: center; gap: 10px; }
.hd-bp-divider::before, .hd-bp-divider::after { content: ''; flex: 1; height: 1px; background: var(--ii-hair, #e5e1d8); position: static; }
.hd-bp-divider span { background: transparent !important; padding: 0 !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.5px !important; color: var(--ii-ink3, #8a8a8a) !important; text-transform: uppercase !important; }
/* BOX CALENDARIO (1 mese, design tokens da T.60.g già definiti) */
.hd-bp-calendar .calendar-container { background: #fff !important; border-radius: 10px !important; padding: 14px !important; border: 0 !important; }
/* Flatpickr overrides — header mese + frecce coerenti con tokens. */
.hd-bp-calendar .flatpickr-months { margin-bottom: 14px !important; padding: 0 !important; }
.hd-bp-calendar .flatpickr-current-month { font-size: 13.5px !important; color: var(--ii-ink1, #1a1a1a) !important; font-weight: 800 !important; }
.hd-bp-calendar .flatpickr-current-month .cur-month,
.hd-bp-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.hd-bp-calendar .flatpickr-current-month input.cur-year { font-size: 13.5px !important; color: var(--ii-ink1, #1a1a1a) !important; font-weight: 800 !important; }
.hd-bp-calendar .flatpickr-prev-month, .hd-bp-calendar .flatpickr-next-month {
width: 30px !important; height: 30px !important; border-radius: 50% !important;
background: var(--ii-bg-soft, #f5f1ea) !important; border: 0 !important;
color: var(--primary, #1e3c72) !important;
display: flex !important; align-items: center; justify-content: center;
}
.hd-bp-calendar .flatpickr-prev-month svg, .hd-bp-calendar .flatpickr-next-month svg { width: 14px; height: 14px; fill: var(--primary, #1e3c72); }
/* T.62.d — Header mese flatpickr: titolo compatto "Luglio 2026" senza spazi
(era split "Luglio" + dropdown + input year con gap). */
.hd-bp-calendar .flatpickr-current-month { gap: 4px !important; font-size: 13.5px !important; }
.hd-bp-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.hd-bp-calendar .flatpickr-current-month input.cur-year { padding: 0 !important; margin: 0 !important; min-width: 0 !important; }
/* T.62.d — Day cells: stati available/unavailable più contrastati nel mobile.
.available-arrival = giorno cliccabile → verde (token --ii-cal-avail-bg).
Tutto il resto (non-available, non-selected, non-in-range) = grey opacity 0.4. */
.hd-bp-calendar .flatpickr-day { color: var(--ii-ink3, #8a8a8a) !important; opacity: 0.4; cursor: not-allowed; background: transparent !important; }
.hd-bp-calendar .flatpickr-day.available-arrival,
.hd-bp-calendar .flatpickr-day.valid-checkout {
background: var(--ii-cal-avail-bg, #e8f3ee) !important;
color: var(--ii-cal-avail-text, #2a6a47) !important;
opacity: 1 !important;
cursor: pointer !important;
font-weight: 700 !important;
}
.hd-bp-calendar .flatpickr-day.selected,
.hd-bp-calendar .flatpickr-day.startRange,
.hd-bp-calendar .flatpickr-day.endRange {
background: var(--ii-cal-range-fill, #1e3c72) !important;
color: #fff !important;
opacity: 1 !important;
font-weight: 800 !important;
}
.hd-bp-calendar .flatpickr-day.inRange {
background: var(--ii-cal-range-bg, rgba(30,60,114,0.10)) !important;
color: var(--primary, #1e3c72) !important;
opacity: 1 !important;
}
.hd-bp-calendar .flatpickr-day.flatpickr-disabled { color: var(--ii-ink3, #8a8a8a) !important; opacity: 0.4 !important; cursor: not-allowed !important; background: transparent !important; }
.hd-bp-calendar .flatpickr-day.prevMonthDay,
.hd-bp-calendar .flatpickr-day.nextMonthDay { visibility: hidden; }
/* T.62.n (owner spec finale): tipografia & geometria calendar uniformata.
Day cells 13/600, padding 8px 0, border-radius 6, gap 4.
Available: bg #e8f3ee color #2a6a47.
Unavailable: bg transparent color #8a8a8a opacity 0.4.
Range start/end: bg #1e3c72 color #fff fw 800.
Range middle: bg rgba(30,60,114,0.10) color #1e3c72.
Title 15/800/#1a1a1a · Frecce 30×30 round bg #f5f1ea svg 14 navy
· Weekday 10.5/800/#8a8a8a ls 0.6. */
.hd-bp-calendar .flatpickr-day { font-size: 13px !important; font-weight: 600 !important; padding: 9px 0 !important; height: auto !important; line-height: 1.2 !important; margin: 1px 0 !important; max-width: none !important; border-radius: 6px !important; }
.hd-bp-calendar .flatpickr-days, .hd-bp-calendar .dayContainer { gap: 4px !important; }
.hd-bp-calendar .flatpickr-weekday { font-size: 10.5px !important; font-weight: 800 !important; color: #6b6b6b !important; letter-spacing: 0.6px !important; padding: 4px 0 !important; height: auto !important; }
.hd-bp-calendar .calendar-container { padding: 14px !important; }
.hd-bp-calendar .flatpickr-current-month { font-size: 17px !important; font-weight: 800 !important; color: var(--ii-ink1, #1a1a1a) !important; }
.hd-bp-calendar .flatpickr-current-month .cur-month,
.hd-bp-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.hd-bp-calendar .flatpickr-current-month input.cur-year { font-size: 17px !important; font-weight: 800 !important; color: var(--ii-ink1, #1a1a1a) !important; }
.hd-bp-calendar .flatpickr-months { margin-bottom: 14px !important; }
.hd-bp-calendar .flatpickr-prev-month, .hd-bp-calendar .flatpickr-next-month { width: 30px !important; height: 30px !important; border-radius: 50% !important; background: #f5f1ea !important; color: var(--primary, #1e3c72) !important; }
.hd-bp-calendar .flatpickr-prev-month svg, .hd-bp-calendar .flatpickr-next-month svg { width: 14px !important; height: 14px !important; fill: var(--primary, #1e3c72) !important; }
/* T.62.r — STANDARD GRIGLIA CALENDARIO RESPONSIVE (tutti gli smartphone).
BUG (Android ~360px / iPhone SE 320px): la 7ª colonna (DOM) veniva tagliata
fuori a destra. Causa: le celle .flatpickr-day hanno width:42px fissa
(.inline-calendar regola base, riga ~837). In una grid `repeat(7, 1fr)`
l'1fr è `minmax(auto, 1fr)`: il minimo `auto` = min-content della cella =
42px fissi → su viewport stretti (7×46+gap ≈ 346px > ~308px disponibili)
le track NON si restringono e la griglia deborda; .flatpickr-days {overflow:hidden}
clippa l'ultima colonna.
FIX standard: `minmax(0, 1fr)` consente alle colonne di scendere sotto il
min-content, e le celle diventano fluide (width:100%) riempiendo la propria
track. Specificità .hd-bp-calendar.inline-calendar (0,3,0) per vincere sulla
regola base .inline-calendar .flatpickr-day (0,2,0) a prescindere dall'ordine.
Risultato: 7 colonne sempre uguali e visibili da 320px in su. */
.hd-bp-calendar.inline-calendar .flatpickr-weekdaycontainer,
.hd-bp-calendar.inline-calendar .dayContainer {
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}
.hd-bp-calendar.inline-calendar .flatpickr-days { width: 100% !important; }
.hd-bp-calendar.inline-calendar .flatpickr-day {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex-basis: auto !important;
margin: 0 !important;
}
/* T.62.d — Divider "ORA SCEGLI LE DATE" linee laterali ::before/::after
(era solo background centrale, no linee). */
.hd-bp-divider { display: flex !important; align-items: center !important; gap: 10px !important; margin: 16px 0 10px !important; }
.hd-bp-divider::before, .hd-bp-divider::after { content: '' !important; flex: 1 !important; height: 1px !important; background: var(--ii-hair, #e5e1d8) !important; position: static !important; left: auto !important; right: auto !important; top: auto !important; }
.hd-bp-divider span { background: transparent !important; padding: 0 !important; font-size: 9px !important; font-weight: 800 !important; color: var(--ii-ink3, #8a8a8a) !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; }
/* T.62.d — Bottone Conferma SEMPRE amber pieno (no disabled visual). */
.hd-bp-btn--primary { opacity: 1 !important; }
.hd-bp-btn--primary:disabled { opacity: 1 !important; box-shadow: 0 3px 12px rgba(245,166,35,0.35) !important; background: var(--accent, #f5a623) !important; cursor: pointer !important; }
/* STICKY BOTTOM (CTA) — T.62.i: bottoni più piccoli. */
.hd-bp-modal__footer { flex-shrink: 0; padding: 8px 12px 10px !important; background: #fff !important; border-top: 1px solid var(--ii-hair, #e5e1d8) !important; box-shadow: 0 -4px 16px rgba(0,0,0,0.06) !important; display: flex !important; gap: 8px !important; }
.hd-bp-modal__footer-hint { display: none !important; }
/* T.62.p / T.62.q (owner): footer mobile entrambi i bottoni allineati a destra.
L'element è un