/* ============================================================
   واجهات العميل — طبقة التبسيط المشتركة
   تُحمَّل آخر ملف CSS في كل صفحة عميل، بعد الأنماط المضمّنة وبعد
   dark-mode.css، فتوحّد ما تفرّق بين الصفحات دون لمس أي معرّف.
   القرار وأسبابه: docs/customer-ui-redesign.md
   ============================================================ */

:root {
    /* لونٌ أساسي واحد: كانت الصفحات تتنازع ثلاث درجات أخضر، و#048c5b
       مع نصٍّ أبيض تباينه 4.3:1 — دون الحدّ */
    --primary: #04553A;
    --primary-gradient: #0A6B49;
    --primary-color: #04553A;
    --primary-dark: #0A6B49;
    --primary-light: #E7F1EC;
    /* الأحمر للأخطاء والإلغاء فقط — كان لونَ الوجهة فبدت الوجهة خطأً */
    --secondary-color: #13201A;

    --cu-ink: #13201A;
    --cu-ink-2: #4B5A52;
    --cu-placeholder: #6B7770;
    --cu-line: #D5DCD8;
    --cu-surface: #FFFFFF;
    --cu-field: #F6F7F5;
    --cu-danger: #B42318;
    --cu-gold-ink: #8A6212;
    --cu-tap: 48px;

    /* أزرق Bootstrap الافتراضي كان يظهر في الدخول والروابط والأيقونات — لونٌ
       ليس من الهوية. نعيد تعريفه بأخضر وجيز في صفحات العميل وحدها */
    --bs-primary: #04553A;
    --bs-primary-rgb: 4, 85, 58;
    --bs-link-color: #04553A;
    --bs-link-color-rgb: 4, 85, 58;
    --bs-link-hover-color: #0A6B49;
    --bs-link-hover-color-rgb: 10, 107, 73;
}

body.dark-mode {
    --secondary-color: #F3F4F6;
    --cu-ink: #F9FAFB;
    --cu-ink-2: #C3CBD4;
    --cu-placeholder: #9CA3AF;
    --cu-line: #374151;
    --cu-surface: #1F2937;
    --cu-field: #111827;
}

/* ── الخانات: 16px تمنع تكبير iOS التلقائي، و48px هدف لمسٍ مريح ── */
.form-control,
.form-select {
    font-size: 16px;
    min-height: var(--cu-tap);
}

.form-control-sm {
    font-size: 16px;
    min-height: var(--cu-tap);
    padding: 10px 14px;
    border-radius: 12px;
}

textarea.form-control {
    min-height: 0;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--cu-placeholder);
    opacity: 1;
}

/* ── تركيزٌ يُرى: كان outline:none مع ظلٍّ شفافٍ بنسبة 10% ── */
:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(4, 85, 58, 0.18);
}

body.dark-mode :focus-visible {
    outline-color: #D8B765;
}

/* ── البطاقات ثابتة تحت الإصبع: القفز عند المرور لا معنى له على الهاتف ── */
.section-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

/* ── الزر الأساسي: لونٌ واحد مسطّح بلا تموّج ── */
.btn-submit {
    background: var(--primary-color);
    min-height: 56px;
    box-shadow: 0 4px 14px rgba(4, 85, 58, 0.25);
}

.btn-submit:hover {
    transform: none;
}

.btn-submit::before {
    display: none;
}

/* ── شريط التنقّل: نصّ يُقرأ ── */
.mobile-nav-glass .nav-item-link span {
    font-size: 12px;
}

/* ── رابطٌ بحجم إصبع: للإجراءات الثانوية بدل الأزرار المحدّدة ── */
.cu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 4px;
    background: none;
    border: 0;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}

body.dark-mode .cu-link {
    color: #34D399;
}

@media (prefers-reduced-motion: reduce) {
    .section-card {
        animation: none;
    }
}

/* ============================================================
   الرئيسية — نموذج «اطلب كابتن»
   ============================================================ */

/* رأس أقصر: سطر ترحيب واحد بدل سطرين وشعارٍ كبير */
#main-app-wrapper .app-header .app-logo {
    height: 34px;
}

#main-app-wrapper .app-header #greeting + p {
    display: none;
}

/* عنوان كل طرف: سؤالٌ واضح بحجم يُقرأ */
.cu-point-label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 800;
    color: var(--cu-ink);
}

/* سطرٌ واحد لكل مكان: خانة العنوان نفسها تفتح الخريطة، فزرّ
   «تحديد من الخريطة» فوقها كان نسخةً ثانية من الشيء نفسه */
#home-section .map-select-btn {
    display: none;
}

#home-section .route-inputs .input-wrapper::after {
    content: "\F284";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cu-ink-2);
    pointer-events: none;
}

#home-section .route-inputs .location-input {
    height: 56px;
    padding-left: 40px !important;
    font-size: 16px;
    background: var(--cu-field) !important;
    border: 1.5px solid var(--cu-line) !important;
    border-radius: 14px;
    color: var(--cu-ink);
}

