@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500&display=swap');

:root {
    --esp-cream:    #f7f4ef;
    --esp-stone:    #e8e3da;
    --esp-text:     #2c2825;
    --esp-muted:    #7a736a;
    --esp-accent:   #7b921d;
    --esp-accent-dk:#627517;
    --esp-r:        6px;
    --esp-ih:       40px;
}

#pass-container {
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    color: var(--esp-text) !important;
    background: var(--esp-cream) !important;
    border: 1px solid var(--esp-stone) !important;
    border-radius: 10px !important;
    padding: 20px 22px 18px !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#pass-container::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0 !important;
    height: 3px !important;
    background: var(--esp-accent) !important;
    border-radius: 10px 10px 0 0 !important;
    pointer-events: none !important;
}

#pass-container form {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 12px 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#pass-container .esp-campo {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#pass-container label {
    font-family: 'Jost', sans-serif !important;
    font-weight: 500 !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--esp-muted) !important;
    display: block !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    background: none !important;
}

#pass-container input[type="text"],
#pass-container select {
    height: var(--esp-ih) !important;
    background: #fff !important;
    border: 1px solid var(--esp-stone) !important;
    border-radius: var(--esp-r) !important;
    color: var(--esp-text) !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 13px !important;
    padding: 0 10px !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color .15s !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#pass-container input[type="text"]:focus,
#pass-container select:focus {
    border-color: var(--esp-accent) !important;
    box-shadow: 0 0 0 3px rgba(90,122,82,0.12) !important;
}

/* select wrapper con freccia */
#pass-container .esp-sw {
    position: relative !important;
    display: inline-block !important;
}
#pass-container .esp-sw::after {
    content: '▾' !important;
    position: absolute !important;
    right: 9px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--esp-muted) !important;
    font-size: 10px !important;
    pointer-events: none !important;
}
#pass-container .esp-sw select {
    padding-right: 26px !important;
    cursor: pointer !important;
}

/* date */
#pass-container #dataArrivo,
#pass-container #dataPartenza {
    width: 120px !important;
    cursor: pointer !important;
}

/* adulti / bambini */
#pass-container #cmbQuantitaAdulti1 { width: 68px !important; }
#pass-container #cmbQuantitaRiduzioni1 { width: 68px !important; }

/* età bambini */
#pass-container #divEtaBambini1 {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
#pass-container #divEtaBambini1 > label { margin-top: 2px !important; }
#pass-container #divEtaBambini1 .eta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}
#pass-container .cmbEtaBambini { width: 60px !important; }

/* separatore verticale tra date e ospiti */
#pass-container .esp-divider {
    width: 1px !important;
    height: 40px !important;
    background: var(--esp-stone) !important;
    align-self: flex-end !important;
    margin: 0 2px !important;
}

/* bottone */
#pass-container #btnPrenota {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: var(--esp-ih) !important;
    padding: 0 24px !important;
    background: var(--esp-accent) !important;
    color: #fff !important;
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: var(--esp-r) !important;
    cursor: pointer !important;
    transition: background .15s !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    margin: 0 !important;
}
#pass-container #btnPrenota::after {
    content: '→' !important;
    font-size: 14px !important;
}
#pass-container #btnPrenota:hover {
    background: var(--esp-accent-dk) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* datepicker */
.ui-datepicker {
    font-family: 'Jost', sans-serif !important;
    font-size: 12px !important;
    border: 1px solid var(--esp-stone) !important;
    border-radius: var(--esp-r) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    z-index: 99999 !important;
}
.ui-datepicker-header {
    background: var(--esp-accent) !important;
    border: none !important;
    border-radius: var(--esp-r) var(--esp-r) 0 0 !important;
    color: #fff !important;
}
.ui-datepicker-title { color: #fff !important; }
.ui-state-active {
    background: var(--esp-accent) !important;
    border-color: var(--esp-accent) !important;
    color: #fff !important;
}
.ui-state-highlight {
    border-color: var(--esp-accent) !important;
    color: var(--esp-accent) !important;
}

/* responsive */
@media (max-width: 600px) {
    #pass-container { padding: 16px !important; }
    #pass-container form { gap: 10px 12px !important; }
    #pass-container #btnPrenota { width: 100% !important; }
    #pass-container .esp-divider { display: none !important; }
}