/* ============================================
   CHERY OMAN - Custom Styles
   Aligned with Chery International & UAE UI/UX
   ============================================ */

/* Preloader */
#preloader {
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-logo {
    animation: preloaderPulse 1.8s ease-in-out infinite;
}

@keyframes preloaderPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.97); }
}

.preloader-bar {
    width: 160px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    overflow: hidden;
}

.preloader-bar-fill {
    height: 100%;
    width: 0%;
    background: #A4896C;
    border-radius: 2px;
    animation: preloaderFill 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes preloaderFill {
    0%   { width: 0%; }
    60%  { width: 75%; }
    100% { width: 100%; }
}

/* Smooth scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #A4896C;
}

/* Selection */
::selection {
    background: rgba(164, 137, 108, 0.3);
    color: #fff;
}

/* Hero Section Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(164, 137, 108, 0.3); }
    50% { box-shadow: 0 0 40px rgba(164, 137, 108, 0.6); }
}

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

@keyframes counter {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-up { animation: fadeInUp 0.8s ease-out forwards; }
.animate-fade-down { animation: fadeInDown 0.8s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.6s ease-out forwards; }
.animate-slide-left { animation: slideInLeft 0.8s ease-out forwards; }
.animate-slide-right { animation: slideInRight 0.8s ease-out forwards; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }

/* Delay utility classes */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

/* Hero Swiper */
.hero-swiper {
    width: 100%;
    height: 100vh;
    min-height: 600px;
    max-height: 900px;
}

.hero-swiper .swiper-slide {
    overflow: hidden;
}

.hero-swiper .swiper-pagination-bullet {
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
    opacity: 1;
    transition: all 0.3s ease;
}

.hero-swiper .swiper-pagination-bullet-active {
    background: #A4896C;
    width: 60px;
}

/* Model Card Hover */
.model-card {
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.model-card:hover {
    transform: translateY(-8px);
}

.model-card:hover .model-card-image {
    transform: scale(1.05);
}

.model-card .model-card-image {
    transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Spec Counter Animation */
.spec-number {
    font-variant-numeric: tabular-nums;
}

/* Section Divider */
.section-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #A4896C, #C4B09A);
    border-radius: 2px;
}

/* Gradient Text */
.gradient-text {
    background: linear-gradient(135deg, #fff 0%, #A4896C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass Effect */
.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-dark {
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Feature Card */
.feature-card {
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #A4896C, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
}

/* News Card */
.news-card {
    transition: all 0.4s ease;
}

.news-card:hover {
    transform: translateY(-6px);
}

.news-card:hover .news-card-image {
    transform: scale(1.08);
}

.news-card .news-card-image {
    transition: transform 0.7s ease;
}

/* Form Styles */
.form-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 18px;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
    width: 100%;
}

.form-input:focus {
    outline: none;
    border-color: #A4896C;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(164, 137, 108, 0.15);
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #b0b0b0;
    margin-bottom: 6px;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23b0b0b0' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* Technology Section Parallax */
.parallax-bg {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

@media (max-width: 768px) {
    .parallax-bg {
        background-attachment: scroll;
    }
}

/* Swiper Models Carousel */
.models-swiper .swiper-slide {
    width: auto;
    height: auto;
}

.models-swiper-prev,
.models-swiper-next {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.3s ease;
}

.models-swiper-prev:hover,
.models-swiper-next:hover {
    background: #A4896C;
    border-color: #A4896C;
    box-shadow: 0 4px 20px rgba(164, 137, 108, 0.3);
}

.models-swiper-prev:active,
.models-swiper-next:active {
    background: #8B7259;
    transform: scale(0.93);
}

.models-swiper-prev::after,
.models-swiper-next::after {
    font-size: 16px;
    font-weight: 600;
}

.models-swiper-prev.swiper-button-disabled,
.models-swiper-next.swiper-button-disabled {
    opacity: 0.2 !important;
    pointer-events: none;
}

html.theme-light .models-swiper-prev,
html.theme-light .models-swiper-next {
    color: #18181b;
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

html.theme-light .models-swiper-prev:hover,
html.theme-light .models-swiper-next:hover {
    background: #A4896C;
    border-color: #A4896C;
    color: #fff;
}

/* Page Header Breadcrumb */
.page-header {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 3rem;
}

.page-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(transparent, #0a0a0a);
}

/* Tabs */
.tab-btn {
    position: relative;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #b0b0b0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #A4896C;
    transition: width 0.3s ease;
}

.tab-btn:hover,
.tab-btn.active {
    color: #fff;
}

.tab-btn.active::after {
    width: 100%;
}

/* White-theme tab visibility */
html.theme-light .tab-btn {
    color: #71717a;
}
html.theme-light .tab-btn:hover,
html.theme-light .tab-btn.active {
    color: #18181b;
}
html.theme-light .tab-btn.active::after {
    background: #A4896C;
}

/* Smooth header transition */
.header-scrolled {
    background: rgba(10, 10, 10, 0.98) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Vehicle Detail Page Sections */
.vehicle-section {
    position: relative;
    overflow: hidden;
}

.vehicle-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(164, 137, 108, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

/* Stat circle */
.stat-circle {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-circle::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(#A4896C, transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.stat-circle:hover::before {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .hero-swiper {
        min-height: 500px;
        max-height: 700px;
    }
}

/* ── Mega Menu (matches cheryinternational.com) ─────────────── */
#mega-menu {
    --mm-u: calc(100vw / 19.2);
    transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1),
                opacity    0.3s ease,
                visibility 0.3s ease;
}

.mm-panel {
    height: 100vh;
    align-items: stretch;
}

/* COL 1 — brand logo rail */
.mm-col-left {
    width: 20%;
    background-image: url('../vendor/megamenu/bg.png');
    background-repeat: repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(0.77 * var(--mm-u));
}

.mm-cat-btn {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: calc(0.9 * var(--mm-u));
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 0;
    transition: all 0.3s;
}
.mm-cat-btn:last-child {
    border-bottom: 0;
}

.mm-cat-logo {
    width: calc(1.54 * var(--mm-u));
    opacity: 0.5;
    transition: opacity 0.3s;
}
.mm-cat-logo-tiggo {
    width: calc(1.4 * var(--mm-u));
}

.mm-cat-btn.active .mm-cat-logo {
    opacity: 1;
}

/* COL 2 — model name list */
.mm-col-center {
    width: 20%;
    background-image: linear-gradient(to bottom, #9d9790, #c1bbb6);
    padding: calc(0.77 * var(--mm-u)) calc(0.55 * var(--mm-u));
    z-index: 20;
    position: relative;
    overflow-y: auto;
}

.mm-model-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: calc(0.38 * var(--mm-u));
    font-size: calc(0.2 * var(--mm-u));
    opacity: 0.6;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    background: none;
    border: none;
    padding: 0;
    width: 100%;
    text-align: left;
    text-decoration: none;
    transition: opacity 0.2s;
}
.mm-model-btn:last-child {
    margin-bottom: 0;
}
.mm-model-btn:hover {
    opacity: 0.85;
}
.mm-model-btn.active {
    opacity: 1;
    font-weight: 700;
}

/* COL 3 — car preview panel */
.mm-col-right {
    width: 60%;
    background-size: 100% 100%;
    background-image: url('../vendor/megamenu/bg-car.jpg');
    position: relative;
    overflow: hidden;
}

.mm-close-btn {
    position: absolute;
    right: calc(0.66 * var(--mm-u));
    top: calc(0.66 * var(--mm-u));
    display: flex;
    gap: calc(0.1 * var(--mm-u));
    align-items: center;
    cursor: pointer;
    transform: scale(1);
    transition: all 0.3s ease-in-out;
    background: none;
    border: none;
    z-index: 30;
}
.mm-close-btn img {
    width: calc(0.2 * var(--mm-u));
    height: calc(0.2 * var(--mm-u));
}
.mm-close-btn span {
    font-size: calc(0.24 * var(--mm-u));
    color: #444;
    font-family: 'Poppins', sans-serif;
}
.mm-close-btn:hover {
    transform: scale(1.1);
}

/* Preview card */
.mm-preview-card {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: calc(0.9 * var(--mm-u)) calc(0.66 * var(--mm-u)) calc(1.0 * var(--mm-u)) calc(0.8 * var(--mm-u));
    will-change: opacity, transform;
    height: 100%;
    box-sizing: border-box;
}
.mm-preview-card.active {
    display: flex;
}

/* Watermark logo */
.mm-watermark {
    position: absolute;
    width: 90%;
    left: 50%;
    top: calc(-0.5 * var(--mm-u));
    opacity: 0.06;
    transform: translateX(-50%);
    pointer-events: none;
}
.mm-watermark img {
    width: 100%;
}

/* Car image */
.mm-car-box {
    width: 100%;
    position: relative;
    z-index: 2;
}
.mm-car-img {
    width: 82%;
    position: relative;
    z-index: 2;
    left: 10%;
    top: calc(0.4 * var(--mm-u));
    transition: transform 0.6s cubic-bezier(0.25,0.8,0.25,1), opacity 0.5s ease;
}
.mm-preview-card.active .mm-car-img {
    animation: mmCarSlide 0.6s cubic-bezier(0.25,0.8,0.25,1) forwards;
}
@keyframes mmCarSlide {
    from { opacity: 0; transform: translateX(40px) scale(0.97); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Specs bar */
.mm-detail-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: calc(1.2 * var(--mm-u));
    position: relative;
    z-index: 2;
}
.mm-detail-left {
    display: flex;
    align-items: center;
}
.mm-data-box {
    margin-right: calc(0.4 * var(--mm-u));
}
.mm-data-label {
    font-size: calc(0.13 * var(--mm-u));
    color: #888;
    font-family: 'Poppins', sans-serif;
}
.mm-data-value {
    font-size: calc(0.42 * var(--mm-u));
    display: flex;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #333;
}
#mega-menu .mm-data-value i {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 700;
    width: calc(1.0 * var(--mm-u));
}
.mm-data-value span {
    font-size: calc(0.16 * var(--mm-u));
    padding-left: calc(0.08 * var(--mm-u));
    padding-top: calc(0.18 * var(--mm-u));
    color: #999;
    font-weight: 400;
}
/* Text-only value (e.g., engine "1.5T") — wider auto width, no unit suffix */
.mm-data-value.mm-data-value-text {
    font-size: calc(0.36 * var(--mm-u));
}
#mega-menu .mm-data-value.mm-data-value-text i {
    width: auto;
    min-width: calc(0.7 * var(--mm-u));
    white-space: nowrap;
}

/* All Models grid overlay in mega menu (revealed on hover of View All Models) */
.mm-allmodels-grid {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #e8e6e2 0%, #d8d5d0 100%);
    padding: calc(0.55 * var(--mm-u)) calc(0.55 * var(--mm-u));
    display: none;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    column-gap: calc(0.3 * var(--mm-u));
    row-gap: calc(0.4 * var(--mm-u));
    overflow-y: auto;
    z-index: 25;
    align-content: start;
}
.mm-allmodels-grid.active {
    display: grid;
}

.mm-allmodel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #18181b;
    padding: calc(0.12 * var(--mm-u));
    border-radius: 8px;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.mm-allmodel-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.mm-allmodel-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.mm-allmodel-img img {
    max-width: 95%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.mm-allmodel-card:hover .mm-allmodel-img img {
    transform: scale(1.04);
}

.mm-allmodel-name {
    font-family: 'Poppins', sans-serif;
    font-size: calc(0.16 * var(--mm-u));
    font-weight: 500;
    letter-spacing: 0.05em;
    margin: calc(0.12 * var(--mm-u)) 0 calc(0.1 * var(--mm-u));
    color: #2a2a2a;
    text-align: center;
}

.mm-allmodel-btn {
    display: inline-block;
    background: #a4896c;
    color: #fff;
    font-size: calc(0.14 * var(--mm-u));
    font-weight: 600;
    padding: calc(0.1 * var(--mm-u)) calc(0.45 * var(--mm-u));
    border-radius: 4px;
    transition: background 0.2s ease;
    line-height: 1.4;
}
.mm-allmodel-card:hover .mm-allmodel-btn {
    background: #8b7259;
}

/* View All Models link in mega menu (col 2) */
.mm-view-all-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: calc(0.5 * var(--mm-u));
    padding: calc(0.25 * var(--mm-u)) calc(0.3 * var(--mm-u));
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: calc(0.18 * var(--mm-u));
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
    transition: opacity 0.2s, padding-left 0.2s;
}
.mm-view-all-btn:hover {
    opacity: 1;
    padding-left: calc(0.4 * var(--mm-u));
}
.mm-view-all-btn svg {
    width: calc(0.22 * var(--mm-u));
    height: calc(0.22 * var(--mm-u));
    flex-shrink: 0;
    transition: transform 0.2s;
}
.mm-view-all-btn:hover svg {
    transform: translateX(4px);
}

/* Explore button */
.mm-explore-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(3.4 * var(--mm-u));
    height: calc(0.7 * var(--mm-u));
    border-radius: calc(0.05 * var(--mm-u));
    font-size: calc(0.19 * var(--mm-u));
    letter-spacing: calc(0.02 * var(--mm-u));
    background-color: rgba(164, 137, 108, 0.8);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    transition: all 0.3s;
}
.mm-explore-btn:hover {
    background-color: #a4896c;
}

/* ── Video Ping Box ──────────────────────── */
.video-ping-box [data-vpb-anim] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.video-ping-box.vpb-visible [data-vpb-anim] {
    opacity: 1;
    transform: translateY(0);
}
.video-ping-box.vpb-visible [data-vpb-anim]:nth-child(1) { transition-delay: 0s; }
.video-ping-box.vpb-visible [data-vpb-anim]:nth-child(2) { transition-delay: 0.1s; }
.video-ping-box.vpb-visible [data-vpb-anim]:nth-child(3) { transition-delay: 0.2s; }
.video-ping-box.vpb-visible [data-vpb-anim]:nth-child(4) { transition-delay: 0.3s; }

#vpb-modal.vpb-open {
    opacity: 1;
    visibility: visible;
}

/* ── Section 2 White Theme ────────────────── */
.s2-tab-btn.active .s2-tab-indicator {
    opacity: 1;
}
.s2-tab-btn.active .s2-tab-name {
    color: #111;
    font-weight: 700;
}
.s2-tab-btn.active .s2-arrow {
    color: #A4896C;
}
.s2-tab-btn:hover .s2-tab-indicator {
    opacity: 0.4;
}

.s2-panel {
    will-change: opacity, transform;
}

.s2-car-img {
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15));
    transform: translateX(20px);
    transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.5s ease;
}
.s2-panel.opacity-100 .s2-car-img {
    transform: translateX(0);
}

@media (max-width: 1024px) {
    #s2-tabs {
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
    }
    .s2-tab-btn {
        display: inline-flex;
        width: auto;
        padding: 8px 16px;
    }
    #s2-tab-list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* ── RTL (Arabic) Support ────────────────────── */
[dir="rtl"] body {
    font-family: 'Cairo', system-ui, sans-serif;
}

[dir="rtl"] .font-display {
    font-family: 'Cairo', system-ui, sans-serif;
}

/* Flip flex rows for RTL */
[dir="rtl"] .flex-row-rtl {
    flex-direction: row-reverse;
}

/* RTL — flip the FAB rail to the left edge */
[dir="rtl"] .fab-rail {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 12px 12px 0;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.25);
}
[dir="rtl"] .fab-item .fab-label {
    right: auto;
    left: calc(100% + 12px);
    transform: translateY(-50%) translateX(-8px);
}
[dir="rtl"] .fab-item .fab-label::after {
    left: auto;
    right: 100%;
    border-left-color: transparent;
    border-right-color: #18181b;
}
[dir="rtl"] .fab-item:hover .fab-label,
[dir="rtl"] .fab-item:focus-visible .fab-label {
    transform: translateY(-50%) translateX(0);
}
@media (max-width: 640px) {
    [dir="rtl"] .fab-rail {
        right: auto;
        left: 16px;
        border-radius: 999px;
    }
    [dir="rtl"] .fab-item .fab-label {
        left: 50%;
        right: auto;
        bottom: calc(100% + 10px);
        top: auto;
        transform: translateX(-50%) translateY(8px);
    }
    [dir="rtl"] .fab-item .fab-label::after {
        left: 50%;
        right: auto;
        top: 100%;
        transform: translateX(-50%);
        border-top-color: #18181b;
        border-right-color: transparent;
    }
}

/* Mega menu RTL */
[dir="rtl"] #mega-menu {
    direction: rtl;
}
[dir="rtl"] .mm-panel {
    flex-direction: row-reverse;
}
[dir="rtl"] .mm-model-btn {
    text-align: right;
}
[dir="rtl"] .mm-close-btn {
    right: auto;
    left: calc(0.66 * var(--mm-u));
}
[dir="rtl"] .mm-car-img {
    left: auto;
    right: 10%;
}
[dir="rtl"] .mm-preview-card {
    direction: rtl;
}
[dir="rtl"] .mm-data-value span {
    padding-left: 0;
    padding-right: calc(0.1 * var(--mm-u));
}
[dir="rtl"] .mm-data-box {
    margin-right: 0;
    margin-left: calc(0.5 * var(--mm-u));
}

