/*
 * «مِقَص» — قسم الخريطة و"حلاقة الحين" في تطبيق الزبون (customer-app.dc.html: الخريطة ~292-324،
 * الحجز الفوري ~325-358) بعد organic.css و app.css و customer.css. الاتجاه بخصائص منطقية (RTL و LTR).
 */

/* ══ الخريطة ══ */
.mp { position: relative; flex: 1; height: 100vh; height: 100dvh; min-height: 520px; overflow: hidden; background: var(--color-surface); animation: scrIn .22s ease both; }
.mp-map { position: absolute; inset: 0; z-index: 0; }
.mp-map.leaflet-container { background: var(--color-surface); font-family: var(--font-heading); }
/* الفلتر الدافئ على البلاطات وحدها (الدبابيس بألوانها الحقيقية) — بيج كريمي قريب من --color-bg */
.mp-map .leaflet-tile-pane { filter: sepia(.34) saturate(.74) hue-rotate(-8deg) brightness(1.03) contrast(.92); }
.mp-map .leaflet-top { top: 66px; }
.mp-map .leaflet-control-attribution { margin: 0 14px !important; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--color-bg) 82%, transparent); color: var(--color-neutral-700); font-size: 10px; line-height: 1.7; }
.mp-map .leaflet-control-attribution a { color: var(--color-accent-700); }

/* الشريط العلوي: رجوع + حبّة الموقع/البحث (تفتح القائمة بنفس الفلاتر) */
.mp-top { position: absolute; z-index: 5; top: 14px; inset-inline: 14px; display: flex; align-items: center; gap: 10px; }
.mp-round { width: 44px; height: 44px; flex: none; border-radius: 999px; border: none; background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mp-round:hover { color: var(--color-text); background: var(--color-neutral-100); }
.mp-pill { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 15px; border-radius: 999px; background: var(--color-bg); box-shadow: var(--shadow-md); font-size: 13.5px; color: var(--color-neutral-700); text-decoration: none; }
.mp-pill:hover { color: var(--color-neutral-800); }
.mp-pill svg { flex: none; color: var(--color-neutral-600); }
.mp-pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-pill.is-loading svg { animation: mpPulse .8s ease-in-out infinite alternate; }

/* مفتاح الألوان: زيتوني متاح · تراكوتا مشغول */
.mp-legend { position: absolute; z-index: 5; top: 70px; inset-inline-start: 14px; display: flex; gap: 7px; }
.mp-legend span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: var(--color-bg); box-shadow: var(--shadow-sm); font-size: 11px; font-weight: 600; }
.mp-legend i { width: 8px; height: 8px; flex: none; border-radius: 999px; }
.mp-legend i.is-available { background: var(--color-accent-2-600); }
.mp-legend i.is-busy { background: var(--color-accent-600); }

/* دبوس ✂: قطرة بلون الحالة، والمختار أكبر بحلقة */
.mp-pin-wrap { background: none; border: 0; }
.mp-pin-wrap:focus { outline: none; }
.mp-pin { position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50% 50% 50% 0; border: 2.5px solid var(--color-bg); background: var(--color-neutral-600); color: var(--color-bg); box-shadow: var(--shadow-md); transform: rotate(-45deg); transition: transform .15s ease, box-shadow .15s ease; }
.mp-pin svg { transform: rotate(45deg); }
.mp-pin.is-available { background: var(--color-accent-2-600); }
.mp-pin.is-busy { background: var(--color-accent-600); }
.mp-pin.is-soon { background: var(--color-neutral-600); }
.mp-pin.is-closed { background: var(--color-neutral-500); }
/* التكبير حول المركز يُنزل رأس القطرة 5.6px عن نقطة الإرساء (25.46px × 0.22)، فنرفعه بقدرها */
.mp-pin.is-on { transform: translateY(-5.6px) rotate(-45deg) scale(1.22); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 32%, transparent), var(--shadow-md); }
.mp-pin-wrap:focus-visible .mp-pin { box-shadow: 0 0 0 3px var(--color-text), var(--shadow-md); }

/* "أنت هنا" */
.mp-me-wrap { background: none; border: 0; }
.mp-me { display: block; width: 18px; height: 18px; border-radius: 999px; border: 3px solid var(--color-bg); background: var(--color-accent-700); box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-accent-700) 22%, transparent), var(--shadow-sm); }

