/*
Theme Name:  Hello Elementor Child
Description: Child theme for Hello Elementor
Author:      ASAR Auto
Template:    hello-elementor
Version:     1.0.413
Text Domain: hello-elementor-child
*/

/* ── Your custom styles go below this line ── */

/* ════════════════════════════════════════════════════════════
   🎨 HELVETICA NEUE ASAR — UNIFIED FONT OVERRIDE (English + Arabic)
   ════════════════════════════════════════════════════════════
   Uses unique family name 'HelveticaNeueAsar' to prevent macOS
   Safari from substituting the system "Helvetica Neue" font
   (which has no proper Arabic and breaks the layout).
   The unicode-range magic in fonts.css auto-picks Arabic glyphs
   for Arabic text and Latin glyphs for English.
   ════════════════════════════════════════════════════════════ */

:root {
    --font: 'HelveticaNeueAsar', Tahoma, Arial, sans-serif !important;
    --font-en: 'HelveticaNeueAsar', Tahoma, Arial, sans-serif !important;
    --font-ar: 'HelveticaNeueAsar', Tahoma, Arial, sans-serif !important;
    --font-ar-body: 'HelveticaNeueAsar', Tahoma, Arial, sans-serif !important;
    --font-body: 'HelveticaNeueAsar', Tahoma, Arial, sans-serif !important;
    --font-display: 'HelveticaNeueAsar', Tahoma, Arial, sans-serif !important;
    --font-cond: 'HelveticaNeueAsar', Tahoma, Arial, sans-serif !important;
    --font-main: 'HelveticaNeueAsar', Tahoma, Arial, sans-serif !important;
    --news-font: 'HelveticaNeueAsar', Tahoma, Arial, sans-serif !important;
    --form-font-family: 'HelveticaNeueAsar', Tahoma, Arial, sans-serif !important;
}

/* Catch any hardcoded font-family declarations in min.css files
   (e.g., "Titillium Web", "Barlow Condensed", "Open Sans")     */
body,
body *,
input,
button,
select,
textarea,
.gform_wrapper,
.gform_wrapper *,
.elementor-widget-text-editor,
.elementor-widget-text-editor * {
    font-family: 'HelveticaNeueAsar', Tahoma, Arial, sans-serif !important;
}

/* Keep icon fonts working (Font Awesome, dashicons, Elementor icons) */
i.fa,
i.fas,
i.far,
i.fab,
i.fal,
i.fad,
.fa,
.fas,
.far,
.fab,
.fal,
.fad,
[class*="dashicons"],
.eicon,
[class^="eicon-"],
[class*=" eicon-"] {
    font-family: revert !important;
}

/* ════════════════════════════════════════════════════════════
   END HELVETICA OVERRIDE
   ════════════════════════════════════════════════════════════ */


/* Force 2-column layout on GF fields inside form-card */
body main .form-card .gform_fields {
    grid-template-columns: repeat(2, 1fr) !important;
}


html[dir="rtl"] .btn .btn-arrow path {
    transform: rotate(180deg);
    transform-origin: center;
}

/* Full width for textarea and submit */
body main .form-card .gfield--width-full,
body main .form-card .gform_fields .gfield:has(textarea) {
    grid-column: 1 / -1 !important;
}

/* ── Override GF's 12-col grid → 2-col layout ── */
body main .form-card .gform_fields {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 24px !important;
}

/* All fields: half width by default */
body main .form-card .gform_fields .gfield {
    grid-column: span 1 !important;
}

/* Full width: textarea + any gfield--width-full */
body main .form-card .gform_fields .gfield:has(textarea),
body main .form-card .gform_fields .gfield.gfield--width-full {
    grid-column: 1 / -1 !important;
}

@media (max-width: 600px) {
    body main .gform_wrapper .gform_fields {
        grid-template-columns: 1fr !important;
    }

    body .compare {
        padding: var(--pading-top-bottom) 20px !important;
    }
}

