/* ============================================================
   VemRent Booking Widget — v1.1.0
   Tutti i colori sono CSS custom properties → configurabili
   dal backoffice senza toccare questo file.
   ============================================================ */

/* Valori di default — sovrascritti inline dallo shortcode PHP */
.vembw {
    --vembw-primary:   #EF9F27;
    --vembw-secondary: #3a7230;
    --vembw-text:      #1c2b38;
    --vembw-border:    #e8e4de;
    --vembw-bg:        #ffffff;
    --vembw-bg-field:  #fafaf8;
    --vembw-note:      #666666;
}

/* ── Container ──────────────────────────────────────────────── */
.vembw {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background:    var(--vembw-bg);
    border-radius: 14px;
    padding:       24px 28px;
    box-shadow:    0 8px 40px rgba(0,0,0,.12);
    max-width:     800px;
}

/* ── Tema DARK ──────────────────────────────────────────────── */
.vembw--dark {
    --vembw-primary:   #EF9F27;
    --vembw-secondary: #EF9F27;
    --vembw-text:      #1c2b38;
    --vembw-border:    #e8e4de;
    --vembw-bg:        #ffffff;
    --vembw-bg-field:  #fafaf8;
    --vembw-note:      #666666;
    box-shadow: 0 20px 60px rgba(0,0,0,.28);
}

/* ── Titolo ─────────────────────────────────────────────────── */
.vembw__title {
    font-size:      1em;
    font-weight:    600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color:          var(--vembw-secondary) !important; /* .dark p di Flatsome ha spec (0,1,1) */
    margin:         0 0 16px !important;
    display:        flex;
    align-items:    center;
    gap:            7px;
}

/* Icona lente: stessa dimensione del testo del titolo */
.vembw__title svg {
    width:      1em;
    height:     1em;
    flex-shrink: 0;
}

/* ── Form grid ──────────────────────────────────────────────── */
.vembw__form {
    display:               grid;
    grid-template-columns: 1.6fr 1fr 1fr auto;
    gap:                   12px;
    align-items:           end; /* allinea i bottom di tutti gli item */
}

/* ── Field ──────────────────────────────────────────────────── */
.vembw__field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.vembw__label {
    font-size:      13px;
    font-weight:    600;
    color:          var(--vembw-note);
    text-transform: uppercase;
    letter-spacing: .5px;
    display:        block;
}

/* Override Flatsome: .dark ... { color: white } sovrascrive le label
   Usiamo .vembw .vembw__label (spec 0,2,0) + !important per vincere */
.vembw .vembw__label,
.vembw label {
    color: var(--vembw-note) !important;
}

/* ── Select ─────────────────────────────────────────────────── */
.vembw__select-wrap { position: relative; }

.vembw__select {
    width:            100%;
    border:           1.5px solid var(--vembw-border);
    border-radius:    8px;
    font-size:        16px; /* ≥16px evita zoom automatico su iOS Safari */
    font-family:      inherit;
    color:            var(--vembw-text);
    background-color: var(--vembw-bg-field);
    /* arrow dinamico: usa il colore --vembw-primary via JS (vedi widget.js) */
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23EF9F27' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 12px center;
    appearance:          none;
    -webkit-appearance:  none;
    cursor:              pointer;
    transition:          border-color .15s;
}

.vembw__select:focus {
    outline:    none;
    border-color: var(--vembw-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vembw-primary) 20%, transparent);
}

/* ── Input date ─────────────────────────────────────────────── */
.vembw__input {
    width:         100%;
    padding:       6px 14px;
    border:        1.5px solid var(--vembw-border);
    border-radius: 8px;
    font-size:     14px;
    font-family:   inherit;
    color:         var(--vembw-text);
    background:    var(--vembw-bg-field);
    transition:    border-color .15s;
    cursor:        pointer;
}

/* Flatpickr aggiunge .flatpickr-input e azzera border-radius e padding:
   ripristino forzato con specificità + !important */
.vembw input.flatpickr-input,
.vembw input.flatpickr-input.active {
    border-radius: 8px !important;
    padding:       6px 14px !important;
    border:        1.5px solid var(--vembw-border) !important;
    background:    var(--vembw-bg-field) !important;
    color:         var(--vembw-text) !important;
    font-size:     14px !important;
    cursor:        pointer !important;
}

.vembw__input:focus {
    outline:      none;
    border-color: var(--vembw-primary);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--vembw-primary) 20%, transparent);
}

.vembw__input.is-invalid {
    border-color: #e74c3c;
    background:   #fff8f8;
}

