@media(max-width:1024px) {

    .safari-booking-info {
        flex-direction: column;
    }
        .safari-booking-info .left-content {
     
            width: 100%;
        }
    #safariOptions .form-select {
        font-size: 13px !important;
        padding: 8px 6px !important;
        padding-right: 20px !important;
    }
   #safariOptions .card-body {
        padding: 4px !important;
    }
    .safari-booking-info .left-content {

        padding-right: 0px !important;
        padding-left: 0px;
    }
    /* ----- adjust arrow position for normal <select> dropdowns ----- */
    #safariOptions .form-select,
    select.form-select {
        appearance: none; /* remove native styling */
        -webkit-appearance: none; /* Safari */
        -moz-appearance: none; /* Firefox */
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        padding: 8px 36px 8px 12px; /* ?? add more right padding for arrow space */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23333' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center; /* ?? move arrow away from edge */
        background-size: 10px 6px;
        cursor: pointer;
    }

        /* make sure focus looks consistent */
        #safariOptions .form-select:focus,
        select.form-select:focus {
            outline: none;
            border-color: #999;
        }
    #safariOptions .form-label {
        font-size: 12px;
        line-height: 22px;
    }
    .booking-info .booking-info__value .date {
        font-size: 16px;
        font-weight: 600;
    }
    .booking-info .booking-info__value span {
        padding-right: 5px;
    }
   

}
@media(max-width:991px) {

    .safari-add-div {
        flex-direction: column
    }
    #safariOptions .form-select, select.form-select {
      
        background-position: right 6px center;
  
    }
    #safariOptions .form-select {
        font-size: 12px !important;
       
    }
    .safari-booking-info .right-content {
  
        margin: auto;
    }
    .booking-info .booking-info__value span {
        padding-right: 5px;
    }
    .safari-booking-summary-flexdiv {
        flex-direction: column;
    }
    .safari-selected-details{
        padding: 0px !important;
    }
    .safari-booking-summary-flexdiv .safari-booking-summary span {
        padding-right: 0px;
    }
}

@media (min-width:768px) and (max-width:850px) {
    .single-addon-item .addon-price {
        font-size: 19px;

    }
}

