/* DEPRECATED - Wave 33 R1 Track A migration to ehgzli_components.css
 * Sunset: 2026-06-27 (30 days from 2026-05-28)
 *
 * The 5 sections in this file have been consolidated into ehgzli_components.css:
 *   - .ehgzli-skeleton.* -> .eh-skeleton.* (use eh-skeleton__text, __card, __avatar, __title)
 *   - .ehgzli-card:hover lift -> .eh-card.eh-card--interactive
 *   - Universal :focus-visible -> .eh-* :focus-visible (built into every component)
 *   - AR typography rhythm -> :root tokens + html[lang="ar"] selectors in components.css
 *   - 3-tier shadow scale -> --eh-shadow-flat / -hover / -active CSS vars
 *
 * Migration path: replace .ehgzli-* classes in templates with .eh-* equivalents.
 * Use scripts/migrate_polish_to_components_w33.py --execute to grep templates.
 *
 * After sunset date, this file will be deleted + removed from hooks.py web_include_css.
 * Per RFC-0031 D3 Design System + Clause 1 extend-never-duplicate.
 */

/* =====================================================================
   Ehgzli Polish v1 — Wave 28 Track B "Best-in-World" design enhancements
   Per RFC-0031 (10-Dimension Best-in-World Portal Rubric) + user 2026-05-28
   Targets: A11y (#4), Design System (#3), Performance (#5), CRO (#7)
   Source: apps/ehgzli ONLY — Golden Rule compliant
   ===================================================================== */

/* ---------------------------------------------------------------------
   SECTION 1 — Skeleton loading states (RFC-0031 D5 Performance / CLS)
   Apply via JS to Vue island placeholders or empty content slots.
   --------------------------------------------------------------------- */
.ehgzli-skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: #f1f5f9;
  border-radius: 6px;
  min-height: 1em;
}
.ehgzli-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  animation: ehgzli-skeleton-shimmer 1.4s infinite;
}
[dir="rtl"] .ehgzli-skeleton::after { animation-direction: reverse; }
@keyframes ehgzli-skeleton-shimmer {
  100% { transform: translateX(100%); }
}
.ehgzli-skeleton--text     { height: 0.9em; margin: 0.3em 0; }
.ehgzli-skeleton--title    { height: 1.4em; width: 60%; margin-bottom: 0.6em; }
.ehgzli-skeleton--card     { height: 180px; }
.ehgzli-skeleton--avatar   { width: 56px; height: 56px; border-radius: 50%; }
.ehgzli-skeleton--button   { height: 38px; width: 120px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  .ehgzli-skeleton::after { animation: none; }
}

/* ---------------------------------------------------------------------
   SECTION 2 — Hero / card microinteractions (RFC-0031 D7 CRO + D3 DS)
   Hover lift + tap-feedback for .ehgzli-find a + .ehgzli-card surfaces.
   --------------------------------------------------------------------- */
.ehgzli-find a[href],
.ehgzli-card,
.ehgzli-doctor-card,
.ehgzli-clinic-card,
a.ehgzli-quick-book-btn {
  transition:
    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.18s ease;
  will-change: transform;
}
.ehgzli-find a[href]:hover,
.ehgzli-card:hover,
.ehgzli-doctor-card:hover,
.ehgzli-clinic-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 4px 12px -2px rgba(13, 148, 136, 0.18),
    0 2px 4px -2px rgba(0, 0, 0, 0.08);
}
.ehgzli-find a[href]:active,
.ehgzli-card:active,
a.ehgzli-quick-book-btn:active {
  transform: translateY(0);
  transition-duration: 0.06s;
}
@media (prefers-reduced-motion: reduce) {
  .ehgzli-find a[href],
  .ehgzli-card,
  .ehgzli-doctor-card,
  .ehgzli-clinic-card,
  a.ehgzli-quick-book-btn {
    transition: none;
  }
  .ehgzli-find a[href]:hover,
  .ehgzli-card:hover,
  .ehgzli-doctor-card:hover,
  .ehgzli-clinic-card:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   SECTION 3 — Focus-visible polish (RFC-0031 D4 A11y WCAG 2.4.7 + 2.4.11)
   Universal teal ring for keyboard nav. Mouse users unaffected.
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
  outline: 2px solid #0d9488;
  outline-offset: 2px;
  border-radius: 4px;
}
:root[dir="rtl"] a:focus-visible,
:root[dir="rtl"] button:focus-visible {
  outline-offset: 2px; /* RTL safe, no inset flip */
}
.ehgzli-skip-link:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 4px;
}

/* ---------------------------------------------------------------------
   SECTION 4 — Typography rhythm (RFC-0031 D1 AR-First + D3 DS)
   Arabic needs ~10% less vertical breathing than Latin — tighten h1-h3.
   --------------------------------------------------------------------- */
body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
[lang="ar"] body,
html[lang="ar"] body,
[dir="rtl"] body {
  line-height: 1.55;
  font-family: "IBM Plex Sans Arabic", Tajawal, Cairo,
    system-ui, -apple-system, "Segoe UI", sans-serif;
}
[lang="ar"] h1, [dir="rtl"] h1 { margin-block: 0.6em 0.4em; line-height: 1.25; }
[lang="ar"] h2, [dir="rtl"] h2 { margin-block: 0.55em 0.35em; line-height: 1.3; }
[lang="ar"] h3, [dir="rtl"] h3 { margin-block: 0.5em 0.3em; line-height: 1.35; }
[lang="ar"] p, [dir="rtl"] p { margin-block: 0.6em; }

