/* ============================================
   نُزه - أنماط الصفحات والمكوّنات المضافة
   pages.css
   ============================================ */

/* --- عناصر مشتركة --- */
.muted { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.w-full { width: 100%; }

.page-head {
    padding: var(--spacing-sm) 5px var(--spacing-lg);
}
.page-head__title {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-text-primary);
}
.page-head__sub {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 4px;
}

.strip-title {
    color: var(--color-gold);
    margin: var(--spacing-lg) 5px var(--spacing-sm);
    font-size: 14px;
    font-weight: 700;
}

.section-header--center { justify-content: center; margin-bottom: var(--spacing-xl); }

.empty-hint {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    padding: var(--spacing-md) 0;
}

.empty-state {
    text-align: center;
    padding: 60px var(--spacing-xl);
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}
.empty-state__icon { font-size: 48px; opacity: 0.7; }

/* --- الأزرار --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    border-radius: var(--border-radius-sm);
    font-weight: 800;
    font-size: var(--font-size-md);
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 2px; }

.btn--gold {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    color: #111;
    box-shadow: var(--shadow-btn);
}
.btn--ghost {
    background: var(--tint-006);
    border: 1px solid var(--color-gold-border);
    color: var(--color-gold);
}
.btn--danger {
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid rgba(255, 68, 68, 0.35);
    color: var(--color-danger);
}
/* زرّ قوقل: أبيض بحدٍّ رمادي وشعارٍ ملوَّن، كما تشترط علامتهم.

   ولا يُصبَغ بذهب نُزه ولا يُقلب داكناً: شروط استعمال العلامة تمنع
   تغيير ألوان الشعار، وزرُّ دخولٍ لا يُشبه ما اعتاده الناس يُشكّ فيه
   قبل أن يُضغط. فيبقى أبيض في السمتين، وهو استثناءٌ مقصود. */
.btn--google {
    background: #fff;
    color: #1f1f1f;
    border: 1px solid #dadce0;
    gap: 10px;
    box-shadow: none;
}
.btn--google:hover { background: #f7f8f8; }
.btn--google:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 2px; }

/* فاصلٌ بكلمة: خطّان وبينهما «أو»، فيُقرأ الخياران خيارين لا قائمة */
.auth-or {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.auth-or::before,
.auth-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-gold-border);
}

.btn--block { width: 100%; }
.btn--sm { padding: 8px 16px; font-size: var(--font-size-sm); }
.btn--xs { padding: 6px 12px; font-size: var(--font-size-xs); }

/* --- التنبيهات (Flash) --- */
.flashes {
    position: relative;
    z-index: 20;
    padding: 0 var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--spacing-md);
}
.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 12px 14px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    font-weight: 600;
    animation: fadeInUp 0.35s ease;
}
.flash--error {
    background: rgba(255, 68, 68, 0.12);
    border-right: 3px solid var(--color-danger);
    color: #ffb3b3;
}
.flash--success {
    background: rgba(76, 175, 80, 0.12);
    border-right: 3px solid var(--color-success);
    color: #b6e6b8;
}
.flash--message { background: var(--color-gold-bg); border-right: 3px solid var(--color-gold); color: var(--color-gold-light); }
.flash__close {
    color: inherit;
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.6;
}
.flash__close:hover { opacity: 1; }

/* --- الحقول --- */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
/* عنوان الحقل: يُكتب <span> داخل <label class="field">، أو <label for>
   حين يكون الحقل خارج اللصيقة (مثل مُنتقي الصور) — والشكل واحد في الحالتين */
.field > span,
.field > label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
}
.field > label { cursor: pointer; }
.field input,
.field select,
.field textarea,
textarea {
    background: var(--color-bg-input);
    border: 1px solid var(--line-strong);
    color: var(--color-text-primary);
    padding: 12px;
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    font-size: var(--font-size-md);
    width: 100%;
}
/* يُكبَّر بالسحب حين يطول النصّ، رأسياً وحده: التكبير الأفقي يخرج
   بالمربّع عن عرض البطاقة ويفيض بالصفحة. */
textarea { resize: vertical; }
.field input:focus,
.field select:focus,
textarea:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px var(--color-gold-bg);
}
.field select option { background: var(--color-bg-card); color: #fff; }

/* --- البحث السريع --- */
.quick-search {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-bg-input);
    /* حدٌّ محايد لا ذهبي: الذهبي حول الحقل يجعله يصرخ بمستوى الأزرار،
       وهو حقلٌ يُملأ لا زرٌّ يُضغط. والأيقونة داخله تبقى ذهبية. */
    border: 1px solid var(--tint-010);
    border-radius: var(--border-radius-full);
    padding: 10px 16px;
    margin-bottom: var(--spacing-lg);
    color: var(--color-gold);
}
.quick-search:focus-within { border-color: var(--color-gold-border); }
.quick-search input {
    flex: 1;
    background: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
}
.quick-search input::placeholder { color: var(--color-text-muted); }
.quick-search--inline { margin-bottom: var(--spacing-md); }

/* لائحة الاقتراحات: تنسدل من الحقل ولا تزيح ما تحتها */
.quick-search { position: relative; }
.suggest {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    z-index: 40;
    background: var(--color-bg-card);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-md);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
}
.suggest__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--line-faint);
}
.suggest__item:last-child { border-bottom: 0; }
.suggest__item--on,
.suggest__item:hover { background: rgba(201, 168, 76, 0.14); }
.suggest__text {
    color: var(--color-text-primary);
    font-size: var(--font-size-md);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.suggest__kind {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-gold);
    background: rgba(201, 168, 76, 0.12);
    border-radius: var(--border-radius-pill);
    padding: 2px 9px;
}

/* --- شرائح الفلاتر --- */
/* صفّ التصنيفات يفيض 196px على الجوال ويمرَّر أفقياً، ولا شيء يقول
   ذلك: الشريحة المقطوعة عند الحافة تبدو خطأ في التصميم لا دعوة
   للسحب، فلا تُرى التصنيفات الباقية أصلاً.
   والتلاشي عند الحافة يقول «بقيّة هنا» بلا عنصر يُضاف ولا سكربت،
   ويختفي وحده حين يصل المستخدم إلى الطرف. */
.chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-md);

    /* التلاشي بقناع لا بخلفية مرسومة.
       كانت خلفيةً بلون مصمت تُرسَم عند الطرفين دائماً — حتى حين لا
       يفيض الصفّ أصلاً — فتظهر مستطيلين داكنين بجانب الشرائح يُقرآن
       ظلّاً متّسخاً لا دعوةً للسحب. وهي في كل صفحة فيها شرائح.

       والقناع يُخفي المحتوى نفسه عند الحافة ولا يرسم شيئاً: فإن لم
       يبلغ المحتوى الحافة لم يظهر أثر، وإن بلغها تلاشى كما ينبغي.
       وهو ما يفعله شريط التصنيفات في الرئيسية أصلاً.

       والتلاشي في جهة الفيض وحدها: الصفّ يبدأ ملاصقاً اليمين، فتلاشي
       اليمين يُبهت أول شريحة — وهي «الكل» المختارة افتراضاً — نصفها
       في كل زيارة، ولا شيء وراءها ليدلّ عليه. والفيض في RTL يساراً. */
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px),
                                        transparent 100%);
    mask-image: linear-gradient(to left, #000 calc(100% - 24px),
                                transparent 100%);
}
.chip-row::-webkit-scrollbar { display: none; }

/* صفٌّ يلتفّ بدل أن ينزلق.

   الصفّ المنزلق يصلح لأربع شرائح تصفية: ما خرج منها معروفٌ نوعه،
   ومن جرّ الصفّ وجده. ولا يصلح لتنقّلٍ من سبعة عشر قسماً: قيس
   الشريط في إعدادات اللوحة فكان محتواه 1704 بكسل في مساحة 982،
   فسبعة أقسام لا تُرى — منها القسم الأخير — و‎scrollbar-width: none‎
   يُخفي الشريط، فلا شيء على الشاشة يقول إن وراء الحافة شيئاً.

   ومن لم يعرف أن القسم موجود لا يجرّ الصفّ ليجده.

   والالتفاف يُظهرها كلّها في سطرين أو ثلاثة: التنقّل يُرى دفعةً
   واحدة، ولا حركة تُطلَب أصلاً. والقناع يُرفع معه لأنه يُبهت أطراف
   السطور وليس ثمّ فيضٌ يُشار إليه. */
.chip-row--wrap {
    flex-wrap: wrap;
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

.chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: var(--border-radius-full);
    background: var(--tint-006);
    border: 1px solid var(--line-soft);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.25s ease;
}
.chip--on {
    background: var(--color-gold-bg);
    border-color: var(--color-gold);
    color: var(--color-gold);
}
.chip--sm { padding: 4px 10px; font-size: var(--font-size-xs); }

.filters { margin-bottom: var(--spacing-lg); }
/* الصفّ يلتفّ على الجوال بدل أن يُضغط: ثلاثة عناصر في 358px تجعل
   كل واحد أضيق من أن يُقرأ، وزرّ «تطبيق» أصغر من أن يُصاب بإبهام. */
.filters__row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}
.filters__row .field { flex: 1 1 130px; min-width: 0; }
.filters__row .btn { flex: 1 1 100%; height: 44px; }

@media (min-width: 480px) {
    .filters__row .btn { flex: 0 0 auto; }
}

/* شرائح التنقّل تفارق شرائح الفلترة شكلاً، فلا يُخلط بينهما:
   هذه تغادر الصفحة، وتلك تصفّي ما فيها. */
.explore-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: var(--spacing-xl) 0 100px;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--line-faint);
}
.explore-nav__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    width: 100%;
    margin-bottom: 4px;
}
.chip--nav {
    background: transparent;
    border-style: dashed;
    border-color: var(--line-strong);
}
.chip--nav:hover { border-style: solid; border-color: var(--color-gold-border); }

/* ما هو مفعَّل الآن. بدونه يبحث الزائر فلا يجد شيئاً ولا يدري أن
   فلتراً من زيارة سابقة ما زال يحجب النتائج. */
.active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--spacing-md);
}
.active-filters__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.active-filters__clear {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-decoration: underline;
    margin-inline-start: auto;
}

/* --- شبكة الرحلات --- */
.trip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: var(--spacing-md);
    padding-bottom: 100px;
}
.trip-grid .trip-card { min-width: 0; width: 100%; }

/* --- إضافات بطاقة الرحلة --- */
.trip-card { position: relative; }
.trip-card .fav-form { position: absolute; top: 10px; left: 10px; z-index: 3; }
.trip-card .fav-btn { position: static; }
.trip-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fav-btn--on {
    background: var(--color-gold);
    color: #111;
    border-color: var(--color-gold);
}
.fav-btn--on svg { fill: currentColor; }

/* --- صفحة التفاصيل --- */
/* سهم الرجوع أعلى الصفحة: مساحة ضغطٍ 44px لا أقلّ، وهو أوّل ما
   تصله الإبهام حين يُمسك الجهاز بيدٍ واحدة. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-height: 44px;
    padding: 8px 14px 8px 16px;
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius-md);
    background: var(--tint-005);
    border: 1px solid var(--color-gold-border);
    color: var(--color-gold);
    font-size: var(--font-size-sm);
    font-weight: 700;
    transition: background 0.2s ease, transform 0.2s ease;
}
.back-link:hover { background: var(--tint-010); }
.back-link:active { transform: scale(0.97); }

/* رأس سهمٍ مرسوم بحدود عنصر: يتّجه إلى جهة البداية دائماً، فيشير
   يميناً في العربية ويساراً في الإنجليزية بلا محرف ينقلب. */
/* السهم مرسومٌ إلى اليسار، وهو صواب الإنجليزية. والعربية تبدأ من
   اليمين فيُقلب حولَ محوره. */
.back-link__arrow { flex-shrink: 0; }
[dir="rtl"] .back-link__arrow { transform: scaleX(-1); }

/* اسم ما فُتح، بجانب السهم لا تحته: السطران يبقيان في ارتفاعٍ واحد
   فلا يدفعان المحتوى، والاسم يأخذ ما بقي من العرض ويُقصّ بنقاطٍ إن
   طال — عنوانٌ يلتفّ سطرين يزحزح الصورة تحته. */
.back-link { max-width: 100%; }
.back-title {
    /* سطرٌ مستقل لا مشاركٌ للسهم: العمود على الجوال ضيّق، ومشاركةُ
       السطر تترك للاسم أقلّ من نصفه فيخرج «محمية جزر …». */
    display: block;
    max-width: 100%;
    margin: 0 0 var(--spacing-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-secondary);
}

.detail { padding-bottom: 110px; }
.detail__hero {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-card);
}
.detail__hero img { width: 100%; height: 240px; object-fit: cover; }
.detail__hero .fav-form { position: absolute; top: 12px; left: 12px; }
.detail__hero .fav-btn { position: static; width: 38px; height: 38px; }

