/* 
 * Trips Away - Main Design System Stylesheet
 * Brand Color Identity: #43a3ec
 */

:root {
    --primary: #43a3ec;
    --primary-light: #e6f3fd;
    --primary-dark: #1b85d9;
    --secondary: #ff9f43;
    --dark-navy: #0b1a30;
    --dark-blue: #152b4a;
    --light-bg: #f8fbfe;
    --white: #ffffff;
    --text-dark: #2c3a4a;
    --text-muted: #748a9e;
    --border-light: rgba(67, 163, 236, 0.15);
    
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 10px 25px rgba(67, 163, 236, 0.08);
    --shadow-lg: 0 15px 35px rgba(11, 26, 48, 0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --border-radius: 16px;
}

/* Base Styles */
body {
    font-family: var(--font-body);
    background-color: var(--light-bg);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--dark-navy);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}
a:hover {
    color: var(--primary-dark);
}

/* Glassmorphism Classes */
.glass-panel {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--border-radius);
}

/* Glass & Premium Navbar Upgrade */
.glass-navbar {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 20px rgba(11, 26, 48, 0.03) !important;
    border-radius: 0 0 24px 24px;
    padding: 12px 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Align and size the logo beautifully */
.logo-navbar {
    height: 42px !important;
    width: auto !important;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.logo-navbar:hover {
    transform: scale(1.03);
}

/* Horizontal Centering of Links */
@media (min-width: 992px) {
    .navbar-collapse-centered {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
}

/* Navigation Links premium look */
.premium-nav-link {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark) !important;
    padding: 8px 18px !important;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
}

.premium-nav-link:hover {
    color: var(--primary) !important;
    background: rgba(67, 163, 236, 0.04);
}

.premium-nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: var(--primary);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-nav-link:hover::after {
    width: 20px;
}

.premium-nav-link.active {
    color: var(--primary) !important;
    font-weight: 700;
}

.premium-nav-link.active::after {
    width: 20px;
}

/* Premium Form Select styling for dropdowns */
.premium-select-wrapper {
    position: relative;
    display: inline-block;
}

.premium-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important;
    background-color: #f4f7fa;
    border: 1px solid rgba(67, 163, 236, 0.12);
    border-radius: 12px !important;
    color: var(--dark-navy) !important;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 30px 8px 12px !important;
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 90px;
}

.premium-select:hover {
    background-color: #eef3f8;
    border-color: rgba(67, 163, 236, 0.3);
}

.premium-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(67, 163, 236, 0.15) !important;
    border-color: var(--primary);
}

.premium-select-wrapper::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--text-muted);
    pointer-events: none;
}

/* Dropdown Menu Animations */
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dropdown-menu {
    border-radius: 16px !important;
    border: 1px solid rgba(67, 163, 236, 0.08) !important;
    box-shadow: var(--shadow-lg) !important;
}

.dropdown-menu.show {
    animation: dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.dropdown-item {
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: var(--primary-light) !important;
    color: var(--primary-dark) !important;
}

/* Toggler / Hamburger Styling */
.premium-toggler {
    border: none !important;
    background: transparent !important;
    padding: 8px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease;
}

.premium-toggler:hover {
    background: rgba(67, 163, 236, 0.08) !important;
}

.premium-toggler:focus {
    box-shadow: none !important;
}

.premium-toggler i {
    color: var(--primary) !important;
    font-size: 1.4rem;
    transition: transform 0.3s ease;
}

.premium-toggler:hover i {
    transform: scale(1.1);
}

/* Animations */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Custom Buttons */
.btn-primary-custom {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white) !important;
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 30px;
    border: none;
    box-shadow: 0 4px 15px rgba(67, 163, 236, 0.35);
    transition: var(--transition);
}

.btn-primary-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67, 163, 236, 0.45);
}

.btn-outline-custom {
    border: 2px solid var(--primary);
    color: var(--primary) !important;
    background: transparent;
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 10px 26px;
    border-radius: 30px;
    transition: var(--transition);
}