/* البطاقة السفلية */
.mp-sheet { position: absolute; z-index: 6; bottom: 0; inset-inline: 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; background: var(--color-bg); box-shadow: 0 -8px 28px rgba(46, 43, 37, .18); animation: sheetIn .25s ease both; }
.mp-handle, .it-handle { width: 44px; height: 4px; margin: 0 auto 12px; border-radius: 999px; background: var(--color-neutral-400); }
.mp-locate { position: absolute; top: -58px; inset-inline-end: 14px; color: var(--color-accent-700); }
.mp-locate.is-busy svg { animation: mpSpin 1s linear infinite; }
#mp-card { transition: opacity .15s ease; }
.mp-sheet.is-loading #mp-card { opacity: .55; }
.mp-cta { min-height: 50px; margin-top: 14px; font-size: 15px; }
.mp-empty { display: flex; align-items: center; gap: 13px; }
.mp-empty-icon { width: 54px; height: 54px; flex: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--color-accent-100); color: var(--color-accent-800); }
.mp-empty-main { flex: 1; min-width: 0; }
.mp-empty-title { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.3; }
.mp-empty-text { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.7; color: var(--color-neutral-700); }

@keyframes mpPulse { from { opacity: 1; } to { opacity: .25; } }
@keyframes mpSpin { to { transform: rotate(360deg); } }

/* التنبيه المؤقت لا يغطي البطاقة السفلية: تحت الشريط العلوي ومفتاح الألوان في الخريطة */
body:has(#mp) .toast { top: calc(118px + env(safe-area-inset-top)); bottom: auto; animation-name: scrIn; }

/* ══ حلاقة الحين ══ */
.it { flex: 1; display: flex; flex-direction: column; animation: scrIn .22s ease both; }
.it-head { padding: 16px 18px 20px; border-radius: 0 0 30px 30px; background: var(--color-accent); color: var(--color-bg); }
.it-bar { display: flex; align-items: center; gap: 12px; }
.it-back { width: 42px; height: 42px; flex: none; border-radius: 999px; background: rgba(245, 234, 216, .2); color: var(--color-bg); display: flex; align-items: center; justify-content: center; }
.it-back:hover { color: var(--color-bg); background: rgba(245, 234, 216, .3); }
.it-head h4 { margin: 0; font-size: 21px; color: var(--color-bg); }
.it-head p { margin: 14px 0 0; font-size: 13.5px; opacity: .92; }
.it-list { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; }
.it-item { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: 26px; border: 1px solid var(--color-divider); background: var(--color-surface); color: var(--color-text); text-align: start; text-decoration: none; }
a.it-item:hover { color: var(--color-text); border-color: color-mix(in srgb, var(--color-text) 30%, transparent); }
.it-wait { width: 56px; height: 56px; flex: none; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.it-wait b { font-family: var(--font-heading); font-weight: 800; font-size: 20px; line-height: 1; }
.it-wait b.is-now { font-size: 15px; }
.it-wait small { font-size: 10px; font-weight: 600; }
.it-main { flex: 1; min-width: 0; }
.it-name { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.it-sub { display: block; font-size: 12.5px; color: var(--color-neutral-700); }
.it-svc { margin-top: 2px; }
.it-go { flex: none; font-size: 12px; font-weight: 700; color: var(--color-accent-700); }
.it-at { flex: none; font-size: 12px; font-weight: 700; color: var(--color-accent-2-800); }
/* الزر يبقى ظاهرًا مع قائمة طويلة (حتى 10 حلاقين) */
.it-foot { position: sticky; bottom: 0; z-index: 2; padding: 14px 20px calc(20px + env(safe-area-inset-bottom)); background: var(--color-bg); }
.it-cta { min-height: 54px; font-size: 16px; }
/* والتنبيه فوق زر "احجز أقرب حلاق متاح" الثابت أسفل الشاشة */
body:has(.it-foot) .toast { bottom: calc(96px + env(safe-area-inset-bottom)); }
.it-empty-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }

/* خطوة التأكيد: ورقة سفلية فوق خلفية معتمة، بعرض الإطار (480px) */
.it-backdrop { position: fixed; z-index: 30; inset: 0; background: rgba(32, 30, 29, .45); }
.it-sheet { position: fixed; z-index: 31; bottom: 0; inset-inline: max(0px, calc(50% - 240px)); max-height: 90vh; overflow-y: auto; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; background: var(--color-bg); box-shadow: 0 -8px 28px rgba(46, 43, 37, .18); animation: sheetIn .25s ease both; }
.it-sheet h4 { margin: 0; font-size: 19px; }
.it-sheet-text { margin: 6px 0 14px; font-size: 13px; line-height: 1.8; color: var(--color-neutral-700); }
.it-form { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.it-actions { display: flex; align-items: center; gap: 10px; }
.it-actions .btn { min-height: 50px; }
.it-actions .btn-secondary { padding-inline: 20px; }
.it-actions .btn-primary { flex: 1; font-size: 15px; }
.it-pay { margin: 0; text-align: center; font-size: 11.5px; color: var(--color-neutral-700); }