.gform-theme--foundation .gfield .ginput_password,
.gform-theme--foundation .gfield input,
.gform-theme--foundation .gfield select {
    min-height: 45px !important;
}

body .gallery__grid {
    gap: 8px;
}

#gform_wrapper_3[data-form-index="0"].gform-theme,
[data-parent-form="3_0"] {
    --gf-color-primary: #c1121f !important;
    --gf-radius: 0px !important;
    --gf-color-primary-darker: #000 !important;
}

.results-table__car-col .car-card {
    aspect-ratio: auto;
}

.results-table__car-col img {
    max-width: 250px;
}

.results-table__reset-cell {
    justify-content: center;
    align-items: center;
}

.results-table__group-label {
    text-align: center;
    padding: 18px 20px 18px 20px;
    background-color: #eb0a1e;
    color: #fff;
    font-weight: bold;
}

@media (max-width: 720px) {

    .car-card__header-text .car-card__name {
        font-size: 12px !important;
        color: #fff !important;
    }

    .car-card__header {
        display: flex !important;
        align-items: center !important;
    }

    .car-card__remove {
        border: 1px solid #fff !important;
        color: #fff !important;
    }

    .car-card__remove:hover {
        background-color: #fff !important;
    }

    .results-table__reset-cell {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
    }

    .results-table__group-label {
        font-size: 10px !important;
        padding: 8px 8px 8px 8px !important;
        color: #fff !important;
    }

    .results-table__label {
        font-size: 11px !important;
        padding: 10px 8px 10px 8px !important;
    }
}

.camry-stage__img img {
    filter: unset !important;
}

.hero-stack__car {
    bottom: -10vh !important;
    left: -6vw !important;
}

.hero-stack .hero-stack__car img {
    height: auto !important;
}


@media (max-width: 600px) {

    .hero-stack__car {
        bottom: 3.5vh !important;
        left: -6vw !important;
        width: 89vw !important;
        max-width: fit-content;
    }
}


@media (max-width: 768px) {
    .branches-layout {
        height: auto;
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    .branches-layout__map {
        min-height: 280px;
    }
}


.why-section__editor ul {
    margin-top: 20px;
    margin-bottom: 20px;
    list-style: none;
    padding-left: 0;
}

.why-section__editor ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-weight: 400;
}

.why-section__editor ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #c0392b;
    /* red to match your brand */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    /* diamond shape */
}

.camry-stage__nav button:last-of-type,
.camry-stage__nav button:nth-child(2) {
    display: none;
}


body.wp-singular.offer-template .elementor-widget-text-editor ul {
    margin-top: 20px;
    margin-bottom: 20px;
    list-style: none;
    padding-left: 0;
}

body.wp-singular.offer-template .elementor-widget-text-editor ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
}

body.wp-singular.offer-template .elementor-widget-text-editor ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #c0392b;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.site-header {
    transition: background 0.4s ease,
        backdrop-filter 0.4s ease,
        -webkit-backdrop-filter 0.4s ease,
        box-shadow 0.4s ease;
}

/* ============================================================
   RTL fixes for layout.min.css
   Add these rules to your child theme's style.css
   ============================================================ */

/* ── 1. Banner hero padded variant: bg image
        left: → right:                                        */
[dir="rtl"] .banner-hero.banner-hero__padd-arround .banner-hero__bg-image {
    left: unset;
    right: var(--banner-hero-padding);
}

/* ── 2. Banner hero padded variant: overlay
        inset already covers all sides — no fix needed        */

/* ── 3. Default content wrapper (anchored to right in LTR)
        flip to left in RTL                                   */
[dir="rtl"] .banner-hero__content-wrapper {
    right: unset;
    left: 48px;
}

/* ── 4. banner-hero-left: content anchored to left in LTR
        flip to right in RTL                                  */
[dir="rtl"] .banner-hero-left .banner-hero__content-wrapper {
    left: unset;
    right: 48px;
}

/* ── 5. Blur chip: left anchor + transform-origin            */
[dir="rtl"] .banner-hero__blur-chip {
    left: unset;
    right: -15px;
    transform-origin: right center;
}