/* Section 2 tab border */
[dir="rtl"] #s2-tabs {
    border-right: none;
    border-left: 1px solid #e8e0d8;
}

[dir="rtl"] .s2-tab-btn {
    border-right: none;
    border-left: 3px solid transparent;
    text-align: right;
}

[dir="rtl"] .s2-tab-btn.s2-active {
    border-left-color: #A4896C;
}


/* Ensure Arabic text renders properly */
[dir="rtl"] p,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] a,
[dir="rtl"] button,
[dir="rtl"] span,
[dir="rtl"] li {
    font-family: 'Cairo', system-ui, sans-serif;
}

/* Header topbar RTL alignment */
[dir="rtl"] #main-header .flex.items-center.justify-between {
    flex-direction: row-reverse;
}

/* Tracking/letter-spacing — reduce for Arabic */
[dir="rtl"] .tracking-wider,
[dir="rtl"] .tracking-widest,
[dir="rtl"] [class*="tracking-["] {
    letter-spacing: 0;
}

/* Footer grid RTL */
[dir="rtl"] footer .grid {
    direction: rtl;
}

/* Breadcrumb separator — flip chevron for RTL */
[dir="rtl"] nav[aria-label] ol li svg {
    transform: scaleX(-1);
}

/* Arrow icons in CTAs — flip for RTL */
[dir="rtl"] .inline-flex svg:last-child,
[dir="rtl"] a.inline-flex > svg {
    transform: scaleX(-1);
}

/* Form inputs RTL text alignment */
[dir="rtl"] .form-input,
[dir="rtl"] .form-select,
[dir="rtl"] textarea {
    text-align: right;
}

/* Form labels RTL */
[dir="rtl"] .form-label {
    text-align: right;
}

/* Contact info flex RTL */
[dir="rtl"] .glass .flex.gap-4 {
    flex-direction: row-reverse;
}

/* Model nav RTL scroll */
[dir="rtl"] #model-nav {
    direction: rtl;
}

/* Model card text alignment */
[dir="rtl"] .model-card {
    text-align: right;
}

/* Spec labels in model cards */
[dir="rtl"] .spec-number {
    direction: ltr;
    unicode-bidi: embed;
}

/* Swiper arrows RTL flip */
[dir="rtl"] .swiper-button-next::after,
[dir="rtl"] .swiper-button-prev::after {
    transform: scaleX(-1);
}

/* Tab buttons RTL */
[dir="rtl"] [role="tablist"] {
    flex-direction: row-reverse;
}

/* News card text */
[dir="rtl"] .news-card {
    text-align: right;
}

/* Feature card text */
[dir="rtl"] .feature-card {
    text-align: right;
}

/* ── Vehicle Detail Page ────────────────── */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.model-nav-tab {
    position: relative;
}
.model-nav-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #A4896C;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}
.model-nav-tab:hover::after,
.model-nav-tab.active::after {
    width: 100%;
}

.color-swatch {
    cursor: pointer;
}
.color-swatch:hover span:first-child {
    transform: scale(1.15);
}