/* ---------------------------------------------------------------------
   SECTION 5 — Card elevation system (RFC-0031 D3 DS + D7 CRO)
   Three-tier shadow scale for consistent depth across portals.
   --------------------------------------------------------------------- */
:root {
  --ehgzli-shadow-flat:
    0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --ehgzli-shadow-hover:
    0 4px 12px -2px rgba(13, 148, 136, 0.18),
    0 2px 4px -2px rgba(0, 0, 0, 0.08);
  --ehgzli-shadow-active:
    0 8px 24px -4px rgba(13, 148, 136, 0.28),
    0 4px 8px -2px rgba(0, 0, 0, 0.10);
  --ehgzli-border-soft: 1px solid #e5e7eb;
  --ehgzli-radius-card: 12px;
}
.ehgzli-card,
.ehgzli-doctor-card,
.ehgzli-clinic-card,
.ehgzli-find article,
.ehgzli-find > section > div > a {
  background: #ffffff;
  border: var(--ehgzli-border-soft);
  border-radius: var(--ehgzli-radius-card);
  box-shadow: var(--ehgzli-shadow-flat);
}
.ehgzli-card[aria-current="true"],
.ehgzli-card.is-selected,
.ehgzli-doctor-card.is-selected,
.ehgzli-clinic-card.is-selected {
  box-shadow: var(--ehgzli-shadow-active);
  border-color: #0d9488;
}
@media (prefers-color-scheme: dark) {
  .ehgzli-card,
  .ehgzli-doctor-card,
  .ehgzli-clinic-card { background: #1f2937; border-color: #374151; }
}

/* ---------------------------------------------------------------------
   END Ehgzli Polish v1 — ~150 lines, 5 sections per RFC-0031
   --------------------------------------------------------------------- */


/* ---------------------------------------------------------------------
   W34.48 — BIDI punctuation fix (Clause 23 + Clause 48, audit W50)
   English text rendered inside a dir=rtl page flips neutral punctuation
   ( . ? ! + : , ) to the visual-end side ("?Need help", ".Your appointments").
   unicode-bidi:plaintext makes each element resolve its own base direction
   from its first strong character — English reads LTR, Arabic reads RTL —
   with no per-string lang attribute required. Reversible, additive.
   --------------------------------------------------------------------- */
[dir="rtl"] div,
[dir="rtl"] span,
[dir="rtl"] strong,
[dir="rtl"] em,
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] a,
[dir="rtl"] button,
[dir="rtl"] .eh-btn,
[dir="rtl"] label,
[dir="rtl"] dt, [dir="rtl"] dd,
[dir="rtl"] td, [dir="rtl"] th,
[dir="rtl"] figcaption,
[dir="rtl"] small,
[dir="rtl"] .ehgzli-quick-action {
  unicode-bidi: plaintext !important;
}

/* Hard LTR isolation for code/lang-tagged spans inside RTL */
[dir="rtl"] :lang(en),
[dir="rtl"] [lang="en"],
[dir="rtl"] code, [dir="rtl"] kbd, [dir="rtl"] samp, [dir="rtl"] var {
  unicode-bidi: isolate;
}


/* ---------------------------------------------------------------------
   W34.58 - Focus-visible rings (WCAG 2.2 AA 2.4.7 Focus Visible) site-wide
   + smoother interactive-card motion. Audit W50 noted no visible focus
   states; keyboard users had no indicator. Teal ring, 2px offset, honors
   prefers-reduced-motion. Additive, no restart (loaded CSS).
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.eh-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.eh-card--interactive:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #0d9488;
  outline-offset: 2px;
  border-radius: .4rem;
}
.eh-card--interactive { transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease; }
.eh-card--interactive:hover { transform: translateY(-3px); box-shadow: 0 8px 24px -8px rgba(13,148,136,.25); }
@media (prefers-reduced-motion: reduce) {
  .eh-card--interactive { transition: none; }
  .eh-card--interactive:hover { transform: none; }
}


/* ---------------------------------------------------------------------
   W34.77 — RTL: content STARTS FROM THE RIGHT.
   Root cause: W34.48 set unicode-bidi:plaintext (in-line bidi) but text
   blocks still inherited text-align:left from the web bundle, so Arabic
   sat on the left. Set the inherited default to right in RTL; explicit
   text-align:center elements are more specific and keep centering.
   --------------------------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] .page_content,
[dir="rtl"] main,
[dir="rtl"] .web-page-content,
[dir="rtl"] .ehgzli-section,
[dir="rtl"] .eh-card,
[dir="rtl"] .ehgzli-find-card,
[dir="rtl"] .ehgzli-card { text-align: right; }

/* Tables: bundle sets th/td text-align:left explicitly — flip for RTL */
[dir="rtl"] th,
[dir="rtl"] td,
[dir="rtl"] dl,
[dir="rtl"] dt,
[dir="rtl"] dd { text-align: right; }

/* Lists (pricing feature lists etc. set text-align:left in the bundle).
   Flex/grid lists ignore text-align, so nav menus are unaffected. */
[dir="rtl"] ul,
[dir="rtl"] ol { text-align: right; }

/* Forms: labels/inputs/placeholders start from the right in RTL */
[dir="rtl"] label,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select { text-align: right; }
[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder { text-align: right; }


/* W34.78 — direction-aware forward arrow: → in LTR, ← in RTL. */
.eh-fwd::after { content: "\2192"; margin-inline-start: .15em; }
[dir="rtl"] .eh-fwd::after { content: "\2190"; }