/* #================================================== */
/* BASIC RESET */
/* #================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* #================================================== */
/* GLOBAL PROFESSIONAL FONT */
/* #================================================== */

body {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    background: #f7f8fa;
    color: #172033;

    font-size: 15px;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
}
/* #================================================== */
/* PROFESSIONAL TYPOGRAPHY */
/* #================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    letter-spacing: -0.02em;
}

button,
input,
select,
textarea {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

nav a {
    font-weight: 600;
}

.logo {
    letter-spacing: -1px;
}


/* #================================================== */
/* HEADER */
/* #================================================== */

.top-header {

    height: 40px;

    background: white;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 5%;

    border-bottom: 1px solid #e8edf0;

    box-shadow:
        0 1px 6px rgba(0,0,0,0.04);
}


/* #================================================== */
/* LOGO */
/* #================================================== */

/* #================================================== */
/* KL LIVING REAL LOGO */
/* #================================================== */

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.main-logo {
    height: 65px;
    width: auto;
    display: block;
    object-fit: contain;
}


/* #================================================== */
/* NAVIGATION */
/* #================================================== */

nav {

    display: flex;

    align-items: center;

    gap: 28px;
}

nav a {

    text-decoration: none;

    color: #172033;

    font-weight: 600;

    font-size: 15px;
}

nav a:hover {

    color: #159447;
}


/* #================================================== */
/* HEADER BUTTONS */
/* #================================================== */

.post-ad-btn {

    border: none;

    background: #159447;

    color: white;

    padding: 12px 22px;

    border-radius: 8px;

    font-weight: bold;

    cursor: pointer;
}

.login-btn {

    background: white;

    border: 1px solid #d8dde6;

    padding: 11px 20px;

    border-radius: 8px;

    cursor: pointer;
}


/* #================================================== */
/* HOME HERO */
/* #================================================== */

.hero {
    min-height: 360px;

    position: relative;

    background-image:
        url("images/hero/hero1.jpg");

    background-size: cover;
    background-position: center;

    overflow: hidden;
}


/* DARK OVERLAY */

.hero-overlay {
    min-height: 360px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(8,27,47,0.78),
            rgba(8,27,47,0.18)
        );
}


/* HERO CONTENT */

.hero-content {
    width: 86%;
    max-width: 1400px;

    margin: auto;

    color: white;
}


.hero-content h1 {
    font-size: 46px;
    line-height: 1.1;

    margin-bottom: 12px;
}


.hero-content > p {
    max-width: 720px;

    font-size: 18px;

    margin-bottom: 20px;
}


/* #================================================== */
/* SEARCH BOX */
/* #================================================== */

.search-box {

    background: white;

    display: flex;

    width: 760px;

    max-width: 95%;

    padding: 7px;

    border-radius: 12px;
}

.search-box input {

    flex: 1;

    border: none;

    outline: none;

    padding: 17px;

    font-size: 16px;
}

.search-box button {

    border: none;

    background: #159447;

    color: white;

    padding: 0 30px;

    border-radius: 9px;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;
}


/* #================================================== */
/* POST FREE AD BUTTON */
/* #================================================== */

.free-ad-btn {

    margin-top: 20px;

    background: #159447;

    color: white;

    border: none;

    padding: 14px 28px;

    border-radius: 8px;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;
}


/* #================================================== */
/* SLIDER ARROWS */
/* #================================================== */

.slider-btn {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 48px;

    height: 48px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,0.7);

    background:
        rgba(0,0,0,0.30);

    color: white;

    font-size: 25px;

    cursor: pointer;

    z-index: 10;
}

.slider-btn:hover {

    background:
        rgba(0,0,0,0.55);
}

.left-btn {

    left: 25px;
}

.right-btn {

    right: 25px;
}


/* #================================================== */
/* SLIDER DOTS */
/* #================================================== */

.slider-dots {

    margin-top: 22px;

    display: flex;

    gap: 8px;
}

.dot {

    width: 9px;

    height: 9px;

    background:
        rgba(255,255,255,0.60);

    border-radius: 50%;
}

.dot.active {

    background: #17a75b;
}


/* #================================================== */
/* PLACE NAME */
/* #================================================== */

.place-name {

    position: absolute;

    right: 35px;

    bottom: 22px;

    color: white;

    background:
        rgba(0,0,0,0.35);

    padding: 8px 14px;

    border-radius: 20px;

    font-size: 14px;

    z-index: 10;
}


/* #================================================== */
/* CATEGORIES */
/* #================================================== */

.categories {

    max-width: 1400px;

    margin:
        -30px auto 0;

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 15px;

    padding:
        0 25px;
}


/* #================================================== */
/* CATEGORY CARD */
/* #================================================== */

.category-card {

    background: white;

    min-height: 150px;

    border-radius: 13px;

    box-shadow:
        0 4px 20px rgba(0,0,0,0.07);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    transition: 0.2s;
}

.category-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 8px 25px rgba(0,0,0,0.12);
}


/* #================================================== */
/* CATEGORY ICON */
/* #================================================== */

.icon {

    font-size: 38px;

    margin-bottom: 8px;
}

.category-card h3 {

    font-size: 18px;

    margin-bottom: 6px;
}

.category-card p {

    color: #7a8496;

    font-size: 14px;
}


/* #================================================== */
/* FEATURED LISTINGS */
/* #================================================== */

.featured {

    max-width: 1350px;

    margin:
        55px auto;

    padding:
        0 25px;
}

.featured h2 {

    font-size: 28px;
}

.featured p {

    color: #7a8496;

    margin-top: 6px;
}


/* #================================================== */
/* MOBILE RESPONSIVE */
/* #================================================== */

@media(max-width: 900px) {

    nav a {

        display: none;
    }

    .hero h1 {

        font-size: 37px;
    }

    .categories {

        grid-template-columns:
            repeat(2, 1fr);
    }

}
/* #================================================== */
/* PROPERTY HERO SLIDER */
/* #================================================== */

.property-hero {

    min-height: 310px;

    position: relative;

    background-image:
        url("images/property-hero/property1.webp");

    background-size: cover;

    background-position: center;

    transition:
        background-image 0.8s ease-in-out;
}


/* #================================================== */
/* PROPERTY HERO OVERLAY */
/* #================================================== */

.property-hero-overlay {

    min-height: 310px;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(8,27,47,0.88),
            rgba(8,27,47,0.20)
        );
}


/* #================================================== */
/* PROPERTY HERO CONTENT */
/* #================================================== */

.property-hero-content {

    width: 86%;

    max-width: 1400px;

    margin: auto;

    color: white;
}

.property-small-title {

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 10px;

    color: #d6f4df;
}

.property-hero-content h1 {

    font-size: 46px;

    margin-bottom: 12px;
}

.property-hero-content p {

    max-width: 700px;

    font-size: 18px;

    line-height: 1.6;
}


/* #================================================== */
/* PROPERTY SLIDER ARROWS */
/* #================================================== */

.property-slider-btn {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 46px;

    height: 46px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,0.75);

    background:
        rgba(0,0,0,0.28);

    color: white;

    font-size: 23px;

    cursor: pointer;

    z-index: 20;
}

.property-slider-btn:hover {

    background:
        rgba(0,0,0,0.55);
}

.property-left-btn {

    left: 25px;
}

.property-right-btn {

    right: 25px;
}


/* #================================================== */
/* PROPERTY SLIDER DOTS */
/* #================================================== */

.property-slider-dots {

    margin-top: 20px;

    display: flex;

    gap: 8px;
}

.property-dot {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.55);
}

.property-dot.active {

    background: #17a75b;
}


/* #================================================== */
/* PROPERTY SLIDE NAME */
/* #================================================== */

.property-slide-name {

    position: absolute;

    right: 35px;

    bottom: 20px;

    color: white;

    background:
        rgba(0,0,0,0.35);

    padding: 8px 14px;

    border-radius: 20px;

    font-size: 13px;

    z-index: 20;
}

/* #================================================== */
/* PROPERTY SEARCH SECTION */
/* #================================================== */

.property-search-section {

    max-width: 1400px;

    margin: -55px auto 0;

    position: relative;

    z-index: 20;

    padding: 0 25px;
}

.property-search-card {

    background: white;

    border-radius: 16px;

    padding: 26px;

    box-shadow:
        0 10px 35px rgba(0,0,0,0.10);
}


/* #================================================== */
/* RENT / SALE BUTTONS */
/* #================================================== */

.property-purpose {

    display: flex;

    gap: 10px;

    margin-bottom: 24px;
}

.purpose-btn {

    border: 1px solid #d8dde6;

    background: white;

    color: #172033;

    padding: 12px 25px;

    border-radius: 8px;

    font-weight: 700;

    cursor: pointer;
}

.purpose-btn.active {

    background: #159447;

    border-color: #159447;

    color: white;
}


/* #================================================== */
/* PROPERTY FILTER GRID */
/* #================================================== */

.property-filter-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}

.filter-group {

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.filter-group label {
    display: block;

    font-size: 12px;

    font-weight: 600;

    margin-bottom: 5px;

    color: #445066;
}

.filter-group select,
.filter-group input {
    width: 100%;

    height: 44px;

    border: 1px solid #dfe5ea;

    border-radius: 7px;

    padding: 0 12px;

    font-size: 14px;

    background: white;

    outline: none;
}

.filter-group select:focus,
.filter-group input:focus {

    border-color: #159447;
}


/* #================================================== */
/* PROPERTY SEARCH BUTTON */
/* #================================================== */

.property-search-btn {

    width: 100%;

    margin-top: 22px;

    height: 52px;

    border: none;

    border-radius: 9px;

    background: #159447;

    color: white;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;
}

.property-search-btn:hover {

    background: #117c3d;
}


/* #================================================== */
/* QUICK PROPERTY TYPES */
/* #================================================== */

.quick-property-section {

    max-width: 1400px;

    margin: 55px auto;

    padding: 0 25px;
}

.quick-property-grid {

    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 16px;
}

.quick-property-card {

    min-height: 125px;

    background: white;

    border-radius: 13px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.06);

    cursor: pointer;

    transition: 0.2s;
}

.quick-property-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 8px 24px rgba(0,0,0,0.10);
}

.quick-property-icon {

    font-size: 34px;

    margin-bottom: 8px;
}


/* #================================================== */
/* PROPERTY PAGE RESPONSIVE */
/* #================================================== */

@media(max-width: 900px) {

    .property-filter-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .quick-property-grid {

        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media(max-width: 600px) {

    .property-filter-grid {

        grid-template-columns:
            1fr;
    }

    .quick-property-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .property-hero-content h1 {

        font-size: 35px;
    }

}
/* #================================================== */
/* VEHICLES PAGE HERO */
/* #================================================== */

.vehicle-hero {
    width: 100%;

    height: 390px;
    min-height: 390px;

    margin: 0;

    border-radius: 0;

    overflow: hidden;

    background-image: url("images/vehicles/r15.jpg");
    background-size: cover;
    background-position: center;

    position: relative;
}


/* #================================================== */
/* VEHICLE SEARCH */
/* #================================================== */

.vehicle-search-section {
    width: 90%;
    max-width: 1450px;

    margin: -70px auto 0;

    position: relative;

    z-index: 5;
}


.vehicle-search-card {
    width: 100%;

    background: white;

    padding: 24px;

    border-radius: 18px;

    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}


.vehicle-filter-grid {
    display: grid;

    grid-template-columns:
        1.6fr
        1fr
        1fr
        1fr
        1fr
        1fr;

    gap: 10px;

    align-items: end;
}


.vehicle-search-btn {
    width: 100%;

    height: 48px;

    margin-top: 12px;

    border: none;

    border-radius: 8px;

    background: #159447;

    color: white;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;
}


/* #================================================== */
/* VEHICLE TYPES */
/* #================================================== */

.vehicle-type-section {
    width: 90%;
    max-width: 1450px;

    margin: 28px auto 0;
    padding: 0;
}


.vehicle-type-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 14px;

    width: 100%;
}


.vehicle-type-card {
    width: 90%;
    min-height: 120px;

    background: white;

    border-radius: 12px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    box-shadow: 0 4px 16px rgba(0,0,0,0.05);

    cursor: pointer;
}


.vehicle-type-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 8px 24px rgba(0,0,0,0.10);
}


.vehicle-type-icon {

    font-size: 38px;

    margin-bottom: 8px;
}


.vehicle-results-grid .vehicle-meta {
    font-size: 13px;

    color: #748198;

    margin: 0;
}


/* #================================================== */
/* VEHICLE PAGE RESPONSIVE */
/* #================================================== */

@media(max-width: 900px) {

    .vehicle-filter-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

    .vehicle-type-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media(max-width: 600px) {

    .vehicle-filter-grid {

        grid-template-columns:
            1fr;
    }

    .vehicle-type-grid {

        grid-template-columns:
            1fr;
    }

    .vehicle-hero-content h1 {

        font-size: 35px;
    }

}
/* #================================================== */
/* POST AD PAGE */
/* #================================================== */

.post-ad-section {
    width: 100%;
    max-width: 1800px;
    margin: 30px auto;
    padding: 0 30px;
    box-sizing: border-box;
}

.post-ad-card {
    width: 95%;
max-width: 1700px;
margin: 30px auto;
    
position: relative;
overflow: hidden;
    background: white;

    padding: 35px;

    border-radius: 16px;

    box-shadow:
        0 8px 30px rgba(0,0,0,0.08);
}

.post-ad-card h1 {

    font-size: 30px;

    margin-bottom: 8px;
}

.post-ad-intro {

    color: #7a8496;

    margin-bottom: 30px;
}


/* #================================================== */
/* POST FORM */
/* #================================================== */

.post-form-group {

    margin-bottom: 24px;
}

.post-form-group label {

    display: block;

    font-weight: 700;

    margin-bottom: 8px;
}

.post-form-group input[type="text"],
.post-form-group input[type="number"] {

    width: 100%;

    min-height: 50px;

    border:
        1px solid #d8dde6;

    border-radius: 9px;

    padding: 12px 14px;

    font-size: 15px;
}

.photo-note {

    color: #7a8496;

    font-size: 14px;

    margin-bottom: 10px;
}


/* #================================================== */
/* PHOTO PREVIEW */
/* #================================================== */

.photo-preview {

    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 10px;

    margin-top: 15px;
}

.photo-preview img {

    width: 100%;

    height: 120px;

    object-fit: cover;

    border-radius: 9px;

    border:
        1px solid #e2e6eb;
}

.photo-message {

    margin-top: 10px;

    font-size: 14px;

    font-weight: 600;
}


/* #================================================== */
/* SUBMIT AD BUTTON */
/* #================================================== */

.submit-ad-btn {

    width: 100%;

    height: 52px;

    border: none;

    border-radius: 9px;

    background: #159447;

    color: white;

    font-size: 17px;

    font-weight: 700;

    cursor: pointer;
}
/* #================================================== */
/* POST AD - CATEGORY SELECTION */
/* #================================================== */

.post-category-card {

    max-width: 1180px;

    margin: 40px auto;

    background: white;

    padding: 35px;

    border-radius: 16px;

        position: relative;

border:
    1px solid rgba(24,182,90,0.25);

box-shadow:
    0 10px 30px rgba(0,0,0,0.08),
    0 0 18px rgba(24,182,90,0.10);
/* #================================================== */
/* POST AD CARD - SAME PREMIUM GREEN GLOW */
/* #================================================== */

.post-ad-card.luxury-split-card {

    border:
        1px solid rgba(24,182,90,0.25);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08),
        0 0 18px rgba(24,182,90,0.10);
}
}
/* #================================================== */
/* LUXURY MOVING BORDER HIGHLIGHT */
/* #================================================== */

.luxury-split-card::before {

    content: "";

    position: absolute;

    inset: -1px;

    border-radius: 17px;

    padding: 1px;

    background:
        conic-gradient(
            from var(--border-angle),
            transparent 0deg,
            transparent 325deg,
            rgba(24,182,90,0.20) 335deg,
            #18b65a 345deg,
            rgba(24,182,90,0.20) 355deg,
            transparent 360deg
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;

    animation:
        luxuryBorderMove 8s linear infinite;
}


@property --border-angle {

    syntax: "<angle>";

    initial-value: 0deg;

    inherits: false;
}


@keyframes luxuryBorderMove {

    from {
        --border-angle: 0deg;
    }

    to {
        --border-angle: 360deg;
    }

}

.post-category-card h1 {

    font-size: 30px;

    margin-bottom: 8px;

}


.post-category-card p {

    color: #7a8496;

    margin-bottom: 25px;
}


.post-category-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


.post-category-option {

    min-height: 140px;

    border:
        1px solid #e1e5ea;

    border-radius: 14px;

    background: white;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-size: 34px;

    cursor: pointer;

    transition: 0.2s;

    
}


.post-category-option span {

    font-size: 16px;

    font-weight: 700;

    color: #172033;
}


.post-category-option:hover {

    border-color: #159447;

    transform:
        translateY(-4px);

    box-shadow:
        0 8px 24px rgba(0,0,0,0.10);
}


@media(max-width: 700px) {

    .post-category-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }

}
/* #================================================== */
/* POST AD - ANIMATED KL LIVING BRAND */
/* #================================================== */

.post-brand-animation {

    position: absolute;

    top: 18px;
    right: 22px;

    width: 165px;

    z-index: 10;
}


/* #================================================== */
/* MAIN LOGO */
/* #================================================== */

.post-brand-logo {

    width: 100%;

    height: auto;

    display: block;
}


/* #================================================== */
/* BINOCULAR OVERLAY */
/* #================================================== */

.post-brand-binocular {

    position: absolute;

    width: 34px;

    top: 18px;
    left: 43%;

    transform-origin: center;

    animation:
        binocularStare 5.2s ease-in-out infinite;
}


/* #================================================== */
/* BINOCULAR WATCHING USER ANIMATION */
/* #================================================== */

@keyframes binocularStare {

    0%,
    12% {

        transform:
            translate(0, 0)
            rotate(0deg)
            scale(1);
    }

    22% {

        transform:
            translate(0, -5px)
            rotate(0deg)
            scale(1.02);
    }

    34% {

        transform:
            translate(-3px, -7px)
            rotate(-7deg)
            scale(1.08);
    }

    46% {

        transform:
            translate(-2px, -7px)
            rotate(-5deg)
            scale(1.03);
    }

    58% {

        transform:
            translate(3px, -7px)
            rotate(7deg)
            scale(1.08);
    }

    70% {

        transform:
            translate(2px, -7px)
            rotate(5deg)
            scale(1.03);
    }

    82% {

        transform:
            translate(0, -3px)
            rotate(0deg)
            scale(1.01);
    }

    90% {

        transform:
            translate(0, 0)
            rotate(0deg)
            scale(1);
    }

    100% {

        transform:
            translate(0, 0)
            rotate(0deg)
            scale(1);
    }
}


/* #================================================== */
/* MOBILE */
/* #================================================== */

@media(max-width: 700px) {

    .post-brand-animation {

        position: relative;

        top: auto;
        right: auto;

        width: 170px;

        margin:
            0 0 22px auto;
    }

}
/* #================================================== */
/* POST YOUR AD - PREMIUM GLOW SAFE OVERRIDE */
/* #================================================== */

#postAdFormCard {

    border:
        1px solid rgba(24,182,90,0.25);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08),
        0 0 18px rgba(24,182,90,0.10);
}
/* #================================================== */
/* VEHICLE PHOTO UPLOAD - PREMIUM KL LIVING STYLE */
/* #================================================== */

.photo-upload-box {

    position: relative;

    width: 100%;

    min-height: 180px;

    border:
        2px dashed rgba(24,182,90,0.35);

    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.98),
            rgba(247,251,248,0.98)
        );

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    cursor: pointer;

    transition:
        0.25s ease;

    box-shadow:
        inset 0 0 18px rgba(24,182,90,0.04),
        0 8px 24px rgba(0,0,0,0.04);
}


.photo-upload-box:hover {

    border-color:
        rgba(24,182,90,0.70);

    box-shadow:
        inset 0 0 20px rgba(24,182,90,0.08),
        0 10px 28px rgba(0,0,0,0.06),
        0 0 20px rgba(24,182,90,0.08);

    transform:
        translateY(-2px);
}


.photo-upload-icon {

    font-size: 34px;

    line-height: 1;
}


.photo-upload-title {

    font-size: 18px;

    font-weight: 700;

    color: #172033;
}


.photo-upload-text {

    font-size: 14px;

    color: #7a8496;
}


.photo-upload-count {

    margin-top: 4px;

    font-size: 13px;

    font-weight: 700;

    color: #159447;
}
/* #================================================== */
/* TRIAL - ANIMATED KL LIVING PAGE BACKGROUND */
/* #================================================== */

body {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(
            circle,
            rgba(24,182,90,0.16) 1px,
            transparent 1.5px
        ),
        #f6f8fa;

    background-size: 32px 32px;

    animation:
        klBackgroundMove 18s linear infinite;
}