.detail__title {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}
.detail__rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-sm);
}
.stars { color: var(--color-star); font-weight: 800; }
.detail__summary { color: var(--color-text-secondary); font-size: var(--font-size-md); line-height: 1.7; }
.detail__body { color: var(--color-text-secondary); line-height: 2; font-size: var(--font-size-md); }
/* كل قسم صندوق واحد: كانت «التواصل» وحدها في إطار وما حولها بلا
   إطار، فيبدو إطارها دخيلاً لا مقصوداً — وهو ما يُقرأ «شكلاً مخرَّباً».
   وتوحيدها يعطي الصفحة إيقاعاً واحداً بدل صناديق متفرّقة. */
.detail__section {
    margin-top: var(--spacing-lg);
    background: var(--color-bg-card-alt);
    border: 1px solid var(--line-faint);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
}
.detail__section .section-title { margin-bottom: var(--spacing-md); }

/* والسطر لا يطول حتى تضيع العين في العودة إلى أوّله: نحو 70 محرفاً
   هو ما يُقرأ مريحاً، والحاوية على الكمبيوتر 1120px تبلغ ضعفه. */
.detail__body { max-width: 68ch; line-height: 1.9; }

/* آخر قسم يترك مسافة للشريط السفلي الثابت */
.detail__section:last-of-type { margin-bottom: 100px; }

/* شبكة الحقائق: أعمدة مرنة بحد أدنى للعرض، فلا تتزاحم القيم الطويلة
   ولا تتداخل مع بعضها مهما طال اسم المدينة أو المنطقة. */
.fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}
/* الصيغة المختصرة تُعامَل معاملة الكاملة: ‎<li>‎ بلا ‎class="fact"‎
   كان يفقد كل هذا فيلتصق العنوان بالقيمة — «المدينةأبها». والقاعدة
   هنا تلتقط الشكلين، فلا يتكرّر الخطأ في موضع رابع. */
.fact-grid > li,
.fact {
    background: var(--tint-004);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: var(--border-radius-md);
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;                       /* يسمح للنص بالالتفاف داخل الخانة */
    transition: border-color 0.2s ease, background 0.2s ease;
}
.fact-grid > li:hover,
.fact:hover {
    border-color: var(--color-gold-border);
    background: var(--tint-006);
}
.fact__icon {
    font-size: 18px;
    line-height: 1.4;
    flex-shrink: 0;
}
.fact__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
/* في الصيغة المختصرة لا حاوية بينهما، فيُجعَل الـ li عموداً */
.fact-grid > li:not(.fact) { flex-direction: column; gap: 3px; }

.fact__label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 600;
}
.fact__value {
    font-size: var(--font-size-md);
    color: var(--color-gold);
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;            /* لا تجاوز لحدود الخانة */
}
.fact__note {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.map-link { color: var(--color-gold); font-weight: 700; font-size: var(--font-size-md); }

/* --- الحجز --- */
.booking-box {
    background: var(--tint-003);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
}
.booking-form { display: flex; flex-direction: column; gap: var(--spacing-md); }
.booking-total {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--line-faint);
}
.booking-total strong { color: var(--color-gold); font-size: var(--font-size-lg); font-weight: 800; }

/* --- التقييمات --- */
.review-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    background: var(--tint-003);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.star-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
    border: none;
}
.star-input legend { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin-bottom: 6px; }
.star-input input { position: absolute; opacity: 0; width: 0; }
.star-input label {
    font-size: 26px;
    color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: color 0.2s ease;
}
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: var(--color-star); }
.star-input input:focus-visible + label { outline: 2px solid var(--color-gold); }

.review-list { display: flex; flex-direction: column; gap: var(--spacing-md); }
.review {
    background: var(--tint-003);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.review__head { display: flex; justify-content: space-between; align-items: center; }
.review__head strong { color: var(--color-text-primary); font-size: var(--font-size-md); }
.review__body { color: var(--color-text-secondary); font-size: var(--font-size-md); line-height: 1.8; }
.review time { font-size: var(--font-size-xs); }

/* --- الحجوزات (رحلاتي) --- */
.booking-list { display: flex; flex-direction: column; gap: var(--spacing-md); padding-bottom: 100px; }
.booking-card {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    background: var(--tint-004);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
}
.booking-card--cancelled { opacity: 0.55; }
.booking-card__img img { width: 90px; height: 90px; border-radius: var(--border-radius-sm); object-fit: cover; }
.booking-card__body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* تذكرة مصغّرة داخل بطاقة الحجز: الرمز وأزراره في مكانهما، لا خلف
   صفحةٍ أخرى. وتلتفّ على الجوال لأن ثلاثة أزرار في صفٍّ واحد داخل
   بطاقةٍ عرضها 250px تخرج عن حدّها. */
.mini-ticket {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: var(--border-radius-sm);
    background: var(--tint-004);
    border: 1px dashed var(--color-gold-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mini-ticket__ref {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}
.mini-ticket__ref .ltr-value {
    color: var(--color-gold);
    font-weight: 800;
    letter-spacing: 0.5px;
}
.mini-ticket__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mini-ticket__actions .btn { flex: 0 1 auto; }

.booking-card__body h3 { font-size: var(--font-size-md); color: var(--color-text-primary); font-weight: 700; }
.booking-card__price { color: var(--color-gold); font-weight: 800; }

.status-pill {
    align-self: flex-start;
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--border-radius-full);
}
.status-pill--confirmed { background: rgba(76, 175, 80, 0.15); color: #8fd694; }
.status-pill--cancelled { background: rgba(255, 68, 68, 0.15); color: #ffb3b3; }

/* --- التوعية البيئية --- */
.article-list { display: flex; flex-direction: column; gap: var(--spacing-md); padding-bottom: 100px; }
.article-card {
    background: var(--tint-004);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}
.article-card > a { display: flex; gap: var(--spacing-md); padding: var(--spacing-md); }
.article-card img { width: 110px; height: 90px; object-fit: cover; border-radius: var(--border-radius-sm); flex-shrink: 0; }
.article-card__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.article-card__body h3 { font-size: var(--font-size-md); color: var(--color-text-primary); font-weight: 700; }
.article-card__kind {
    display: inline-block;
    align-self: flex-start;
    font-size: var(--font-size-xs);
    color: var(--color-gold);
    background: var(--color-gold-bg);
    padding: 2px 8px;
    border-radius: var(--border-radius-full);
}

/* --- الأسئلة الشائعة --- */
.faq-list { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
.faq {
    background: var(--tint-004);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
}
.faq summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--color-gold);
    font-size: var(--font-size-md);
}
.faq p { margin-top: var(--spacing-sm); color: var(--color-text-secondary); line-height: 1.9; font-size: var(--font-size-md); }

/* --- الأقسام المطويّة في «حسابي» --- */
/* صفحةٌ من ثلاث شاشات تُمرَّر بحثاً عن سطر. والطيّ يجعل عناوينها
   كلّها في شاشة واحدة، وتفصيلُ ما يُراد خلف ضغطة.

   و<details> لا سكربت: يعمل قبل تحميل أي ملف، ويصل قارئَ الشاشة
   موصوفاً «مطويّ/مفرود» بلا سمة aria نكتبها ونسهو عن تحديثها. */
.fold {
    width: 100%;
    background: var(--tint-004);
    border: 1px solid rgba(201, 168, 76, 0.14);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
}
.fold__summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    cursor: pointer;
    list-style: none;              /* مثلّث المتصفّح الافتراضي */
}
.fold__summary::-webkit-details-marker { display: none; }

.fold__title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-gold);
}
/* خبر القسم في عنوانه: نسبةُ الجاهزية والمستوى وحالة التوثيق تُقرأ
   والقسم مطويّ، فالطيّ يخفي التفصيل لا الخبر. */