/* ── car_wg_box Design Showcase (Chery International replica) ── */
.car_wg_box {
    position: relative;
    height: 200vh;
    width: 100%;
}
.car_wg {
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    background: rgb(219, 220, 215);
}
.car_wg_bk {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
.car_wg_main {
    transition: all 1s;
}
.car_wg_top {
    position: absolute;
    left: clamp(40px, 5.2vw, 100px);
    top: clamp(80px, 6.25vw, 120px);
    opacity: 1;
    filter: blur(0);
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    transition-duration: 1s;
    color: rgb(98, 82, 59);
    z-index: 5;
}
.cwt_t1 {
    font-size: clamp(12px, 1.04vw, 20px);
    font-weight: 700;
    color: rgba(98, 82, 59, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.cwt_t2 {
    font-size: clamp(28px, 2.6vw, 50px);
    line-height: 1;
    font-weight: 800;
    margin-top: 15px;
    text-transform: uppercase;
}
.cwt_t3 {
    font-size: clamp(12px, 0.94vw, 18px);
    line-height: 2.1;
    margin-top: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cwt_t4 {
    font-size: clamp(16px, 1.25vw, 24px);
    margin-top: 20px;
    line-height: 2;
    letter-spacing: 0.04em;
    font-weight: 800;
}

/* Hotspot buttons */
.flicker_btn {
    position: absolute;
    z-index: 10;
}
.hotspot-point {
    display: block;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transform: scale(1);
    border: 1px solid transparent;
    transition: border 300ms;
    position: relative;
}
.hotspot-point:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    transform: translate(-50%, -50%);
    transition: transform 300ms, background 300ms;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid #fff;
}
.hotspot-pulsing:before {
    width: 24px;
    height: 24px;
}
.hotspot-pulsing::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    margin-left: -13px;
    transform-origin: center;
    border-radius: 50%;
    box-sizing: border-box;
    animation: hotspotPulseAnim 2s infinite;
    border: 2px solid #fff;
    color: #fff;
}
.flicker_btn:hover .hotspot-pulsing::after,
.flicker_btn.active .hotspot-pulsing::after {
    background-color: transparent;
    animation: hotspotPulseHover 2s infinite;
}
.flicker_btn:hover .hotspot-point:before,
.flicker_btn.active .hotspot-point:before {
    background-color: transparent;
    border-color: #fff;
}

@keyframes hotspotPulseAnim {
    0%   { opacity: 0; border-width: 2px; transform: scale(0.5); background-color: rgba(255,255,255,.8); }
    50%  { opacity: 1; transform: scale(0.8); border-width: 2px; background-color: rgba(255,255,255,.8); }
    100% { opacity: 0; border-width: 1px; background-color: rgba(255,255,255,.1); transform: scale(2.5); }
}
@keyframes hotspotPulseHover {
    0%   { opacity: 0; border-width: 2px; transform: scale(0.5); background-color: #fff; }
    50%  { opacity: 1; transform: scale(0.8); border-width: 2px; background-color: #fff; }
    100% { opacity: 0; border-width: 1px; background-color: #fff; transform: scale(2.5); }
}

/* Slide-in popup panel */
.car_wg_pop {
    position: absolute;
    top: 0;
    z-index: 10;
    height: 100vh;
    width: 50%;
    right: -55vw;
    transition: all 1s;
    background-color: rgb(219, 220, 215);
    color: rgb(98, 82, 59);
}
.car_wg_pop_title {
    position: absolute;
    top: clamp(80px, 6.25vw, 120px);
    left: clamp(40px, 4.17vw, 80px);
    display: flex;
    font-size: 16px;
    font-weight: 700;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.cwpt_line {
    background: rgb(98, 82, 59);
    width: clamp(60px, 7.8vw, 150px);
    height: 1px;
    margin: 0 20px;
}
.wg_pop_close {
    position: absolute;
    left: -25px;
    top: 55%;
    width: 50px;
    height: 50px;
    background-color: #fff;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 15;
    color: rgb(98, 82, 59);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.wg_pop_close:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.wg_pop_text {
    padding: clamp(120px, 9.4vw, 180px) clamp(40px, 4.17vw, 80px) 0;
    position: relative;
}
.wpt_min {
    position: absolute;
    width: calc(100% - clamp(80px, 8.3vw, 160px));
    left: clamp(40px, 4.17vw, 80px);
    top: clamp(120px, 9.4vw, 180px);
    opacity: 0;
    transition: all 1s;
}
.wpt_min:first-child {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
}
.wpt_min.active {
    opacity: 1;
}
.wpt_min > div:first-child {
    font-size: clamp(20px, 1.56vw, 30px);
    line-height: 1;
    font-weight: 700;
}
.wpt_min .con {
    font-size: clamp(14px, 1.04vw, 20px);
    line-height: 1.6;
    margin-top: 20px;
}
.wg_pop_img {
    position: relative;
    width: calc(100% - clamp(80px, 8.3vw, 160px));
    margin-left: clamp(40px, 4.17vw, 80px);
    margin-top: clamp(30px, 3.13vw, 60px);
}
.wg_pop_img img {
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 1s;
    border-radius: 4px;
}
.wg_pop_img img:first-child {
    position: relative;
}
.wg_pop_img img.active {
    opacity: 1;
}

/* Open state transitions */
.car_wg.open .car_wg_top {
    opacity: 0;
    filter: blur(60px);
    transform: scale3d(1, 0.1, 1) translate3d(0, 50%, 0);
    transform-origin: bottom left;
    transition-property: filter, opacity, transform;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car_wg.open .car_wg_bottom {
    opacity: 0;
    filter: blur(60px);
    transform: scale3d(1, 0.1, 1) translate3d(0, 50%, 0);
    transform-origin: bottom left;
    transition-property: filter, opacity, transform;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car_wg.open .car_wg_main {
    transform: translateX(-40%);
}
.car_wg.open .car_wg_pop {
    right: 0;
}

/* Dimension bar */
.car_wg_bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.1);
    transition-duration: 1s;
}

/* Mobile features swiper */
.car_wg_pop_mb {
    display: none;
}
.car_mb_sw_text {
    margin-top: 16px;
    color: rgb(98, 82, 59);
}
.car_mb_sw_text > div:first-child {
    font-size: 18px;
    font-weight: 700;
}
.car_mb_sw_text .con {
    font-size: 14px;
    margin-top: 8px;
    line-height: 1.6;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .car_wg_box { height: auto; }
    .car_wg { position: relative; height: auto; }
    .car_wg_bk { height: auto; min-height: 50vh; }
    .car_wg_top { left: 24px; top: 60px; }
    .cwt_t2 { font-size: 24px; line-height: 1.15; }
    .cwt_t3 { font-size: 12px; line-height: 1.7; padding-right: 20px; margin-top: 12px; }
    .cwt_t4 { font-size: 18px; line-height: 1.4; margin-top: 12px; }
    .flicker_btn { display: none !important; }
    .car_wg_pop { display: none !important; }
    .car_wg_pop_mb {
        position: relative;
        display: block;
        padding: 24px;
        background-color: rgb(219, 220, 215);
    }
    .car_wg_pop_mb .swiper-slide { background-color: rgb(219, 220, 215); }
    .car_wg_pop_mb .swiper-slide img { width: 100%; border-radius: 4px; }
    .car_wg_pop_mb .swiper-pagination-bullet {
        opacity: 1;
        border-radius: 0;
        width: 30px;
        height: 2px;
        margin: 0 4px !important;
        background: rgba(98, 82, 59, 0.3);
    }
    .car_wg_pop_mb .swiper-pagination-bullet-active {
        background-color: rgb(97, 81, 57);
    }
}

/* ── ci-unit: Full-viewport sticky-scroll section banners ── */
.ci-unit {
    position: relative;
    height: 200vh;
}
.ci-unit-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}
.ci-unit-bg {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}
.ci-unit-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}
.ci-unit-title {
    position: absolute;
    bottom: clamp(60px, 5.2vw, 100px);
    left: clamp(24px, 2.6vw, 50px);
    color: #fff;
    transition: all 1s;
    z-index: 2;
}
.ci-unit-label {
    opacity: 0.6;
    font-size: clamp(12px, 1.04vw, 20px);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}
.ci-unit-heading {
    font-size: clamp(28px, 2.6vw, 50px);
    line-height: 1;
    margin-top: 15px;
    text-transform: uppercase;
    font-weight: 800;
}
.ci-unit-specs {
    position: absolute;
    bottom: -30px;
    left: clamp(24px, 2.6vw, 50px);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - clamp(48px, 5.2vw, 100px));
    opacity: 0;
    transition: all 1s;
    z-index: 2;
}
.ci-unit-spec {
    margin-right: clamp(30px, 3.1vw, 60px);
    margin-bottom: 10px;
}
.ci-unit-spec-label {
    font-size: clamp(12px, 1.04vw, 20px);
    opacity: 0.8;
}
.ci-unit-spec-value {
    font-size: clamp(24px, 2.6vw, 50px);
    line-height: 1;
    margin-top: 12px;
    font-weight: 700;
}
.ci-unit.ci-unit-active .ci-unit-title {
    bottom: clamp(140px, 11.5vw, 220px);
    opacity: 0;
}
.ci-unit.ci-unit-active .ci-unit-specs {
    bottom: clamp(50px, 5.2vw, 100px);
    opacity: 1;
}

@media (max-width: 768px) {
    .ci-unit { height: auto; }
    .ci-unit-inner { position: relative; height: auto; min-height: 60vh; }
    .ci-unit-bg { height: auto; min-height: 60vh; }
    .ci-unit-title { bottom: auto; top: 40px; left: 24px; }
    .ci-unit-heading { font-size: 24px; }
    .ci-unit-specs {
        position: relative;
        bottom: auto; left: auto;
        opacity: 1;
        padding: 20px 24px;
        width: 100%;
        gap: 16px;
        background: rgba(0,0,0,0.7);
    }
    .ci-unit-spec { width: 45%; margin-right: 0; }
    .ci-unit-spec-value { font-size: 22px; }
}

/* ── ci-interior-wide: Ultra-wide cocooning cockpit (after design hotspots) ── */
.ci-interior-wide {
    background-color: rgb(219, 220, 215);
    padding: clamp(40px, 4vw, 80px) clamp(20px, 5.2vw, 80px) clamp(30px, 3vw, 60px);
    color: rgb(98, 82, 59);
}
.ci-interior-wide-title1 {
    font-size: clamp(12px, 1.04vw, 20px);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 12px;
}
.ci-interior-wide-title2 {
    font-size: clamp(22px, 2.2vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    margin-bottom: clamp(24px, 2.5vw, 48px);
}
.ci-interior-wide-grid {
    display: flex;
    gap: 1.8%;
    align-items: flex-start;
}
.ci-interior-wide-primary {
    flex: 1.15;
    position: relative;
    display: flex;
    flex-direction: column;
}
.ci-interior-wide-stack {
    flex: 0.85;
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.04vw, 20px);
}
.ci-interior-wide-secondary {
    position: relative;
    display: flex;
    flex-direction: column;
}
.ci-interior-wide-caption {
    display: block;
    margin-top: 10px;
    font-size: clamp(10px, 0.78vw, 14px);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
}
@media (max-width: 768px) {
    .ci-interior-wide-grid {
        flex-direction: column;
    }
    .ci-interior-wide-primary,
    .ci-interior-wide-stack {
        flex: 1;
        width: 100%;
    }
}

.comf-text .comf-tags.comf-tags-secondary {
    margin-top: clamp(8px, 0.8vw, 14px);
    font-size: clamp(10px, 0.94vw, 18px);
}

/* ── ci-comfortable: Warm beige feature grid (exact comfortable replica) ── */
.ci-comfortable {
    background-color: rgb(219, 220, 215);
    padding: 0 clamp(20px, 5.2vw, 80px) clamp(20px, 5.2vw, 80px);
    color: rgb(98, 82, 59);
}
.ci-comfortable.ci-comfortable-padtop {
    padding-top: clamp(20px, 2.6vw, 50px);
}
.ci-comfortable .ci-com-title {
    font-size: clamp(20px, 1.46vw, 28px);
    font-weight: 700;
    color: rgb(98, 82, 59);
    margin-bottom: clamp(10px, 0.78vw, 15px);
    text-transform: uppercase;
}

/* comf_box: Power section 50/50 split layout */
.comf-box {
    display: flex;
    gap: 1.8%;
    margin-top: clamp(10px, 1.04vw, 20px);
}
.comf-box img { width: 100%; display: block; }
.comf-left { width: 49.1%; position: relative; }
.comf-right { width: 49.1%; position: relative; }
.comf-right-top { position: relative; }
.comf-right-bot { position: relative; margin-top: clamp(12px, 1.7vw, 26px); }

.comf-text {
    position: absolute;
    z-index: 2;
}
.comf-text-tl { top: clamp(20px, 3.6vw, 70px); left: clamp(16px, 4.2vw, 80px); }
.comf-text-tr { top: clamp(20px, 3.6vw, 70px); right: clamp(16px, 4.2vw, 80px); text-align: right; }
.comf-text-br { top: clamp(16px, 2.6vw, 50px); right: clamp(16px, 2.6vw, 50px); text-align: right; }

.comf-text .comf-title {
    color: rgb(190, 135, 81);
    font-size: clamp(14px, 1.2vw, 23px);
    font-weight: 700;
}
.comf-text .comf-desc {
    font-size: clamp(11px, 0.83vw, 16px);
    color: rgb(98, 82, 59);
    margin-top: 6px;
    line-height: 1.5;
}
.comf-stat {
    color: rgb(98, 82, 59);
    font-size: clamp(28px, 2.5vw, 48px);
    font-weight: 700;
    margin-top: clamp(12px, 1.3vw, 25px);
    position: relative;
    display: inline-block;
}
.comf-stat::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: rgb(98, 82, 59);
    margin-top: 4px;
}
.comf-stat-label {
    font-size: clamp(11px, 0.83vw, 16px);
    font-weight: 600;
    color: rgb(98, 82, 59);
    margin-top: clamp(8px, 1.04vw, 20px);
    text-transform: uppercase;
}
.comf-stat-row {
    display: flex;
    gap: clamp(16px, 2.1vw, 40px);
    margin-top: clamp(12px, 1.3vw, 25px);
}
.comf-stat-row .comf-stat { margin-top: 0; }
.comf-text .comf-tags {
    margin-top: clamp(16px, 2.1vw, 40px);
    color: rgb(98, 82, 59);
    font-size: clamp(11px, 1.04vw, 20px);
    font-weight: 700;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .comf-box { flex-direction: column; gap: 16px; }
    .comf-left, .comf-right { width: 100%; }
    .comf-text-tl { top: 16px; left: 16px; }
    .comf-text-tr { top: 16px; right: 16px; }
    .comf-text-br { top: 16px; right: 16px; }
}

/* comfortable-box: 3-image grid (1 large left + 2 stacked right) */
.comfortable-box {
    display: flex;
    gap: 1.8%;
    margin-top: clamp(10px, 1.56vw, 30px);
}
.comfortable-box img { width: 100%; display: block; }
.comfortable-r { width: 49.1%; position: relative; }
.comfortable-l { width: 49.1%; }
.comfortable-l-top { position: relative; }
.comfortable-l-bot { position: relative; margin-top: clamp(12px, 1.7vw, 26px); }
.comfortable-r img, .comfortable-l-top img, .comfortable-l-bot img {
    border-radius: 4px;
}

@media (max-width: 768px) {
    .comfortable-box { flex-direction: column; gap: 16px; }
    .comfortable-r, .comfortable-l { width: 100%; }
}

/* ── ci-tab-section: Feature carousel (dark brown / light) ── */
.ci-tab-section {
    padding: clamp(40px, 5.2vw, 100px);
    background-color: rgb(111, 82, 68);
    color: #fff;
}
.ci-tab-section.ci-tab-light {
    background-color: rgb(219, 220, 215);
    color: rgb(98, 82, 59);
}
.ci-tab-title {
    font-size: clamp(18px, 1.46vw, 28px);
    font-weight: 600;
    margin-bottom: clamp(16px, 1.04vw, 20px);
    text-transform: uppercase;
}
.ci-tab-section.ci-tab-light .ci-tab-title {
    color: rgb(98, 82, 59);
}
.ci-tab-swiper .swiper-slide {
    overflow: hidden;
    border-radius: 4px;
}
.ci-tab-swiper .swiper-slide img {
    width: 100%;
    display: block;
    border-radius: 4px;
}
.ci-tab-slide-text {
    margin-top: 12px;
}
.ci-tab-slide-heading {
    font-size: clamp(14px, 1.04vw, 20px);
    font-weight: 700;
}
.ci-tab-slide-desc {
    font-size: clamp(12px, 0.83vw, 16px);
    margin-top: 6px;
    opacity: 0.8;
    line-height: 1.5;
}
.ci-tab-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: clamp(16px, 1.56vw, 30px);
}
.ci-tab-progress {
    flex: 1;
    height: 2px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
}
.ci-tab-section.ci-tab-light .ci-tab-progress {
    background: rgba(98, 82, 59, 0.2);
}
.ci-tab-progress .swiper-pagination-progressbar {
    background: #fff;
}
.ci-tab-section.ci-tab-light .ci-tab-progress .swiper-pagination-progressbar {
    background: rgb(98, 82, 59);
}
.ci-tab-arrow {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    color: #fff;
    background: transparent;
    flex-shrink: 0;
}
.ci-tab-arrow:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.1);
}
.ci-tab-section.ci-tab-light .ci-tab-arrow {
    border-color: rgba(98, 82, 59, 0.3);
    color: rgb(98, 82, 59);
}
.ci-tab-section.ci-tab-light .ci-tab-arrow:hover {
    border-color: rgb(98, 82, 59);
    background: rgba(98, 82, 59, 0.1);
}
.ci-tab-arrow.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}

