/* الزق ده في أول سطر في ملف style.css */
:root {
    --safe-top: 42px; /* مساحة احتياطية لو الموبايل مقراش الكود اللي تحت */
}

body {
    position: relative;
    /* الكود ده بيجبر التطبيق كله ينزل تحت الساعة */
    margin-top: env(safe-area-inset-top, var(--safe-top)) !important;
    border-top: 0px solid transparent; /* خدعة عشان المارجن يشتغل صح */
}

.app-header {
    /* بنثبت الهيدر في مكانه الجديد بعد النزول */
    top: 0 !important;
}
:root {
    --primary: #C5A059;
    --primary-dark: #A68444;
    --secondary: #0F172A;
    --header-bg: #0F172A;
    --app-bg: #FDFBF7;
    --card-bg: #FFFFFF;
    --text-dark: #111111;
    --text-muted: #666666;
    --border-clr: #EEEEEE;
}
/* كود زرار الغلق في الصور - وضعه فوق لضمان التشغيل */
/* سيطرة كاملة لزرار القفل */
/* سيطرة كاملة لزرار القفل في الصور فقط (تم حل المشكلة) */
.image-zoom-popup .swal2-close {
    display: flex !important;
    position: fixed !important;
    top: 32px !important;
    right: 21px !important;
    z-index: 2000000 !important;
    color: white !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 2px solid white !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 32px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.image-zoom-popup .swal2-image {
    max-height: 80vh !important;
    object-fit: contain !important;
    margin-top: 64px !important;
}

.dark-theme {
    --app-bg: #0B141A;
    --card-bg: #1F2C34;
    --header-bg: #111B21;
    --border-clr: #2A3942;
    --text-dark: #E9EDEF;
    --text-muted: #8696A0;
    --primary: #D4AF37;
}

* {
    margin: 0; padding: 0; box-sizing: border-box; font-family: 'Cairo', sans-serif;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
input, textarea, select { user-select: auto; }
img { pointer-events: auto; -webkit-user-drag: none; }

::-webkit-scrollbar { display: none; }

/* ======================================================= */
/* 1. التطبيق يفرش 100% على أي شاشة بدون حدود (مع حل اختفاء الشريط السفلي) */
/* ======================================================= */
html, body {
    width: 100% !important; 
    height: 100dvh !important; /* الحل السحري لمشكلة شريط متصفح الموبايل */
    margin: 0 !important; padding: 0 !important;
    background: var(--app-bg) !important;
    overflow: hidden; overscroll-behavior-y: none;
}
.dark-theme body { background: #000 !important; }

.app-container {
    width: 100% !important; 
    max-width: 100% !important; /* فرش كامل بدون تقييد */
    height: 100% !important; 
    background: var(--app-bg); position: relative; display: flex; flex-direction: column; 
    overflow: hidden; margin: 0; border: none !important;
}

.app-screen {
    flex: 1; display: flex; flex-direction: column; height: 100%;
    overflow: hidden; background: var(--app-bg); position: relative;
}

/* زودنا الـ padding عشان التطبيق يتنفس وميلزقش في الحواف */
.scrollable {
    flex: 1; padding: 15px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column; width: 100%;
}
.pb-100 { padding-bottom: 85px !important; }

/* ======================================================= */
/* 2. الهيدر والشريط السفلي (مساحات البطارية والواي فاي) */
/* ======================================================= */
.app-header { 
    background: var(--header-bg); padding: 10px 15px; padding-top: max(10px, env(safe-area-inset-top)) !important; 
    /* إجبار الهيدر على تفادي شريط البطارية */
    padding-top: calc(32px + env(safe-area-inset-top, 0px)) !important; 
    color: white; z-index: 100; border-bottom: 2px solid var(--primary); 
    box-shadow: 0 2px 11px rgba(0,0,0,0.2); flex-shrink: 0; width: 100%;
}
.header-content { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.logo-wrapper { display: flex; align-items: center; gap: 8px; }
.main-logo { width: 30px; height: 30px; object-fit: contain; }
.brand-title { font-family: 'Reem Kufi', sans-serif; font-size: 14px; color: var(--primary); margin-top: 3px; }
.header-icons { display: flex; gap: 13px; align-items: center; }
.header-icon-btn { font-size: 17px; color: var(--primary); cursor: pointer; position: relative;}
.badge { position: absolute; top: -4px; right: -6px; background: #E74C3C; color: white; font-size: 10px; padding: 2px 5px; border-radius: 50%; font-weight: bold; border: 1px solid var(--header-bg);}

.bottom-nav { 
    position: fixed; /* ثابت إجبارياً حتى لا يختفي */
    bottom: 0; left: 0; right: 0; width: 100%; 
    height: calc(58px + env(safe-area-inset-bottom, 8px)); 
    padding-bottom: env(safe-area-inset-bottom, 8px);
    background: var(--header-bg); display: flex; justify-content: space-around; align-items: center; 
    border-top: 2px solid var(--primary); z-index: 10000; 
    border-top-left-radius: 19px; border-top-right-radius: 19px; 
}
.nav-item { display: flex; flex-direction: column; align-items: center; color: #AAB7B8; font-size: 11px; font-weight: 800; cursor: pointer; width: 25%; transition: 0.2s; padding-top: 5px;}
.nav-item i { font-size: 17px; margin-bottom: 3px; transition: 0.3s;}
.nav-item:active { transform: scale(0.9); }
.nav-item.active { color: var(--primary); }
.nav-item.active i { transform: translateY(-2px) scale(1.1); color: var(--primary); }

.screen-header { padding: 9px 13px; padding-top: max(9px, env(safe-area-inset-top)); display: flex; align-items: center; background: var(--card-bg); border-bottom: 1px solid var(--border-clr); flex-shrink: 0; width: 100%;}
.screen-header h2 { font-size: 12px; margin-right: 13px; font-weight: 900; color: var(--primary-dark); }
.back-btn { cursor: pointer; margin-left: 13px; font-size: 16px; color: var(--primary); transition: 0.2s;}
.back-btn:active { transform: translateX(4px); }

/* ======================================================= */
/* 3. شريط مقدم الخدمة وتوسيط الرسائل */
/* ======================================================= */
.provider-banner {
    background-color: #E74C3C !important; color: #FFF !important; text-align: center;
    padding: 6px; font-size: 11px; font-weight: bold; width: 100%; flex-shrink: 0; z-index: 10;
}

.center-message {
    flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; color: var(--text-muted); font-weight: bold; height: 100%; width: 100%; min-height: 50vh;
}
.center-message i { font-size: 42px; color: var(--border-clr); margin-bottom: 13px; }

/* ======================================================= */
/* 4. حل كارثة البانر والشبكات (منع المط على الكمبيوتر) */
/* ======================================================= */
.search-section { padding: 11px 21px 0; flex-shrink: 0; width: 100%; }
.search-bar { background: var(--card-bg); border-radius: 13px; display: flex; align-items: center; padding: 10px 15px; border: 1px solid var(--border-clr); width: 100%;}
.search-bar input { border: none; outline: none; width: 100%; margin-right: 8px; font-size: 13px; background: transparent; color: var(--text-dark); font-weight: 600;}
.search-bar i { color: var(--primary); font-size: 15px;}

.vip-slider-container { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 21px; flex-shrink: 0; }
.vip-slider { display: flex; overflow-x: auto; gap: 8px; scroll-snap-type: x mandatory; border-radius: 13px; scroll-behavior: smooth;}
.vip-slide { 
    flex: 0 0 100%; scroll-snap-align: center; border-radius: 13px; overflow: hidden; position: relative; 
    height: 148px; /* طول ثابت مستحيل يغطي الشاشة */
    border: 1px solid var(--border-clr); 
}
.vip-slide img { width: 100%; height: 100%; object-fit: cover; }

/* الكروت تفرش حسب حجم الشاشة بس بحد أقصى عشان متتمطش */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 7px; width: 100%; max-width: 760px; margin: 0 auto;}
.service-card { background: var(--card-bg); border-radius: 13px; padding: 9px 4px; text-align: center; border: 1px solid var(--border-clr); box-shadow: 0 1px 3px rgba(0,0,0,0.02); cursor: pointer; transition: 0.2s;}
.service-card:active { transform: scale(0.95); }
.icon-box { width: 36px; height: 36px; border-radius: 11px; margin: 0 auto 8px; display: flex; justify-content: center; align-items: center; font-size: 16px; background: rgba(197, 160, 89, 0.1); color: var(--primary);}
.icon-box.gold-box { background: var(--header-bg); color: var(--primary); }
.service-card span { font-weight: 900; font-size: 11px; color: var(--text-dark); }

.chips-container { display: flex; gap: 6px; overflow-x: auto; padding: 5px 21px 8px; white-space: nowrap; width: 100%; max-width: 800px; margin: 0 auto; flex-shrink: 0;}
.chip { padding: 5px 13px; background: var(--card-bg); border: 1px solid var(--border-clr); border-radius: 13px; font-size: 11px; font-weight: bold; color: var(--text-muted); cursor: pointer;}
.chip.active { background: var(--primary); color: #111; border-color: var(--primary); }

/* ======================================================= */
/* 5. النماذج والإدخالات (تحديد أقصى عرض) */
/* ======================================================= */
.ui-card, .form-step { 
    background: var(--card-bg); padding: 12px; border-radius: 13px; border: 1px solid var(--border-clr); 
    color: var(--text-dark); margin-bottom: 10px; width: 100%; max-width: 440px; margin-left: auto; margin-right: auto;
}
.custom-input { width: 100%; padding: 8px 12px; border: 1px solid var(--border-clr); border-radius: 8px; font-size: 11px; font-weight: 600; background: var(--app-bg); color: var(--text-dark); margin-bottom: 8px; outline: none;}
.custom-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.15);}

.pass-wrapper { position: relative; width: 100%; }
.eye-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--text-muted); font-size: 14px; padding: 5px;}

.primary-btn { background: var(--primary); color: #111; border: none; padding: 8px; border-radius: 11px; font-weight: 900; font-size: 12px; width: 100%; cursor: pointer; transition: 0.2s;}
.primary-btn:active { transform: scale(0.96); }
.primary-btn:disabled { background: var(--border-clr); color: var(--text-muted); pointer-events: none;}

.secondary-btn { background: transparent; color: var(--text-dark); border: 2px solid var(--border-clr); padding: 6px; border-radius: 8px; font-weight: bold; font-size: 11px; width: 100%; cursor: pointer; transition: 0.2s;}
.secondary-btn:active { background: var(--border-clr); transform: scale(0.96);}

.btn-group { display: flex; gap: 8px; width: 100%;} .btn-group button { flex: 1; }
.file-label { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border: 2px dashed var(--primary); border-radius: 8px; font-weight: bold; color: var(--text-dark); background: rgba(197, 160, 89, 0.05); font-size: 12px; cursor: pointer; transition: 0.2s; width: 100%;}

/* ======================================================= */
/* 6. Profile / Auth / Cart / كروت المنتجات */
/* ======================================================= */
.auth-card { background: var(--card-bg); border: 1px solid var(--border-clr); border-radius: 13px; padding: 16px 11px; text-align: center; cursor: pointer; transition: 0.2s;}
.auth-card:active { transform: scale(0.96); }
.auth-icon { font-size: 30px; margin-bottom: 8px; }
.profile-bg { background: linear-gradient(135deg, var(--header-bg), #1A2530); border:none;}
.settings-item { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border-clr); font-weight: 800; color: var(--text-dark); font-size: 12px; width: 100%;}
.settings-item:last-child { border-bottom: none; }

.cart-item { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border-clr); width: 100%;}
.cart-item:last-child { border-bottom: none; }
.cart-item-info { flex-grow: 1; margin-right: 11px; line-height: 1.4;}
.cart-item-controls { display: flex; align-items: center; gap: 11px; background: var(--app-bg); padding: 5px; border-radius: 6px; border: 1px solid var(--border-clr); }
.cart-btn { background: var(--card-bg); border: 1px solid var(--border-clr); width: 25px; height: 25px; border-radius: 4px; color: var(--text-dark); font-weight: bold; cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 12px;}
.cart-btn:active { background: var(--border-clr); transform: scale(0.9); }

.product-card { background: var(--card-bg); border-radius: 13px; padding: 11px; margin-bottom: 11px; border: 1px solid var(--border-clr); display: flex; gap: 11px; align-items: center; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto;}
.product-card img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover;}
#pd-image { width: 64px !important; height: 64px !important; border-radius: 11px; object-fit: cover; margin-bottom: 8px; border: 2px solid var(--border-clr); }

.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 7px; width: 100%; margin-top: 11px; max-width: 560px; margin-left: auto; margin-right: auto;}
.menu-item-card { background: var(--card-bg); border: 1px solid var(--border-clr); border-radius: 11px; padding: 8px; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; box-shadow: 0 1px 3px rgba(0,0,0,0.02);}
.menu-item-card img { width: 100%; height: 80px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--border-clr);}
.menu-item-card h3 { font-size: 11px; color: var(--text-dark); margin-bottom: 4px; font-weight:bold;}
.menu-item-card .price { color: var(--primary-dark); font-weight: 900; font-size: 12px; margin-bottom: 8px;}

