/*
 * EasyVacanze — regole comuni a tutti i temi pubblici (sito, B&B, prenotazione).
 * Va caricato dopo Tailwind. Ogni tema può impostare nel proprio layout:
 *   --ev-accent, --ev-on-accent   colore di evidenza (giorno scelto nel calendario, link nei contenuti)
 *   --ev-ink, --ev-muted, --ev-line, --ev-surface, --ev-surface-alt
 *   --ev-radius                   raggio di calendario e riquadri
 *   --ev-font-display             carattere dei titoli nei contenuti
 */
:root {
    --ev-accent: #0051d5;
    --ev-on-accent: #ffffff;
    --ev-ink: #0b1c30;
    --ev-muted: #45464d;
    --ev-line: #d9dce3;
    --ev-surface: #ffffff;
    --ev-surface-alt: #f3f6fc;
    --ev-radius: 14px;
    --ev-font-display: inherit;
}

/* ------------------------------------------------------------------
   1. La pagina non scorre mai in orizzontale (un elemento largo non deve
      rimpicciolire o spostare tutto il sito sul telefono)
   ------------------------------------------------------------------ */
body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* ------------------------------------------------------------------
   2. Calendario (flatpickr)
   ------------------------------------------------------------------ */
.flatpickr-calendar {
    font-family: inherit;
    border-radius: var(--ev-radius);
    touch-action: manipulation;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--ev-ink);
    font-weight: 600;
}
.flatpickr-current-month { font-size: 15px; padding-top: 9px; }
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background-image: none;
    padding: 0 2px;
    border: 0;
    font-size: inherit;
    line-height: inherit;
    box-shadow: none;
}
.flatpickr-current-month input.cur-year { padding: 0 0 0 4px; border: 0; box-shadow: none; font-size: inherit; }
.flatpickr-months { position: relative; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { padding: 12px; }
span.flatpickr-weekday { color: var(--ev-muted); font-weight: 600; }
.flatpickr-day { color: var(--ev-ink); border-radius: 10px; }
.flatpickr-day.today { border-color: var(--ev-line); }
.flatpickr-day:hover,
.flatpickr-day:focus { background: var(--ev-surface-alt); border-color: var(--ev-surface-alt); }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
    background: var(--ev-accent);
    border-color: var(--ev-accent);
    color: var(--ev-on-accent);
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange { border-radius: 10px 0 0 10px; }
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange { border-radius: 0 10px 10px 0; }
.flatpickr-day.selected.startRange.endRange { border-radius: 10px; }
.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
    background: var(--ev-surface-alt);
    border-color: var(--ev-surface-alt);
    box-shadow: -5px 0 0 var(--ev-surface-alt), 5px 0 0 var(--ev-surface-alt);
    border-radius: 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 var(--ev-accent); }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: rgba(69, 70, 77, 0.32); text-decoration: line-through; }
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: rgba(69, 70, 77, 0.45); }
/* Con due mesi affiancati flatpickr segna le celle vuote con la classe "hidden" (per lui: invisibili ma presenti).
   La stessa classe in Tailwind vuol dire display:none: le celle sparivano e i giorni finivano sotto il giorno
   della settimana sbagliato. Qui restano al loro posto, solo invisibili. */
.flatpickr-calendar .flatpickr-day.hidden { display: inline-block !important; visibility: hidden; }

/* Intestazione del calendario (titolo e chiusura) e fondo scurito: solo sul telefono */
.ev-cal-head { display: none; }
.ev-cal-backdrop { display: none; }

/* Telefono (anche in orizzontale): il calendario si apre sempre al centro dello schermo, su fondo
   scurito. Non dipende dalla posizione del campo né dallo scorrimento: non può finire fuori vista. */
@media (max-width: 639.98px), (max-height: 480px) {
    .flatpickr-calendar.open:not(.inline):not(.static) {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        animation: none !important;
        max-height: calc(100vh - 16px);
        overflow-y: auto;
        box-shadow: 0 24px 48px rgba(11, 28, 48, 0.3);
        z-index: 100000;
    }
    .ev-cal-backdrop.is-on {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: rgba(11, 28, 48, 0.55);
        touch-action: none;
    }
    .flatpickr-calendar.open:before,
    .flatpickr-calendar.open:after { display: none; }
    .flatpickr-innerContainer { padding-bottom: 6px; }
    .ev-cal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 8px 6px 16px;
        border-bottom: 1px solid var(--ev-line);
        margin-bottom: 4px;
        color: var(--ev-ink);
        font-size: 15px;
        font-weight: 600;
    }
    .ev-cal-close {
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--ev-muted);
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }
    .ev-cal-close:active { background: var(--ev-surface-alt); }
}

