
.tour-view-page{
    padding:115px 20px 90px;
    background:#fff;
}
.tour-view-wrap{
    max-width:1200px;
    margin:0 auto;
}
.tour-breadcrumb{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:22px;
    color:#8a8a8a;
    font-size:13px;
}
.tour-breadcrumb a{color:inherit}
.tour-view-top{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);
    gap:46px;
    align-items:start;
}
.tour-main-image{
    overflow:hidden;
    border-radius:22px;
    background:#f5f5f5;
    aspect-ratio:4/3;
}
.tour-main-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.tour-category{
    display:block;
    margin-bottom:9px;
    color:#11896f;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
}
.tour-booking-panel h1{
    margin:0;
    color:#191919;
    font-size:34px;
    line-height:1.25;
}
.tour-name-eng{
    margin:8px 0 0;
    color:#888;
    font-size:14px;
}
.tour-select-box{
    margin-top:28px;
    padding:24px;
    border:1px solid #e7e7e7;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 32px rgba(0,0,0,.05);
}
.tour-select-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.tour-field label{
    display:block;
    margin-bottom:8px;
    color:#444;
    font-size:13px;
    font-weight:700;
}
.tour-date-box{position:relative}
.tour-date-box i{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    color:#777;
    pointer-events:none;
}
.tour-field input,
.tour-field select{
    width:100%;
    height:50px;
    padding:0 14px;
    box-sizing:border-box;
    border:1px solid #ddd;
    border-radius:10px;
    background:#fff;
    font-size:14px;
}
.tour-person-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:14px;
}
.tour-person-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:62px;
    padding:0 14px;
    border:1px solid #e5e5e5;
    border-radius:10px;
}
.tour-counter{
    display:flex;
    align-items:center;
    gap:8px;
}
.tour-counter button{
    width:30px;
    height:30px;
    border:1px solid #ddd;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
}
.tour-counter strong{
    min-width:25px;
    text-align:center;
}
.tour-total-box{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid #eee;
}
.tour-total-box>span{
    color:#777;
    font-size:13px;
}
.tour-total-price{
    display:flex;
    justify-content:flex-end;
    gap:4px;
    align-items:baseline;
    margin-top:5px;
}
.tour-total-price strong{
    color:#111;
    font-size:31px;
}
.tour-total-price em{
    color:#111;
    font-size:16px;
    font-style:normal;
    font-weight:700;
}
#tourPriceMessage{
    min-height:18px;
    margin:6px 0 0;
    text-align:right;
    color:#999;
    font-size:12px;
}
.tour-cart-btn{
    width:100%;
    height:54px;
    margin-top:18px;
    border:0;
    border-radius:12px;
    background:#111;
    color:#fff;
    font-size:15px;
    font-weight:800;
    cursor:pointer;
}
.tour-cart-btn:disabled{
    background:#bbb;
    cursor:default;
}
.tour-cart-note{
    margin-top:9px;
    text-align:center;
    color:#999;
    font-size:12px;
}
.tour-detail-info{
    margin-top:68px;
    border-top:1px solid #eee;
}
.tour-info-block{
    padding:34px 0;
    border-bottom:1px solid #eee;
}
.tour-info-block h2{
    margin:0 0 14px;
    font-size:21px;
}
.tour-info-block>div{
    color:#555;
    font-size:14px;
    line-height:1.8;
}
@media(max-width:900px){
    .tour-view-top{
        grid-template-columns:1fr;
        gap:28px;
    }
    .tour-booking-panel h1{font-size:29px}
}
@media(max-width:600px){
    .tour-view-page{padding:90px 14px 60px}
    .tour-select-grid,
    .tour-person-row{
        grid-template-columns:1fr;
    }
    .tour-select-box{padding:18px}
}

/* --------------------------------------------------
   TOUR FLATPICKR
-------------------------------------------------- */
.tour-date-box{
    position:relative;
    cursor:pointer;
}

.tour-date-box input{
    cursor:pointer;
    padding-right:44px !important;
}

.tour-date-box input:focus{
    outline:none;
    border-color:#11896f !important;
    box-shadow:0 0 0 3px rgba(17,137,111,.10);
}

.tour-date-box i{
    color:#11896f !important;
    pointer-events:none;
}

.flatpickr-calendar{
    width:330px !important;
    padding:8px !important;
    border:0 !important;
    border-radius:18px !important;
    background:#fff !important;
    box-shadow:0 18px 50px rgba(0,0,0,.18) !important;
    font-family:inherit !important;
    overflow:hidden;
    z-index:99999 !important;
}

.flatpickr-months{
    padding:5px 3px 4px !important;
}

.flatpickr-months .flatpickr-month{
    height:44px !important;
}

.flatpickr-current-month{
    padding-top:8px !important;
    font-size:14px !important;
}

.flatpickr-current-month .cur-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month select.flatpickr-monthDropdown-months{
    color:#1b1b1b !important;
    font-weight:800 !important;
}

.flatpickr-prev-month,
.flatpickr-next-month{
    top:9px !important;
    width:36px !important;
    height:36px !important;
    padding:0 !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#11896f !important;
    font-size:24px !important;
    line-height:1 !important;
}

.flatpickr-prev-month{
    left:8px !important;
}

.flatpickr-next-month{
    right:8px !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover{
    background:#edf8f5 !important;
}

.flatpickr-weekdays{
    margin-top:3px !important;
}

span.flatpickr-weekday{
    color:#8c9494 !important;
    font-size:11px !important;
    font-weight:800 !important;
}

.flatpickr-day{
    border-radius:10px !important;
    color:#313737 !important;
    font-size:12px !important;
    font-weight:600 !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus{
    border-color:#edf8f5 !important;
    background:#edf8f5 !important;
    color:#11896f !important;
}

.flatpickr-day.today{
    border-color:#9fd7c9 !important;
    color:#11896f !important;
    font-weight:800 !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus{
    border-color:#11896f !important;
    background:#11896f !important;
    color:#fff !important;
    font-weight:800 !important;
    box-shadow:none !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover{
    border-color:transparent !important;
    background:transparent !important;
    color:#ced3d2 !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{
    color:#c7cccb !important;
}

@media(max-width:480px){
    .flatpickr-calendar{
        width:min(330px, calc(100vw - 28px)) !important;
    }
}

