/*
 * Box prenotazione scheda camera: widget ORIGINALE SimpleBooking dentro #booking-camera,
 * stilizzato come la card Figma "Suite" (400x451, raggio 15, ombra 0 4 20 rgba(125,125,125,.25)).
 * Tutte le regole sono limitate a #booking-camera: il booking form della hero non cambia.
 * !important: necessario perché SimpleBooking applica i suoi stili con !important (CustomStyleMappings)
 * e bookingform/simplebooking.css (file del cliente) usa !important sulle stesse proprietà.
 */

/* ---------- Card ---------- */
#booking-camera {
    width: 100%;
    box-sizing: border-box;
    padding: 26px 35px 24px;
    background-color: var(--color-white);
    border-radius: 15px;
    box-shadow: 0 4px 20px 0 rgba(125, 125, 125, .25);
}

#booking-camera h4.booking-camera-titolo {
    margin: 0 auto 15px;
    max-width: 321px;
    font-family: var(--font-family-primary) !important;
    font-size: 25px !important;
    font-weight: 500 !important;
    line-height: 28px !important;
    text-align: center;
    color: var(--color-text) !important;
}

#booking-camera p.booking-camera-nota {
    margin: 9px 0 0;
    text-align: center;
    font-size: 14px !important;
    line-height: 20px !important;
}

#booking-camera .booking-form,
#booking-camera .booking-form .container,
#booking-camera #sb-container,
#booking-camera .sb {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#booking-camera .sb {
    font-family: var(--font-family-secondary) !important;
    color: var(--color-text) !important;
}

/* ---------- Struttura verticale ---------- */
#booking-camera .sb__property,
#booking-camera a#bfPreventivo {
    display: none !important;
}

#booking-camera #booking-form div.sb__form {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}

#booking-camera .sb__dates {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    width: 100% !important;
    margin: 0 !important;
}

#booking-camera .sb__guests-rooms {
    width: 100% !important;
    margin: 0 !important;
}

#booking-camera .sb__form-field {
    position: relative !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- Campi ---------- */
#booking-camera span.sb__form-field-label.sb-custom-label-color {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 1;
    display: block !important;
    margin: 0 !important;
    font-family: var(--font-family-secondary) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    text-transform: none !important;
    color: var(--color-text) !important;
    pointer-events: none;
}

#booking-camera .sb__form-field-input {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0 6px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 75px !important;
    margin: 0 !important;
    padding: 36px 50px 12px 12px !important;
    background-color: var(--color-white) !important;
    border: 1px solid #BABABA !important;
    border-radius: 15px !important;
    box-shadow: none !important;
    cursor: pointer;
}

/* Bordo grigio fisso anche quando SimpleBooking applica i suoi colori di hover/focus */
#booking-camera .sb .sb__form-field .sb__form-field-input,
#booking-camera .sb .sb__form-field .sb__form-field-input.sb-custom-box-shadow-color,
#booking-camera .sb .sb__form-field .sb__form-field-input.sb-custom-box-shadow-color-hover:hover,
#booking-camera .sb .sb__form-field .sb__form-field-input.sb-custom-box-shadow-color-focus:focus {
    border-color: #BABABA !important;
    box-shadow: none !important;
    outline: none !important;
}

#booking-camera .sb .sb__form-field .sb__form-field-input:hover,
#booking-camera .sb .sb__form-field .sb__form-field-input:focus,
#booking-camera .sb .sb__form-field .sb__form-field-input[aria-expanded="true"] {
    border-color: var(--color-text) !important;
}

/* Etichette sempre leggibili: SimpleBooking le colora all'hover (CustomLabelHoverColor) */
#booking-camera .sb .sb__form-field span.sb__form-field-label,
#booking-camera .sb .sb__form-field:hover span.sb__form-field-label,
#booking-camera .sb .sb__form-field:focus-within span.sb__form-field-label,
#booking-camera .sb .sb__form-field span.sb__form-field-label.sb-custom-label-color,
#booking-camera .sb .sb__form-field span.sb__form-field-label.sb-custom-label-hover-color:hover {
    color: var(--color-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Valori e testi interni ai campi sempre in colore testo, anche all'hover */
#booking-camera .sb .sb__form-field:hover .sb__form-field-input *,
#booking-camera .sb .sb__form-field:focus-within .sb__form-field-input * {
    color: var(--color-text) !important;
}

#booking-camera .sb__form-field-date-number,
#booking-camera .sb__form-field-month-year {
    font-family: var(--font-family-secondary) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    color: var(--color-text) !important;
}

#booking-camera .sb__form-field-date-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#booking-camera .sb__form-field-month-year {
    text-transform: capitalize !important;
}

#booking-camera .sb__form-field-weekday {
    display: none !important;
}

/* Ospiti: "2  Adulti:  Camere: 1" */
#booking-camera .sb__form-field-guests,
#booking-camera .sb__form-field-rooms {
    font-family: var(--font-family-secondary) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: var(--color-text) !important;
}

/* Icona: freccia giù come in Figma al posto di calendario/chevron */
#booking-camera .sb__form-field-icon {
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
}

#booking-camera .sb__form-field-icon svg {
    display: none !important;
}

#booking-camera .sb__form-field-icon::after {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    background-color: var(--color-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Calendario e selettore ospiti sopra al resto della pagina */
#booking-camera .sb__calendar,
#booking-camera .sb__guests,
#booking-camera .sb__footer-promo {
    z-index: 50 !important;
}

/* ---------- Bottone ---------- */
body #booking-camera div.sb input#sb-container_sb__form-field--checkavailability {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 45px !important;
    margin: 6px 0 0 !important;
    padding: 8px 20px !important;
    background: var(--color-primary) !important;
    border: 0 !important;
    border-radius: 50px !important;
    box-shadow: none !important;
    font-family: var(--font-family-buttons) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 28px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--color-white) !important;
    cursor: pointer;
    transition: background-color .3s ease;
}

body #booking-camera div.sb input#sb-container_sb__form-field--checkavailability:hover,
body #booking-camera div.sb input#sb-container_sb__form-field--checkavailability:focus {
    background: var(--color-dark) !important;
}

/* ---------- Codice promo e modifica prenotazione ---------- */
#booking-camera .sb__footer {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#booking-camera .sb__footer-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px 18px !important;
    float: none !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

#booking-camera .sb a.sb__footer-link,
#booking-camera a#sb-container_sb__footer-promo-wrapper,
#booking-camera a#sb-container_sb__form-field--reservationedit {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-family-secondary) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--color-text) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

#booking-camera .sb__footer-link svg {
    width: 16px !important;
    height: 16px !important;
    fill: var(--color-text) !important;
}

#booking-camera .sb__form-field-input.sb-custom-box-shadow-color.sb-custom-box-shadow-color-hover.sb-custom-box-shadow-color-focus.sb-custom-field-bg-color:hover {
    z-index: auto;
}