#home-section .route-inputs .location-input:placeholder-shown {
    border-style: dashed !important;
    border-color: var(--primary-color) !important;
}

#home-section .route-inputs .location-input::placeholder {
    color: var(--primary-color);
    font-weight: 700;
}

body.dark-mode #home-section .route-inputs .location-input::placeholder {
    color: #34D399;
}

/* الوجهة بلون الحبر لا بلون الخطأ */
#home-section .route-inputs .input-icon.text-danger {
    color: var(--cu-ink) !important;
}

/* ── بيانات المرسل: تُملأ من الحساب وتُطوى في سطرٍ واحد ── */
.cu-contact-summary {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 15px;
    color: var(--cu-ink-2);
}

.cu-contact-summary .bi {
    color: var(--primary-color);
}

.cu-contact-summary .cu-contact-who {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cu-contact-summary b {
    color: var(--cu-ink);
}

.cu-collapsed > .cu-contact-summary {
    display: flex;
}

.cu-collapsed > .cu-contact-fields {
    display: none;
}

/* ── النقاط الإضافية: روابط خفيفة، والشرح يظهر فقط حين توجد نقطة ── */
#multi-stop-actions {
    flex-wrap: wrap;
    gap: 4px 16px !important;
}

#multi-stop-actions .cu-link {
    font-size: 14px;
}

#extraStopsList:empty ~ #multi-stop-hint {
    display: none;
}

/* ── الصورة: خيارٌ ثانوي، فلا تستحق صندوقاً منقّطاً كبيراً ── */
#home-section .parcel-upload-btn {
    justify-content: flex-start;
    padding: 0 4px;
    min-height: 44px;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 700;
}

#home-section .parcel-upload-btn i {
    font-size: 1.15rem;
}

body.dark-mode #home-section .parcel-upload-btn {
    background: none !important;
    border: 0 !important;
    color: #34D399 !important;
}

/* ── السعر: لا «0» يوحي بأن على العميل اختراع السعر ── */
#price-card.cu-collapsed .price-stepper {
    display: none;
}

#price-card.cu-collapsed #price-hint {
    margin-top: 0 !important;
    padding: 12px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--cu-ink) !important;
    font-size: 15px;
}

#price-hint {
    font-size: 14px;
    color: var(--cu-ink-2) !important;
}

body.dark-mode #price-card.cu-collapsed #price-hint {
    background: #1a3a2e;
}

#home-section #details {
    font-size: 16px;
}

/* ============================================================
   التسوّق (client-order.html)
   ============================================================ */

/* البطل: سطرٌ واحد ثم البحث — كان ترحيباً وعنواناً بسطرين ووصفاً وشعاراً
   كبيراً، فينزل البحث (أهمّ ما في الصفحة) إلى منتصف الشاشة */
.order-hero .hero-greeting,
.order-hero .hero-subtitle {
    display: none;
}

.order-hero .hero-title {
    font-size: 20px;
    margin: 0;
}

.order-hero .hero-logo img {
    height: 34px;
}

.order-hero .hero-search input {
    font-size: 16px;
}

.order-hero .hero-search input::placeholder {
    color: rgba(255, 255, 255, 0.78);
}

/* نصوص البطاقات: لا شيء تحت 12px */
.cat-chip .chip-label,
.place-card-status,
.place-card-cat,
.errand-chip,
.errand-place-meta,
.srf-chip span,
.sr-shop,
.recent-chip {
    font-size: 12.5px;
}

/* أهداف لمس بحجم إصبع */
.place-fav-btn {
    width: 44px;
    height: 44px;
    font-size: 17px;
}

.errand-map-btn {
    width: 44px;
    height: 44px;
}

.place-card-menu-btn {
    min-height: 44px;
    font-size: 13px;
}

/* بحث «اطلب من أي محل»: خطّه 13px كان يكبّر الصفحة في iOS عند الكتابة */
#errandSearch {
    font-size: 16px !important;
    padding: 12px 38px 12px 12px !important;
    min-height: 48px;
}

/* ============================================================
   صفحة المتجر (shop-detail.html)
   ============================================================ */

/* أزرار الكمية: 28px و24px في السلة — أصغر من إصبع. والبرتقالي مع أبيض
   تباينه 2.2:1 فالعلامتان + و − بالكاد تُقرآن */
.qty-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
    background: var(--primary-color);
    color: #fff;
}

.qty-control {
    gap: 12px;
}

.cart-item .qty-control {
    gap: 8px !important;
}

.shop-hero-action {
    width: 44px;
    height: 44px;
    font-size: 18px;
}

.cu-hero-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.product-name {
    font-size: 15px;
}

.product-desc {
    font-size: 13px;
    color: var(--cu-ink-2);
}

.product-more {
    font-size: 13px;
    padding: 6px 0 10px;
}

/* ============================================================
   طلباتي والتتبّع
   ============================================================ */

