/* Yak's web home page: the same design as the app's Home tab (Astra, revision 03, 13 Nov 2026).
   A pinned dark green header, then a pale page. One centred column on every screen, so nothing shifts or
   gets cut off in Arabic on a wide screen. Asnan's colours come from home_content.json (body style). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.yh { margin: 0; min-height: 100dvh; background: #F8F9F6; color: #0D211A;
  font: 15px/1.6 'IBM Plex Sans Arabic', system-ui, sans-serif; }
.yh-wrap { width: 100%; max-width: 560px; margin-inline: auto; padding-inline: 20px; }

/* The pinned header: it stays put while the pale page passes under it. */
.yh-hero { position: sticky; top: 0; z-index: 3; padding: 23px 0 29px; padding-top: max(23px, env(safe-area-inset-top));
  background: linear-gradient(135deg, #0B1C17 0%, #14352A 100%); color: #F4ECDD; border-radius: 0 0 27px 27px;
  box-shadow: 0 6px 18px rgba(9, 29, 20, .18); }
.yh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 53px; }
.yh-logo { display: flex; align-items: center; gap: 9px; min-height: 44px; text-decoration: none; }
.yh-mark { height: 40px; width: auto; display: block; }
.yh-word { height: 40px; width: auto; display: block; }
html[lang="ar"] .yh-word--en, html[lang="en"] .yh-word--ar { display: none; }
.yh-lang { min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid #486A5A; background: transparent;
  color: #F4ECDD; font: 600 14px/1.35 system-ui, sans-serif; cursor: pointer; }
.yh-lang:focus-visible, .yh-service:focus-visible, .yh-foot a:focus-visible { outline: 3px solid #3C8A78; outline-offset: 2px; }
.yh-hero h1 { margin: 27px 0 0; max-width: 360px; font: 600 27px/1.38 'Readex Pro', system-ui, sans-serif; }
html[lang="en"] .yh-hero h1 { font-size: 28px; line-height: 1.25; }
.yh-hero p { margin: 8px 0 0; max-width: 380px; color: #D4E2D7; font-size: 14px; line-height: 1.6; }

.yh-body { padding: 20px 0 32px; padding-bottom: max(32px, env(safe-area-inset-bottom)); }

/* The two services: they switch the example below, in place. */
.yh-services { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.yh-service { appearance: none; width: 100%; min-height: 86px; padding: 12px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 8px; text-align: start; border-radius: 15px; border: 1px solid #D6DFD8;
  background: #FFFFFF; color: #17352B; font: 600 14px/1.4 'Readex Pro', system-ui, sans-serif; cursor: pointer;
  transition: background .18s ease, transform .18s ease, border-color .18s ease; }
.yh-service:hover { transform: translateY(-2px); }
.yh-service[aria-pressed="true"] { color: #F4ECDD; background: #173B30; border-color: #C9A45F; }
.yh-service__top { display: flex; justify-content: space-between; align-items: center; }
.yh-service svg { width: 22px; height: 22px; fill: none; stroke: #2E7E70; stroke-width: 1.8; stroke-linecap: round; }
.yh-service[aria-pressed="true"] svg { stroke: #8FD0B8; }
.yh-chev { opacity: .65; font: 500 19px/1 system-ui, sans-serif; }
html[dir="rtl"] .yh-chev { transform: scaleX(-1); }

/* The featured clinic: a loyalty card or a queue ticket in the clinic's own colours. */
.yh-feature-head { margin: 22px 0 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.yh-feature-head h2 { margin: 0; font: 600 18px/1.4 'Readex Pro', system-ui, sans-serif; }
.yh-feature-head span { font-size: 12px; color: #34786A; font-weight: 600; white-space: nowrap; }
.yh-frame { padding: 9px; border-radius: 21px; background: #E7EFEA; }
.yh-view[hidden] { display: none; }
.yh-pass { min-height: 312px; overflow: hidden; border-radius: 16px; background: var(--asnan-card); color: var(--asnan-text);
  border: 1px solid var(--asnan-border); box-shadow: 0 9px 18px rgba(21, 28, 22, .15); display: flex; flex-direction: column; }
.yh-pass__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 15px 8px; }
.yh-pass__logo { height: 40px; width: auto; max-width: 60%; object-fit: contain; object-position: left center; }
.yh-pass__kind { color: var(--asnan-soft); font-size: 12px; }
.yh-pass__art { height: 158px; margin-inline: 12px; border: 1px solid rgba(177, 158, 85, .55); border-radius: 10px;
  background: center 50% / cover no-repeat; }
.yh-pass__fields { display: flex; justify-content: space-between; gap: 10px; padding: 12px 15px 16px; }
.yh-pass__fields small { display: block; margin-bottom: 3px; color: var(--asnan-soft); font-size: 11px; }
.yh-pass__fields strong { display: block; color: #F3EAD7; font: 600 17px/1.35 'Readex Pro', system-ui, sans-serif; }
.yh-pass__fields .gold { color: var(--asnan-gold); }
.yh-pass__ticket { flex: 1; min-height: 192px; background: center / cover no-repeat; display: flex; flex-direction: column;
  align-items: center; justify-content: center; }
.yh-pass__ticket small { color: var(--asnan-soft); font-size: 12px; }
.yh-pass__ticket strong { color: var(--asnan-gold); font: 700 76px/1.1 'Readex Pro', system-ui, sans-serif; }
.yh-progress { display: flex; gap: 7px; margin-top: 12px; direction: ltr; }
.yh-progress b { width: 24px; height: 4px; border-radius: 3px; background: #5E5545; }
.yh-progress b:first-child { background: var(--asnan-gold); }
.yh-pass--queue .yh-pass__fields { border-top: 1px solid #493D30; }

/* The brand gallery: rolls by itself, opens nothing. Arabic rolls left to right, English right to left. */
.yh-gallery { margin-top: 21px; }
.yh-gallery h2 { margin: 0 0 10px; font: 600 16px/1.4 'Readex Pro', system-ui, sans-serif; }
.yh-reel { margin-inline: -20px; padding: 4px 20px 10px; overflow: hidden; direction: ltr;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent); }
.yh-track { display: flex; width: max-content; animation: yh-roll 24s linear infinite; }
html[lang="ar"] .yh-track { animation-direction: reverse; }
.yh-reel:hover .yh-track { animation-play-state: paused; }
.yh-group { display: flex; gap: 9px; padding-right: 9px; flex: none; }
.yh-tile { flex: none; width: 134px; height: 61px; border-radius: 12px; border: 1px solid; box-shadow: 0 3px 9px rgba(14, 34, 25, .13);
  background: center / calc(100% - 22px) auto no-repeat; }
@keyframes yh-roll { to { transform: translateX(-50%); } }
.yh-note { margin: 7px 0 0; font-size: 12px; line-height: 1.5; color: #64746A; }

.yh-package { margin: 18px 0 0; padding: 13px 14px; border-radius: 13px; background: #E6EEE8; color: #183C2E; font-size: 13px; line-height: 1.6; }
.yh-package b { display: block; margin-bottom: 3px; font: 600 14px/1.4 'Readex Pro', system-ui, sans-serif; }

.yh-foot { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 13px; }
.yh-foot a { color: #34786A; display: inline-block; padding: 12px 4px; text-underline-offset: 3px; }
html[lang="ar"] .yh-foot .legal__en, html[lang="en"] .yh-foot .legal__ar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .yh-track { animation: none; }
  .yh-reel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .yh-service { transition: none; }
  .yh-service:hover { transform: none; }
}