
/* Kaziranga Safari Booking — replacement CSS
   Designed to load AFTER assets/css/style.css
*/

.kz-booking-box{
    background:#fff;
    color:#24322d;
    border:1px solid #e1e7e3;
    border-radius:12px;
    padding:24px;
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    width:100%;
}
.kz-booking-box h2{
    margin:0 0 4px;
    color:#24322d;
    font-size:27px;
    line-height:1.2;
}
.kz-booking-box > p{
    margin:0 0 14px;
    color:#65716c;
}
.kz-ref{
    background:#fff8e8;
    color:#24322d;
    border-left:4px solid #e5a100;
    padding:10px 12px;
    margin:12px 0 18px;
    border-radius:4px;
    font-size:13px;
    line-height:1.5;
}
.kz-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.kz-form-grid > label,
.kz-full > b{
    display:block;
    color:#24322d;
    font-weight:700;
    font-size:13px;
}
.kz-form-grid input:not([type="radio"]),
.kz-form-grid select{
    display:block;
    width:100%;
    height:45px;
    margin-top:5px;
    padding:8px 10px;
    border:1px solid #ccd5d0;
    border-radius:6px;
    background:#fff;
    color:#24322d;
    font:inherit;
    outline:none;
}
.kz-form-grid input:not([type="radio"]):focus,
.kz-form-grid select:focus{
    border-color:#47783d;
    box-shadow:0 0 0 2px rgba(71,120,61,.12);
}
.kz-full{
    grid-column:1 / -1;
}
.kz-radio{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin-top:8px;
}
.kz-radio label{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin:0;
    color:#24322d;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}
.kz-radio input[type="radio"]{
    appearance:auto;
    -webkit-appearance:radio;
    width:16px;
    height:16px;
    margin:0;
    accent-color:#315a2d;
}
.kz-status{
    min-height:0;
    margin:5px 0 10px;
    font-size:13px;
    font-weight:700;
}
.kz-status.bad{color:#b42318}
.kz-status.good{color:#067647}
.kz-book-btn{
    display:block;
    width:100%;
    border:0;
    border-radius:6px;
    padding:13px 16px;
    background:#ef7d00;
    color:#fff;
    font-size:16px;
    line-height:1.2;
    font-weight:800;
    cursor:pointer;
}
.kz-book-btn:hover{filter:brightness(.94)}
.kz-book-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
}
.kz-booking-box .small-note{
    margin:13px 0 0;
    color:#65716c;
    font-size:11px;
    line-height:1.45;
}

/* Keep the left booking-price panel readable inside the dark hero. */
.hero-pricing{
    color:#fff;
}
.hero-pricing .eyebrow{
    color:#f0bd59;
}
.hero-pricing h1{
    color:#fff;
}
.hero-pricing .hero-table-wrap{
    background:#fff;
    color:#24322d;
}
.hero-pricing .hero-table-wrap h3{
    color:#315a2d;
}
.hero-pricing .hero-price-table{
    background:#fff;
    color:#24322d;
}
.hero-pricing .hero-price-table th{
    background:#47783d;
    color:#fff;
}
.hero-pricing .hero-price-table td{
    background:#fff;
    color:#24322d;
}
.hero-pricing .hero-note{
    color:#fff;
    opacity:1;
}

/* Checkout components used on safari-booking.php */
.traveller-card{
    background:#fff;
    border:1px solid #dde3df;
    border-radius:10px;
    padding:14px;
    margin:12px 0;
}
.traveller-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.3fr 1.5fr;
    gap:8px;
}
.traveller-grid input,
.traveller-grid select{
    width:100%;
    height:42px;
    border:1px solid #ccd5d0;
    border-radius:6px;
    padding:7px;
    background:#fff;
    color:#24322d;
}
.summary-box{
    background:#f5f7f4;
    border:1px solid #dde3df;
    border-radius:10px;
    padding:14px;
    margin:15px 0;
}
.amount-box{
    background:#fff8e8;
    border:1px solid #e6bd67;
    padding:15px;
    border-radius:10px;
    margin:15px 0;
}
.amount-box input{
    width:100%;
    min-height:46px;
    margin-top:6px;
    padding:8px 10px;
    border:1px solid #d2b067;
    border-radius:6px;
    background:#fff;
    color:#24322d;
    font-size:20px;
    font-weight:800;
}

/* Tablet */
@media(max-width:850px){
    .hero-grid{
        grid-template-columns:1fr;
        gap:28px;
    }
    .kz-booking-box{
        max-width:680px;
        margin:0 auto;
    }
}

/* Mobile */
@media(max-width:767px){
    .kz-booking-box{
        padding:18px 15px;
        border-radius:9px;
    }
    .kz-booking-box h2{
        font-size:23px;
    }
    .kz-form-grid,
    .traveller-grid{
        grid-template-columns:1fr;
    }
    .kz-full{
        grid-column:auto;
    }
    .kz-radio{
        gap:16px;
    }
}

/* Small mobile */
@media(max-width:520px){
    .hero-pricing .hero-table-wrap{
        overflow-x:auto;
    }
    .hero-pricing .hero-price-table{
        min-width:480px;
    }
    .kz-ref{
        font-size:12px;
    }
    .kz-book-btn{
        min-height:46px;
    }
}

/* Mobile hardening */
html,body{max-width:100%;overflow-x:hidden}
.wrap,.section,.kz-booking-box,.summary-box,.traveller-card{box-sizing:border-box;max-width:100%}
@media(max-width:768px){
  .section{padding-left:12px!important;padding-right:12px!important}
  .wrap{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
  .traveller-grid{grid-template-columns:1fr!important}
  .traveller-grid input,.traveller-grid select{width:100%!important;min-width:0!important}
  .summary-box{overflow-wrap:anywhere;line-height:1.7}
  .kz-book-btn{width:100%!important}
}
/* Keep dropdowns fixed when an option is selected */
.kz-booking-box select {
    width: 100%;
    height: 40px;
    min-height: 40px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 34px 0 12px;
    line-height: 40px;
    font-weight: 400;
    vertical-align: top;
}

/* Prevent focus/selected dropdown from moving 3-4px */
.kz-booking-box select:focus,
.kz-booking-box select:active {
    height: 40px;
    min-height: 40px;
    margin: 0;
    outline: none;
}

/* Calendar/date text should be normal weight */
.kz-booking-box input[type="date"] {
    font-weight: 400 !important;
    height: 40px;
    min-height: 40px;
    line-height: normal;
}

/* Chrome date input text */
.kz-booking-box input[type="date"]::-webkit-datetime-edit,
.kz-booking-box input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.kz-booking-box input[type="date"]::-webkit-datetime-edit-text,
.kz-booking-box input[type="date"]::-webkit-datetime-edit-day-field,
.kz-booking-box input[type="date"]::-webkit-datetime-edit-month-field,
.kz-booking-box input[type="date"]::-webkit-datetime-edit-year-field {
    font-weight: 400 !important;
}

/* =========================================================
   HERO STABILITY FIX
   Keep the left Safari Pricing panel fixed when date/select
   controls on the right receive focus or change value.
   ========================================================= */
.hero-grid{
    align-items:flex-start !important;
}

.hero-pricing,
.hero-copy,
.kz-booking-box{
    align-self:flex-start !important;
}

/* Preserve the original 5px control spacing on every state. */
.kz-form-grid input:not([type="radio"]),
.kz-form-grid select,
.kz-booking-box select,
.kz-booking-box input[type="date"]{
    box-sizing:border-box !important;
    height:45px !important;
    min-height:45px !important;
    max-height:45px !important;
    margin-top:5px !important;
    margin-bottom:0 !important;
}

/* Focus must change appearance only, never dimensions/position. */
.kz-form-grid input:not([type="radio"]):focus,
.kz-form-grid select:focus,
.kz-booking-box select:focus,
.kz-booking-box select:active,
.kz-booking-box input[type="date"]:focus{
    height:45px !important;
    min-height:45px !important;
    max-height:45px !important;
    margin-top:5px !important;
    margin-bottom:0 !important;
    border-width:1px !important;
    outline:none !important;
}

/* Normal-weight calendar/date text. */
.kz-booking-box input[type="date"],
.kz-booking-box input[type="date"]::-webkit-datetime-edit,
.kz-booking-box input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.kz-booking-box input[type="date"]::-webkit-datetime-edit-text,
.kz-booking-box input[type="date"]::-webkit-datetime-edit-day-field,
.kz-booking-box input[type="date"]::-webkit-datetime-edit-month-field,
.kz-booking-box input[type="date"]::-webkit-datetime-edit-year-field{
    font-weight:400 !important;
}
