/* =====================================================================
   نظام التصميم — القسم 6 من docs/technical-roadmap-hajj-umrah-platform.md
   (وحي كسوة الكعبة: أسود دافئ + ذهبي مطرَّز). نفس القيم بالضبط المُطبَّقة
   فعلياً في src/Mobile.DesignSystem (Colors.xaml/Fonts.cs/Styles.xaml) —
   هذا الملف هو المصدر الوحيد للحقيقة لهذه القيم في الموقع الإلكتروني.
   ===================================================================== */

/* --- الخطوط الحقيقية (نفس ملفات .ttf المُستخدَمة في تطبيق الجوال) --- */
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/fonts/IBMPlexSansArabic-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/fonts/IBMPlexSansArabic-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aref Ruqaa"; src: url("/fonts/ArefRuqaa-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aref Ruqaa"; src: url("/fonts/ArefRuqaa-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces-Variable.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }

:root {
    /* --- ألوان § 6.1 (لوحة الكسوة) --- */
    --kiswah-black: #14120F;
    --zamzam-cream: #F1EAD9;
    --ihram-white: #FBFAF6;
    --kiswah-gold: #B08D3F;
    --kiswah-gold-pressed: #8F7331;
    --rawdah-green: #1F5C4A;
    --ash-stone: #8A8478;
    --ash-stone-light: #C9C4B8;
    /* نص ثانوي على سطح فاتح (ihram-white/zamzam-cream) — لون منفصل عن ash-stone لأن ash-stone
       نفسه يُستخدَم أيضاً كنص على خلفية داكنة (site-footer-bottom)، حيث تفتيحه (لا تغميقه) هو
       المطلوب هناك. ash-stone على خلفية فاتحة كان يعطي تباين ~3.1:1 فقط (يفشل WCAG AA 4.5:1) —
       تحقّق مقاس فعلياً، ليس تقديراً. */
    --text-secondary: #6B655A;
    /* لون خطر موحَّد — يستبدل 3 ظلال أحمر متضاربة كانت موزَّعة سابقاً (#8A2E2E, #B03A2E, #B3261E) */
    --danger: #B3261E;
    --danger-bg: #FDEDEC;

    /* --- الخطوط § 6.1 --- */
    --font-ui-ar: "IBM Plex Sans Arabic", -apple-system, "Segoe UI", Tahoma, sans-serif;
    --font-ui-en: "Inter", -apple-system, "Segoe UI", sans-serif;
    --font-ceremonial-ar: "Aref Ruqaa", var(--font-ui-ar);
    --font-ceremonial-en: "Fraunces", var(--font-ui-en);
    --font-numeric: "IBM Plex Mono", monospace;

    --radius-card: 8px;
    --radius-button: 6px;
    --shadow-card: 0 1px 3px rgba(20, 18, 15, 0.08);
    --shadow-elevated: 0 4px 16px rgba(20, 18, 15, 0.12);
}

html[lang="en"] { --font-ui: var(--font-ui-en); --font-ceremonial: var(--font-ceremonial-en); }
html:not([lang="en"]) { --font-ui: var(--font-ui-ar); --font-ceremonial: var(--font-ceremonial-ar); }

* { box-sizing: border-box; }

body {
    font-family: var(--font-ui);
    background: var(--zamzam-cream);
    color: var(--kiswah-black);
    margin: 0;
    line-height: 1.6;
}

a { color: inherit; }

/* =====================================================================
   قائمة لوحة الإدارة (AdminLayout.razor) — شريط جانبي مُقسَّم لمجموعات منطقية
   بدل صف واحد من 18 رابطاً نصياً بلا أي تنظيم أو حالة "نشط" (كانت المشكلة
   الأصلية). NavLink من Blazor يضيف class="active" تلقائياً للرابط الحالي.
   ===================================================================== */
.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }

.admin-sidebar-toggle { display: none; align-items: center; gap: 8px; background: var(--kiswah-black); color: var(--zamzam-cream); border: none; padding: 14px 20px; font-size: 15px; cursor: pointer; font-family: inherit; width: 100%; }
.admin-sidebar-toggle .icon-svg { width: 20px; height: 20px; }

.admin-sidebar-backdrop { display: none; }