/* الإلغاء رابطٌ أحمر في الوسط — كان أعرض زرٍّ في البطاقة، فيصير
   «إلغاء الطلب» أوضح خيارٍ أمام من ينتظر كابتنه */
.cu-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
    background: none;
    border: 0;
    color: var(--cu-danger);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

body.dark-mode .cu-cancel {
    color: #F87171;
}

/* مراحل الطلب: 9px و10px بلونٍ رماديٍّ فاتح — أهمّ معلومة في الشاشة كانت أصغرها */
.o-tl-lbl,
.step-label {
    font-size: 12px;
    color: var(--cu-ink-2);
}

.o-tl-time,
.step-time {
    font-size: 11.5px;
    color: var(--cu-ink-2);
}

.offer-price-box .lbl {
    font-size: 12.5px;
}

.route-point-row,
.route-addr {
    font-size: 14px;
}

/* الوجهة بلون الحبر لا الأحمر — كما في نموذج الطلب */
.route-icon.dropoff {
    background: #E9ECEA;
    color: var(--cu-ink);
}

body.dark-mode .route-icon.dropoff {
    background: #374151;
    color: #F3F4F6;
}

/* عرض الكابتن: السعر هو القرار، فهو أكبر ما في البطاقة */
.offer-price-box .val {
    font-size: 23px;
}

.offer-actions .btn {
    min-height: 48px;
}

/* تبويبا «جارية / السابقة» يتقاسمان العرض */
.orders-filterbar .of-tab {
    flex: 1;
    justify-content: center;
    min-height: 44px;
    font-size: 14px;
}

/* ============================================================
   الدخول والتسجيل
   ============================================================ */

/* زرّ Bootstrap الأساسي بلون الهوية — قيمه حرفية في الحزمة لا متغيّرات */
.auth-box .btn-primary {
    --bs-btn-bg: #04553A;
    --bs-btn-border-color: #04553A;
    --bs-btn-hover-bg: #0A6B49;
    --bs-btn-hover-border-color: #0A6B49;
    --bs-btn-active-bg: #03442E;
    --bs-btn-active-border-color: #03442E;
    min-height: 56px;
    font-size: 17px;
}

.auth-box .btn-outline-primary {
    --bs-btn-color: #04553A;
    --bs-btn-border-color: #04553A;
    --bs-btn-hover-bg: #04553A;
    --bs-btn-hover-border-color: #04553A;
    --bs-btn-active-bg: #03442E;
    min-height: 48px;
}

.auth-box .form-label {
    font-size: 15px;
    color: var(--cu-ink) !important;
}

.auth-box .tap-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
}

/* التتبّع: تفاصيل الكابتن 11px كانت أصغر من أن تُقرأ أثناء الانتظار في الشارع */
#captain-vehicle,
.captain-rating,
.captain-trips {
    font-size: 13px !important;
}

.price-row .lbl {
    font-size: 14px;
}

/* ============================================================
   طلباتي — بطاقة الطلب (قرار اللجنة، الجولة الثالثة)
   ============================================================ */

/* الترويسة: العنوان وحده — شريط «متابعة مباشرة» كان ضجيجاً لا معلومة */
.app-header .live-status-pill {
    display: none;
}

/* لون حالةٍ واحد لكل نبرة — كانت سبع درجات أخضر وأزرق وبنفسجي، و«جارٍ» 3.9:1 */
.o-status {
    font-size: 13px;
    font-weight: 700;
    min-height: 28px;
    padding: 4px 11px;
    border: 0;
}

.o-status .status-dot {
    background: currentColor;
}