/* Tab thumbnails row (comfort tab_change color_1 pattern) */
.ci-tab-thumbs {
    display: flex;
    gap: clamp(8px, 0.52vw, 10px);
    margin-top: clamp(12px, 1.04vw, 20px);
}
.ci-tab-thumb {
    width: clamp(60px, 5.2vw, 100px);
    height: clamp(40px, 3.4vw, 65px);
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.4s;
    border: 2px solid transparent;
}
.ci-tab-thumb.active {
    opacity: 1;
    border-color: rgb(190, 135, 81);
}
.ci-tab-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ci-tab-text-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: clamp(12px, 1.04vw, 20px);
}
.ci-tab-text-tab {
    padding: clamp(8px, 0.52vw, 10px) 0;
    cursor: pointer;
    transition: all 0.3s;
    border-bottom: 1px solid rgba(98, 82, 59, 0.15);
}
.ci-tab-text-tab .ci-tab-tt-title {
    font-size: clamp(13px, 0.94vw, 18px);
    font-weight: 700;
    color: rgba(98, 82, 59, 0.5);
    transition: color 0.3s;
}
.ci-tab-text-tab .ci-tab-tt-desc {
    font-size: clamp(11px, 0.73vw, 14px);
    color: rgba(98, 82, 59, 0.4);
    margin-top: 4px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s;
    line-height: 1.5;
}
.ci-tab-text-tab.active .ci-tab-tt-title {
    color: rgb(98, 82, 59);
}
.ci-tab-text-tab.active .ci-tab-tt-desc {
    max-height: 60px;
    color: rgba(98, 82, 59, 0.7);
}
.ci-tab-section.ci-tab-light .ci-tab-text-tab {
    border-bottom-color: rgba(98, 82, 59, 0.15);
}

