/*
 * «مِقَص» — تطبيق الزبون على الويب: المكوّنات المشتركة وشاشات البدء والدخول، مأخوذة من
 * الأنماط المضمّنة في تصميم Claude Design (customer-app.dc.html، عرض 412px) ومحوّلة إلى classes.
 * يُحمَّل بعد organic.css (المتغيّرات) و app.css (الإطار، الشريط السفلي، الحقول، الشرائح).
 * كل لون من متغيّرات organic.css؛ الاتجاه بخصائص منطقية ليعمل RTL و LTR.
 * أنماط كل قسم في customer/<القسم>.css وتُحمَّل من صفحاته.
 */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── ألوان الصور الرمزية بالحرف الأول (ثابتة لكل حلاق) ── */
.tone-a600 { background: var(--color-accent-600); }
.tone-a700 { background: var(--color-accent-700); }
.tone-g600 { background: var(--color-accent-2-600); }
.tone-g700 { background: var(--color-accent-2-700); }
.tone-n600 { background: var(--color-neutral-600); }
.tone-n700 { background: var(--color-neutral-700); }

/* ── شارة التوفر: زيتوني متاح · تراكوتا مشغول · رمادي لاحقًا/مغلق ── */
.avail { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.55; white-space: nowrap; background: var(--color-neutral-200); color: var(--color-neutral-800); }
.avail > i { width: 7px; height: 7px; flex: none; border-radius: 999px; background: var(--color-neutral-600); }
.avail-available { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.avail-available > i { background: var(--color-accent-2-600); }
.avail-busy { background: var(--color-accent-200); color: var(--color-accent-800); }
.avail-busy > i { background: var(--color-accent-600); }
.avail-closed > i { background: var(--color-neutral-500); }
.avail-lg { gap: 6px; padding: 6px 13px; font-size: 12px; font-weight: 700; }
.avail-lg > i { width: 8px; height: 8px; }

/* ── التقييم ── */
.rating { display: inline-flex; align-items: center; gap: 10px; }
.rating-v { display: inline-flex; align-items: center; gap: 3px; color: var(--color-text); font-weight: 600; }
.rating-v svg { color: var(--color-accent); }

/* ── بطاقة الحلاق: الصف (الرئيسية والنتائج) ── */
.cb { position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 14px; border-radius: 26px; border: 1px solid var(--color-divider); background: var(--color-surface); }
.cb-link { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 13px; color: inherit; text-decoration: none; }
.cb-link:hover { color: inherit; }
/* البطاقة كلها تُلمس كما في التصميم (زر كامل): طبقة الرابط تغطي الحشوة، ومحتوى الـ slot (زر القلب) فوقها */
.cb-link::after { content: ""; position: absolute; inset: 0; border-radius: 26px; }
.cb-link:focus-visible { outline: none; }
.cb:has(> .cb-link:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cb > :not(.cb-link) { position: relative; z-index: 1; }
.cb-av { width: 58px; height: 58px; flex: none; overflow: hidden; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 1; color: var(--color-bg); }
.cb-av img { width: 100%; height: 100%; object-fit: cover; }
.cb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cb-head { display: flex; align-items: center; gap: 6px; }
.cb-name { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.3; color: var(--color-text); overflow-wrap: anywhere; }
.cb-sub { font-size: 12.5px; color: var(--color-neutral-700); }
.cb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--color-neutral-700); }
.cb-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.cb-tags .tag { font-weight: 600; }

/* ── المختصرة: المفضلة والبطاقة السفلية للخريطة ── */
.cb.is-compact { align-items: center; border: 0; }
.cb.is-compact .cb-link { align-items: center; }
.cb.is-compact .cb-av { width: 54px; height: 54px; font-size: 21px; }
.cb.is-compact .cb-main { display: block; }
.cb.is-compact .cb-name, .cb.is-compact .cb-sub { display: block; }
.cb.is-compact .avail { margin-top: 5px; }
.cb.is-flat { padding: 0; border-radius: 0; background: none; }
.cb.is-flat .cb-name { font-size: 18px; }

/* ── الحالة الفارغة ── */
.c-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 60px 20px; text-align: center; font-size: 14px; color: var(--color-neutral-700); }
.c-empty-icon { width: 64px; height: 64px; margin-bottom: 4px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--color-accent-100); color: var(--color-accent-800); }
.c-empty-title { font-size: 15px; font-weight: 700; color: var(--color-text); }
.c-empty-text { max-width: 300px; margin: 0; font-size: 13px; line-height: 1.8; }

/* ══ شاشة البداية ══ */
.intro { position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.splash { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; overflow: hidden; background: var(--color-accent-800); animation: splashOut .35s ease 1.9s forwards; }
.splash-ring { position: absolute; border-radius: 999px; }
.splash-ring.r1 { width: 520px; height: 520px; background: var(--color-accent-700); opacity: .55; }
.splash-ring.r2 { width: 320px; height: 320px; background: var(--color-accent-600); opacity: .45; }
.splash-mark { position: relative; width: 112px; height: 112px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--color-bg); color: var(--color-accent-800); box-shadow: var(--shadow-lg); animation: pop .5s ease both; }
.splash-name { position: relative; margin-top: 6px; font-family: var(--font-heading); font-weight: 800; font-size: 46px; line-height: 1; color: var(--color-bg); }
.splash-tag { position: relative; font-size: 14px; color: var(--color-accent-200); }
.splash-dots { position: absolute; bottom: 44px; display: flex; gap: 7px; }
.splash-dots span { width: 9px; height: 9px; border-radius: 999px; background: var(--color-bg); opacity: .9; }
.splash-dots span:nth-child(2) { opacity: .45; }
.splash-dots span:nth-child(3) { opacity: .2; }
@keyframes splashOut { to { opacity: 0; visibility: hidden; } }

