/* ============================================================
   CUBIC — RTL OVERRIDES (Arabic)
   /ar/assets/css/ar-rtl.css
   Loaded AFTER style.css and style-pages.css
   ============================================================ */


/* ============================================
   FONT FAMILY — Tajawal for Arabic
   ============================================ */
:root {
    --ff-primary: 'Tajawal', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html[dir="rtl"],
html[dir="rtl"] body {
    font-family: 'Tajawal', 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Arabic glyphs sit slightly lower — bump line-height for breathing room */
    line-height: 1.7;
}

/* Slightly larger base size for Arabic (Tajawal glyphs read smaller than Rubik at same px) */
html[dir="rtl"] {
    font-size: 17px;
}
@media (max-width: 768px) {
    html[dir="rtl"] { font-size: 16px; }
}

/* Numbers, time stamps, prices: keep Rubik so SAR 250 / 24/7 stay clean */
html[dir="rtl"] .hero__stat-number,
html[dir="rtl"] .tier-panel__price-val,
html[dir="rtl"] .size-calc__price,
html[dir="rtl"] code,
html[dir="rtl"] time {
    font-family: 'Rubik', sans-serif;
}


/* ============================================
   GLOBAL DIRECTION TWEAKS
   ============================================ */
html[dir="rtl"] body {
    text-align: right;
}


/* ============================================
   NAVBAR — Logo on right, menu in middle, actions on left
   The existing flex layout naturally flips with dir="rtl",
   but we adjust a few specifics.
   ============================================ */
html[dir="rtl"] .navbar__container {
    /* Flex auto-reverses with RTL, no action needed */
}

html[dir="rtl"] .navbar__chevron {
    margin-right: 0.3em;
    margin-left: 0;
}

/* Dropdown menus — keep left-aligned content inside (but mirror the panel) */
html[dir="rtl"] .navbar__dropdown {
    left: auto;
    right: 0;
    text-align: right;
}

/* Mobile chevron rotation for RTL */
html[dir="rtl"] .navbar__mobile-chevron {
    transform: scaleX(-1);
}

/* Mobile slide-out: slides from the right in RTL instead of left */
html[dir="rtl"] .navbar__mobile {
    left: auto;
    right: 0;
    transform: translateX(100%);
}
html[dir="rtl"] .navbar__mobile.is-open {
    transform: translateX(0);
}

/* Language switcher icon spacing */
html[dir="rtl"] .navbar__lang svg {
    margin-left: 0.4em;
    margin-right: 0;
}


/* ============================================
   HERO — Title alignment & button arrows
   ============================================ */
html[dir="rtl"] .hero__center,
html[dir="rtl"] .hero__title,
html[dir="rtl"] .hero__subtitle {
    text-align: center;
}

/* Flip the right-arrow icons inside buttons */
html[dir="rtl"] .btn svg:last-child,
html[dir="rtl"] .sol__cta svg:last-child,
html[dir="rtl"] .step__icon svg,
html[dir="rtl"] .feature-card__icon-wrap svg,
html[dir="rtl"] .footer__newsletter-btn svg {
    /* Only flip arrow-style icons (line + polyline). Targeted in markup
       via specific classes where possible. The generic rule below flips
       SVGs that visually represent a directional arrow. */
}

/* Targeted arrow flips — only the ones that point "forward" */
html[dir="rtl"] .btn--primary svg polyline[points*="5 19 12"],
html[dir="rtl"] .btn--outline svg polyline[points*="5 19 12"],
html[dir="rtl"] .btn--lg svg polyline[points*="5 19 12"],
html[dir="rtl"] .sol__cta svg polyline,
html[dir="rtl"] .navbar__cta + * svg polyline,
html[dir="rtl"] .footer__newsletter-btn svg polyline,
html[dir="rtl"] .step__content svg polyline[points*="10 17"] {
    /* SVG line+polyline arrows: simplest fix is to mirror the whole SVG */
}

/* The pragmatic approach: just flip arrow SVGs by class context */
html[dir="rtl"] .btn svg,
html[dir="rtl"] .sol__cta svg,
html[dir="rtl"] .footer__newsletter-btn svg,
html[dir="rtl"] .cta-strip__actions svg,
html[dir="rtl"] .navbar__cta svg,
html[dir="rtl"] .location__contact svg ~ *,
html[dir="rtl"] .hero__btn-primary svg {
    /* Mirror arrow-bearing SVGs only when they're action arrows.
       Specific rule below handles directional ones. */
}

/* CLEANER: flip arrow icons explicitly */
html[dir="rtl"] .btn > svg:last-of-type,
html[dir="rtl"] .sol__cta > svg:last-of-type,
html[dir="rtl"] .cta__actions .btn > svg,
html[dir="rtl"] .cta-strip__actions .btn > svg:last-of-type,
html[dir="rtl"] .footer__newsletter-btn > svg,
html[dir="rtl"] .hero__btn-primary > svg,
html[dir="rtl"] .step__content > svg,
html[dir="rtl"] .navbar__mobile-footer .btn > svg:last-of-type {
    transform: scaleX(-1);
}

/* Phone icon should NOT flip (it's symbolic, not directional). Reset: */
html[dir="rtl"] .btn svg path[d*="22 16.92"],
html[dir="rtl"] .navbar__mobile-contact-link svg,
html[dir="rtl"] .location__contact svg,
html[dir="rtl"] .footer__contact-item svg,
html[dir="rtl"] .contact-info__icon svg {
    transform: none;
}


/* ============================================
   SECTION HEADERS / EYEBROWS — Center-aligned still works
   ============================================ */
html[dir="rtl"] .section-header,
html[dir="rtl"] .section-header__eyebrow,
html[dir="rtl"] .section-header__title,
html[dir="rtl"] .section-header__desc,
html[dir="rtl"] .page-intro,
html[dir="rtl"] .page-intro__title,
html[dir="rtl"] .page-intro__text,
html[dir="rtl"] .page-hero__container,
html[dir="rtl"] .page-hero__title,
html[dir="rtl"] .page-hero__subtitle {
    text-align: center;
}


/* ============================================
   FEATURE CARDS / POINTS / STEPS — Text right-aligned
   ============================================ */
html[dir="rtl"] .feature-card,
html[dir="rtl"] .step,
html[dir="rtl"] .point,
html[dir="rtl"] .sol__body,
html[dir="rtl"] .tier-panel,
html[dir="rtl"] .facility__features,
html[dir="rtl"] .testimonial-card {
    text-align: right;
}

/* Bullet checkmarks inside feature lists — icon goes on the right */
html[dir="rtl"] .sol__features li,
html[dir="rtl"] .facility__feature,
html[dir="rtl"] .tier-panel__list li {
    text-align: right;
}
html[dir="rtl"] .sol__features li svg,
html[dir="rtl"] .facility__feature svg,
html[dir="rtl"] .tier-panel__list li::before {
    margin-left: 0.5rem;
    margin-right: 0;
}


/* ============================================
   STEP NUMBERS / CONNECTORS
   ============================================ */
html[dir="rtl"] .step__connector {
    /* The connector line between steps — flip its direction */
    transform: scaleX(-1);
}


/* ============================================
   SIZE CALCULATOR
   ============================================ */
html[dir="rtl"] .size-calc__info {
    text-align: right;
}
html[dir="rtl"] .size-calc__fits-items {
    justify-content: flex-end;
}
html[dir="rtl"] .size-calc__range {
    margin-right: 0.5rem;
    margin-left: 0;
    font-family: 'Rubik', sans-serif; /* keep "1–5 m²" readable */
}
html[dir="rtl"] .size-calc__dimension {
    font-family: 'Rubik', sans-serif;
}


/* ============================================
   FAQ — Chevron should mirror direction
   ============================================ */
html[dir="rtl"] .faq__question {
    text-align: right;
}
html[dir="rtl"] .faq__answer {
    text-align: right;
}


/* ============================================
   TESTIMONIALS
   ============================================ */
html[dir="rtl"] .testimonial-card__quote {
    text-align: right;
}
html[dir="rtl"] .testimonial-card__author {
    flex-direction: row-reverse;
    justify-content: flex-end;
}


/* ============================================
   LOCATION / CONTACT
   ============================================ */
html[dir="rtl"] .location__info,
html[dir="rtl"] .location__address,
html[dir="rtl"] .location__address div {
    text-align: right;
}
html[dir="rtl"] .location__address svg,
html[dir="rtl"] .location__contact svg {
    margin-left: 0.5rem;
    margin-right: 0;
}


/* ============================================
   FOOTER
   ============================================ */
html[dir="rtl"] .footer__col,
html[dir="rtl"] .footer__col-title,
html[dir="rtl"] .footer__brand-desc,
html[dir="rtl"] .footer__links li,
html[dir="rtl"] .footer__links a,
html[dir="rtl"] .footer__contact-list li,
html[dir="rtl"] .footer__contact-item,
html[dir="rtl"] .footer__hours,
html[dir="rtl"] .footer__copyright,
html[dir="rtl"] .footer__newsletter-text {
    text-align: right;
}

html[dir="rtl"] .footer__newsletter-input {
    text-align: right;
}

/* Newsletter button arrow */
html[dir="rtl"] .footer__newsletter-btn {
    /* The button sits on the left side of the input in RTL — natural flip works */
}

html[dir="rtl"] .footer__contact-item svg,
html[dir="rtl"] .footer__hours svg {
    margin-left: 0.5rem;
    margin-right: 0;
}

html[dir="rtl"] .footer__social {
    justify-content: flex-end;
}

html[dir="rtl"] .footer__bottom-inner {
    /* Flex auto-reverses */
}

html[dir="rtl"] .footer__legal,
html[dir="rtl"] .footer__payment-icons {
    text-align: right;
}


/* ============================================
   INNER PAGE COMPONENTS (style-pages.css)
   ============================================ */
html[dir="rtl"] .page-hero__crumbs ol {
    direction: rtl;
}

html[dir="rtl"] .legal-prose {
    text-align: right;
}
html[dir="rtl"] .legal-prose ul,
html[dir="rtl"] .legal-prose ol {
    margin: 0 1.5rem 1.5rem 0;
}

html[dir="rtl"] .auth-field label {
    text-align: right;
}
html[dir="rtl"] .auth-field input,
html[dir="rtl"] .contact-form textarea {
    text-align: right;
}

html[dir="rtl"] .contact-info__item {
    /* flex auto-reverses; just align text */
}
html[dir="rtl"] .contact-info__label,
html[dir="rtl"] .contact-info__value {
    text-align: right;
}

html[dir="rtl"] .cta-strip__title,
html[dir="rtl"] .cta-strip__desc {
    text-align: center;
}


/* ============================================
   SPECIAL: skip-link in RTL
   ============================================ */
html[dir="rtl"] .skip-link {
    left: auto;
    right: 1rem;
}


/* ============================================
   BACK-TO-TOP BUTTON — slide from left in RTL
   ============================================ */
html[dir="rtl"] .back-to-top {
    right: auto;
    left: 2rem;
}


/* ============================================
   TOAST NOTIFICATION
   ============================================ */
html[dir="rtl"] .toast {
    right: auto;
    left: 2rem;
    text-align: right;
}
html[dir="rtl"] .toast__icon {
    margin-left: 0.5rem;
    margin-right: 0;
}


/* ============================================
   FINE TYPOGRAPHY TWEAKS FOR ARABIC
   ============================================ */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4 {
    /* Arabic display type sits tighter — slight letter-spacing reset */
    letter-spacing: 0;
}

/* Italics don't render well in Arabic — convert em to colored span instead */
html[dir="rtl"] em {
    font-style: normal;
    font-weight: 700;
}

/* Quote marks in testimonials */
html[dir="rtl"] .testimonial-card__quote::before,
html[dir="rtl"] .testimonial-card__quote::after {
    display: none; /* if any English quote-mark pseudo-elements exist */
}


/* ============================================
   FACILITY GALLERY — Single-image layout (no thumbnails)
   Used when only the main facility image is available.
   ============================================ */
html[dir="rtl"] .facility__layout {
    align-items: start;
}

.facility__gallery--single {
    align-self: start;
    margin-top: 1.5rem;
}

.facility__gallery--single .facility__gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.facility__gallery--single .facility__gallery-item--large {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12),
                0 8px 20px rgba(29, 178, 89, 0.08);
}

.facility__gallery--single .facility__gallery-item--large::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, transparent 60%, rgba(29, 178, 89, 0.08));
    pointer-events: none;
}

.facility__gallery--single .facility__gallery-item--large img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    border-radius: inherit;
}

@media (max-width: 768px) {
    .facility__gallery--single {
        margin-top: 1rem;
    }
    .facility__gallery--single .facility__gallery-item--large img {
        max-height: 360px;
    }
}