/* Esito della verifica di disponibilità nella scheda di prenotazione dell'alloggio */
#availabilityBadge { font-weight: 600; line-height: 1.3; }
#availabilityBadge.bg-secondary { background: var(--ev-surface-alt); color: var(--ev-muted); }
#availabilityBadge.bg-success { background: #dcfce7; color: #166534; }
#availabilityBadge.bg-danger { background: #fee2e2; color: #991b1b; }
#availabilityBadge.bg-warning { background: #fef3c7; color: #92400e; }

/* ------------------------------------------------------------------
   3. Contenuti scritti dall'editor delle pagine (.cms-content)
   ------------------------------------------------------------------ */
.cms-content { color: var(--ev-ink); overflow-wrap: anywhere; }
.cms-content h1,
.cms-content h2,
.cms-content h3,
.cms-content h4,
.cms-content h5,
.cms-content h6 { font-family: var(--ev-font-display); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin: 1.6em 0 0.5em; color: var(--ev-ink); }
.cms-content > :first-child { margin-top: 0; }
.cms-content h1 { font-size: 1.75rem; }
.cms-content h2 { font-size: 1.45rem; }
.cms-content h3 { font-size: 1.2rem; }
.cms-content h4,
.cms-content h5,
.cms-content h6 { font-size: 1.05rem; }
.cms-content p { margin: 0 0 1em; }
.cms-content ul,
.cms-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.cms-content ul { list-style: disc; }
.cms-content ol { list-style: decimal; }
.cms-content li + li { margin-top: 0.3em; }
.cms-content a:not(.btn) { color: var(--ev-accent); text-decoration: underline; text-underline-offset: 2px; }
.cms-content strong,
.cms-content b { font-weight: 600; }
.cms-content img,
.cms-content video { max-width: 100%; height: auto; border-radius: 12px; }
.cms-content iframe { max-width: 100%; border: 0; border-radius: 12px; }
.cms-content blockquote { margin: 1.2em 0; padding: 0.2em 0 0.2em 1em; border-left: 3px solid var(--ev-line); color: var(--ev-muted); font-style: italic; }
.cms-content hr { border: 0; border-top: 1px solid var(--ev-line); margin: 2em 0; }
.cms-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; font-size: 0.92em; }
.cms-content th,
.cms-content td { border: 1px solid var(--ev-line); padding: 0.55em 0.8em; text-align: left; vertical-align: top; overflow-wrap: normal; }
.cms-content th { background: var(--ev-surface-alt); font-weight: 600; white-space: nowrap; }
.cms-content pre { overflow-x: auto; padding: 1em; border-radius: 12px; background: var(--ev-surface-alt); }

/* I blocchi pronti dell'editor usano le classi di Bootstrap: qui le più comuni, perché
   nei temi pubblici (Tailwind) restino impaginati e vadano in colonna sul telefono. */