.btn-outline-custom:hover {
    background: var(--primary);
    color: var(--white) !important;
}

/* Hero Section */
.hero-wrapper {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    padding-top: 100px;
    padding-bottom: 80px;
    overflow: hidden;
}

.hero-wrapper .container {
    position: relative;
    z-index: 5;
}

.hero-bg-slides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 1;
}

.hero-bg-slide.active {
    opacity: 1;
    z-index: 2;
}

.hero-search-tabs {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 8px;
    display: inline-flex;
    margin-bottom: -1px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-search-tabs button {
    background: transparent;
    border: none;
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 14px;
    transition: var(--transition);
}

.hero-search-tabs button.active {
    background: var(--primary);
    box-shadow: var(--shadow-sm);
}

.search-box-container {
    background: var(--white);
    border-radius: 24px;
    padding: 30px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
}

.search-box-container label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
}

.search-box-container input, .search-box-container select {
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f8fbfe;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    width: 100%;
}

.search-box-container input:focus, .search-box-container select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(67, 163, 236, 0.1);
}

/* Cards Design */
.product-card {
    background: var(--white);
    border-radius: var(--border-radius);
    border: 1px solid rgba(67, 163, 236, 0.08);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(67, 163, 236, 0.2);
}

.card-img-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 65%; /* 16:9 Aspect Ratio */
}

.card-img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.product-card:hover .card-img-wrapper img {
    transform: scale(1.08);
}

.card-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary);
    color: var(--white);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 5px 12px;
    border-radius: 30px;
    z-index: 10;
}

.card-rating-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(11, 26, 48, 0.8);
    backdrop-filter: blur(5px);
    color: var(--secondary);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 5px 12px;
    border-radius: 30px;
    z-index: 10;
}

.card-body-custom {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card-title-custom {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.4;
}

.card-meta-custom {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.card-price-section {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px dashed rgba(67, 163, 236, 0.15);
}

.price-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: block;
}

.price-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary);
    font-family: var(--font-heading);
}

/* Category Circle Badges */
.category-circle-card {
    text-align: center;
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 30px;
    border: 1px solid rgba(67, 163, 236, 0.05);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.category-circle-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(67, 163, 236, 0.15);
}

.category-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    transition: var(--transition);
}

.category-circle-card:hover .category-icon-wrapper {
    background: var(--primary);
    color: var(--white);
    transform: rotate(15deg);
}

/* WhatsApp Floating Button */
.whatsapp-floating {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: white !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    animation: pulse-glow 2s infinite;
    transition: var(--transition);
}

.whatsapp-floating:hover {
    transform: scale(1.1);
    background-color: #20ba5a;
}

/* Testimonial Cards */
.testimonial-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 30px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    position: relative;
}

.testimonial-quote-icon {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: rgba(67, 163, 236, 0.08);
}

/* AI Suggestions Container */
.ai-suggestions-box {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    margin-top: 5px;
    display: none;
}

.ai-suggestion-item {
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
}

.ai-suggestion-item:last-child {
    border-bottom: none;
}

.ai-suggestion-item:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

/* GDPR Cookie Popup */
.gdpr-cookie-popup {
    position: fixed;
    bottom: 20px;
    left: 20px;
    max-width: 400px;
    z-index: 10000;
    box-shadow: var(--shadow-lg);
    display: none;
}

/* Timeline Components */
.visa-timeline {
    position: relative;
    padding-left: 30px;
    border-left: 2px solid var(--border-light);
}

.visa-timeline-item {
    position: relative;
    margin-bottom: 25px;
}

.visa-timeline-item::before {
    content: '';
    position: absolute;
    left: -37px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--primary);
    box-shadow: var(--shadow-sm);
}

.visa-timeline-item.active::before {
    background: var(--primary);
}

.visa-timeline-item.completed::before {
    background: var(--secondary);
    border-color: var(--secondary);
}

/* Responsive Footer */
footer {
    background: var(--dark-navy);
    color: #a4b4c5;
    padding: 80px 0 30px;
}