/* ── 6. Tablet: content wrapper right anchor                 */
@media (min-width: 768px) and (max-width: 1024px) {
    [dir="rtl"] .banner-hero__content-wrapper {
        right: unset;
        left: 24px;
    }
}

/* ── 7. Mobile: blur chip left: 35% → right: 35%            */
@media (max-width: 767px) {
    [dir="rtl"] .banner-hero__blur-chip {
        left: unset;
        right: 35%;
    }
}

[dir="rtl"] .footer__nav-link {
    min-width: 90px;
}


[dir="rtl"] .hero-arrows svg polyline {
    transform: rotate(180deg);
    transform-origin: center;
}



/* rtl  */


/* ============================================
   RTL — Global letter-spacing reset
   ============================================ */
html[dir="rtl"] * {
    letter-spacing: 0 !important;
}


/* ============================================
   RTL — Typography weights (HelveticaNeueAsar handles both LTR + RTL
   automatically via unicode-range in fonts.css)
   ============================================ */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .page-heading {
    font-weight: 700;
    text-transform: none;
    line-height: 130%;
}

html[dir="rtl"] p,
html[dir="rtl"] .wrapper p,
html[dir="rtl"] .section-header p,
html[dir="rtl"] .section-header h2 {
    font-weight: 400;
    text-transform: none;
}

html[dir="rtl"] button,
html[dir="rtl"] .cta-btn,
html[dir="rtl"] .lang-switcher__btn {
    font-weight: 700;
    text-transform: none;
}

[dir="rtl"] .why-section__media {
    padding-right: 40px;
    padding-left: unset;
}

[dir="rtl"] .img-stack .img-front {

    margin-right: var(--front-left);
    margin-left: unset;
}


[dir="rtl"] .why-section__features {
    border-right: 2px solid var(--color-border);
    padding-right: 24px;
    border-left: unset;
    padding-left: unset;
}




[dir="rtl"] .why-section__editor ul li {
    padding-left: unset;
    padding-right: 28px;
}

[dir="rtl"] .why-section__editor ul li::before {
    left: unset;
    right: 0;
}

[dir="rtl"] span.inner-page-hero__meta ul li:first-child::after {
    right: unset;
    left: -16px;
}

[dir="rtl"] .news-card__arrow svg {
    transform: scaleX(-1);
}


.asar-faq {
    padding: var(--pading-top-bottom) 15px;
}

.asar-faq .asar-faq__heading,
.asar-faq p.asar-faq__subheading {
    text-align: center;
    width: 100% !important;
    max-width: 100% !important;
}

.asar-faq .asar-faq__item::before {
    left: 0;
}

[dir="rtl"] .asar-faq .asar-faq__item::before {
    right: 0;
}

[dir="rtl"] body.wp-singular.offer-template .elementor-widget-text-editor ul li {
    padding-right: 28px;
    padding-left: unset;
}

[dir="rtl"] body.wp-singular.offer-template .elementor-widget-text-editor ul li::before {
    left: unset;
    right: 0;
}


[dir="rtl"] span.branch__name {
    text-align: right;
}

[dir="rtl"] a[href^="tel:"] {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-flex;
    flex-direction: row-reverse;
}

[dir="rtl"] .branch__phones {
    display: flex;
    flex-direction: column;
}

p.wh-drawer__note {
    display: none;
}


[dir="rtl"] input[type="tel"] {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-flex;
    flex-direction: row-reverse;
    text-align: right;
}

[dir="rtl"] select.large.gfield_select {
    padding-right: 0 !important;
    padding-left: 28px !important;
    background-position: left !important;
}



[dir="rtl"] .hero-stack .hero-stack__car img {
    transform: scaleX(-1);
}

[dir="rtl"] .hero-stack__interior {
    left: 60px;
    right: 0;
}


[dir="rtl"] .hero-stack__car {
    left: 0 !important;
    right: -6vw !important;
}