.fold__note {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--tint-006);
    border-radius: var(--border-radius-full);
    padding: 2px 10px;
    white-space: nowrap;
}

/* السهم مربّعٌ بضلعين مُدار: يشير إلى أسفل مطويّاً وإلى أعلى مفروداً.
   وهو محايد للجهة، فلا ينقلب مع اتجاه الصفحة كما ينقلب «‹». */
.fold__summary::after {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-gold);
    border-bottom: 2px solid var(--color-gold);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}
.fold[open] .fold__summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.fold__body {
    padding: 0 var(--spacing-md) var(--spacing-md);
}
/* البطاقات داخل القسم لا تحمل إطاراً ثانياً فوق إطاره */
.fold__body > .info-card,
.fold__body > .prefs,
.fold__body > .loyalty,
.fold__body > .readiness {
    margin: 0 0 var(--spacing-sm);
    background: transparent;
    border: 0;
    padding: 0;
}
.fold__body > *:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .fold__summary::after { transition: none; }
}

/* --- الملف الشخصي --- */
.profile-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0 110px;
}
.profile-pic-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid var(--color-gold);
    overflow: hidden;
    box-shadow: 0 0 20px var(--color-gold-bg);
    flex-shrink: 0;
}
.profile-pic-wrap img { width: 100%; height: 100%; object-fit: cover; }
.profile-pic-placeholder {
    width: 100%; height: 100%;
    background: var(--tint-008);
    display: flex; justify-content: center; align-items: center;
}
.upload-btn {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    text-align: center;
    font-size: 11px;
    padding: 5px 0;
    cursor: pointer;
    backdrop-filter: blur(2px);
}
.profile-name { color: var(--color-text-primary); font-size: var(--font-size-xl); font-weight: 800; }

.stat-row { display: flex; gap: var(--spacing-sm); width: 100%; }
.stat {
    flex: 1;
    background: var(--tint-004);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.stat strong { color: var(--color-gold); font-size: var(--font-size-lg); font-weight: 800; }
.stat span { color: var(--color-text-muted); font-size: var(--font-size-xs); }

.info-card {
    background: var(--tint-003);
    border: 1px solid var(--line-soft);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.info-row {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    border-bottom: 1px solid var(--line-faint);
    padding-bottom: var(--spacing-sm);
}
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-label { color: var(--color-text-secondary); font-size: var(--font-size-md); }
.info-value { color: var(--color-gold); font-weight: 700; font-size: var(--font-size-md); word-break: break-all; }

/* الصفّ الذي يُفتح: سهمٌ يقول إن وراءه شيئاً، ومساحة لمس لا تقلّ عن
   أربع وأربعين نقطة — الصفّ بلا حشو أرقّ من أن يُصاب بإبهام. */
.info-row--link {
    align-items: center;
    padding: var(--spacing-sm) 0;
    min-height: 44px;
    transition: color 0.2s ease;
}
/* السهم مرسوم بضلعين لا مكتوبٌ حرفاً.

   كان ‎content: '‹'‎، وهو حرفٌ من ذوات الانعكاس ثنائي الاتجاه: يقلبه
   المتصفّح في الفقرة اليمينية فيُرسم «›». والصفحة كلّها يمينية، فكان
   السهم يشير إلى الخلف دائماً في كل صفٍّ يُضغط.

   والضلعان لا يمسّهما ذلك: شكلٌ هندسي لا محرفٌ في جدول، فيبقى كما
   رُسم. وهو يأخذ ‎currentColor‎ فيتبع لون النصّ في السمتين. */
.info-row--link::after {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    margin-inline-start: auto;
    transition: transform 0.2s ease;
}
.info-row--link:hover .info-label,
.info-row--link:focus-visible .info-label { color: var(--color-gold); }
.info-row--link:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.info-row--link .info-value { margin-inline-start: var(--spacing-sm); }

/* بطاقة تُضغط كلّها: بابٌ واحد لا صفّ في قائمة، فتُميَّز بحدّ ذهبي */
.info-card--cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    border-color: var(--color-gold-border);
    background: var(--color-gold-bg);
    min-height: 44px;
}
.info-card--cta .info-label { color: var(--color-text-primary); font-weight: 700; }
.info-card--cta .info-value { color: var(--color-text-muted); font-weight: 400; }

/* --- صفحة نصّية يكتبها المدير --- */
.static-page {
    width: 100%;
    margin-bottom: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.static-page p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    /* سطرٌ مريح للعربية: أقصر منه يجعل العين تقفز، وأطول يضيّعها
       في العودة إلى أول السطر */
    line-height: 2;
    max-width: 68ch;
}

/* عنوانٌ فرعي داخل صفحةٍ نصّية: سياسة الخصوصية أربع عشرة فقرة،
   وصفحةٌ بلا عناوين لا يُعثر فيها على بند. */
.static-page__head {
    color: var(--color-gold);
    font-size: var(--font-size-lg);
    font-weight: 800;
    margin-top: var(--spacing-md);
}
.static-page__head:first-child { margin-top: 0; }

/* --- تسجيل الدخول --- */
.auth-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    padding: var(--spacing-md) 0 110px;
}
.auth-tabs {
    display: flex;
    background: var(--tint-005);
    border-radius: var(--border-radius-full);
    padding: 5px;
}
.auth-tab {
    flex: 1;
    padding: 10px;
    color: var(--color-text-secondary);
    font-weight: 700;
    font-size: var(--font-size-md);
    border-radius: var(--border-radius-full);
    transition: all 0.3s ease;
}
.auth-tab.active {
    background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
    color: #111;
}
.auth-form {
    display: none;
    flex-direction: column;
    gap: var(--spacing-md);
    background: var(--tint-003);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(201, 168, 76, 0.1);
}
.auth-form.active { display: flex; }