/* ══ شاشات التخطي: الشرائح تُسحب أفقيًا أو بزر "التالي" ══ */
/* تظهر بحركة scrIn لحظة تلاشي شاشة البداية (1.9 ثانية) كما في النموذج، لا تحتها */
.onboard { flex: 1; display: flex; flex-direction: column; padding: 18px 22px 26px; animation: scrIn .22s ease 1.9s both; }
.onboard-top { display: flex; justify-content: flex-start; }
.onboard-top .btn-ghost { font-size: 13.5px; }
.onboard-track { flex: 1; display: flex; margin-inline: -22px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.onboard-slide { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; padding-inline: 22px; scroll-snap-align: center; }
.onboard-art-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px 0; }
.onboard-art { position: relative; width: 260px; height: 260px; flex: none; display: flex; align-items: center; justify-content: center; }
.onboard-art .b1 { position: absolute; inset: 0; border-radius: 999px; }
.onboard-art .b2 { position: absolute; top: 14px; inset-inline-start: 8px; width: 150px; height: 150px; border-radius: 999px; }
.onboard-art .mark { position: relative; width: 104px; height: 104px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--color-bg); box-shadow: var(--shadow-md); }
.onboard-art.s1 .b1, .onboard-art.s3 .b1 { background: var(--color-accent-200); }
.onboard-art.s1 .b2 { background: var(--color-accent-300); }
.onboard-art.s2 .b1 { background: var(--color-accent-2-200); }
.onboard-art.s2 .b2 { background: var(--color-accent-2-300); }
.onboard-art.s3 .b2 { background: var(--color-neutral-300); }
.onboard-art.s1 .mark, .onboard-art.s3 .mark { color: var(--color-accent-800); }
.onboard-art.s2 .mark { color: var(--color-accent-2-800); }
.onboard-slide h3 { margin: 0 0 10px; font-size: 29px; line-height: 1.25; }
.onboard-slide p { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--color-neutral-700); }
.onboard-dots { display: flex; gap: 7px; margin: 22px 0 18px; }
.onboard-dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--color-neutral-300); transition: all .2s; }
.onboard-dots span.is-on { width: 26px; background: var(--color-accent); }

/* ══ إذن الموقع ══ */
.locate { flex: 1; display: flex; flex-direction: column; padding: 24px 22px 26px; animation: scrIn .22s ease both; }
.locate-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.locate-mark { width: 96px; height: 96px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.locate-body h3 { margin: 8px 0 0; font-size: 25px; }
.locate-body p { max-width: 290px; margin: 0; font-size: 14px; line-height: 1.9; color: var(--color-neutral-700); }
.locate-saved { font-weight: 600; }
.zones { width: 100%; padding: 16px; border-radius: 24px; background: var(--color-surface); text-align: start; animation: scrIn .22s ease both; }
.zones-title { margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.zones .chip { font-weight: 600; }
.zones-hint { margin-top: 10px; font-size: 11.5px; line-height: 1.7; color: var(--color-neutral-700); }

/* ══ تسجيل الدخول ══ */
.auth-tag { font-size: 14px; color: var(--color-neutral-700); text-align: center; }
.auth-tabs { display: flex; margin-bottom: 18px; padding: 4px; border-radius: 999px; background: var(--color-surface); }
.auth-tabs a { flex: 1; padding: 11px 0; border-radius: 999px; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--color-text); text-decoration: none; }
.auth-tabs a:hover { color: var(--color-text); }
.auth-tabs a.is-on { background: var(--color-accent); color: var(--color-bg); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .btn-block, .otp-step .btn-block { min-height: 52px; font-size: 16px; }
.phone-input { min-height: 48px; font-size: 16px; letter-spacing: .04em; }
/* الأرقام LTR حتى لا ينقلب "9123 4567"، لكنها تبدأ بجوار خانة 968+ كما في التصميم */
[dir="rtl"] .phone-input { text-align: right; }
.otp-step { display: flex; flex-direction: column; gap: 16px; }
.otp-sent { text-align: center; font-size: 14px; color: var(--color-neutral-700); }
.otp-phone { display: inline-block; font-weight: 600; color: var(--color-text); }
.otp-lg { gap: 10px; }
.otp-lg span { flex: 0 1 62px; width: auto; min-width: 0; height: 68px; border-radius: 20px; font-size: 28px; }
.keypad { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.keypad button { width: 62px; height: 46px; border-radius: 999px; border: 1px solid var(--color-divider); background: var(--color-bg); color: var(--color-text); font-size: 18px; font-weight: 600; cursor: pointer; }
.keypad button:hover { background: var(--color-surface); }
.keypad button:active { background: var(--color-neutral-300); }
.resend { display: block; text-align: center; font-size: 12.5px; color: var(--color-neutral-700); }
a.resend { color: var(--color-accent-700); }
.link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--color-accent-700); cursor: pointer; }
.link-btn:hover { color: var(--color-accent); }
.link-btn:disabled { cursor: default; color: var(--color-accent-700); }

/* التنبيه المؤقت فوق الشريط السفلي فقط؛ الشاشات بلا شريط (الدخول، البداية، الموقع…) تُنزله. ملفات الأقسام تغلبه حين يلزم. */
body:not(.has-nav) .toast { bottom: calc(24px + env(safe-area-inset-bottom)); }