/* ================================
Farm Villa – Safari Form Styling
FINAL CONSOLIDATED CSS
================================ */

/* Make sure animated sections are visible */
#cappa-main .animate-box {
opacity: 1 !important;
}

/* ------------------------------
Left side: Safari enquiry form
------------------------------ */
/* ===== Datepicker disabled dates (clear & easy to see) ===== */
.ui-datepicker td.ui-state-disabled,
.ui-datepicker td.ui-state-disabled span,
.ui-datepicker td.ui-state-disabled a {
    opacity: 1 !important;
}

.ui-datepicker td.ui-state-disabled span,
.ui-datepicker td.ui-state-disabled a {
    background: #e6ece3 !important;   /* light grey-green */
    color: #9aa59a !important;        /* faded text */
    border: 1px solid #d3dbd2 !important;
    cursor: not-allowed !important;
    text-decoration: line-through;
}

/* Our custom class from beforeShowDay */
.ui-datepicker td.fv-date-disabled span,
.ui-datepicker td.fv-date-disabled a {
    background: #e6ece3 !important;
    color: #9aa59a !important;
    border: 1px solid #d3dbd2 !important;
    cursor: not-allowed !important;
    text-decoration: line-through;
}










/* ===== Child age dropdown – layout fix ===== */
#childrenAgeFields .child-age-wrapper{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
}

#childrenAgeFields .child-age-wrapper span{
    min-width: 70px;
    font-size: 13px;
    color: #58644f;
}

#childrenAgeFields .child-age-wrapper select{
    flex: 1;
    min-width: 160px;
    height: 44px;              /* nicer height */
    padding: 10px 12px;        /* readable */
    border-radius: 10px;
}

/* Mobile: stack nicely */
@media (max-width: 767px){
    #childrenAgeFields .child-age-wrapper{
        flex-wrap: wrap;
        gap: 8px;
    }
    #childrenAgeFields .child-age-wrapper span{
        min-width: 100%;
    }
    #childrenAgeFields .child-age-wrapper select{
        min-width: 100%;
    }
}





.safari-form-panel .safari-big-input {
background: #f5f8ec;
border-radius: 10px;
border: 1px solid #d9e4c3;
padding: 12px 14px;
font-size: 14px;
width: 100%;
transition: 0.2s ease;
}

.safari-form-panel .safari-big-input::placeholder {
color: #9aa38a;
}

.safari-form-panel .safari-big-input:focus {
background: #ffffff;
border-color: #9bb86b;
box-shadow: 0 0 0 2px rgba(155, 184, 107, 0.2);
outline: none;
}

.safari-form-panel textarea.safari-big-input {
min-height: 110px;
resize: vertical;
}

/* Radio group */
.safari-radio-group {
display: flex;
flex-wrap: wrap;
gap: 18px;
font-size: 14px;
margin-top: 4px;
}

.safari-radio-group label {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}

.safari-radio-group input[type="radio"] {
margin: 0;
}

.safari-footnote {
font-size: 12px;
margin-top: 10px;
color: #6b7a55;
}

/* ------------------------------
Guest steppers
------------------------------ */

.safari-guests-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.safari-guest-box {
background: #f5f8ec;
border-radius: 10px;
border: 1px solid #d9e4c3;
padding: 10px 14px;
flex: 1 1 200px;
}

.safari-guest-title {
display: block;
font-weight: 500;
margin-bottom: 4px;
}

.safari-stepper {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2px;
}

.safari-stepper-input {
width: 50px;
text-align: center;
border: 1px solid #cbd7b4;
border-radius: 6px;
padding: 4px 0;
background: #ffffff;
}

.guest-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid #c0cf9e;
background: #e3ebcf;
font-size: 16px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: 0.15s ease;
}

.guest-btn:hover {
background: #d5e0b9;
}

.guest-btn:active {
transform: scale(0.95);
}

.safari-child-note {
font-size: 12px;
color: #6b7a55;
}

.child-age-wrapper {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}

.child-age-wrapper span {
width: 65px;
font-size: 13px;
}

.child-age-wrapper select {
flex: 1;
height: 34px;
border-radius: 6px;
border: 1px solid #cbd7b4;
padding: 4px 8px;
background: #ffffff;
font-size: 13px;
}

/* ------------------------------
Safari Estimator – FINAL DESIGN
------------------------------ */

.safari-estimator {
background: #f7f9f2 !important;
border-radius: 18px;
padding: 34px 28px;
border: 1px solid rgba(0,0,0,0.05);
}

.safari-estimator::before {
content: "";
display: block;
width: 50px;
height: 3px;
background: #9bb86b;
border-radius: 2px;
margin-bottom: 18px;
}

.safari-estimator .info h6 {
font-size: 11px;
letter-spacing: 0.2em;
color: #7a8663 !important;
}

.safari-estimator h4 {
font-size: 22px;
font-weight: 600;
margin-bottom: 16px;
color: #263322 !important;
}

.safari-total-box {
background: #ffffff !important;
border: 1px solid rgba(0,0,0,0.05) !important;
box-shadow: none !important;
padding: 18px 18px !important;
border-radius: 14px;
}

#safariTotalDisplay {
font-size: 32px;
font-weight: 700;
color: #1f3825 !important;
}

#safariBreakdown {
font-size: 13px;
color: #5a6650 !important;
line-height: 1.6;
}

.safari-submit-btn button {
width: 100%;
background: #4f6f44;
border-radius: 12px;
padding: 14px;
font-size: 14px;
font-weight: 600;
border: none;
color: #fff;
cursor: pointer;
box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.safari-submit-btn button:hover {
background: #3f5b37;
}

.safari-estimator-note {
font-size: 12px;
color: #7a8663 !important;
margin-top: 12px;
}

@media (max-width: 767px) {
.safari-estimator {
padding: 26px 20px;
border-radius: 14px;
}

```
#safariTotalDisplay {
    font-size: 28px;
}
```

}