/*
 * «مِقَص» — قسم ملف الحلاق في تطبيق الزبون: الملف ولوحة الحجز والشريط السفلي، معرض الأعمال، التقييمات،
 * وقائمة الانتظار — منقولة من الأنماط المضمّنة في customer-app.dc.html (الملف ~359-451، الشريط ~1020-1028،
 * التقييمات ~883-928، المعرض ~929-948، الانتظار ~949-977) بعرض 412px. تُحمَّل من صفحات القسم وحدها بعد
 * organic.css و app.css و customer.css. كل لون من متغيّرات organic.css، والاتجاه بخصائص منطقية ليعمل RTL و LTR.
 * البادئات: bp- الملف، rv- التقييمات، gl- المعرض، wl- قائمة الانتظار.
 */

/* ══ ملف الحلاق ══ */
.bp { position: relative; flex: 1; display: flex; flex-direction: column; animation: scrIn .22s ease both; }

/* الغلاف: تدرّج تراكوتا مع خطوط مائلة، أو صورة الغلاف إن رفعها الحلاق */
.bp-cover { position: relative; height: 158px; flex: none; overflow: hidden; background: linear-gradient(135deg, var(--color-accent-700), var(--color-accent-400)); }
.bp-cover::before { content: ""; position: absolute; inset: 0; opacity: .22; background: repeating-linear-gradient(115deg, var(--color-bg) 0 16px, transparent 16px 44px); }
.bp-cover.has-img::before { display: none; }
.bp-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bp-top { position: absolute; top: 14px; inset-inline: 14px; z-index: 1; display: flex; justify-content: space-between; }
.bp-top form { margin: 0; }
.bp-round { width: 42px; height: 42px; flex: none; padding: 0; border: none; border-radius: 999px; background: rgba(245, 234, 216, .9); color: var(--color-text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bp-round:hover { color: var(--color-text); background: var(--color-bg); }
.bp-heart, .bp-heart:hover { color: var(--color-accent); }
.bp-heart.is-on svg { fill: currentColor; }
.bp-heart:disabled { cursor: default; }

/* الصورة (تتداخل مع الغلاف) والحالة، الاسم، الصالون، التقييم */
.bp-body { position: relative; z-index: 1; margin-top: -42px; padding: 0 20px 22px; }
.bp-id { display: flex; align-items: flex-end; gap: 13px; }
.bp-id .avail { margin-bottom: 8px; }
.bp-av { width: 92px; height: 92px; flex: none; overflow: hidden; border-radius: 999px; border: 4px solid var(--color-bg); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1; color: var(--color-bg); box-shadow: var(--shadow-md); }
.bp-av img { width: 100%; height: 100%; object-fit: cover; }
.bp-name { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.bp-name h1 { margin: 0; font-size: 26px; overflow-wrap: anywhere; }
.bp-sub { margin-top: 3px; font-size: 13.5px; color: var(--color-neutral-700); }
.bp-rate { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 8px; font-size: 13.5px; }
.bp-rate > svg { color: var(--color-accent); }
.bp-rate b { font-weight: 700; }
.bp-dir { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; font-size: 12.5px; font-weight: 700; }
.bp-dir svg { flex: none; }
.bp-bio { margin: 10px 0 0; font-size: 13px; line-height: 1.8; color: var(--color-neutral-800); overflow-wrap: anywhere; }
.bp-bio b { font-weight: 700; color: var(--color-text); }

/* الإحصاءات الثلاث وزرّا المعرض والتقييمات */
.bp-stats { display: flex; gap: 10px; margin-top: 16px; }
.bp-stat { flex: 1; min-width: 0; padding: 13px 10px; border-radius: 20px; background: var(--color-surface); text-align: center; }
.bp-stat-v { font-family: var(--font-heading); font-weight: 800; font-size: 21px; line-height: 1.1; }
.bp-stat-k { margin-top: 3px; font-size: 11px; color: var(--color-neutral-700); }
.bp-links { display: flex; gap: 10px; margin-top: 12px; }
.bp-link { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 20px; border: 1px solid var(--color-divider); background: var(--color-surface); color: var(--color-text); font-size: 13.5px; font-weight: 700; line-height: 1.3; text-decoration: none; }
.bp-link svg { flex: none; color: var(--color-accent-700); }
.bp-link:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* ── لوحة الحجز: الخدمات ── */
.bp form { margin: 0; }
.bp-h { margin: 24px 0 10px; font-size: 19px; }
.bp-svcs { display: flex; flex-direction: column; gap: 9px; }
.bp-svc { width: 100%; display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 22px; border: 1.5px solid transparent; background: var(--color-surface); color: var(--color-text); text-align: start; text-decoration: none; }
.bp-svc:hover { color: var(--color-text); }
.bp-svc.is-on { background: var(--color-accent-100); border-color: var(--color-accent); }
.bp-svc.is-disabled { opacity: .55; cursor: not-allowed; }
.bp-dot { width: 20px; height: 20px; flex: none; border-radius: 999px; border: 2px solid var(--color-neutral-300); display: flex; align-items: center; justify-content: center; }
.bp-dot::after { content: ""; width: 8px; height: 8px; border-radius: 999px; }
.bp-svc.is-on .bp-dot { border-color: var(--color-accent); background: var(--color-accent); }
.bp-svc.is-on .bp-dot::after { background: var(--color-bg); }
.bp-svc-main { flex: 1; min-width: 0; }
.bp-svc-name { display: block; font-size: 14.5px; font-weight: 600; }
.bp-svc-name .tag { margin-inline-start: 7px; font-weight: 600; vertical-align: 1px; }
.bp-svc-min { display: block; margin-top: 1px; font-size: 12px; color: var(--color-neutral-700); }
.bp-svc-price { font-family: var(--font-heading); font-weight: 800; font-size: 17px; white-space: nowrap; }
.bp-svc-price small { font-size: 12px; }

/* ── الأيام والأوقات ── */
.bp-times-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 24px 0 10px; }
.bp-times-h h2 { margin: 0; font-size: 19px; }
.bp-times-h span { font-size: 12px; color: var(--color-neutral-700); }
.bp-days { margin-bottom: 12px; scrollbar-width: none; }
.bp-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.bp-slot { position: relative; display: block; min-width: 0; }
.bp-slot input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.bp-slot > span { display: block; padding: 11px 0; border-radius: 16px; border: 1.5px solid var(--color-divider); background: var(--color-surface); color: var(--color-text); font-size: 13.5px; font-weight: 600; line-height: 1.3; text-align: center; white-space: nowrap; cursor: pointer; }
.bp-slot.is-booked > span { border-color: transparent; background: var(--color-neutral-300); color: var(--color-neutral-600); text-decoration: line-through; cursor: not-allowed; }
.bp-slot input:checked + span { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-bg); }
.bp-slot input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.bp-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 11.5px; color: var(--color-neutral-700); }
.bp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.bp-legend i { width: 10px; height: 10px; border-radius: 4px; }
.bp-legend .l-free { background: var(--color-surface); border: 1.5px solid var(--color-divider); }
.bp-legend .l-booked { background: var(--color-neutral-300); }
.bp-legend .l-picked { background: var(--color-accent); }
.bp-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bp-empty p { margin: 0; }