/* SOFT GREEN LIGHT */
body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: -1;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(24,182,90,0.10),
            transparent 38%
        );

    animation:
        klBackgroundGlow 7s ease-in-out infinite alternate;
}


@keyframes klBackgroundMove {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            32px 32px;
    }

}


@keyframes klBackgroundGlow {

    from {
        opacity: 0.45;
        transform: scale(1);
    }

    to {
        opacity: 0.85;
        transform: scale(1.08);
    }

}
/* #================================================== */
/* TRIAL - MOVING DOT BACKGROUND */
/* #================================================== */

body {
    position: relative;
    overflow-x: hidden;
    background: #f6f8fa;
}


/* MOVING DOT LAYER */
body::after {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: -1;

    background-image:
        radial-gradient(
            circle,
            rgba(24,182,90,0.18) 1.5px,
            transparent 1.5px
        );

    background-size:
        34px 34px;

    animation:
        klDotsMove 6s linear infinite;
}



/* GENTLE WAVE-LIKE MOTION */
@keyframes klSoftDotFlow {

    0% {
        transform:
            translate3d(-18px, -8px, 0)
            scale(1);
    }

    25% {
        transform:
            translate3d(10px, -18px, 0)
            scale(1.01);
    }

    50% {
        transform:
            translate3d(18px, 8px, 0)
            scale(1.015);
    }

    75% {
        transform:
            translate3d(-8px, 18px, 0)
            scale(1.01);
    }

    100% {
        transform:
            translate3d(-18px, -8px, 0)
            scale(1);
    }

}
/* #================================================== */
/* TWO DOT LAYERS MOVE AGAINST EACH OTHER */
/* #================================================== */

@keyframes klRoseDotsOne {

    0% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(19px, 10px);
    }

    100% {
        transform:
            translate(38px, 0);
    }
}


@keyframes klRoseDotsTwo {

    0% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(-19px, -10px);
    }

    100% {
        transform:
            translate(-38px, 0);
    }
}
/* #================================================== */
/* VEHICLE PHOTO PREVIEW CARDS */
/* #================================================== */

.photo-preview {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 18px;
}


/* EACH PHOTO CARD */
.photo-preview-card {
    position: relative;
    overflow: hidden;

    aspect-ratio: 1 / 1;

    border-radius: 14px;

    background: #ffffff;

    border:
        1px solid rgba(24,182,90,0.22);

    box-shadow:
        0 6px 18px rgba(0,0,0,0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.photo-preview-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(24,182,90,0.55);

    box-shadow:
        0 10px 24px rgba(0,0,0,0.10),
        0 0 16px rgba(24,182,90,0.10);
}


/* PHOTO ITSELF */
.photo-preview-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* COVER BADGE */
.photo-cover-badge {
    position: absolute;

    left: 8px;
    bottom: 8px;

    padding:
        5px 9px;

    border-radius: 20px;

    background:
        rgba(24,182,90,0.92);

    color: white;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.3px;

    box-shadow:
        0 3px 10px rgba(0,0,0,0.15);
}


/* REMOVE BUTTON */
.photo-remove-btn {
    position: absolute;

    top: 7px;
    right: 7px;

    width: 28px;
    height: 28px;

    border: none;
    border-radius: 50%;

    background:
        rgba(20,20,20,0.72);

    color: white;

    font-size: 20px;
    line-height: 26px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.photo-remove-btn:hover {
    background:
        rgba(190,45,60,0.92);

    transform:
        scale(1.08);
}


/* PHOTO MESSAGE */
.photo-message {
    margin-top: 10px;

    font-size: 13px;

    color: #687386;
}


/* RESPONSIVE */
@media (max-width: 850px) {

    .photo-preview {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


@media (max-width: 520px) {

    .photo-preview {
        grid-template-columns:
            repeat(2, 1fr);
    }

}
.photo-preview-card img {
    cursor: pointer;
}
/* #================================================== */
/* POST PAGE SIMPLE NAVIGATION */
/* #================================================== */

.post-page-nav {
    max-width: 1180px;
    margin: 18px auto 0;

    display: flex;
    align-items: center;
    gap: 10px;
}


.post-page-nav a {
    text-decoration: none;

    padding: 8px 14px;

    border-radius: 20px;

    font-size: 13px;
    font-weight: 600;

    color: #586273;

    background: white;

    border:
        1px solid #e1e6eb;

    transition:
        0.2s ease;
}


.post-page-nav a:hover {
    color: #18b65a;

    border-color:
        rgba(24,182,90,0.45);

    box-shadow:
        0 4px 12px rgba(24,182,90,0.08);
}


.post-page-nav a.active {
    color: white;

    background: #18b65a;

    border-color: #18b65a;
}
/* #================================================== */
/* HOMEPAGE CATEGORY CARD LINKS */
/* #================================================== */

.category-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.category-card-link .category-card {
    width: 100%;
    height: 100%;
}

.category-card-link .category-card {
    cursor: pointer;
}

.category-card-link:hover .category-card {
    transform: translateY(-4px);

    box-shadow:
        0 12px 28px rgba(0,0,0,0.10),
        0 0 18px rgba(24,182,90,0.10);
}
.free-ad-btn {
    display: inline-block;
    text-decoration: none;
    text-align: center;
}
/* ================================================== */
/* POST AD BUTTON - SILK GREEN GLOW */
/* ================================================== */

.post-submit-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 54px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg, #169c45, #1fb655, #169c45);
    color: white;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(31, 182, 85, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.post-submit-btn span {
    position: relative;
    z-index: 2;
}

.post-submit-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -35%;
    width: 35%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.10),
        rgba(255, 255, 255, 0.35),
        rgba(255, 255, 255, 0.10),
        transparent
    );
    transform: skewX(-20deg);
    filter: blur(4px);
    z-index: 1;
    animation: silkGreenGlow 2.8s linear infinite;
}

.post-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(31, 182, 85, 0.35);
}

@keyframes silkGreenGlow {
    0% {
        left: -35%;
    }
    100% {
        left: 120%;
    }
}
/* #================================================== */
/* KL LIVING - VEHICLE RESULTS PREMIUM LIST VIEW */
/* #================================================== */

.vehicle-results-section {
    width: 90%;
    max-width: 1450px;

    margin: 24px auto 0;
    padding: 0;
}


/* HEADER */
.vehicle-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 16px;
}

.vehicle-results-header h2 {
    font-size: 20px;
    font-weight: 800;
}

.vehicle-results-header select {
    min-width: 190px;
    height: 46px;

    padding: 0 15px;

    background: white;

    border:
        1px solid #d9dee5;

    border-radius: 7px;

    font-size: 14px;
}


/* LEFT + RIGHT */
.vehicle-results-layout {
    display: grid;
    grid-template-columns: 280px 1fr;

    gap: 18px;

    align-items: start;
}


/* FILTER SIDEBAR */
.vehicle-filter-panel {
    background: white;

    border-radius: 8px;

    padding: 18px;

    border:
        1px solid #e4e7eb;

    box-shadow: none;
}


/* RESULTS BECOME ONE COLUMN */
.vehicle-results-grid {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


/* HORIZONTAL VEHICLE CARD */
.vehicle-results-grid .listing-card {
    display: grid;

    grid-template-columns:
        290px 1fr;

    min-height: 145px;

    background: white;

    border-radius: 10px;

    overflow: hidden;

    border:
        1px solid #edf0f2;

    box-shadow:
        0 3px 12px rgba(0,0,0,0.04);

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.vehicle-results-grid .listing-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 24px rgba(0,0,0,0.08);
}


/* IMAGE SIDE */
.vehicle-results-grid .listing-image {
    width: 290px;
    height: 145px;

    position: relative;
    overflow: hidden;

    background: #f7f8fa;
}


.vehicle-results-grid .listing-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* DETAILS SIDE */
.vehicle-results-grid .listing-details {
    padding: 14px 18px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}


/* TITLE */
.vehicle-results-grid .listing-details h3 {
    font-size: 17px;
    font-weight: 700;

    color: #14213d;

    margin-bottom: 8px;
}


.vehicle-results-grid .listing-details p {
    font-size: 13px;

    color: #748198;

    margin-bottom: 6px;
}


/* PRICE */
.vehicle-results-grid .listing-price {
    font-size: 22px;
    font-weight: 800;

    color: #14213d;

    margin-bottom: 5px;
}


/* HEART BUTTON */
.vehicle-results-grid .heart-btn {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    border: none;

    background: #f8faf9;

    color: #159447;

    font-size: 22px;

    cursor: pointer;
}


/* SALE BADGE */
.vehicle-results-grid .listing-badge {
    position: absolute;

    top: 8px;
    left: 8px;

    padding: 5px 9px;

    border-radius: 5px;

    background: #159447;

    color: white;

    font-size: 11px;
    font-weight: 700;
}


/* MOBILE */
@media(max-width: 900px) {

    .vehicle-results-layout {
        grid-template-columns:
            1fr;
    }

    .vehicle-filter-panel {
        position: static;
    }

    .vehicle-results-grid .listing-card {
        grid-template-columns:
            1fr;
    }

    .vehicle-results-grid .listing-image {
        height: 240px;
    }

}
/* #================================================== */
/* VEHICLES PAGE - COMPACT PROFESSIONAL SPACING */
/* #================================================== */

.vehicle-type-section {
    margin:
        28px auto 22px;
}

.vehicle-type-grid {
    gap: 14px;
}

.vehicle-type-card {
    min-height: 115px;
}


/* FEATURED SECTION */
.featured {
    width: 90%;
    max-width: 1450px;

    margin: 28px auto 0;
    padding: 0;
}


/* RESULTS SECTION */
.vehicle-results-section {
    margin:
        18px auto 35px;
}


/* RESULT HEADER */
.vehicle-results-header {
    margin-bottom: 14px;
}
/* #================================================== */
/* PREMIUM VEHICLE FILTER PANEL */
/* #================================================== */

/* ========================================= */
/* VEHICLE FILTER PANEL */
/* ========================================= */

.vehicle-filter-panel {
    background: #ffffff;
    border: 1px solid #e5edf3;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
}

/* TOP HEADER */
.filter-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.filter-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-panel-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #16233b;
}

.filter-icon {
    font-size: 18px;
    color: #159447;
}

.reset-all-btn {
    background: none;
    border: none;
    color: #159447;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* SAVED SEARCH CARD */
.saved-search-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    border: 1px solid #e4ebf1;
    border-radius: 12px;
    background: #fdfefe;
    margin-bottom: 20px;
}

.saved-search-icon {
    font-size: 18px;
    color: #159447;
}

.saved-search-text {
    flex: 1;
}

.saved-search-text strong {
    display: block;
    font-size: 15px;
    color: #16233b;
    margin-bottom: 4px;
}

.saved-search-text p {
    margin: 0;
    font-size: 13px;
    color: #7a8798;
}

.saved-search-arrow {
    font-size: 22px;
    color: #7a8798;
}

/* FILTER GROUP */
.filter-group {
    margin-bottom: 20px;
}

.filter-group h4 {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 800;
    color: #16233b;
}


.filter-count {
    margin-left: auto;

    font-size: 13px;
    font-weight: 600;
    color: #8290a3;
}

.filter-check-row:last-child {
    border-bottom: none;
}

.filter-check-left {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 15px;
    font-weight: 700;
    color: #243247;
}


.filter-count {
    display: block;

    margin-left: 27px;
    margin-top: 2px;

    font-size: 13px;
    font-weight: 600;
    color: #8290a3;
}
.filter-check-row:last-child {
    border-bottom: none;
}

/* DROPDOWN BLOCKS */
.filter-dropdown {
    border-top: 1px solid #edf2f6;
    padding: 14px 0;
}

.filter-dropdown:last-of-type {
    margin-bottom: 18px;
}

.filter-dropdown summary {
    list-style: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: #1c2940;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-dropdown summary::-webkit-details-marker {
    display: none;
}

.filter-dropdown summary::after {
    content: "+";
    font-size: 18px;
    color: #7b8794;
}

.filter-dropdown[open] summary::after {
    content: "–";
}

.filter-dropdown-body {
    padding-top: 12px;
}

.filter-dropdown-body p {
    margin: 0;
    font-size: 14px;
    color: #7b8794;
}

/* APPLY BUTTON */
.apply-filter-btn {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 10px;
    background: #159447;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s ease;
}

.apply-filter-btn:hover {
    background: #117d3c;
}


.filter-checkbox-list label {
    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        7px 3px;

    font-size: 14px;

    cursor: pointer;
}


.filter-checkbox-list input {
    width: 18px;
    height: 18px;

    accent-color: #159447;
}

/* REMOVE EXCESS GAP ABOVE RESULTS */
.vehicle-results-layout {
    margin-top: 0;
}
/* ==========================================
   VEHICLE RESULTS - TOP CONTROLS
========================================== */

.vehicle-results-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin: 18px 0 18px 0;
}


/* CATEGORY TABS */

.vehicle-result-tabs {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 16px;
}

.vehicle-tab {
    height: 42px;

    padding: 0 18px;

    border: 1px solid #dfe5ea;
    border-radius: 8px;

    background: white;
    color: #172033;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}

.vehicle-tab:hover {
    border-color: #159447;
    color: #159447;
}

.vehicle-tab.active {
    background: #159447;
    border-color: #159447;
    color: white;
}


/* RESULTS + SORT */

.vehicle-results-toolbar {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 14px;
}

.vehicle-results-toolbar h2 {
    font-size: 24px;
    font-weight: 800;

    margin: 0 0 3px;
}

.vehicle-results-toolbar p {
    margin: 0;

    color: #748198;

    font-size: 14px;
}


/* RIGHT TOOLS */

.vehicle-sort-tools {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #748198;

    font-size: 13px;
}

.vehicle-sort-tools select {
    height: 42px;

    padding: 0 14px;

    border: 1px solid #dfe5ea;
    border-radius: 8px;

    background: white;
}


/* GRID / LIST / MAP */

.view-mode {
    height: 42px;
    min-width: 42px;

    padding: 0 12px;

    border: 1px solid #dfe5ea;
    border-radius: 8px;

    background: white;

    cursor: pointer;
}

.view-mode.active {
    background: #159447;
    border-color: #159447;

    color: white;
}
/* FIX VEHICLE TYPE ROWS */

.vehicle-filter-panel .filter-group .filter-check-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    margin: 0;
    padding: 10px 0;

    border-bottom: 1px solid #eef1f4;
}

.vehicle-filter-panel .filter-check-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.vehicle-filter-panel .filter-count {
    margin-left: auto;
    font-size: 13px;
    color: #8290a3;
    font-weight: 600;
}
/* ========================================= */
/* KL LIVING HEADER WEATHER */
/* ========================================= */

.header-weather {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 7px 14px;

    background: #f7fbf8;

    border: 1px solid #e1eee6;
    border-radius: 12px;

    font-size: 13px;
    color: #243247;
}

.weather-icon {
    font-size: 24px;
}

.weather-main {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.weather-location {
    font-size: 11px;
    color: #7a8798;
}

.weather-temp {
    font-size: 16px;
    color: #172033;
}

.weather-extra {
    padding-left: 10px;
    border-left: 1px solid #dfe8e2;

    font-size: 12px;
    color: #667386;
}
/* #================================================== */
/* PREMIUM VEHICLE SEARCH PANEL */
/* #================================================== */

.vehicle-search-panel {
    max-width: 1420px;
    margin: -55px auto 28px;
    padding: 26px;

    position: relative;
    z-index: 5;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.98),
            rgba(251,255,253,0.98)
        );

    border: 1px solid rgba(24,182,90,0.18);
    border-radius: 18px;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.08),
        0 0 24px rgba(24,182,90,0.07);
}


/* GREEN TOP LIGHT */
.vehicle-search-panel::before {
    content: "";

    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;

    height: 3px;

    border-radius: 0 0 8px 8px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(24,182,90,0.30),
            #18b65a,
            rgba(24,182,90,0.30),
            transparent
        );
}


/* 3 COLUMNS */
.vehicle-search-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}


/* EACH FIELD */
.vehicle-search-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.vehicle-search-field label {
    font-size: 13px;
    font-weight: 700;
    color: #172033;
}


.vehicle-search-field select,
.vehicle-search-field input {
    width: 100%;
    height: 52px;

    padding: 0 14px;

    border: 1px solid #d7dde5;
    border-radius: 10px;

    background: white;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.vehicle-search-field select:hover,
.vehicle-search-field input:hover {
    border-color: rgba(24,182,90,0.45);
}


.vehicle-search-field select:focus,
.vehicle-search-field input:focus {
    border-color: #18b65a;

    box-shadow:
        0 0 0 3px rgba(24,182,90,0.09);
}


/* SEARCH BUTTON */
.vehicle-search-main-btn {
    width: 100%;
    height: 56px;

    margin-top: 20px;

    position: relative;
    overflow: hidden;

    border: none;
    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #159447,
            #18b65a,
            #159447
        );

    color: white;

    font-size: 16px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(24,182,90,0.20);
}


/* SILK GLOW */
.vehicle-search-main-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -35%;

    width: 28%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.08),
            rgba(255,255,255,0.42),
            rgba(255,255,255,0.08),
            transparent
        );

    transform: skewX(-20deg);

    filter: blur(3px);

    animation:
        vehicleSearchSilk 3.2s linear infinite;
}


@keyframes vehicleSearchSilk {

    from {
        left: -35%;
    }

    to {
        left: 115%;
    }

}


/* TABLET */
@media(max-width: 950px) {

    .vehicle-search-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* MOBILE */
@media(max-width: 650px) {

    .vehicle-search-panel {
        margin: 15px 14px 24px;
    }

    .vehicle-search-grid {
        grid-template-columns:
            1fr;
    }

}
.back-to-vehicles-btn {
    height: 44px;
    padding: 0 16px;

    border: 1px solid rgba(24,182,90,0.28);
    border-radius: 9px;

    background: white;

    color: #159447;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.back-to-vehicles-btn:hover {
    background: rgba(24,182,90,0.05);
    border-color: #18b65a;
    transform: translateY(-1px);
}
/* ================================================ */
/* RESULTS TOOLBAR ALIGNMENT */
/* ================================================ */

.vehicle-results-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vehicle-results-toolbar > div:first-child {
    margin-right: auto;
}

.back-to-vehicles-btn {
    margin-left: auto;
    order: 2;
}

.vehicle-results-sort {
    order: 3;
}
/* #================================================== */
/* VEHICLE TRUST PANEL - RIGHT SIDE */
/* #================================================== */

.vehicle-trust-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    width: 635px;

    margin-left: auto;
    margin-right: 0;
    margin-bottom: 12px;
}

.trust-item {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 78px;

    padding: 14px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.98),
            rgba(248,255,251,0.98)
        );

    border: 1px solid rgba(24,182,90,0.16);
    border-radius: 12px;

    box-shadow:
        0 5px 18px rgba(0,0,0,0.04);
}
/* #================================================== */
/* FINAL RESULTS HEADER ALIGNMENT */
/* #================================================== */

.vehicle-results-right {
    padding-left: 18px;
}

.vehicle-trust-panel {
    max-width: 680px;
    margin-left: auto !important;
}

.vehicle-toolbar-controls {
    justify-content: flex-end;
}
/* #================================================== */
/* FEATURED TOP ROW - TRUST CARDS ON RIGHT */
/* #================================================== */

.featured-top-row {
    display: grid;
    grid-template-columns: 1fr 680px;
    gap: 30px;

    align-items: center;

    margin-bottom: 18px;
}


.featured-top-left {
    min-width: 0;
}


/* TRUST PANEL IN TOP RIGHT */
.featured-top-row .vehicle-trust-panel {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}


/* REMOVE EXTRA TOP/BOTTOM SPACE */
.featured-top-row .trust-item {
    min-height: 86px;

    padding: 14px 16px;
}


/* MOBILE */
@media(max-width: 1050px) {

    .featured-top-row {
        grid-template-columns: 1fr;
    }

    .featured-top-row .vehicle-trust-panel {
        grid-template-columns:
            repeat(3, 1fr);
    }

}
/* ================================================== */
/* CATEGORY TABS */
/* ================================================== */

.vehicle-category-tabs {
    display: flex;
    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    margin: 18px 0 20px;
}


