/*
 * kwick-form-pro.css - Professional search-form redesign
 * -------------------------------------------------------------
 * LOAD ORDER: LAST, after style.css, mobtab.css, form-mob.css,
 *             kwick-custom.css, kwick-search.css
 *
 * SCOPE: Pure visual redesign of the hero search form (Bus / Tempo /
 *        Car tabs). ZERO markup or JS changes - every id, class, name
 *        and DOM node is preserved. This file only restyles.
 *
 * BRAND: --kt-brand #00b7c7 (teal) - matches the rest of the site.
 * -------------------------------------------------------------
 */

:root {
    --ktf-brand:        #00b7c7;
    --ktf-brand-dark:   #009aa8;
    --ktf-brand-light:  #e6f9fb;
    --ktf-ink:          #1a2b3c;
    --ktf-ink-soft:     #5a6b7b;
    --ktf-muted:        #98a5b3;
    --ktf-line:         #e3e8ef;
    --ktf-line-soft:    #eef2f6;
    --ktf-field-bg:     #f7f9fb;
    --ktf-radius:       16px;
    --ktf-radius-sm:    12px;
    --ktf-shadow:       0 18px 50px rgba(20, 43, 60, .12);
    --ktf-shadow-focus: 0 0 0 3px rgba(0, 183, 199, .18);
}

/* ===========================================================
   1. THE FORM CARD (baner-b) - floating white panel
   =========================================================== */
.hero-section .baner-b {
    padding:        18px 20px 22px !important;
    background:     #fff;
    border-radius:  22px;
    box-shadow:     var(--ktf-shadow);
    margin:         0 1rem;
    border:         1px solid var(--ktf-line-soft);
}

/* The wrapper that holds the tabs + form; keep the announcement pill readable */
.hero-section .bg-white-b { overflow: visible; }


/* ===========================================================
   2. TAB PILLS (Bus / Tempo Traveller / Car)
   =========================================================== */
.banner-form-tab ul.nav {
    gap:            10px;
    justify-content: center;
    flex-wrap:      wrap;
    margin-bottom:  4px;
}

.banner-form-tab .nav li .nav-link,
.banner-form-tab .nav-link {
    display:        inline-flex !important;
    align-items:    center;
    justify-content: center;
    gap:            8px;
    border-radius:  50px !important;
    padding:        10px 26px !important;
    font-size:      15px !important;
    font-weight:    600 !important;
    color:          var(--ktf-ink-soft) !important;
    background:     #fff !important;
    border:         1.5px solid var(--ktf-line) !important;
    box-shadow:     none !important;
    transition:     all .2s ease !important;
}

.banner-form-tab .nav li .nav-link:hover,
.banner-form-tab .nav-link:hover {
    border-color:   var(--ktf-brand) !important;
    color:          var(--ktf-brand) !important;
    background:     var(--ktf-brand-light) !important;
}

.banner-form-tab .nav li .nav-link.active,
.banner-form-tab .nav-link.active {
    background:     var(--ktf-brand) !important;
    border-color:   var(--ktf-brand) !important;
    color:          #fff !important;
    box-shadow:     0 6px 16px rgba(0, 183, 199, .30) !important;
}

.banner-form-tab .nav-link i { font-size: 15px; }


/* ===========================================================
   3. TRIP-TYPE RADIOS (One-Way / Round-Trip / Hourly)
   Rendered as segmented chips
   =========================================================== */
.trip-type {
    gap:            8px;
    margin-bottom:  4px;
}

.trip-type .form-check {
    position:       relative;
    margin:         0 !important;
    padding:        0 !important;
}

.trip-type .form-check .form-check-input {
    position:       absolute;
    opacity:        0;
    inset:          0;
    width:          100%;
    height:         100%;
    margin:         0;
    cursor:         pointer;
    z-index:        2;
}