@media (max-width: 600px) {

    [dir="rtl"] .hero-stack__car {
        left: 0 !important;
        right: -6vw !important;
    }
}

[dir="rtl"] .hero-stack__texture {

    left: 0;
    right: unset;
}

[dir="rtl"] .camry-nav__arrows svg {
    transform: scaleX(-1);
}


body .car-card__model,
.results-table__group-label {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

body .car-card__name {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 17px !important;
}

body .results-table__reset-cell {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

[dir="rtl"] .results-table__label {
    padding-left: 0;
    padding-right: 16px;
}


html[dir="rtl"] .menu-toggle {
    flex-direction: row !important;
    justify-content: flex-end !important;
    justify-self: end !important;
}

html[dir="rtl"] .mobile-contact {
    justify-self: start !important;
}

html[dir="rtl"] .gallery__btn svg {
    transform: scaleX(-1);
}



.results-table__group-label {
    padding-inline-start: 16px;
}

.results-table__label {
    padding-inline-start: 15px;
}

[dir="rtl"] .results-table__label {
    padding-inline-start: 15px;
    padding-left: 0;
    padding-right: 16px;
}



/* ════════════════════════════════════════
   HEADER DROPDOWN (Desktop)
   ════════════════════════════════════════ */

/* Parent item wrapper */
.header-nav__item--has-children {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Parent link (with caret) */
.header-nav__link--parent {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header-nav__caret {
    transition: transform 0.2s ease;
}

/* Submenu panel */
.header-nav__submenu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 220px;
    padding: 12px 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1000;
}

/* Submenu links */
.header-nav__sublink {
    display: block;
    padding: 10px 18px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.header-nav__sublink:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* Show submenu on hover / keyboard focus */
.header-nav__item--has-children:hover .header-nav__submenu,
.header-nav__item--has-children:focus-within .header-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Flip the caret when open */
.header-nav__item--has-children:hover .header-nav__caret,
.header-nav__item--has-children:focus-within .header-nav__caret {
    transform: rotate(180deg);
}

/* Keep submenu text readable on dark header */
.site-header__dark .header-nav__sublink {
    color: #1a1a1a;
}

/* Optional: flip submenu anchor for edge items
   Add the "is-edge" class via WP Menus → CSS Classes */
.header-nav__item--has-children.is-edge .header-nav__submenu {
    inset-inline-start: auto;
    inset-inline-end: 0;
}


/* ════════════════════════════════════════
   MOBILE DRAWER ACCORDION
   ════════════════════════════════════════ */

.drawer__item--has-children {
    display: block;
}

.drawer__nav-link--parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: 14px 20px;
    font: inherit;
    text-align: start;
    color: inherit;
    cursor: pointer;
}

.drawer__caret {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.drawer__submenu {
    padding-inline-start: 16px;
}

.drawer__sublink {
    display: block;
    padding: 10px 20px;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    opacity: 0.85;
}

.drawer__sublink:hover {
    opacity: 1;
}




.header-nav__submenu {
    position: absolute;
    top: calc(100% + 14px);
    inset-inline-start: -16px;
    min-width: 260px;
    padding: 8px;
    background: rgba(20, 20, 22, 0.72);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top center;
    transition:
        opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.28s;
    z-index: 1000;
}

/* Tiny pointer arrow */
.header-nav__submenu::before {
    content: '';
    position: absolute;
    top: -6px;
    inset-inline-start: 32px;
    width: 12px;
    height: 12px;
    background: rgba(20, 20, 22, 0.72);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    transform: rotate(45deg);
    backdrop-filter: blur(18px);
}

.header-nav__sublink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    color: rgba(255, 255, 255, 0.82) !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s, background 0.2s, padding-inline-start 0.25s;
}

.header-nav__sublink::before {
    content: '';
    width: 0;
    height: 1px;
    background: #c8102e;
    /* your accent */
    transition: width 0.25s ease;
}

.header-nav__sublink:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    padding-inline-start: 20px;
}

.header-nav__sublink:hover::before {
    width: 14px;
}

.header-nav__item--has-children:hover .header-nav__submenu,
.header-nav__item--has-children:focus-within .header-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.offer-countdown.offer-countdown--expiring {
    display: none;
}


.banner-hero.banner-center .banner-hero__content-panel a.btn.btn-red.btn-md {
    min-width: fit-content;
}


.news-card__image-wrap {
    aspect-ratio: 16 / 8 !important;
    min-height: auto !important;
}

.news-section__grid {

    grid-template-columns: 1fr 1fr 1fr !important;

}



.hero-slide__subtitle {
    font-size: 14px;
}


.hero-slide__title {
    font-size: clamp(24px, 2.2vw, 30px) !important;
    line-height: 140% !important;
}

.rtl .hero-slide__title {
    font-size: clamp(26px, 2.2vw, 33px) !important;
    line-height: 140% !important;
}



/* ════════════════════════════════════════════════════════════
   HEADER NAV — SQUEEZE FOR INTERMEDIATE WIDTHS (1280-1500)
   عشان ما يزحم الـ nav قبل ما نوصل لعرض الـ hamburger
   ════════════════════════════════════════════════════════════ */
.header-nav {
    gap: clamp(8px, 1.25vw, 14px) !important;
}

.header-nav__link {
    font-size: 13px !important;
}

/* المرحلة الأولى: من 1500 لتحت — قلّل الـ margin الخارجي */
/* @media (max-width: 1500px) {
    .site-header__desktop {
        margin: 0 24px !important;
    }

    .header-nav {
        gap: 12px !important;
    }

    .header-actions {
        gap: 8px !important;
    }
}

@media (max-width: 1400px) {

    .header-nav__link,
    html[dir="rtl"] .header-nav__link {
        font-size: 13px !important;
    }

    .header-actions .btn,
    .header-actions .btn-md {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
} */


/* ════════════════════════════════════════════════════════════
   HEADER NAV — squeeze rules
   تنطبق فقط على الـ desktop stage (> 1200px)
   ════════════════════════════════════════════════════════════ */

/* Default desktop — صغّرت الفونت والـ gap على كل النطاق > 1200 */
@media (min-width: 1201px) {
    .site-header__desktop .header-nav {
        gap: clamp(8px, 1.25vw, 14px);
    }

    .site-header__desktop .header-nav__link {
        font-size: 13px;
    }
}

/* المرحلة الأولى: 1201–1500 — قلّل الـ margin والـ gap */
@media (min-width: 1201px) and (max-width: 1500px) {
    .site-header__desktop {
        margin: 0 24px;
    }

    .site-header__desktop .header-nav {
        gap: 12px;
    }

    .site-header__desktop .header-actions {
        gap: 8px;
    }
}

/* المرحلة الثانية: 1201–1400 — صغّر الزر */
@media (min-width: 1201px) and (max-width: 1400px) {

    .site-header__desktop .header-nav__link,
    html[dir="rtl"] .site-header__desktop .header-nav__link {
        font-size: 13px;
    }

    .site-header__desktop .header-actions .btn,
    .site-header__desktop .header-actions .btn-md {
        padding: 8px 16px;
        font-size: 12px;
    }
}

@media (max-width:993px) {
    .hero-mobile__desc {
        max-width: 470px !important;
    }
}

.drawer__nav-link {
    padding: 4px 32px !important;
}

.hero-slide__subtitle {
    font-size: clamp(11.5px, 0.5vw + 11px, 11.5px) !important;
}

.rtl .hero-slide__subtitle {
    font-size: clamp(13px, 0.5vw + 11px, 15px) !important;
}

.news-section__grid {
    max-width: 1100px !important;
    margin: auto;
}

.cars-filter {
    gap: clamp(16px, 4vw, 16px) !important;
    flex-wrap: wrap !important;
    justify-content: center !important
}

@media (max-width: 1280px) {
    .news-section__grid {
        grid-template-columns: 1fr 1fr 1fr !important
    }
}

@media (max-width: 1024px) {
    .news-section__grid {
        grid-template-columns: 1fr 1fr !important
    }
}

@media (max-width: 768px) {
    .news-section__grid {
        grid-template-columns: 1fr !important
    }
}


.why-section__editor ul li {
    margin-bottom: 0px !important;
}

.inner-page-hero__img-fade {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 100%) !important;
}

body .why-section__title {
    font-size: clamp(2rem, 3.5vw, 2.3rem);
}

body .inner-page-hero__content {
    justify-content: end;
    padding-block: 35px;
    padding-inline: clamp(1.25rem, 6vw, 50px);
}

.home .news-section__grid {
    max-width: inherit !important;
}

div#ui-datepicker-div {
    display: none;
}