.cu-badge--wait { background: #FDF6E3; color: #8A6212; }
.cu-badge--active { background: #E7F1EC; color: #04553A; }
.cu-badge--done { background: #EEF1EF; color: #13201A; }
.cu-badge--cancel { background: #FDECEA; color: #B42318; }

body.dark-mode .cu-badge--wait { background: #3A2E12; color: #FCD34D; }
body.dark-mode .cu-badge--active { background: #12352A; color: #6EE7B7; }
body.dark-mode .cu-badge--done { background: #2A3441; color: #CBD5E1; }
body.dark-mode .cu-badge--cancel { background: #3B1A1A; color: #FCA5A5; }

/* متى طُلب — مكان رقم الطلب في الرأس */
.o-when {
    font-size: 13px;
    color: var(--cu-ink-2);
    font-weight: 600;
}

/* رقم الطلب: للدعم لا للعميل — سطرٌ صغير في ذيل البطاقة */
.o-ref {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--cu-ink-2);
    text-align: center;
}

.o-card {
    border-color: var(--cu-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(19, 32, 26, 0.06);
}

.o-card:active {
    transform: none;
}

.o-head {
    border-bottom-color: var(--cu-line);
}

/* المسار: الوجهة دبّوسٌ بلون الحبر لا رايةٌ حمراء */
.o-route {
    border: 0;
    background: var(--cu-field);
}

.o-route-row {
    font-size: 14px;
}

.o-route-txt {
    color: var(--cu-ink);
}

.o-route-lbl {
    font-size: 13px;
    color: var(--cu-ink-2);
}

.o-route-node.from {
    background: #E7F1EC;
    color: #04553A;
    border-color: #04553A;
}

.o-route-node.to {
    background: #04553A;
    color: #fff;
    border-color: #04553A;
}

.o-route-connector {
    background: var(--cu-line);
    opacity: 1;
}

/* الأغراض: سطرٌ ثالث بنفس لغة المسار لا فقرةٌ بخطٍ آخر */
.o-detail {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 10px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--cu-ink);
    line-height: 1.6;
}

.o-detail > .bi {
    width: 22px;
    text-align: center;
    color: var(--cu-ink-2);
    flex-shrink: 0;
}

.o-detail-lbl {
    color: var(--cu-ink-2);
    font-size: 13px;
    font-weight: 700;
}

.o-cost {
    border-top-color: var(--cu-line);
}

.o-cost-main > span:first-child {
    font-size: 14px;
    color: var(--cu-ink-2);
}

.o-cost-total {
    font-size: 18px;
    color: #04553A;
}

body.dark-mode .o-cost-total {
    color: #6EE7B7;
}

.o-cost-sub {
    font-size: 13px;
    color: var(--cu-ink-2);
}

.o-actions .btn {
    min-height: 48px;
    font-size: 15px;
}

/* «جاري البحث»: سطحٌ هادئ بدل كتلةٍ داكنة بتدرّجٍ ووهجٍ ورادار —
   الحالة مكتوبة في الشارة، وهذا يكفيه سطران وعدّاد */
.searching-panel:not(.decision):not(.searching-panel--merchant) {
    background: #E7F1EC;
    color: var(--cu-ink);
    box-shadow: none;
    padding: 14px 16px;
}

.searching-panel:not(.decision):not(.searching-panel--merchant)::before,
.searching-panel .searching-progress,
.searching-panel .typing-dots {
    display: none;
}

.searching-panel:not(.decision):not(.searching-panel--merchant) .radar {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
}

.searching-panel:not(.decision):not(.searching-panel--merchant) .radar .ring {
    border-color: rgba(4, 85, 58, 0.45);
}

.searching-panel:not(.decision):not(.searching-panel--merchant) .radar .radar-core {
    width: 32px;
    height: 32px;
    font-size: 15px;
    box-shadow: none;
}

.searching-panel:not(.decision):not(.searching-panel--merchant) .search-countdown {
    background: #fff;
    color: #04553A;
}

.searching-title {
    font-size: 16px;
}

.searching-sub {
    font-size: 14px;
}

body.dark-mode .searching-panel:not(.decision):not(.searching-panel--merchant) {
    background: #12352A;
    color: #F3F4F6;
}

body.dark-mode .searching-panel:not(.decision):not(.searching-panel--merchant) .search-countdown {
    background: #1F2937;
    color: #6EE7B7;
}

/* عرض الكابتن: السعر بلون الهوية لا الأخضر الفاتح (3.2:1) */
.offer-price-box {
    background: #E7F1EC;
    border-color: transparent;
}

.offer-price-box .val,
.offer-price-box .lbl {
    color: #04553A;
}

.offer-meta {
    font-size: 13px;
}

/* الدفع للمحل: خطوتان مرقّمتان، والمبلغ بالحبر لا بالأحمر */
.cu-pay {
    background: #FDF6E3;
    border-radius: 12px;
    padding: 14px;
    color: var(--cu-ink);
}

.cu-pay-title {
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cu-pay-title .bi {
    color: #8A6212;
}

.cu-pay-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    margin: 8px 0;
    line-height: 1.6;
}

.cu-pay-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #8A6212;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cu-pay-note {
    margin-top: 10px;
    font-size: 13px;
    color: var(--cu-ink-2);
}

.cu-pay .upload-receipt-btn {
    min-height: 48px;
    background: #fff;
}

body.dark-mode .cu-pay {
    background: #3A2E12;
    color: #F3F4F6;
}

body.dark-mode .cu-pay .upload-receipt-btn {
    background: transparent;
}

.of-tab .cnt {
    font-size: 12.5px;
}

/* ============================================================
   الإشعارات (notifications.html وحدها تحمّل هذا الملف — الكابتن
   والتاجر يتشاركان notifications-ui ولا يمسّهم هذا القسم)
   ============================================================ */

/* المرشّحات بحجم إصبع، والمضغوط أخضر الهوية مسطّحاً لا تدرّجاً نحو الأزرق */
.wn-chip {
    min-height: 44px;
    font-size: 15px;
}

.wn-chip[aria-pressed="true"] {
    background: #04553A;
    box-shadow: none;
}

.wn-chip .wn-chip-count {
    font-size: 12.5px;
}

/* «علّم الكل مقروء» إجراءٌ ثانوي: رابطٌ لا زرٌّ محدّد */
.wn-mark-all {
    min-height: 44px;
    border: 0;
    background: none;
    box-shadow: none;
    color: #04553A;
    font-size: 14px;
}

.wn-mark-all:disabled {
    display: none;
}

body.dark-mode .wn-mark-all {
    color: #6EE7B7;
}

/* عنوان المجموعة نصٌّ لا كبسولة */
.wn-wrap .wn-group-title {
    background: none;
    padding: 0;
    margin: 20px 4px 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cu-ink-2);
}

body.dark-mode .wn-wrap .wn-group-title {
    background: none;
}

.wn-item {
    border-radius: 16px;
    border-color: var(--cu-line);
    box-shadow: 0 1px 2px rgba(19, 32, 26, 0.06);
    min-height: 72px;
}

/* الأيقونة: لونٌ واحد هادئ — تسع عائلات بتدرّجات كانت تسبق العنوان للعين.
   الاستثناءان: الأحمر لما تعطّل، والكهرماني لما ينتظر منك فعلاً */
.wn-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 18px;
    box-shadow: none;
    background: #E7F1EC !important;
    color: #04553A !important;
}

.wn-icon[data-family="danger"] {
    background: #FDECEA !important;
    color: #B42318 !important;
}

.wn-icon[data-family="warn"] {
    background: #FDF6E3 !important;
    color: #8A6212 !important;
}

body.dark-mode .wn-icon {
    background: #12352A !important;
    color: #6EE7B7 !important;
}

body.dark-mode .wn-icon[data-family="danger"] {
    background: #3B1A1A !important;
    color: #FCA5A5 !important;
}

body.dark-mode .wn-icon[data-family="warn"] {
    background: #3A2E12 !important;
    color: #FCD34D !important;
}

.wn-item .wn-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--cu-ink);
}

.wn-item .wn-msg {
    font-size: 15px;
    color: var(--cu-ink-2);
    line-height: 1.5;
}

/* الوقت نصٌّ مقروء لا كبسولة رمادية (2.3:1) */
.wn-item .wn-time {
    font-size: 13px;
    color: var(--cu-ink-2);
    background: none;
    padding: 0;
}

/* غير المقروء: نقطةٌ وعنوانٌ عريض وحافة — الصبغة الخفيفة وحدها تختفي تحت الشمس */
.wn-item.is-unread {
    background: var(--cu-surface);
}

.wn-item.is-unread .wn-title {
    font-weight: 800;
}

.wn-item.is-unread .wn-title::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #04553A;
    margin-inline-end: 7px;
    vertical-align: middle;
}

.wn-item.is-unread::before {
    background: #04553A;
    width: 4px;
}

body.dark-mode .wn-item.is-unread .wn-title::before,
body.dark-mode .wn-item.is-unread::before {
    background: #6EE7B7;
}

/* ============================================================
   التسوّق — قرار اللجنة (الجولة الثالثة)
   ============================================================ */

.section-label {
    font-size: 17px;
    color: var(--cu-ink);
    margin: 20px 0 10px;
}

.section-label::after {
    display: none;
}

.featured-head {
    font-size: 17px;
    color: var(--cu-ink);
}

/* «ما لقيت محلك؟» بديلٌ لا بداية: صفٌّ فاتح محدَّد بدل كتلةٍ خضراء داكنة
   تسبق الأقسام والمحلات للعين */
.errand-promo {
    background: var(--cu-surface);
    color: var(--cu-ink);
    border: 1.5px solid var(--cu-line);
    box-shadow: none;
    padding: 12px 14px;
}

.errand-promo-icon {
    background: #E7F1EC;
    color: #04553A;
}

.errand-promo-sub {
    font-size: 14px;
    opacity: 1;
    color: var(--cu-ink-2);
}

.errand-promo-arrow {
    color: var(--cu-ink-2);
}

body.dark-mode .errand-promo {
    background: #1F2937;
    border-color: #374151;
    color: #F3F4F6;
}

/* الأقسام: أيقوناتٌ كبيرة باسمٍ تحتها، صفٌّ يُسحب أفقياً — نمط تطبيقات
   التوصيل. الكبسولة الصغيرة كانت تُقرأ نصّاً لا تُلتقط بالعين */
.cats-grid {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 4px 16px 10px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cats-grid::-webkit-scrollbar {
    display: none;
}

.cats-grid {
    align-items: flex-start;
}

.cats-grid .cat-chip {
    justify-content: flex-start;
    flex: 0 0 76px;
    width: 76px;
    height: auto;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
}

.cats-grid .cat-chip:hover,
.cats-grid .cat-chip:active,
.cats-grid .cat-chip.active {
    transform: none;
    box-shadow: none;
    background: none;
}

.cats-grid .cat-chip .chip-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    font-size: 28px;
    box-shadow: none;
    background: #E7F1EC !important;
    color: #04553A;
    transition: background-color .18s ease, color .18s ease, transform .12s ease;
}

.cats-grid .cat-chip:active .chip-icon {
    transform: scale(0.94);
}

.cats-grid .cat-chip .chip-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cu-ink);
    max-width: 76px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cats-grid .cat-chip.active .chip-icon {
    background: #04553A !important;
    color: #fff;
    filter: none;
}