.trip-type .form-check .form-check-label {
    display:        inline-flex;
    align-items:    center;
    margin:         0 !important;
    padding:        7px 16px;
    border-radius:  40px;
    font-size:      13.5px !important;
    font-weight:    500;
    color:          var(--ktf-ink-soft);
    background:     var(--ktf-field-bg);
    border:         1.5px solid var(--ktf-line);
    transition:     all .18s ease;
    cursor:         pointer;
    white-space:    nowrap;
}

.trip-type .form-check .form-check-input:checked ~ .form-check-label {
    background:     var(--ktf-brand-light);
    border-color:   var(--ktf-brand);
    color:          var(--ktf-brand-dark);
    font-weight:    600;
}

.trip-type .form-check .form-check-input:focus-visible ~ .form-check-label {
    box-shadow:     var(--ktf-shadow-focus);
}


/* ===========================================================
   4. THE FIELD ROW  (form-info)  - unified pill container
   Each field becomes a clean segment separated by hairlines
   =========================================================== */
.banner-form .form-info {
    display:        flex !important;
    flex-wrap:      wrap;
    align-items:    stretch;
    background:     #fff;
    border:         1.5px solid var(--ktf-line);
    border-radius:  var(--ktf-radius);
    overflow:       visible;
    margin-bottom:  0;
    box-shadow:     0 2px 10px rgba(20, 43, 60, .04);
}

.banner-form .form-info .form-item {
    flex:           1 1 0;
    min-width:      0;
    background:     transparent !important;
    padding:        12px 16px !important;
    border-left:    1px solid var(--ktf-line-soft) !important;
    border-radius:  0;
    display:        flex;
    flex-direction: column;
    justify-content: center;
    position:       relative;
    transition:     background .16s ease;
}

.banner-form .form-info .form-item:first-child {
    border-left:    none !important;
    border-top-left-radius:    var(--ktf-radius);
    border-bottom-left-radius: var(--ktf-radius);
}

.banner-form .form-info .form-item:last-child {
    border-top-right-radius:    var(--ktf-radius);
    border-bottom-right-radius: var(--ktf-radius);
}

.banner-form .form-info .form-item:hover,
.banner-form .form-info .form-item:focus-within {
    background:     var(--ktf-field-bg) !important;
}

/* Field labels */
.banner-form .form-info .form-item .form-label,
.banner-form .form-info .form-item label.form-label {
    font-size:      11px !important;
    font-weight:    700 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    color:          var(--ktf-muted) !important;
    margin-bottom:  4px !important;
    display:        block !important;
}

/* Inputs & selects inside fields - borderless, big, clean */
.banner-form .form-info .form-item .form-control,
.banner-form .form-info .form-item input.form-control,
.banner-form .form-info .form-item .kt-city-trigger,
.banner-form .form-info .form-item .kt-date-trigger {
    border:         none !important;
    background:     transparent !important;
    box-shadow:     none !important;
    padding:        0 !important;
    min-height:     26px;
    height:         auto;
    font-size:      16px !important;
    font-weight:    600 !important;
    color:          var(--ktf-ink) !important;
    border-radius:  0 !important;
    line-height:    1.35;
    width:          100%;
}

.banner-form .form-info .form-item .form-control::placeholder,
.banner-form .form-info .form-item .kt-city-trigger::placeholder {
    color:          var(--ktf-muted) !important;
    font-weight:    500 !important;
    opacity:        1;
}

/* Select2 rendered field - align to the new look */
.banner-form .form-info .form-item .select2-container .select2-selection--single {
    border:         none !important;
    background:     transparent !important;
    height:         auto !important;
    padding:        0 !important;
}
.banner-form .form-info .form-item .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding:        0 !important;
    font-size:      16px !important;
    font-weight:    600 !important;
    color:          var(--ktf-ink) !important;
    line-height:    1.35 !important;
}
.banner-form .form-info .form-item .select2-container--default .select2-selection--single .select2-selection__arrow {
    top:            2px !important;
    right:          0 !important;
}
.banner-form .form-info .form-item .select2-container {
    width:          100% !important;
}

/* The dropdown-toggle bus/tempo "From/To" wrapper */
.banner-form .form-info .form-item.dropdown .form-control {
    cursor:         pointer;
}