/* safe_text_2: Dark variant for intelligent ADAS features */
.ci-safe-text.ci-safe-text-dark {
    background-color: rgb(111, 82, 68);
    padding-top: 0;
}
.ci-safe-text.ci-safe-text-dark .ci-safe-text-body {
    background: linear-gradient(to right, rgb(172, 137, 117), rgb(154, 112, 88));
    color: #fff;
}
.ci-safe-text.ci-safe-text-dark .ci-safe-text-label { color: rgba(255,255,255,0.7); }
.ci-safe-text.ci-safe-text-dark .ci-safe-text-heading { color: #fff; }
.ci-safe-text.ci-safe-text-dark .ci-safe-text-desc { color: rgba(255,255,255,0.85); }

@media (max-width: 768px) {
    .ci-tab-section { padding: clamp(24px, 5vw, 40px); }
    .ci-tab-thumbs { display: none; }
}

/* ── ci-safety-intro: Full-width safety intro banner ── */
.ci-safety-intro {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.ci-safety-intro img {
    width: 100%;
    display: block;
}
.ci-safety-intro-text {
    position: absolute;
    bottom: clamp(40px, 5.2vw, 100px);
    left: clamp(24px, 2.6vw, 50px);
    color: #fff;
    font-weight: 700;
    z-index: 2;
}
.ci-safety-intro-label {
    font-size: clamp(14px, 1.04vw, 20px);
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}
.ci-safety-intro-heading {
    font-size: clamp(28px, 2.86vw, 55px);
    line-height: 1.1;
    margin-top: 15px;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease 0.2s;
    max-width: 70%;
}
.ci-safety-intro-desc {
    font-size: clamp(12px, 1.04vw, 20px);
    line-height: 1.8;
    margin-top: 20px;
    max-width: 55%;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease 0.4s;
}
.ci-safety-intro.ci-visible .ci-safety-intro-label,
.ci-safety-intro.ci-visible .ci-safety-intro-heading,
.ci-safety-intro.ci-visible .ci-safety-intro-desc {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .ci-safety-intro-text { bottom: 24px; left: 20px; }
    .ci-safety-intro-heading { max-width: 90%; font-size: 24px; }
    .ci-safety-intro-desc { max-width: 90%; }
}

/* ── ci-safe-text: Side-by-side feature cards ── */
.ci-safe-text {
    background-color: rgb(219, 220, 215);
    padding: clamp(24px, 2.6vw, 50px);
}
.ci-safe-text-item {
    display: flex;
    justify-content: space-between;
    gap: 0;
}
.ci-safe-text-item + .ci-safe-text-item {
    margin-top: 0;
}
.ci-safe-text-item.ci-reverse {
    flex-direction: row-reverse;
}
.ci-safe-text-img {
    width: 50%;
    overflow: hidden;
    border-radius: 4px;
}
.ci-safe-text-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.ci-safe-text-img:hover img {
    transform: scale(1.03);
}
.ci-safe-text-body {
    width: 50%;
    padding: clamp(24px, 2.6vw, 50px) clamp(20px, 2.1vw, 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, rgb(219, 220, 215), rgb(205, 206, 200));
}
.ci-safe-text-item.ci-dark-body .ci-safe-text-body {
    background: linear-gradient(to right, rgb(172, 137, 117), rgb(154, 112, 88));
    color: #fff;
}
.ci-safe-text-label {
    font-size: clamp(11px, 0.83vw, 16px);
    font-weight: 700;
    text-transform: uppercase;
    color: rgb(98, 82, 59);
    margin-bottom: 8px;
}
.ci-safe-text-item.ci-dark-body .ci-safe-text-label {
    color: rgba(255,255,255,0.7);
}
.ci-safe-text-lead {
    font-size: clamp(13px, 1vw, 17px);
    font-weight: 500;
    color: rgb(98, 82, 59);
    opacity: 0.95;
    margin-top: 10px;
    line-height: 1.5;
}
.ci-safe-text-item.ci-dark-body .ci-safe-text-lead {
    color: rgba(255, 255, 255, 0.88);
}
.ci-safe-text-heading {
    font-size: clamp(18px, 1.3vw, 25px);
    font-weight: 700;
    color: rgb(98, 82, 59);
    line-height: 1.3;
}
.ci-safe-text-item.ci-dark-body .ci-safe-text-heading {
    color: #fff;
}
.ci-safe-text-desc {
    font-size: clamp(12px, 0.83vw, 16px);
    line-height: 1.8;
    margin-top: 16px;
    color: rgb(98, 82, 59);
    opacity: 0.85;
}
.ci-safe-text-item.ci-dark-body .ci-safe-text-desc {
    color: rgba(255,255,255,0.85);
}

@media (max-width: 768px) {
    .ci-safe-text-item,
    .ci-safe-text-item.ci-reverse { flex-direction: column; }
    .ci-safe-text-img, .ci-safe-text-body { width: 100%; }
    .ci-safe-text-body { padding: 20px; }
}

/* ── safety_other Stats Cycling ──────── */
.safety-cycle-item {
    border-left-width: 2px;
    border-left-style: solid;
}
.safety-cycle-item.bg-white\/5 {
    background: rgba(255,255,255,0.05);
}

.safety-sw-pagination .swiper-pagination-bullet {
    background: rgba(255,255,255,0.3);
    opacity: 1;
}
.safety-sw-pagination .swiper-pagination-bullet-active {
    background: #A4896C;
    width: 24px;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   STANDARD TEMPLATE — Numbered sections with swipers (Tiggo 8/7)
   ══════════════════════════════════════════════════════════════════ */

.ci-std-section {
    padding: clamp(40px, 5vw, 80px) clamp(16px, 2.6vw, 50px);
    background: #111;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.ci-std-section.ci-std-alt {
    background: #161616;
}

.ci-std-header {
    max-width: 1280px;
    margin: 0 auto clamp(24px, 2.6vw, 48px);
    text-align: center;
}
.ci-std-num {
    font-size: clamp(48px, 5vw, 96px);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, rgba(164,137,108,0.4), rgba(164,137,108,0.1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}
.ci-std-label {
    font-size: clamp(10px, 0.78vw, 13px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #A4896C;
    margin-bottom: 12px;
}
.ci-std-heading {
    font-size: clamp(22px, 2vw, 38px);
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.ci-std-specs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(16px, 2vw, 40px);
    max-width: 1280px;
    margin: 0 auto clamp(24px, 2.6vw, 48px);
    padding: clamp(16px, 1.5vw, 24px) 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ci-std-spec {
    text-align: center;
    min-width: 120px;
}
.ci-std-spec-value {
    font-size: clamp(18px, 1.5vw, 28px);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.ci-std-spec-label {
    font-size: clamp(10px, 0.7vw, 12px);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
}

.ci-std-swiper {
    max-width: 1280px;
    margin: 0 auto;
    overflow: hidden;
}
.ci-std-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.ci-std-card:hover {
    border-color: rgba(164,137,108,0.3);
    transform: translateY(-4px);
}
.ci-std-card-img {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #1a1a1a;
}
.ci-std-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.ci-std-card:hover .ci-std-card-img img {
    transform: scale(1.05);
}
.ci-std-card-body {
    padding: clamp(16px, 1.3vw, 24px);
}
.ci-std-card-title {
    font-size: clamp(14px, 1vw, 18px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.3;
}
.ci-std-card-value {
    font-size: clamp(12px, 0.83vw, 15px);
    font-weight: 600;
    color: #A4896C;
    margin-bottom: 6px;
}
.ci-std-card-desc {
    font-size: clamp(12px, 0.78vw, 14px);
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
}

.ci-std-swiper-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: clamp(16px, 1.5vw, 24px);
    padding: 0 4px;
}
.ci-std-pagination {
    position: static !important;
}
.ci-std-pagination .swiper-pagination-bullet {
    background: rgba(255,255,255,0.3);
    opacity: 1;
    width: 8px;
    height: 8px;
}
.ci-std-pagination .swiper-pagination-bullet-active {
    background: #A4896C;
    width: 24px;
    border-radius: 4px;
}
.ci-std-arrows {
    display: flex;
    gap: 8px;
}
.ci-std-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.ci-std-arrow:hover {
    border-color: #A4896C;
    color: #A4896C;
    background: rgba(164,137,108,0.1);
}
.ci-std-arrow.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .ci-std-specs { gap: 16px; }
    .ci-std-spec { min-width: 80px; }
}


/* ══════════════════════════════════════════════════════════════════
   SIMPLE TEMPLATE — Clean grid layout (Arrizo, Tiggo 4 Pro)
   ══════════════════════════════════════════════════════════════════ */

.ci-specs-table {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
}
.ci-specs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(12px, 1vw, 18px) clamp(16px, 1.5vw, 28px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ci-specs-row:last-child {
    border-bottom: none;
}
.ci-specs-row:hover {
    background: rgba(255,255,255,0.02);
}
.ci-specs-label {
    font-size: clamp(12px, 0.83vw, 15px);
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.ci-specs-value {
    font-size: clamp(14px, 1vw, 18px);
    color: #fff;
    font-weight: 700;
    text-align: right;
}

.ci-simple-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(16px, 1.5vw, 24px);
}
.ci-simple-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.ci-simple-card:hover {
    border-color: rgba(164,137,108,0.3);
    transform: translateY(-2px);
}
.ci-simple-card-img {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #1a1a1a;
}
.ci-simple-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.ci-simple-card:hover .ci-simple-card-img img {
    transform: scale(1.05);
}
.ci-simple-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a, #222);
}
.ci-simple-card-body {
    padding: clamp(14px, 1.2vw, 20px);
}
.ci-simple-card-title {
    font-size: clamp(14px, 1vw, 17px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.3;
}
.ci-simple-card-value {
    font-size: clamp(12px, 0.83vw, 14px);
    font-weight: 600;
    color: #A4896C;
    margin-bottom: 4px;
}
.ci-simple-card-desc {
    font-size: clamp(11px, 0.73vw, 13px);
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .ci-simple-grid {
        grid-template-columns: 1fr;
    }
    .ci-specs-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .ci-specs-value {
        text-align: left;
    }
}

/* ═══════════════════════════════════════════════════════════════
   THEME: LIGHT (html.theme-light)
   ═══════════════════════════════════════════════════════════════ */

html.theme-light {
    color-scheme: light;
}

html.theme-light body {
    background-color: #f4f4f5 !important;
    color: #18181b !important;
}

html.theme-light ::selection {
    background: rgba(164, 137, 108, 0.35);
    color: #0a0a0a;
}

html.theme-light ::-webkit-scrollbar-track {
    background: #e4e4e7;
}
html.theme-light ::-webkit-scrollbar-thumb {
    background: #a1a1aa;
}
html.theme-light ::-webkit-scrollbar-thumb:hover {
    background: #A4896C;
}

/* —— Header —— */
html.theme-light #main-header #main-nav {
    background: #dad9d7 !important;
    border-bottom: none !important;
}

html.theme-light #main-header #main-nav.header-scrolled {
    background: #dad9d7 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
}

html.theme-light #main-header #header-top-bar {
    background: #dad9d7 !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
    color: #52525b !important;
}

html.theme-light #main-header a,
html.theme-light #main-header button {
    --tw-text-opacity: 1;
}

html.theme-light #main-header #header-top-bar a,
html.theme-light #main-header #header-top-bar span {
    color: inherit;
}
html.theme-light #main-header #header-top-bar .text-chery-silver {
    color: #52525b !important;
}

html.theme-light #main-header #header-top-bar a:hover {
    color: #18181b !important;
}