/* ── Pulsante ───────────────────────────────────────────────── */
.vembw__field--btn {
    justify-content: flex-end;
    /* Aggiunge un'area vuota sopra pari all'altezza label + gap,
       così il bottom del pulsante si allinea con il bottom degli input */
    padding-top: calc(11px + 6px); /* label ~11px + gap 6px */
}

.vembw__btn {
    width:       100%;
    padding:     6px 20px; /* stesso padding verticale degli input */
    height:      auto;
    background:  var(--vembw-primary);
    color:       #fff;
    border:      none;
    border-radius: 8px;
    font-size:   15px;
    font-weight: 700;
    font-family: inherit;
    cursor:      pointer;
    white-space: nowrap;
    transition:  background .15s, transform .1s;
    line-height: 1.4;
}

.vembw__btn:hover  { filter: brightness(.9); }
.vembw__btn:active { transform: scale(.98); }

/* ── Nota ───────────────────────────────────────────────────── */
.vembw__note {
    margin:      12px 0 0 !important;
    font-size:   0.9em !important;
    color:       var(--vembw-note) !important; /* .dark p di Flatsome ha spec (0,1,1) */
    display:     flex;
    align-items: center;
    gap:         6px;
    line-height: 1.4;
}

/* Icona nota: stessa dimensione del testo (1em relativo al 0.9em della nota) */
.vembw__note svg {
    width:       1em;
    height:      1em;
    flex-shrink: 0;
}

.vembw__note svg { flex-shrink: 0; }

/* ── Flatpickr — tema personalizzato ────────────────────────── */
.flatpickr-calendar {
    border-radius:  12px !important;
    box-shadow:     0 8px 40px rgba(0,0,0,.18) !important;
    border:         1px solid #e8e4de !important;
    font-family:    inherit !important;
    font-size:      14px !important;
}