/* "أضفني إلى قائمة الانتظار" — إطار متقطع تراكوتا */
.bp-wait { width: 100%; margin-top: 16px; display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-radius: 22px; border: 1.5px dashed var(--color-accent-400); background: var(--color-accent-100); text-align: start; text-decoration: none; }
.bp-wait > svg { flex: none; color: var(--color-accent-700); }
.bp-wait-main { flex: 1; min-width: 0; }
.bp-wait-t { display: block; font-size: 14px; font-weight: 700; color: var(--color-accent-800); }
.bp-wait-s { display: block; margin-top: 1px; font-size: 11.5px; color: var(--color-accent-700); }
.bp-wait.is-in { border-style: solid; border-color: var(--color-accent-2-600); background: var(--color-accent-2-200); }
.bp-wait.is-in > svg, .bp-wait.is-in .bp-wait-s { color: var(--color-accent-2-700); }
.bp-wait.is-in .bp-wait-t { color: var(--color-accent-2-800); }

/* ── بطاقة الولاء (زيتوني كبطاقة "حجوزاتي") ── */
.bp-loyal { margin-top: 18px; padding: 17px; border-radius: 26px; background: var(--color-accent-2-700); color: var(--color-bg); }
.bp-loyal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bp-loyal-head b { font-family: var(--font-heading); font-weight: 800; font-size: 18px; }
.bp-loyal-head span { font-size: 12.5px; opacity: .9; white-space: nowrap; }
.bp-loyal-dots { display: flex; gap: 6px; margin-top: 13px; }
.bp-loyal-dots span { flex: 1; height: 9px; border-radius: 999px; background: rgba(245, 234, 216, .3); }
.bp-loyal-dots span.on { background: var(--color-bg); }
.bp-loyal-text { margin-top: 11px; font-size: 12.5px; line-height: 1.7; opacity: .92; }
.bp-loyal-use { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(245, 234, 216, .25); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.bp-loyal-use input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.bp-sw { direction: ltr; width: 44px; height: 26px; flex: none; padding: 3px; border-radius: 999px; display: flex; justify-content: flex-start; background: rgba(245, 234, 216, .3); transition: background .2s; }
.bp-sw::after { content: ""; width: 20px; height: 20px; border-radius: 999px; background: var(--color-bg); box-shadow: var(--shadow-sm); }
.bp-loyal-use input:checked + .bp-sw { justify-content: flex-end; background: var(--color-accent); }
.bp-loyal-use input:focus-visible + .bp-sw { outline: 2px solid var(--color-bg); outline-offset: 2px; }

/* ── ملاحظة للحلاق ── */
.bp-note { margin-top: 16px; }
.bp-note summary { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--color-accent-700); list-style: none; cursor: pointer; }
.bp-note summary::-webkit-details-marker { display: none; }
.bp-note textarea { margin-top: 10px; }