.addon-btn {
    background-color: #004225; /* Dark green */
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

        .addon-btn:hover {
            background-color: #c49a49; /* Golden hover */
            color: #fff;
        }

        .addon-btn.remove {
            background-color: #b91c1c; /* Red for remove */
        }

            .addon-btn.remove:hover {
                background-color: #ef4444;
            }


    .addon-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px;
        margin-bottom: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0px 2px 6px rgba(0,0,0,0.05);
    }

    .addon-info {
        display: flex;
        align-items: center;
    }

        .addon-info img {
            width: 70px;
            height: 70px;
            border-radius: 8px;
            margin-right: 14px;
        }

    .addon-title {
        font-size: 16px;
        font-weight: bold;
        color: #004225;
    }

    .addon-desc {
        font-size: 13px;
        color: #555;
    }

    .addon-price {
        font-size: 18px;
        font-weight: bold;
        color: #008000;
    }
    /*qty box*/

    .qty-box {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .qty-btn {
        background: #eee;
        border: none;
        padding: 4px 10px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
    }

        .qty-btn:hover {
            background: #c49a49;
            color: #fff;
        }



    /* Wrapper */
    .addon-qty-box {
        border-radius: 6px;
        overflow: hidden; /* keeps rounded edges consistent */
    }

    /* Buttons */
    .addon-qty-btn {
        background-color: #004225; /* Dark green theme */
        color: #fff;
        border: none !important;
        transition: all 0.3s ease;
    }

        .addon-qty-btn:hover {
            background-color: #c49a49; /* Golden hover */
            color: #fff;
        }

    /* Input */
    .addon-qty-input {
        border: 1px solid #ddd;
        font-weight: bold;
        font-size: 14px;
        color: #004225;
    }



    /* Quantity box */
    .addon-qty-box {
        width: 120px; /* instead of inline style */
    }

    .addon-qty-btn {
        background-color: #004225 !important; /* dark green */
        color: #fff !important;
        border: none !important;
    }

        .addon-qty-btn:hover {
            background-color: #c49a49 !important; /* golden hover */
        }

    /* Quantity input */
    .addon-qty-input {
        border: 1px solid #ddd !important;
        font-weight: 600;
        color: #004225 !important;
    }

    /* Apply / Remove / Update buttons */
    .addon-apply-btn {
        background-color: #004225 !important;
        border: none !important;
    }

        .addon-apply-btn:hover {
            background-color: #c49a49 !important;
        }

    .addon-remove-btn {
        background-color: #b91c1c !important;
        border: none !important;
    }

        .addon-remove-btn:hover {
            background-color: #ef4444 !important;
        }

    .addon-update-btn {
        background-color: #c49a49 !important;
        border: none !important;
        color: #fff !important;
    }

        .addon-update-btn:hover {
            filter: brightness(.95);
        }

    /* Wrapper */
    .addon-btn-group {
        width: 100%;
        column-gap: 10px;
    }

        /* Buttons inside group */
        .addon-btn-group .addon-btn {
            border-radius: 6px;
            font-weight: 500;
            padding: 8px 12px;
            text-align: center;
        }

        /* Make them fill space evenly */
        .addon-btn-group .flex-fill {
            flex: 1 1 auto;
        }

    /* Override colors if needed */
    .addon-apply-btn {
        background-color: #004225 !important;
        border: none !important;
        color: #fff !important;
    }


    /* ---------- BUTTON GROUP: equal widths + consistent padding ---------- */
    /* Make side-by-side addon buttons share equal width & center text */
    .addon-btn-group {
        display: flex;
        gap: 10px; /* spacing between buttons */
        width: 100%;
        align-items: baseline; /* keep heights equal */
    }

        /* Each addon button should fill equally */
        .addon-btn-group .addon-btn {
            flex: 1 1 0; /* equal widths */
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 14px; /* consistent padding */
            min-height: 44px; /* equal height across buttons */
            border-radius: 8px !important;
            font-weight: 600;
            white-space: nowrap;
            text-align: center;
        }

        /* When there is a single button wrapper (apply only),
   it should stretch fully. If you have different markup for single,
   the above still works but this ensures a full width single button. */
        .addon-btn-group:only-child,
        .addon-btn-group.single {
            width: 100%;
        }

    /* ---------- THEME COLORS (override Bootstrap safely) ---------- */
    .addon-apply-btn {
        color: #ffffff !important;
        background-color: #28A745 !important;
        border: none !important;
    }

        .addon-apply-btn:hover {
            background-color: #218838 !important;
            color: #fff;
        }

    .addon-remove-btn {
        background-color: #DC3545;
        color: #ffffff !important;
        border: none !important;
    }

    .addon-apply-btn.btnApplied {
        background-color: #17A2B8 !important;
    }

        .addon-apply-btn.btnApplied:hover {
            background-color: #138496 !important;
        }

    .addon-remove-btn:hover {
        background-color: #C82333 !important;
    }

    /* optional update button color (golden) */
    .addon-update-btn {
        background-color: #DC3545 !important;
        color: #fff !important;
        border: none !important;
    }

    /* ---------- QUANTITY BOX THEME + LAYOUT ---------- */
    /* wrapper width (moved from inline style) */
    .addon-qty-box {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 120px; /* keep same width you used before */
        justify-content: center;
    }

    /* the +/- buttons */
    .addon-qty-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px !important;
        border: none !important;
        background-color: #0b4b33 !important; /* dark green */
        color: #fff !important;
        padding: 0;
        box-shadow: 0 6px 14px rgba(6,40,30,0.08);
    }

        .addon-qty-btn:hover {
            background-color: #c49a49 !important; /* golden hover */
        }

    /* input field (number) */
    .addon-qty-input {
        width: 48px; /* slightly wider so number is not cramped */
        height: 36px;
        line-height: 36px; /* ensures vertical centering in case of font differences */
        text-align: center;
        border-radius: 8px;
        border: 1px solid #0b4b33 !important; /* green border to match theme */
        font-weight: 700;
        color: #0b4b33;
        padding: 0; /* remove internal left/right padding which caused centering issues */
        background: #fff;
    }

        /* fix if Bootstrap input adds padding — enforce zero padding around number */
        .addon-qty-input.form-control {
            padding: 0 !important;
        }

    /* ---------- SMALL RESPONSIVE POLISH ---------- */
    @media (max-width: 540px) {
        .addon-btn-group {
            flex-direction: row;
        }

            .addon-btn-group .addon-btn {
                width: 100%;
            }

        .addon-qty-box {
            width: 110px;
        }
    }

    .addon-apply-btn:hover {
        background-color: #c49a49 !important;
        background-color: #218838 !important;
    }

    .addon-remove-btn {
        background-color: #b91c1c !important;
        border: none !important;
        color: #fff !important;
    }

        .addon-remove-btn:hover {
            background-color: #ef4444 !important;
        }

    .addon-update-btn {
        background-color: #0b210b !important;
        background-color: #28A745 !important;
        border: none !important;
        color: #fff !important;
    }

        .addon-update-btn:hover {
            background-color: #218838 !important;
        }


    /*colors*/
    /* Minus button */
    .addon-qty-btn.btn-minus {
        background-color: #0b210b !important; /* same teal */
        color: #fff !important;
        border: none !important;
    }

        .addon-qty-btn.btn-minus:hover {
            background-color: #a37f38 !important; /* darker golden */
        }

    /* Plus button */
    .addon-qty-btn.btn-plus {
        background-color: #0b210b !important; /* golden accent */
        color: #fff !important;
        border: none !important;
    }

        .addon-qty-btn.btn-plus:hover {
            background-color: #a37f38 !important; /* darker golden */
        }

    /* Input box */
    .addon-qty-input {
        width: 48px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 6px;
        border: 1px solid #ddd !important;
        font-weight: 700;
        color: #333;
        padding: 0;
        background: #fff;
    }


    /*cost css*/

    /* Only style the price */

    .addon-item .addon-price {
        display: inline-block;
        padding: 4px 10px;
        font-weight: 700;
        font-size: 1.05rem;
        color: #0b3f1f;
        background: #fff; /* keeps it clean */
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12); /* subtle shadow */
        margin-left: 0px !important;
    }

    .addon-applied small {
        color: #248524;
    }

    .addon-card-new .addon-title {
        margin-bottom: 0px;
    }

    .addon-btn-group .addon-btn {
        padding: 4px 14px;
        min-height: 30px;
    }

    .addon-qty-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 8px !important;
    }

    .addon-qty-input {
        max-width: 48px;
        height: 30px;
        line-height: 30px;
    }


    /* ===== Force-hide native dropdown/calendar indicators (all browsers) ===== */
    select#safari-person, select#safari-time,
    select#safari-person:focus, select#safari-time:focus {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        padding-right: 1.5rem !important; /* room for fake arrow */
        background-color: transparent !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'><path fill='%230b2b1b' d='M5 8L0 0h10z'/></svg>") !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><defs><filter id='s' x='-50%' y='-50%' width='200%' height='200%'><feOffset dx='0' dy='-0.2' result='o'/><feGaussianBlur stdDeviation='0.25' result='b'/><feMerge><feMergeNode in='b'/><feMergeNode in='SourceGraphic'/></feMerge></filter></defs><path filter='url(%23s)' d='M6 8L0 0h12z' fill='%230b2b1b'/><path d='M6 7.2L1 0.6h10z' fill='%23ffffff' fill-opacity='0.03'/></svg>") !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' stroke='%23000' stroke-width='2' fill='none'><path d='M1 2l5 5 5-5'/></svg>");
        background-repeat: no-repeat !important;
        background-position: right 10px center !important;
        background-size: 10px 8px !important;
        font-size: 16px;
    }

        /* WebKit (Chrome, Safari, Edge Chromium) - hide internal indicators */
        /*    form#form1 select#safari-person.form-control::-webkit-calendar-picker-indicator,*/
        select#safari-person.form-control::-webkit-clear-button,
        select#safari-person.form-control::-webkit-inner-spin-button,
        select#safari-person.form-control::-webkit-search-cancel-button, select#safari-time.form-control::-webkit-clear-button,
        select#safari-time.form-control::-webkit-inner-spin-button,
        select#safari-time.form-control::-webkit-search-cancel-button {
            display: none !important;
            -webkit-appearance: none !important;
            width: 0 !important;
            height: 0 !important;
            opacity: 0 !important;
        }

        /* Firefox */
        select#safari-person.form-control::-moz-focus-inner, select#safari-time.form-control::-moz-focus-inner {
            border: 0 !important;
        }

        /* IE / old Edge */
        select#safari-person.form-control::-moz-focus-inner, select#safari-time.form-control::-ms-expand {
            display: none !important;
        }

        /* extra specificity fallback */
        select#safari-person.form-control {
            -webkit-appearance: none !important;
            appearance: none !important;
        }

    .safari-date-div, .safari-time-div, .safari-person-div {
        padding-right: 0px;
    }

    @media(max-width:767px) {
        select#safari-person, select#safari-time,
        select#safari-person:focus, select#safari-time:focus {
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
            padding-right: 1rem !important; /* room for fake arrow */
            background-color: transparent !important;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'><path fill='%230b2b1b' d='M5 8L0 0h10z'/></svg>") !important;
            background-repeat: no-repeat !important;
            background-position: right 10px center !important;
            background-size: 10px 8px !important;
            font-size: 16px;
        }

            /* WebKit (Chrome, Safari, Edge Chromium) - hide internal indicators */
            /*    form#form1 select#safari-person.form-control::-webkit-calendar-picker-indicator,*/
            select#safari-person.form-control::-webkit-clear-button,
            select#safari-person.form-control::-webkit-inner-spin-button,
            select#safari-person.form-control::-webkit-search-cancel-button, select#safari-time.form-control::-webkit-clear-button,
            select#safari-time.form-control::-webkit-inner-spin-button,
            select#safari-time.form-control::-webkit-search-cancel-button {
                display: none !important;
                -webkit-appearance: none !important;
                width: 0 !important;
                height: 0 !important;
                opacity: 0 !important;
            }

            /* Firefox */
            select#safari-person.form-control::-moz-focus-inner, select#safari-time.form-control::-moz-focus-inner {
                border: 0 !important;
            }

            /* IE / old Edge */
            select#safari-person.form-control::-moz-focus-inner, select#safari-time.form-control::-ms-expand {
                display: none !important;
            }

            /* extra specificity fallback */
            select#safari-person.form-control {
                -webkit-appearance: none !important;
                appearance: none !important;
            }

        .safari-booking-info .left-content {
            width: -webkit-fill-available;
        }

        .mob-bsgx0.row {
            --bs-gutter-x: 0 !important;
        }
        #safariOptions .form-select {
            font-size: 13px !important;
        }
      
    }

    @media (min-width: 768px) and (max-width: 1024px) {
        .right-col-book-now {
            padding-inline: 0px;
        }

        .review-booking .container {
            max-width: 97%;
        }

        .tab-pr0 {
            padding-right: 0px;
        }
        .price-table li:nth-child(-n+3) > div:first-of-type:is(.room-price, .price-label, .price-value) {
            flex: 1 1 100px;
            font-size:15px;
        }
        .booking-card .price-value {
            font-size: 16px;
        }
        .booking-card .price-value {
      
            flex: 1 1 81px;
            text-align: end;
        }
        .single-addon-item .addon-price {
      
            flex: 1 1 100px;
        }
        .safari-checkbox-container #safariOptions .form-label {
            font-size: 12px !important;
        }

    
    }
@media (max-width: 768px){
 
}
.included-safari-section .btn-primary {
    /* background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); */
    background: #17A2B8 !important;
    background-color: #17A2B8 !important;
    color: white;
}

button#addSafariBtn {
    background: #17A2B8 !important;
    background-color: #17A2B8 !important;
    color: white;
}
button#removeSafariBtn {
    background-color: #b91c1c !important;
    border: none !important;
    color: #fff !important;
}
button#updateSafariBtn {
    background-color: #17A2B8 !important;
    color: white;
}