.vehicle-tab {
    min-height: 46px;

    padding: 0 18px;

    border: 1px solid #dce2e8;
    border-radius: 10px;

    background: white;

    color: #1d2638;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}


.vehicle-tab.active {
    background: #159447;

    color: white;

    border-color: #159447;
}


/* ================================================== */
/* BADGES + SORT TOOLBAR */
/* ================================================== */

.vehicle-info-toolbar {
    display: flex;
    align-items: center;

    justify-content: space-between;

    gap: 20px;

    width: 100%;

    padding: 12px 14px;

    margin-bottom: 18px;

    background:
        rgba(255,255,255,0.70);

    border:
        1px solid rgba(24,182,90,0.10);

    border-radius: 13px;
}


/* BADGE ROW */
.vehicle-trust-badges {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    min-width: 300px;
}


/* SMALL BADGE */
.trust-badge {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    min-height: 42px;

    padding: 7px 12px;

    border-radius: 20px;

    white-space: nowrap;

    font-size: 12px;
}


.trust-badge .badge-icon {
    width: 27px;
    height: 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    font-weight: 800;
}


.trust-badge strong {
    font-size: 12px;

    color: #172033;
}


.badge-text {
    font-size: 11px;

    color: #778399;

    padding-left: 7px;

    border-left:
        1px solid rgba(0,0,0,0.10);
}


/* GREEN / CREAM / GRAY */
.trust-verified {
    background: #eff9f2;
}

.trust-verified .badge-icon {
    background: #d9f1e0;
    color: #159447;
}


.trust-fast {
    background: #fff8e9;
}

.trust-fast .badge-icon {
    background: #ffedc8;
    color: #e89816;
}


.trust-favorite {
    background: #f4f3f5;
}

.trust-favorite .badge-icon {
    background: #e8e6eb;
    color: #76667f;
}


/* SORT CONTROLS */
.vehicle-toolbar-controls {
    display: flex;
    align-items: center;

    justify-content: flex-end;

    gap: 9px;

    flex-shrink: 0;
}


.sort-label {
    font-size: 13px;

    color: #667085;
}


.vehicle-toolbar-controls select {
    height: 42px;

    min-width: 155px;

    padding: 0 12px;

    border: 1px solid #d8dee6;
    border-radius: 9px;

    background: white;
}


.view-mode {
    height: 42px;
    min-width: 42px;

    padding: 0 12px;

    border:
        1px solid #d8dee6;

    border-radius: 9px;

    background: white;

    cursor: pointer;
}


.view-mode.active {
    background: #159447;

    color: white;

    border-color: #159447;
}


.back-to-vehicles-btn {
    height: 42px;

    padding: 0 15px;

    border:
        1px solid #18b65a;

    border-radius: 9px;

    background: white;

    color: #159447;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


/* ================================================== */
/* MOBILE */
/* ================================================== */

@media(max-width: 1100px) {

    .vehicle-info-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .vehicle-trust-badges {
        flex-wrap: wrap;
    }

    .vehicle-toolbar-controls {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

}
.page-container {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
}
/* ================================================== */
/* FINAL FEATURED SECTION ALIGNMENT */
/* ================================================== */

.featured-vehicles-section {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
}


/* KEEP BADGES + SORT INSIDE SAME WIDTH */
.vehicle-info-toolbar {
    width: 100%;
    box-sizing: border-box;
}


/* PREVENT BACK BUTTON GOING OUTSIDE */
.vehicle-toolbar-controls {
    min-width: 0;
    flex-wrap: nowrap;
}

.back-to-vehicles-btn {
    flex-shrink: 0;
}


/* FEATURED TITLE ALIGNMENT */
.featured-title-area,
.featured-vehicles-header {
    margin-left: 0;
    padding-left: 0;
}
/* ================================================== */
/* COMPACT BADGE TOOLBAR ROW */
/* ================================================== */

.vehicle-info-toolbar {
    width: 92%;
    max-width: 1400px;

    margin: 0 auto 16px;

    padding: 8px 10px;

    gap: 10px;

    box-sizing: border-box;

    border-radius: 11px;
}


/* BADGE GROUP */
.vehicle-trust-badges {
    gap: 7px;
}


/* EACH BADGE */
.trust-badge {
    min-height: 34px;

    padding: 4px 8px;

    gap: 5px;

    border-radius: 17px;
}


/* BADGE ICON */
.trust-badge .badge-icon {
    width: 22px;
    height: 22px;

    font-size: 11px;
}


/* BADGE TITLE */
.trust-badge strong {
    font-size: 11px;
}


/* SMALL DESCRIPTION */
.badge-text {
    font-size: 9px;

    padding-left: 5px;
}


/* SORT SIDE */
.vehicle-toolbar-controls {
    gap: 6px;
}


.vehicle-toolbar-controls select {
    height: 38px;

    min-width: 140px;
}


/* VIEW BUTTONS */
.view-mode {
    height: 38px;
    min-width: 38px;

    padding: 0 9px;
}


/* BACK BUTTON */
.back-to-vehicles-btn {
    height: 38px;

    padding: 0 12px;

    font-size: 11px;
}
/* ================================================== */
/* KL LIVING HEADER WEATHER */
/* ================================================== */

.header-weather {
    flex: 1;
    max-width: 620px;
    height: 52px;

    margin: 0 24px;
    padding: 6px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    box-sizing: border-box;

    background: rgba(237, 238, 240, 0.607);

    border: 1px solid rgba(233, 234, 237, 0.242);
    border-radius: 12px;

    box-shadow:
        0 3px 12px rgba(0,0,0,0.035);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    overflow: hidden;
}


/* LEFT SIDE */

.weather-location {
    display: flex;
    align-items: center;
    gap: 6px;

    min-width: 0;
}


.weather-icon {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background: rgba(255,255,255,0.75);

    font-size: 17px;
}


.weather-main strong {
    font-size: 20px;
    font-weight: 800;

    color: #2f3747;

    white-space: nowrap;
}

.weather-location span:not(.weather-icon) {
    display: block;

    margin-top: 1px;

    font-size: 9px;

    color: #7b8798;

    white-space: nowrap;
}


/* TEMPERATURE */

.weather-main {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 0 12px;

    border-left: 1px solid rgba(24,182,90,0.12);
    border-right: 1px solid rgba(24,182,90,0.12);
}


.weather-main strong {
    font-size: 20px;
    font-weight: 800;

    color: #159447;

    white-space: nowrap;
}


.weather-main span {
    font-size: 9px;

    color: #7b8798;

    white-space: nowrap;
}


/* HUMIDITY + WIND */

.weather-extra {
    display: flex;
    align-items: center;

    gap: 11px;

    font-size: 9px;

    color: #748198;
}


.weather-extra span {
    display: flex;
    align-items: center;

    gap: 3px;

    white-space: nowrap;
}


.weather-extra strong {
    font-size: 10px;

    color: #293246;
}


/* SMALL GREEN ACCENT */

.header-weather {
    position: relative;
}

.header-weather::after {
    content: "";

    position: absolute;

    left: 15%;
    right: 15%;
    bottom: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(241, 244, 242, 0.45),
            transparent
        );
}


/* RESPONSIVE */

@media(max-width: 1150px) {
    .header-weather {
        display: none;
    }
}
/* ============================================ */
/* DESKTOP VEHICLE LIST IMAGE SIZE */
/* ============================================ */

.vehicle-results-grid .listing-card {
    display: grid;
    grid-template-columns: 340px 1fr;
    align-items: stretch;
}

.vehicle-results-grid .listing-image {
    width: 100%;
    height: 190px;

    position: relative;
    overflow: hidden;
}

.vehicle-results-grid .listing-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}
/* ============================================ */
/* POST AD - DISTRICT + TOWN ROW */
/* ============================================ */

.post-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}

.post-form-row .post-form-group {
    margin-bottom: 0;
}

.post-form-row select,
.post-form-row input {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border: 1px solid #d8dee6;
    border-radius: 10px;
    background: white;
    box-sizing: border-box;
    font-size: 14px;
    outline: none;
}

.post-form-row select:focus,
.post-form-row input:focus {
    border-color: #18b65a;
}

@media(max-width: 700px) {
    .post-form-row {
        grid-template-columns: 1fr;
    }
}
/* ============================================ */
/* POST AD - LANDSCAPE / WIDE LAYOUT */
/* ============================================ */

.post-ad-card {
    width: 92%;
    max-width: 1180px;
    margin: 35px auto;
    padding: 28px 32px;
    box-sizing: border-box;
}

.post-form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.post-form-group {
    margin-bottom: 16px;
}

.post-form-group input,
.post-form-group select {
    width: 100%;
    height: 46px;
    box-sizing: border-box;
}

.photo-upload-box {
    min-height: 125px;
}

@media(max-width: 900px) {

    .post-ad-card {
        width: 94%;
        padding: 22px;
    }

    .post-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width: 650px) {

    .post-form-row {
        grid-template-columns: 1fr;
    }
}
/* ============================================ */
/* KL LIVING FOOTER */
/* ============================================ */

.kl-footer {
    margin-top: 60px;
    background: #0f4d2f;
    color: white;
}

.kl-footer-inner {
    width: 92%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 55px 0 38px;

    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 55px;
}

.kl-footer-brand {
    max-width: 380px;
}

.footer-logo {
    width: 150px;
    margin-bottom: 18px;
    background: white;
    padding: 8px 12px;
    border-radius: 10px;
}

.kl-footer-brand p {
    margin: 0;
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    line-height: 1.7;
}

.footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.footer-socials a {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.16);

    border-radius: 9px;

    color: white;
    text-decoration: none;
    font-weight: 700;

    transition: 0.25s;
}

.footer-socials a:hover {
    background: #18b65a;
    transform: translateY(-2px);
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-column h4 {
    margin: 0 0 8px;
    font-size: 15px;
    color: white;
}

.footer-column a {
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    font-size: 13px;
    transition: 0.2s;
}

.footer-column a:hover {
    color: #7be3a3;
    padding-left: 4px;
}

.kl-footer-bottom {
    width: 92%;
    max-width: 1500px;

    margin: 0 auto;

    padding: 20px 0;

    border-top: 1px solid rgba(255,255,255,0.12);

    display: flex;
    justify-content: space-between;
    gap: 20px;

    font-size: 12px;
    color: rgba(255,255,255,0.60);
}


/* MOBILE */
@media(max-width: 900px) {

    .kl-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 35px;
    }

}


@media(max-width: 600px) {

    .kl-footer-inner {
        grid-template-columns: 1fr;
    }

    .kl-footer-bottom {
        flex-direction: column;
    }

}
/* ============================================ */
/* KL LIVING LOGIN PAGE */
/* ============================================ */

.login-page {
    min-height: 100vh;
    background: #f7f9f8;
    color: #172033;
}


/* TOP BAR */

.login-topbar {
    height: 86px;
    padding: 0 6%;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    background: white;
    border-bottom: 1px solid #e9edeb;

    box-sizing: border-box;
}


.login-back {
    justify-self: start;

    padding: 10px 16px;

    background: #f4f6f5;

    border-radius: 9px;

    color: #172033;
    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
}


.login-logo {
    width: 145px;
}


.login-language-btn {
    justify-self: end;

    border: none;
    background: transparent;

    color: #159447;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;
}


/* MAIN */

.login-content {
    min-height: calc(100vh - 86px);

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 45px 20px;

    box-sizing: border-box;
}


/* CARD */

.login-card {
    width: 100%;
    max-width: 520px;

    padding: 42px;

    background: white;

    border-radius: 16px;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.06);

    box-sizing: border-box;
}


.login-card h1 {
    margin: 0 0 7px;

    font-size: 31px;
    color: #172033;
}


.login-subtitle {
    margin: 0 0 30px;

    color: #7a8496;
    font-size: 14px;
}


/* FORM */

.login-form-group {
    margin-bottom: 20px;
}


.login-form-group label {
    display: block;

    margin-bottom: 8px;

    font-size: 13px;
    font-weight: 700;
}


.login-form-group input {
    width: 100%;
    height: 50px;

    padding: 0 14px;

    border: 1px solid #d7dde5;
    border-radius: 9px;

    box-sizing: border-box;

    outline: none;

    font-size: 14px;
}


.login-form-group input:focus {
    border-color: #18b65a;

    box-shadow:
        0 0 0 3px rgba(24,182,90,0.08);
}


/* REMEMBER / FORGOT */

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-bottom: 22px;

    font-size: 13px;
}


.login-options label {
    display: flex;
    align-items: center;
    gap: 7px;
}


.login-options a {
    color: #159447;
    text-decoration: none;
    font-weight: 700;
}


/* LOGIN BUTTON */

.login-main-btn {
    width: 100%;
    height: 50px;

    border: none;
    border-radius: 9px;

    background: #159447;

    color: white;

    font-size: 15px;
    font-weight: 800;

    cursor: pointer;
}


.login-main-btn:hover {
    background: #117d3c;
}


/* CREATE ACCOUNT */

.create-account-link {
    display: block;

    margin: 22px 0;

    text-align: center;

    color: #159447;
    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
}


/* DIVIDER */

.login-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap: 14px;

    margin: 20px 0;
}


.login-divider span {
    height: 1px;
    background: #e3e7eb;
}


.login-divider small {
    color: #8b94a3;
}


/* OTP BUTTON */

.otp-login-btn {
    width: 100%;
    height: 48px;

    border: 1px solid #d8dee6;
    border-radius: 9px;

    background: white;

    color: #172033;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}


.otp-login-btn:hover {
    border-color: #18b65a;
}


/* PARTNER BOX */

.partner-login-box {
    margin-top: 24px;
    padding: 18px;

    border: 1px solid #dce7df;
    border-radius: 11px;

    background: #f8fbf9;
}


.partner-login-box h3 {
    margin: 0 0 6px;

    font-size: 15px;
    color: #172033;
}


.partner-login-box p {
    margin: 0 0 13px;

    color: #728093;

    font-size: 13px;
    line-height: 1.6;
}


.partner-login-box a {
    color: #159447;

    text-decoration: none;

    font-size: 13px;
    font-weight: 800;
}


/* MOBILE */

@media(max-width: 650px) {

    .login-topbar {
        padding: 0 18px;
    }

    .login-logo {
        width: 115px;
    }

    .login-back {
        font-size: 12px;
        padding: 9px 11px;
    }

    .login-card {
        padding: 28px 22px;
    }

    .login-card h1 {
        font-size: 27px;
    }

}
/* ============================================ */
/* LOGIN CARD - LUXURY RUNNING GREEN STROKE */
/* ============================================ */

.login-card {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.login-card::before {
    content: "";

    position: absolute;
    width: 160%;
    height: 160%;

    left: -30%;
    top: -30%;

    background:
        conic-gradient(
            transparent 0deg,
            transparent 250deg,
            rgba(24,182,90,0.10) 285deg,
            #18b65a 320deg,
            #8df0b4 345deg,
            transparent 360deg
        );

    animation: loginGreenStroke 5s linear infinite;

    z-index: -2;
}

.login-card::after {
    content: "";

    position: absolute;
    inset: 2px;

    background: white;

    border-radius: 14px;

    z-index: -1;
}

.login-card {
    box-shadow:
        0 14px 45px rgba(0,0,0,0.07),
        0 0 28px rgba(24,182,90,0.08);
}

@keyframes loginGreenStroke {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}
/* ============================================ */
/* LOGIN PAGE - KL LIVING BRAND ANIMATION */
/* ============================================ */

.login-brand-animation {
    position: relative;

    width: 165px;

    justify-self: center;
}

.login-brand-animation .post-brand-logo {
    width: 100%;
    height: auto;
    display: block;
}

.login-brand-animation .post-brand-binocular {
    position: absolute;

    width: 34px;

    top: 18px;
    left: 43%;

    transform-origin: center;

    animation:
        binocularStare 5.2s ease-in-out infinite;
}
/* ============================================ */
/* KL LIVING REGISTER PAGE */
/* ============================================ */

.register-page {
    min-height: 100vh;
    background: #f7f9f8;
}


.register-main {
    min-height: calc(100vh - 86px);

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 42px 20px 60px;

    box-sizing: border-box;
}


.register-card {
    width: 100%;
    max-width: 860px;

    position: relative;
    overflow: hidden;

    padding: 42px;

    background: white;

    border-radius: 18px;

    border:
        1px solid rgba(24,182,90,0.22);

    box-shadow:
        0 14px 38px rgba(0,0,0,0.06),
        0 0 24px rgba(24,182,90,0.08);

    box-sizing: border-box;
}


.register-heading h1 {
    margin: 0 0 8px;

    font-size: 32px;
    color: #172033;
}


.register-heading p {
    margin: 0;

    color: #7a8496;
    font-size: 14px;
}


/* PROGRESS */

.register-progress {
    display: flex;
    align-items: center;

    margin: 30px 0 34px;
}


.register-step {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #98a2b3;
    font-size: 13px;
}


.register-step span {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 2px solid #d9dee5;

    background: white;

    font-weight: 800;
}


.register-step.active {
    color: #159447;
}


.register-step.active span {
    background: #159447;
    color: white;

    border-color: #159447;
}


.register-line {
    flex: 1;

    height: 2px;

    margin: 0 14px;

    background: #e3e7eb;
}


/* FORM GRID */

.register-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 0 18px;
}


.register-grid .login-form-group {
    margin-bottom: 20px;
}


.register-grid select {
    width: 100%;
    height: 50px;

    padding: 0 14px;

    border: 1px solid #d7dde5;
    border-radius: 9px;

    background: white;

    font-size: 14px;

    outline: none;
}


.register-grid select:focus {
    border-color: #18b65a;

    box-shadow:
        0 0 0 3px rgba(24,182,90,0.08);
}


.register-full-width {
    grid-column: 1 / -1;
}


.optional-label {
    margin-left: 6px;

    font-size: 11px;
    font-weight: 600;

    color: #98a2b3;
}


/* TERMS */

.register-terms {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin: 5px 0 24px;

    color: #667085;

    font-size: 13px;
}


.register-terms input {
    margin-top: 3px;
}


.register-terms a {
    color: #159447;
    text-decoration: none;

    font-weight: 700;
}


/* CONTINUE BUTTON */

.register-continue-btn {
    width: 100%;
    height: 52px;

    position: relative;
    overflow: hidden;

    border: none;
    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #159447,
            #18b65a,
            #159447
        );

    color: white;

    font-size: 15px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 8px 22px rgba(24,182,90,0.20);
}


.register-continue-btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -35%;

    width: 35%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.12),
            rgba(255,255,255,0.38),
            rgba(255,255,255,0.12),
            transparent
        );

    transform:
        skewX(-20deg);

    animation:
        silkGreenGlow 2.8s linear infinite;
}


.register-login-text {
    margin: 20px 0 0;

    text-align: center;

    color: #7a8496;

    font-size: 13px;
}


.register-login-text a {
    color: #159447;

    text-decoration: none;

    font-weight: 800;
}


/* MOBILE */

@media(max-width: 720px) {

    .register-card {
        padding: 28px 22px;
    }

    .register-grid {
        grid-template-columns:
            1fr;
    }

    .register-full-width {
        grid-column: auto;
    }

    .register-progress {
        gap: 5px;
    }

    .register-step strong {
        display: none;
    }

}
/* =========================================
   KL LIVING - VERIFY EMAIL PAGE
========================================= */

.verify-page {
    min-height: 100vh;
}

.verify-main {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.verify-card {
    width: 100%;
    max-width: 620px;
    background: #ffffff;
    border-radius: 22px;
    padding: 42px 38px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(24, 182, 90, 0.20);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.08),
        0 0 22px rgba(24, 182, 90, 0.08);
}

.verify-card h1 {
    margin: 22px 0 8px;
    font-size: 32px;
    color: #142033;
}

.verify-subtitle {
    margin: 0 0 28px;
    color: #6f7c91;
    font-size: 15px;
}

.verify-email-display {
    margin: 26px auto 18px;
    padding: 12px 16px;
    background: #f5fbf7;
    border: 1px solid rgba(24, 182, 90, 0.18);
    border-radius: 10px;
    color: #168b49;
    font-weight: 600;
}

.verify-label {
    display: block;
    text-align: left;
    margin-bottom: 10px;
    font-weight: 700;
    color: #142033;
}

.otp-boxes {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}

.otp-input {
    width: 58px;
    height: 58px;
    border: 1px solid #d6dde8;
    border-radius: 12px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    outline: none;
    box-sizing: border-box;
    transition: 0.2s ease;
}

.otp-input:focus {
    border-color: #18b65a;
    box-shadow: 0 0 0 3px rgba(24, 182, 90, 0.10);
}

.verify-resend-text {
    margin-top: 18px;
    color: #6f7c91;
    font-size: 14px;
}

.verify-resend-btn {
    border: none;
    background: none;
    color: #16974d;
    font-weight: 700;
    cursor: pointer;
}

.verify-back-link {
    display: inline-block;
    margin-top: 16px;
    color: #526176;
    text-decoration: none;
    font-size: 14px;
}

.verify-back-link:hover {
    color: #18b65a;
}

.verify-card .login-brand-animation {
    margin: 0 auto;
}

@media (max-width: 600px) {

    .verify-card {
        padding: 32px 20px;
    }

    .otp-boxes {
        gap: 7px;
    }

    .otp-input {
        width: 44px;
        height: 50px;
        font-size: 20px;
    }

}
.phone-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
}

.phone-row select,
.phone-row input {
    width: 100%;
    height: 54px;
    border: 1px solid #d6dde8;
    border-radius: 10px;
    padding: 0 14px;
    box-sizing: border-box;
    font-size: 15px;
    background: #fff;
}

.phone-row select:focus,
.phone-row input:focus {
    outline: none;
    border-color: #18b65a;
    box-shadow: 0 0 0 3px rgba(24, 182, 90, 0.10);
}