/* --- صفحات الأخطاء --- */
.error-page {
    text-align: center;
    padding: 60px var(--spacing-xl) 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}
.error-code { font-size: 72px; font-weight: 800; color: var(--color-gold); opacity: 0.35; line-height: 1; }
.error-title { font-size: var(--font-size-xl); color: var(--color-text-primary); font-weight: 800; }
.error-message { color: var(--color-text-secondary); line-height: 1.8; max-width: 320px; }

/* --- الوصولية: احترام تفضيل تقليل الحركة --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- تركيز واضح لمستخدمي لوحة المفاتيح --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-gold-light);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================
   الشركات المنظّمة والمرشدون
   ============================================ */

.partner-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding-bottom: 100px;
}

.partner-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: linear-gradient(145deg, var(--tint-005) 0%, var(--tint-0015) 100%);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.partner-card:hover, .partner-card:active {
    transform: translateY(-2px);
    border-color: var(--color-gold-border);
}

.partner-card__logo {
    width: 64px;
    height: 64px;
    border-radius: var(--border-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--color-gold-border);
}
.partner-card__logo--round { border-radius: 50%; }

.partner-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.partner-card__name {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.partner-card__meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* شارة التوثيق */
.verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--color-gold);
    color: #111;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(76, 175, 80, 0.12);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #8fd694;
    padding: 5px 14px;
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: 700;
}
.trust-badge--pending {
    background: rgba(241, 196, 15, 0.1);
    border-color: rgba(241, 196, 15, 0.3);
    color: #f5d76e;
}

/* رأس صفحة الشركة أو المرشد */
.profile-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) 0;
}
.profile-head__logo {
    width: 96px;
    height: 96px;
    border-radius: var(--border-radius-md);
    object-fit: cover;
    border: 2px solid var(--color-gold);
    box-shadow: 0 0 20px var(--color-gold-bg);
}
.profile-head__logo--round { border-radius: 50%; }
.profile-head .detail__title { display: flex; align-items: center; gap: 8px; }

/* بطاقة الشركة داخل صفحة الرحلة */
/* شريط الشركة المنظّمة: بطاقة قائمة بذاتها، لها فراغ يفصلها عمّا فوقها
   وعمّا تحتها، وسهم يوضّح أنها رابط لا مجرد معلومة. */
.operator-strip {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: linear-gradient(135deg,
        rgba(201, 168, 76, 0.09) 0%, var(--tint-003) 100%);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-block: var(--spacing-xl);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.operator-strip:hover {
    border-color: var(--color-gold);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
.operator-strip:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}
.operator-strip img {
    width: 52px; height: 52px;
    border-radius: var(--border-radius-md);
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--color-gold-border);
}
.operator-strip__body {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0; flex: 1;
}
.operator-strip__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: 600;
}
/* الشريط بلا رابط: الشركة الموقوفة يبقى اسمها ولا تُفتح صفحتها،
   فلا يُوهم مؤشّرُ اليد ولا الحركةُ بضغطةٍ لا تقود إلى شيء. */
.operator-strip--plain { cursor: default; }
.operator-strip--plain:hover { transform: none; }

.operator-strip__name {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text-primary);
    display: flex; align-items: center; gap: 6px;
    overflow-wrap: anywhere;
}
.operator-strip__arrow {
    flex-shrink: 0;
    color: var(--color-gold);
    font-size: 18px;
    transition: transform 0.25s ease;
}
.operator-strip:hover .operator-strip__arrow { transform: translateX(-4px); }

/* رد المزوّد على المراجعة */
.review__reply {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-gold-bg);
    border-inline-start: 3px solid var(--color-gold);
    border-radius: var(--border-radius-sm);
}
.review__reply p { color: var(--color-text-secondary); font-size: var(--font-size-sm); margin-top: 4px; }

/* صندوق عرض سرّ التحقق الثنائي */
.secret-box {
    background: var(--color-bg-input);
    border: 1px dashed var(--color-gold-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md);
    text-align: center;
    margin: var(--spacing-sm) 0;
    overflow-wrap: anywhere;
}
.secret-box code {
    color: var(--color-gold);
    font-size: var(--font-size-lg);
    letter-spacing: 2px;
    font-weight: 700;
}

/* ============================================
   تذكرة الحجز
   ============================================ */
.ticket-wrap { padding-bottom: 110px; max-width: 560px; margin-inline: auto; }

.ticket {
    background: linear-gradient(145deg, var(--tint-006) 0%, var(--tint-002) 100%);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.ticket__head {
    display: flex; align-items: center; gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-gold-bg);
    flex-wrap: wrap;
}
.ticket__head > div { flex: 1; min-width: 0; }
.ticket__title { font-size: var(--font-size-lg); font-weight: 800; color: var(--color-text-primary); }
.ticket__ref {
    font-family: monospace; letter-spacing: 2px;
    color: var(--color-gold); font-weight: 700; font-size: var(--font-size-md);
    direction: ltr; text-align: start;
}

/* خط التقطيع المثقّب */
.ticket__perf {
    height: 2px;
    background: repeating-linear-gradient(90deg,
        var(--color-gold-border) 0 8px, transparent 8px 16px);
    position: relative;
}
.ticket__perf::before, .ticket__perf::after {
    content: ''; position: absolute; top: -9px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--color-bg-darker);
}
.ticket__perf::before { inset-inline-start: -9px; }
.ticket__perf::after  { inset-inline-end: -9px; }

.ticket__body { padding: var(--spacing-xl); display: flex; flex-direction: column; gap: var(--spacing-md); }
.ticket__trip { font-size: var(--font-size-xl); font-weight: 800; color: var(--color-gold); }
.ticket__total {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-gold-border);
    color: var(--color-text-secondary);
}
.ticket__total strong { color: var(--color-gold); font-size: var(--font-size-xl); font-weight: 800; }
.ticket__foot { padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl); }
.ticket__actions { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-lg); }

@media print {
    .header-bar, .bottom-nav, .top-nav, .ticket__actions,
    .corner-decor, .islamic-pattern-overlay, .flashes { display: none !important; }
    body, .app-container { background: #fff !important; }
    .ticket { border-color: #999; box-shadow: none; }
    .ticket__title, .ticket__trip, .ticket__total strong { color: #111 !important; }
}

/* مؤشر السعة المتبقية */
.load-list { display: flex; flex-direction: column; gap: 8px; margin-top: var(--spacing-sm); }
.load-row { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); }
.load-row__date { min-width: 92px; color: var(--color-text-secondary); }
.load-row__bar { flex: 1; height: 7px; background: var(--tint-007); border-radius: 4px; overflow: hidden; }
.load-row__fill { height: 100%; background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold)); }
.load-row__left { color: var(--color-gold); font-weight: 700; white-space: nowrap; }
.load-row--tight .load-row__fill { background: linear-gradient(90deg, #c0392b, #e74c3c); }

/* ============================================
   إثراءات رحلة الضيف
   ============================================ */

/* زر أيقوني (مشاركة وغيره) */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--tint-006);
    border: 1px solid var(--color-gold-border);
    color: var(--color-gold);
    transition: all 0.2s ease;
}
.icon-btn:hover, .icon-btn:active { background: var(--color-gold); color: #111; }

.detail__title-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--spacing-md);
}