.admin-sidebar { width: 260px; flex-shrink: 0; background: var(--kiswah-black); color: var(--zamzam-cream); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px; font-weight: 700; font-size: 15px; line-height: 1.4; border-bottom: 1px solid rgba(241, 234, 217, 0.12); }
.admin-sidebar-brand .icon-svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--kiswah-gold); }

.admin-sidebar-nav { flex: 1; overflow-y: auto; padding: 14px 0; }
.admin-nav-group { margin-bottom: 10px; }
.admin-nav-group-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ash-stone-light); padding: 8px 20px 6px; }
.admin-sidebar-nav a { display: block; padding: 9px 20px; color: var(--zamzam-cream); text-decoration: none; font-size: 14px; opacity: 0.82; border-inline-start: 3px solid transparent; transition: background 0.15s ease, opacity 0.15s ease; }
.admin-sidebar-nav a:hover { opacity: 1; background: rgba(241, 234, 217, 0.06); }
.admin-sidebar-nav a.active { opacity: 1; background: rgba(176, 141, 63, 0.16); border-inline-start-color: var(--kiswah-gold); font-weight: 600; }

.admin-sidebar-logout { display: flex; align-items: center; gap: 8px; padding: 16px 20px; color: var(--kiswah-gold); text-decoration: none; border-top: 1px solid rgba(241, 234, 217, 0.12); font-size: 14px; font-weight: 600; }
.admin-sidebar-logout:hover { background: rgba(241, 234, 217, 0.06); }
.admin-sidebar-logout .icon-svg { width: 18px; height: 18px; }

.admin-main { flex: 1; min-width: 0; padding: 28px; max-width: 1000px; }

@media (max-width: 860px) {
    .admin-sidebar-toggle { display: flex; }
    .admin-sidebar {
        position: fixed; inset-inline-start: -280px; top: 0; bottom: 0; z-index: 40;
        width: 260px; transition: inset-inline-start 0.2s ease; box-shadow: var(--shadow-elevated);
    }
    .admin-sidebar.open { inset-inline-start: 0; }
    .admin-sidebar-backdrop.open { display: block; position: fixed; inset: 0; background: rgba(20, 18, 15, 0.5); z-index: 35; }
    .admin-main { padding: 20px; }
}

/* =====================================================================
   مكوّنات إدارية/وظيفية (منقولة من App.razor — نفس القواعد، مصدر واحد)
   ===================================================================== */
.admin-input { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--ash-stone); border-radius: var(--radius-button); margin-bottom: 12px; font-size: 15px; font-family: inherit; }
.admin-button { display: inline-block; background: var(--kiswah-gold); color: var(--ihram-white); border: none; padding: 10px 20px; border-radius: var(--radius-button); font-size: 15px; cursor: pointer; font-family: inherit; text-decoration: none; transition: background 0.15s ease; }
.admin-button:hover { background: var(--kiswah-gold-pressed); }
.admin-button.secondary { background: transparent; color: var(--kiswah-black); border: 1px solid var(--ash-stone); }
.admin-button.secondary:hover { background: rgba(138, 132, 120, 0.08); }
.admin-button.danger { background: var(--danger); }
.admin-error { color: var(--danger); margin-bottom: 12px; }
.admin-success { color: var(--rawdah-green); margin-bottom: 12px; }
.admin-card { background: var(--ihram-white); border: 1px solid var(--ash-stone-light); border-radius: var(--radius-card); padding: 16px; margin-bottom: 12px; }
table.admin-table { width: 100%; border-collapse: collapse; }
table.admin-table th, table.admin-table td { text-align: right; padding: 8px; border-bottom: 1px solid var(--ash-stone-light); }
.admin-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; background: var(--rawdah-green); color: var(--ihram-white); font-size: 12px; }
/* حالات "تحتاج انتباه" (نزاع/إلغاء/استرداد...، راجع OrderStatusDisplay.IsAttentionStatus في
   تطبيق الجوال — نفس التصنيف هنا) — لون الخطر الموحَّد الموجود أصلاً بدل الأخضر الإيجابي المضلِّل. */
.admin-badge.danger { background: var(--danger); }

/* =====================================================================
   "الشريط المطرّز" — العنصر البصري المميِّز § 6.1، ذهبي على أسود، يُستخدَم
   حصراً في لحظات الثقة الحرجة (شارة نفاذ، تأكيد الشهادة) — ليس زخرفة عامة.
   ===================================================================== */