.cats-grid .cat-chip.active .chip-label {
    color: #04553A;
}

.cats-grid .cat-chip:focus-visible {
    outline: none;
}

.cats-grid .cat-chip:focus-visible .chip-icon {
    outline: 3px solid #04553A;
    outline-offset: 2px;
}

/* dark-mode.css يكسو الشريحة القديمة بطاقةً (!important) — البلاطة الآن أيقونةٌ واسمٌ بلا إطار */
body.dark-mode .cats-grid .cat-chip,
body.dark-mode .cats-grid .cat-chip.active {
    background: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

body.dark-mode .cats-grid .cat-chip.active .chip-label {
    color: #6EE7B7 !important;
}

body.dark-mode .cats-grid .cat-chip .chip-icon {
    background: #12352A !important;
    color: #6EE7B7;
}

body.dark-mode .cats-grid .cat-chip.active .chip-icon {
    background: #6EE7B7 !important;
    color: #0F1714;
}

body.dark-mode .cats-grid .cat-chip .chip-label {
    color: #F3F4F6 !important;
}

/* «قريب منك»: بطاقات غلافٍ تُسحب أفقياً، تُظهر حافة البطاقة التالية فيعرف
   العميل أن هناك المزيد */
.nearby-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    margin: 0 -16px 8px;
    padding: 2px 16px 12px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.nearby-row::-webkit-scrollbar {
    display: none;
}

.nearby-card {
    position: relative;
    flex: 0 0 72%;
    max-width: 280px;
    scroll-snap-align: start;
    background: var(--cu-surface);
    border: 1px solid var(--cu-line);
    border-radius: 16px;
    overflow: hidden;
}

.nearby-hit {
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nearby-hit:active .nearby-cover {
    opacity: .9;
}

.nearby-hit:focus-visible {
    outline: 3px solid #04553A;
    outline-offset: -3px;
}

.nearby-cover {
    position: relative;
    height: 124px;
    overflow: hidden;
}

.nearby-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nearby-cover .place-card-ph {
    font-size: 44px;
}

.nearby-body {
    padding: 10px 12px 12px;
}

.nearby-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--cu-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.nearby-body .place-card-meta {
    font-size: 13.5px;
    color: var(--cu-ink-2);
    margin: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}

.nearby-body .meta-item.rating {
    color: var(--cu-ink);
}

.nearby-body .meta-item.rating i {
    color: #E0A100;
}

.nearby-body .meta-item.is-new {
    color: #04553A;
    background: none;
    padding: 0;
    font-size: 13.5px;
}

/* القلب فوق الغلاف بحجم إصبع */
.nearby-card .place-fav-btn {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    bottom: auto;
    background: rgba(255, 255, 255, 0.94);
}

body.dark-mode .nearby-card {
    background: #1F2937;
    border-color: #374151;
}

body.dark-mode .nearby-name,
body.dark-mode .nearby-body .meta-item.rating {
    color: #F3F4F6;
}

@media (prefers-reduced-motion: reduce) {
    .nearby-row,
    .cats-grid {
        scroll-behavior: auto;
    }
}

/* المحلات: صفوفٌ في عمودٍ واحد */
#places-list,
.featured-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}

.place-card.place-row {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid var(--cu-line);
    box-shadow: 0 1px 2px rgba(19, 32, 26, 0.06);
}

.place-card.place-row:active {
    transform: none;
}

.place-row .place-card-cover {
    width: 64px;
    height: 64px;
    border-radius: 12px;
}

.place-row .place-card-ph {
    font-size: 26px;
}

.place-row:hover .place-card-cover img {
    transform: none;
}

.place-row .place-card-body {
    padding: 0;
    min-width: 0;
}

.place-row .place-card-name {
    font-size: 16px;
    min-height: 0;
    margin-bottom: 4px;
    color: var(--cu-ink);
    -webkit-line-clamp: 1;
}

.place-row .place-card-meta {
    font-size: 13.5px;
    color: var(--cu-ink-2);
    margin-bottom: 2px;
}

.place-row .place-card-meta .meta-item.rating {
    color: var(--cu-ink);
}

.place-row .rating-count {
    color: var(--cu-ink-2);
    font-weight: 600;
}

.place-row .place-card-meta .meta-item.is-new {
    font-size: 13px;
    background: none;
    padding: 0;
    color: #04553A;
}

.place-open.is-open {
    color: #04553A;
}

.place-open.is-closed {
    color: #B42318;
}

body.dark-mode .place-open.is-open {
    color: #6EE7B7;
}

body.dark-mode .place-open.is-closed {
    color: #FCA5A5;
}

/* القلب في الصف نفسه، بحجم إصبع */
.place-row .place-fav-btn {
    position: static;
    box-shadow: none;
    background: transparent;
    border: 1.5px solid var(--cu-line);
}

.place-row .place-card-menu-btn {
    margin-top: 6px;
    min-height: 40px;
    background: transparent;
    border-color: var(--cu-line);
    color: var(--cu-ink);
}

body.dark-mode .place-card.place-row {
    border-color: #374151;
}

/* ── «كل المحلات»: زرّ الفلترة ولوحته ─────────────────────────────────── */
.featured-head--tools {
    justify-content: space-between;
}

.shop-filter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1.5px solid var(--cu-line);
    background: var(--cu-surface);
    color: var(--cu-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.shop-filter-btn .bi {
    font-size: 16px;
    color: #04553A;
}

.shop-filter-btn.is-on {
    background: #E7F1EC;
    border-color: #04553A;
}

.shop-filter-dot {
    position: absolute;
    top: 6px;
    inset-inline-end: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #04553A;
}

.shop-filter-bar {
    margin: 0 0 12px;
    animation: cuDrop .18s ease-out;
}

.shop-filter-search {
    position: relative;
    margin-bottom: 10px;
}

.shop-filter-search .bi {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cu-ink-2);
    pointer-events: none;
}

.shop-filter-search input {
    width: 100%;
    min-height: 48px;
    padding: 0 42px 0 14px;
    border-radius: 14px;
    border: 1.5px solid var(--cu-line);
    background: var(--cu-surface);
    color: var(--cu-ink);
    font: inherit;
    font-size: 16px;
}

.shop-filter-search input:focus {
    outline: none;
    border-color: #04553A;
    box-shadow: 0 0 0 3px rgba(4, 85, 58, 0.15);
}

.shop-filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

.shop-filter-chips::-webkit-scrollbar {
    display: none;
}

.sf-chip {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1.5px solid var(--cu-line);
    background: var(--cu-surface);
    color: var(--cu-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.sf-chip[aria-pressed="true"] {
    background: #04553A;
    border-color: #04553A;
    color: #fff;
}

.sf-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--cu-ink-2);
}

.sf-empty > .bi {
    font-size: 28px;
    color: var(--cu-ink-2);
}

.sf-empty-title {
    margin-top: 8px;
    font-weight: 800;
    font-size: 16px;
    color: var(--cu-ink);
}

.sf-empty-text {
    font-size: 14px;
    margin: 4px 0 14px;
}

.sf-empty-btn {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: #04553A;
    color: #fff;
    font: inherit;
    font-weight: 700;
}

body.dark-mode .shop-filter-btn,
body.dark-mode .sf-chip,
body.dark-mode .shop-filter-search input {
    background: #1F2937;
    border-color: #374151;
    color: #F3F4F6;
}

body.dark-mode .shop-filter-btn.is-on {
    background: #12352A;
    border-color: #6EE7B7;
}

body.dark-mode .sf-chip[aria-pressed="true"] {
    background: #6EE7B7;
    border-color: #6EE7B7;
    color: #0F1714;
}

/* ============================================================
   التنقّل: انتقالٌ ناعم بين الصفحات وداخلها
   ============================================================ */

/* بين الصفحات: تلاشٍ قصير بدل الوميض الأبيض (View Transitions —
   كروم/WebView الحديث؛ المتصفّح الذي لا يدعمه يتجاهله بلا ضرر) */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .18s;
    animation-timing-function: ease-out;
}