/* شريط الرحلة القادمة */
.next-trip {
    display: flex; align-items: center; gap: var(--spacing-md);
    background: linear-gradient(135deg, rgba(201,168,76,.18) 0%, var(--veil-50) 100%);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    transition: transform 0.2s ease;
}
.next-trip:active { transform: scale(0.99); }
.next-trip--today, .next-trip--soon { border-color: var(--color-gold); box-shadow: 0 0 18px var(--color-gold-bg); }
.next-trip__icon { font-size: 26px; }
.next-trip__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.next-trip__body strong { color: var(--color-text-primary); font-size: var(--font-size-md); }
.next-trip__body small { color: var(--color-gold); font-size: var(--font-size-sm); }
.next-trip__arrow { color: var(--color-gold); font-size: 20px; }

/* العدّ التنازلي */
.countdown {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--color-gold-bg);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-sm);
    padding: 10px 14px;
    color: var(--color-text-secondary);
}
.countdown--today { background: rgba(76,175,80,.14); border-color: rgba(76,175,80,.4); }
.countdown__icon { font-size: 18px; }
.countdown__text strong { color: var(--color-gold); }
.countdown__peak {
    margin-inline-start: auto;
    font-size: var(--font-size-xs);
    background: rgba(241,196,15,.14);
    color: #f5d76e;
    padding: 2px 10px;
    border-radius: var(--border-radius-full);
}

.countdown-pill {
    align-self: flex-start;
    font-size: var(--font-size-xs); font-weight: 700;
    padding: 3px 10px; border-radius: var(--border-radius-full);
    background: var(--color-gold-bg); color: var(--color-gold);
}
.countdown-pill--today { background: rgba(76,175,80,.16); color: #8fd694; }

/* قائمة التجهيزات */
.packing { display: grid; grid-template-columns: 1fr; gap: var(--spacing-sm); }
.packing__item {
    display: flex; align-items: flex-start; gap: var(--spacing-sm);
    background: var(--tint-004);
    border: 1px solid rgba(201,168,76,.1);
    border-radius: var(--border-radius-sm);
    padding: 10px 12px;
}
.packing__item strong { display: block; color: var(--color-text-primary); font-size: var(--font-size-md); }
.packing__item small { display: block; margin-top: 2px; line-height: 1.6; }
.packing__icon { font-size: 20px; flex-shrink: 0; }
.packing--compact .packing__item { padding: 8px 10px; }

@media (min-width: 768px) {
    .packing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .packing--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* مجموعات قائمة التجهيز: عنوان صغير لكل مجموعة مع عدد عناصرها،
   فتُقرأ القائمة كتصنيف مقصود لا كسرد طويل متشابه. */
.packing-group + .packing-group { margin-top: var(--spacing-lg); }
.packing-group__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}
.packing-group__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--color-gold-border));
}
.packing-group__count {
    order: 1;
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    color: var(--color-gold);
    background: rgba(201, 168, 76, 0.12);
    border-radius: var(--border-radius-pill);
    padding: 1px 8px;
}
.packing__body { min-width: 0; }

/* ============================================
   توثيق البريد والجوال برمز لمرة واحدة
   ============================================ */

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

.verify-card {
    background: var(--tint-004);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.verify-card--done {
    border-color: rgba(76, 175, 80, 0.4);
    background: rgba(76, 175, 80, 0.06);
}

.verify-card__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}
.verify-card__icon { font-size: 22px; flex-shrink: 0; }
.verify-card__title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.verify-card__title strong { color: var(--color-text-primary); font-size: var(--font-size-md); }
/* البريد والجوال قيم لاتينية داخل فقرة عربية: بلا عزل يعيد المتصفح
   ترتيب أرقامها ونجومها فتُقرأ مقلوبة. unicode-bidi: isolate يمنع ذلك. */
.verify-card__title small {
    overflow-wrap: anywhere;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: right;
}
.ltr-value { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.verify-badge {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--border-radius-pill);
    background: var(--tint-007);
    color: var(--color-text-muted);
}
.verify-badge--on { background: rgba(76, 175, 80, 0.18); color: #9fe0a2; }

/* خانات الرمز الستّ: اتجاهها من اليسار لليمين لأن الأرقام تُقرأ هكذا
   حتى داخل واجهة عربية، فلا ينقلب ترتيب ما يكتبه المستخدم. */
.otp-boxes {
    display: flex;
    direction: ltr;
    justify-content: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0 var(--spacing-md);
    border: 0;
    padding: 0;
}
.otp-boxes input {
    width: 46px;
    height: 56px;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    font-family: inherit;
    color: var(--color-gold);
    background: var(--color-bg-input);
    border: 1px solid var(--line-strong);
    border-radius: var(--border-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.otp-boxes input:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px var(--color-gold-bg);
}
.otp-boxes input:not(:placeholder-shown),
.otp-boxes input[value]:not([value=""]) { border-color: var(--color-gold-border); }

.otp-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}
.otp-resend { margin-top: var(--spacing-sm); }
.otp-resend .btn[disabled] { opacity: 0.55; }

.verify-note {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-gold-bg);
    border-inline-start: 3px solid var(--color-gold);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    line-height: 1.8;
}
.verify-note code {
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 6px;
    border-radius: 4px;
    direction: ltr;
    display: inline-block;
}

.verify-why { margin-top: var(--spacing-xxl); }
.verify-why__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}
.verify-why__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    line-height: 1.7;
}

.back-link {
    display: inline-block;
    margin-top: var(--spacing-lg);
    color: var(--color-gold);
    font-weight: 700;
    font-size: var(--font-size-sm);
}

@media (min-width: 768px) {
    .otp-boxes input { width: 54px; height: 62px; font-size: 24px; }
}

/* قناة معطّلة: تحذير لا معلومة عادية */
.verify-note--warn {
    background: rgba(255, 68, 68, 0.1);
    border-inline-start-color: var(--color-danger);
    color: #ffcccc;
}