.flatpickr-months .flatpickr-month {
    background:     var(--vembw-primary, #EF9F27) !important;
    border-radius:  12px 12px 0 0 !important;
    color:          #fff !important;
    fill:           #fff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color:      #fff !important;
    font-weight: 600 !important;
}

/* ── Header datepicker: mese e anno allineati ──────────────────
   Problemi Flatsome:
   - background: white sulla <select> mese → testo bianco invisibile
   - height: 2.507em su input[type=number] → anno più alto della select
   Fix: flexbox sul container + reset height su entrambi gli elementi */

.flatpickr-months .flatpickr-month {
    display:     flex !important;
    align-items: center !important;
    height:      34px !important;
}

.flatpickr-current-month {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             4px !important;
    padding-top:     0 !important;
    height:          100% !important;
    width:           auto !important;
    position:        static !important;
    font-size:       1.1rem !important;
}

/* Select mese — stato chiuso: testo bianco su sfondo ambra (ereditato) */
.flatpickr-months .flatpickr-month select.flatpickr-monthDropdown-months {
    background:    transparent !important;
    color:         #fff !important;
    border:        none !important;
    outline:       none !important;
    appearance:    none !important;
    -webkit-appearance: none !important;
    padding:       0 2px !important;
    height:        auto !important;
    line-height:   1 !important;
    font-size:     inherit !important;
    font-weight:   600 !important;
    cursor:        pointer !important;
    box-shadow:    none !important;
    margin:        0 !important;
    vertical-align: middle !important;
}

/* Option del dropdown nativo: testo scuro su sfondo chiaro (leggibile) */
.flatpickr-months .flatpickr-month select.flatpickr-monthDropdown-months option {
    background: #fff !important;
    color:      #1c2b38 !important;
    font-size:  14px !important;
    padding:    4px 8px !important;
}

/* Input anno — Flatsome impone height: 2.507em su input[type=number] */
.flatpickr-current-month .numInputWrapper,
.flatpickr-current-month input.cur-year {
    height:        auto !important;
    line-height:   1 !important;
    padding:       0 2px !important;
    margin:        0 !important;
    border:        none !important;
    background:    transparent !important;
    color:         #fff !important;
    font-size:     inherit !important;
    font-weight:   600 !important;
    box-shadow:    none !important;
    vertical-align: middle !important;
    width:         5ch !important;
}

/* Frecce numInputWrapper (anno ±) */
.flatpickr-current-month .numInputWrapper span {
    border-color: rgba(255,255,255,.3) !important;
}
.flatpickr-current-month .numInputWrapper span::after {
    border-top-color:    rgba(255,255,255,.8) !important;
    border-bottom-color: rgba(255,255,255,.8) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: #fff !important;
    fill:  #fff !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: rgba(255,255,255,.75) !important;
}

.flatpickr-weekday {
    color:       #888 !important;
    font-weight: 600 !important;
    font-size:   12px !important;
}

.flatpickr-day {
    border-radius: 8px !important;
    color:         #1c2b38 !important;
    font-size:     13px !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background:   color-mix(in srgb, var(--vembw-primary, #EF9F27) 15%, transparent) !important;
    border-color: transparent !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background:   var(--vembw-primary, #EF9F27) !important;
    border-color: var(--vembw-primary, #EF9F27) !important;
    color:        #fff !important;
    font-weight:  700 !important;
}

.flatpickr-day.today:not(.selected) {
    border-color: var(--vembw-primary, #EF9F27) !important;
    color:        var(--vembw-primary, #EF9F27) !important;
    font-weight:  600 !important;
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color:   #ccc !important;
    opacity: .5  !important;
}

/* Input con Flatpickr — rimuove freccia e icona calendario */
.vembw .vembw__input--date {
    cursor: pointer;
}
.vembw .vembw__input--date::-webkit-calendar-picker-indicator { display: none; }

/* ── Errore ─────────────────────────────────────────────────── */
.vembw__error {
    margin:      8px 0 0;
    font-size:   12px;
    font-weight: 600;
    color:       #c0392b;
    min-height:  1em;
}

/* ── Responsive tablet ──────────────────────────────────────── */
@media (max-width: 900px) {
    .vembw__form { grid-template-columns: 1fr 1fr; }
    .vembw__field--select { grid-column: 1 / -1; }
}

/* ── Responsive mobile ──────────────────────────────────────── */
@media (max-width: 600px) {
    .vembw { padding: 18px 16px; border-radius: 10px; margin-right: 40px; }
    .vembw__form { grid-template-columns: 1fr; gap: 10px; }
    .vembw__btn  { padding: 14px; }
    .vembw__note { font-size: 1.2em !important;
}

/* ── Override tema Flatsome ─────────────────────────────────────
   Flatsome sovrascrive colori di input, label e placeholder.
   Usiamo .vembw come prefisso (spec. 0,2,1) + !important per vincere.
   ─────────────────────────────────────────────────────────────── */

/* Input, select, textarea */
.vembw input[type="text"],
.vembw input[type="date"],
.vembw input[type="number"],
.vembw input[type="email"],
.vembw input[type="search"],
.vembw input[type="tel"],
.vembw input[type="url"],
.vembw select,
.vembw textarea {
    color:        var(--vembw-text)     !important;
    background:   var(--vembw-bg-field) !important;
    border:       1.5px solid var(--vembw-border) !important;
    box-shadow:   none    !important;
    font-family:  inherit !important;
    font-size:    16px    !important; /* ≥16px evita lo zoom automatico su iOS Safari */
    border-radius: 8px   !important;
    /* Padding ridotto per stare nel height: 2.507em (~35px) di Flatsome:
       35px - 3px bordi = 32px disponibili; 6+6=12px padding → 20px per il testo ✓ */
    padding-top:    6px !important;
    padding-bottom: 6px !important;
}

/* Placeholder — Flatsome lo rende quasi invisibile */
.vembw input::placeholder,
.vembw textarea::placeholder {
    color:   var(--vembw-note) !important;
    opacity: 1 !important;
}
.vembw input::-webkit-input-placeholder,
.vembw textarea::-webkit-input-placeholder {
    color:   var(--vembw-note) !important;
    opacity: 1 !important;
}
.vembw input::-moz-placeholder,
.vembw textarea::-moz-placeholder {
    color:   var(--vembw-note) !important;
    opacity: 1 !important;
}
.vembw input:-ms-input-placeholder,
.vembw textarea:-ms-input-placeholder {
    color:   var(--vembw-note) !important;
    opacity: 1 !important;
}

/* Label — Flatsome imposta label { color: #222 } */
.vembw label,
.vembw .vembw__label {
    color:          var(--vembw-note)  !important;
    font-size:      13px   !important;
    font-weight:    600    !important;
    letter-spacing: .5px   !important;
    text-transform: uppercase !important;
    margin:         0      !important;
    padding:        0      !important;
}

/* Pulsante */
.vembw button[type="submit"],
.vembw .vembw__btn {
    color:       #fff !important;
    background:  var(--vembw-primary) !important;
    border:      none !important;
    box-shadow:  none !important;
}