/* شريط التنقّل السفلي ثابتٌ بين الصفحات فلا يومض مع التلاشي */
.mobile-nav-glass {
    view-transition-name: wj-bottom-nav;
}

@keyframes cuDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@keyframes cuEnter {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: none; }
}

/* داخل التسوّق: عرض القسم ينزلق داخلاً كصفحة، والرجوع منه يعيد الأقسام */
#places-view:not(.d-none),
#categories-view:not(.d-none) {
    animation: cuEnter .2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }

    #places-view:not(.d-none),
    #categories-view:not(.d-none),
    .shop-filter-bar {
        animation: none;
    }
}

/* ── الاستلام أخضر والتسليم ذهبي — في الأزرار والدبابيس والبطاقات معاً ── */
.cu-stop-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid;
}

.cu-stop-btn--pickup {
    background: #E7F1EC;
    color: #04553A;
    border-color: #B9D6C8;
}

.cu-stop-btn--dropoff {
    background: #FDF6E3;
    color: #8A6212;
    border-color: #EBD9A8;
}

body.dark-mode .cu-stop-btn--pickup {
    background: #12352A;
    color: #6EE7B7;
    border-color: #1F5A45;
}

body.dark-mode .cu-stop-btn--dropoff {
    background: #3A2E12;
    color: #FCD34D;
    border-color: #5C4A1E;
}