/* شارة بيئة التجريب: ظاهرة عمداً فلا يُخلَط بينها وبين الموقع الحقيقي */
.staging-flag {
    position: relative;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 8px var(--spacing-lg);
    background: repeating-linear-gradient(45deg,
        rgba(201, 168, 76, 0.22) 0 12px, rgba(201, 168, 76, 0.10) 12px 24px);
    border-bottom: 1px solid var(--color-gold);
    color: var(--color-gold-light);
    font-size: var(--font-size-xs);
    text-align: center;
}
.staging-flag strong { color: var(--color-gold); font-weight: 800; }
.staging-flag__build {
    direction: ltr;
    unicode-bidi: isolate;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 11px;
    color: var(--color-gold-light);
}

/* روابط التواصل: صفّ واحد يلتفّ، وما لم يُضبط لا يظهر أصلاً */
.social-row { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.social-row a { color: var(--color-gold); font-weight: 600; }

/* --- دقّة حدّ المنطقة: تُقال للزائر، ولا تُخفى --- */
.popup-accuracy {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line-strong);
    font-size: var(--font-size-xs);
    line-height: 1.6;
}
.popup-accuracy--official { color: #9fe0a2; }
.popup-accuracy--rough { color: var(--color-gold); }
.popup-source { display: block; opacity: 0.75; margin-top: 2px; }

/* التحفّظ داخل شريط حالة الموقع: أخفت من الحكم نفسه، وظاهر معه */
.status-caveat {
    display: block;
    margin-top: 6px;
    font-size: var(--font-size-xs);
    opacity: 0.85;
    line-height: 1.6;
}

/* --- الانضمام --- */
/* المصيدة تُخفى بالأنماط لا بـ type=hidden: الآليّ يقرأ الترميز
   ويتجاهل الأنماط، فيملأ ما يعرف اسمه ويكشف نفسه. و‎display: none‎
   وحدها تكفي أكثر الآليّات، والإزاحة تُغطّي ما يفحصها. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.join-why {
    background: var(--color-bg-card-alt);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.join-why__list {
    display: grid;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}
.join-why__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}
@media (min-width: 768px) {
    .join-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.join-note {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.7;
    margin-top: var(--spacing-md);
}

.join-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    background: var(--color-gold-bg);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0 100px;
}
.join-cta__text {
    color: var(--color-gold-light);
    font-size: var(--font-size-md);
    font-weight: 700;
    flex: 1 1 240px;
}

/* --- الولاء --- */
.loyalty {
    background: linear-gradient(135deg, var(--color-gold-bg) 0%, var(--veil-50) 100%);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    width: 100%;
}
.loyalty__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}
.loyalty__icon { font-size: 32px; line-height: 1; }
.loyalty__tier { color: var(--color-gold); font-size: 18px; font-weight: 800; }
.loyalty__points { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.loyalty__discount {
    margin-inline-start: auto;
    background: var(--color-gold);
    color: #111;
    font-weight: 800;
    font-size: var(--font-size-sm);
    border-radius: var(--border-radius-pill);
    padding: 4px 12px;
}

.loyalty__bar {
    height: 8px;
    background: var(--tint-008);
    border-radius: 4px;
    overflow: hidden;
    margin: var(--spacing-md) 0 8px;
}
.loyalty__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold));
    border-radius: 4px;
    transition: width .6s ease;
}
.loyalty__next { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.loyalty__next strong { color: var(--color-gold); }

.loyalty__benefits {
    display: grid;
    gap: 6px;
    margin-top: var(--spacing-md);
}
.loyalty__benefits li {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    padding-inline-start: 20px;
    position: relative;
}
.loyalty__benefits li::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    color: var(--color-gold);
    font-weight: 800;
}

/* «كيف تُحسب؟» مطويّة: من يسأل يفتح، ومن لا يسأل لا يُزاحَم بجدول
   قواعد فوق رقمه. */
.loyalty__how { margin-top: var(--spacing-md); }
.loyalty__how summary {
    color: var(--color-gold);
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
}
.loyalty__how ul { margin: var(--spacing-sm) 0; display: grid; gap: 4px; }
.loyalty__how li {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    padding-inline-start: 14px;
    position: relative;
}
.loyalty__how li::before {
    content: '·';
    position: absolute;
    inset-inline-start: 4px;
    color: var(--color-gold);
}

/* --- رحلاتي --- */
.trip-totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}
.trip-totals__item {
    background: var(--color-bg-card-alt);
    border: 1px solid var(--line-faint);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md) 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.trip-totals__item strong { color: var(--color-gold); font-size: 20px; font-weight: 800; }
.trip-totals__item span { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.trip-totals__item--link { border-color: var(--color-gold-border); }

.review-nudge {
    background: var(--color-bg-card-alt);
    border: 1px solid var(--color-gold-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.review-nudge__list { display: grid; gap: 8px; margin-top: var(--spacing-md); }
.review-nudge__list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-gold);
    font-size: var(--font-size-sm);
    font-weight: 700;
    background: var(--color-gold-bg);
    border-radius: var(--border-radius-sm);
    padding: 10px 12px;
}

.cancelled-fold { margin-top: var(--spacing-lg); margin-bottom: 100px; }
.cancelled-fold summary {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 700;
    cursor: pointer;
    padding: var(--spacing-sm) 0;
}

/* --- مدخل الشركاء في صفحة الدخول --- */
/* من لا حساب له من الشركات كان لا يجد ما يدلّه: التسجيل العادي يصنع
   حساب ضيف، والانضمام طلبٌ يُراجَع، ولا شيء يقول ذلك. */
.partner-entry {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--line-soft);
}
.partner-entry__title {
    color: var(--color-gold);
    font-size: var(--font-size-md);
    font-weight: 800;
    margin-bottom: 6px;
}
.partner-entry__text {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}
.partner-entry__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }
.partner-entry__actions .btn { flex: 1 1 140px; }

/* ============================================================
   نماذج وبطاقات مشتركة بين اللوحة والصفحات العامة.

   كانت في admin.css وحدها، وثلاث صفحات عامة تستعملها —
   join وactivate وticket — ولا تحمّل ذلك الملف. فبقيت
   ‎<fieldset>‎ بحدّها الافتراضي من المتصفّح: ‎rgb(239,239,239)‎،
   خطٌّ أبيض صريح على خلفية خضراء داكنة.

   وموضعها هنا لأن pages.css يحمّله الاثنان: العامّ واللوحة.
   ============================================================ */