:root {
    --header-h-top-mobile: 141px !important;
}


/* ---------- ENGLISH (LTR) ---------- */
.site-header__bar .menu-toggle {
    order: 1;
    justify-self: start;
    flex-direction: row-reverse;
}

.site-header__bar .logo--mobile {
    order: 2;
    justify-self: center;
}

.site-header__bar .mobile-contact {
    order: 3;
    justify-self: end;
    text-align: right;
    font-weight: normal;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: capitalize;
}

.site-header__bar #js-hamburger {
    transform: scaleX(-1);
}

/* ---------- ARABIC (RTL) — mirrored ---------- */
[dir="rtl"] .site-header__bar .mobile-contact {
    order: 3;
    justify-self: end !important;
    text-align: right;
    font-weight: normal;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: capitalize;
}

[dir="rtl"] .site-header__bar .logo--mobile {
    order: 2;
    justify-self: center;
}

[dir="rtl"] .site-header__bar .menu-toggle {
    order: 1;
    justify-self: start !important;
    flex-direction: row-reverse !important;
}

[dir="rtl"] .site-header__bar #js-hamburger {
    transform: scaleX(-1);
}


.cars-section {
    min-height: auto !important;
}


.branch__tag {
    color: #000 !important;
}

.branch--open .branch__name {
    color: #000 !important;
}