/* ======================================================= */
/* 7. تنسيقات النوافذ المنبثقة (Modals) */
/* ======================================================= */
#clientItemModal { justify-content: flex-end; padding: 0; }
#clientItemModal .ui-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; animation-duration: 0.3s; }
.size-radio, .extra-checkbox { width: 15px; height: 15px; accent-color: #27AE60; cursor: pointer; margin-left: 8px; }
.modal-option-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--border-clr); }
.modal-option-row:last-child { border-bottom: none; }

/* splash & swal */
.splash-container { position: fixed; inset: 0; background: var(--header-bg); z-index: 999999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.5s;}
.splash-logo { width: 74px; margin-bottom: 16px;}
.full-overlay { position: fixed; inset: 0; background: var(--app-bg); z-index: 100000; display: flex; flex-direction: column; justify-content: center; align-items: center;}

.custom-swal { width: 85% !important; max-width: 280px !important; border-radius: 15px !important; padding: 1.2em !important; font-family: 'Cairo' !important; background: var(--card-bg) !important;}
.custom-swal .swal2-title { font-size: 16px !important; color: var(--text-dark) !important; font-weight: 900 !important;}
.custom-swal .swal2-html-container { font-size: 12px !important; color: var(--text-muted) !important; font-weight: bold !important;}
.custom-swal .swal2-confirm { background-color: var(--primary) !important; color: #111 !important; border-radius: 8px !important; font-weight:bold !important; padding: 8px 19px !important; font-size: 13px !important; }

/* ========================================================= */
/* 8. تصميم الشات وحل مشكلة لخبطة رسالة الأوردر */
/* ========================================================= */
/* Clean WhatsApp-style background — no decorations */
.chat-bg {
    display: flex; flex-direction: column; height: 100%; width: 100%;
    background-color: #EFEAE2 !important;
}
.dark-theme .chat-bg { background-color: #0B141A !important; }

/* Avatar and info inside fixed header */
.chat-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; margin-right: 11px; margin-left: 11px; border: 2px solid var(--primary);}
.chat-info { display: flex; flex-direction: column; flex-grow: 1; }
.chat-info h2 { color: white !important; font-size: 14px !important; margin: 0 !important; font-weight: bold !important;}

/* Legacy class kept for compatibility — scroll area is now #chatScrollArea */
.chat-messages-area { flex-grow: 1; overflow-y: auto; padding: 16px !important; display: flex; flex-direction: column; gap: 8px; width: 100%; }


.msg {
    padding: 8px 13px;
    border-radius: 12px;
    font-size: 13px; max-width: 82%;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    line-height: 1.55; font-weight: 500;
    white-space: pre-wrap; direction: rtl; unicode-bidi: plaintext;
    margin-bottom: 6px;
    transition: none;
}
/* Message grouping: consecutive same-sender messages get tighter spacing */
.msg.msg-group-start { margin-bottom: 2px; }
.msg.msg-group-mid   { margin-bottom: 2px; border-radius: 8px !important; }
.msg.msg-group-end   { margin-bottom: 8px; }

.msg.me { align-self: flex-end; background-color: #E7FFDB; color: #111; border-bottom-right-radius: 4px; }
.dark-theme .msg.me { background-color: #005C4B; color: #E9EDEF; }
.msg.other { align-self: flex-start; background-color: #FFFFFF; color: #111; border-bottom-left-radius: 4px; }
.dark-theme .msg.other { background-color: #202C33; color: #E9EDEF; }

/* Caption inside image bubbles */
.msg-caption { display: block; font-size: 12px; margin-top: 6px; padding-top: 4px; border-top: 1px solid rgba(0,0,0,0.08); white-space: pre-wrap; }

.msg-time { display: block; font-size: 10px; color: #888; text-align: left; margin-top: 4px; font-weight: normal; opacity: 0.7; }
.dark-theme .msg-time { color: #8696A0; }

/* Typing indicator (UI-only, no Firebase) */
.chat-typing-indicator { font-size: 11px; color: var(--text-muted, #888); padding: 2px 8px; font-style: italic; min-height: 18px; }

.chat-quick-replies { flex-shrink: 0; background: transparent !important; padding: 8px 16px !important; display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; width: 100%; max-width: 600px; margin: 0 auto;}
.chat-quick-replies .chip { border: 1px solid var(--primary); background: var(--card-bg); box-shadow: 0 1px 3px rgba(0,0,0,0.05); color: var(--primary-dark); padding: 5px 11px; font-size: 11px;}
.dark-theme .chat-quick-replies .chip { background: #2A3942; color: var(--primary); border:none;}

/* 8. تصميم الشات الفولاذي (نسخة الواتساب) وحل مشكلة الكيبورد */
/* ========================================================= */

/* Utilities */
.switch { position: relative; display: inline-block; width: 40px; height: 21px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-clr); transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 15px; width: 15px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2);}
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(19px); }

.d-none { display: none !important; }
.text-primary { color: var(--primary) !important; }
.text-danger { color: #E74C3C !important; }
.mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 11px; } .mb-15 { margin-bottom: 16px; } .mb-20 { margin-bottom: 21px; }
.mt-10 { margin-top: 11px; } .mt-15 { margin-top: 16px; } .mt-20 { margin-top: 21px; }
.pt-10 { padding-top: 11px; } .w-100 { width: 100%; } .text-center { text-align: center; }

/* شارة الطوارئ ومعرض الأعمال */
.emergency-card { border: 2px solid #E74C3C !important; box-shadow: 0 0 11px rgba(231, 76, 60, 0.3) !important; position: relative; }
.emergency-badge { position: absolute; top: -6px; left: -6px; background: #E74C3C; color: white; font-size: 10px; font-weight: bold; padding: 3px 8px; border-radius: 8px; animation: pulseRed 1.5s infinite; z-index: 10; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
@keyframes pulseRed {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

.gallery-img { width: 69px; height: 69px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-clr); cursor: pointer; flex-shrink: 0; }
.gallery-img:active { transform: scale(0.95); }
/* ========================================================= */
/* Chat Screen — Native Fixed Layout                          */
/* Header is fixed at top. Composer is fixed at bottom.      */
/* position:fixed elements track the VISUAL viewport,        */
/* which shrinks when the keyboard opens — exactly like      */
/* WhatsApp. No JS tricks needed.                             */
/* ========================================================= */
.chat-room-screen {
    /* The screen itself is a full-cover layer */
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    display: block !important;
    overflow: hidden !important;
    /* Background color for the chat */
    background-color: #EFEAE2;
    z-index: 1;
}
.dark-theme .chat-room-screen { background-color: #0B141A; }

/* Header: always at top, above keyboard and messages */
/* Scoped to #chat-room-screen — does NOT affect any other screen */
#chat-room-screen .chat-header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 100;
    flex-shrink: 0 !important;
    background: #0F172A !important;
    border-bottom: 1px solid var(--primary) !important;
    padding: env(safe-area-inset-top, 0px) 16px 11px 16px !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 11px) !important;
    color: white;
    width: 100%;
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
}
.dark-theme #chat-room-screen .chat-header { background: #202C33 !important; }

/* Message scroll area: fills space between fixed header and fixed composer */
/* Calculated dynamically via CSS variables set by JS on openChat           */
#chatScrollArea {
    position: absolute !important;
    top: var(--chat-header-h, 72px) !important;
    bottom: var(--chat-composer-h, 68px) !important;
    left: 0; right: 0;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 12px 8px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* Quick replies stay at the bottom of the scrollable area */
.chat-quick-replies {
    flex-shrink: 0 !important;
    padding: 5px 0 !important;
    margin-top: 6px !important;
}

/* Composer: fixed at bottom, always above keyboard on Android */
/* position:fixed on mobile tracks the VISUAL viewport bottom  */
/* When keyboard opens, visual viewport bottom moves up        */
/* Composer follows naturally — no JavaScript needed.          */
/* Scoped to #chat-room-screen — does NOT affect any other screen */
#chat-room-screen .chat-whatsapp-input-wrapper {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    flex-direction: row-reverse !important;
    width: 100% !important;
    background: var(--app-bg) !important;
    padding: 8px 13px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
    border-top: 1px solid var(--border-clr) !important;
    box-sizing: border-box !important;
    z-index: 99 !important;
}

/* زرار المايك - محمي من التصغير */
.whatsapp-mic-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important; 
    max-width: 48px !important;
    border-radius: 50% !important;
    background-color: #25D366 !important; 
    color: white !important;
    border: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 21px !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
}

/* مربع الإدخال */
.whatsapp-input-box {
    flex-grow: 1 !important;
    background: #FFFFFF !important;
    border-radius: 25px !important;
    display: flex !important;
    align-items: center !important;
    padding: 5px 16px !important;
    min-height: 48px !important;
    margin-left: 8px !important; 
    border: 1px solid var(--border-clr) !important;
}
.dark-theme .whatsapp-input-box { background: #2A3942 !important; border-color: transparent !important; }

/* حقل الكتابة */
.whatsapp-input {
    flex-grow: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 15px !important;
    color: #111 !important;
    padding: 0 8px !important;
    font-weight: 600 !important;
}

/* الأيقونات جوا المربع */
.chat-utility-icon {
    font-size: 21px !important;
    color: #8696A0 !important;
    cursor: pointer !important;
    padding: 0 6px !important;
}

/* ======================================================= */
/* 9. الإضافات الجديدة (سوق الفيروز، الفاتورة، وتكبير الصور) */
/* ======================================================= */

/* تأثير زجاجي لنافذة تكبير الصور */
#lightboxModal { backdrop-filter: blur(5px); transition: opacity 0.3s ease-in-out; }
#lightboxImg { box-shadow: 0 11px 32px rgba(0,0,0,0.7); border: 2px solid var(--primary); }

/* شكل جدول الفاتورة الشيك جوه الشات للمطاعم */
.chat-order-card { background: var(--card-bg); border: 2px dashed #27AE60; border-radius: 11px; padding: 11px; margin-top: 5px; max-width: 100%; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.chat-order-title { color: #27AE60; font-weight: 900; font-size: 13px; margin-bottom: 8px; text-align: center; border-bottom: 1px solid rgba(39, 174, 96, 0.2); padding-bottom: 5px; }
.invoice-table { width: 100%; border-collapse: collapse; margin-top: 5px; font-size: 12px; background: var(--app-bg); color: var(--text-dark); border-radius: 6px; overflow: hidden; border: 1px solid var(--border-clr); }
.invoice-table th { background: rgba(39, 174, 96, 0.1); color: var(--text-dark); padding: 6px; text-align: right; border-bottom: 1px solid var(--border-clr); }
.invoice-table td { padding: 6px; border-bottom: 1px solid var(--border-clr); text-align: right; font-weight: 600;}
.invoice-table tr:last-child td { border-bottom: none; }
.invoice-total { background: rgba(39, 174, 96, 0.2); font-weight: 900 !important; color: #27AE60 !important; }

/* شكل كروت المنتجات الشيك لسوق الفيروز */
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 9px; width: 100%; max-width: 560px; margin: 0 auto; padding-top: 11px;}
.market-item-card { background: var(--card-bg); border: 1px solid var(--border-clr); border-radius: 13px; padding: 11px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.04); position: relative; transition: 0.2s;}
.market-item-card:active { transform: scale(0.96); }
.market-item-card img { width: 100%; height: 125px; object-fit: cover; border-radius: 8px; margin-bottom: 11px; border: 1px solid var(--border-clr); cursor: pointer; }
.market-item-title { font-size: 12px; font-weight: 900; color: var(--text-dark); margin-bottom: 5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.market-item-price { color: #27AE60; font-size: 16px; font-weight: 900; margin-bottom: 11px; background: rgba(39, 174, 96, 0.1); padding: 2px 11px; border-radius: 16px;}

/* ======================================================= */
/* 10. Context Menu (قائمة الثلاث نقاط) */
/* ======================================================= */
.context-menu {
    position: absolute;
    top: 37px;
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-clr);
    border-radius: 13px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    width: 170px;
    z-index: 1000;
    overflow: hidden;
}
.context-item {
    padding: 13px 16px;
    font-size: 13px;
    font-weight: bold;
    color: var(--text-dark);
    cursor: pointer;
    border-bottom: 1px solid var(--border-clr);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}
.context-item:last-child {
    border-bottom: none;
}
.context-item:active {
    background: rgba(197, 160, 89, 0.1);
}
/* Phase 7 UI Enhancements */
.ui-card, .menu-item-card { border-radius: 16px; }
.service-card { border-radius: 14px; }
.custom-input, .chip, .icon-box, .chat-message { border-radius: 12px; }
.primary-btn, .secondary-btn { border-radius: 14px; }
.lightbox-content { border-radius: 16px; overflow: hidden; }

/* ======================================================= */
/* UI Polish Phase - Mobile Refinements & Fixes */
/* ======================================================= */

/* Fix Issue 1: SweetAlert collapses body height which hides the Leaflet map */
html.swal2-height-auto, body.swal2-height-auto {
    height: 100dvh !important;
}

/* Fix Issue 3: Reduce Ride Preview Card Bulky Injections */
#ridePreviewDetails > div {
    padding: 6px 10px !important;
    margin-bottom: 6px !important;
}
#requestCaptainBtn {
    padding: 10px !important;
}

/* ========================================================= */
/* Chat UI/UX Stabilization (Media Bubbles) */
/* ========================================================= */
.msg.message-image {
    padding: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
.msg.message-image img {
    width: 100%;
    max-width: 240px;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    cursor: pointer;
    object-fit: cover;
    display: block;
}

.msg.message-audio {
    padding: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
.msg.message-audio audio {
    width: 240px;
    height: 38px;
    outline: none;
    border-radius: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: block;
}

.msg.message-location {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
.chat-location-card {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden;
    width: 220px;
    border: 1px solid var(--border-clr);
}
.dark-theme .chat-location-card {
    background: #202C33;
}
.chat-location-card .loc-details {
    padding: 10px 12px;
    text-align: right;
}
.chat-location-card .loc-details strong {
    display: block;
    color: var(--primary);
    font-size: 13px;
    margin-bottom: 4px;
}
.chat-location-card .loc-details .loc-address {
    display: block;
    font-size: 11px;
    color: var(--text-muted, #777);
}
.chat-location-card .loc-btn {
    width: 100%;
    border: none;
    background: var(--primary);
    color: #fff;
    padding: 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

/* [BUG FIX] Ensure SweetAlert is always on top of custom modals */
.swal2-container {
    z-index: 99999 !important;
}

/* === RIDE UI THEME INJECTED === */
/* =========================================================================
   RIDE APP — SHARED UI THEME
   Pure CSS. RTL (Arabic). One file, imported by every screen in /screens.
   Switch theme by toggling: <html data-theme="dark"> / data-theme="light"
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

/* -------------------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------------------- */
:root{
  color-scheme: light;
  --bg-app:            #EEF1F6;
  --bg-card:            rgba(255,255,255,.78);
  --bg-card-solid:      #FFFFFF;
  --bg-input:           rgba(18,21,28,.045);
  --bg-chip:            rgba(18,21,28,.05);
  --border-soft:        rgba(18,21,28,.08);
  --border-strong:      rgba(18,21,28,.14);

  --text-primary:       #12151C;
  --text-secondary:     #666F80;
  --text-tertiary:      #9AA2B1;
  --text-on-accent:     #12151C;

  --amber-500:          #FF9F1C;
  --amber-600:          #FF8A00;
  --amber-grad:         linear-gradient(135deg, #FFB238 0%, #FF8A00 100%);
  --green-500:          #12C48B;
  --green-600:          #0AA873;
  --green-grad:         linear-gradient(135deg, #17E0A0 0%, #0AA873 100%);
  --red-500:            #FF4757;
  --red-600:            #E7364A;
  --blue-500:           #3B82F6;

  --amber-tint-bg:      rgba(255,159,28,.10);
  --amber-tint-border:  rgba(255,159,28,.35);
  --red-tint-bg:        rgba(255,71,87,.08);
  --red-tint-border:    rgba(255,71,87,.35);
  --green-tint-bg:      rgba(18,196,139,.10);

  --shadow-sheet:       0 -8px 40px rgba(18,21,28,.14);
  --shadow-card:        0 10px 30px rgba(18,21,28,.10);
  --shadow-modal:       0 24px 60px rgba(18,21,28,.24);
  --shadow-btn-amber:   0 8px 20px rgba(255,138,0,.30);
  --shadow-btn-green:   0 8px 20px rgba(10,168,115,.28);

  --glass-blur: 18px;
  --r-sheet: 28px;
  --r-card: 20px;
  --r-input: 14px;
  --r-btn: 16px;
  --r-pill: 999px;
  --font-ar: 'Cairo', 'Tajawal', system-ui, sans-serif;

  /* map scene (fixed regardless of theme — it's imagery, not chrome) */
  --map-sky-1: #4b5a6b;
  --map-sky-2: #23303f;
  --map-building-1: #2b3644;
  --map-building-2: #1c242f;
  --map-building-3: #0f151d;
}

[data-theme="dark"], body.dark-theme {
  color-scheme: dark;
  --bg-app:            #0A0E17;
  --bg-card:            rgba(18,24,38,.80);
  --bg-card-solid:      #141B2B;
  --bg-input:           rgba(255,255,255,.05);
  --bg-chip:            rgba(255,255,255,.06);
  --border-soft:        rgba(255,255,255,.08);
  --border-strong:      rgba(255,255,255,.14);

  --text-primary:       #EEF1F7;
  --text-secondary:     #8B94A7;
  --text-tertiary:      #5D6577;
  --text-on-accent:     #12151C;

  --amber-500:          #FFB020;
  --amber-600:          #FF9500;
  --amber-grad:         linear-gradient(135deg, #FFC24D 0%, #FF9500 100%);
  --green-500:          #17E0A0;
  --green-600:          #00C853;
  --green-grad:         linear-gradient(135deg, #2CF2B4 0%, #00C877 100%);
  --red-500:            #FF4D6D;
  --red-600:            #FF2D55;
  --blue-500:           #4C8DFF;

  --amber-tint-bg:      rgba(255,176,32,.12);
  --amber-tint-border:  rgba(255,176,32,.30);
  --red-tint-bg:        rgba(255,77,109,.10);
  --red-tint-border:    rgba(255,77,109,.35);
  --green-tint-bg:      rgba(23,224,160,.12);

  --shadow-sheet:       0 -8px 44px rgba(0,0,0,.55);
  --shadow-card:        0 10px 34px rgba(0,0,0,.45);
  --shadow-modal:       0 24px 70px rgba(0,0,0,.6);
  --shadow-btn-amber:   0 8px 22px rgba(255,149,0,.35);
  --shadow-btn-green:   0 8px 22px rgba(0,200,119,.30);
}

/* -------------------------------------------------------------------------
   RESET + BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

html, body{ margin:0; padding:0; }

body{
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-ar);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

button, input, select, textarea{ font-family: inherit; color: inherit; }
button{ cursor: pointer; }
h1,h2,h3,h4,p{ margin: 0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--amber-500);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   DEV PREVIEW CHROME (not part of the production UI — just for browsing
   the mockups locally; delete this block when wiring into the real app)
   ------------------------------------------------------------------------- */
.dev-bar{
  position: fixed;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}
.dev-bar > *{ pointer-events: auto; }
.dev-back{
  display: flex; align-items:center; gap:6px;
  background: var(--bg-card-solid); border:1px solid var(--border-soft);
  color: var(--text-secondary); font-size:13px; font-weight:700;
  padding: 9px 14px; border-radius: var(--r-pill); box-shadow: var(--shadow-card);
  text-decoration:none;
}
.dev-next{
  display: flex; align-items:center; gap:6px;
  background: var(--amber-tint-bg); border:1px solid var(--amber-tint-border);
  color: var(--amber-600); font-size:13px; font-weight:800;
  padding: 9px 14px; border-radius: var(--r-pill); box-shadow: var(--shadow-card);
  text-decoration:none;
}
.theme-toggle-btn{
  background: var(--bg-card-solid); border:1px solid var(--border-soft);
  color: var(--text-primary); font-size:13px; font-weight:700;
  padding: 9px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-card);
}

/* -------------------------------------------------------------------------
   PHONE STAGE
   ------------------------------------------------------------------------- */
.stage{ background: transparent !important; pointer-events: none; 
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: radial-gradient(circle at 30% 15%, rgba(59,130,246,.14), transparent 42%), var(--bg-app);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.stage.stage--center{ align-items: center; padding: 24px; }
.stage.stage--top{ align-items: flex-start; padding-top: 28px; }
.stage.stage--map{ align-items: stretch; }

/* -------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; border:none; border-radius: var(--r-btn);
  padding: 17px 20px; font-size:16px; font-weight:700;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:active{ transform: scale(.98); }
a.btn{ text-decoration:none; box-sizing:border-box; }
a.action-btn, a.icon-round-btn, a.offer-btn, a.tip-chip, a.safety-btn, a.btn-close-square, a.dev-next{ text-decoration:none; }
.btn-primary{ background: var(--amber-grad); color: var(--text-on-accent); box-shadow: var(--shadow-btn-amber); }
.btn-success{ background: var(--green-grad); color: var(--text-on-accent); box-shadow: var(--shadow-btn-green); }
.btn-secondary{ background: var(--bg-input); color: var(--text-primary); border:1px solid var(--border-soft); }
.btn-outline-danger{ background: transparent; color: var(--red-500); border: 1.5px solid var(--red-500); }

/* -------------------------------------------------------------------------
   SHEET / CARD / MODAL SHELLS
   ------------------------------------------------------------------------- */
.bottom-sheet { padding-bottom: 80px !important; width: 100%; max-width: 600px; margin: 0 auto; z-index: 9999; pointer-events: auto; 
  position: relative; width:100%; max-width:420px;
  background: var(--bg-card);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--border-soft); border-bottom:none;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: var(--shadow-sheet);
  padding: 12px 22px 26px;
}
.sheet-handle{ width:44px; height:5px; border-radius:var(--r-pill); background:var(--border-strong); margin:0 auto 18px; }

.floating-card{
  width:100%; max-width:420px;
  background: var(--bg-card);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--border-soft); border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
}

.modal-overlay{
  position:absolute; inset:0; background:rgba(6,8,14,.55);
  backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.modal{
  width:100%; max-width:400px;
  background: var(--bg-card);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--amber-tint-border); border-radius: var(--r-sheet);
  box-shadow: var(--shadow-modal); padding: 22px 22px 24px;
}

/* -------------------------------------------------------------------------
   RIDE DETAILS FORM (screen: تفاصيل المشوار)
   ------------------------------------------------------------------------- */
.trip-summary-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--bg-input); border-radius: var(--r-input);
  padding: 14px 16px; margin-bottom: 18px;
}
.trip-summary-points{ display:flex; flex-direction:column; gap:8px; }
.trip-point{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.trip-point-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.trip-point-dot.dot-green{ background: var(--green-500); }
.trip-point-dot.dot-red{ background: var(--red-500); }
.trip-distance-badge{
  background: var(--amber-tint-bg); color: var(--amber-500);
  font-size:13px; font-weight:800; padding:6px 12px; border-radius:var(--r-pill); flex:0 0 auto;
}

.section-title{ font-size:17px; font-weight:800; margin-bottom:16px; }

.form-group{ margin-bottom:16px; }
.form-group > label{ display:block; font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; }

.field-price{
  background: var(--bg-input); border:1px solid var(--border-soft); border-radius: var(--r-input);
  display:flex; align-items:center; padding: 16px; gap:8px;
}
.field-price input{
  flex:1; background:transparent; border:none; outline:none;
  font-size:16px; font-weight:700; text-align:start;
}
.field-price input::placeholder{ color: var(--text-tertiary); font-weight:600; }
.field-price .price-currency{ font-size:14px; font-weight:800; color: var(--amber-500); }

.field-row{ display:flex; gap:12px; }
.field-row .form-group{ flex:1; }
.field-select{
  width:100%; background: var(--bg-input); border:1px solid var(--border-soft);
  border-radius: var(--r-input); padding:15px 16px; font-size:15px; font-weight:700; text-align:center;
}

textarea.field-notes{
  width:100%; background: var(--bg-input); border:1px solid var(--border-soft);
  border-radius: var(--r-input); padding:14px 16px; font-size:14px; font-weight:500;
  min-height:56px; resize:none; outline:none;
}
textarea.field-notes:focus{ border-color: var(--amber-500); }
textarea.field-notes::placeholder{ color: var(--text-tertiary); }

.quick-places-row{ display:flex; gap:10px; overflow-x:auto; margin-bottom: 20px; }
.quick-place-chip{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background: var(--bg-chip); border:1px solid var(--border-soft);
  border-radius: 16px; padding:10px 16px; min-width: 84px; flex:0 0 auto;
}
.quick-place-chip svg{ width:16px; height:16px; color: var(--amber-500); }
.quick-place-chip .place-name{ font-size:13px; font-weight:800; }
.quick-place-chip .place-sub{ font-size:11px; color: var(--text-secondary); }

.form-actions-row{ display:flex; gap:10px; }
.btn-close-square{
  width:56px; height:56px; flex:0 0 auto; border-radius: var(--r-btn);
  background: var(--bg-input); border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; color: var(--text-secondary); font-size:20px;
}

/* -------------------------------------------------------------------------
   SEARCHING FOR CAPTAIN
   ------------------------------------------------------------------------- */
.searching-body{ text-align:center; padding:6px 4px 4px; }
.radar-container{ position:relative; width:120px; height:120px; margin:4px auto 20px; display:flex; align-items:center; justify-content:center; }
.radar-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--amber-500); opacity:0; animation: radar-pulse 2.4s cubic-bezier(.2,.6,.35,1) infinite; }
.radar-ring.ring-2{ animation-delay:.8s; }
.radar-ring.ring-3{ animation-delay:1.6s; }
@keyframes radar-pulse{ 0%{transform:scale(.35);opacity:.9;} 80%{opacity:0;} 100%{transform:scale(1);opacity:0;} }
.radar-core{ position:relative; width:56px; height:56px; border-radius:50%; background:var(--amber-grad); box-shadow:var(--shadow-btn-amber); display:flex; align-items:center; justify-content:center; color:var(--text-on-accent); z-index:2; }
.radar-core svg{ width:24px; height:24px; }
.searching-title{ font-size:18px; font-weight:800; margin-bottom:6px; }
.searching-subtitle{ font-size:13.5px; color:var(--text-secondary); line-height:1.6; margin-bottom:22px; }

.progress-steps{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding:0 4px; }
.progress-step{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; position:relative; }
.progress-step::before{ content:''; position:absolute; top:6px; inset-inline-end:50%; width:100%; height:2px; background:var(--border-soft); z-index:0; }
.progress-step:last-child::before{ display:none; }
.step-dot{ width:13px; height:13px; border-radius:50%; border:2px solid var(--border-strong); background:var(--bg-card-solid); z-index:1; }
.progress-step.is-active .step-dot{ background:var(--amber-500); border-color:var(--amber-500); box-shadow:0 0 0 4px var(--amber-tint-bg); }
.progress-step.is-done .step-dot{ background:var(--green-500); border-color:var(--green-500); }
.step-label{ font-size:11px; color:var(--text-tertiary); font-weight:600; }
.progress-step.is-active .step-label{ color:var(--amber-500); }

.trip-stats-row{ display:flex; background:var(--bg-input); border-radius:var(--r-input); padding:14px 8px; margin-bottom:18px; }
.trip-stat{ flex:1; text-align:center; border-inline-end:1px solid var(--border-soft); }
.trip-stat:last-child{ border-inline-end:none; }
.trip-stat-value{ display:block; font-size:15px; font-weight:800; margin-bottom:2px; }
.trip-stat-label{ font-size:11.5px; color:var(--text-secondary); }

/* -------------------------------------------------------------------------
   CANCEL CONFIRMATION MODAL (إلغاء المشوار؟)
   ------------------------------------------------------------------------- */
.confirm-card{
  width:100%; max-width:360px; text-align:center;
  background: var(--bg-card);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--amber-tint-border); border-radius: var(--r-sheet);
  box-shadow: var(--shadow-modal); padding: 30px 24px 24px;
}
.confirm-icon-wrap{
  width:76px; height:76px; border-radius:50%;
  background: var(--red-tint-bg); border: 1.5px solid var(--red-tint-border);
  color: var(--red-500); display:flex; align-items:center; justify-content:center;
  margin: 0 auto 18px;
}
.confirm-icon-wrap svg{ width:34px; height:34px; }
.confirm-title{ font-size:20px; font-weight:800; margin-bottom:10px; }
.confirm-subtitle{ font-size:13.5px; color:var(--text-secondary); line-height:1.7; margin-bottom:18px; }

.info-note{
  display:flex; align-items:flex-start; gap:10px; text-align:start;
  background: var(--bg-input); border:1px solid var(--border-soft);
  border-radius: 14px; padding: 13px 14px; margin-bottom: 22px;
}
.info-note .info-icon{
  width:20px; height:20px; border-radius:50%; flex:0 0 auto;
  background: var(--amber-tint-bg); color: var(--amber-500);
  display:flex; align-items:center; justify-content:center;
}
.info-note .info-icon svg{ width:12px; height:12px; }
.info-note p{ font-size:12.5px; line-height:1.7; color: var(--amber-500); font-weight:600; }

.confirm-actions{ display:flex; flex-direction:column; gap:10px; }

/* -------------------------------------------------------------------------
   ACTIVE TRIP — CAPTAIN ASSIGNED (rider view)
   ------------------------------------------------------------------------- */
.captain-info{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.captain-avatar{ width:52px; height:52px; border-radius:50%; background:var(--bg-input); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); flex:0 0 auto; }
.captain-avatar svg{ width:26px; height:26px; }
.captain-details{ flex:1; min-width:0; }
.captain-name{ font-size:16px; font-weight:800; margin-bottom:2px; }
.captain-meta{ font-size:13px; color:var(--text-secondary); }
.captain-rating{ display:flex; align-items:center; gap:4px; background:var(--amber-tint-bg); color:var(--amber-600); font-weight:800; font-size:13.5px; padding:6px 10px; border-radius:var(--r-pill); flex:0 0 auto; }
.captain-rating svg{ width:14px; height:14px; }

.agreed-price-row{ display:flex; align-items:center; justify-content:space-between; background:var(--bg-input); border-radius:var(--r-input); padding:14px 16px; margin-bottom:18px; }
.price-label{ font-size:13px; color:var(--text-secondary); font-weight:600; }
.price-value{ font-size:16px; font-weight:800; color: var(--green-500); }

.action-buttons-row{ display:flex; gap:10px; margin-bottom:16px; }
.action-btn{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border:1px solid var(--border-soft); border-radius:16px; background:var(--bg-input); font-size:12.5px; font-weight:700; }
.action-btn svg{ width:20px; height:20px; }
.action-chat{ color: var(--blue-500); }
.action-emergency{ color: var(--red-500); }
.action-cancel{ color: var(--text-secondary); }

/* -------------------------------------------------------------------------
   TRIP NAVIGATION SCENE (captain en route to / with passenger)
   ------------------------------------------------------------------------- */
.nav-overlay-top{
  position:absolute; top:0; left:0; right:0; z-index:3;
  padding: 16px; display:flex; flex-direction:column; gap:10px;
}
.direction-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--green-grad); color:#06231A;
  border-radius: 18px; padding: 14px 18px;
  box-shadow: var(--shadow-btn-green);
}
.direction-banner .direction-arrow{
  width:36px; height:36px; border-radius:50%; background: rgba(6,35,26,.14);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.direction-banner .direction-arrow svg{ width:18px; height:18px; }
.direction-banner .direction-text{ text-align:end; flex:1; }
.direction-distance{ font-size:18px; font-weight:800; display:block; }
.direction-instruction{ font-size:12.5px; font-weight:700; opacity:.85; }

.route-progress{
  background: rgba(10,14,20,.55);
  backdrop-filter: blur(10px);
  border-radius: 14px; padding: 10px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; color:#F1F4FA;
}
.route-progress .rp-label{ font-size:11.5px; font-weight:700; color:#B7C0D1; white-space:nowrap; }
.route-progress .rp-value{ font-size:12.5px; font-weight:800; }
.route-progress-track{ flex:1; height:6px; border-radius:var(--r-pill); background: rgba(255,255,255,.12); overflow:hidden; }
.route-progress-fill{ height:100%; border-radius:var(--r-pill); background: var(--green-grad); }

.map-scene{
  position:relative; flex:1; min-height: 420px;
  background: linear-gradient(180deg, var(--map-sky-1) 0%, var(--map-sky-2) 55%, #0A0D12 100%);
  overflow:hidden;
}
.map-scene svg{ position:absolute; inset:0; width:100%; height:100%; }
.map-scene .map-marker-dest{ animation: dest-pulse 1.8s ease-in-out infinite; transform-origin: center; }
@keyframes dest-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

.trip-sheet-nav{
  position:relative; z-index:3; width:100%; max-width:420px; margin:0 auto;
  background: var(--bg-card);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--border-soft); border-bottom:none;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: var(--shadow-sheet);
  padding: 14px 20px 24px;
}
.nav-person-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.icon-round-btn{
  width:42px; height:42px; border-radius:50%; border:none; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.icon-round-btn svg{ width:18px; height:18px; }
.icon-round-btn.call{ background: var(--green-tint-bg); color: var(--green-500); }
.icon-round-btn.chat{ background: rgba(59,130,246,.14); color: var(--blue-500); }
.nav-person-info{ flex:1; min-width:0; }
.nav-person-name{ font-size:16px; font-weight:800; margin-bottom:2px; }
.nav-person-meta{ font-size:12.5px; color:var(--text-secondary); }
.nav-person-avatar{ width:44px; height:44px; border-radius:50%; background:var(--bg-input); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); flex:0 0 auto; position:relative; }
.nav-person-avatar svg{ width:22px; height:22px; }
.nav-person-avatar .rating-badge{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  background: var(--amber-tint-bg); color:var(--amber-600); font-size:10.5px; font-weight:800;
  padding:2px 7px; border-radius:var(--r-pill); display:flex; align-items:center; gap:2px; white-space:nowrap;
  border: 1px solid var(--bg-card-solid);
}
.nav-person-avatar .rating-badge svg{ width:9px; height:9px; }

.agreed-price-row-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding: 0 2px; }
.agreed-price-row-nav .apr-label{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-secondary); font-weight:600; }
.apr-dot{ width:7px; height:7px; border-radius:50%; background: var(--amber-500); }
.agreed-price-row-nav .apr-value{ font-size:16px; font-weight:800; }

/* -------------------------------------------------------------------------
   RIDE CANCELLED (final notice, after confirmation)
   ------------------------------------------------------------------------- */
.alert-modal{
  width:100%; max-width:360px;
  background: var(--bg-card);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--border-soft); border-radius: var(--r-sheet);
  box-shadow: var(--shadow-modal); padding: 32px 26px 26px; text-align:center;
}
.alert-icon-wrap{ width:72px; height:72px; border-radius:50%; background:var(--red-tint-bg); color:var(--red-500); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.alert-icon-wrap svg{ width:34px; height:34px; }
.alert-title{ font-size:19px; font-weight:800; margin-bottom:8px; }
.alert-subtitle{ font-size:13.5px; color:var(--text-secondary); line-height:1.6; margin-bottom:24px; }

/* -------------------------------------------------------------------------
   START / END LOCATION SHEETS
   ------------------------------------------------------------------------- */
.sheet-header{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.sheet-header .pin-badge{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.pin-badge--start{ background: var(--amber-tint-bg); color: var(--amber-500); }
.pin-badge--end{ background: var(--red-tint-bg); color: var(--red-500); }
.sheet-header h2{ font-size:19px; font-weight:800; }

.location-search-box{ display:flex; align-items:center; gap:10px; background:var(--bg-input); border:1px solid var(--border-soft); border-radius:var(--r-input); padding:14px 16px; margin-bottom:14px; }
.location-search-box input{ flex:1; background:transparent; border:none; outline:none; font-size:15px; font-weight:500; }
.location-search-box input::placeholder{ color:var(--text-tertiary); }

.saved-places-row{ display:flex; gap:10px; margin-bottom:20px; overflow-x:auto; }
.saved-place-chip{ display:flex; align-items:center; gap:6px; background:var(--bg-chip); border:1px solid var(--border-soft); border-radius:var(--r-pill); padding:9px 14px; font-size:13px; font-weight:600; color:var(--text-secondary); white-space:nowrap; }
.saved-place-chip svg{ width:14px; height:14px; color: var(--amber-500); }

/* -------------------------------------------------------------------------
   DISTANCE & TIME FLOATING CARD
   ------------------------------------------------------------------------- */
.metrics-row{ display:flex; align-items:center; justify-content:space-between; }
.metric{ display:flex; align-items:center; gap:10px; flex:1; }
.metric-icon{ width:38px; height:38px; border-radius:12px; background:var(--amber-tint-bg); color:var(--amber-500); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.metric-icon svg{ width:19px; height:19px; }
.metric-text{ display:flex; flex-direction:column; }
.metric-value{ font-size:16px; font-weight:800; line-height:1.2; }
.metric-label{ font-size:12px; color:var(--text-secondary); }
.metric-divider{ width:1px; height:34px; background:var(--border-strong); margin:0 14px; }

/* -------------------------------------------------------------------------
   CONTINUE / PRIMARY FAB UNDER FLOATING CARD (distance & time step)
   ------------------------------------------------------------------------- */
.stage-footer-action{ width:100%; max-width:420px; margin-top:14px; }

/* -------------------------------------------------------------------------
   DECORATIVE BACKGROUND CARS (searching screen)
   Same currentColor trick as the rest of the UI → automatically white/pale
   in dark mode and ink-dark ("سوداني") in light mode, no theme branching.
   ------------------------------------------------------------------------- */
.bg-car-field{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; color: var(--text-primary); }
.bg-car{ position:absolute; opacity:.05; }
.bg-car svg{ width:100%; height:100%; display:block; }
.bg-car-1{ width:120px; top:6%;  right:-18px; transform:rotate(-8deg); }
.bg-car-2{ width:90px;  top:58%; left:-14px;  transform:rotate(10deg); opacity:.04; }
.bg-car-3{ width:70px;  top:32%; left:58%;    transform:rotate(-4deg); opacity:.035; }
.sheet-searching-content{ position:relative; z-index:1; }

/* -------------------------------------------------------------------------
   CAPTAIN OFFERS (live bidding — riders receive multiple price offers
   while searching, and can accept or decline each one)
   ------------------------------------------------------------------------- */
.offers-panel{ margin: 4px 0 18px; }
.offers-panel-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.offers-panel-title span.label{ font-size:13px; font-weight:800; color:var(--text-secondary); }
.offers-count-badge{ background:var(--amber-tint-bg); color:var(--amber-600); font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:var(--r-pill); }
.offers-list{ display:flex; flex-direction:column; gap:10px; max-height:none; }

.offer-card{
  display:flex; align-items:center; gap:10px;
  background: var(--bg-input); border:1px solid var(--border-soft);
  border-radius: 16px; padding: 10px 12px;
  animation: offer-in .35s ease both;
}
@keyframes offer-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
.offer-avatar{ width:40px; height:40px; border-radius:50%; background:var(--bg-chip); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); flex:0 0 auto; }
.offer-avatar svg{ width:20px; height:20px; }
.offer-info{ flex:1; min-width:0; }
.offer-name-row{ display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.offer-name{ font-size:13.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.offer-rating{ display:flex; align-items:center; gap:2px; font-size:11px; font-weight:800; color:var(--amber-600); flex:0 0 auto; }
.offer-rating svg{ width:10px; height:10px; }
.offer-meta{ font-size:11.5px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.offer-price{ font-size:16px; font-weight:800; color:var(--green-500); flex:0 0 auto; margin-inline-start:4px; }
.offer-actions{ display:flex; flex-direction:column; gap:6px; flex:0 0 auto; }
.offer-btn{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:none; flex:0 0 auto; }
.offer-btn svg{ width:15px; height:15px; }
.offer-btn-accept{ background: var(--green-tint-bg); color: var(--green-500); }
.offer-btn-reject{ background: var(--red-tint-bg); color: var(--red-500); }
.offer-card.is-best{ border-color: var(--amber-tint-border); box-shadow: 0 0 0 1px var(--amber-tint-border) inset; }
.offer-best-tag{ position:absolute; inset-inline-end:12px; top:-9px; background:var(--amber-grad); color:var(--text-on-accent); font-size:10px; font-weight:800; padding:3px 9px; border-radius:var(--r-pill); }
.offer-card{ position:relative; }

/* -------------------------------------------------------------------------
   TRIP NAVIGATION — RIDER VIEW ADD-ONS (live ETA + safety strip)
   ------------------------------------------------------------------------- */
.eta-hero{ display:flex; align-items:center; justify-content:space-between; background:var(--bg-input); border-radius:16px; padding:12px 16px; margin-bottom:14px; }
.eta-hero-text{ display:flex; flex-direction:column; }
.eta-hero-value{ font-size:22px; font-weight:800; line-height:1.1; }
.eta-hero-value b{ color:var(--amber-500); }
.eta-hero-label{ font-size:12px; color:var(--text-secondary); margin-top:2px; }
.eta-hero-badge{ background:var(--green-tint-bg); color:var(--green-500); font-size:12px; font-weight:800; padding:6px 12px; border-radius:var(--r-pill); white-space:nowrap; }

.safety-strip{ display:flex; gap:10px; margin-bottom:14px; }
.safety-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:11px 8px; border-radius:14px; border:1px solid var(--border-soft); background:var(--bg-input); font-size:12.5px; font-weight:700; }
.safety-btn svg{ width:16px; height:16px; }
.safety-btn.emergency{ color:var(--red-500); border-color:var(--red-tint-border); background:var(--red-tint-bg); }
.safety-btn.share{ color:var(--blue-500); }
.safety-btn.cancel{ color:var(--text-secondary); }

/* -------------------------------------------------------------------------
   ARRIVED SAFELY (drop-off confirmation, rider view)
   ------------------------------------------------------------------------- */
.alert-icon-wrap.icon-success{ background:var(--green-tint-bg); color:var(--green-500); }
.trip-recap-row{ display:flex; justify-content:space-between; background:var(--bg-input); border-radius:var(--r-input); padding:14px 16px; margin-bottom:20px; text-align:start; }
.trip-recap-item{ display:flex; flex-direction:column; gap:2px; }
.trip-recap-item .label{ font-size:11px; color:var(--text-tertiary); font-weight:600; }
.trip-recap-item .value{ font-size:14px; font-weight:800; }

/* -------------------------------------------------------------------------
   RATE CAPTAIN
   ------------------------------------------------------------------------- */
.rate-captain-header{ display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:18px; }
.rate-captain-avatar{ width:76px; height:76px; border-radius:50%; background:var(--bg-input); border:2px solid var(--amber-tint-border); display:flex; align-items:center; justify-content:center; color:var(--text-tertiary); margin-bottom:12px; }
.rate-captain-avatar svg{ width:36px; height:36px; }
.rate-captain-name{ font-size:17px; font-weight:800; margin-bottom:2px; }
.rate-captain-car{ font-size:13px; color:var(--text-secondary); }

.stars-row{ display:flex; justify-content:center; gap:8px; margin-bottom:22px; }
.star-btn{ background:none; border:none; padding:2px; color:var(--border-strong); }
.star-btn svg{ width:34px; height:34px; }
.star-btn.is-on{ color:var(--amber-500); }

.tip-row{ display:flex; gap:8px; overflow-x:auto; margin-bottom:16px; }
.tip-chip{ background:var(--bg-chip); border:1px solid var(--border-soft); border-radius:var(--r-pill); padding:8px 14px; font-size:12.5px; font-weight:700; color:var(--text-secondary); white-space:nowrap; flex:0 0 auto; }
.tip-chip.is-selected{ background:var(--amber-tint-bg); border-color:var(--amber-tint-border); color:var(--amber-600); }

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width:420px){
  .bottom-sheet, .floating-card, .modal, .alert-modal, .confirm-card, .trip-sheet-nav{ max-width:100%; }
}

/* Desktop / wide viewports: keep the phone-shaped composition centered with
   breathing room instead of stretching sheets edge-to-edge. */
@media (min-width:640px){
  .stage{ background: transparent !important; pointer-events: none;  padding: 32px 24px; }
  .stage.stage--map{ padding: 0; }
  .bottom-sheet, .trip-sheet-nav{ border-radius: var(--r-sheet); border-bottom: 1px solid var(--border-soft); margin-bottom: 12px; }
}





.sheet-handle { transition: transform 0.2s, background 0.2s; }
.sheet-handle:hover, .sheet-handle:active { transform: scaleX(1.3); background: var(--primary); }

/* Phase 2 Constraints */
.action-btn { max-height: 54px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 1 !important; border-radius: 12px; }
.action-call, .icon-round-btn { width: 54px !important; height: 54px !important; border-radius: 50% !important; flex: none !important; }
.bottom-sheet { transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.bottom-sheet.minimized { transform: translateY(85%) !important; }

/* Phase 3 CSS Fixes */
.trip-actions { display: flex !important; gap: 12px !important; align-items: center !important; justify-content: center !important; width: 100% !important; }
.action-chat { flex: 1 !important; height: 54px !important; max-width: 250px !important; border-radius: 12px !important; }
.action-call { width: 54px !important; height: 54px !important; flex-shrink: 0 !important; border-radius: 50% !important; }
.bottom-sheet { padding-bottom: 90px !important; }

/* Phase 4 CSS Fixes */
.field-select { height: 48px !important; padding: 0 12px !important; font-size: 16px !important; border-radius: 12px !important; border: 1px solid var(--border-color) !important; background: var(--surface) !important; color: var(--text-main) !important; width: 100% !important; box-sizing: border-box !important; }


/* =========================================================================
   MOBILE-FIRST RESPONSIVE POLISH & TOUCH TARGETS (44PX HIG/MATERIAL COMPLIANT)
   ========================================================================= */

/* Ensure all buttons & interactive touch targets are at least 44px tall on mobile */
.primary-btn, 
.secondary-btn, 
.btn, 
.btn-primary, 
.btn-secondary, 
.action-btn, 
.file-label,
button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Fluid Containers: Convert fixed pixel widths to fluid responsive containers */
.ui-card, 
.bottom-sheet, 
.auth-card, 
.modal, 
.custom-swal,
.full-overlay > div {
    width: 100% !important;
    max-width: 450px !important;
    box-sizing: border-box !important;
}

/* Mobile-first Navigation & Sidebar Graceful Collapse (< 768px) */
@media (max-width: 768px) {
    .app-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .sidebar, 
    .desktop-nav {
        display: none !important;
    }
    
    .bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 10000 !important;
    }
    
    .nav-item {
        min-height: 44px !important;
        padding: 6px 0 !important;
    }
    
    /* Prevent any horizontal overflow */
    body, html, .app-screen, .scrollable {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Fluid input fields */
    .custom-input, 
    .field-select, 
    input[type="text"], 
    input[type="number"], 
    input[type="tel"], 
    input[type="password"] {
        min-height: 44px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ======================================================= */
/* SWEETALERT GLOBAL SUPPRESSION GUARD (PHASE 4)          */
/* ======================================================= */
.swal2-deny:not(.swal2-deny-explicit),
.swal2-cancel:not(.swal2-cancel-explicit) {
    display: none !important;
}