/* ============================================================
 * aircreator.css — Dark theme สำหรับหน้า Air Creator (ตาม Figma)
 * @author เต้ย
 * ============================================================ */

:root {
    --ac-bg-darkest: #0b0b0e;
    --ac-bg-section: #111118;
    --ac-bg-card: #1a1a22;
    --ac-bg-input: #0b0b0e;
    --ac-border: rgba(255,255,255,0.1);
    --ac-border-med: rgba(255,255,255,0.2);
    --ac-border-strong: rgba(255,255,255,0.4);
    --ac-text: #ffffff;
    --ac-text-secondary: rgba(255,255,255,0.7);
    --ac-text-muted: rgba(255,255,255,0.48);
    --ac-cyan: #00e5ff;
    --ac-blue: #0092d0;
    --ac-blue-light: #00b5ff;
    --ac-blue-dark: #1a83f2;
    --ac-pink: #ff2d87;
    --ac-gradient-blue: linear-gradient(107deg, #00b5ff 9%, #1a83f2 92%);
    --ac-gradient-around: linear-gradient(165deg, #00e7a4, #00b5ff);
    --ac-gradient-dealershop: linear-gradient(146deg, #155dfc 0%, #0092b8 100%);
    --ac-gradient-popup: linear-gradient(146deg, #9810fa 0%, #e60076 100%);
    --ac-gradient-fuha: linear-gradient(146deg, #e60076 0%, #f54900 100%);
}

.ac-page-wrap {
    background: var(--ac-bg-darkest);
    color: var(--ac-text);
    font-family: 'Kanit', 'Inter', sans-serif;
}

/* ============================================================
 * Hero Section
 * ============================================================ */
.ac-hero-section {
    background: var(--ac-bg-darkest);
    padding: 50px 0 20px;
    position: relative;
    overflow: hidden;
}
.ac-hero-section::before {
    content: '';
    position: absolute;
    top: -200px; left: -100px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(255,45,135,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.ac-intro { text-align: center; max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
.ac-title {
    font-size: 36px; font-weight: 700;
    background: var(--ac-gradient-blue);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; margin-bottom: 12px;
}
.ac-subtitle { font-size: 17px; color: var(--ac-text-secondary); margin-bottom: 8px; line-height: 1.6; }
.ac-desc { font-size: 14px; color: var(--ac-text-muted); line-height: 1.7; }

/* ============================================================
 * Category Cards Section (ตาม Figma)
 * ============================================================ */
.ac-category-section {
    background: var(--ac-bg-darkest);
    padding: 40px 0 50px;
}
.ac-category-heading {
    font-size: 30px; font-weight: 700; color: var(--ac-text);
    text-align: center; margin-bottom: 8px;
}
.ac-category-sub {
    font-size: 16px; color: var(--ac-text-secondary);
    text-align: center; margin-bottom: 40px;
}
.ac-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1216px;
    margin: 0 auto;
}
.ac-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .25s, box-shadow .25s;
}
.ac-card:hover { color: inherit; text-decoration: none; }
.ac-card-img {
    position: relative;
    height: 256px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
}
.ac-card-img img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.ac-card-overlay {
    position: absolute; inset: 0;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px;
}

.ac-card-body { padding: 0 4px; }
.ac-card-title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 4px; line-height: 1.4; }
.ac-card-desc { font-size: 14px; color: var(--ac-text-secondary); line-height: 1.5; margin: 0; }

@media (max-width: 991px) {
    .ac-cards { gap: 20px; }
    .ac-card-img { height: 180px; }
    .ac-category-heading { font-size: 24px; }
    .ac-card-title { font-size: 17px; }
    .ac-card-desc { font-size: 13px; }
}
@media (max-width: 768px) {
    .ac-cards { gap: 16px; }
    .ac-card-img { height: 160px; }
    .ac-card-title { font-size: 16px; }
    .ac-card-desc { font-size: 12px; line-height: 1.4; }
    .ac-card-label { font-size: 14px; }
    .ac-category-sub { font-size: 14px; }
}
@media (max-width: 576px) {
    .ac-cards { grid-template-columns: 1fr; gap: 24px; }
    .ac-card-img { height: 200px; }
    .ac-card-title { font-size: 18px; }
    .ac-card-desc { font-size: 14px; line-height: 1.5; }
    .ac-card-label { font-size: 16px; }
    .ac-category-heading { font-size: 22px; }
    .ac-category-sub { font-size: 13px; }
    .ac-title { font-size: 26px; }
}

/* ============================================================
 * Search Section (ตาม Figma — tab pills + search bar)
 * ============================================================ */
.ac-search-section {
    background: var(--ac-bg-darkest);
    padding: 40px 0 20px;
}
.ac-search-title {
    font-size: 36px; font-weight: 600;
    color: var(--ac-cyan);
    text-align: center; margin-bottom: 8px;
}
.ac-search-sub {
    font-size: 30px; font-weight: 700;
    color: #fff;
    text-align: center; margin-bottom: 28px;
}

.ac-search-panel {
    background: var(--ac-bg-card);
    border: 1px solid var(--ac-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 25px 25px rgba(0,0,0,.25);
}

/* Row 1: tabs + search + button */
.ac-search-row1 {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.ac-tab-pills {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.ac-tab-pill {
    height: 36px;
    padding: 0 16px;
    border-radius: 9999px;
    border: none;
    background: rgba(255,255,255,.05);
    color: var(--ac-text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    font-family: 'Inter', 'Kanit', sans-serif;
}
.ac-tab-pill:hover { background: rgba(255,255,255,.1); color: #fff; }
.ac-tab-pill.active {
    background: #029ce6;
    color: #fff;
}
.ac-search-input-wrap {
    flex: 1;
    min-width: 200px;
    position: relative;
}
.ac-search-input-wrap i {
    position: absolute;
    left: 16px; top: 50%;
    transform: translateY(-50%);
    color: #6f6f6f;
    font-size: 14px;
}
.ac-search-input {
    width: 100%;
    height: 40px;
    padding: 8px 16px 8px 38px;
    background: var(--ac-bg-input);
    border: 1px solid var(--ac-border-strong);
    border-radius: 9999px;
    color: var(--ac-text);
    font-size: 14px;
    font-family: 'Kanit', sans-serif;
}
.ac-search-input::placeholder { color: #6f6f6f; }
.ac-search-input:focus { outline: none; border-color: var(--ac-blue-light); box-shadow: 0 0 0 3px rgba(0,181,255,.12); }

.ac-btn-search {
    height: 36px;
    width: 172px;
    padding: 0 20px;
    border-radius: 9999px;
    border: none;
    background: var(--ac-gradient-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Inter', 'Kanit', sans-serif;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ac-btn-search i { color: inherit; }
.ac-btn-search:hover { filter: brightness(1.1); }

/* Row 2: filter dropdowns + around button */
.ac-search-row2 {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.ac-filter-group { flex: 1; min-width: 140px; }
.ac-filter-select,
.ac-filter-input {
    width: 100%;
    height: 40px;
    padding: 8px 16px;
    background: var(--ac-bg-input);
    border: 1px solid var(--ac-border-strong);
    border-radius: 9999px;
    color: var(--ac-text-secondary);
    font-size: 14px;
    font-family: 'Kanit', sans-serif;
}
.ac-filter-input::placeholder { color: var(--ac-text-muted); }
.ac-filter-input:focus { outline: none; border-color: var(--ac-blue-light); }

/* Typeahead (jquery.Thailand.js) dark theme */
.ac-search-panel .twitter-typeahead { width: 100%; }
.ac-search-panel .tt-hint {
    background: var(--ac-bg-input) !important;
    border: 1px solid var(--ac-border-strong) !important;
    border-radius: 9999px !important;
    height: 40px !important;
    padding: 8px 16px !important;
    color: var(--ac-text-muted) !important;
    font-size: 14px;
    font-family: 'Kanit', sans-serif;
}
.ac-search-panel .tt-menu {
    width: 100% !important;
    margin-top: 4px !important;
    background: var(--ac-bg-card) !important;
    border: 1px solid var(--ac-border-med) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    padding: 4px 0 !important;
    z-index: 1060 !important;
}
.ac-search-panel .tt-suggestion,
.ac-search-panel .tt-suggestion.tt-selectable {
    padding: 10px 16px !important;
    background: var(--ac-bg-card) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-family: 'Kanit', sans-serif !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    border-bottom: 1px solid var(--ac-border) !important;
}
.ac-search-panel .tt-suggestion:last-child { border-bottom: none !important; }
.ac-search-panel .tt-suggestion:hover,
.ac-search-panel .tt-suggestion.tt-cursor,
.ac-search-panel .tt-cursor {
    background: rgba(0,229,255,0.15) !important;
    color: var(--ac-cyan) !important;
}
.ac-search-panel .tt-suggestion strong { color: var(--ac-cyan) !important; font-weight: 600 !important; }
.ac-search-panel .tt-empty { padding: 10px 16px !important; color: var(--ac-text-muted) !important; font-size: 13px !important; background: var(--ac-bg-card) !important; }
.ac-search-panel .tt-menu::-webkit-scrollbar { width: 6px; }
.ac-search-panel .tt-menu::-webkit-scrollbar-track { background: transparent; }
.ac-search-panel .tt-menu::-webkit-scrollbar-thumb { background: var(--ac-border-med); border-radius: 3px; }

/* Longdo Map popup overrides */
#map .ldmap_popup {
    background: #0b0b0e !important;
    border: 2px solid var(--ac-cyan) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 10px rgba(0,229,255,0.4) !important;
    padding: 0 !important;
    max-width: 340px !important;
}
#map .ldmap_popup_title { display: none !important; }
#map .ldmap_popup_close {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    z-index: 2 !important;
    filter: invert(1) !important;
}
#map .ldmap_popup_detail {
    padding: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
}
#map .ldmap_popup_callout { display: none !important; }

.ac-btn-around {
    height: 36px;
    width: 172px;
    padding: 0 16px;
    border-radius: 9999px;
    border: none;
    background: var(--ac-gradient-around);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Inter', 'Kanit', sans-serif;
    display: flex; align-items: center; justify-content: center;
}
.ac-btn-around i { color: inherit; }
.ac-btn-around:hover { filter: brightness(1.1); }

/* ============================================================
 * Map + Dealer List (ตาม Figma)
 * ============================================================ */
.ac-map-section {
    display: flex;
    margin-top: 24px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--ac-border);
    height: 600px;
}
.ac-dealer-list {
    width: 360px;
    flex-shrink: 0;
    background: var(--ac-bg-section);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--ac-border);
}
.ac-dealer-count {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--ac-text);
    border-bottom: 1px solid var(--ac-border);
}
.ac-dealer-count strong { color: var(--ac-cyan); }
.ac-dealer-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.ac-dealer-scroll::-webkit-scrollbar { width: 5px; }
.ac-dealer-scroll::-webkit-scrollbar-thumb { background: #626262; border-radius: 3px; }
.ac-dealer-scroll::-webkit-scrollbar-track { background: transparent; }

/* Dealer card in list */
.ac-dealer-card {
    background: var(--ac-bg-card);
    border: 1px solid var(--ac-border);
    border-radius: 16px;
    padding: 16px;
    margin: 8px 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,.4);
}
.ac-dealer-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
.ac-dealer-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    margin: 0;
}
.ac-dealer-distance {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--ac-bg-darkest);
    border: 1px solid var(--ac-border-med);
    color: var(--ac-cyan);
    font-size: 10px;
    font-weight: 600;
    margin-left: 8px;
    white-space: nowrap;
}
.ac-dealer-icons { display: flex; gap: 4px; flex-shrink: 0; }
.ac-dealer-icon-img { width: 20px; height: 20px; object-fit: contain; }
.ac-dealer-banner {
    height: 24px;
    object-fit: contain;
    display: block;
    margin-bottom: 8px;
}
.ac-dealer-address {
    font-size: 13px;
    color: var(--ac-text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
    display: flex;
    gap: 6px;
    align-items: flex-start;
}
.ac-dealer-address i { color: var(--ac-cyan); font-size: 12px; margin-top: 3px; flex-shrink: 0; }
.ac-dealer-contact {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.ac-dealer-contact-item {
    font-size: 12px;
    color: var(--ac-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ac-dealer-contact-item i { color: var(--ac-cyan); font-size: 12px; }
.ac-dealer-booking {
    width: 100%;
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    background: var(--ac-gradient-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ac-dealer-booking i { color: inherit; }
.ac-dealer-booking:hover { filter: brightness(1.1); }

/* Around location hint */
.ac-around-hint {
    margin: 8px 12px;
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 8px;
    background: rgba(0,229,255,.08);
    border: 1px solid rgba(0,229,255,.2);
    color: var(--ac-cyan);
}
.ac-around-hint--empty {
    background: rgba(255,200,0,.08);
    border-color: rgba(255,200,0,.2);
    color: #ffc800;
}

.ac-map-wrap {
    flex: 1;
    position: relative;
    min-height: 400px;
}
.ac-map-wrap #map { width: 100%; height: 100%; }

/* Map legend overlay */
.ac-map-legend {
    position: absolute;
    bottom: 16px; left: 16px;
    background: var(--ac-bg-darkest);
    border: 1px solid var(--ac-border-med);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
}
.ac-legend-title {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    font-family: 'Inter', 'Kanit', sans-serif;
}
.ac-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #fff;
    font-family: 'Inter', 'Kanit', sans-serif;
}
.ac-legend-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.ac-legend-dot svg { width: 10px; height: 12px; }
.ac-legend-dot--popup { background: linear-gradient(135deg, #9b5cff, #ff2d87); }
.ac-legend-dot--dealer { background: linear-gradient(135deg, #00e5ff, #0092d0); }
.ac-legend-dot--fuha { background: linear-gradient(135deg, #ff8a00, #ff2d87); }
.ac-legend-bullseye {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    display: flex; align-items: center; justify-content: center;
}
.ac-legend-bullseye::after {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9b5cff, #ff2d87);
}

/* Mobile toggle buttons */
.ac-mobile-toggle {
    display: none;
    gap: 0;
    margin-top: 16px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--ac-border-med);
}
.ac-toggle-btn {
    flex: 1;
    padding: 10px 0;
    border: none;
    background: var(--ac-bg-card);
    color: var(--ac-text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'Kanit', 'Inter', sans-serif;
    transition: background .15s, color .15s;
}
.ac-toggle-btn:first-child { border-right: 1px solid var(--ac-border-med); }
.ac-toggle-btn.active { background: var(--ac-gradient-blue); color: #fff; }
.ac-toggle-btn:not(.active):hover { background: rgba(255,255,255,.08); }

@media (max-width: 991px) {
    .ac-search-row1 { flex-wrap: wrap; }
    .ac-tab-pills { width: 100%; flex-wrap: wrap; }
    .ac-search-row2 { flex-wrap: wrap; }
    .ac-filter-group { min-width: calc(50% - 8px); flex: none; }
    .ac-btn-around { width: 100%; }
    .ac-mobile-toggle.show { display: flex !important; }
    .ac-map-section { flex-direction: column; height: auto; }
    .ac-map-section.ac-view-list .ac-dealer-list { width: 100%; max-height: none; border-right: none; }
    .ac-map-section.ac-view-list .ac-map-wrap { display: none; }
    .ac-map-section.ac-view-map .ac-dealer-list { display: none; }
    .ac-map-section.ac-view-map .ac-map-wrap { height: calc(100vh - 280px); min-height: 400px; flex: none; }
    .ac-map-section.ac-view-map .ac-map-wrap #map { height: 100% !important; min-height: 400px !important; }
    .ac-dealer-list { width: 100%; border-right: none; }
    .ac-map-wrap { height: 450px; min-height: 450px; flex: none; }
    .ac-map-wrap #map { height: 450px !important; min-height: 450px !important; }
}
@media (max-width: 576px) {
    .ac-search-title { font-size: 22px; }
    .ac-search-sub { font-size: 22px; font-weight: 700; margin-bottom: 20px; }
    .ac-tab-pill { font-size: 12px; padding: 0 12px; height: 32px; }
    .ac-search-input-wrap { width: 100%; flex: none; }
    .ac-search-input { height: 38px; font-size: 13px; }
    .ac-btn-search { width: 100%; height: 36px; font-size: 13px; }
    .ac-filter-group { min-width: 100%; }
    .ac-btn-around { font-size: 13px; }
}

/* ============================================================
 * Dealer Carousel Cards
 * ============================================================ */
.dealer-carousel-section {
    background: var(--ac-bg-section) !important;
    border-top: 1px solid var(--ac-border);
    border-bottom: 1px solid var(--ac-border);
}
.dealer-slide-card {
    background: var(--ac-bg-card);
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ac-border);
}
.dealer-slide-img { width: 100%; height: 160px; object-fit: cover; }
.dealer-slide-img-empty { display: flex; align-items: center; justify-content: center; background: var(--ac-bg-darkest); color: var(--ac-text-muted); font-size: 32px; }
.dealer-slide-body { padding: 12px 14px; flex: 1; }
.dealer-slide-name { color: var(--ac-text); font-size: 14px; font-weight: 700; margin-bottom: 6px; line-height: 1.3; }
.dealer-slide-addr { color: var(--ac-text-muted); font-size: 11px; line-height: 1.5; margin-bottom: 6px; }
.dealer-slide-contact { color: var(--ac-cyan); font-size: 11px; margin-bottom: 2px; }
.dealer-slide-icons { padding: 8px 14px 12px; display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--ac-border); }
.dealer-slide-icons img { width: 28px; height: 28px; object-fit: contain; }
#carouselDealer .carousel-control-next, #carouselDealer .carousel-control-prev { width: 0% !important; }
@media (max-width: 768px) { .dealer-slide-img { height: 120px; } .dealer-slide-name { font-size: 13px; } .dealer-slide-icons img { width: 22px; height: 22px; } }
@media (max-width: 576px) { .dealer-slide-img { height: 100px; } .dealer-slide-body { padding: 10px; } .dealer-slide-name { font-size: 12px; } }

/* ============================================================
 * Category Legend (dark)
 * ============================================================ */
.dealer-legend-section { background: var(--ac-bg-darkest) !important; padding-bottom: 20px; }
.dealer-legend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dealer-legend-item { display: flex; gap: 10px; align-items: flex-start; padding: 12px; background: var(--ac-bg-card); border-radius: 10px; border: 1px solid var(--ac-border); }
.dealer-legend-icon { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.dealer-legend-text { display: flex; flex-direction: column; gap: 2px; }
.dealer-legend-name { font-size: 13px; font-weight: 700; color: var(--ac-text); }
.dealer-legend-desc { font-size: 11px; color: var(--ac-text-muted); line-height: 1.5; }
@media (max-width: 991px) { .dealer-legend-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 576px) { .dealer-legend-grid { grid-template-columns: 1fr; gap: 8px; } .dealer-legend-item { padding: 10px; } .dealer-legend-icon { width: 28px; height: 28px; } }

/* ============================================================
 * Booking Modal (Dark Theme — ตาม Figma)
 * ============================================================ */
.bk-modal i[class] { color: inherit; }
.bk-modal .modal-dialog { max-width: 672px; }
.bk-modal .modal-content {
    border: 1px solid var(--ac-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,.5);
    max-height: calc(100vh - 56px);
    background: var(--ac-bg-section);
}
.bk-modal #bookingFormView { display: flex; flex-direction: column; max-height: calc(100vh - 56px); }
.bk-modal .bk-hero { flex-shrink: 0; }
.bk-modal .bk-footer { flex-shrink: 0; }
.bk-modal .bk-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.bk-modal .bk-body::-webkit-scrollbar { width: 6px; }
.bk-modal .bk-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.bk-modal .bk-body::-webkit-scrollbar-track { background: transparent; }

.bk-hero {
    position: relative;
    padding: 24px 28px 20px;
    background: var(--ac-bg-card);
    border-bottom: 3px solid var(--ac-blue);
    color: var(--ac-text);
}
.bk-hero-row { position: relative; display: flex; align-items: flex-start; gap: 14px; z-index: 1; }
.bk-hero-icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(0,229,255,.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0; color: var(--ac-cyan);
}
.bk-hero-icon i { color: var(--ac-cyan) !important; }
.bk-hero-text { flex: 1; min-width: 0; }
.bk-hero-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1px; color: var(--ac-text-muted); text-transform: uppercase; margin-bottom: 4px; }
.bk-hero-title { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ac-text); }
.bk-hero-close {
    position: absolute; top: 18px; right: 18px;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.08); border: 1px solid var(--ac-border);
    color: var(--ac-text-muted); font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; z-index: 2;
}
.bk-hero-close:hover { background: rgba(255,255,255,.15); }

.bk-body { padding: 24px 28px 8px; background: var(--ac-bg-section); }
.bk-dealer-card {
    background: var(--ac-bg-card); border: 1px solid var(--ac-border);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 22px;
    display: flex; gap: 12px; align-items: flex-start;
}
.bk-dealer-card .pin { width: 36px; height: 36px; border-radius: 10px; background: rgba(0,229,255,.1); color: var(--ac-cyan); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.bk-dealer-card .pin i { color: var(--ac-cyan) !important; }
.bk-dealer-meta { font-size: 12px; color: var(--ac-text-muted); line-height: 1.6; }
.bk-dealer-meta .row-line { display: flex; gap: 6px; align-items: flex-start; margin-top: 2px; }
.bk-dealer-meta .row-line i { width: 12px; color: var(--ac-cyan); margin-top: 3px; }

.bk-section { margin-bottom: 18px; }
.bk-section-title { font-size: 12px; font-weight: 700; color: var(--ac-cyan); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.bk-section-title i { color: inherit; }
.bk-label { font-size: 12px; font-weight: 600; color: var(--ac-text-secondary); margin-bottom: 6px; display: block; }
.bk-label .req { color: var(--ac-pink); }
.bk-input {
    width: 100%; border: 1px solid var(--ac-border); border-radius: 10px;
    padding: 11px 14px; font-size: 14px; background: var(--ac-bg-input); color: var(--ac-text);
}
.bk-input:focus { outline: none; border-color: var(--ac-blue); box-shadow: 0 0 0 3px rgba(0,146,208,.15); }
.bk-input::placeholder { color: var(--ac-text-muted); }
.bk-input.border-danger { border-color: var(--ac-pink) !important; }
.bk-modal .invalid-feedback { display: none; width: 100%; margin-top: 6px; font-size: 12px; color: var(--ac-pink); font-weight: 500; }
.bk-time-error { display: none; margin-top: 8px; font-size: 12px; color: var(--ac-pink); font-weight: 500; }
.bk-input-icon { position: relative; }
.bk-input-icon i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ac-text-muted); font-size: 13px; pointer-events: none; }
.bk-input-icon .bk-input { padding-left: 38px; }

.flatpickr-day.bk-date-open:not(.selected) {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #166534;
}
.flatpickr-day.bk-date-open:not(.selected):hover {
    background: #bbf7d0;
    border-color: #86efac;
}
.flatpickr-day.bk-date-open.today:not(.selected) { border-color: #22c55e; }
.flatpickr-day.bk-date-closed:not(.selected),
.flatpickr-day.bk-date-closed.flatpickr-disabled {
    background: #fee2e2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
    opacity: .78;
}
.flatpickr-day.bk-date-closed:not(.selected):hover {
    background: #fecaca !important;
    border-color: #fca5a5 !important;
}
.flatpickr-day.bk-date-closed.today:not(.selected) { border-color: #ef4444 !important; }

.bk-time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bk-time-chip {
    border: 1px solid var(--ac-border); background: var(--ac-bg-card);
    border-radius: 10px; padding: 10px 4px; font-size: 13px; font-weight: 600;
    color: var(--ac-text-secondary); cursor: pointer; text-align: center;
}
.bk-time-chip:hover { border-color: var(--ac-blue); color: var(--ac-blue-light); }
.bk-time-chip.active { border-color: var(--ac-blue); background: var(--ac-gradient-blue); color: #fff; box-shadow: 0 4px 12px rgba(0,181,255,.25); }
.bk-time-chip.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.bk-time-empty { grid-column: 1 / -1; color: var(--ac-text-muted); font-size: 13px; padding: 10px 0; }

.bk-footer { padding: 18px 28px 24px; background: var(--ac-bg-section); border-top: 1px solid var(--ac-border); }
.btn-bk-submit {
    width: 100%; padding: 14px; border: none; border-radius: 12px;
    font-size: 15px; font-weight: 700; color: #fff;
    background: var(--ac-gradient-blue); cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,181,255,.25);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-bk-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,181,255,.35); filter: brightness(1.1); }
.btn-bk-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; background: var(--ac-bg-card); box-shadow: none; color: var(--ac-text-muted); }

/* ============================================================
 * Success View (ตาม Figma — detail card)
 * ============================================================ */
.bk-success { text-align: center; display: none; background: var(--ac-bg-section); overflow-y: auto; max-height: calc(100vh - 56px); }
.bk-success.show { display: block; }

.bk-success-header {
    background: #0097E0;
    padding: 40px 40px 32px;
    position: relative;
    overflow: hidden;
}
.bk-success-header::before {
    content: ''; position: absolute; top: -40px; right: -20px;
    width: 160px; height: 160px; border-radius: 50%;
    background: rgba(255,255,255,.1); filter: blur(64px);
}
.bk-success-header::after {
    content: ''; position: absolute; bottom: -40px; left: -40px;
    width: 160px; height: 160px; border-radius: 50%;
    background: rgba(255,255,255,.1); filter: blur(64px);
}
.bk-success-icon {
    width: 96px; height: 96px; border-radius: 50%;
    background: #fff; margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    animation: bkPop .4s cubic-bezier(.34, 1.56, .64, 1);
}
.bk-success-icon svg { width: 48px; height: 47px; }
@keyframes bkPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.bk-success-header h4 { font-size: 30px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.bk-success-header-sub { font-size: 14px; color: rgba(255,255,255,.9); margin: 0; line-height: 1.6; }

.bk-success-body { padding: 32px 32px 24px; }

.bk-success-card {
    background: var(--ac-bg-darkest);
    border: 1px solid var(--ac-cyan);
    border-radius: 12px;
    text-align: left;
    overflow: hidden;
    margin-bottom: 20px;
}
.bk-success-store {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px 24px 21px;
    border-bottom: 1px solid var(--ac-border);
}
.bk-success-store-icon {
    width: 56px; height: 56px; border-radius: 12px;
    background: rgba(0,229,255,.1);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.bk-success-store-icon svg { width: 28px; height: 28px; }
.bk-success-store-label { font-size: 12px; color: var(--ac-text-muted); text-transform: uppercase; letter-spacing: .3px; display: block; margin-bottom: 4px; }
.bk-success-store-name { font-size: 18px; font-weight: 700; color: #fff; display: block; }

.bk-success-datetime {
    display: flex; gap: 16px;
    padding: 16px 24px;
}
.bk-success-dt-col { flex: 1; }
.bk-success-dt-label { font-size: 12px; color: var(--ac-text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.bk-success-dt-label svg { width: 14px; height: 14px; flex-shrink: 0; }
.bk-success-dt-value { font-size: 16px; font-weight: 700; color: var(--ac-blue-light); display: block; }

.bk-success-user {
    padding: 17px 24px 24px;
    border-top: 1px solid var(--ac-border);
    display: flex; flex-direction: column; gap: 10px;
}
.bk-success-user-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 16px;
}
.bk-success-user-row span { color: rgba(255,255,255,.72); }
.bk-success-user-row strong { color: #fff; font-weight: 600; }
.bk-success-map-link {
    color: var(--ac-blue-light);
    font-weight: 700;
    text-decoration: none;
}
.bk-success-map-link:hover { color: var(--ac-cyan); text-decoration: underline; }

.bk-success-contact { font-size: 14px; color: #d1d1d1; line-height: 1.6; text-align: center; margin: 0; }

@media (max-width: 576px) {
    .bk-hero { padding: 20px 20px 18px; }
    .bk-body { padding: 20px 20px 8px; }
    .bk-footer { padding: 16px 20px 22px; }
    .bk-hero-title { font-size: 16px; }
    .bk-success-header { padding: 32px 20px 24px; }
    .bk-success-header h4 { font-size: 22px; }
    .bk-success-body { padding: 20px 16px 16px; }
    .bk-success-datetime { flex-direction: column; gap: 12px; }
}

/* ============================================================
 * Template wrapper overrides (dark page)
 * ============================================================ */
#kt_app_content_container { background: #0b0b0e !important; }
#kt_app_content { padding-bottom: 0 !important; }
#carouselHeaderSlide { background: #0b0b0e !important; }
.container-main { background: var(--ac-bg-darkest) !important; }
#kt_app_footer.kt_app_footer_first { margin-top: 0 !important; z-index: 1 !important; }

/* ============================================================
 * Hero Banner responsive
 * ============================================================ */
@media (max-width: 991px) {
    .frontend-header-image-silde { max-height: 320px !important; }
}
@media (max-width: 768px) {
    .frontend-header-image-silde { max-height: 260px !important; object-position: 40% center !important; }
}
@media (max-width: 576px) {
    .frontend-header-image-silde { max-height: 200px !important; object-position: 35% center !important; }
    .carousel-caption { display: none !important; }
}

/* ============================================================
 * Footer responsive (dark page)
 * ============================================================ */
@media (max-width: 576px) {
    #kt_app_footer .row.px-20 { padding-left: 12px !important; padding-right: 12px !important; }
    #kt_app_footer .row > [class*="col-6"] { flex: 0 0 50%; max-width: 50%; margin-bottom: 16px; }
    #kt_app_footer .row > [class*="col-6"] a { font-size: 11px !important; }
    #kt_app_footer .row > [class*="col-6"] strong { font-size: 12px !important; }
}