.news-card__category {
    color: var(--news-text-meta) !important;
}


/* === علامة * للحقول المطلوبة في Gravity Forms === */

/* خلي الحاوي relative عشان نقدر نضع النجمة فوقه */
.gform_wrapper .gfield .ginput_container,
.gform_wrapper .gfield .ginput_complex>span,
.gform_wrapper .gfield .ginput_container_name>span {
    position: relative;
}

/* النجمة الحمراء - تظهر على اليسار في RTL (حيث ينتهي نص الـ placeholder) */
.gform_wrapper .gfield .ginput_container:has(> input[aria-required="true"])::before,
.gform_wrapper .gfield .ginput_container:has(> textarea[aria-required="true"])::before,
.gform_wrapper .gfield .ginput_container:has(> select[aria-required="true"])::before,
.gform_wrapper .gfield .ginput_complex>span:has(> input[aria-required="true"])::before,
.gform_wrapper .gfield .ginput_container_name>span:has(> input[aria-required="true"])::before {
    content: "*";
    color: #e53935;
    position: absolute;
    top: 50%;
    left: 10px;
    /* RTL: على اليسار */
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}


/* LTR — asterisk on the right */
[dir="ltr"] .gform_wrapper .gfield .ginput_container:has(> input[aria-required="true"])::before,
[dir="ltr"] .gform_wrapper .gfield .ginput_container:has(> textarea[aria-required="true"])::before,
[dir="ltr"] .gform_wrapper .gfield .ginput_container:has(> select[aria-required="true"])::before,
[dir="ltr"] .gform_wrapper .gfield .ginput_complex>span:has(> input[aria-required="true"])::before,
[dir="ltr"] .gform_wrapper .gfield .ginput_container_name>span:has(> input[aria-required="true"])::before {
    content: "*";
    color: #e53935;
    position: absolute;
    top: 50%;
    right: 10px;
    left: unset;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}


[dir="ltr"] .offers-grid__inner .service-card__badge-wrap {
    right: unset;
    left: 12px;
}