.cms-content .container,
.cms-content .container-fluid { width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
.cms-content .row { display: flex; flex-wrap: wrap; margin: -0.75rem; }
.cms-content .row > * { box-sizing: border-box; width: 100%; padding: 0.75rem; margin-top: 0; }
.cms-content .col-6 { width: 50%; }
@media (min-width: 768px) {
    .cms-content .col-md-3 { width: 25%; }
    .cms-content .col-md-4 { width: 33.3333%; }
    .cms-content .col-md-5 { width: 41.6667%; }
    .cms-content .col-md-6 { width: 50%; }
    .cms-content .col-md-7 { width: 58.3333%; }
    .cms-content .col-md-8 { width: 66.6667%; }
    .cms-content .col-md-9 { width: 75%; }
}
@media (min-width: 992px) {
    .cms-content .col-lg-3 { width: 25%; }
    .cms-content .col-lg-4 { width: 33.3333%; }
    .cms-content .col-lg-5 { width: 41.6667%; }
    .cms-content .col-lg-6 { width: 50%; }
    .cms-content .col-lg-7 { width: 58.3333%; }
    .cms-content .col-lg-8 { width: 66.6667%; }
}
.cms-content .card { background: var(--ev-surface); border: 1px solid var(--ev-line); border-radius: 14px; overflow: hidden; }
.cms-content .card-body { padding: 1.25rem; }
.cms-content .h-100 { height: 100%; }
.cms-content .d-flex { display: flex; gap: 0.75rem; }
.cms-content .flex-column { flex-direction: column; }
.cms-content .flex-wrap { flex-wrap: wrap; }
.cms-content .align-items-center { align-items: center; }
.cms-content .align-items-start { align-items: flex-start; }
.cms-content .justify-content-between { justify-content: space-between; }
.cms-content .justify-content-center { justify-content: center; }
.cms-content .text-center { text-align: center; }
.cms-content .text-muted { color: var(--ev-muted); }
.cms-content .text-success { color: #15803d; }
.cms-content .text-warning { color: #d97706; }
.cms-content .text-danger { color: #b91c1c; }
.cms-content .fw-bold { font-weight: 700; }
.cms-content .fw-semibold { font-weight: 600; }
.cms-content .fst-italic { font-style: italic; }
.cms-content .small { font-size: 0.875em; }
.cms-content .lead,
.cms-content .fs-5 { font-size: 1.15rem; }
.cms-content .fs-4 { font-size: 1.35rem; }
.cms-content .display-3 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.1; }
.cms-content .display-4,
.cms-content .display-5 { font-size: clamp(1.75rem, 5vw, 2.6rem); line-height: 1.15; }
.cms-content .mb-0 { margin-bottom: 0; }
.cms-content .mb-1 { margin-bottom: 0.25rem; }
.cms-content .mb-2 { margin-bottom: 0.5rem; }
.cms-content .mb-3 { margin-bottom: 1rem; }
.cms-content .mb-4 { margin-bottom: 1.5rem; }
.cms-content .mb-5 { margin-bottom: 2.5rem; }
.cms-content .mt-3 { margin-top: 1rem; }
.cms-content .mt-4 { margin-top: 1.5rem; }
.cms-content .me-1 { margin-right: 0.25rem; }
.cms-content .me-2 { margin-right: 0.5rem; }
.cms-content .ms-3 { margin-left: 1rem; }
.cms-content .p-4 { padding: 1.5rem; }
.cms-content .py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.cms-content .py-5 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.cms-content .rounded { border-radius: 12px; }
.cms-content .border-0 { border: 0; }
.cms-content .shadow-sm { box-shadow: 0 1px 2px rgba(11, 28, 48, 0.06), 0 4px 12px -6px rgba(11, 28, 48, 0.1); }
.cms-content .img-fluid { max-width: 100%; height: auto; }
.cms-content .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.65rem 1.25rem; border-radius: 10px; border: 1px solid transparent; font-weight: 600; font-size: 0.9rem; line-height: 1.2; text-decoration: none; cursor: pointer; }
.cms-content .btn-sm { padding: 0.45rem 0.9rem; font-size: 0.82rem; }
.cms-content .btn-lg { padding: 0.85rem 1.6rem; font-size: 1rem; }
.cms-content .btn-primary { background: var(--ev-accent); color: var(--ev-on-accent); }
.cms-content .btn-light { background: var(--ev-surface); color: var(--ev-ink); }
.cms-content .btn-outline-primary { border-color: var(--ev-accent); color: var(--ev-accent); background: transparent; }
.cms-content .btn-outline-light { border-color: currentColor; color: inherit; background: transparent; }
.cms-content .form-label { display: block; margin-bottom: 0.35rem; font-weight: 600; font-size: 0.9rem; }
.cms-content .form-control { display: block; width: 100%; padding: 0.65rem 0.85rem; border: 1px solid var(--ev-line); border-radius: 10px; background: var(--ev-surface); }

/* ------------------------------------------------------------------
   4. Telefono: campi a 16px. Sotto questa misura l'iPhone ingrandisce da solo
      la pagina appena si tocca un campo, e l'ospite deve rimpicciolirla a mano.
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* i campi di sola lettura (le date, che aprono il calendario) non fanno ingrandire: restano della misura del tema */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([readonly]),
    select,
    textarea { font-size: 16px !important; }
}