/* ============================================================
   rtl-visual-parity.css — COMPLETE English→Arabic visual parity layer
   for the restored baseline Arabic homepage (indexar.html), which keeps its
   frozen RTL structure from commit 1a1d635 and therefore does NOT load theme.css.

   Loaded AFTER assets/css/app/tokens.css, so every value below resolves to the
   EXACT same computed value as English (no approximated shades — all values are
   either var() references to the shared tokens or literals copied from theme.css).

   STRICTLY VISUAL. This file never sets:
     direction, flex-direction, row-reverse, left/right, text-align, order,
     transform, font-family, font-size, line-height, width/max-width/min-width,
     or any Swiper/track/layout property.
   Therefore the frozen Arabic direction, menu order, slider behaviour and
   offer-one order are provably unaffected.

   Mirrors: assets/css/app/theme.css (the approved English visual source of truth).
   See FORCE_COMPLETE_ENGLISH_ARABIC_VISUAL_PARITY.md §6/§7.
   ============================================================ */

/* ---- Typography COLORS only (font-family/size deliberately omitted: Arabic keeps
        Droid Arabic Kufi and its frozen sizing). ---- */
body { color: var(--ft-ink); }
h1, h2, h3, h4, h5, h6 { color: var(--ft-navy); }
p, .text { color: var(--ft-muted); }

/* ---- Skip link (exact copy of the English theme.css rule, so the Arabic skip
        link is identically hidden off-screen until focused — no visual change). ---- */
.skip-link {
  position: absolute; inset-inline-start: var(--sp-4); top: -100px; z-index: 100000;
  background: var(--ft-navy); color: #fff; padding: 12px 20px;
  border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: #fff; outline: 3px solid var(--ft-frame-blue); }

/* ---- Visible focus (matches English focus ring exactly) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .theme-btn:focus-visible,
.swiper-pagination-bullet:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ft-frame-blue) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
:focus-visible { outline: 3px solid var(--ft-frame-blue); outline-offset: 2px; }

/* ---- Brand palette retune (buttons, gradients, decorative dots, scrollbar) ---- */
.preloader { background-image: var(--ft-gradient) !important; }
.btn-style-one { background-image: var(--ft-gradient) !important; }
.btn-style-one::before, .btn-style-two::before, .btn-style-three::before { background-image: var(--ft-gradient) !important; }
.btn-style-three { background-color: var(--ft-navy) !important; }
.sec-title_dots span { background-image: var(--ft-gradient) !important; }
::-webkit-scrollbar-thumb { background-color: var(--ft-frame-blue-700); }
.about-three_experiance { background-color: var(--ft-navy) !important; }

/* ---- HERO scrim + readable hero text (identical to English) ---- */
.slider-one .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /*  background: linear-gradient(180deg, rgba(11,20,45,.42) 0%, rgba(11,20,45,.55) 50%, rgba(11,20,45,.66) 100%);*/
/*    background: linear-gradient(180deg, rgb(11 20 45 / 0%) 0%, rgb(11 20 45 / 13%) 50%, rgb(11 20 45 / 0%) 100%);*/
    background: unset;
}
.slider-one_content { position: relative; z-index: 2; }
.slider-one_heading, .slider-one_title { color: #fff !important; text-shadow: 0 2px 18px rgba(6,12,30,.55); }
.slider-one_title {
    background: rgb(22 82 128 / 93%);
    border: 1px solid rgba(255,255,255,.35);
}

/* ---- Remove the decorative custom cursor (English hides it) ---- */
.cursor, .cursor-follower { display: none !important; }

/* ---- Accessible form system (colors/borders/radius only) ---- */
.form-field > label { color: var(--ft-navy); }
.form-group input, .form-group textarea, .form-group select {
  border: 1px solid var(--ft-border) !important; border-radius: var(--radius-sm);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--ft-frame-blue-700) !important; }