html.theme-light #main-header #header-top-bar .theme-toggle-sep {
    color: rgba(0, 0, 0, 0.15) !important;
}

html.theme-light #main-header #mega-models-btn,
html.theme-light #main-header nav a.uppercase:not([class*="bg-chery-primary"]),
html.theme-light #main-header nav button.uppercase {
    color: #343434 !important;
    font-weight: 500 !important;
}

html.theme-light #main-header #mega-models-btn:hover,
html.theme-light #main-header nav a.uppercase:hover,
html.theme-light #main-header nav button.uppercase:hover {
    color: #18181b !important;
}

html.theme-light .site-footer-dark a[class*="bg-chery-primary"] {
    background-color: #A4896C !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* Remove opacity from all buttons/links in light theme */
html.theme-light #main-header [class*="text-white/80"],
html.theme-light #main-header [class*="text-white/70"],
html.theme-light #main-header [class*="text-white/60"] {
    color: #343434 !important;
    opacity: 1 !important;
}

html.theme-light #main-header [class*="bg-chery-primary"] {
    color: #fff !important;
}

html.theme-light .site-footer-dark [class*="bg-chery-primary/80"] {
    background-color: #A4896C !important;
    opacity: 1 !important;
}

html.theme-light main [class*="bg-chery-primary/80"]:not(.page-hero-media *):not(.hero-swiper *):not(.video-ping-box *) {
    background-color: #A4896C !important;
    opacity: 1 !important;
}

html.theme-light main [class*="bg-chery-primary/10"]:not(.page-hero-media *):not(.hero-swiper *):not(.video-ping-box *) {
    background-color: #A4896C !important;
    opacity: 1 !important;
    color: #fff !important;
}

html.theme-light #main-header img.brightness-0,
html.theme-light #main-header img[class*="invert"] {
    filter: none !important;
}

html.theme-light #main-header #header-top-bar [class*="text-white/20"] {
    color: rgba(0, 0, 0, 0.15) !important;
}

html.theme-light #main-header .theme-toggle-btn {
    color: #52525b !important;
}
html.theme-light #main-header .theme-toggle-btn:hover {
    color: #18181b !important;
    background-color: rgba(0, 0, 0, 0.06) !important;
}

html.theme-light #main-header #theme-toggle-mobile-nav {
    color: #3f3f46 !important;
}
html.theme-light #main-header #theme-toggle-mobile-nav:hover {
    color: #18181b !important;
}

/* Nav dropdown panels stay dark for contrast */
html.theme-light #main-header .header-nav-flyout {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.theme-light #main-header .header-nav-flyout a {
    color: rgba(255, 255, 255, 0.75) !important;
}

html.theme-light #main-header .header-nav-flyout a:hover {
    color: #fff !important;
}

/* ─── New Header Nav Dropdown (Technology / About) ─── */
.nav-dropdown { position: relative; }
.nav-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    padding-top: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 60;
}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown-card {
    background: linear-gradient(180deg, rgba(24, 24, 27, 0.98) 0%, rgba(15, 15, 17, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 8px;
    width: 320px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.nav-dropdown-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.nav-dropdown-link:hover {
    background: rgba(164, 137, 108, 0.12);
    color: #ffffff;
}
.nav-dropdown-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(164, 137, 108, 0.15);
    color: #c8a86b;
    transition: background 0.2s ease, color 0.2s ease;
}
.nav-dropdown-link:hover .nav-dropdown-icon {
    background: rgba(164, 137, 108, 0.25);
    color: #ffffff;
}
.nav-dropdown-icon svg {
    width: 20px;
    height: 20px;
}
.nav-dropdown-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.nav-dropdown-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    text-transform: none;
    color: inherit;
}
.nav-dropdown-sub {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nav-dropdown-link:hover .nav-dropdown-sub {
    color: rgba(255, 255, 255, 0.7);
}

/* RTL — flip dropdown alignment */
[dir="rtl"] .nav-dropdown-link {
    flex-direction: row-reverse;
    text-align: right;
}

/* Light theme — #9d9790 submenu card */
html.theme-light .nav-dropdown-card {
    background: #9d9790;
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.10);
}
html.theme-light .nav-dropdown-link {
    color: rgba(255, 255, 255, 0.90);
}
html.theme-light .nav-dropdown-link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}
html.theme-light .nav-dropdown-sub {
    color: rgba(255, 255, 255, 0.60);
}
html.theme-light .nav-dropdown-link:hover .nav-dropdown-sub {
    color: rgba(255, 255, 255, 0.80);
}
html.theme-light .nav-dropdown-icon {
    background: #ffffff;
    color: rgb(164 137 108 / 0.8);
}
html.theme-light .nav-dropdown-link:hover .nav-dropdown-icon {
    background: rgb(243 243 243 / 85%);
    color: rgb(164 137 108 / 1);
}

html.theme-light #mobile-menu-btn {
    color: #18181b !important;
}

/* ─── Mobile Menu — white theme overrides ─────────────────────────── */
html.theme-light #mobile-menu {
    background-color: #f4f4f4 !important;
    color: #18181b;
}
html.theme-light #mobile-menu a:not([class*="bg-chery-primary"]),
html.theme-light #mobile-menu summary,
html.theme-light #mobile-menu button:not([class*="bg-chery-primary"]) {
    color: #343434 !important;
}
html.theme-light #mobile-menu a:hover,
html.theme-light #mobile-menu summary:hover {
    color: #18181b !important;
}
html.theme-light #mobile-menu [class*="text-white"]:not([class*="bg-chery-primary"]) {
    color: #343434 !important;
}
html.theme-light #mobile-menu [class*="text-white/60"],
html.theme-light #mobile-menu [class*="text-white/70"],
html.theme-light #mobile-menu [class*="text-white/80"] {
    color: #6b6b6b !important;
}
html.theme-light #mobile-menu [class*="border-white/5"],
html.theme-light #mobile-menu [class*="border-white/10"],
html.theme-light #mobile-menu [class*="border-white/20"] {
    border-color: rgba(0, 0, 0, 0.1) !important;
}
html.theme-light #mobile-menu [class*="hover:bg-white/5"]:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}
/* Category section logos (TIGGO/ARRIZO/HIMLA wordmarks are white pngs) */
html.theme-light #mobile-menu img[alt="TIGGO"],
html.theme-light #mobile-menu img[alt="ARRIZO"],
html.theme-light #mobile-menu img[alt="HIMLA"] {
    filter: invert(1) brightness(0.2);
    opacity: 0.8;
}
/* Keep the primary "Book Test Drive" CTA on its brand colour */
html.theme-light #mobile-menu a[class*="bg-chery-primary"] {
    background-color: #A4896C !important;
    color: #ffffff !important;
}
html.theme-light #mobile-menu a[class*="bg-chery-primary"]:hover {
    background-color: #8B7259 !important;
}
/* Outlined "Get a Quote" CTA */
html.theme-light #mobile-menu a.border {
    border-color: rgba(0, 0, 0, 0.18) !important;
    color: #18181b !important;
}
html.theme-light #mobile-menu a.border:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}
/* Language switcher — inactive pills */
html.theme-light #mobile-menu a.border\/20 {
    border-color: rgba(0, 0, 0, 0.18) !important;
}

/* —— Main: surfaces & text (excludes .site-footer-dark) —— */
html.theme-light main .bg-chery-black {
    background-color: #ffffff !important;
}

html.theme-light main .bg-chery-dark {
    background-color: #e4e4e7 !important;
}

html.theme-light main .bg-chery-gray {
    background-color: #d4d4d8 !important;
}

html.theme-light main [class*="border-white/5"] {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html.theme-light main [class*="border-white/10"] {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.theme-light main [class*="border-white/20"] {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

html.theme-light main .text-white:not(.page-hero-media *):not(.hero-swiper *):not([class*="bg-chery-primary"]):not(.video-ping-box *):not(.model-coming-soon *) {
    color: #18181b !important;
}

html.theme-light main .text-chery-silver:not(.page-hero-media *):not(.hero-swiper *):not(.video-ping-box *):not(.model-coming-soon *) {
    color: #52525b !important;
}

html.theme-light main [class*="text-chery-silver/50"]:not(.page-hero-media *) {
    color: rgba(82, 82, 91, 0.6) !important;
}

html.theme-light main .text-chery-white:not(.page-hero-media *):not(.hero-swiper *) {
    color: #18181b !important;
}

html.theme-light main a[class*="hover\\:text-white"]:hover:not(.page-hero-media *):not(.hero-swiper *):not(.video-ping-box *) {
    color: #18181b !important;
}

html.theme-light .site-footer-dark a[class*="hover\\:text-white"]:hover {
    color: #18181b !important;
}

html.theme-light main .glass {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.theme-light main .glass-dark,
html.theme-light #model-nav.glass-dark {
    background: rgba(255, 255, 255, 0.92) !important;
    background-image: none !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

html.theme-light #model-nav .text-chery-silver {
    color: #52525b !important;
}
html.theme-light #model-nav .model-nav-tab:hover {
    color: #18181b !important;
}

/* Hero slides & model hero: keep light text on imagery */
html.theme-light main .page-hero-media,
html.theme-light main .hero-swiper {
    color: #fff;
}

html.theme-light main .page-hero-media .text-white,
html.theme-light main .page-hero-media h1,
html.theme-light main .page-hero-media .font-display,
html.theme-light main .hero-swiper .text-white,
html.theme-light main .hero-swiper h1,
html.theme-light main .hero-swiper .font-display {
    color: #fff !important;
}

html.theme-light main .page-hero-media .text-chery-silver,
html.theme-light main .hero-swiper .text-chery-silver {
    color: rgba(255, 255, 255, 0.85) !important;
}

html.theme-light main .page-hero-media [class*="text-chery-silver/50"],
html.theme-light main .page-hero-media [class*="text-white/50"],
html.theme-light main .hero-swiper [class*="text-white/85"] {
    color: rgba(255, 255, 255, 0.85) !important;
}

html.theme-light main .page-hero-media a.text-white,
html.theme-light main .page-hero-media nav a:hover,
html.theme-light main .hero-swiper a.text-white {
    color: #fff !important;
}

html.theme-light main .page-hero-media .border-chery-gold,
html.theme-light main .page-hero-media .text-chery-gold,
html.theme-light main .hero-swiper .text-chery-gold {
    color: #c4a882 !important;
    border-color: #A4896C !important;
}

html.theme-light main .page-hero-media .bg-chery-gold.text-chery-black {
    color: #0a0a0a !important;
}

/* Buttons that must stay on-brand */
html.theme-light main .bg-chery-primary,
html.theme-light main [class*="bg-chery-primary/80"] {
    color: #fff !important;
}

html.theme-light main .bg-chery-primary .text-white,
html.theme-light main [class*="bg-chery-primary/80"] .text-white {
    color: #fff !important;
}

html.theme-light main .page-hero-media [class*="border-white/20"] {
    border-color: rgba(255, 255, 255, 0.35) !important;
}

/* —— Preloader —— */
html.theme-light #preloader {
    background: #fafafa !important;
}

html.theme-light #preloader .preloader-logo {
    filter: none !important;
}