.embroidered-band {
    height: 6px;
    background: var(--kiswah-black);
    background-image: repeating-linear-gradient(45deg, var(--kiswah-gold) 0 6px, transparent 6px 12px);
    border-radius: 3px;
}

/* =====================================================================
   الشريط العلوي العام (WebLayout/PerformerLayout)
   ===================================================================== */
.site-header { background: var(--kiswah-black); color: var(--zamzam-cream); position: sticky; top: 0; z-index: 20; }
.site-header-inner { max-width: 1100px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-logo { font-weight: 700; font-size: 18px; color: var(--zamzam-cream); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.site-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.site-nav-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-nav-links a { color: var(--zamzam-cream); text-decoration: none; font-size: 15px; opacity: 0.92; }
.site-nav-links a:hover { opacity: 1; text-decoration: underline; }
.site-nav-actions { display: flex; align-items: center; gap: 10px; }
.site-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-button); font-size: 14px; text-decoration: none; cursor: pointer; border: none; font-family: inherit; }
.site-btn-primary { background: var(--kiswah-gold); color: var(--ihram-white); }
.site-btn-primary:hover { background: var(--kiswah-gold-pressed); }
.site-btn-outline { background: transparent; color: var(--zamzam-cream); border: 1px solid rgba(241, 234, 217, 0.5); }
.site-btn-outline:hover { border-color: var(--zamzam-cream); }
.site-lang-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.site-lang-switch-submit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; min-width: 32px;
    background: transparent; border: 1px solid rgba(241, 234, 217, 0.35); border-radius: var(--radius-button);
    color: var(--zamzam-cream); cursor: pointer; padding: 0;
}
.site-lang-switch-submit:hover { border-color: var(--zamzam-cream); background: rgba(241, 234, 217, 0.08); }
.site-lang-switch-submit .icon-svg { width: 16px; height: 16px; }
.site-lang-switch select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-color: rgba(241, 234, 217, 0.08);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1EAD9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: left 8px center;
    background-size: 14px;
    color: var(--zamzam-cream);
    border: 1px solid rgba(241, 234, 217, 0.35);
    border-radius: var(--radius-button);
    padding: 6px 12px 6px 28px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
html[dir="rtl"] .site-lang-switch select { background-position: right 8px center; padding: 6px 28px 6px 12px; }
.site-lang-switch select:hover { border-color: var(--zamzam-cream); }
.site-lang-switch select option { background: var(--ihram-white); color: var(--kiswah-black); }
.site-lang-switch select option:disabled { color: var(--ash-stone); }
.site-hamburger { display: none; background: none; border: none; color: var(--zamzam-cream); cursor: pointer; padding: 6px; }

@media (max-width: 860px) {
    .site-hamburger { display: block; }
    .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 12px; padding-top: 12px; }
    .site-nav.open { display: flex; }
    .site-nav-links { flex-direction: column; align-items: flex-start; gap: 12px; }
    .site-nav-actions { flex-direction: column; align-items: stretch; }
    .site-header-inner { flex-wrap: wrap; }
}

/* =====================================================================
   الصفحة الرئيسية والصفحات العامة (Home/About/Contact/Services)
   ===================================================================== */
