body{ background:#287DFA url(../images/planning/bg-startplaning.webp) no-repeat !important; overflow-x:hidden;}
input:focus{ outline:0px;}
.panning-wrap{max-width:942px; padding:0 15px; margin:0 auto 0 auto; width:100%; display:none;}
.panning-wrap .planning_box{ width:100%; padding-top:140px; padding-bottom:40px; min-height:848px;}
.panning-wrap .planning-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:50px;}
.panning-wrap .planning-head .numberslide{ display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:26px;width:52px; height:52px; font-size:22px; font-weight:bold; color:#287DFA;}
.panning-wrap .planning-head p{ color:#42DFFF; font-size:22px;}
.panning-wrap .titleSlide{color:#FFF; font-size:34px; font-weight:bold; margin-bottom:20px;}
.working-container{margin:0; padding:0; position:relative;}
.working-container .searchbox{ height:66px; background:#fff; border-radius:14px; box-shadow:0 3px 6px rgba(0,0,0,0.25); margin-bottom:12px; position:relative;}
.working-container .searchbox input.des-field{ height:66px; background:#fff; border-radius:14px; padding:15px 20px; border:1px solid #00DBF0; width:100%; font-size:20px;}
.working-container .searchbox input.des-field.city-airport{ background:#fff url(../images/planning/search-svg.svg) no-repeat top 50% left 15px; padding-left:48px;}
.working-container .searchbox .searchbox{margin-bottom:0px;}
.working-container.fist .destination_search_lists{top:0 !important; border-radius:10px;}
.trend-dest{background:#fff; border-radius:14px; box-shadow:0 10px 6px rgba(0,0,0,0.25); border:1px solid #00DBF0; padding:20px;}
.trend-dest .trending-title{ display:inline-flex; align-items:center; gap:0 10px; font-size:16px; font-weight:500;}
.trend-dest .destination-list{ margin-top:10px; display:flex; align-items:flex-start; justify-content:space-between;}
.trend-dest .destination-list ul.listImg{margin:0; padding:0; list-style:none; display: flex; justify-content: space-between; width: 100%; gap: 10px;}
.trend-dest .destination-list ul.listImg li{margin:0; padding:0; list-style:none; display:flex; flex-direction:row;}
.trend-dest .destination-list ul.listImg li a{text-decoration:none;}
.trend-dest .destination-list ul.listImg li img{ max-width:162px; border-radius:16px; margin-bottom:8px; width: 100%; height: auto;}
.trend-dest .destination-list ul.listImg li p{font-size:18px; font-weight:500; color:#222;}
.trend-dest .destination-list ul.listImg li.active p{font-weight:700; color:#000;}
.trend-dest .destination-list ul.listImg li.active img{box-shadow:0 3px 6px rgba(0,0,0,0.5);}
.working-container .nextBtn{margin-top: 20px; display: flex; padding: 0 20px; justify-self: end; border: 0px; background: #000; min-width: 120px; border-radius: 14px; color: #fff; font-size: 20px; font-weight: 500; justify-content: center; line-height: 58px;}
.back-btn{ position:absolute; left:30px; padding:5px;}
.back-btn .prevBtn{ background:none; border:0;}
.working-container .searchbox .acomplete-start {position: relative; top: 0px; width: 100%; }
    .working-container .searchbox .acomplete-start ul {
        top: 10px !important;
        position: absolute;
        width: 100%;
        box-shadow: 0px 13px 49px #00000029;
        display: block;
        max-height: 300px;
        min-width: 250px;
        z-index: 4;
        background: #fff;
        border: 1px solid #00DBF0;
        border-radius: 14px;
        padding: 15px 15px 0 15px;
        left: 0 !important;
        overflow: auto;
    }
.working-container .searchbox .acomplete-start ul .ui-state-active{background:none !important;}
.panning-wrap.active {
    display: flex;
}
/*.prevBtn {opacity: 0; pointer-events: none; transition: opacity 0.5s ease;}*/
.prevBtn.visible {opacity: 1; pointer-events: auto;}
.fade-out-left { animation: fadeOutLeft 0.5s forwards; }
.fade-in-right { animation: fadeInRight 0.5s forwards; }
.fade-out-right { animation: fadeOutRight 0.5s forwards; }
.fade-in-left { animation: fadeInLeft 0.5s forwards; }
@keyframes fadeOutLeft {
    0% { opacity: 1; transform: translateX(0%); }
    100% { opacity: 0; transform: translateX(-10%); }
}
@keyframes fadeInRight {
    0% { opacity: 0; transform: translateX(10%); }
    100% { opacity: 1; transform: translateX(0%); }
}
@keyframes fadeOutRight {
    0% { opacity: 1; transform: translateX(0%); }
    100% { opacity: 0; transform: translateX(10%); }
}
@keyframes fadeInLeft {
    0% { opacity: 0; transform: translateX(-10%); }
    100% { opacity: 1; transform: translateX(0%); }
}


.range-wrap{ margin:0px;}
.range-wrap .fromto{ display:flex; align-items:center; justify-content:space-between; font-size:16px; color:#959595;}
.range-night {position: relative; padding-top: 90px; margin-top: 80px;}
.range-night .range-slider {appearance: none; width: 100%; height: 6px; border-radius: 3px; background: linear-gradient(to right, #287DFA 0%, #D4D6DD 0%); outline: none; transition: background 0.3s ease-in-out; position: unset;}
.range-night .range-slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 23px; height: 23px; border-radius: 50%; background: #287DFA; cursor: pointer; border: none; margin-top: -1px; box-shadow:0 0 6px rgba(0,0,0,0.16);}
.range-night .range-slider::-moz-range-thumb {width: 23px; height: 23px; border-radius: 50%; background: #287DFA; cursor: pointer; border: none; box-shadow:0 0 6px rgba(0,0,0,0.16);}
.range-night .popup {position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); background-color: #287DFA; color: #fff; padding: 16px 0; border-radius: 14px; text-align: center; font-size: 18px; font-weight:500; width: 105px; transition: left 0.1s ease-in-out;}
.range-night .popup::after {content: ''; position: absolute; bottom: -8px; left: 50%;transform: translateX(-50%) rotate(45deg); border-radius: 5px; width: 20px; height: 20px; background: #287Dfa;}
.range-night .popup img {display: block; margin: 0 auto 4px;}


.month-choose{display: flex; flex-wrap: wrap; gap: 16px;}
.custom-radio {display: flex; position: relative; align-items: center; padding-left: 0; width:calc(25% - 12px); border: 1px solid #CFCFCF; border-radius:10px;}
.custom-radio:first-child {margin: 0px;}
.custom-radio .custom-control-radio{border: 0px solid #222222; width: 0px; height: 0px; margin: 0px; appearance: none; vertical-align: top; background-color: #fff; background-repeat: no-repeat; background-position: center;float: left; background-size: contain;}    
.custom-radio label {font-size: 16px; font-weight: 500; border:0px solid #CFCFCF; border-radius:10px; display: block; width: 100%; text-align: center; cursor:pointer; line-height: 58px;}
.custom-radio label:before, .custom-radio label:after { display: none;}
/*.custom-radio .custom-control-radio:checked[type="radio"] {border-width: 1px; background-size: 8px; background-color: #F2F2F2; border-color: #222222; box-shadow: 0 0 10px rgba(0,0,0,.25); background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><rect id="Rectangle_7428" data-name="Rectangle 7428" width="8" height="8" rx="4"/></svg>');}*/
/*.custom-radio .custom-control-radio:checked[type="radio"] + label,*/ .custom-radio.checked{ border:1px solid #287DFA; background:#EBF3FF; color:#287DFA;}

.custom-radio1 {display: flex; position: relative; align-items: center; padding-left: 0; width:calc(25% - 12px)}
.custom-radio1:first-child {margin: 0px;}
.custom-radio1 .custom-control-radio{border: 0px solid #222222; width: 0px; height: 0px; margin: 0px; appearance: none; vertical-align: top; background-color: #fff; background-repeat: no-repeat; background-position: center;float: left; background-size: contain;}    
.custom-radio1 label {font-size: 16px; font-weight: 500; border:1px solid #CFCFCF; border-radius:10px; display: block; width: 100%; text-align: center; cursor:pointer; line-height: 58px;}
.custom-radio1 label:before, .custom-radio1 label:after { display: none;}
/*.custom-radio .custom-control-radio:checked[type="radio"] {border-width: 1px; background-size: 8px; background-color: #F2F2F2; border-color: #222222; box-shadow: 0 0 10px rgba(0,0,0,.25); background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><rect id="Rectangle_7428" data-name="Rectangle 7428" width="8" height="8" rx="4"/></svg>');}*/
.custom-radio1 .custom-control-radio:checked[type="radio"] + label{ border:1px solid #287DFA; background:#EBF3FF; color:#287DFA;}

.month-choose label img{ max-width:100%; height:auto;}

.travelType .custom-radio1 label{padding: 16px 16px 0; }
.travelType .custom-radio1 label p{line-height:40px; }
.popupBox {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); z-index:9;overflow:auto;}
.popupBox .popup-content {background: white; padding: 20px; border-radius: 20px; position: relative; left: 0; right: 0; margin: 0 auto; top: 50%; transform: translateY(-50%); max-width: 335px;}
.popup-content h3{ font-size:22px; font-weight:bold; padding-right: 24px;}
.popup-content .bckbtn{ background:transparent; border:0px; padding: 0 12px 0 0; margin-bottom: 15px; position: absolute; right: 5px;}
.groupTrvl .passenger-group {display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #DEDEDE;}
.groupTrvl .passenger-group .passenger-label {flex: 1; font-size:18px; color:#000; line-height:19px;}
.groupTrvl .passenger-group .passenger-label .age-info {font-size: 14px; color: #808080;}
.groupTrvl .passenger-group .controls {display: flex; align-items: center; border:1px solid #DEDEDE; border-radius:6px; padding:10px;}
.groupTrvl .passenger-group .controls button {width: 24px; height: 24px; line-height:18px; font-size: 18px; font-weight: bold; border-radius: 50%; border: 0px solid #ccc; background: #DEDEDE; cursor: pointer;}
.groupTrvl .passenger-group .controls input { width: 40px; text-align: center; margin: 0 10px; border: none; background: transparent; font-size: 16px;  font-weight: bold;}
.groupTrvl .confirm-button {margin-top: 16px; background-color:#287DFA; color: white; padding: 8px 20px; font-size:16px; border: none; font-weight: 600; width: 100%; cursor: pointer; border-radius: 8px;}
.numberTraveler {margin: 20px 0 0 0; border-top: 1px solid #dedede; padding-top: 15px; display: flex; gap:0 15px; align-items: center;}
.numberTraveler a{ color: #287DFA; border: 1px solid #287DFA; padding: 2px 10px 1px; border-radius: 5px; font-size: 13px;}
.numberTraveler a:hover{text-decoration:none; color:#fff; background-color:#287DFA;}

.priceRangewrp{ padding:0;}
.price-range-wrapper {width: 100%; margin: 40px auto 0; position: relative; padding:10px 0;}
.price-popup {position: absolute; left: 0; top: -10px; transform: translate(-50%, -50%); background-color: #287DFA; color: #fff; padding: 10px 0; border-radius: 14px; text-align: center; font-size: 18px; font-weight: 500;width: 150px; transition: left 0.1s ease-in-out;  box-shadow: 0 3px 8px rgba(0,0,0,0.2);}
.price-popup::before {content: ''; position: absolute; bottom: -8px; left: 50%;transform: translateX(-50%) rotate(45deg); border-radius: 5px; width: 20px; height: 20px; background: #287Dfa;}
.price-slider-track {position: relative;height: 6px;background-color: #ddd;border-radius: 3px;margin-top: 30px;}
.price-range-bar {position: absolute;height: 6px;background-color: #287DFA;top: 0;border-radius: 3px;z-index: 1;}
.price-slider-track input[type="range"] {position: absolute; pointer-events: none; -webkit-appearance: none; width: 100%; background: none; margin: 0; height: 26px; z-index: 2;}
.price-slider-track input[type="range"]::-webkit-slider-thumb {pointer-events: auto; -webkit-appearance: none; height: 23px; width: 23px; border-radius: 50%; background-color: #287DFA; border: none;  cursor: pointer; margin-top: -2px; z-index: 2; position: relative;}
.price-labels {display: flex; justify-content: space-between; font-size: 16px;color: #959595; margin-top: 10px;}
.budgetPer {margin: 20px 0 0 0; border-top: 1px solid #dedede; padding-top: 15px; display: flex; justify-content: space-between; align-items: center; color: #6E6E6E;}

.trend-dest .form-box h5{font-size: 18px; font-weight: 400;}
.trend-dest .iti{ display:flex; gap:0 12px; width:100%;}
.trend-dest .iti__flag-container { position:relative !important; border:1px solid #8e8e8e; border-radius:6px; font-size:16px; color:#222;}
.trend-dest .iti__flag-container:hover { border:1px solid #474747;}
.trend-dest .numberfield{ width:100%;}
.trend-dest .form-box .fields-group .floating-label-input .input-text.txtPhone { border:1px solid #8e8e8e !important; border-radius:6px;}
.trend-dest .form-box .fields-group .floating-label-input .input-text.txtPhone:focus { border:1px solid #474747 !important;}
.iti--separate-dial-code .iti__selected-flag{border:0px;}
.form-box .fields-group .floating-label-input .input-text.areatext{padding: 12px 15px !important; min-height: 100px;}

.planning-footer{ border-top:1px solid rgba(255,255,255,0.23); max-width:1140px; margin:0 auto; padding:20px 0;}
.planning-footer p{color:rgba(255,255,255,0.6); font-weight:400; text-align:center;}


.thankyPopWrp{}
.thankyPopWrp .thankyPop{ text-align:center; padding: 0px;}
.thankyPopWrp .thankyPop img{margin: 15px 0;}
.thankyPopWrp .thankyPop p{ margin:8px 0 20px 0; font-size:18px;}
.thankyPopWrp .thankyPop .gohomebtn{border:0px; background:#287DFA; color:#fff; border-radius:8px; text-align:center; font-size:16px; font-weight:500; padding: 9px 25px 7px 25px; width: 100%;}


.thankBig{ margin-top:0px;}
.thankBig .thankBigContent{text-align:center; padding:50px 0px;}
.thankBig .thankBigContent > img{margin:20px 25px; max-width:80%; height:auto;}
.thankBig .thankBigContent h3{ font-weight:bold; font-size:34px;}
.thankBig .thankBigContent p{ margin:8px 0 35px 0; font-size:18px; line-height:30px;}
.thankBig .thankBigContent .gohomebtn{border:2px solid #287DFA; background:transparent; color:#287DFA; border-radius:16px;cursor: auto; text-align:center; font-size:18px; font-weight:500; padding: 1px 25px 0px 25px;}

.leftRightBtn{ display:flex; margin-top:20px; justify-content:space-between;}
.leftRightBtn .nextBtn {

    background: none;
    padding: 0;
    margin: 0; font-size:18px; font-weight:600;
    gap: 0 10px;
    line-height: normal; white-space:nowrap; align-items:center; background:#fff; border-radius:14px; padding:8px 8px 8px 20px; color:#000; border:1px solid #fff;
}
.leftRightBtn .prevBtn {
    background: none;
    padding: 0;
    margin: 0;
    display: flex;
    font-size: 18px;
    font-weight: 700;
    gap: 0 10px;
    line-height: normal;
    white-space: nowrap;
    align-items: center;
    background: transparent;
    border-radius: 14px;
    padding: 8px;
    color: #ffffff;
    border: 2px solid #ffffff;
    width: 48px;
    justify-content: center;
}
.leftRightBtn span{ display:flex; align-items:center; justify-content:center; background:#287DFA; min-width:30px; height:30px; border-radius:8px; color:#fff;}
.prevBtn font{ display:none;}
.leftRightBtn .nextBtn.submitBtn{padding:14px 20px 13px; background:#000; color:#fff; border:0px;}

@media (max-width:1140px) {
    .back-btn {
        position: absolute;
        left: 18px;
        margin-top: -42px;
        padding: 5px;
    }
    .planning-footer {
        margin: 0 15px;
    }
}
@media screen and (max-width: 991px) {
    .working-container.fist .listResult {
        max-height: calc(100vh - 295px);
        min-height: auto;
        height: auto;
    }
}
@media (max-width:600px){
    
    .popupBox .popup-content {
        bottom: 0;
        top: auto;
        transform: unset;
        position: fixed;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
    }
    .panning-wrap .planning_box{ min-height:768px; padding-top: 110px;}
    .panning-wrap .planning-head .numberslide{ font-size:18px; width:36px; height:36px;}
    .back-btn{ left:10px;}
    .panning-wrap .planning-head p{ font-size:18px;}
    .panning-wrap .titleSlide{ font-size:26px; margin-bottom:15px; line-height: 30px; text-overflow: ellipsis;}
    .panning-wrap .planning-head{ margin-bottom:30px;}
    .working-container .searchbox{ height:56px;}
    .working-container .searchbox .searchbox {padding: 10px;}
    .working-container .searchbox input.des-field{ height:56px; font-size:18px; padding:10px 15px;}
    .trend-dest{padding:20px 15px;}
    .trend-dest .destination-list ul.listImg li p{ font-size:16px;}
    .trend-dest .destination-list ul.listImg{ flex-wrap:wrap; max-height: 250px; overflow: auto;}
    .trend-dest .destination-list ul.listImg li{ width:100%;}
    .trend-dest .destination-list ul.listImg li img {max-width: 48px; border-radius: 10px; margin-bottom:0px;}
    .trend-dest .destination-list ul.listImg li a {display:flex; width:100%; align-items:center; gap:0 10px;}
    /*.working-container .nextBtn {margin-top: 15px; min-width: 100%; font-size: 18px; line-height: 48px;}*/
    
    .month-choose{ gap:10px;}
    .custom-radio,.custom-radio1 {width: calc(50% - 5px);}
    .custom-radio label, .custom-radio1 label{ line-height:46px;}

    .month-choose label img {max-width: 70%;}
    .thankBig .thankBigContent h3{font-size:26px;}
    .thankBig .thankBigContent{padding:30px 0;}
    .thankBig .thankBigContent p{ line-height:28px;}

    .leftRightBtn .nextBtn{ font-size:16px; padding:6px 6px 6px 15px;}
    .leftRightBtn .prevBtn{ width:43px; height:43px; font-size:16px;}
}

@media (max-width:389px) {
    .numberTraveler {margin: 12px 0 0 0; padding-top: 12px; align-items: flex-end;}
    .numberTraveler p span{ display:block;}
    .thankBig .thankBigContent{padding:20px 0;}
    .thankBig .thankBigContent .gohomebtn{ padding:1px 15px 0;}
}



.error-message {display: none; font-size: 13px; color: #ff4d4f; margin-top: 4px;}
.error-modal {position: fixed; top: -100px; left: 50%; transform: translateX(-50%); color:#40070c; background-color: #ff959f; border: 1px solid #b56870; padding: 12px 20px; border-radius: 8px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); font-size: 16px; z-index: 9999; opacity: 0; transition: all 0.5s ease; min-width: 348px; text-align: center;}
.error-modal.show {top: 100px; opacity: 1;}
@media (width <= 600px) {
    /*.error-modal{ text-align:left;}*/
}
@media (max-height: 650px) {
    .qpop-wrap .qpop-box {
        transform: none !important;
        margin-top: 40px;
        margin-bottom: 40px;
    }
}



.year-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
}

.year-tab {
    padding: 10px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    border: 2px solid transparent;
    background-color: #eee;
    transition: 0.3s;
}

.year-tab.active {
    background-color: #339dff;
    color: white;
    border-color: #339dff;
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.month-btn {
    padding: 18px 0;
    text-align: center;
    border-radius: 10px;
    font-weight: 400;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
    border: 1px solid #CFCFCF;
}

.month-btn:hover {
    border: 1px solid #287DFA;
    background: #EBF3FF;
    color: #287DFA;
}

.month-btn.disabled {
    background-color: #eeeeee;
    color: #b6b6b6;
    pointer-events: none;
    border-color: #eee;
}

.month-btn.selected {
    border: 1px solid #287DFA;
    background: #EBF3FF;
    color: #287DFA;
}

@media (width <= 600px) {
    .month-grid {grid-template-columns: repeat(3, 1fr);}
}
@media (width <= 480px) {
    .month-btn{ font-size:14px; padding:14px 0;}
    .year-tab{ padding:5px 25px;}
}