html.theme-light #preloader .preloader-bar {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* —— Floating Sticky Icon Bar (FAB Rail) —— */
.fab-rail {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(24, 24, 27, 0.95);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px 0 0 12px;
    padding: 4px;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.fab-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: #ffffff;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.fab-item .fab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.fab-item .fab-icon svg,
.fab-item .fab-icon .fab-img {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
}

/* Line icons (everything except WhatsApp) carry inherent padding inside
   their 24x24 viewBox, so they look smaller next to WhatsApp's filled
   glyph. Bump them up so the drawn area visually matches WhatsApp. */
.fab-item:not(.fab-whatsapp) .fab-icon,
.fab-item:not(.fab-whatsapp) .fab-icon svg,
.fab-item:not(.fab-whatsapp) .fab-icon .fab-img {
    width: 30px;
    height: 30px;
}

.fab-item:hover {
    background: #A4896C;
    color: #ffffff;
}

.fab-item.fab-whatsapp:hover {
    background: #25D366;
}

/* Hidden text label - revealed via tooltip on hover */
.fab-item .fab-label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: #18181b;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.fab-item .fab-label::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #18181b;
}

.fab-item:hover .fab-label,
.fab-item:focus-visible .fab-label {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* Mobile: smaller and at bottom-right */
@media (max-width: 640px) {
    .fab-rail {
        top: auto;
        bottom: 16px;
        transform: none;
        flex-direction: row;
        right: 16px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .fab-item {
        width: 44px;
        height: 44px;
    }
    .fab-item .fab-icon,
    .fab-item .fab-icon svg,
    .fab-item .fab-icon .fab-img {
        width: 20px;
        height: 20px;
    }
    .fab-item:not(.fab-whatsapp) .fab-icon,
    .fab-item:not(.fab-whatsapp) .fab-icon svg,
    .fab-item:not(.fab-whatsapp) .fab-icon .fab-img {
        width: 28px;
        height: 28px;
    }
    .fab-item .fab-label {
        right: auto;
        left: 50%;
        top: auto;
        bottom: calc(100% + 10px);
        transform: translateX(-50%) translateY(8px);
    }
    .fab-item .fab-label::after {
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #18181b;
        border-left-color: transparent;
    }
    .fab-item:hover .fab-label,
    .fab-item:focus-visible .fab-label {
        transform: translateX(-50%) translateY(0);
    }
}

/* Light theme — keep dark rail */
html.theme-light .fab-rail {
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.15);
}
html.theme-light .fab-item {
    color: #333333;
}
html.theme-light .fab-item:hover {
    background: #A4896C;
    color: #ffffff;
}
html.theme-light .fab-item.fab-whatsapp:hover {
    background: #25D366;
}


html.theme-light .fab-item .fab-icon .fab-img {
    filter: brightness(0);
    filter: invert(1);
}

html.theme-light .fab-item .fab-label{
    background: #ffffff;
    color: #333333;
   
}

html.theme-light .fab-item .fab-label::after {
    
    border-left-color: #ffffff;
}

html.theme-light main .gradient-text {
    background: linear-gradient(135deg, #8B7259, #A4896C) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* —— Model coming-soon (Chery International suspense style) —— */
.model-coming-soon-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.5) 100%);
}
.model-coming-soon-overlay--light {
    background: rgba(0, 0, 0, 0.25);
}
.model-coming-soon-back {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.model-coming-soon-back:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(212, 175, 55, 0.5);
}
.model-coming-soon-badge {
    letter-spacing: 0.2em;
}