.admin-card {
    background: var(--tint-003);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

/* --- النماذج --- */
.admin-form { display: flex; flex-direction: column; gap: var(--spacing-lg); max-width: 960px; }

.admin-fieldset {
    background: var(--tint-003);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    /* المتصفّح يفرض على fieldset وحده min-inline-size: min-content، ولا
       تلغيه min-width: 0 على أبيه. فيتمدّد ليسع أعرض محتوى فيه — جدولاً
       أو سطراً لا ينكسر — ويخرج عن الصفحة على الجوّال. */
    min-inline-size: 0;
}
.admin-fieldset legend {
    color: var(--color-gold);
    font-weight: 700;
    font-size: var(--font-size-base);
    padding: 0 var(--spacing-sm);
}

/* المسافة بين الحقلين أوسع من المسافة داخل الحقل الواحد.
   كانتا متساويتين — اثنتا عشرة نقطة هنا وهناك — فيُقرأ التلميح تحت
   الحقل عنواناً للحقل الذي يليه: «يظهر في عنوان الصفحة» فوق «الشعار
   النصي» تُفهَم وصفاً للشعار وهي وصف الاسم. والقرب هو ما يجمع، لا
   الترتيب وحده. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xxl) var(--spacing-md);
    margin-top: var(--spacing-md);
}
.field--wide { grid-column: span 2; }
.field--full { grid-column: 1 / -1; }
.field__hint { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); }

.check { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-md); color: var(--color-text-secondary); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--color-gold); flex-shrink: 0; }
.check--big {
    background: var(--tint-004);
    border: 1px solid var(--line-soft);
    border-radius: var(--border-radius-sm);
    padding: 12px 14px;
    align-self: start;
}
.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.image-picker { display: flex; align-items: center; gap: var(--spacing-md); }
.image-picker img { border-radius: var(--border-radius-sm); object-fit: cover; border: 1px solid var(--color-gold-border); }
.image-picker img.round { border-radius: 50%; }
.image-picker input { flex: 1; color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* صفّ الأزرار يبتعد عمّا فوقه ولا يلتصق بحافّة الحقل الذي يليه.
   وكان بلا مسافة، فيبدو الزرّ ملصقاً بأسفل مربّع النصّ كأنه جزء منه. */
.admin-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}


/* --- جاهزية الرحلة --- */
/* حلقة نسبة مرسومة بـconic-gradient لا صورة: تتبع لون السمة، ولا
   تحمّل الصفحة ملفاً، وتُقرأ في الوضعين الفاتح والداكن. */
.readiness {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg);
    border: 1px solid rgba(201, 168, 76, 0.22);
    border-radius: var(--border-radius-lg);
    background: rgba(201, 168, 76, 0.05);
}

.readiness--done {
    border-color: rgba(74, 179, 122, 0.28);
    background: rgba(74, 179, 122, 0.06);
}

.readiness__head {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.readiness__ring {
    position: relative;
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: conic-gradient(var(--color-gold-light) calc(var(--pct) * 1%),
                               var(--tint-010) 0);
    display: grid;
    place-items: center;
}

.readiness--done .readiness__ring {
    background: conic-gradient(#4ab37a calc(var(--pct) * 1%),
                               var(--tint-010) 0);
}

.readiness__ring::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--color-bg-darker);
}

.readiness__pct {
    position: relative;
    font-size: 13px;
    font-weight: 800;
    color: var(--color-gold-light);
}

.readiness--done .readiness__pct { color: #4ab37a; }

.readiness__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
}

.readiness__sub {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.readiness__list {
    margin: var(--spacing-lg) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.readiness__item {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
    font-size: 13px;
}

.readiness__item strong {
    display: block;
    font-weight: 700;
}

.readiness__item span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.readiness__mark {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-text-muted);
}

.readiness__item.is-done .readiness__mark { color: #4ab37a; }
.readiness__item.is-done strong { color: var(--color-text-secondary); }

.readiness__svg { width: 15px; height: 15px; fill: currentColor; }

.readiness .btn { margin-top: var(--spacing-lg); }

.btn__icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    vertical-align: -3px;
    margin-inline-end: 6px;
}

/* --- التفضيلات في «حسابي» --- */
.prefs {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg);
    border: 1px solid var(--line-soft);
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-card-alt);
}

.prefs__title {
    margin: 0 0 var(--spacing-lg);
    font-size: 15px;
    font-weight: 800;
}

.prefs__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.prefs__label { font-size: 13px; color: var(--color-text-secondary); }

/* مفتاح مقطّع: الخيارات الثلاثة مرئية معاً، فيُعرف الموجود والمتاح
   بنظرة. والقائمة المنسدلة تُخفي الخيارين حتى تُفتح. */
.seg {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--line-soft);
    border-radius: var(--border-radius-pill);
    background: var(--color-bg-input);
}

.seg__btn {
    padding: 6px 13px;
    border: 0;
    border-radius: var(--border-radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.seg__btn[aria-pressed="true"] {
    background: var(--color-gold);
    color: var(--color-bg-darker);
}

.seg__btn--soon { opacity: 0.45; cursor: not-allowed; }

.prefs__note {
    margin: 0 0 var(--spacing-lg);
    font-size: 11px;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.prefs__link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--line-faint);
    color: var(--color-text-primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.prefs__link:hover { color: var(--color-gold-light); }
.prefs__svg { fill: var(--color-gold); flex-shrink: 0; }
.prefs__chevron { margin-inline-start: auto; fill: var(--color-text-muted); }


/* ============================================================
   استكشف: صفوف التصفّح
   ============================================================ */

.browse-row { margin-bottom: var(--spacing-xl); }

/* شريطٌ يُمرَّر أفقياً، والبطاقات بعرضٍ ثابت.
   لولا العرض الثابت لتمدّدت البطاقة الواحدة على الصفّ كلّه — البطاقة
   في الشبكة تأخذ عرض عمودها، وفي الشريط لا عمود لها. */
.browse-strip {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--spacing-sm);
    scrollbar-width: none;
    /* التلاشي في جهة الفيض: الصفّ يبدأ يميناً، والفيض في RTL يساراً */
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
}
.browse-strip::-webkit-scrollbar { display: none; }
.browse-strip > .trip-card {
    flex: 0 0 auto;
    width: 165px;
    scroll-snap-align: start;
}

/* بابٌ في آخر الصفّ: من بلغ نهايته يجد المزيد حيث توقّف، لا في
   أعلى الصفحة حيث لا ينظر. */
.browse-more {
    flex: 0 0 auto;
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    border: 1px dashed var(--color-gold-border);
    border-radius: var(--border-radius-md);
    color: var(--color-gold);
    font-size: var(--font-size-sm);
    font-weight: 700;
    background: var(--tint-003);
}
.browse-more:hover { background: var(--tint-006); }
.browse-more__arrow { font-size: var(--font-size-xl); }

@media (min-width: 700px) {
    .browse-strip > .trip-card { width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
    .browse-strip { scroll-snap-type: none; }
}