/* اخفي النجمة لما يبلش يكتب (الحقل صار في قيمة) */
.gform_wrapper .gfield .ginput_container:has(> input[aria-required="true"]:not(:placeholder-shown))::before,
.gform_wrapper .gfield .ginput_container:has(> textarea[aria-required="true"]:not(:placeholder-shown))::before {
    display: none;
}


.rtl .banner-hero__description ul {
    padding-right: 20px;
}

.rtl .banner-hero__description ul li {
    position: relative;
}

.rtl .banner-hero__description ul li:before {
    content: '-';
    position: absolute;
    right: -20px;
}


/* ════════════════════════════════════════════════════════════
   PREMIUM MOBILE DRAWER — Asar Auto
   Scoped to ≤ 993px (mobile only)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 993px) {

    /* ── Drawer container ── */
    .drawer {
        background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
        box-shadow: -10px 0 50px rgba(0, 0, 0, 0.1);
        width: min(360px, 88vw);
    }

    html[dir="rtl"] .drawer {
        box-shadow: 10px 0 50px rgba(0, 0, 0, 0.1);
    }


    /* ── Drawer header ── */
    .drawer__header {
        padding: 28px 28px 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .drawer__header img {
        max-width: 120px;
        height: auto;
    }

    .drawer__close {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.05);
        color: var(--color-dark);
        position: static;
        transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        cursor: pointer;
    }

    .drawer__close:hover {
        background: var(--color-brand);
        color: #fff;
        transform: rotate(90deg);
    }


    /* ── Drawer nav (tight & elegant) ── */
    .drawer__nav {
        padding: 12px 0;
        flex: 1;
        overflow-y: auto;
    }

    .drawer__nav-link {
        padding: 9px 26px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        text-align: start !important;
        border-bottom: none !important;
        color: var(--color-dark);
        position: relative;
        transition: all 280ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    html[dir="rtl"] .drawer__nav-link {
        font-size: 15px !important;
        font-weight: 400 !important;
    }

    .drawer__nav-link::before {
        display: none;
    }

    .drawer__nav-link::after {
        content: '';
        position: absolute;
        top: 50%;
        inset-inline-start: 14px;
        transform: translateY(-50%) scale(0);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--color-brand);
        transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .drawer__nav-link:hover {
        color: var(--color-brand);
        padding-inline-start: 32px !important;
        background: transparent;
    }

    .drawer__nav-link:hover::after {
        transform: translateY(-50%) scale(1);
    }

    .drawer__nav-link[aria-current="page"] {
        color: var(--color-brand);
        font-weight: 500 !important;
        padding-inline-start: 32px !important;
    }

    .drawer__nav-link[aria-current="page"]::after {
        transform: translateY(-50%) scale(1);
    }


    /* ── Dropdown parent button (clean chevron) ── */
    .drawer__nav-link--parent {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        background: none !important;
        border: 0 !important;
        padding: 9px 26px !important;
        font: inherit !important;
        text-align: start !important;
        color: inherit !important;
        cursor: pointer !important;
    }

    .drawer__caret {
        font-size: 0 !important;
        width: 10px;
        height: 10px;
        position: relative;
        display: inline-block;
        transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
        flex-shrink: 0;
        margin-inline-start: 8px;
    }

    .drawer__caret::before {
        content: '';
        position: absolute;
        top: 50%;
        inset-inline-start: 50%;
        width: 7px;
        height: 7px;
        border-right: 1.5px solid rgba(0, 0, 0, 0.45);
        border-bottom: 1.5px solid rgba(0, 0, 0, 0.45);
        transform: translate(-50%, -70%) rotate(45deg);
        transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
            border-color 320ms ease;
    }

    .drawer__nav-link--parent[aria-expanded="true"] .drawer__caret::before {
        transform: translate(-50%, -30%) rotate(-135deg);
        border-color: var(--color-brand);
    }

    .drawer__nav-link--parent[aria-expanded="true"] {
        color: var(--color-brand);
    }


    /* ── Sub-items (indented & subtle) ── */
    .drawer__submenu {
        padding-inline-start: 16px !important;
        padding-block: 4px 8px;
        background: rgba(0, 0, 0, 0.02);
        border-inline-start: 2px solid rgba(200, 16, 46, 0.15);
        margin-inline-start: 26px;
        margin-block: 4px 10px;
    }

    .drawer__sublink {
        display: block !important;
        padding: 7px 14px !important;
        color: rgba(0, 0, 0, 0.65) !important;
        text-decoration: none;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.5;
        opacity: 1 !important;
        position: relative;
        transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    html[dir="rtl"] .drawer__sublink {
        font-size: 14px !important;
    }

    .drawer__sublink:hover {
        color: var(--color-brand) !important;
        padding-inline-start: 20px !important;
        background: transparent;
    }


    /* ── Drawer footer — proper buttons ── */
    .drawer__footer {
        padding: 20px 24px 28px;
        gap: 10px;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .drawer__footer .btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 14px 22px !important;
        font-family: var(--font-cond) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        border-radius: 0 !important;
        text-align: center !important;
        position: relative !important;
        overflow: hidden !important;
        transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
        cursor: pointer !important;
        width: 100% !important;
    }

    html[dir="rtl"] .drawer__footer .btn {
        font-family: var(--font-ar) !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        font-weight: 700 !important;
        font-size: 14px !important;
    }

    .drawer__footer .btn--dark {
        background: var(--color-dark, #0a0a0a) !important;
        color: #fff !important;
        border: 1.5px solid var(--color-dark, #0a0a0a) !important;
    }

    .drawer__footer .btn--dark:hover {
        background: transparent !important;
        color: var(--color-dark, #0a0a0a) !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }

    .drawer__footer .btn--brand {
        background: var(--color-brand, #c8102e) !important;
        color: #fff !important;
        border: 1.5px solid var(--color-brand, #c8102e) !important;
    }

    .drawer__footer .btn--brand:hover {
        background: transparent !important;
        color: var(--color-brand, #c8102e) !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(200, 16, 46, 0.25);
    }

    .drawer__footer .btn::after {
        content: '→';
        font-size: 16px;
        line-height: 1;
        transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    html[dir="rtl"] .drawer__footer .btn::after {
        content: '←';
    }

    .drawer__footer .btn:hover::after {
        transform: translateX(4px);
    }

    html[dir="rtl"] .drawer__footer .btn:hover::after {
        transform: translateX(-4px);
    }


    /* ── Drawer overlay (softer with blur) ── */
    .drawer-overlay {
        background: rgba(15, 15, 20, 0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

}

/* end @media (max-width: 993px) */


.offer-countdown {
    display: none !important;
}


.inner-page-hero__subtitle {
    max-width: 615px !important;
}


/* ============================================
   Mobile header — contact button with meta
   ============================================ */
@media (max-width: 993px) {

    .site-header__bar .mobile-contact {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        gap: 2px;
    }

    .mobile-contact__meta {
        font-size: 10px;
        font-weight: 400;
        letter-spacing: 0.04em;
        opacity: 0.6;
        text-transform: none;
    }

    .mobile-contact__label {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    [dir="rtl"] .site-header__bar .mobile-contact {
        align-items: flex-end;
        text-align: right;
    }

    [dir="ltr"] .site-header__bar .mobile-contact {
        align-items: flex-start;
        text-align: left;
    }
}

.drawer__footer>a {
    opacity: 1 !important;
}

.drawer__footer>a {
    opacity: 1 !important;
    transform: unset !important;
}

.drawer__nav-link {
    line-height: 100%;
}

button.drawer__nav-link.drawer__nav-link--parent {
    line-height: 100% !important;
}

.drawer__footer {
    padding: 15px 32px !important;
    gap: 10px !important;
}

@media (max-width: 993px) {
    .drawer__footer .btn {
        font-size: 12px !important;
        text-transform: capitalize !important;
        padding: 10px 22px !important
    }
}