@media (max-width: 600px) {
    .phone-row {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   ACCOUNT MENU
========================================= */

.account-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.account-menu-button {
    display: flex;
    align-items: center;
    gap: 10px;

    border: 1px solid #e2e8f0;
    background: #ffffff;

    padding: 7px 10px;
    border-radius: 12px;

    cursor: pointer;
    transition: 0.2s ease;
}

.account-menu-button:hover {
    border-color: #18b65a;
    box-shadow: 0 4px 14px rgba(24, 182, 90, 0.12);
}

.account-avatar {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #18b65a;
    color: #ffffff;

    font-size: 14px;
    font-weight: 700;
}

.account-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    line-height: 1.15;
}

.account-user-info strong {
    font-size: 14px;
    color: #182033;
}

.account-user-info small {
    font-size: 11px;
    color: #7a8497;
}

.account-arrow {
    font-size: 12px;
    color: #667085;
}

.account-dropdown {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    width: 210px;

    display: none;

    background: #ffffff;

    border: 1px solid #e5e9f0;
    border-radius: 14px;

    padding: 8px;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.12);

    z-index: 9999;
}

.account-dropdown a,
.account-logout-btn {
    width: 100%;

    display: block;

    padding: 11px 12px;

    border: none;
    border-radius: 9px;

    background: transparent;

    color: #1c2434;

    font-size: 14px;
    text-align: left;
    text-decoration: none;

    cursor: pointer;
}

.account-dropdown a:hover {
    background: #f3faf6;
    color: #139748;
}

.account-logout-btn {
    margin-top: 5px;

    border-top: 1px solid #edf0f4;

    color: #c0392b;
}

.account-logout-btn:hover {
    background: #fff4f3;
}

@media (max-width: 900px) {

    .account-user-info {
        display: none;
    }

    .account-menu-button {
        padding: 6px;
    }

    .account-dropdown {
        right: 0;
        width: 200px;
    }
}
/* =========================================
   KL LIVING LUXURY AUTH CARD
========================================= */

.login-card.luxury-split-card {
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(24, 182, 90, 0.25);

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.08),
        0 0 22px rgba(24, 182, 90, 0.10);

    border-radius: 18px;
}


/* 1px animated green running stroke */
.login-card.luxury-split-card::before {
    content: "";
    position: absolute;
    inset: -1px;

    border-radius: 19px;
    padding: 1px;

    background:
        conic-gradient(
            from var(--border-angle),
            transparent 0deg,
            transparent 325deg,
            rgba(24,182,90,0.18) 335deg,
            #18b65a 345deg,
            rgba(24,182,90,0.18) 355deg,
            transparent 360deg
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;

    animation:
        luxuryBorderMove 8s linear infinite;
}


/* soft inner green glow */
.login-card.luxury-split-card::after {
    content: "";
    position: absolute;

    width: 160px;
    height: 160px;

    right: -60px;
    top: -60px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(24,182,90,0.10),
            transparent 70%
        );

    pointer-events: none;
}


@property --border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}


@keyframes luxuryBorderMove {
    from {
        --border-angle: 0deg;
    }

    to {
        --border-angle: 360deg;
    }
}
.register-password-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

@media (max-width: 700px) {
    .register-password-row {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   PREMIUM VEHICLE LIST CARD
========================================= */

.vehicle-list-card {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 280px;
    align-items: stretch;

    background: #ffffff;
    border: 1px solid #e7eee9;
    border-radius: 18px;
    overflow: hidden;

    box-shadow:
        0 8px 24px rgba(25, 70, 45, 0.06);

    margin-bottom: 16px;
}


/* IMAGE PANEL */

.vehicle-card-image {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 210px;
    padding: 16px;

    background: #f7fbf8;

    border-right: 1px solid #e1ebe4;
}

.vehicle-card-image img {
    width: 100%;
    height: 190px;

    object-fit: contain;
    display: block;
}


.vehicle-status {
    position: absolute;
    top: 12px;
    left: 12px;

    padding: 7px 11px;

    border-radius: 8px;

    font-size: 12px;
    font-weight: 800;

    z-index: 2;
}

.vehicle-status.for-sale {
    background: #169c4c;
    color: #ffffff;
}


.vehicle-favorite-btn {
    position: absolute;
    top: 12px;
    right: 12px;

    width: 40px;
    height: 40px;

    border: 1px solid #e4e9e6;
    border-radius: 50%;

    background: #ffffff;

    font-size: 23px;
    line-height: 1;

    cursor: pointer;
}


/* DETAILS PANEL */

.vehicle-card-details {
    padding: 22px 24px;
}

.vehicle-price {
    margin-bottom: 4px;

    color: #129448;
    font-size: 28px;
    font-weight: 800;
}

.vehicle-card-details h3 {
    margin: 0 0 8px;

    color: #172238;
    font-size: 20px;
    font-weight: 800;
}

.vehicle-location {
    margin-bottom: 20px;

    color: #69758a;
    font-size: 14px;
}


.vehicle-spec-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(80px, 1fr));

    gap: 0;

    padding-top: 16px;

    border-top: 1px solid #edf1ee;
}

.vehicle-spec-row > div {
    display: flex;
    flex-direction: column;

    padding: 0 14px;

    border-right: 1px solid #edf1ee;
}

.vehicle-spec-row > div:first-child {
    padding-left: 0;
}

.vehicle-spec-row > div:last-child {
    border-right: none;
}

.vehicle-spec-row strong {
    color: #1c283b;
    font-size: 14px;
}

.vehicle-spec-row small {
    margin-top: 3px;

    color: #8791a2;
    font-size: 11px;
}


/* SELLER PANEL */

.vehicle-card-seller {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 18px;

    background: #fbfdfb;

    border-left: 1px solid #e1ebe4;
}


.seller-summary {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 16px;
}

.seller-avatar {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e5f7ec;
    color: #118e44;

    font-size: 18px;
    font-weight: 800;
}

.seller-summary > div:last-child {
    display: flex;
    flex-direction: column;
}

.seller-summary strong {
    color: #172238;
    font-size: 15px;
}

.seller-summary small {
    margin-top: 3px;

    color: #8290a1;
    font-size: 11px;
}


.seller-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 9px;
}

.seller-action {
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    text-decoration: none;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.call-btn {
    background: #119b49;
    color: #ffffff;
}

.whatsapp-btn {
    background: #e4f8eb;
    color: #117f3e;

    border: 1px solid #cdeed8;
}

.share-btn {
    grid-column: 1 / -1;

    background: #ffffff;
    color: #1d2939;

    border: 1px solid #dfe6e2;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .vehicle-list-card {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .vehicle-card-seller {
        grid-column: 1 / -1;

        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        border-left: none;
        border-top: 1px solid #e1ebe4;
    }

    .seller-summary {
        margin-bottom: 0;
    }

    .seller-actions {
        width: 420px;
    }
}


@media (max-width: 760px) {

    .vehicle-list-card {
        grid-template-columns: 1fr;
    }

    .vehicle-card-image {
        border-right: none;
        border-bottom: 1px solid #e1ebe4;
    }

    .vehicle-card-seller {
        grid-column: auto;

        flex-direction: column;
        align-items: stretch;
    }

    .seller-summary {
        margin-bottom: 14px;
    }

    .seller-actions {
        width: 100%;
    }

    .vehicle-spec-row {
        grid-template-columns: 1fr 1fr;
        row-gap: 14px;
    }

    .vehicle-spec-row > div {
        border-right: none;
        padding: 0;
    }
}
/* =========================================
   COMPACT VEHICLE LIST CARD
========================================= */

.vehicle-list-card {
    grid-template-columns: 260px minmax(0, 1fr) 250px;
    min-height: 170px;
    margin-bottom: 12px;
    border-radius: 16px;
}

.vehicle-card-image {
    min-height: 170px;
    padding: 12px;
}

.vehicle-card-image img {
    height: 150px;
    max-height: 150px;
}

.vehicle-card-details {
    padding: 16px 20px;
}

.vehicle-price {
    font-size: 24px;
}

.vehicle-card-details h3 {
    font-size: 18px;
    margin-bottom: 6px;
}

.vehicle-location {
    margin-bottom: 14px;
}

.vehicle-spec-row {
    padding-top: 12px;
}

.vehicle-card-seller {
    padding: 14px;
}

.seller-avatar {
    width: 40px;
    height: 40px;
}

.seller-summary {
    margin-bottom: 12px;
}

.seller-action {
    min-height: 38px;
}
.vehicle-card-image {
    position: relative;
    width: 220px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fbf9;
    border-right: 1px solid #eef2ef;
    padding: 16px;
}

.vehicle-photo-frame {
    width: 170px;
    height: 125px;
    background: #ffffff;
    border: 1px solid #e7ece8;
    border-radius: 14px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.vehicle-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.photo-count-badge {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: rgba(17, 24, 39, 0.78);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
}

.photo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
}

.photo-nav.prev {
    left: 8px;
}

.photo-nav.next {
    right: 8px;
}

.sale-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #16a34a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
}

.fav-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}
/* =========================================
   KL LIVING - VEHICLE LIST CARD PREMIUM UI
========================================= */

.vehicle-list-card {
    display: grid;
    grid-template-columns: 210px 1fr 290px;
    align-items: stretch;
    background: #ffffff;
    border: 1px solid #e8eeea;
    border-radius: 22px;
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.05);
}

.vehicle-card-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 10px 18px 18px;
    background: #ffffff;
}

.vehicle-photo-frame {
    width: 170px;
    height: 145px;
    background: #f8fbf9;
    border: 1px solid #edf2ef;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vehicle-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.sale-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: #16a34a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 12px;
    letter-spacing: 0.3px;
}

.vehicle-card-details {
    padding: 20px 22px;
    border-left: 1px solid #eef3f0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vehicle-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.vehicle-price {
    font-size: 24px;
    font-weight: 800;
    color: #16a34a;
}

.fav-btn {
    width: 48px;
    height: 48px;
    border: 1px solid #e2e8e4;
    background: #ffffff;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
}

.vehicle-card-details h3 {
    font-size: 18px;
    font-weight: 800;
    color: #152238;
    margin: 0 0 10px 0;
}

.vehicle-location {
    font-size: 15px;
    color: #5f6f86;
    margin-bottom: 18px;
}

.vehicle-spec-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid #edf2ef;
    padding-top: 16px;
}

.vehicle-spec {
    padding-right: 10px;
    border-right: 1px solid #edf2ef;
}

.vehicle-spec:last-child {
    border-right: none;
}

.vehicle-spec strong {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #18263c;
    margin-bottom: 4px;
}

.vehicle-spec span {
    font-size: 14px;
    color: #7a8799;
}

.vehicle-card-seller {
    border-left: 1px solid #eef3f0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    background: #ffffff;
}

.seller-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.seller-avatar {
    width: 58px;
    height: 58px;
    background: #eef7f0;
    color: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
}

.seller-info strong {
    display: block;
    font-size: 17px;
    color: #16243a;
    margin-bottom: 4px;
}

.seller-info span {
    font-size: 14px;
    color: #66758a;
}

.seller-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.seller-call-btn,
.seller-whatsapp-btn,
.seller-share-btn {
    border: none;
    border-radius: 14px;
    height: 48px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.seller-call-btn {
    background: #16a34a;
    color: #ffffff;
}

.seller-whatsapp-btn {
    background: #dcfce7;
    color: #15803d;
}

.seller-share-btn {
    width: 100%;
    background: #ffffff;
    color: #334155;
    border: 1px solid #d9e3dc;
}

/* SOLD STATE */
.vehicle-list-card.sold-card {
    opacity: 0.78;
}

.vehicle-list-card.sold-card .sale-badge {
    background: #ef4444;
}

.vehicle-list-card.sold-card .vehicle-price {
    color: #6b7280;
}
.vehicle-list-card {
    grid-template-columns: 240px 1fr 290px;
}

.vehicle-card-image {
    min-height: 180px;
    padding: 12px;
}

.vehicle-photo-frame {
    width: 380px;
    height: 160px;
}

.vehicle-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}
/* =========================================
   VEHICLE CARD HOVER EFFECT
========================================= */