/* Bus/Tempo old readonly text fields */
.banner-form .form-info .form-item input[readonly] {
    cursor:         pointer;
}


/* ===========================================================
   5. SWAP BUTTON (between From & To)
   =========================================================== */
.way-icon.swapLocations {
    position:       absolute;
    left:           -14px;
    top:            50%;
    transform:      translateY(-50%);
    width:          30px;
    height:         30px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    background:     #fff !important;
    color:          var(--ktf-brand) !important;
    border:         1.5px solid var(--ktf-line);
    border-radius:  50%;
    box-shadow:     0 2px 8px rgba(20, 43, 60, .12);
    cursor:         pointer;
    z-index:        5;
    transition:     all .18s ease;
    padding:        0;
    font-size:      12px;
}

.way-icon.swapLocations:hover {
    background:     var(--ktf-brand) !important;
    color:          #fff !important;
    border-color:   var(--ktf-brand);
    transform:      translateY(-50%) rotate(180deg);
}

.way-icon.swapLocations i { font-size: 12px; }


/* ===========================================================
   6. + ADD STOPS  &  SUBMIT BUTTON
   =========================================================== */
.btn.addSelect,
.extra-fields-customer {
    background:     transparent !important;
    color:          var(--ktf-brand) !important;
    border:         1.5px dashed var(--ktf-brand) !important;
    border-radius:  40px !important;
    padding:        7px 18px !important;
    font-size:      13.5px !important;
    font-weight:    600 !important;
    box-shadow:     none !important;
    transition:     all .18s ease;
}
.btn.addSelect:hover,
.extra-fields-customer:hover {
    background:     var(--ktf-brand-light) !important;
    color:          var(--ktf-brand-dark) !important;
}