/* ── الشريط السفلي الثابت ── */
.bp-bar { position: sticky; bottom: 0; z-index: 10; margin-top: auto; display: flex; align-items: center; gap: 13px; padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-divider); background: var(--color-bg); }
.bp-bar-main { flex: none; min-width: 0; max-width: 50%; }
.bp-bar-sum { overflow: hidden; font-size: 11px; color: var(--color-neutral-700); white-space: nowrap; text-overflow: ellipsis; }
.bp-bar-price { font-family: var(--font-heading); font-weight: 800; font-size: 21px; line-height: 1.2; white-space: nowrap; }
.bp-bar-price s { margin-inline-start: 5px; font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--color-neutral-600); }
.bp-bar-deal { overflow: hidden; font-size: 10.5px; font-weight: 700; color: var(--color-accent-700); white-space: nowrap; text-overflow: ellipsis; }
.bp-bar .btn { flex: 1; min-height: 52px; font-size: 15.5px; }
/* التنبيه المؤقت فوق الشريط بـ 14px كما في التصميم (~1014-1017)، لا فوقه بمقدار الشريط السفلي للتنقل */
body:has(.bp-bar) .toast { bottom: calc(95px + env(safe-area-inset-bottom)); }

/* تحديث اللوحة من الخادم */
.bp [data-panel], .bp [data-bar] { transition: opacity .15s; }
.bp.is-loading [data-panel], .bp.is-loading [data-bar] { opacity: .6; pointer-events: none; }