footer h5 {
    color: var(--white);
    margin-bottom: 24px;
    font-size: 1.15rem;
}

footer a {
    color: #a4b4c5;
    display: block;
    margin-bottom: 12px;
    font-size: 0.95rem;
}

footer a:hover {
    color: var(--primary);
    padding-left: 5px;
}

/* Invoice Styles */
.invoice-card {
    background: var(--white);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0,0,0,0.06);
}

/* ==========================================================================
   Trips Away - Premium Mobile Viewport Media Queries (< 768px)
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Responsive Spacing & Container Paddings */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Hero Section Mobile Optimize */
    .hero-wrapper {
        min-height: auto;
        padding-top: 80px;
        padding-bottom: 60px;
    }
    
    .hero-wrapper h1 {
        font-size: 2.25rem !important;
        line-height: 1.25;
    }
    
    .hero-wrapper p {
        font-size: 1rem !important;
        margin-bottom: 30px !important;
    }
    
    /* Responsive search console tabs for mobile screens */
    .hero-search-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 auto;
        white-space: normal;
        max-width: 100%;
        padding: 6px;
        border-radius: 16px;
        gap: 6px;
    }
    
    .hero-search-tabs button {
        padding: 8px 14px;
        font-size: 0.85rem;
        border-radius: 12px;
        flex: 1 1 auto;
        text-align: center;
    }
    
    .search-box-container {
        padding: 20px;
        border-radius: 20px;
    }
    
    .search-box-container input, .search-box-container select {
        font-size: 0.9rem;
        padding: 10px 14px;
    }
    
    /* Listing Cards Mobilization */
    .product-card {
        margin-bottom: 10px;
    }
    
    .card-body-custom {
        padding: 18px;
    }
    
    .card-title-custom {
        font-size: 1.1rem;
    }
    
    .card-price-section .price-value {
        font-size: 1.25rem;
    }
    
    /* Accordion spacings and buttons */
    .accordion-button {
        font-size: 0.9rem;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    
    /* Visa requirements checklist checks */
    .form-check-input {
        width: 18px;
        height: 18px;
    }
    
    /* Offcanvas mobile drawer overrides */
    .offcanvas {
        max-width: 85% !important;
    }
    
    /* pre-footer readmore container settings */
    .glass-readmore {
        padding: 20px !important;
        border-radius: 16px !important;
    }
    
    .glass-readmore h5 {
        font-size: 1.1rem;
    }

    /* Mobile Left-to-Right Swipe Grid Upgrades */
    @media (max-width: 991.98px) {
        .mobile-scroll-row {
            display: flex !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
            scroll-snap-type: x mandatory !important;
            padding-bottom: 20px !important;
            margin-left: -10px !important;
            margin-right: -10px !important;
            scrollbar-width: none !important; /* Firefox */
        }
        
        .mobile-scroll-row::-webkit-scrollbar {
            display: none !important; /* Chrome, Safari, Opera */
        }
        
        .mobile-scroll-row > [class*="col-"] {
            flex: 0 0 85% !important;
            max-width: 85% !important;
            flex-shrink: 0 !important; /* Prevent cards from shrinking to fit */
            scroll-snap-align: start !important;
            padding-left: 10px !important;
            padding-right: 10px !important;
            margin-bottom: 0 !important;
        }
        
        .mobile-scroll-row .product-card {
            height: 100% !important;
        }
    }
}

/* Custom Desktop Navbar Alignments for Logo & Nav Links */
@media (min-width: 992px) {
    .logo-container-custom {
        margin-left: 0 !important;
        transition: all 0.3s ease;
    }
    .nav-links-container-custom {
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
        align-items: center !important;
        transition: all 0.3s ease;
    }
}

/* Admin Hero Image Preview CMS Styling */
.hero-img-preview-card {
    transition: all 0.3s ease;
}
.hero-img-preview-card:hover {
    transform: translateY(-2px);
}
.hero-img-preview-card img {
    box-shadow: 0 4px 12px rgba(11, 26, 48, 0.05);
    transition: all 0.3s ease;
}
.hero-img-preview-card:hover img {
    box-shadow: 0 6px 16px rgba(11, 26, 48, 0.1);
    border-color: var(--primary) !important;
}
.hero-img-preview-card button {
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
    opacity: 0.85;
    transition: all 0.2s ease;
}
.hero-img-preview-card:hover button {
    opacity: 1;
    transform: scale(1.1);
}