.site-main { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.site-section { padding: 56px 0; }
.site-section-narrow { max-width: 720px; margin: 0 auto; }

.hero { background: var(--kiswah-black); color: var(--zamzam-cream); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 6px; background-image: repeating-linear-gradient(45deg, var(--kiswah-gold) 0 6px, transparent 6px 12px); }
.hero-inner { max-width: 1100px; margin: 0 auto; padding: 80px 24px 64px; text-align: center; }
.hero h1 { font-family: var(--font-ceremonial); font-size: clamp(28px, 5vw, 44px); margin: 0 0 16px; line-height: 1.3; }
.hero p { font-size: 18px; color: var(--ash-stone-light); max-width: 640px; margin: 0 auto 32px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-actions .admin-button { padding: 12px 28px; font-size: 16px; }
.hero-actions .admin-button.secondary { color: var(--zamzam-cream); border-color: var(--ash-stone-light); }

.section-title { text-align: center; margin-bottom: 8px; font-size: 26px; }
.section-subtitle { text-align: center; color: var(--text-secondary); margin-bottom: 40px; max-width: 560px; margin-inline: auto; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }

.feature-card { background: var(--ihram-white); border: 1px solid var(--ash-stone-light); border-radius: var(--radius-card); padding: 24px; text-align: center; box-shadow: var(--shadow-card); }
.feature-icon { width: 52px; height: 52px; margin: 0 auto 16px; color: var(--kiswah-gold); }
.feature-card h3 { margin: 0 0 8px; font-size: 17px; }
.feature-card p { margin: 0; color: var(--text-secondary); font-size: 14px; }

.service-card { background: var(--ihram-white); border: 1px solid var(--ash-stone-light); border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 10px; }
.service-card .icon-wrap { width: 44px; height: 44px; color: var(--rawdah-green); }
.service-card h3 { margin: 0; font-size: 16px; }
.service-card .price { font-family: var(--font-numeric); color: var(--kiswah-gold); font-weight: 700; font-size: 18px; }

.cta-band { background: var(--rawdah-green); color: var(--ihram-white); border-radius: var(--radius-card); padding: 40px; text-align: center; }
.cta-band h2 { margin: 0 0 10px; font-size: 22px; }
.cta-band p { margin: 0 0 20px; opacity: 0.9; }

.icon-svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -0.125em; }

.site-footer { background: var(--kiswah-black); color: var(--ash-stone-light); margin-top: 64px; }
.site-footer-inner { max-width: 1100px; margin: 0 auto; padding: 40px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.site-footer h4 { color: var(--zamzam-cream); font-size: 14px; margin: 0 0 12px; }
.site-footer a { color: var(--ash-stone-light); text-decoration: none; display: block; margin-bottom: 8px; font-size: 14px; }
.site-footer a:hover { color: var(--zamzam-cream); }
.site-footer-bottom { text-align: center; padding: 16px 24px; border-top: 1px solid rgba(241, 234, 217, 0.1); font-size: 13px; color: var(--ash-stone); }

/* =====================================================================
   صفحات المصادقة (تسجيل الدخول/حساب جديد) — بطاقة مركزية بدل نموذج
   ملتصق بأعلى الصفحة، لكل من العميل والمؤدي (نفس البنية عبر WebLayout/PerformerLayout).
   ===================================================================== */
.auth-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.auth-card { width: 100%; max-width: 420px; background: var(--ihram-white); border: 1px solid var(--ash-stone-light); border-radius: var(--radius-card); box-shadow: var(--shadow-elevated); padding: 40px 36px; }
.auth-icon { width: 40px; height: 40px; margin: 0 auto 16px; color: var(--kiswah-gold); display: flex; align-items: center; justify-content: center; }
.auth-icon .icon-svg { width: 100%; height: 100%; }
.auth-title { text-align: center; font-size: 24px; margin: 0 0 6px; }
.auth-subtitle { text-align: center; color: var(--text-secondary); margin: 0 0 28px; font-size: 14px; }
.auth-form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--kiswah-black); }
.auth-checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 13px; margin: 12px 0; }
.auth-checkbox-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.auth-checkbox-row a { color: var(--kiswah-gold-pressed); text-decoration: underline; }
.auth-submit { width: 100%; text-align: center; margin-top: 8px; padding: 12px 20px; font-size: 15px; }
.auth-footer { text-align: center; margin-top: 24px; font-size: 14px; color: var(--text-secondary); }
.auth-footer a { color: var(--kiswah-gold-pressed); font-weight: 600; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }

/* =====================================================================
   اختيار طريقة الدفع (Web/Payment.razor) — بطاقة راديو لكل طريقة، تُعتِم
   الطرق غير المتاحة بدل إخفائها (نفس مبدأ Mobile PaymentMethodOption).
   ===================================================================== */
.payment-method-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--ash-stone-light); border-radius: var(--radius-button); margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s ease; }
.payment-method-option:hover { border-color: var(--kiswah-gold); }
.payment-method-option.disabled { opacity: 0.5; cursor: default; }
.payment-method-option.disabled:hover { border-color: var(--ash-stone-light); }
.payment-method-option input[type="radio"] { accent-color: var(--kiswah-gold); width: 16px; height: 16px; }
.soon-badge { margin-inline-start: auto; font-size: 12px; color: var(--text-secondary); }