.field-error { color: #b02a1e; }
[aria-invalid="true"] { border-color: #c0392b !important; }
.form-status { border-radius: var(--radius-sm); }
.form-status.is-success { background: #e7f7ee; color: #0b5b34; border: 1px solid #b7e4cd; }
.form-status.is-error { background: #fdecea; color: #7a1a11; border: 1px solid #f5c6c2; }
.form-error-summary { background: #fdecea; border: 1px solid #f5c6c2; color: #7a1a11; border-radius: var(--radius-sm); }
.form-error-summary a { color: #7a1a11; text-decoration: underline; }

/* ---- Contrast fixes (WCAG 2.2 AA) — identical to English ---- */
.sec-title_title, .sec-title_label { color: #0c5a7d !important; }
.eyebrow { color: #45506b !important; }
.slider-one_reviews, .slider-one_reviews span,
.offer-one_heading, .offer-one_heading a { color: var(--ft-navy) !important; }
.news-block_one-author, .news-block_one-meta a, .news-block_one-meta li { color: #45506b !important; }
.news-block_one-date, .news-block_one-date *, .news-block_one-date span, .news-block_one-date strong { color: #ffffff !important; }
.about-three_text, .offer-one_tags .tag, .clients-one_title {
    color: var(--ft-muted);
    text-align: justify;
}
.testimonial-two_reviews, .testimonial-two_title { color: #fff !important; }
.footer-style_three, .footer-style_three p, .footer-three_text, .footer-three_appointment,
.footer-three_appointment span, .footer-three_appointment .word, .footer-three_appointment-text,
.footer-three_location-text, .footer-three_title, .footer-three_appointment-title { color: #e6edf7 !important; }
.footer-three_location-text a, .footer-three_list a { color: #bfe0f4 !important; }
.footer-three_location-text a:hover, .footer-three_list a:hover { color: #fff !important; }
.testimonial-two_rating-outer { background-color: var(--ft-navy) !important; }
.team-block_three .team-block_three-designation, [class*="_designation"],
.team-block_three-designation, .team-block_two-designation, .team-block_one-designation,
.designation, .team-designation, .member-role, .author-designation { color: #45506b !important; }
.nav-link.active, .nav-pills .nav-link.active, .nav-tabs .nav-link.active,
.tab-btn.active, .filter-btn.active { background-color: var(--ft-frame-blue-700) !important; color: #fff !important; }
.service-block_one.is-dark, .service-block_one.is-dark * { color: #fff !important; }
.footer-style_three .footer-three_appointment .word,
.footer-style_three .prismic-style .word {
  color: #eaf1fb !important;
  -webkit-text-fill-color: #eaf1fb !important;
  animation: none !important;
  background: none !important;
  opacity: 1 !important;
}
.footer-style_three .footer-three_appointment span { color: #eaf1fb !important; }

/* ---- Final contrast pass (identical to English) ---- */
.team-block_three-designation, .team-block_three-content .team-block_three-designation,
[class*="-designation"] { color: #45506b !important; opacity: 1 !important; }
.service-detail_list li, .service-detail_list-two li { color: var(--ft-ink) !important; }
.category-list li span, .category-list li a span, .category-list li .count { color: #fff !important; }

/* ---- Header/mobile-menu brand variables (English header keeps frame-blue).
        Variables + button colors ONLY — theme.css's font-family/size/line-height
        for the header are intentionally NOT copied so the frozen Arabic header
        typography is preserved. ---- */
.main-header, .mobile-menu, .xs-sidebar-group, .sticky-header {
  --main-color: #6ac3ee;
  --main-color-rgb: 106, 195, 238;
  --color-two: #c115ec;
  --color-two-rgb: 193, 21, 236;
  --black-color: #000000;
  --black-color-rgb: 0, 0, 0;
  --white-color: #ffffff;
  /* English header text colour (theme.css). Colour only — font-family/size/
     line-height are deliberately NOT copied so Arabic header typography stays frozen. */
  color: #666666;
}
.main-header_button .theme-btn.btn-style-one { background-color: var(--main-color) !important; background-image: none !important; }
.main-header_button .theme-btn.btn-style-one::before { background-image: linear-gradient(90deg, #6ac3ee 0%, #6ac3ee 100%) !important; }