/* Extracted from tours.php */

/* ── Hero ── */
.klk-hero{padding:60px 0 0;color:#fff;min-height:360px;display:flex;align-items:flex-start;}
.klk-hero-inner{width:100%;}
.klk-hero-title{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;font-family:'Outfit',sans-serif;margin-bottom:8px;line-height:1.15;text-shadow:0 2px 12px rgba(0,0,0,0.4);}
.klk-hero-sub{font-size:1rem;color:rgba(255,255,255,0.82);margin-bottom:24px;}
/* Search */
.klk-search-form{max-width:520px;margin-bottom:32px;}
.klk-search-box{display:flex;align-items:center;background:#fff;border-radius:50px;padding:5px 5px 5px 18px;box-shadow:0 6px 28px rgba(0,0,0,0.22);}
.klk-search-loc{color:#bbb;font-size:1rem;margin-right:8px;flex-shrink:0;}
.klk-search-input{flex:1;border:none;outline:none;font-size:0.92rem;color:#1a1a2e;background:transparent;min-width:0;}
.klk-search-btn{background:#ff6600;color:#fff;border:none;border-radius:50px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;transition:background .2s;flex-shrink:0;}
.klk-search-btn:hover{background:#e05500;}
/* Chips */
.klk-chips-row{display:flex;gap:16px;overflow-x:auto;padding-bottom:20px;scrollbar-width:none;}
.klk-chips-row::-webkit-scrollbar{display:none;}
.klk-chip{display:flex;flex-direction:column;align-items:center;text-decoration:none;flex-shrink:0;transition:transform .2s;}
.klk-chip:hover{transform:translateY(-4px);}
.klk-chip-img{width:96px;height:96px;border-radius:18px;overflow:hidden;border:3px solid rgba(255,255,255,0.25);box-shadow:0 4px 18px rgba(0,0,0,0.3);transition:border-color .2s;}
.klk-chip:hover .klk-chip-img{border-color:#fff;}
.klk-chip-img img{width:100%;height:100%;object-fit:cover;}
.klk-chip-name{display:block;color:#fff;font-size:0.78rem;font-weight:700;margin-top:7px;text-align:center;line-height:1.2;}
.klk-chip-count{display:block;color:rgba(255,255,255,0.6);font-size:0.67rem;text-align:center;}
/* Catalog */
.klk-catalog{padding:48px 0 60px;background:#f7f8fc;}
.klk-sec-title{font-size:1.55rem;font-weight:800;font-family:'Outfit',sans-serif;color:#1a1a2e;margin-bottom:4px;}
.klk-sec-sub{font-size:0.88rem;color:#888;margin-bottom:32px;}
/* Category block */
.klk-cat-block{background:#fff;border-radius:20px;padding:22px 22px 18px;box-shadow:0 2px 18px rgba(0,0,0,0.05);margin-bottom:24px;}
.klk-cat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.klk-cat-label{display:flex;align-items:center;gap:10px;}
.klk-cat-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.klk-cat-name{font-size:1rem;font-weight:800;color:#1a1a2e;margin:0;font-family:'Outfit',sans-serif;}
.klk-see-all{font-size:0.8rem;font-weight:700;color:var(--primary-color,#1e6fdc);text-decoration:none;display:flex;align-items:center;gap:4px;white-space:nowrap;}
.klk-see-all:hover{text-decoration:underline;}
/* Cards scroll row */
.klk-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#d0d8e8 transparent;}
.klk-row::-webkit-scrollbar{height:3px;}
.klk-row::-webkit-scrollbar-thumb{background:#d0d8e8;border-radius:3px;}
/* Card */
.klk-card{flex:0 0 200px;scroll-snap-align:start;border-radius:14px;overflow:hidden;background:#fff;border:1px solid #efefef;box-shadow:0 2px 10px rgba(0,0,0,0.06);text-decoration:none;display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s;}
.klk-card:hover{transform:translateY(-5px);box-shadow:0 10px 28px rgba(0,0,0,0.13);}
.klk-card-img{position:relative;height:145px;overflow:hidden;}
.klk-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.klk-card:hover .klk-card-img img{transform:scale(1.06);}
.klk-badge{position:absolute;top:9px;left:9px;background:var(--primary-color,#1e6fdc);color:#fff;font-size:0.64rem;font-weight:700;padding:3px 9px;border-radius:50px;letter-spacing:.04em;text-transform:uppercase;}
.klk-card-body{padding:12px 13px 14px;display:flex;flex-direction:column;flex:1;}
.klk-card-loc{font-size:0.69rem;color:#999;margin-bottom:4px;display:flex;align-items:center;gap:3px;line-height:1.2;}
.klk-card-loc i{color:var(--primary-color,#1e6fdc);font-size:.65rem;}
.klk-card-title{font-size:0.85rem;font-weight:700;color:#1a1a2e;margin-bottom:8px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;}
.klk-card-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.klk-rating{font-size:0.72rem;font-weight:700;color:#f59e0b;display:flex;align-items:center;gap:3px;}
.klk-rating i{font-size:.7rem;}
.klk-revcount{font-weight:400;color:#bbb;}
.klk-dur{font-size:0.68rem;color:#aaa;display:flex;align-items:center;gap:3px;}
.klk-price-row{display:flex;align-items:baseline;gap:5px;border-top:1px solid #f3f3f3;padding-top:8px;margin-top:auto;}
.klk-from{font-size:0.66rem;color:#aaa;font-weight:500;}
.klk-price{font-size:1rem;font-weight:800;color:var(--primary-color,#1e6fdc);}
/* Empty */
.klk-empty{text-align:center;padding:80px 20px;color:#bbb;}
.klk-empty i{font-size:3rem;margin-bottom:14px;display:block;}
/* Responsive */
@media(max-width:767px){
  .klk-hero{padding:40px 0 0;min-height:300px;}
  .klk-chip-img{width:76px;height:76px;}
  .klk-card{flex:0 0 170px;}
  .klk-card-img{height:120px;}
  .klk-sec-title{font-size:1.25rem;}
  .klk-cat-block{padding:16px;}
}
@media(max-width:480px){
  .klk-search-form{max-width:100%;}
  .klk-card{flex:0 0 150px;}
}

/* ── Live Search ── */
.klk-search-wrap { max-width: 520px; position: relative; margin-bottom: 28px; }
.klk-live-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  z-index: 999;
  padding: 14px 16px 16px;
  max-height: 340px;
  overflow: hidden;
}
.klk-live-inner {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #d0d8e8 transparent;
  padding-bottom: 4px;
}
.klk-live-inner::-webkit-scrollbar { height: 3px; }
.klk-live-inner::-webkit-scrollbar-thumb { background: #d0d8e8; border-radius: 3px; }
.klk-live-card {
  flex: 0 0 160px;
  border-radius: 12px;
  overflow: hidden;
  background: #f8f9fc;
  border: 1px solid #efefef;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.klk-live-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.12); }
.klk-live-card img { width: 100%; height: 100px; object-fit: cover; display: block; }
.klk-live-card-body { padding: 8px 10px 10px; }
.klk-live-card-title { font-size: 0.78rem; font-weight: 700; color: #1a1a2e; margin-bottom: 3px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow: hidden; }
.klk-live-card-loc { font-size: 0.66rem; color: #999; margin-bottom: 4px; }
.klk-live-card-price { font-size: 0.82rem; font-weight: 800; color: var(--primary-color,#1e6fdc); }
.klk-live-empty { padding: 24px 0; text-align: center; color: #aaa; font-size: 0.85rem; width: 100%; }
.klk-live-label { font-size: 0.7rem; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; display: block; }