#multi-stop-actions {
    gap: 8px !important;
}

/* دبّوس التسليم ونقطته في الخط الزمني بالذهبي كذلك */
#home-section .route-inputs .input-icon.text-danger {
    color: #8A6212 !important;
}

#home-section .dropoff-dot {
    background: #BF8B1F;
    box-shadow: 0 0 0 2px #BF8B1F;
}

body.dark-mode #home-section .route-inputs .input-icon.text-danger {
    color: #FCD34D !important;
}

/* ============================================================
   شاشة تحديد الموقع (الخريطة)
   ============================================================ */

.wj-addr-label {
    font-size: 13px;
    color: var(--cu-ink-2);
}

#map-address-preview {
    font-size: 16px;
    color: var(--cu-ink);
    transition: opacity .15s ease;
}

.wj-idle-hint {
    color: var(--cu-ink-2);
    font-weight: 600;
    font-size: 15px;
}

/* أثناء الحركة: العنوان القديم يخفت (لم يعد صحيحاً) والتأكيد يهدأ —
   يعودان فور الاستقرار. يمنع تأكيد عنوانٍ لم يعد تحت الدبوس */
.wj-sheet.is-moving #map-address-preview {
    opacity: .35;
}

.wj-sheet.is-moving .wj-confirm {
    opacity: .6;
}