/* ══ التقييمات ══ */
.rv { padding: 16px 20px 22px; animation: scrIn .22s ease both; }
.rv-sum { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: 26px; background: var(--color-surface); }
.rv-avg { flex: none; text-align: center; }
.rv-avg-v { font-family: var(--font-heading); font-weight: 800; font-size: 40px; line-height: 1; }
.rv-avg-c { margin-top: 4px; font-size: 11.5px; color: var(--color-neutral-700); }
.rv-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.rv-bar { display: flex; align-items: center; gap: 8px; }
.rv-bar-n { width: 10px; font-size: 11px; color: var(--color-neutral-700); }
.rv-bar-t { flex: 1; height: 7px; overflow: hidden; border-radius: 999px; background: var(--color-neutral-300); }
.rv-bar-t i { display: block; height: 100%; border-radius: 999px; background: var(--color-accent); }
.rv-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rv-tags .tag { font-weight: 600; }
.rv-list { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.rv-item { padding: 15px; border-radius: 24px; background: var(--color-surface); }
.rv-head { display: flex; align-items: center; gap: 11px; }
.rv-av { width: 40px; height: 40px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--color-bg); }
.rv-who { flex: 1; min-width: 0; }
.rv-name { font-size: 14px; font-weight: 700; }
.rv-meta { font-size: 11.5px; color: var(--color-neutral-700); }
.rv-stars { font-size: 13px; font-weight: 700; color: var(--color-accent-700); white-space: nowrap; }
.rv-text { margin: 10px 0 0; font-size: 13px; line-height: 1.8; color: var(--color-neutral-800); overflow-wrap: anywhere; }
.rv-reply { margin-top: 10px; padding: 10px 13px; border-radius: 16px; background: var(--color-bg); font-size: 12.5px; line-height: 1.7; color: var(--color-neutral-800); overflow-wrap: anywhere; }
.rv-reply b { display: block; margin-bottom: 2px; font-size: 11.5px; color: var(--color-accent-700); }
.rv-pages:empty { display: none; }
.rv-more { width: 100%; min-height: 46px; margin-top: 14px; }

/* ══ معرض الأعمال ══ */
.gl { padding: 16px 20px 22px; animation: scrIn .22s ease both; }
.gl .topbar { margin-bottom: 8px; }
.gl-intro { margin: 0 0 14px; font-size: 12.5px; color: var(--color-neutral-700); }
.gl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gl-item { position: relative; display: block; height: 140px; overflow: hidden; border-radius: 22px; background: var(--color-surface); cursor: zoom-in; }
.gl-item:first-child { grid-column: span 2; height: 180px; border-radius: 24px; }
.gl-item img { width: 100%; height: 100%; object-fit: cover; }
.gl-h { margin: 22px 0 10px; font-size: 16px; }
.gl-view { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--color-neutral-900) 88%, transparent); }
.gl-view img { max-width: 100%; max-height: 100%; border-radius: 22px; object-fit: contain; }
.gl-close { position: absolute; top: 16px; inset-inline-end: 16px; }

/* ══ قائمة الانتظار ══ */
.wl { flex: 1; display: flex; flex-direction: column; padding: 16px 20px 24px; animation: scrIn .22s ease both; }
.wl .topbar { margin-bottom: 18px; }
.wl-hero { padding: 22px; border-radius: 28px; background: var(--color-accent-2-700); color: var(--color-bg); text-align: center; }
.wl-hero-k { font-size: 13px; opacity: .9; }
.wl-hero-v { margin: 6px 0; font-family: var(--font-heading); font-weight: 800; font-size: 64px; line-height: 1; }
.wl-hero-s { font-size: 13.5px; opacity: .92; }
.wl-hero-icon { width: 72px; height: 72px; margin: 12px auto; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(245, 234, 216, .18); }
.wl-hero-t { margin-bottom: 4px; font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 1.3; }
.wl-hero.is-free .wl-hero-icon { margin-top: 0; }
.wl-queue { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.wl-row { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 22px; border: 1.5px solid transparent; background: var(--color-surface); }
.wl-row.is-me { border-color: var(--color-accent); background: var(--color-accent-100); }
.wl-n { width: 34px; height: 34px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--color-neutral-300); color: var(--color-neutral-800); font-size: 14px; font-weight: 700; }
.wl-row.is-me .wl-n { background: var(--color-accent); color: var(--color-bg); }
.wl-l { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.wl-t { font-size: 12.5px; color: var(--color-neutral-700); white-space: nowrap; }
.wl-day { margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--color-neutral-800); text-align: center; }
.wl-card { margin-top: 16px; }
.wl-card .rows { margin-top: 0; }
.wl-text { margin: 16px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--color-neutral-700); }
.wl-foot { margin-top: auto; padding-top: 18px; }
.wl-foot form { margin: 0; }
.wl-foot .btn { min-height: 50px; }