.vehicle-list-card {
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.vehicle-list-card:hover {
    transform: scale(1.015);
    border-color: rgba(22, 163, 74, 0.22);

    box-shadow:
        0 14px 34px rgba(15, 23, 42, 0.10),
        0 0 0 1px rgba(22, 163, 74, 0.05);
}

.vehicle-list-card:active {
    transform: scale(1.005);
}

/* ==================================================
   KL LIVING PREMIUM HOME — FINAL DESIGN
   Scoped to .home-premium so the existing inner pages stay unchanged.
================================================== */
:root { --kl-green:#087b4b; --kl-deep:#004c38; --kl-navy:#071b61; --kl-gold:#d4a526; --kl-mint:#effcf8; }
.home-premium { background:#f8fffd; color:#111a35; overflow-x:hidden; }
.home-premium a { -webkit-tap-highlight-color:transparent; }
.premium-header { height:72px; background:rgba(255,255,255,.96); border-bottom:1px solid #e7f0ed; position:sticky; top:0; z-index:1000; backdrop-filter:blur(18px); box-shadow:0 4px 24px rgba(0,72,54,.05); }
.premium-header-inner { width:min(1420px,92%); height:100%; margin:auto; display:flex; align-items:center; gap:38px; }
.premium-logo { position:relative; width:142px; height:58px; display:flex; align-items:center; overflow:visible; }
.premium-logo img { width:100%; height:auto; object-fit:contain; transform:translateY(1px); animation:logoArrival 1s cubic-bezier(.2,.85,.25,1) both; }
.premium-logo::after { content:""; position:absolute; left:-12%; top:7px; width:28%; height:45px; background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent); transform:skewX(-20deg); animation:logoShine 5.5s 1.6s ease-in-out infinite; pointer-events:none; }
.premium-logo:hover img { animation:logoFocus .75s ease both; }
@keyframes logoArrival { from{opacity:0;transform:translateY(-16px) scale(.92)} 65%{transform:translateY(3px) scale(1.03)} to{opacity:1;transform:translateY(1px) scale(1)} }
@keyframes logoShine { 0%,68%{left:-18%;opacity:0} 74%{opacity:.95} 85%,100%{left:108%;opacity:0} }
@keyframes logoFocus { 0%,100%{transform:translateY(1px) scale(1)} 40%{transform:translateY(-2px) scale(1.045)} 65%{transform:translateY(1px) scale(.99)} }
.premium-weather { min-width:258px; height:48px; padding:0 20px; border-radius:14px; background:linear-gradient(135deg,#f0fffb,#eff8ff); display:flex; align-items:center; justify-content:center; gap:13px; color:#18479e; box-shadow:inset 0 0 0 1px rgba(0,135,89,.05); }
.premium-weather strong { font-size:21px; color:#071b61; }.weather-sun { font-size:29px; color:#ff9a00; filter:drop-shadow(0 2px 4px #ffbd5a); }.weather-divider{width:1px;height:25px;background:#c9e1df}
.premium-nav { margin-left:auto; display:flex; align-items:center; gap:30px; }.premium-nav>a:not(.premium-post-btn){color:#071452;font-size:15px;font-weight:700;position:relative}
.premium-nav>a:not(.premium-post-btn)::after{content:"";position:absolute;left:50%;right:50%;bottom:-9px;height:2px;background:var(--kl-green);transition:.28s ease}.premium-nav>a:hover::after,.premium-nav>a.active::after{left:0;right:0}.premium-nav>a:hover{color:var(--kl-green)}
.premium-post-btn { background:linear-gradient(135deg,#078b54,#006c43); color:white!important; padding:12px 21px; border-radius:10px; box-shadow:0 8px 18px rgba(0,119,73,.18); transition:.25s ease; }.premium-post-btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,119,73,.25)}
.premium-login-btn { min-width:84px; height:42px; border:1px solid #cbdaf2; border-radius:9px; background:white; color:#071452; font-weight:700; cursor:pointer; transition:.25s ease; }.premium-login-btn:hover{border-color:var(--kl-green);color:var(--kl-green);box-shadow:0 5px 16px rgba(0,84,55,.1)}
.mobile-nav-toggle { display:none; border:0; background:transparent; color:var(--kl-deep); font-size:25px; cursor:pointer; }

.premium-search-section { padding:9px 4% 8px; background:linear-gradient(90deg,#edfffb,#f6fbff,#edfffb); }
.premium-search { width:min(940px,100%); margin:auto; height:51px; display:grid; grid-template-columns:2fr 1fr 1.1fr 145px; border:1px solid #bcd6fb; border-radius:12px; background:white; box-shadow:0 7px 22px rgba(16,68,105,.07); overflow:hidden; }
.premium-search label { display:flex; align-items:center; gap:10px; min-width:0; position:relative; padding:0 17px; }.premium-search label+label::before{content:"";position:absolute;left:0;height:28px;width:1px;background:#d7e2ef}
.premium-search label>span { font-size:22px; color:#061d72; }.premium-search input,.premium-search select{width:100%;border:0;outline:0;background:transparent;color:#14419a;font-size:14px}.premium-search select{cursor:pointer}.premium-search button{margin:4px;border:0;border-radius:9px;background:linear-gradient(135deg,#078c55,#006841);color:white;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 6px 14px rgba(0,103,65,.2);transition:.25s ease}.premium-search button:hover{filter:brightness(1.08);transform:translateY(-1px)}

.home-premium .premium-hero { width:calc(100% - 44px); max-width:1480px; min-height:285px; height:31vw; max-height:360px; margin:0 auto; border-radius:14px; background-position:center; box-shadow:0 13px 36px rgba(6,45,38,.15); isolation:isolate; }
.premium-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,29,25,.68),rgba(1,29,25,.09) 53%,transparent);z-index:-1}.premium-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,31,25,.25));pointer-events:none}
.hero-brand-message{position:absolute;left:8%;top:50%;transform:translateY(-50%);color:white;text-shadow:0 3px 16px rgba(0,0,0,.35);max-width:520px;animation:heroCopyIn .8s .25s both}.hero-brand-message>span{font-weight:700;font-size:12px;letter-spacing:.26em;color:#e9c85c}.hero-brand-message h1{font-size:clamp(28px,3.2vw,52px);line-height:1.04;margin:10px 0 18px;letter-spacing:-.045em}.hero-brand-message a{display:inline-flex;align-items:center;gap:12px;padding:11px 17px;border:1px solid rgba(255,255,255,.45);border-radius:9px;background:rgba(255,255,255,.12);color:white;font-size:13px;font-weight:700;backdrop-filter:blur(9px);transition:.25s ease}.hero-brand-message a:hover{background:white;color:var(--kl-deep);transform:translateY(-2px)}
@keyframes heroCopyIn{from{opacity:0;transform:translate(-25px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
.home-premium .slider-btn{width:44px;height:44px;border:1.5px solid rgba(255,255,255,.9);background:rgba(0,18,15,.42);font-size:35px;line-height:34px;backdrop-filter:blur(5px);z-index:4;transition:.25s ease}.home-premium .slider-btn:hover{background:white;color:var(--kl-green);transform:translateY(-50%) scale(1.08)}.home-premium .left-btn{left:20px}.home-premium .right-btn{right:20px}
.home-premium .slider-dots{left:28px;bottom:17px;transform:none;gap:8px;z-index:5}.home-premium .dot{appearance:none;width:9px;height:9px;border:0;padding:0;border-radius:50%;background:white;opacity:.95;cursor:pointer;transition:.3s ease}.home-premium .dot.active{width:24px;border-radius:8px;background:#21ce75}.home-premium .place-name{right:20px;bottom:14px;background:rgba(0,34,27,.58);backdrop-filter:blur(6px);font-size:11px;padding:7px 12px;border-radius:8px;color:white}

.premium-categories { width:min(1370px,92%); margin:-17px auto 10px; position:relative; z-index:10; }.category-grid{display:grid;gap:11px}.category-grid-primary{grid-template-columns:repeat(6,1fr)}.category-grid-secondary{grid-template-columns:repeat(3,220px);justify-content:center;margin-top:9px}
.premium-category-card { --mouse-x:50%;--mouse-y:50%; min-width:0; height:150px; position:relative; padding:7px 8px 8px; border-radius:11px; overflow:hidden; text-align:center; background:linear-gradient(145deg,#fff,#fbfffe); border:1px solid #d9e5e3; box-shadow:0 8px 25px rgba(15,58,49,.08); color:var(--kl-navy); isolation:isolate; transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease; }
.premium-category-card::before{content:"";position:absolute;inset:-2px;z-index:-2;background:conic-gradient(from 0deg at var(--mouse-x) var(--mouse-y),transparent 0 20%,#0bc677 28%,#e1bf4b 34%,transparent 44% 100%);opacity:0;transition:opacity .25s ease;animation:premiumBorder 2.8s linear infinite}.premium-category-card::after{content:"";position:absolute;inset:1px;border-radius:9px;background:linear-gradient(145deg,#fff,#fafffd);z-index:-1}
@keyframes premiumBorder{to{transform:rotate(360deg)}}
.premium-category-card:hover,.premium-category-card:focus-visible{transform:translateY(-8px) scale(1.025);border-color:transparent;box-shadow:0 20px 38px rgba(0,84,58,.18),0 0 0 1px rgba(213,174,40,.18)}.premium-category-card:hover::before,.premium-category-card:focus-visible::before{opacity:1}.premium-category-card:hover .category-art img{transform:scale(1.09) translateY(-3px);filter:drop-shadow(0 9px 8px rgba(0,45,35,.17)) saturate(1.08)}
.category-art{height:91px;display:flex;align-items:center;justify-content:center;overflow:hidden}.category-art img{width:100%;height:100%;object-fit:contain;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .4s ease;filter:drop-shadow(0 5px 5px rgba(0,45,35,.08))}.premium-category-card h3{font-size:15px;line-height:1.15;margin:1px 0 1px;font-weight:800;color:#07155d;letter-spacing:-.02em;white-space:nowrap}.premium-category-card p{font-size:12px;color:#245ce7;line-height:1.2}.featured-category{border-color:#d6b730;box-shadow:0 10px 30px rgba(207,169,31,.15)}
.compact-category{height:119px;padding-top:5px}.compact-category .category-art{height:66px}.compact-category h3{font-size:14px}.compact-category p{font-size:11px}

.app-promo{width:calc(100% - 44px);max-width:1480px;height:238px;margin:8px auto 0;position:relative;display:grid;grid-template-columns:34% 49% 17%;align-items:center;border-radius:18px 18px 0 0;overflow:hidden;background:radial-gradient(circle at 55% -20%,#fff 0,transparent 45%),linear-gradient(110deg,#dbf7ef,#eefdfa 55%,#d7f4ec);box-shadow:inset 0 1px 0 white}.app-promo::before,.app-promo::after{content:"";position:absolute;border-radius:50%;border:42px solid rgba(255,255,255,.28);width:200px;height:200px;left:-110px;bottom:-150px}.app-promo::after{left:auto;right:-100px;bottom:-190px;border-color:rgba(0,133,84,.2);width:270px;height:270px}
.phone-stage{height:100%;position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}.phone-stage img{height:310px;width:auto;margin-top:12px;filter:drop-shadow(0 14px 16px rgba(0,48,36,.22));animation:phoneFloat 4.2s ease-in-out infinite}@keyframes phoneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.app-copy{position:relative;z-index:2}.app-eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:.19em;color:#bf9217;margin-bottom:4px}.app-copy h2{font-size:clamp(27px,3vw,42px);line-height:1.08;color:#005840;margin:0 0 8px;letter-spacing:-.04em}.app-copy h2::after{content:"";display:block;width:80px;height:3px;border-radius:3px;background:linear-gradient(90deg,#d5a723,var(--kl-green));margin-top:9px}.app-copy p{color:#56605d;font-size:14px}.app-copy .app-lead{font-size:18px;font-weight:700;color:#46514e;margin:0 0 3px}.store-buttons{display:flex;gap:16px;margin-top:15px}.store-buttons a{width:190px;height:55px;padding:7px 14px;border-radius:9px;background:#070707;color:white;display:flex;flex-direction:column;justify-content:center;box-shadow:0 7px 18px rgba(0,0,0,.15);transition:.25s ease}.store-buttons a:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.22)}.store-buttons small{font-size:9px;line-height:1}.store-buttons strong{font-size:19px;line-height:1.25}
.app-discover{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;color:#165541}.app-discover img{width:76px;height:56px;object-fit:contain;filter:sepia(1) saturate(5) hue-rotate(350deg);animation:binocularLook 5s ease-in-out infinite;transform-origin:center}@keyframes binocularLook{0%,70%,100%{transform:translateX(0) rotate(0)}76%{transform:translateX(-7px) rotate(-3deg)}84%{transform:translateX(6px) rotate(3deg)}92%{transform:translateX(0) rotate(0)}}.app-discover strong{font-size:16px;line-height:1.2}.app-discover span{width:45px;height:2px;background:#d3a51d;margin-top:10px}
.silver-pattern{height:42px;background-color:#fbfdff;background-image:url("images/app/KL-Living-Silver-Pattern-Border.webp");background-repeat:repeat-x;background-position:center bottom;background-size:auto 42px;opacity:.9}

.premium-footer{background:linear-gradient(120deg,#075b40,#006947 55%,#014b39);color:white;padding:18px 5% 0}.footer-grid{max-width:1370px;margin:auto;display:grid;grid-template-columns:1.35fr 1fr 1.1fr;gap:65px}.footer-grid>div{display:flex;flex-direction:column;align-items:flex-start}.footer-grid h3{font-size:14px;width:100%;padding-bottom:5px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.55)}.footer-grid p,.footer-grid a,.footer-grid span,.footer-grid strong{font-size:11px;line-height:1.55;color:white}.footer-grid a:hover{color:#f3d267}.footer-bottom{max-width:1370px;margin:11px auto 0;padding:10px 0;border-top:1px solid rgba(255,255,255,.55);display:flex;justify-content:space-between;font-size:10px}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:1150px){.premium-header-inner{gap:20px}.premium-weather{min-width:auto;padding:0 13px}.premium-nav{gap:17px}.category-grid-primary{grid-template-columns:repeat(3,1fr)}.premium-categories{margin-top:10px}.category-grid-secondary{grid-template-columns:repeat(3,1fr)}.premium-category-card{height:155px}.compact-category{height:130px}.app-promo{grid-template-columns:32% 53% 15%}.app-discover{display:none}}
@media (max-width:820px){.premium-header{height:64px}.premium-logo{width:118px}.premium-weather{display:none}.mobile-nav-toggle{display:block;margin-left:auto}.premium-nav{position:absolute;top:64px;left:0;right:0;padding:18px;background:white;display:none;flex-direction:column;align-items:stretch;gap:8px;box-shadow:0 18px 30px rgba(0,40,30,.15)}.premium-nav.open{display:flex}.premium-nav>a{padding:10px}.premium-post-btn{text-align:center}.premium-search-section{padding:8px 3%}.premium-search{height:auto;grid-template-columns:1fr 1fr}.search-keyword{grid-column:1/-1;height:47px;border-bottom:1px solid #e1e9f0}.premium-search label{height:44px}.location-select{border-left:1px solid #e1e9f0}.premium-search label+label::before{display:none}.premium-search button{grid-column:1/-1;height:42px;margin:5px}.home-premium .premium-hero{width:94%;height:340px}.hero-brand-message{left:12%}.category-grid-primary{grid-template-columns:repeat(2,1fr)}.category-grid-secondary{grid-template-columns:repeat(2,1fr)}.app-promo{width:94%;height:330px;grid-template-columns:42% 58%;padding-right:20px}.phone-stage img{height:310px}.app-copy .app-lead{font-size:15px}.store-buttons{flex-direction:column;gap:7px}.store-buttons a{width:170px;height:48px}.footer-grid{grid-template-columns:1fr;gap:18px}.footer-bottom{gap:10px;flex-direction:column;text-align:center}}
@media (max-width:520px){.home-premium .premium-hero{min-height:290px;height:290px}.hero-brand-message h1{font-size:31px}.home-premium .slider-btn{width:38px;height:38px}.category-grid-primary,.category-grid-secondary{grid-template-columns:1fr 1fr;gap:8px}.premium-categories{width:94%}.premium-category-card,.compact-category{height:135px}.premium-category-card h3,.compact-category h3{font-size:12px;white-space:normal}.category-art,.compact-category .category-art{height:78px}.premium-category-card p{font-size:10px}.category-grid-secondary .premium-category-card:last-child{grid-column:1/-1;width:50%;justify-self:center}.app-promo{height:420px;display:flex;align-items:flex-start;padding:24px 20px}.phone-stage{position:absolute;right:-18px;bottom:0;width:48%;height:255px}.phone-stage img{height:270px}.app-copy{width:100%}.app-copy h2{font-size:28px}.app-copy .app-lead{max-width:90%;font-size:14px}.app-copy>p:not(.app-lead){max-width:75%}.store-buttons{margin-top:18px}.store-buttons a{width:150px;height:45px}.store-buttons strong{font-size:15px}.silver-pattern{height:34px}.premium-footer{padding-left:7%;padding-right:7%}}
@media (prefers-reduced-motion:reduce){.premium-logo img,.premium-logo::after,.phone-stage img,.app-discover img,.premium-category-card::before{animation:none!important}.premium-category-card,.category-art img,.slider-btn{transition:none!important}}

/* ==================================================
   KL LIVING HOME — FINAL SPACING & INTERACTION PASS
   Matches the clean Post Ad card treatment.
================================================== */
.premium-logo .premium-logo-wordmark {
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: translateY(1px);
    animation: logoArrival 1s cubic-bezier(.2,.85,.25,1) both;
}
.premium-logo .premium-logo-binocular {
    position: absolute;
    width: 29px;
    height: auto;
    top: 7px;
    left: 43%;
    z-index: 2;
    transform-origin: center;
    animation: binocularStare 5.2s ease-in-out infinite;
}
.premium-logo:hover .premium-logo-wordmark { animation: logoFocus .75s ease both; }
.premium-logo:hover .premium-logo-binocular { animation: binocularStare 5.2s ease-in-out infinite; }

.home-premium .premium-hero {
    min-height: 390px;
    height: 38vw;
    max-height: 520px;
}

.premium-categories {
    margin: 34px auto 54px;
}
.category-grid { gap: 18px; }
.category-grid-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc(50% - 9px);
    margin: 18px auto 0;
}
.premium-category-card,
.compact-category {
    height: 170px;
    padding: 10px 10px 12px;
    border: 1px solid #e1e5ea;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15,58,49,.07);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.premium-category-card::before,
.premium-category-card::after { display: none; }
.premium-category-card:hover,
.premium-category-card:focus-visible {
    transform: translateY(-4px);
    border-color: #159447;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.category-art,
.compact-category .category-art { height: 103px; }
.premium-category-card h3,
.compact-category h3 { font-size: 15px; margin: 3px 0 2px; }
.premium-category-card p,
.compact-category p { font-size: 12px; }
.featured-category {
    border-color: #e1e5ea;
    box-shadow: 0 8px 22px rgba(15,58,49,.07);
}

.app-promo {
    height: 350px;
    margin-top: 0;
}
.phone-stage img { height: 410px; margin-top: 20px; }
.app-copy h2 { font-size: clamp(30px,3.2vw,46px); margin-bottom: 12px; }
.app-copy p { font-size: 15px; }
.app-copy .app-lead { font-size: 19px; margin-bottom: 5px; }
.store-buttons { align-items: center; margin-top: 20px; }
.store-buttons a {
    width: 190px;
    height: 57px;
    padding: 0;
    display: block;
    overflow: hidden;
    background: transparent;
}
.store-buttons img { display: block; width: 100%; height: 100%; object-fit: contain; }

.premium-footer { padding: 42px 5% 0; }
.footer-grid h3 { font-size: 16px; padding-bottom: 9px; margin-bottom: 10px; }
.footer-grid p,
.footer-grid a,
.footer-grid span,
.footer-grid strong { font-size: 13px; line-height: 1.75; }
.footer-bottom { margin-top: 28px; padding: 18px 0; font-size: 12px; }

@media (max-width:1150px) {
    .category-grid-secondary { width: 100%; }
    .premium-category-card,
    .compact-category { height: 170px; }
}
@media (max-width:820px) {
    .home-premium .premium-hero { min-height: 340px; height: 340px; }
    .app-promo { height: 390px; }
    .phone-stage img { height: 355px; }
}
@media (max-width:520px) {
    .home-premium .premium-hero { min-height: 310px; height: 310px; }
    .premium-categories { margin-top: 24px; margin-bottom: 38px; }
    .premium-category-card,
    .compact-category { height: 145px; }
    .category-art,
    .compact-category .category-art { height: 84px; }
    .app-promo { height: 460px; }
    .store-buttons a { width: 158px; height: 48px; }
}
@media (prefers-reduced-motion:reduce) {
    .premium-logo .premium-logo-binocular { animation: none !important; }
}

/* ==================================================
   KL LIVING — APPROVED LIGHT / DARK EXPERIENCE
================================================== */
.premium-search-row {
    width: min(1180px, 100%);
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    align-items: center;
    gap: 18px;
}
.premium-search-row .premium-search { width: 100%; }
.theme-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.theme-switch {
    width: 82px;
    height: 38px;
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 1px solid #a9c9c1;
    border-radius: 999px;
    background: #9fb8b5;
    cursor: pointer;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.16), 0 3px 10px rgba(0,80,57,.08);
    transition: background .3s ease, border-color .3s ease;
}
.theme-icon { width: 34px; position: relative; z-index: 2; font-size: 21px; line-height: 1; text-align: center; transition: color .3s ease; }
.theme-icon.sun { color: #f2a900; }
.theme-icon.moon { color: #fff; font-size: 24px; }
.theme-thumb {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #16a66b;
    box-shadow: 0 2px 7px rgba(0,0,0,.18);
    transition: transform .32s cubic-bezier(.2,.8,.2,1), background .3s ease;
}
.theme-switch[aria-checked="true"] { background: #087b4b; border-color: #18b873; }
.theme-switch[aria-checked="true"] .theme-thumb { transform: translateX(43px); background: #f5f8f8; }
.theme-label { color: #29564d; font-size: 12px; font-weight: 700; }

.digital-eyebrow {
    min-width: 246px;
    min-height: 37px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(230,190,61,.76);
    border-radius: 7px;
    background: rgba(0,35,33,.25);
    box-shadow: inset 0 0 12px rgba(236,191,47,.08), 0 0 12px rgba(231,180,34,.08);
    font-family: "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    white-space: pre;
    text-shadow: 0 0 9px rgba(255,205,70,.4);
    overflow: hidden;
    position: relative;
}
.digital-eyebrow::after {
    content: "";
    position: absolute;
    left: -35%;
    top: 0;
    width: 24%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
    transform: skewX(-22deg);
    animation: digitalSweep 6.8s ease-in-out infinite;
}
.digital-eyebrow.is-shuffling { filter: brightness(1.14); }
@keyframes digitalSweep { 0%,72%{left:-35%;opacity:0} 76%{opacity:1} 88%,100%{left:118%;opacity:0} }

.app-brand-animation {
    position: relative;
    width: 132px;
    margin-bottom: 3px;
}
.app-brand-wordmark { display: block; width: 100%; height: auto; filter: none !important; animation: none !important; }
.app-brand-binocular {
    position: absolute;
    width: 27px !important;
    height: auto !important;
    top: 14px;
    left: 43%;
    filter: none !important;
    transform-origin: center;
    animation: binocularStare 5.2s ease-in-out infinite !important;
}

/* Approved medium hero height. */
.home-premium .premium-hero { min-height: 320px; height: 32vw; max-height: 400px; }

/* Premium graphite dark mode. */
.home-premium,
.premium-header,
.premium-search-section,
.premium-search,
.premium-category-card,
.app-promo,
.silver-pattern,
.premium-login-btn,
.premium-nav { transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.home-premium.dark-theme { background: #171b1e; color: #f3f6f7; }
.dark-theme .premium-header { background: rgba(30,35,39,.97); border-color: #343c42; box-shadow: 0 4px 24px rgba(0,0,0,.24); }
.dark-theme .premium-weather { background: linear-gradient(135deg,#242b31,#20262c); color: #e4e8eb; box-shadow: inset 0 0 0 1px #3b454d; }
.dark-theme .premium-weather strong,
.dark-theme .premium-nav>a:not(.premium-post-btn) { color: #f4f7f8; }
.dark-theme .weather-divider { background: #56616a; }
.dark-theme .premium-login-btn { background: #20262b; color: #f5f7f8; border-color: #566675; }
.dark-theme .mobile-nav-toggle { color: #f4f7f8; }
.dark-theme .premium-search-section { background: linear-gradient(90deg,#161a1d,#1d2327,#161a1d); }
.dark-theme .premium-search { background: #242a30; border-color: #4a5965; box-shadow: 0 7px 22px rgba(0,0,0,.24); }
.dark-theme .premium-search input,
.dark-theme .premium-search select,
.dark-theme .premium-search label>span { color: #edf2f5; }
.dark-theme .premium-search input::placeholder { color: #aeb8bf; }
.dark-theme .premium-search label+label::before { background: #52606a; }
.dark-theme .theme-label { color: #e7ecee; }
.dark-theme .premium-category-card { background: #252b30; border-color: #414b53; box-shadow: 0 8px 22px rgba(0,0,0,.24); }
.dark-theme .premium-category-card:hover,
.dark-theme .premium-category-card:focus-visible { border-color: #25c880; box-shadow: 0 10px 26px rgba(0,0,0,.32); }
.dark-theme .premium-category-card h3 { color: #f5f7f8; }
.dark-theme .premium-category-card p { color: #aebbc4; }
.dark-theme .app-promo {
    background: radial-gradient(circle at 55% -20%,#343b40 0,transparent 47%),linear-gradient(110deg,#242b2f,#2b3237 55%,#20262a);
    box-shadow: inset 0 1px 0 #434b50;
}
.dark-theme .app-copy h2,
.dark-theme .app-discover { color: #f4f7f8; }
.dark-theme .app-copy p,
.dark-theme .app-copy .app-lead { color: #c6ced2; }
.dark-theme .silver-pattern { background-color: #1a1f22; opacity: .38; }
.dark-theme .premium-footer { background: linear-gradient(120deg,#153d32,#10513c 55%,#102f28); }

/* Vehicle page refresh: preserve the original search and listing card dimensions. */
.vehicle-hero { background: #e9f5f1; isolation: isolate; }
.vehicle-hero-slide { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; pointer-events: none; }
.vehicle-hero-slide.is-active { opacity: 1; }
.vehicle-hero-slide.is-entering { opacity: 1; z-index: 1; animation: vehicleFluidReveal 1.05s cubic-bezier(.35,.02,.17,1) both; }
@keyframes vehicleFluidReveal {
  0% { clip-path: ellipse(0% 12% at 105% 55%); }
  38% { clip-path: ellipse(38% 88% at 78% 48%); }
  70% { clip-path: ellipse(79% 112% at 61% 54%); }
  100% { clip-path: ellipse(150% 150% at 50% 50%); }
}
.vehicle-hero-overlay { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 30px max(3%, calc((100% - 1420px)/2)); background: linear-gradient(90deg,rgba(255,255,255,.78),rgba(255,255,255,.22) 47%,transparent 72%); }
.vehicle-hero-content { max-width: 590px; }
.vehicle-hero-content h1 { color: #084d38; }
.vehicle-hero-arrow { width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(11,44,38,.55); color: white; font-size: 30px; line-height: 1; cursor: pointer; }
.vehicle-hero-arrow:hover,.vehicle-hero-arrow:focus-visible { background: #007d51; }
.vehicle-hero-dots { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 9px; }
.vehicle-hero-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.vehicle-hero-dots button.active { background: #087a50; }
.vehicle-search-panel { border: 1px solid #bfcbd0; box-shadow: 0 18px 40px rgba(0,0,0,.08),0 0 0 3px rgba(199,207,211,.27),0 0 22px rgba(24,182,90,.12); }
.vehicle-search-panel::before { background: linear-gradient(90deg,transparent,#ced8dc,#f9fcff,#b5c1c5,transparent); }
.vehicle-filter-panel { border: 1px solid #bfcbd0; box-shadow: 0 0 0 3px rgba(199,207,211,.22),0 12px 25px rgba(14,43,37,.05); }
.vehicle-type-card { box-sizing: border-box; border: 1px solid #dce5e8; transition: border-color .2s,box-shadow .2s,transform .2s; }
.vehicle-type-card:hover,.vehicle-type-card:focus-visible,.vehicle-type-card.is-selected { border-color: #0b9f55; box-shadow: 0 8px 22px rgba(8,93,61,.10),0 0 0 1px rgba(11,159,85,.13); }
.vehicle-type-card:focus-visible { outline: 2px solid #0b9f55; outline-offset: 2px; }
body:has(.vehicle-hero) .silver-pattern { margin-top: 42px; }
@media (max-width: 720px) {
  .vehicle-hero { height: 290px; min-height: 290px; }
  .vehicle-hero-overlay { padding: 18px 3%; }
  .vehicle-hero-content { max-width: 75%; }
  .vehicle-hero-content h1 { font-size: 27px; }
  .vehicle-hero-arrow { width: 34px; height: 34px; font-size: 24px; }
  .vehicle-type-card { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vehicle-hero-slide.is-entering { animation: none; } }

@media (max-width:820px) {
    .premium-search-row { grid-template-columns: 1fr; gap: 8px; }
    .theme-control { flex-direction: row; justify-content: center; padding: 4px 0; }
    .dark-theme .premium-nav { background: #20262b; }
    .home-premium .premium-hero { min-height: 320px; height: 320px; }
}
@media (max-width:520px) {
    .home-premium .premium-hero { min-height: 290px; height: 290px; }
    .digital-eyebrow { min-width: 205px; min-height: 32px; padding: 8px 11px; font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) {
    .digital-eyebrow::after,
    .app-brand-binocular { animation: none !important; }
}

/* First-screen desktop layout: all nine homepage categories remain visible. */
@media (min-width: 1151px) {
  .home-premium .premium-hero { min-height: 230px; height: min(27vh, 255px); max-height: 255px; }
  .premium-categories { margin: 16px auto 25px; }
  .premium-categories .category-grid { gap: 10px; }
  .premium-categories .category-grid-secondary { margin-top: 10px; }
  .premium-categories .premium-category-card { height: 132px; padding: 6px 8px; }
  .premium-categories .compact-category { height: 112px; }
  .premium-categories .category-art { height: 78px; }
  .premium-categories .compact-category .category-art { height: 60px; }
  .premium-categories .premium-category-card h3 { font-size: 14px; margin: 2px 0; }
  .premium-categories .premium-category-card p { font-size: 11px; }

  .vehicle-hero { height: 235px; min-height: 235px; }
  .vehicle-search-panel { margin-top: -26px; margin-bottom: 16px; padding: 16px 22px; }
  .vehicle-search-grid { gap: 8px 16px; }
  .vehicle-search-panel .vehicle-search-field select,
  .vehicle-search-panel .vehicle-search-field input { height: 44px; }
  .vehicle-search-panel .vehicle-search-main-btn { min-height: 44px; margin-top: 10px; }
  .vehicle-type-section { margin-top: 12px; }
  .vehicle-type-section .section-heading { margin-bottom: 8px; }
  .vehicle-type-grid { gap: 10px; }
  .vehicle-type-grid .vehicle-type-card { width: 100%; min-height: 92px; }
  .vehicle-type-grid .vehicle-type-icon { font-size: 29px; margin-bottom: 2px; }
}

/* Light mode category links use the KL Living palette instead of browser blue. */
.home-premium:not(.dark-theme) .premium-category-card,
.home-premium:not(.dark-theme) .premium-category-card h3,
.home-premium:not(.dark-theme) .premium-category-card p {
  color: #123d34;
  text-decoration: none;
}
.home-premium:not(.dark-theme) .premium-category-card:hover h3,
.home-premium:not(.dark-theme) .premium-category-card:hover p,
.home-premium:not(.dark-theme) .premium-category-card:focus-visible h3,
.home-premium:not(.dark-theme) .premium-category-card:focus-visible p { color: #087e50; }

/* Match the vehicle banner frame and header to the homepage. */
.vehicle-page .vehicle-hero {
  width: calc(100% - 44px);
  max-width: 1480px;
  margin: 12px auto 0;
  border-radius: 14px;
  box-shadow: 0 13px 36px rgba(6,45,38,.15);
}
.vehicle-page .vehicle-hero-overlay {
  display: block;
  padding: 0;
  background: linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.48) 44%,transparent 73%);
}
.vehicle-page .vehicle-hero-content {
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
  width: min(42%, 570px);
}
.vehicle-page .vehicle-hero-content h1 { line-height: 1.1; margin: 4px 0 9px; }
.vehicle-page .vehicle-hero-text { max-width: 470px; }
.vehicle-page .vehicle-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); }
.vehicle-page .vehicle-prev { left: 22px; }
.vehicle-page .vehicle-next { right: 22px; }
@media (max-width: 720px) {
  .vehicle-page .vehicle-hero { width: 94%; margin-top: 8px; }
  .vehicle-page .vehicle-hero-content { left: 13%; width: 72%; }
  .vehicle-page .vehicle-hero-overlay { background: linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.38) 78%,transparent); }
  .vehicle-page .vehicle-prev { left: 6px; }
  .vehicle-page .vehicle-next { right: 6px; }
}

/* Vehicles: aligned header, warm light palette and contained search. */
.vehicle-page { background: #fcf8ed; color: #20302b; }
.vehicle-page .premium-header { height: 88px; }
.vehicle-page .premium-header-inner { width: min(1710px,94%); }
.vehicle-utility-bar { background:#fffaf0; border-bottom:1px solid #e9dfca; }
.vehicle-utility-inner { width:min(1420px,94%); margin:auto; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.vehicle-utility-title { color:#36564a; font-weight:700; }
.vehicle-page .vehicle-hero { margin-top:16px; }
.vehicle-page .vehicle-search-panel {
  box-sizing: border-box;
  width: calc(100% - 44px);
  max-width: 1480px;
  margin: 20px auto 32px;
  padding: 26px;
  border: 1px solid #dfd6c4;
  border-radius: 20px;
  background: #fffdf8;
  box-shadow: 0 12px 30px rgba(52,53,36,.08);
}
.vehicle-page .vehicle-search-panel::before { display:none; }
.vehicle-page .vehicle-search-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.vehicle-page .vehicle-search-field { min-width:0; }
.vehicle-page .vehicle-search-field select,.vehicle-page .vehicle-search-field input { box-sizing:border-box; width:100%; min-width:0; border-radius:12px; border:1px solid #dbd7cb; background:#fff; }
.vehicle-page .vehicle-search-main-btn { width:100%; border-radius:12px; }
.vehicle-page .vehicle-type-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.vehicle-page .vehicle-type-card { min-width:0; background:#fffdf8; }
.vehicle-category-image { display:block; width:100%; max-width:210px; height:125px; object-fit:contain; margin:0 auto 8px; }
.vehicle-page .vehicle-type-card p { margin:4px 0 0; color:#66726c; font-size:13px; }
.vehicle-filter-panel .filter-dropdown-body select,.vehicle-filter-panel .filter-dropdown-body input { box-sizing:border-box; width:100%; padding:10px; border:1px solid #d9d5c9; border-radius:9px; }
.vehicle-filter-price { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.vehicle-page.dark-theme { background:#1c2022; color:#e8e7dd; }
.vehicle-page.dark-theme .vehicle-utility-bar { background:#242a2d; border-color:#404747; }
.vehicle-page.dark-theme .vehicle-utility-title,.vehicle-page.dark-theme .vehicle-type-card p { color:#d6d8d1; }
.vehicle-page.dark-theme .vehicle-search-panel,.vehicle-page.dark-theme .vehicle-type-card,.vehicle-page.dark-theme .vehicle-filter-panel { background:#2b3032; border-color:#4b5353; color:#f0f0eb; }
.vehicle-page.dark-theme .vehicle-search-field label { color:#e8e7dd; }
.vehicle-page.dark-theme .vehicle-search-field select,.vehicle-page.dark-theme .vehicle-search-field input,.vehicle-page.dark-theme .filter-dropdown-body select,.vehicle-page.dark-theme .filter-dropdown-body input { background:#202629; border-color:#555e5d; color:#f4f4ef; }
@media(max-width:900px){.vehicle-page .vehicle-search-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.vehicle-page .vehicle-type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }}
@media(max-width:600px){.vehicle-page .premium-header { height:64px; }.vehicle-page .vehicle-search-grid { grid-template-columns:1fr; }.vehicle-page .vehicle-type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.vehicle-page .vehicle-search-panel { padding:16px; }.vehicle-utility-inner { min-height:58px; }}

/* Consistent listing photographs and photo viewer. */
.vehicle-page .vehicle-list-card { grid-template-columns:220px minmax(0,1fr) 240px; }
.vehicle-page .vehicle-card-image { box-sizing:border-box; width:100%; min-width:0; min-height:185px; padding:14px; background:#fffdf8; }
.vehicle-page .vehicle-photo-frame { box-sizing:border-box; width:100%; height:155px; padding:0; border:0; border-radius:14px; background:#f5f2eb; overflow:hidden; }
.vehicle-page .vehicle-photo-frame img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.vehicle-page.dark-theme .vehicle-card-image,.vehicle-page.dark-theme .vehicle-list-card { background:#2b3032; border-color:#4b5353; }
.vehicle-photo-modal { position:fixed; inset:0; z-index:3000; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(13,22,25,.75); }
.vehicle-photo-modal.is-open { display:flex; }
.vehicle-photo-dialog { box-sizing:border-box; width:min(980px,96vw); max-height:94vh; padding:16px; border-radius:20px; background:#fffdf8; color:#22312a; box-shadow:0 24px 80px rgba(0,0,0,.35); }
.vehicle-photo-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.vehicle-photo-heading h2 { margin:0; font-size:20px; }
.vehicle-photo-close { border:0; background:transparent; font-size:28px; cursor:pointer; color:inherit; }
.vehicle-photo-stage { display:grid; grid-template-columns:1fr 1fr; gap:12px; height:min(62vh,550px); }
.vehicle-photo-main,.vehicle-photo-detail { width:100%; height:100%; min-width:0; object-fit:contain; border-radius:12px; background:#f0f0ed; }
.vehicle-photo-detail { object-fit:cover; object-position:center; }
.vehicle-photo-hint { margin:10px 0 0; font-size:13px; color:#66726c; }
.vehicle-page.dark-theme .vehicle-photo-dialog { background:#2b3032; color:#f1f1e9; }
.vehicle-page.dark-theme .vehicle-photo-hint { color:#b9c1bc; }
@media(max-width:1050px){.vehicle-page .vehicle-list-card { grid-template-columns:190px minmax(0,1fr); }.vehicle-page .vehicle-card-seller { grid-column:1/-1; }}
@media(max-width:700px){.vehicle-page .vehicle-list-card { grid-template-columns:1fr; }.vehicle-page .vehicle-card-image { width:100%; height:220px; }.vehicle-page .vehicle-photo-frame { height:190px; }.vehicle-photo-stage { grid-template-columns:1fr; height:min(65vh,480px); }.vehicle-photo-detail { display:none; }}
/* KL Living marketplace: warm cream and consistent listing images. */
.vehicle-page, .vehicle-page .vehicle-results-section, .vehicle-page .featured-vehicles-section,
.property-page { background-color:#fcf8ed; background-image:none; }
.vehicle-page .vehicle-results-layout, .vehicle-page .vehicle-results-top,
.vehicle-page .featured-vehicles-section, .property-page .quick-property-section,
.property-page .property-search-section { box-sizing:border-box; width:min(1420px,94%); max-width:none; margin-left:auto; margin-right:auto; }
.property-page .property-search-section { padding:0; margin-top:-55px; }
.property-page .property-hero { box-sizing:border-box; width:min(1420px,94%); margin-left:auto; margin-right:auto; border-radius:20px; overflow:hidden; }
.property-page .property-search-card, .property-page .quick-property-card { background:#fffdf8; border:1px solid #e5dac4; }
.vehicle-page .vehicle-list-card { background:#fffdf8; border-color:#e6dbc5; }
.vehicle-page .vehicle-list-card[hidden], #vehicleEmptyState[hidden], #advancedVehicleFilters[hidden] { display:none!important; }
.vehicle-page .vehicle-card-image { width:100%; height:190px; min-height:190px; padding:12px; }
.vehicle-page .vehicle-photo-frame { width:100%; height:165px; background:#f2ecdf; }
.vehicle-page .vehicle-photo-frame img { width:100%; height:100%; object-fit:contain; }
.vehicle-page .vehicle-filter-panel { background:#fffdf8; border-color:#e6dbc5; }
.vehicle-page .vehicle-toolbar-controls { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.vehicle-page .vehicle-toolbar-controls select, .vehicle-page .vehicle-toolbar-controls button,
.vehicle-page .advanced-field input, .vehicle-page .advanced-field select { padding:10px 12px; border:1px solid #d8cfbd; border-radius:10px; background:#fffdf8; color:#24352d; }
.vehicle-page #advancedFilterToggle { cursor:pointer; font-weight:700; border-color:#18934c; color:#13783f; }
.vehicle-page #advancedVehicleFilters { display:grid; gap:12px; margin:16px 0; padding:16px; border:1px solid #eadfc9; border-radius:12px; background:#faf5e9; }
.vehicle-page .advanced-field { display:grid; gap:5px; font-size:13px; font-weight:700; }
.vehicle-page #vehicleEmptyState { padding:28px; border:1px solid #e6dbc5; border-radius:14px; background:#fffdf8; }
@media(max-width:700px) { .vehicle-page .vehicle-card-image { height:220px; } .vehicle-page .vehicle-photo-frame { height:196px; } }

/* Remove the old animated green wash from the marketplace pages. */
body.vehicle-page, body.property-page { background:#fcf8ed; background-image:none; animation:none; }
body.vehicle-page::before, body.vehicle-page::after,
body.property-page::before, body.property-page::after { content:none; display:none; animation:none; }
.vehicle-page .vehicle-results-section, .vehicle-page .vehicle-results-top,
.vehicle-page .vehicle-results-layout, .vehicle-page .vehicle-results-grid,
.property-page .quick-property-section { background-image:none; }
.vehicle-page .vehicle-list-card { grid-template-columns:260px minmax(0,1fr) 225px; min-height:225px; }
.vehicle-page .vehicle-card-image { height:225px; padding:10px; background:#f6f0e4; }
.vehicle-page .vehicle-photo-frame { height:205px; border-radius:14px; background:#fffaf0; }
.vehicle-page .vehicle-photo-frame img { object-fit:contain; }
.vehicle-page .vehicle-card-details { background:#fffdf8; border-left:1px solid #e9dfca; }
.vehicle-page .vehicle-card-seller { background:#fffdf8; border-left:1px solid #e9dfca; }
.property-page .quick-property-section { padding-left:0; padding-right:0; }
@media(max-width:1050px) { .vehicle-page .vehicle-list-card { grid-template-columns:220px minmax(0,1fr); } }
@media(max-width:700px) { .vehicle-page .vehicle-list-card { grid-template-columns:1fr; } .vehicle-page .vehicle-card-image { height:235px; } .vehicle-page .vehicle-photo-frame { height:215px; } }

/* September marketplace refinements */
body.vehicle-page, body.vehicle-page .vehicle-results-section, body.vehicle-page .featured-vehicles-section,
body.vehicle-page .vehicle-results-layout, body.vehicle-page .vehicle-results-grid { background:#fff; }
.vehicle-page .vehicle-list-card, .vehicle-page .vehicle-card-details, .vehicle-page .vehicle-card-seller,
.vehicle-page .vehicle-card-image, .vehicle-page .vehicle-photo-frame, .vehicle-page .vehicle-filter-panel { background:#fff; }
.vehicle-page .vehicle-list-card { border:1px solid #e3e9e5; box-shadow:0 9px 26px rgba(20,40,32,.06); }
.vehicle-page .vehicle-photo-frame { display:grid; place-items:center; }
.vehicle-page .vehicle-photo-frame img { max-width:100%; max-height:100%; object-fit:contain; }
body.vehicle-page.dark-theme, .vehicle-page.dark-theme .vehicle-results-section,
.vehicle-page.dark-theme .vehicle-list-card, .vehicle-page.dark-theme .vehicle-card-details,
.vehicle-page.dark-theme .vehicle-card-seller, .vehicle-page.dark-theme .vehicle-card-image { background:#242a2d; }
/* Simple guided posting */
.kl-post {max-width:1240px;padding:0 20px;margin:40px auto 75px;font-family:Inter,Arial,sans-serif;color:#22352c}.kl-post-shell{display:grid;grid-template-columns:290px minmax(0,1fr);gap:28px}.kl-post-aside,.kl-post-main{border:1px solid #e1e9e2;border-radius:22px;background:#fff;box-shadow:0 12px 35px rgba(21,54,34,.06)}.kl-post-aside{padding:32px;align-self:start;position:sticky;top:20px}.kl-post-aside img{width:145px;max-width:100%}.kl-post-aside h2{margin:28px 0 8px}.kl-post-aside p,.kl-post-main p{color:#63736b;line-height:1.6}.kl-post-aside ol{padding:0;list-style:none;margin:32px 0 0}.kl-post-aside li{padding:16px 8px;border-left:3px solid #e4ebe6;color:#6c7770}.kl-post-aside li.current{border-color:#087b4c;color:#087b4c;background:#f0faf4;font-weight:700}.kl-post-main{padding:42px;min-height:490px}.kl-post-progress{color:#087b4c;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase}.kl-step h1{font-size:30px;margin:18px 0 4px}.kl-choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:32px}.kl-choice-grid button{min-height:156px;text-align:left;background:#fff;border:1px solid #d9e5dc;border-radius:18px;padding:24px;font-size:34px;cursor:pointer}.kl-choice-grid button:hover,.kl-choice-grid button.selected{border:2px solid #087b4c;background:#f5fcf7}.kl-choice-grid strong,.kl-choice-grid small{display:block;font-size:18px;margin-top:9px}.kl-choice-grid small{font-size:13px;color:#6b786f;font-weight:400}.kl-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:26px}.kl-fields[hidden],.kl-step[hidden]{display:none!important}.kl-fields label{font-size:14px;font-weight:700}.kl-fields .kl-wide{grid-column:1/-1}.kl-fields input,.kl-fields select,.kl-fields textarea{box-sizing:border-box;width:100%;margin-top:8px;padding:13px;border:1px solid #cbd9d0;border-radius:10px;background:#fff;color:#26362d;font:inherit}.kl-drop{display:grid;gap:9px;place-items:center;text-align:center;padding:30px;margin-top:28px;border:2px dashed #98beaa;border-radius:16px;cursor:pointer;font-size:30px}.kl-drop strong{font-size:18px}.kl-drop span{font-size:13px;color:#62766a}.kl-drop input{font-size:13px;max-width:250px}.kl-preview{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.kl-preview img{width:105px;height:84px;object-fit:cover;border-radius:10px}.kl-actions{display:flex;justify-content:space-between;gap:15px;margin-top:28px}.kl-actions button{border:1px solid #087b4c;border-radius:10px;padding:13px 25px;cursor:pointer;font-weight:700;background:#fff;color:#087b4c}.kl-actions #postNext,.kl-actions #postSave{margin-left:auto;background:#087b4c;color:#fff}.kl-actions button[hidden]{display:none}.kl-error{color:#b42b2b!important;font-weight:700;min-height:22px}.kl-review{margin-top:26px;border-top:1px solid #e4eae5}.kl-review>div{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid #e4eae5}.kl-note{font-size:13px}@media(max-width:780px){.kl-post-shell{grid-template-columns:1fr}.kl-post-aside{position:static}.kl-post-aside ol{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:15px}.kl-post-aside li{padding:8px;font-size:12px}.kl-post-main{padding:22px}.kl-fields{grid-template-columns:1fr}.kl-choice-grid{grid-template-columns:1fr}.kl-choice-grid button{min-height:100px}}
/* White light surfaces across KL Living; dark theme remains available. */
body:not(.dark-theme){background:#fff;background-image:none;}
body:not(.dark-theme)::before,body:not(.dark-theme)::after{background-image:none;}
body.home-premium:not(.dark-theme),body.vehicle-page:not(.dark-theme),body.property-page:not(.dark-theme){background:#fff;background-image:none;}
.home-premium:not(.dark-theme) .premium-search-section,.home-premium:not(.dark-theme) .premium-categories-section,
.home-premium:not(.dark-theme) .featured-section,.home-premium:not(.dark-theme) .premium-why,
.vehicle-page:not(.dark-theme) .vehicle-utility-bar,.vehicle-page:not(.dark-theme) .vehicle-search-panel,
.vehicle-page:not(.dark-theme) .vehicle-type-card,.vehicle-page:not(.dark-theme) .vehicle-filter-panel,
.vehicle-page:not(.dark-theme) #advancedVehicleFilters,.property-page:not(.dark-theme) .property-search-section,
.property-page:not(.dark-theme) .property-search-card,.property-page:not(.dark-theme) .quick-property-section,
.property-page:not(.dark-theme) .quick-property-card,.property-page:not(.dark-theme) .listing-card,
body:not(.dark-theme) .kl-post-aside,body:not(.dark-theme) .kl-post-main{background:#fff;background-image:none;}
.kl-preview{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.kl-photo-tile,.kl-photo-empty{position:relative;min-height:122px;border-radius:13px;border:1px solid #b9d5c2;background:#fff;overflow:hidden}.kl-photo-tile{cursor:grab}.kl-photo-tile img{width:100%;height:122px;object-fit:cover;display:block}.kl-photo-tile span{position:absolute;left:5px;bottom:6px;background:#087b4c;color:#fff;border-radius:6px;padding:4px 7px;font-size:11px}.kl-photo-tile button{position:absolute;right:5px;top:5px;background:#fff;border:0;border-radius:50%;width:26px;height:26px;cursor:pointer;font-size:20px;line-height:1}.kl-photo-empty{display:grid;place-items:center;border:1px dashed #bdd4c4;color:#607b67;font-size:13px;cursor:pointer}
.kl-gallery[hidden]{display:none}.kl-gallery{position:fixed;inset:0;z-index:4000;background:rgba(12,24,21,.84);display:grid;place-items:center;padding:18px}.kl-gallery-panel{width:min(1080px,100%);max-height:96vh;background:#fff;border-radius:20px;overflow:auto;padding:16px;color:#203329}.kl-gallery header{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:4px 8px 15px}.kl-gallery header small{color:#087b4c;font-weight:700}.kl-gallery h2{margin:2px 0;font-size:20px}.kl-gallery-close{font-size:29px;background:#f1f6f2;border:0;border-radius:50%;height:40px;width:40px;cursor:pointer}.kl-gallery-main{position:relative;background:#f4f6f4;border-radius:13px;height:min(62vh,640px);display:grid;place-items:center}.kl-gallery-main img{width:100%;height:100%;object-fit:contain}.kl-gallery-main button{position:absolute;z-index:1;top:50%;transform:translateY(-50%);background:#fff;border:0;border-radius:50%;box-shadow:0 3px 15px #0003;width:42px;height:42px;font-size:29px;cursor:pointer}.kl-gallery-prev{left:12px}.kl-gallery-next{right:12px}.kl-gallery-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 2px 2px}.kl-gallery-count{font-weight:700;color:#087b4c;white-space:nowrap}.kl-gallery-thumbs{display:flex;gap:9px;overflow-x:auto}.kl-gallery-thumbs button{padding:0;background:#fff;border:2px solid transparent;border-radius:8px;cursor:pointer}.kl-gallery-thumbs button.active{border-color:#087b4c}.kl-gallery-thumbs img{display:block;object-fit:cover;width:70px;height:54px;border-radius:5px}@media(max-width:650px){.kl-preview{grid-template-columns:repeat(3,minmax(0,1fr))}.kl-gallery-main{height:50vh}.kl-gallery-thumbs img{width:53px;height:43px}}
/* Property page: align with Vehicles while keeping property-specific content. */
.property-page .premium-header{height:88px}.property-page .premium-header-inner{width:min(1710px,94%)}
.property-page .vehicle-utility-bar{background:#fff;border-bottom:1px solid #e6eee9}.property-page .vehicle-utility-inner{width:min(1420px,94%)}
.property-page .property-hero{height:275px;min-height:0;margin-top:16px}.property-page .property-hero-overlay{min-height:275px}.property-page .property-hero-content{max-width:1170px}.property-page .property-hero-content h1{font-size:clamp(27px,3vw,42px)}
.property-page .property-search-section{margin:20px auto 32px;width:min(1420px,94%);max-width:none;padding:0;z-index:5}.property-page .property-search-card{padding:24px;border:1px solid #e3e9e5;border-radius:20px;box-shadow:0 12px 30px rgba(32,55,37,.08);background:#fff}
.property-search-heading{display:flex;justify-content:space-between;margin-bottom:20px}.property-search-heading strong{display:block;font-size:20px;color:#22352b}.property-search-heading span{display:block;color:#65736c;font-size:13px;margin-top:2px}.property-page .property-purpose{margin-bottom:17px}.property-page .purpose-btn{padding:9px 18px;border-radius:10px}.property-page .property-filter-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.property-page .filter-group{min-width:0}.property-page .filter-group select,.property-page .filter-group input{min-width:0;height:46px;border-radius:10px;border:1px solid #dce5df}.property-page .property-search-btn{height:48px;margin-top:18px;border-radius:11px;font-size:15px;background:linear-gradient(95deg,#159446,#1ab754,#119649)}
.property-page .quick-property-section,.property-page .featured{width:min(1420px,94%);max-width:none;padding:0;margin:30px auto}.property-page .quick-property-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.property-page .quick-property-card{min-height:112px;border:1px solid #e2e9e4;box-shadow:0 5px 18px rgba(25,46,34,.05)}.property-page .quick-property-card.selected{border-color:#0d9351;box-shadow:0 0 0 2px #d7f3e1}.property-page .quick-property-icon{font-size:26px;margin-bottom:5px}
.property-page .featured .section-heading{margin-bottom:15px}.property-page .listing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.property-page .listing-card{display:grid;grid-template-columns:245px minmax(0,1fr);min-width:0;min-height:195px;overflow:hidden;background:#fff;border:1px solid #dfe8e1;border-radius:16px;box-shadow:0 8px 24px rgba(21,42,30,.06)}.property-page .listing-card[hidden],.property-page .property-empty[hidden]{display:none!important}.property-page .listing-image{position:relative;min-width:0;height:195px;background:#f4f6f4;overflow:hidden}.property-page .listing-image img{display:block;width:100%;height:100%;object-fit:cover}.property-page .listing-details{min-width:0;padding:20px;display:flex;flex-direction:column;justify-content:center;gap:10px}.property-page .listing-price{font-size:22px;font-weight:800;color:#168e49}.property-page .listing-details h3{font-size:17px;line-height:1.35;overflow-wrap:anywhere;margin:0}.property-page .listing-details p{font-size:13px;color:#68766b;margin:0}.property-card-specs{font-size:13px;color:#60766a}.property-page .listing-badge{position:absolute;left:10px;top:10px;background:#128d4b;color:#fff;padding:5px 8px;border-radius:6px;font-size:11px}.property-page .heart-btn{position:absolute;right:10px;top:10px;background:#fff;border:0;border-radius:50%;width:33px;height:33px;cursor:pointer}.property-result-count{font-size:13px;color:#63736a;margin:0 0 12px}.property-empty{padding:28px;border:1px solid #dfebe1;border-radius:14px;background:#fff;color:#607269}
@media(max-width:1000px){.property-page .property-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.property-page .listing-grid{grid-template-columns:1fr}}
@media(max-width:650px){.property-page .premium-header{height:64px}.property-page .property-hero,.property-page .property-hero-overlay{height:210px;min-height:210px}.property-page .property-search-card{padding:17px}.property-page .property-filter-grid{grid-template-columns:1fr}.property-page .quick-property-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.property-page .listing-card{grid-template-columns:130px minmax(0,1fr);min-height:158px}.property-page .listing-image{height:158px}.property-page .listing-details{padding:12px;gap:6px}.property-page .listing-price{font-size:17px}.property-page .listing-details h3{font-size:14px}}
.property-page.dark-theme .vehicle-utility-bar,.property-page.dark-theme .property-search-card,.property-page.dark-theme .quick-property-card,.property-page.dark-theme .listing-card{background:#292f31;color:#f4f5f1;border-color:#495354}.property-page.dark-theme .property-search-heading strong,.property-page.dark-theme .listing-details h3{color:#f4f5f1}
/* Homepage spacing and twelve equal cards, September review. */
.home-premium .premium-header-inner{width:min(1710px,94%);gap:18px}
.home-premium .premium-nav{gap:20px}
.home-premium .premium-weather{min-width:225px;padding:0 14px}
.home-premium .premium-categories{width:min(1480px,calc(100% - 44px));margin:15px auto 35px}
.home-premium .premium-categories .category-grid-primary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;width:100%}
.home-premium .premium-categories .premium-category-card{box-sizing:border-box;width:100%;height:152px;min-height:152px;padding:9px 8px 12px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;overflow:hidden}
.home-premium .premium-categories .category-art{height:98px;min-height:98px;width:100%;display:grid;place-items:center}
.home-premium .premium-categories .category-art img{display:block;width:100%;height:100%;max-width:165px;object-fit:contain}
.home-premium .premium-categories .premium-category-card h3{font-size:14px;line-height:1.15;margin:2px 0 1px;min-height:17px}
.home-premium .premium-categories .premium-category-card p{font-size:11px;line-height:1.2;margin:0}
@media(min-width:1151px){.home-premium .premium-hero{min-height:325px;height:325px;max-height:325px}.home-premium .premium-categories .premium-category-card{height:152px;min-height:152px}.home-premium .premium-categories .category-art{height:98px;min-height:98px}}
@media(max-width:1150px){.home-premium .premium-categories .category-grid-primary{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.home-premium .premium-categories .category-grid-primary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.home-premium .premium-categories{width:calc(100% - 28px)}.home-premium .premium-categories .premium-category-card{height:145px;min-height:145px}.home-premium .premium-categories .category-art{height:88px;min-height:88px}.home-premium .premium-header-inner{gap:10px}}
.kl-explore-main{width:min(1180px,92%);margin:34px auto 80px}.kl-explore-back{color:#117a48;font-weight:700}.kl-explore-title{display:flex;align-items:center;gap:25px;padding:20px 0 25px;border-bottom:1px solid #e3ece5}.kl-explore-title img{width:140px;height:105px;object-fit:contain}.kl-explore-title span{color:#087b4b;font-weight:700}.kl-explore-title h1{font-size:clamp(27px,4vw,43px);margin:4px 0}.kl-explore-title p{color:#617168}.kl-explore-toolbar{display:grid;grid-template-columns:2fr 1fr auto;align-items:end;gap:14px;margin:25px 0}.kl-explore-toolbar label{font-size:13px;font-weight:700}.kl-explore-toolbar input,.kl-explore-toolbar select{display:block;width:100%;height:44px;margin-top:7px;border:1px solid #d6e3da;border-radius:9px;padding:0 12px}.kl-explore-toolbar a,.kl-explore-empty a{background:#087b4b;color:#fff;padding:12px 19px;border-radius:9px;font-weight:700;text-align:center}.kl-explore-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.kl-explore-card{background:#fff;border:1px solid #dfe9e1;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:185px 1fr;min-height:165px}.kl-explore-card .listing-image img{width:100%;height:165px;object-fit:cover}.kl-explore-card .listing-details{padding:20px;display:flex;flex-direction:column;gap:7px}.kl-explore-card .listing-details strong{color:#087b4b;font-size:19px}.kl-explore-card .listing-details small{color:#64786a}.kl-explore-empty{text-align:center;padding:42px;border:1px dashed #c6dfce;border-radius:17px}.kl-explore-empty[hidden]{display:none}.kl-explore-empty p{margin:10px 0 26px;color:#67756b}@media(max-width:760px){.kl-explore-toolbar,.kl-explore-grid{grid-template-columns:1fr}.kl-explore-card{grid-template-columns:130px 1fr}.kl-explore-card .listing-image img{height:155px}.kl-explore-title img{width:90px}.kl-explore-main{margin-top:22px}}
@media(min-width:1101px){.home-premium .premium-nav{margin-left:clamp(20px,4.5vw,65px)}}

/* Keep the vehicle filters available while listings scroll. */
@media (min-width:901px) {
  .vehicle-page .vehicle-filter-panel { position:sticky; top:16px; max-height:calc(100vh - 32px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; align-self:start; }
}
@media (max-width:900px) { .vehicle-page .vehicle-filter-panel { position:static; max-height:none; overflow:visible; } }
/* Premium 360 badge on a clean white surface. */
.kl-360-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:#252729; color:#d7b76b; border:1px solid #aa883b; font-size:13px; font-weight:800; letter-spacing:.03em; box-shadow:0 3px 10px rgba(22,22,22,.15); }
.kl-360-badge strong { color:#fff; }
.kl-360-panel { background:#fff; border:1px solid #d8c18a; border-radius:16px; padding:20px; margin-top:24px; }
.kl-360-panel p { margin:12px 0; }

/* Property category PNGs */
.property-page .quick-property-icon img {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
}
.property-page .quick-property-icon img[hidden],
.property-page .quick-property-icon .property-icon-fallback[hidden] {
    display: none;
}

/* Premium Cars category link */
.vehicle-page .premium-car-category{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-decoration:none;color:#17261b;background:linear-gradient(145deg,#f8f3e6,#e5ebdc);border:1px solid #c9ab61;cursor:pointer}
.vehicle-page .premium-car-category:hover,.vehicle-page .premium-car-category:focus-visible{outline:2px solid #bc9d52;outline-offset:2px;transform:translateY(-3px)}
.vehicle-page .premium-car-category .premium-category-mark{font-size:40px;color:#ac883d;line-height:1.3}
.vehicle-page.dark-theme .premium-car-category{background:#29382e;color:#f3ead1}
.kl-360-hint{padding:12px;border:1px solid #d8c18a;border-radius:10px;background:#fff7df;color:#403814}.kl-360-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin:14px 0}.kl-360-frame{padding:6px;border:1px solid #ddd;border-radius:8px;overflow:hidden}.kl-360-frame img{width:100%;aspect-ratio:4/3;object-fit:contain}.kl-360-frame span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px}.kl-360-frame button{margin:4px;padding:5px 10px;cursor:pointer}

/* September screenshot review: property art, header alignment and posting layout. */
.property-page .quick-property-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 9px;min-height:124px}
.property-page .quick-property-icon{display:grid;place-items:center;height:76px;width:100%;margin-bottom:4px}
.property-page .quick-property-icon img{width:80px;height:72px;object-fit:contain}
.property-page .quick-property-card h3{margin:0;font-size:15px;line-height:1.3;text-align:center}
.home-premium .premium-header-inner{justify-content:space-between}
.home-premium .premium-nav{margin-left:auto;gap:clamp(12px,1.3vw,24px)}
.home-premium .premium-search-row{width:min(1420px,94%);grid-template-columns:minmax(0,1fr) 104px}
.home-premium .premium-search{max-width:none}
.kl-post{max-width:1560px;width:calc(100% - 32px);margin:30px auto 75px;padding:0 14px}
.kl-post-shell{grid-template-columns:minmax(245px,290px) minmax(0,1fr);gap:24px}
.kl-post-main{padding:clamp(24px,3vw,48px);box-shadow:0 18px 48px rgba(16,42,28,.07)}
.kl-post-aside{box-shadow:0 18px 48px rgba(16,42,28,.07)}
.kl-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kl-choice-grid button{min-width:0;min-height:148px;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.kl-choice-grid button:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(21,54,34,.09)}
@media(max-width:1050px){.kl-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){.kl-post{width:100%;padding:0 16px}.kl-post-shell{grid-template-columns:1fr}.kl-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kl-choice-grid button{min-height:115px;padding:16px}}
@media(max-width:510px){.kl-choice-grid{grid-template-columns:1fr}.home-premium .premium-search-row{width:94%;grid-template-columns:1fr}}

/* Normal vehicle photo viewer: premium viewer dimensions, white and KL green. */
.vehicle-page .kl-gallery{background:rgba(7,23,16,.85);padding:16px}
.vehicle-page .kl-gallery-panel{box-sizing:border-box;width:min(1150px,calc(100vw - 32px));height:min(730px,calc(100dvh - 32px));max-height:none;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;overflow:hidden;background:#fff;border:1px solid #187744;border-radius:22px;padding:24px;color:#1d3027;box-shadow:0 22px 68px #0006}
.vehicle-page .kl-gallery-panel header{min-height:48px;padding:0;align-items:center}
.vehicle-page .kl-gallery-panel header small{color:#087743}
.vehicle-page .kl-gallery-panel h2{font-size:clamp(18px,2vw,27px);margin-top:4px}
.vehicle-page .kl-gallery-close{width:auto;height:42px;padding:0 14px;border:1px solid #13804b;border-radius:9px;background:#fff;color:#175137;font-size:14px;font-weight:700;white-space:nowrap}
.vehicle-page .kl-gallery-main{height:auto;min-height:0;overflow:hidden;background:#f8fbf8;border:1px solid #dcebe1;border-radius:12px}
.vehicle-page .kl-gallery-main img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;transition:transform .18s ease;cursor:zoom-in}
.vehicle-page .kl-gallery-main.zoom-tap img{transform:scale(2);cursor:zoom-out}
.vehicle-page .kl-gallery-main button{z-index:5;border:1px solid #c9e7d3;color:#16452a}
.vehicle-page .kl-gallery-bottom{min-height:64px;padding:0;gap:16px}
.vehicle-page .kl-gallery-count{white-space:nowrap}
.vehicle-page .kl-zoom-hint{font-size:12px;color:#617568}
.kl-zoom-hint{display:none}.vehicle-page .kl-zoom-hint{display:inline}
.vehicle-page .kl-gallery-thumbs{margin-left:auto;max-width:52%;gap:6px}
.vehicle-page .kl-gallery-thumbs img{width:48px;height:43px}
.kl-zoom-lens,.kl-zoom-preview{display:none}
.vehicle-page .kl-zoom-lens{position:absolute;z-index:3;width:100px;height:100px;border:1px solid #17804b;background:rgba(154,213,169,.25);transform:translate(-50%,-50%);pointer-events:none}
.vehicle-page .kl-zoom-preview{position:absolute;z-index:4;right:10px;top:10px;bottom:10px;width:44%;border:2px solid #14814a;border-radius:9px;background-color:#fff;background-repeat:no-repeat;pointer-events:none;box-shadow:0 14px 40px #0003}
.vehicle-page .kl-gallery-main.zoom-active:not(.zoom-tap) .kl-zoom-lens,.vehicle-page .kl-gallery-main.zoom-active:not(.zoom-tap) .kl-zoom-preview{display:block}
.vehicle-page .seller-action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.vehicle-page .seller-call-btn,.vehicle-page .seller-whatsapp-btn{box-sizing:border-box;min-width:0;width:100%;min-height:43px;height:43px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 9px;text-decoration:none;font:700 13px/1.1 Inter,Arial,sans-serif;border-radius:9px;white-space:nowrap}
.vehicle-page .seller-action-row svg{width:17px;height:17px;flex:none;fill:currentColor}
.vehicle-page .seller-whatsapp-btn{background:#ecfaf1;color:#087a43;border:1px solid #94d4ac}
.vehicle-page .seller-call-btn{background:#087b49;color:#fff;border:1px solid #087b49}
@media(max-width:700px){.vehicle-page .kl-gallery-panel{padding:14px;gap:10px;height:min(720px,calc(100dvh - 24px))}.vehicle-page .kl-gallery-bottom{display:flex;flex-wrap:wrap;justify-content:space-between}.vehicle-page .kl-zoom-hint{display:none}.vehicle-page .kl-gallery-thumbs{max-width:100%;width:100%;margin:0}.vehicle-page .kl-zoom-lens,.vehicle-page .kl-zoom-preview{display:none!important}}

/* Post Ad panels: green arc enters from each upper edge. */
.kl-post .kl-post-aside,
.kl-post .kl-post-main{position:relative;isolation:isolate;overflow:hidden;border:1px solid #d8e8de;border-radius:24px;background:#fff}
.kl-post .kl-post-aside::before,
.kl-post .kl-post-main::before{content:"";position:absolute;z-index:0;left:-1px;right:-1px;top:-1px;height:75px;border-top:8px solid #05a74f;border-radius:75px 75px 0 0;pointer-events:none}
.kl-post .kl-post-aside>* ,
.kl-post .kl-post-main>*{position:relative;z-index:1}
.kl-post .kl-post-aside{padding-top:56px}
.kl-post .kl-post-main{padding-top:55px}
@media(max-width:780px){.kl-post .kl-post-aside::before,.kl-post .kl-post-main::before{height:48px;border-top-width:6px;border-radius:48px 48px 0 0}.kl-post .kl-post-aside,.kl-post .kl-post-main{padding-top:42px}}

/* Refined Post Ad accent: short line entering from the upper-left edge. */
.kl-post .kl-post-aside,
.kl-post .kl-post-main{border-radius:22px;overflow:visible}
.kl-post .kl-post-aside::before,
.kl-post .kl-post-main::before{left:22px;right:auto;top:-2px;width:min(145px,45%);height:3px;border:0;border-radius:999px;background:linear-gradient(90deg,#078f49 0%,#2abc71 70%,transparent 100%)}
.kl-post .kl-post-aside{padding-top:32px}
.kl-post .kl-post-main{padding-top:clamp(24px,3vw,48px)}
@media(max-width:780px){.kl-post .kl-post-aside::before,.kl-post .kl-post-main::before{left:20px;top:-2px;width:110px;height:3px;border:0;border-radius:999px}.kl-post .kl-post-aside{padding-top:32px}.kl-post .kl-post-main{padding-top:22px}}

/* Property photo viewer shares the contained green and white viewer. */
/* Normal vehicle photo viewer: premium viewer dimensions, white and KL green. */
.property-page .kl-gallery{background:rgba(7,23,16,.85);padding:16px}
.property-page .kl-gallery-panel{box-sizing:border-box;width:min(1150px,calc(100vw - 32px));height:min(730px,calc(100dvh - 32px));max-height:none;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;overflow:hidden;background:#fff;border:1px solid #187744;border-radius:22px;padding:24px;color:#1d3027;box-shadow:0 22px 68px #0006}
.property-page .kl-gallery-panel header{min-height:48px;padding:0;align-items:center}
.property-page .kl-gallery-panel header small{color:#087743}
.property-page .kl-gallery-panel h2{font-size:clamp(18px,2vw,27px);margin-top:4px}
.property-page .kl-gallery-close{width:auto;height:42px;padding:0 14px;border:1px solid #13804b;border-radius:9px;background:#fff;color:#175137;font-size:14px;font-weight:700;white-space:nowrap}
.property-page .kl-gallery-main{height:auto;min-height:0;overflow:hidden;background:#f8fbf8;border:1px solid #dcebe1;border-radius:12px}
.property-page .kl-gallery-main img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;transition:transform .18s ease;cursor:zoom-in}
.property-page .kl-gallery-main.zoom-tap img{transform:scale(2);cursor:zoom-out}
.property-page .kl-gallery-main button{z-index:5;border:1px solid #c9e7d3;color:#16452a}
.property-page .kl-gallery-bottom{min-height:64px;padding:0;gap:16px}
.property-page .kl-gallery-count{white-space:nowrap}
.property-page .kl-zoom-hint{font-size:12px;color:#617568}
.kl-zoom-hint{display:none}.property-page .kl-zoom-hint{display:inline}
.property-page .kl-gallery-thumbs{margin-left:auto;max-width:52%;gap:6px}
.property-page .kl-gallery-thumbs img{width:48px;height:43px}
.kl-zoom-lens,.kl-zoom-preview{display:none}
.property-page .kl-zoom-lens{position:absolute;z-index:3;width:100px;height:100px;border:1px solid #17804b;background:rgba(154,213,169,.25);transform:translate(-50%,-50%);pointer-events:none}
.property-page .kl-zoom-preview{position:absolute;z-index:4;right:10px;top:10px;bottom:10px;width:44%;border:2px solid #14814a;border-radius:9px;background-color:#fff;background-repeat:no-repeat;pointer-events:none;box-shadow:0 14px 40px #0003}
.property-page .kl-gallery-main.zoom-active:not(.zoom-tap) .kl-zoom-lens,.property-page .kl-gallery-main.zoom-active:not(.zoom-tap) .kl-zoom-preview{display:block}
.property-page .seller-action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
.property-page .seller-call-btn,.property-page .seller-whatsapp-btn{box-sizing:border-box;min-width:0;width:100%;min-height:43px;height:43px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 9px;text-decoration:none;font:700 13px/1.1 Inter,Arial,sans-serif;border-radius:9px;white-space:nowrap}
.property-page .seller-action-row svg{width:17px;height:17px;flex:none;fill:currentColor}
.property-page .seller-whatsapp-btn{background:#ecfaf1;color:#087a43;border:1px solid #94d4ac}
.property-page .seller-call-btn{background:#087b49;color:#fff;border:1px solid #087b49}
@media(max-width:700px){.property-page .kl-gallery-panel{padding:14px;gap:10px;height:min(720px,calc(100dvh - 24px))}.property-page .kl-gallery-bottom{display:flex;flex-wrap:wrap;justify-content:space-between}.property-page .kl-zoom-hint{display:none}.property-page .kl-gallery-thumbs{max-width:100%;width:100%;margin:0}.property-page .kl-zoom-lens,.property-page .kl-zoom-preview{display:none!important}}


/* Property cards: scan price, short details and contact without squeezing photos. */
.property-page .listing-card{grid-template-columns:minmax(190px,35%) minmax(0,1fr);min-height:272px}
.property-page .listing-image{height:100%;min-height:272px;background:#f6f9f6}
.property-page .listing-image img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.property-page .listing-details{padding:15px 17px;gap:7px;justify-content:center}
.property-page .listing-price{font-size:20px;line-height:1.2}
.property-page .property-card-specs{display:flex;flex-wrap:wrap;gap:6px}
.property-page .property-card-specs span{padding:4px 7px;background:#f1f8f3;border:1px solid #dbeadf;border-radius:6px;font-size:11px;color:#2d6543;white-space:nowrap}
.property-page .property-card-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px!important;line-height:1.35;color:#5f7064!important}
.property-page .property-card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:3px}
.property-page .property-card-actions a,.property-page .property-card-actions button{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:100%;min-width:0;min-height:35px;padding:5px 7px;box-sizing:border-box;border-radius:8px;font:700 12px/1.2 Inter,Arial,sans-serif;text-decoration:none;white-space:nowrap}
.property-page .property-card-actions svg{width:15px;height:15px;fill:currentColor;flex:none}
.property-page .property-call{background:#087b49;border:1px solid #087b49;color:white}.property-page .property-whatsapp{background:#edfaf1;border:1px solid #96d6ae;color:#087b49}
.property-page .property-card-actions button:disabled{opacity:.52;cursor:not-allowed}
@media(max-width:680px){.property-page .listing-card{grid-template-columns:120px minmax(0,1fr);min-height:235px}.property-page .listing-image{min-height:235px}.property-page .listing-details{padding:10px;gap:5px}.property-page .listing-price{font-size:16px}.property-page .property-card-description{font-size:11px!important}.property-page .property-card-actions{gap:4px}.property-page .property-card-actions a,.property-page .property-card-actions button{font-size:11px;min-height:32px;padding:4px}}
/* Post Ad contact preferences */
.kl-post .kl-fields label:has(input[type="checkbox"]){display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.kl-post .kl-fields input[type="checkbox"]{width:18px;height:18px;flex:none;margin:0;accent-color:#11844c}
.kl-post .kl-step h2{margin:22px 0 12px;font-size:19px;color:#22352c}

/* Kerala Updates */
.kerala-news{max-width:1250px;margin:24px auto 72px;padding:0 28px}.kerala-news[hidden]{display:none}.kerala-news-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.kerala-news-kicker{font-size:11px;font-weight:800;letter-spacing:.17em;color:#159447}.kerala-news-head h2{font-size:clamp(26px,3vw,38px);line-height:1.15;margin:6px 0;color:#183629}.kerala-news-head p{margin:0;color:#67796d}.kerala-news-label{color:#846b3a;font-size:12px;white-space:nowrap}.kerala-news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.kerala-news-card{min-height:175px;padding:23px;background:#fff;border:1px solid #e1e9e2;border-radius:16px;box-shadow:0 7px 25px #1239270c;text-decoration:none;display:flex;flex-direction:column;gap:12px;transition:transform .2s,box-shadow .2s}.kerala-news-card:hover,.kerala-news-card:focus-visible{transform:translateY(-3px);box-shadow:0 12px 30px #1239271a}.kerala-news-category{font-size:11px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:#18834b}.kerala-news-card h3{font-size:17px;line-height:1.45;margin:0;color:#20392c}.kerala-news-meta{font-size:12px;color:#718476;margin-top:auto}@media(max-width:750px){.kerala-news{padding:0 18px}.kerala-news-grid{grid-template-columns:1fr}.kerala-news-head{align-items:start}.kerala-news-label{display:none}}

/* ===== KL Living Premium Properties 2026-09-26 ===== */
.quick-property-card.premium-property-category{position:relative;text-decoration:none;color:inherit;border:1px solid #c5a84d;background:linear-gradient(145deg,#fffdf6,#fff);overflow:hidden}.premium-property-category:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0,rgba(202,169,62,.16),transparent 42%);pointer-events:none}.premium-property-category .premium-property-star{position:absolute;top:9px;right:11px;color:#ad8521}.premium-property-category .premium-property-icon{font-size:42px;color:#8b6c1d;height:66px}.premium-property-category p{margin:2px 0 0;font-size:11px;color:#7a6a3f;text-align:center}.premium-property-field-note{display:block;font-size:11px;line-height:1.4;color:#7c6841;margin-top:5px}
.premium-property-page{margin:0;background:#fbfbf8;color:#1d2a23;font-family:Inter,Arial,sans-serif}.premium-property-main{width:min(1420px,94%);margin:22px auto 0}.premium-property-hero{min-height:430px;border-radius:26px;padding:58px;display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;background:linear-gradient(120deg,#11251d,#0c5839);color:#fff;box-shadow:0 20px 55px rgba(18,48,34,.18);overflow:hidden;position:relative}.premium-property-hero:after{content:"";position:absolute;width:480px;height:480px;border:1px solid rgba(216,184,78,.24);border-radius:50%;right:-130px;top:-180px}.premium-property-kicker{font-size:12px;letter-spacing:.15em;color:#dbc06c;font-weight:800}.premium-property-hero h1{font-size:clamp(38px,5vw,70px);line-height:1.02;margin:14px 0}.premium-property-hero h1 em{font-style:normal;color:#dec36e}.premium-property-hero p{max-width:680px;color:#dbe7df;font-size:17px;line-height:1.7}.premium-property-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.premium-property-actions a,.premium-property-empty a{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:11px;background:#c7a847;color:#102219;font-weight:800;text-decoration:none}.premium-property-actions a.secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}.premium-property-showcase{min-height:245px;border:1px solid rgba(219,192,108,.55);border-radius:22px;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.02));position:relative;z-index:1}.premium-property-showcase span{color:#e1c56c;font-size:12px;letter-spacing:.13em}.premium-property-showcase strong{font-size:29px;margin:9px 0}.premium-property-showcase p{font-size:13px;margin:0}.premium-property-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}.premium-property-benefits>div{padding:23px;border-radius:16px;background:#fff;border:1px solid #e6e4da;box-shadow:0 7px 22px rgba(32,48,39,.05)}.premium-property-benefits strong,.premium-property-benefits span{display:block}.premium-property-benefits strong{color:#78601e;margin-bottom:7px}.premium-property-benefits span{font-size:13px;color:#647068}.premium-property-listings{padding:22px 0 16px}.premium-property-empty{text-align:center;padding:60px 20px;border:1px dashed #c8b36a;border-radius:20px;background:#fff}.premium-property-empty>span{font-size:35px;color:#ad8521}.premium-property-empty h3{font-size:24px;margin:10px 0}.premium-property-empty p{color:#68736d;margin-bottom:20px}
@media(max-width:800px){.premium-property-hero{grid-template-columns:1fr;padding:34px 24px}.premium-property-benefits{grid-template-columns:1fr}.premium-property-showcase{min-height:180px}}


/* ===== 2026-09-26 Home polish: search, compact theme control, news + events ===== */
.home-premium .premium-search-section{padding:8px 3.5%;background:#fff}
.home-premium .premium-search-row{width:min(1420px,94%);grid-template-columns:minmax(0,1fr) 76px;gap:10px;align-items:center}
.home-premium .premium-search{height:52px;border-color:#c9d0d4;box-shadow:0 5px 16px rgba(24,42,48,.06)}
.home-premium .premium-search label+label::before{background:#d8dde0}
.home-premium .premium-search label>span{color:#343b3f;font-size:20px}
.home-premium .premium-search input,.home-premium .premium-search select{color:#252b2f;font-size:14px;font-weight:500}
.home-premium .premium-search input::placeholder{color:#747d82}
.home-premium .premium-search:focus-within{border-color:#159447;box-shadow:0 0 0 2px rgba(21,148,71,.08),0 6px 18px rgba(21,148,71,.08)}
.home-premium .premium-search input:focus,.home-premium .premium-search select:focus{color:#151a1d}
.home-premium .theme-control{height:52px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:0}
.home-premium .theme-label{display:none}
.home-premium .theme-switch{width:68px;height:34px;border-color:#b7c4c3;background:#aab9b7;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.home-premium .theme-icon{width:28px;font-size:17px}
.home-premium .theme-icon.moon{font-size:20px}
.home-premium .theme-thumb{width:28px;height:28px;left:2px;top:2px}
.home-premium .theme-switch[aria-checked="true"] .theme-thumb{transform:translateX(35px)}
.home-premium.dark-theme .premium-search-section{background:#171b1e}
.home-premium.dark-theme .premium-search{border-color:#59636a}

/* News cards now use real picture space. */
.kerala-news{margin-bottom:32px}
.kerala-news-grid,.kerala-events-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.kerala-news-card{min-height:300px;padding:0;overflow:hidden;gap:0}
.kerala-news-image{width:100%;height:160px;object-fit:cover;background:#eef3ef;border:0;display:block}
.kerala-news-body{padding:18px;display:flex;flex-direction:column;gap:10px;min-height:140px}
.kerala-news-card h3{font-size:16px;line-height:1.38}

.kerala-events{max-width:1250px;margin:0 auto 46px;padding:0 28px}
.kerala-event-card{display:block;overflow:hidden;border-radius:16px;border:1px solid #e1e9e2;background:#fff;text-decoration:none;color:inherit;box-shadow:0 7px 25px rgba(18,57,39,.05);transition:transform .2s,box-shadow .2s}
.kerala-event-card:hover,.kerala-event-card:focus-visible{transform:translateY(-3px);box-shadow:0 13px 32px rgba(18,57,39,.12)}
.kerala-event-image-wrap{height:178px;position:relative;overflow:hidden;background:#edf4ef}
.kerala-event-image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.kerala-event-card:hover .kerala-event-image{transform:scale(1.035)}
.kerala-event-date{position:absolute;left:12px;bottom:12px;padding:7px 10px;border-radius:8px;background:rgba(9,59,40,.88);backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:800}
.kerala-event-body{padding:18px}.kerala-event-body h3{margin:7px 0 7px;font-size:18px;color:#20392c}.kerala-event-body p{margin:0 0 12px;color:#66766c;font-size:13px}.kerala-event-link{font-size:12px;font-weight:750;color:#16854d}
.home-premium.dark-theme .kerala-news-card,.home-premium.dark-theme .kerala-event-card{background:#252b30;border-color:#414b53}.home-premium.dark-theme .kerala-news-card h3,.home-premium.dark-theme .kerala-event-body h3{color:#f3f6f7}.home-premium.dark-theme .kerala-event-body p,.home-premium.dark-theme .kerala-news-meta,.home-premium.dark-theme .kerala-news-head p{color:#b8c3c7}.home-premium.dark-theme .kerala-news-head h2{color:#f3f6f7}
@media(max-width:850px){.kerala-news-grid,.kerala-events-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.home-premium .premium-search-row{grid-template-columns:1fr 70px;gap:6px}.home-premium .premium-search{grid-template-columns:1fr 1fr}.home-premium .theme-control{align-self:start;height:46px}.home-premium .theme-switch{width:64px;height:32px}.home-premium .theme-thumb{width:26px;height:26px}.home-premium .theme-switch[aria-checked="true"] .theme-thumb{transform:translateX(33px)}.kerala-news-grid,.kerala-events-grid{grid-template-columns:1fr}.kerala-events{padding:0 18px}}

/* 2026-09-26: compact Kerala news/events cards */
.kerala-news-head h2{font-size:24px!important;line-height:1.2!important}
.kerala-news-head p{font-size:12px!important;margin-top:4px!important}
.kerala-news-label{font-size:11px!important}
.kerala-news-card h3{font-size:14px!important;line-height:1.32!important;margin:0!important}
.kerala-news-body{padding:14px!important;gap:7px!important;min-height:118px!important}
.kerala-news-image{height:145px!important}
.kerala-news-card{min-height:263px!important}
.kerala-news-category{font-size:10px!important}
.kerala-news-meta{font-size:10px!important}
.kerala-events{max-width:1000px!important;margin-bottom:34px!important}
.kerala-events-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
.kerala-event-image-wrap{height:150px!important}
.kerala-event-body{padding:14px!important}
.kerala-event-body h3{font-size:15px!important;line-height:1.3!important;margin:5px 0!important}
.kerala-event-body p{font-size:11px!important;margin-bottom:8px!important}
.kerala-event-date,.kerala-event-link{font-size:10px!important}
@media(max-width:650px){.kerala-events-grid{grid-template-columns:1fr!important}.kerala-news-head h2{font-size:21px!important}}

/* Filled Home icon used in header menus */
.header-home-link{display:inline-flex!important;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 5px!important;line-height:1!important}
.header-home-icon{width:20px;height:20px;display:block}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* 2026-09-26 news/events final compact 3-card layout */
.kerala-events{max-width:1250px!important}
.kerala-events-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
.kerala-event-body h3{font-size:14px!important;line-height:1.3!important}
.kerala-event-body p{font-size:11px!important}
.kerala-event-link{font-size:11px!important}
.kerala-event-date{font-size:10px!important}
@media(max-width:850px){.kerala-events-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:600px){.kerala-events-grid{grid-template-columns:1fr!important}}


/* =========================================================
   KL LIVING — GOLD BISCUIT PREMIUM CATEGORY CARDS
   Premium Cars + Premium Properties
   ========================================================= */

.vehicle-page .premium-car-category,
.property-page .premium-property-category {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid #c99b2f !important;
    border-radius: 16px;
    background:
        radial-gradient(circle at 18% 15%, rgba(255,255,255,.94), transparent 25%),
        linear-gradient(145deg, #fffdf5 0%, #fff2bd 34%, #efd276 67%, #d9aa3c 100%) !important;
    box-shadow:
        0 10px 24px rgba(128, 91, 8, .16),
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 0 -8px 17px rgba(134, 89, 0, .12) !important;
    color: #5c4307 !important;
    text-decoration: none;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

/* Moving luxury flash */
.vehicle-page .premium-car-category::after,
.property-page .premium-property-category::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: -40%;
    left: -46%;
    width: 34%;
    height: 185%;
    pointer-events: none;
    transform: rotate(23deg);
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.12) 30%,
        rgba(255,255,255,.88) 50%,
        rgba(255,255,255,.12) 70%,
        rgba(255,255,255,0) 100%
    );
    animation: klPremiumCardFlash 3.4s ease-in-out infinite;
}

@keyframes klPremiumCardFlash {
    0%, 13% { left: -46%; opacity: 0; }
    20% { opacity: .95; }
    38% { left: 120%; opacity: .8; }
    45%, 100% { left: 120%; opacity: 0; }
}

.vehicle-page .premium-car-category:hover,
.vehicle-page .premium-car-category:focus-visible,
.property-page .premium-property-category:hover,
.property-page .premium-property-category:focus-visible {
    transform: translateY(-5px) scale(1.015);
    border-color: #a97612 !important;
    outline: none !important;
    box-shadow:
        0 16px 34px rgba(128, 91, 8, .23),
        0 0 0 2px rgba(231, 194, 83, .18),
        inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.vehicle-page .premium-car-category .premium-category-mark,
.property-page .premium-property-category .premium-property-star {
    position: absolute;
    z-index: 4;
    top: 9px;
    right: 11px;
    color: #936600;
    font-size: 14px;
    line-height: 1;
    text-shadow: 0 0 8px rgba(255, 231, 137, .75);
}

.vehicle-page .premium-car-category .premium-vehicle-image {
    position: relative;
    z-index: 2;
    width: 88px;
    height: 58px;
    margin: 2px auto 5px;
    object-fit: contain;
    filter: drop-shadow(0 6px 6px rgba(100, 70, 0, .18));
}

.property-page .premium-property-category .premium-property-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 94px;
    height: 62px;
    margin: 0 auto 5px;
    color: #7b5700;
}

.property-page .premium-property-category .premium-property-icon img {
    width: 88px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 6px 6px rgba(100, 70, 0, .18));
}

.vehicle-page .premium-car-category h3,
.property-page .premium-property-category h3 {
    position: relative;
    z-index: 2;
    margin: 0;
    color: #5b4100 !important;
    font-weight: 850;
}

.vehicle-page .premium-car-category p,
.property-page .premium-property-category p {
    position: relative;
    z-index: 2;
    margin: 3px 0 0;
    color: #745d22 !important;
    font-size: 11px;
    line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
    .vehicle-page .premium-car-category::after,
    .property-page .premium-property-category::after {
        animation: none;
        display: none;
    }
}

/* ===== 2026-09-26 Vehicle UI polish: compact checks + WhatsApp alignment ===== */
.vehicle-page .vehicle-filter-panel .filter-check-row input[type="checkbox"]{
    appearance:auto !important;
    -webkit-appearance:checkbox !important;
    box-sizing:border-box !important;
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
    max-width:18px !important;
    max-height:18px !important;
    flex:0 0 18px !important;
    margin:0 !important;
    padding:0 !important;
    accent-color:#0b8f4d;
    cursor:pointer;
}
.vehicle-page .vehicle-filter-panel .filter-check-left{
    gap:10px !important;
    min-width:0;
}
.vehicle-page .vehicle-filter-panel .filter-check-row{
    min-height:44px;
    padding:8px 2px !important;
}
.vehicle-page .vehicle-filter-panel .filter-check-row .filter-check-left > span{
    font-size:14px;
    line-height:1.35;
}

.vehicle-page .seller-action-row{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr) !important;
    gap:7px !important;
}
.vehicle-page .seller-call-btn,
.vehicle-page .seller-whatsapp-btn{
    overflow:hidden;
    min-width:0 !important;
    padding:0 7px !important;
    gap:5px !important;
    font-size:12px !important;
    letter-spacing:0;
}
.vehicle-page .seller-action-row svg{
    display:block !important;
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
    flex:0 0 14px !important;
}
.vehicle-page .seller-whatsapp-btn{
    border-color:#8fd0a7 !important;
    background:#effbf3 !important;
    color:#087a43 !important;
}
@media(max-width:1180px){
    .vehicle-page .seller-call-btn,
    .vehicle-page .seller-whatsapp-btn{font-size:11px !important;padding:0 5px !important;gap:4px !important;}
    .vehicle-page .seller-action-row svg{width:13px !important;height:13px !important;min-width:13px !important;flex-basis:13px !important;}
}

/* Vehicle search panel width aligned with vehicle banner */
@media (max-width: 720px) {
  .vehicle-page .vehicle-search-panel {
    width: 94%;
  }
}