.search-btn,
.banner-form .search-btn {
    position:       static !important;
    left:           auto !important;
    right:          auto !important;
    bottom:         auto !important;
    top:            auto !important;
    transform:      none !important;
    width:          auto !important;
    min-width:      280px;
    height:         auto !important;
    margin:         0 !important;
    background:     var(--ktf-brand) !important;
    border:         none !important;
    border-radius:  50px !important;
    padding:        14px 46px !important;
    font-size:      16px !important;
    font-weight:    700 !important;
    letter-spacing: .3px;
    color:          #fff !important;
    box-shadow:     0 8px 22px rgba(0, 183, 199, .32) !important;
    transition:     transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.search-btn:hover,
.banner-form .search-btn:hover {
    background:     var(--ktf-brand-dark) !important;
    transform:      translateY(-2px) !important;
    box-shadow:     0 12px 28px rgba(0, 183, 199, .42) !important;
}
.search-btn i { font-size: 15px; }

/* Give the submit-button wrapper clean spacing inside the card */
.banner-form .normal-trip > .d-flex.justify-content-center,
.banner-form form > .d-flex.justify-content-center,
.banner-form .d-flex.justify-content-center.mt-3 {
    display:        flex !important;
    justify-content: center !important;
    align-items:    center;
    margin-top:     18px !important;
    padding-bottom: 4px;
}


/* ===========================================================
   7. VEHICLE ILLUSTRATION (top-right car/bus image)
   =========================================================== */
.banner-form .bus,
.tab-pane .bus {
    text-align:     right;
    margin-bottom:  -6px;
}
.banner-form .bus img,
.tab-pane .bus img {
    max-height:     84px;
    width:          auto;
}


/* ===========================================================
   8. PHONE FIELD (intlTelInput) inside the field row
   =========================================================== */
.banner-form .form-info .form-item .iti {
    width:          100%;
    display:        block;
}
.banner-form .form-info .form-item .iti__flag-container {
    padding:        0;
}

/* The phone input needs left room for the flag+dial-code that
   intlTelInput injects. Override the generic padding:0 rule. */
.banner-form .form-info .form-item .iti > input,
.banner-form .form-info .form-item .iti > input[type=tel],
.banner-form .form-info .form-item .iti > input[type=text],
.banner-form .form-info .form-item .iti .mobile,
.banner-form .form-info .form-item input.mobile {
    border:         none !important;
    background:     transparent !important;
    padding:        0 0 0 72px !important;
    min-height:     26px;
    font-size:      16px !important;
    font-weight:    600 !important;
    color:          var(--ktf-ink) !important;
    width:          100%;
}

/* Flag dropdown button - align it vertically within the field */
.banner-form .form-info .form-item .iti__selected-flag,
.banner-form .form-info .form-item .iti__flag-container {
    outline:        none;
}
.banner-form .form-info .form-item .iti__selected-flag {
    padding:        0 8px 0 2px !important;
    background:     transparent !important;
    height:         100% !important;
    display:        flex !important;
    align-items:    center !important;
}
.banner-form .form-info .form-item .iti__selected-dial-code {
    font-size:      15px !important;
    font-weight:    600 !important;
    color:          var(--ktf-ink) !important;
    margin-left:    6px;
}
/* The injected dropdown list should sit above everything */
.banner-form .form-info .form-item .iti__country-list {
    z-index:        99999 !important;
    text-align:     left;
}
/* placeholder colour on phone input */
.banner-form .form-info .form-item input.mobile::placeholder {
    color:          var(--ktf-muted) !important;
    font-weight:    500 !important;
}


/* ===========================================================
   9. VALIDATION ERROR LABELS
   =========================================================== */
.banner-form label.error,
.banner-form .error {
    position:       static !important;
    display:        block;
    margin-top:     3px;
    font-size:      11.5px;
    font-weight:    600;
    color:          #e5484d;
    bottom:         auto;
}


/* ===========================================================
   10. RESPONSIVE
   =========================================================== */

/* Tablet: 2-per-row fields */
@media (max-width: 991.98px) {
    .banner-form .form-info {
        border-radius: var(--ktf-radius);
    }
    .banner-form .form-info .form-item {
        flex:           1 1 45%;
        width:          50%;
        border-left:    1px solid var(--ktf-line-soft) !important;
        border-top:     1px solid var(--ktf-line-soft) !important;
    }
    .banner-form .form-info .form-item:nth-child(-n+2) {
        border-top:     none !important;
    }
    .banner-form .form-info .form-item:nth-child(odd) {
        border-left:    none !important;
    }
}

/* Mobile: stacked, each field a full-width card */
@media (max-width: 575.98px) {
    .hero-section .baner-b {
        padding:        14px !important;
        margin:         0 .5rem;
    }
    .banner-form .form-info {
        flex-direction: column;
        border:         none;
        background:     transparent;
        box-shadow:     none;
        gap:            10px;
    }
    .banner-form .form-info .form-item {
        flex:           1 1 100%;
        width:          100%;
        border:         1.5px solid var(--ktf-line) !important;
        border-radius:  var(--ktf-radius-sm) !important;
        padding:        12px 14px !important;
    }
    .banner-form .form-info .form-item:hover,
    .banner-form .form-info .form-item:focus-within {
        border-color:   var(--ktf-brand) !important;
    }
    .way-icon.swapLocations {
        left:           auto;
        right:          16px;
        top:            -13px;
        transform:      none;
    }
    .way-icon.swapLocations:hover {
        transform:      rotate(180deg);
    }
    .trip-type {
        overflow-x:     auto;
        flex-wrap:      nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .trip-type .form-check { flex: 0 0 auto; }
    .search-btn,
    .banner-form .search-btn {
        width:          100% !important;
        min-width:      0 !important;
        padding:        14px !important;
    }
    .banner-form .bus img,
    .tab-pane .bus img { max-height: 56px; }
}


/* ===========================================================
   11. CITY SEARCH POPUP - enforce fixed centered overlay
   Loads last so it wins over any earlier positioning.
   Popups are moved to <body> by JS; these rules guarantee
   they render as a centered modal, never in page flow.
   =========================================================== */
.kt-city-popup {
    position:       fixed !important;
    top:            50% !important;
    left:           50% !important;
    right:          auto !important;
    bottom:         auto !important;
    transform:      translate(-50%, -50%) !important;
    z-index:        999999 !important;
    width:          520px !important;
    max-width:      calc(100vw - 32px) !important;
    max-height:     80vh !important;
    background:     #fff !important;
    border-radius:  16px !important;
    box-shadow:     0 24px 64px rgba(20, 43, 60, .28) !important;
    overflow:       hidden !important;
    flex-direction: column !important;
}

/* Hidden by default (both class and inline failsafe respected) */
.kt-city-popup.d-none { display: none !important; }
.kt-city-popup:not(.kt-open) { display: none !important; }

/* Open state */
.kt-city-popup.kt-open {
    display:        flex !important;
}

/* Dark overlay behind popup */
.kt-city-overlay {
    position:       fixed !important;
    inset:          0 !important;
    background:     rgba(20, 43, 60, .45) !important;
    z-index:        999998 !important;
    display:        none;
}
.kt-city-overlay.kt-open {
    display:        block !important;
}

/* ---- Popup header ---- */
.kt-city-popup .kt-city-popup-header {
    display:        flex !important;
    align-items:    center;
    gap:            12px;
    padding:        18px 20px 14px;
    border-bottom:  1px solid var(--ktf-line-soft);
    flex-shrink:    0;
}
.kt-city-popup .kt-city-popup-back {
    width:          38px;
    height:         38px;
    border-radius:  10px;
    border:         1px solid var(--ktf-line);
    background:     var(--ktf-field-bg);
    display:        flex;
    align-items:    center;
    justify-content: center;
    cursor:         pointer;
    flex-shrink:    0;
    font-size:      18px;
    color:          var(--ktf-ink-soft);
    transition:     all .15s ease;
}
.kt-city-popup .kt-city-popup-back:hover {
    background:     var(--ktf-brand-light);
    color:          var(--ktf-brand);
    border-color:   var(--ktf-brand);
}
.kt-city-popup .kt-city-popup-title h6 {
    font-size:      17px;
    font-weight:    700;
    color:          var(--ktf-ink);
    margin:         0 0 2px;
    line-height:    1.2;
}
.kt-city-popup .kt-city-popup-title small {
    font-size:      12.5px;
    color:          var(--ktf-brand);
    font-weight:    600;
}

/* ---- Search input ---- */
.kt-city-popup .kt-city-search-wrap {
    padding:        16px 20px 12px;
    flex-shrink:    0;
}
.kt-city-popup .kt-city-search-input {
    width:          100%;
    border:         1.5px solid var(--ktf-line);
    border-radius:  12px;
    padding:        13px 16px 13px 44px;
    font-size:      15px;
    font-family:    inherit;
    outline:        none;
    color:          var(--ktf-ink);
    background:     #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2398a5b3' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 16px 50% no-repeat;
    transition:     border-color .15s ease;
}
.kt-city-popup .kt-city-search-input:focus {
    border-color:   var(--ktf-brand);
    box-shadow:     var(--ktf-shadow-focus);
}

/* ---- Scrollable body ---- */
.kt-city-popup .kt-city-popup-body {
    flex:           1;
    overflow-y:     auto;
    overflow-x:     hidden;
    padding-bottom: 10px;
}
.kt-city-popup .kt-city-popup-body::-webkit-scrollbar { width: 6px; }
.kt-city-popup .kt-city-popup-body::-webkit-scrollbar-thumb {
    background: var(--ktf-line); border-radius: 6px;
}

/* ---- Section labels (RECENT SEARCH / POPULAR CITIES) ---- */
.kt-city-popup .kt-city-section-label {
    display:        block;
    font-size:      11px !important;
    font-weight:    700 !important;
    text-transform: uppercase;
    letter-spacing: .7px;
    color:          var(--ktf-muted) !important;
    padding:        16px 20px 8px !important;
    margin:         0 !important;
}

/* ---- City result rows ---- */
.kt-city-popup .kt-city-result {
    display:        flex !important;
    align-items:    center;
    gap:            14px;
    padding:        11px 20px;
    cursor:         pointer;
    transition:     background .12s ease;
}
.kt-city-popup .kt-city-result:hover {
    background:     var(--ktf-brand-light);
}

/* Icon puck */
.kt-city-popup .kt-city-result-icon {
    width:          40px !important;
    height:         40px !important;
    min-width:      40px;
    border-radius:  50%;
    background:     var(--ktf-field-bg);
    display:        flex !important;
    align-items:    center;
    justify-content: center;
    flex-shrink:    0;
    color:          var(--ktf-ink-soft);
}
.kt-city-popup .kt-city-result-icon svg {
    width:          18px !important;
    height:         18px !important;
    fill:           var(--ktf-ink-soft);
}
.kt-city-popup .kt-city-result-icon--popular {
    background:     var(--ktf-brand-light);
}
.kt-city-popup .kt-city-result-icon--popular svg {
    fill:           var(--ktf-brand) !important;
}
.kt-city-popup .kt-city-result-icon--recent svg {
    fill:           var(--ktf-muted) !important;
}

/* Text block */
.kt-city-popup .kt-city-result-text {
    display:        flex !important;
    flex-direction: column;
    min-width:      0;
    gap:            1px;
}
.kt-city-popup .kt-city-result-name {
    font-size:      15px !important;
    font-weight:    700 !important;
    color:          var(--ktf-ink) !important;
    line-height:    1.3;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}
.kt-city-popup .kt-city-result-state {
    font-size:      12.5px !important;
    color:          var(--ktf-muted) !important;
    line-height:    1.3;
}

/* No results */
.kt-city-popup .kt-city-no-results {
    padding:        32px 20px;
    text-align:     center;
    color:          var(--ktf-muted);
    font-size:      14px;
}
.kt-city-popup .kt-city-highlight {
    color:          var(--ktf-brand);
    font-weight:    700;
}

/* Mobile: bottom sheet */
@media (max-width: 575.98px) {
    .kt-city-popup {
        top:            auto !important;
        bottom:         0 !important;
        left:           0 !important;
        transform:      none !important;
        width:          100% !important;
        max-width:      100% !important;
        max-height:     88vh !important;
        border-radius:  20px 20px 0 0 !important;
    }
}


/* ===========================================================
   12. COMBINED DATE + TIME PICKER (kwick-datetime.js)
   Trigger fields sit inside .form-info like any other field;
   the modal is injected into <body> and centered fixed.
   =========================================================== */
.kt-dt-trigger {
    cursor:         pointer;
    min-height:     26px;
    display:        flex;
    flex-direction: column;
    justify-content: center;
}
.kt-dt-trigger .kt-dt-main {
    font-size:      16px;
    font-weight:    600;
    color:          var(--ktf-ink);
    line-height:    1.25;
}
.kt-dt-trigger .kt-dt-day {
    font-size:      12px;
    font-weight:    500;
    color:          var(--ktf-brand-dark);
    line-height:    1.2;
    margin-top:     1px;
}
.kt-dt-field:not(.kt-dt-filled) .kt-dt-trigger .kt-dt-main {
    color:          var(--ktf-muted);
    font-weight:    500;
}

/* ---- overlay + modal ---- */
.kt-dt-overlay {
    position:       fixed !important;
    inset:          0 !important;
    background:     rgba(20, 43, 60, .45);
    z-index:        999998;
    display:        none;
}
.kt-dt-overlay.kt-open { display: block; }

.kt-dt-modal {
    position:       fixed !important;
    top:            50% !important;
    left:           50% !important;
    transform:      translate(-50%, -50%) !important;
    z-index:        999999;
    width:          560px;
    max-width:      calc(100vw - 32px);
    max-height:     86vh;
    background:     #fff;
    border-radius:  16px;
    box-shadow:     0 24px 64px rgba(20, 43, 60, .28);
    overflow:       hidden;
    display:        none;
    flex-direction: column;
}
.kt-dt-modal.kt-open { display: flex; }

.kt-dt-head {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    padding:        16px 20px;
    border-bottom:  1px solid var(--ktf-line-soft);
}
.kt-dt-title { font-size: 17px; font-weight: 700; color: var(--ktf-ink); }
.kt-dt-close {
    width:          32px; height: 32px; border-radius: 50%;
    border:         1px solid var(--ktf-line); background: var(--ktf-field-bg);
    font-size:      20px; line-height: 1; color: var(--ktf-ink-soft); cursor: pointer;
}
.kt-dt-close:hover { background: var(--ktf-brand-light); color: var(--ktf-brand); border-color: var(--ktf-brand); }

.kt-dt-body { display: flex; min-height: 0; }
.kt-dt-cal { flex: 1; padding: 16px 18px; border-right: 1px solid var(--ktf-line-soft); }
.kt-dt-modal.kt-dt-noTime .kt-dt-timecol { display: none; }
.kt-dt-modal.kt-dt-noTime .kt-dt-cal { border-right: none; }

.kt-dt-cal-head {
    display:        flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.kt-dt-month { font-size: 15px; font-weight: 700; color: var(--ktf-ink); }
.kt-dt-prev, .kt-dt-next {
    width:          30px; height: 30px; border-radius: 50%;
    border:         1px solid var(--ktf-line); background: #fff; cursor: pointer;
    font-size:      16px; color: var(--ktf-ink-soft); line-height: 1;
}
.kt-dt-prev:hover, .kt-dt-next:hover { background: var(--ktf-brand-light); color: var(--ktf-brand); border-color: var(--ktf-brand); }

.kt-dt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kt-dt-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--ktf-muted); padding: 4px 0; }
.kt-dt-day-cell {
    text-align:     center; padding: 8px 0; font-size: 13.5px; border-radius: 50%;
    cursor:         pointer; color: var(--ktf-ink); transition: background .12s ease;
}
.kt-dt-day-cell:hover:not(.is-selected) { background: var(--ktf-brand-light); }
.kt-dt-day-cell.is-selected { background: var(--ktf-brand); color: #fff; font-weight: 700; }
.kt-dt-day-cell.is-disabled { color: var(--ktf-muted); opacity: .4; cursor: default; }

.kt-dt-timecol { width: 156px; display: flex; flex-direction: column; }
.kt-dt-timelabel {
    font-size:      11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color:          var(--ktf-muted); padding: 16px 14px 8px;
}
.kt-dt-times { overflow-y: auto; padding: 0 12px 10px; }
.kt-dt-times::-webkit-scrollbar { width: 6px; }
.kt-dt-times::-webkit-scrollbar-thumb { background: var(--ktf-line); border-radius: 6px; }
.kt-dt-time {
    padding:        9px 10px; margin-bottom: 6px; text-align: center; font-size: 13px;
    border:         1px solid var(--ktf-line); border-radius: 8px; cursor: pointer; color: var(--ktf-ink);
    transition:     all .12s ease;
}
.kt-dt-time:hover:not(.is-selected) { border-color: var(--ktf-brand); }
.kt-dt-time.is-selected { background: var(--ktf-brand-light); border-color: var(--ktf-brand); color: var(--ktf-brand-dark); font-weight: 600; }

.kt-dt-foot { padding: 12px 18px; border-top: 1px solid var(--ktf-line-soft); }
.kt-dt-done {
    width:          100%; background: var(--ktf-brand); color: #fff; border: none;
    border-radius:  40px; padding: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
    transition:     background .15s ease;
}
.kt-dt-done:hover { background: var(--ktf-brand-dark); }

/* Mobile: bottom sheet */
@media (max-width: 575.98px) {
    .kt-dt-modal {
        top: auto !important; bottom: 0 !important; left: 0 !important;
        transform: none !important; width: 100% !important; max-width: 100% !important;
        max-height: 90vh; border-radius: 20px 20px 0 0;
    }
    .kt-dt-body { flex-direction: column; }
    .kt-dt-cal { border-right: none; border-bottom: 1px solid var(--ktf-line-soft); }
    .kt-dt-timecol { width: 100%; }
    .kt-dt-times { max-height: 160px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .kt-dt-time { margin-bottom: 0; }
}