/* =============================================================================
   verify-gcc — Arabic / RTL layer
   Loaded only when vgcc_is_ar() (see functions.php). Pairs with the swapped-in
   bootstrap.rtl.min.css.

   Deliberately MINIMAL for the Phase-2 evaluation build: self-hosted Cairo,
   the typeface swap, and the few bidi isolations that would otherwise mangle
   Latin runs (phone, e-mail, counters). Component-level directional fixes are
   added targeted, from what the native review turns up — a full rtlcss pass
   over style.css is a later step.
   ========================================================================== */

/* ---- Cairo (self-hosted, variable weight axis) --------------------------- */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../assets/fonts/cairo/cairo-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                   U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../assets/fonts/cairo/cairo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC,
                   U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Typeface + base direction ----------------------------------------- */
body.vgcc-rtl {
    font-family: 'Cairo', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

body.vgcc-rtl h1, body.vgcc-rtl h2, body.vgcc-rtl h3,
body.vgcc-rtl h4, body.vgcc-rtl h5, body.vgcc-rtl h6,
body.vgcc-rtl p,  body.vgcc-rtl a,  body.vgcc-rtl li,
body.vgcc-rtl button, body.vgcc-rtl input, body.vgcc-rtl textarea,
body.vgcc-rtl .vh-hero__title {
    font-family: 'Cairo', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Keep genuinely-Latin runs readable inside RTL flow -------------- */
body.vgcc-rtl a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---- Footer: headings + link/address lists are text-align:left in
   style.css (#verifyFooter h3, .verify-info-customer-links-row li). ---- */
body.vgcc-rtl #verifyFooter h3,
body.vgcc-rtl .verify-info-customer-links-row ul li,
body.vgcc-rtl .verify-info-customer-links-row ul li a {
    text-align: right;
}
body.vgcc-rtl .footer-policy-links {
    direction: rtl;
    /* keep the 3 links + separators on ONE line, shrink the type rather
       than wrap (Arabic "ملفات تعريف الارتباط" was breaking to a 2nd line). */
    white-space: nowrap;
    min-width: 0;
    font-size: clamp(0.6rem, 1.4vw, 0.82rem);
}

/* 768-992px the footer splits into two columns and style.css puts the
   divider on .info-address-time's border-right. In RTL that column is the
   RIGHT one, so the line lands on the outer edge instead of between the
   columns — move it to the left (inner) side. */
@media (min-width: 768px) and (max-width: 992px) {
    body.vgcc-rtl .info-address-time {
        border-right: 0;
        border-left: 1px solid #ccc;
    }
}

/* <=767px the footer stacks to one column and style.css centres every
   heading + list item. The RTL rules above force text-align:right at all
   widths and were overriding that — restore centring at mobile widths. */
@media (max-width: 767px) {
    body.vgcc-rtl #verifyFooter h3,
    body.vgcc-rtl .verify-info-customer-links-row ul li,
    body.vgcc-rtl .verify-info-customer-links-row ul li a,
    body.vgcc-rtl .address-contact-list-dekstop li,
    body.vgcc-rtl .address-contact-list-dekstop li a {
        text-align: center;
    }
}

/* ---- Service-page hero: the leaf-shaped boxes were drawn for the LTR
   layout (image right, title box left). In RTL they swap sides, so mirror
   their asymmetric border-radius + the title's inner left padding. -------- */
body.vgcc-rtl .service-hero-image img {
    border-radius: 64px 3px 128px 3px;      /* was 3px 64px 3px 128px */
}
@media (min-width: 993px) {
    body.vgcc-rtl .hero-title {
        border-radius: 3px 128px 3px 128px; /* was 128px 3px 128px 3px */
    }
    body.vgcc-rtl .hero-title > * {
        padding-left: 0;
        padding-right: 20px;
    }
}
@media (max-width: 992px) {
    body.vgcc-rtl .hero-title {
        border-radius: 3px 24px 3px 24px;   /* was 24px 3px 24px 3px */
    }
}

/* ---- Service / career pages: section headings are `text-align:left`
   (verify-service.css .text-highlight) and the green accent bars sit on
   border-left (.card-section, .numbered-list). Flip all of it for RTL. -- */
body.vgcc-rtl .text-highlight,
body.vgcc-rtl .disclaimer,
body.vgcc-rtl .career-display-2-headline,
body.vgcc-rtl .career-display-2-text {
    text-align: right;
}
body.vgcc-rtl .card-section {
    border-left: 0;
    border-right: 5px solid var(--green);
}
/* On mobile verify-service.css moves the green accent to border-top (side
   borders back to the thin grey). The unscoped rule above was re-adding the
   green on border-right — match the mobile treatment instead. */
@media (max-width: 992px) {
    body.vgcc-rtl .card-section {
        border: 1px solid #e0e0e0;
        border-top: 5px solid var(--green);
    }
}

/* numbered-list / check-list: lay it out as flex so the marker sits in
   its own column, vertically centred, with real spacing to the text. */
body.vgcc-rtl .numbered-list {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: right;
    padding: 15px 20px;
    border-left: 0;
    border-right: 4px solid var(--green);
}
body.vgcc-rtl .numbered-list > strong {
    flex: 0 0 auto;
    line-height: 1;
    align-self: center;
}
body.vgcc-rtl .numbered-list strong i {
    vertical-align: middle;
}
/* the "→" marker points toward the text in RTL */
body.vgcc-rtl .numbered-list strong i.fa-long-arrow-alt-right {
    display: inline-block;
    transform: scaleX(-1);
}

/* The EN · العربية switch stays visually LTR in every placement. */
body.vgcc-rtl .vgcc-langswitch {
    direction: ltr;
}

/* ---- Mobile off-canvas drawer (<992px) --------------------------------
   The drawer takes all its inner inset from physical margin-left /
   padding-left (built for LTR). In RTL those land on the trailing side,
   so the Arabic text runs flush to the panel's right edge and its first
   letter is shaved by the off-canvas overflow clip
   ("نموذج التواصل" -> "موذج التواصل"). Mirror the insets to the right. */
@media (max-width: 992px) {
    body.vgcc-rtl .mobileMenu-secondaryList-item a {
        margin-left: 0;
        margin-right: 20px;
    }
    body.vgcc-rtl .vgcc-langswitch-li {
        text-align: right;              /* park the inline-flex switch on the right */
    }
    body.vgcc-rtl .vgcc-langswitch-li .vgcc-langswitch--mobile {
        margin-left: 0;
        margin-right: 20px;
    }
    body.vgcc-rtl .mobile-menu-secondary-list,
    body.vgcc-rtl .mobile-nav-clients {
        padding-right: 4px;            /* safety gap against the clip */
    }
}

/* ---- Header nav chips (Contact Form, phone): icon on the RIGHT ------- */
body.vgcc-rtl .desk-nav-phone,
body.vgcc-rtl .desk-nav-email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    direction: rtl;               /* row + rtl -> first child (the icon) lands at the right edge */
}

body.vgcc-rtl .desk-nav-phone .desk-nav-icons,
body.vgcc-rtl .desk-nav-email .desk-nav-icons {
    margin: 0;                     /* gap handles the spacing now */
}

/* Phone / any digit run wrapped in <bdi dir="ltr">.
   Arabic-Indic digits are bidi type AN: groups separated by spaces still
   flip to visual RTL order under plain `isolate`/`direction:ltr`
   (+٩٧٤ ٥٠٠٠ ١١٣٧  ->  +١١٣٧ ٥٠٠٠ ٩٧٤). `isolate-override` forces every
   character into logical L-to-R order while staying isolated from the
   surrounding RTL text. */
body.vgcc-rtl bdi[dir="ltr"] {
    direction: ltr;
    unicode-bidi: isolate-override;
}

/* Footer WhatsApp / clock / pin rows: icon leads on the right. */
body.vgcc-rtl .address-contact-list-dekstop li,
body.vgcc-rtl .address-contact-list-dekstop li a {
    direction: rtl;
    text-align: right;
}
body.vgcc-rtl .footer-whatsapp-icon,
body.vgcc-rtl .footer-mail-icon {
    margin-left: 6px;
    margin-right: 0;
}

/* ---- Hero: breathing room between the H1 and the typewriter line ----- */
body.vgcc-rtl .vh-hero__title   { margin-bottom: 1rem; }
body.vgcc-rtl .vh-hero__tagline { margin-top: 0.5rem; }

/* ---- Hero "By the numbers" glass box -------------------------------- */
/* 2x2 grid: the flush-edge padding and the column divider are physical
   in style.css -> mirror them for RTL. */
body.vgcc-rtl .vh-glass__eyebrow { text-align: right; }

body.vgcc-rtl .vh-glass__list li:nth-child(odd) {
    padding-left: clamp(0.8rem, 2.5vw, 1.2rem);
    padding-right: 0;
}
body.vgcc-rtl .vh-glass__list li:nth-child(even) {
    padding-right: clamp(0.8rem, 2.5vw, 1.2rem);
    padding-left: 0;
    border-left: 0;
    border-right: 1px solid rgba(20, 52, 47, 0.16);
}

/* Number + label must hug the SAME edge in each cell. The <li> is a
   column flex; in RTL its cross-start is the right, so flex-start packs
   both children to the right regardless of their own text-align. */
body.vgcc-rtl .vh-glass__list li {
    align-items: flex-start;
}
body.vgcc-rtl .vh-glass__num {
    direction: ltr;                 /* keep "٩٧%" / "١٠+" in logical order */
    unicode-bidi: isolate-override;
}
body.vgcc-rtl .vh-glass__label {
    align-self: stretch;
    text-align: right;
}

/* ---- FAQ box: the column divider is `border-right` on the topic list
   (left col in LTR). In RTL the list is the right col -> move it left so
   it sits between the pills and the questions again. */
@media (min-width: 993px) {
    body.vgcc-rtl .faqs-topic-list {
        border-right: 0;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
    }
}

/* ---- Vertical pill tabs (mega-menu services list + FAQ topic list):
   the green active bar sits on border-left in LTR -> move it to the right. */
body.vgcc-rtl .nav-pills .nav-link.active {
    border-left: 0;
    border-right: 12px solid var(--green);
}
body.vgcc-rtl .nav-pills .nav-link,
body.vgcc-rtl .nav-pills .nav-link.active {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out,
                border-right 0.3s ease-in-out;
}

/* ---- Workflow cube slider: Swiper auto-detects RTL from computed
   `direction` and then right-aligns its dynamic pagination. Force the
   container LTR so the bullets re-centre; keep the slide text RTL. */
body.vgcc-rtl .workflow-swiper {
    direction: ltr;
}
body.vgcc-rtl .workflow-swiper .swiper-slide {
    direction: rtl;
}

/* ---- "Reach Out to Us": keep the original LTR layout (bootstrap.rtl just
   mirrors it — details text right, form left), only fix text alignment. --- */
@media (min-width: 993px) {
    body.vgcc-rtl .contact-details-text,
    body.vgcc-rtl .map-details-text {
        text-align: right;
    }
    body.vgcc-rtl .contact-details-headline,
    body.vgcc-rtl .map-headline,
    body.vgcc-rtl .map-subheadline {
        text-align: right;
        padding-left: 0;
        padding-right: 0;
    }
}


/* ============================================================================
   Formidable forms — RTL  (FIRST PASS — iterate against localhost/…/ar/)
   ----------------------------------------------------------------------------
   The form Style's "Direction" is LTR, so Formidable renders its 12-column
   grid (`.frm_fields_container{display:grid;grid-template-columns:repeat(12,
   1fr)}`) left-to-right no matter the page dir — first name ends up on the
   left. CSS Grid honours `direction`, so flipping it on the containers makes
   the frm6 / frm4 columns flow right-to-left (first field on the right).
   Scoped to body.vgcc-rtl -> the English forms are untouched.
   ========================================================================== */
body.vgcc-rtl .with_frm_style,
body.vgcc-rtl .frm_form_fields,
body.vgcc-rtl .frm_fields_container,
body.vgcc-rtl .frm_form_field,
body.vgcc-rtl .frm_form_field select,
body.vgcc-rtl .frm_form_field textarea,
body.vgcc-rtl .frm_form_field input[type="text"] {
    direction: rtl;
}

/* labels + descriptions + errors: right-aligned (Formidable var --align is left) */
body.vgcc-rtl .frm_primary_label,
body.vgcc-rtl .frm_form_field .frm_description,
body.vgcc-rtl .frm_error,
body.vgcc-rtl .frm_error_style {
    text-align: right;
}

/* required asterisk stays snug after the label text, not adrift at the left */
body.vgcc-rtl .frm_primary_label .frm_required {
    margin-right: 4px;
    margin-left: 0;
}

/* genuinely-Latin single-line inputs keep LTR entry, but sit on the right edge */
body.vgcc-rtl .frm_form_field input[type="email"],
body.vgcc-rtl .frm_form_field input[type="tel"],
body.vgcc-rtl .frm_form_field input[type="url"],
body.vgcc-rtl .frm_form_field input[type="number"] {
    direction: ltr;
    text-align: right;
}

/* consent radio / checkbox row: control before the label on the right */
body.vgcc-rtl .frm_form_field .frm_radio,
body.vgcc-rtl .frm_form_field .frm_checkbox {
    text-align: right;
}

/* submit row */
body.vgcc-rtl .frm_submit {
    text-align: right;
}


/* ---- Header contact panel (#contact-mega-panel) ---------------------------
   Panel + inner scroller take their inset from physical padding tuned for an
   LTR (right-side) scrollbar: panel padding-right:0 so the bar sits flush,
   .contact-inner padding-right:20px so content clears it. In RTL the scrollbar
   is on the LEFT, so this mirrors wrong — the bar ends up 20px inset and the
   leading control (the consent radio) is clipped by the panel's
   overflow:hidden, showing as a cut-off ring. Swap the paddings. */
body.vgcc-rtl #contact-mega-panel {
    padding-left: 0;
    padding-right: 20px;
}
body.vgcc-rtl .contact-inner {
    padding-left: 20px;
    padding-right: 0;
}