html.theme-light main .model-coming-soon .model-coming-soon-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.55) 100%);
}
html.theme-light main .model-coming-soon h1,
html.theme-light main .model-coming-soon .text-white {
    color: #fff !important;
}
html.theme-light main .model-coming-soon .text-chery-silver {
    color: rgba(255, 255, 255, 0.82) !important;
}
html.theme-light main .model-coming-soon .model-coming-soon-back {
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Himla page — light theme: light background with dark text */
html.theme-light .himla-int-page {
    background-color: #f5f5f5;
    color: #1a1a1a;
}
/* Preserve white text on full-bleed video/image overlays and styled buttons */
html.theme-light .himla-int-page .himla .banner .title,
html.theme-light .himla-int-page .himla .myVideo .playPauseBtn i,
html.theme-light .himla-int-page .himla .myVideo .bigPlayBtn i,
html.theme-light .himla-int-page .himla .introduceMenu a,
html.theme-light .himla-int-page .himla .btn-build-price {
    color: #ffffff;
}
/* moreTitle text (SPACE / SAFETY sections sit on plain bg) */
html.theme-light .himla-int-page .himla .moreTitle .title,
html.theme-light .himla-int-page .himla .moreTitle .more {
    color: #1a1a1a;
}
html.theme-light .himla-int-page .himla .moreTitle .more span {
    border-left-color: #1a1a1a;
}
/* Record dividers — white semi-transparent → dark */
html.theme-light .himla-int-page .himla .record li::before {
    background-color: rgba(0, 0, 0, 0.2);
}
/* Performance table */
html.theme-light .himla-int-page .himla .multi-record .table-header {
    border-bottom-color: rgba(0, 0, 0, 0.15);
}
html.theme-light .himla-int-page .himla .multi-record .header-item {
    color: #666666;
}
html.theme-light .himla-int-page .himla .multi-record .table-row {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
html.theme-light .himla-int-page .himla .multi-record .table-cell {
    color: #1a1a1a;
}
/* Color / scenario picker */
html.theme-light .himla-int-page .himla .btnChoosePic .btnList a {
    color: #666666;
}
html.theme-light .himla-int-page .himla .btnChoosePic .btnList a.on,
html.theme-light .himla-int-page .himla .btnChoosePic .btnList a:hover {
    color: #1a1a1a;
}
html.theme-light .himla-int-page .himla .btnChoosePic .btnList a.on::after,
html.theme-light .himla-int-page .himla .btnChoosePic .btnList a:hover::after {
    background-color: #1a1a1a;
}
html.theme-light .himla-int-page .himla .btnChoosePic .conShow {
    color: #444444;
}
/* Versatile space heading + swipe button */
html.theme-light .himla-int-page .himla .SPACE .VersatileSpace .logoTitle h4 {
    color: #1a1a1a;
}
html.theme-light .himla-int-page .himla .SPACE .VersatileSpace_con .swiper-button-next {
    color: #1a1a1a;
}
/* Thumbnail gallery border */
html.theme-light .himla-int-page .himla .imgCon .littleSwiper .swiper-slide .pic {
    border-color: rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   THEME: LIGHT — Footer (.site-footer-dark)
   ═══════════════════════════════════════════════════════════════ */

html.theme-light .site-footer-dark {
    background: #f4f4f4 !important;
}

/* Pre-footer CTA */
html.theme-light .site-footer-dark > section {
    background: #f4f4f4 !important;
}

html.theme-light .site-footer-dark > section > .absolute[class*="bg-gradient"] {
    background: #f4f4f4 !important;
    background-image: none !important;
}

html.theme-light .site-footer-dark > section > .absolute.opacity-5 {
    display: none !important;
}

html.theme-light .site-footer-dark > section [class*="border-white"] {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html.theme-light .site-footer-dark > section a[class*="hover\\:bg-white\\/5"]:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Main footer */
html.theme-light .site-footer-dark footer {
    background: #f4f4f4 !important;
}

html.theme-light .site-footer-dark footer.bg-chery-dark {
    background: #f4f4f4 !important;
}

/* Text overrides */
html.theme-light .site-footer-dark h2,
html.theme-light .site-footer-dark h4,
html.theme-light .site-footer-dark .text-white {
    color: #18181b !important;
}

html.theme-light .site-footer-dark .text-chery-silver {
    color: #52525b !important;
}

html.theme-light .site-footer-dark p.text-chery-silver {
    color: #52525b !important;
}

/* SVG icons in footer inherit text color */
html.theme-light .site-footer-dark svg {
    color: inherit;
}

/* Links */
html.theme-light .site-footer-dark a.text-chery-silver,
html.theme-light .site-footer-dark a .text-chery-silver {
    color: #52525b !important;
}

html.theme-light .site-footer-dark a:hover {
    color: #18181b !important;
}

/* Borders */
html.theme-light .site-footer-dark [class*="border-white/5"] {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

html.theme-light .site-footer-dark [class*="border-white/10"] {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

html.theme-light .site-footer-dark [class*="border-white/30"] {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Footer logo — remove invert so it shows dark on light bg */
html.theme-light .site-footer-dark img.brightness-0,
html.theme-light .site-footer-dark img[class*="invert"] {
    filter: none !important;
}

/* Social icon circles */
html.theme-light .site-footer-dark [class*="bg-white/5"] {
    background: rgba(0, 0, 0, 0.07) !important;
}

html.theme-light .site-footer-dark a[class*="bg-white/5"]:hover {
    background: #A4896C !important;
    color: #fff !important;
}

/* CTA primary button — keep white text on brand bg */
html.theme-light .site-footer-dark a[class*="bg-chery-primary"] {
    color: #fff !important;
}

/* CTA secondary button (border outline) */
html.theme-light .site-footer-dark a[class*="border-white/30"] {
    border-color: rgba(0, 0, 0, 0.25) !important;
    color: #18181b !important;
}

html.theme-light .site-footer-dark a[class*="border-white/30"]:hover {
    border-color: rgba(0, 0, 0, 0.5) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Bottom bar copyright and legal links */
html.theme-light .site-footer-dark .text-xs.text-chery-silver {
    color: #71717a !important;
}

html.theme-light .site-footer-dark .text-xs a:hover {
    color: #18181b !important;
}

/* ═══════════════════════════════════════════════════════════════
   THEME: LIGHT — Home page sections with hardcoded dark colors
   ═══════════════════════════════════════════════════════════════ */

/* Section 3: Brand Statement — gradient via-[#121212] */
html.theme-light main [class*="via-[#121212]"] {
    background: #f4f4f5 !important;
    background-image: none !important;
}

/* Section 3: radial gradient overlay */
html.theme-light main [class*="via-[#121212]"] [class*="bg-[radial-gradient"] {
    display: none !important;
}

/* Section 5: News — gradient to-[#0d0d0d] */
html.theme-light main [class*="to-[#0d0d0d]"] {
    background: #f4f4f5 !important;
    background-image: none !important;
}

/* Section 6: Oman — background image overlay opacity */
html.theme-light main section > [class*="opacity-15"][style*="background-image"] {
    opacity: 0.06 !important;
}

/* Fix chery-gold link hover in light sections — keep visible */
html.theme-light main .text-chery-gold {
    color: #A4896C !important;
}

html.theme-light main a.text-chery-gold:hover,
html.theme-light main a:hover .text-chery-gold {
    color: #8B7259 !important;
}

/* ═══════════════════════════════════════════════════════════════
   THEME: LIGHT — Tech cards & feature cards
   ═══════════════════════════════════════════════════════════════ */

html.theme-light main .feature-card.glass-dark {
    background: rgba(255, 255, 255, 0.92) !important;
    background-image: none !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

html.theme-light main .feature-card.glass-dark:hover {
    border-color: rgba(196, 18, 48, 0.3) !important;
}

/* Tech card inner gradient overlay — hide on light */
html.theme-light main .feature-card.glass-dark > [class*="bg-gradient"] {
    opacity: 0 !important;
}

/* Tech card icon boxes — adapt borders */
html.theme-light main .feature-card .border-white\/20 {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

html.theme-light main .feature-card [class*="bg-white/5"] {
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Model cards & news cards in light */
html.theme-light main .model-card,
html.theme-light main .news-card {
    background: #fff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

html.theme-light main .model-card .bg-chery-gray,
html.theme-light main .news-card .bg-chery-gray {
    background: #e4e4e7 !important;
}

/* Hybrid badge on model cards — keep readable */
html.theme-light main .model-card [class*="bg-chery-black/70"] {
    background: rgba(0, 0, 0, 0.7) !important;
    color: #d4af37 !important;
}

html.theme-light main .model-card [class*="bg-chery-black/70"] .text-chery-gold {
    color: #d4af37 !important;
}

/* Category pill on cards */
html.theme-light main .model-card [class*="bg-white/5"],
html.theme-light main .news-card [class*="bg-white/5"] {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Spec row border in model cards */
html.theme-light main .model-card [class*="border-white/10"] {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Spec labels */
html.theme-light main .model-card [class*="text-chery-silver/80"] {
    color: #71717a !important;
}

/* Model explorer "Explore" button */
html.theme-light main .bg-gray-900 {
    background-color: #A4896C !important;
    color: #fff !important;
}

/* Empty state boxes */
html.theme-light main [class*="bg-chery-dark/80"],
html.theme-light main [class*="bg-chery-dark/50"] {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Section divider — ensure visible on light */
html.theme-light main .section-divider {
    background: #A4896C !important;
}

/* Video ping box — keep dark (has background imagery) */
html.theme-light .video-ping-box,
html.theme-light .video-ping-box .text-white,
html.theme-light .video-ping-box h2,
html.theme-light .video-ping-box p {
    color: #fff !important;
}

html.theme-light .video-ping-box [class*="text-white/70"] {
    color: rgba(255, 255, 255, 0.7) !important;
}

html.theme-light .video-ping-box [style*="color:#A4896C"],
html.theme-light .video-ping-box [class*="text-\[\#A4896C\]"] {
    color: #A4896C !important;
}

/* ═══════════════════════════════════════════════════════════════
   THEME: LIGHT — Inner pages (models, about, contact, news,
   offers, technology)
   ═══════════════════════════════════════════════════════════════ */

/* --- 1. Kill dark gradients on non-overlay sections --- */
html.theme-light main section[class*="bg-gradient-to"] {
    background-image: none !important;
}

html.theme-light main section[class*="bg-gradient-to-b"][class*="from-chery-dark"],
html.theme-light main section[class*="bg-gradient-to-b"][class*="from-chery-gray"],
html.theme-light main section[class*="bg-gradient-to-b"][class*="from-chery-black"] {
    background-color: #f4f4f5 !important;
    background-image: none !important;
}

/* --- 2. prose-invert override for news article --- */
html.theme-light main .prose-invert {
    --tw-prose-body: #3f3f46;
    --tw-prose-headings: #18181b;
    --tw-prose-lead: #52525b;
    --tw-prose-links: #A4896C;
    --tw-prose-bold: #18181b;
    --tw-prose-counters: #71717a;
    --tw-prose-bullets: #a1a1aa;
    --tw-prose-hr: rgba(0, 0, 0, 0.1);
    --tw-prose-quotes: #18181b;
    --tw-prose-quote-borders: rgba(0, 0, 0, 0.15);
    --tw-prose-captions: #71717a;
    --tw-prose-code: #18181b;
    --tw-prose-pre-code: #e4e4e7;
    --tw-prose-pre-bg: #27272a;
    --tw-prose-th-borders: rgba(0, 0, 0, 0.15);
    --tw-prose-td-borders: rgba(0, 0, 0, 0.08);
    color: #3f3f46 !important;
}

html.theme-light main .prose-invert h1,
html.theme-light main .prose-invert h2,
html.theme-light main .prose-invert h3,
html.theme-light main .prose-invert h4,
html.theme-light main .prose-invert strong {
    color: #18181b !important;
}

html.theme-light main .prose-invert a {
    color: #A4896C !important;
}

/* --- 3. News pagination light-theme --- */
html.theme-light .pagination-chery nav a {
    background: #e4e4e7 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #3f3f46 !important;
}

html.theme-light .pagination-chery nav a:hover {
    background: #A4896C !important;
    color: #fff !important;
    border-color: #A4896C !important;
}

html.theme-light .pagination-chery nav span span {
    background: #f4f4f5 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #71717a !important;
}

html.theme-light .pagination-chery nav [aria-current="page"] span span {
    background: #A4896C !important;
    color: #fff !important;
    border-color: #A4896C !important;
}

html.theme-light .pagination-chery .text-gray-700,
html.theme-light .pagination-chery .text-gray-600 {
    color: #52525b !important;
}

html.theme-light .pagination-chery .font-medium {
    color: #18181b !important;
}

/* --- 4. Missing bg-chery-dark opacity variants --- */
html.theme-light main [class*="bg-chery-dark/40"],
html.theme-light main [class*="bg-chery-dark/30"] {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* --- 5. bg-chery-primary/20 step icons --- */
html.theme-light main [class*="bg-chery-primary/20"] {
    background-color: rgba(164, 137, 108, 0.2) !important;
}

/* --- 6. bg-white/5 and bg-white/10 global in main --- */
html.theme-light main [class*="bg-white/5"]:not(.page-hero-media *):not(.hero-swiper *):not(.video-ping-box *) {
    background: rgba(0, 0, 0, 0.05) !important;
}

html.theme-light main [class*="bg-white/10"]:not(.page-hero-media *):not(.hero-swiper *):not(.video-ping-box *) {
    background: rgba(0, 0, 0, 0.07) !important;
}

/* --- 7. text-chery-silver opacity variants --- */
html.theme-light main [class*="text-chery-silver/90"]:not(.page-hero-media *):not(.video-ping-box *),
html.theme-light main [class*="text-chery-silver/70"]:not(.page-hero-media *):not(.video-ping-box *),
html.theme-light main [class*="text-chery-silver/80"]:not(.page-hero-media *):not(.video-ping-box *) {
    color: #52525b !important;
}

/* --- 8. border-white/30 in main --- */
html.theme-light main [class*="border-white/30"] {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

/* border-white/50 (video play button etc. — skip video-ping-box) */
html.theme-light main [class*="border-white/50"]:not(.video-ping-box *) {
    border-color: rgba(0, 0, 0, 0.3) !important;
}

/* border-white/25 (coming-soon badge) */
html.theme-light main [class*="border-white/25"]:not(.model-coming-soon *) {
    border-color: rgba(0, 0, 0, 0.15) !important;
}

/* --- 9. text-white/80 in main (safety partial etc.) --- */
html.theme-light main [class*="text-white/80"]:not(.page-hero-media *):not(.hero-swiper *):not(.video-ping-box *):not(.model-coming-soon *) {
    color: #3f3f46 !important;
}

/* --- 10. FABs outside main — handled by .fab-rail / .fab-item rules above --- */

/* --- 11. Form inputs in light theme --- */
html.theme-light main .form-input,
html.theme-light main .form-select,
html.theme-light main .form-textarea {
    background-color: #fff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #18181b !important;
}

html.theme-light main .form-input:focus,
html.theme-light main .form-select:focus,
html.theme-light main .form-textarea:focus {
    border-color: #A4896C !important;
    box-shadow: 0 0 0 3px rgba(164, 137, 108, 0.15) !important;
}

html.theme-light main .form-label {
    color: #3f3f46 !important;
}

/* --- 12. Radial gradient decorative overlays — hide --- */
html.theme-light main [class*="bg-\[radial-gradient"] {
    display: none !important;
}