.wj-confirm {
    background: #04553A;
    box-shadow: 0 4px 14px rgba(4, 85, 58, .28);
    transition: opacity .15s ease, transform .16s ease;
}

.wj-confirm:disabled,
.wj-confirm.disabled {
    background: #9AA6A0;
    box-shadow: none;
}

/* لون البطاقة يتبع الطرف: أخضر للاستلام وذهبي للتوصيل (كما في النموذج) */
.wj-sheet[data-mode="dropoff"] .wj-addr-ico {
    background: #FDF6E3;
    color: #8A6212;
}

.wj-sheet[data-mode="dropoff"] .wj-confirm:not(:disabled) {
    background: #04553A;
}

/* اختيارٌ بضغطة */
.wj-quick-picks {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -16px 12px;
    padding: 0 16px 2px;
    scrollbar-width: none;
}

.wj-quick-picks::-webkit-scrollbar {
    display: none;
}

.wj-quick-picks:empty {
    display: none;
}

.wj-pick {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1.5px solid var(--cu-line);
    background: var(--cu-surface);
    color: var(--cu-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.wj-pick .bi {
    color: #04553A;
}

.wj-pick:active {
    background: #E7F1EC;
}

/* «الصق رابط خرائط جوجل»: مساعدةٌ ثانوية بلون الهوية لا أزرق الروابط */
#mapLinkBox summary {
    color: #04553A !important;
    font-size: 14px !important;
    min-height: 40px;
    display: flex;
    align-items: center;
}

/* لافتة التنبيه أعلى الخريطة: نصٌّ يُقرأ */
#geofence-warning-banner {
    font-size: 14px !important;
    background: #B42318 !important;
}

/* ── الوضع الليلي: البطاقة كانت بيضاء والنصّ يُجبَر فاتحاً — فيختفي ── */
body.dark-mode .wj-sheet {
    background: #1F2937 !important;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, .5);
}

body.dark-mode .wj-sheet-grip {
    background: #4B5563;
}

body.dark-mode .wj-addr-label,
body.dark-mode .wj-idle-hint {
    color: #C3CBD4 !important;
}

body.dark-mode #map-address-preview,
body.dark-mode #map-address-preview span {
    color: #F9FAFB !important;
}

body.dark-mode .wj-addr-ico {
    background: #12352A;
    color: #6EE7B7;
}

body.dark-mode .wj-sheet[data-mode="dropoff"] .wj-addr-ico {
    background: #3A2E12;
    color: #FCD34D;
}

body.dark-mode .wj-pick {
    background: #111827;
    border-color: #374151;
    color: #F3F4F6 !important;
}

body.dark-mode .wj-pick .bi {
    color: #6EE7B7;
}

body.dark-mode #mapLinkBox summary {
    color: #6EE7B7 !important;
}

body.dark-mode .wj-confirm,
body.dark-mode .wj-confirm span {
    color: #fff !important;
}

/* شرائح الشريط العلوي (رجوع، «حدّد…»، المدينة) والبحث في الوضع الليلي */
body.dark-mode .wj-chip {
    background: #1F2937 !important;
    color: #F3F4F6 !important;
}

body.dark-mode #map-search-input {
    background: #1F2937 !important;
    color: #F9FAFB !important;
}

body.dark-mode #map-search-results {
    background: #1F2937 !important;
}

body.dark-mode #map-search-results div {
    color: #E5E7EB !important;
}

@media (prefers-reduced-motion: reduce) {
    #map-address-preview,
    .wj-confirm {
        transition: none;
    }
}

body.dark-mode #mapLinkBox,
body.dark-mode #mapLinkBox summary {
    background: transparent !important;
}