:root{
  --primary:#e76f1f;
  --primary-dark:#c95712;
  --primary-soft:#fff1e7;
  --cream:#fffaf6;
  --ink:#252b31;
  --muted:#6b7280;
  --line:#e6e0da;
  --panel:#ffffff;
  --soft:#f7f4f1;
  --success:#16845b;
  --danger:#c43b35;
  --shadow:0 6px 18px rgba(37,43,49,.07);
  --shadow-soft:0 2px 8px rgba(37,43,49,.06);
  --radius:10px;
  --radius-sm:7px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.express-page{
  font-family:'Cairo',Arial,sans-serif!important;
  color:var(--ink)!important;
  background:#f7f5f2!important;
  line-height:1.7;
}
body.express-page::selection{background:var(--primary);color:#fff}
.container{max-width:1180px!important;padding-left:20px!important;padding-right:20px!important}

/* Header: real transport company, not SaaS */
header{position:relative!important;top:auto!important;background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:1px solid #e9e5e0!important;box-shadow:0 2px 8px rgba(0,0,0,.035)!important}
.navbar{padding:12px 0!important;min-height:70px}
.logo{gap:9px!important;font-size:19px!important;color:var(--ink)!important}
.logo .logo-icon{width:40px!important;height:40px!important;border-radius:8px!important;background:var(--primary)!important;box-shadow:none!important}
.logo span:last-child{font-weight:900}
.nav-links{gap:2px!important}
.nav-links a,.nav-link{border-radius:7px!important;background:transparent!important;padding:8px 11px!important;color:#4b5563!important}
.nav-links a:hover,.nav-link:hover{background:var(--primary-soft)!important;color:var(--primary)!important;transform:none!important}
.btn-nav-primary{background:var(--primary)!important;color:#fff!important;border-radius:7px!important;box-shadow:none!important;padding:8px 16px!important}
.btn-nav-primary:hover{background:var(--primary-dark)!important;box-shadow:none!important;transform:none!important}
.menu-toggle{background:var(--ink)!important;border-radius:7px!important}

/* Home hero */
/* ⚠️ /images/hero-bus.png مش موجودة — عشان كده الخلفية
   كانت رمادي (#252b31) والصفحة باينة فاضية.
   بقت كحلي بتدرّج + الأتوبيس الحقيقي في الـ HTML. */
.hero{padding:44px 0 70px!important;
      background:radial-gradient(ellipse 800px 500px at 15% 40%,rgba(240,122,30,.16),transparent 65%),
                 linear-gradient(135deg,#0F2044 0%,#071530 100%)!important;
      position:relative;overflow:hidden}
/* ⚠️ كانت طبقة تغميق كاملة — بتخفي الأتوبيس.
   بقت الفهد باهت (العنصر المميّز). */
.hero::before{content:'';position:absolute;top:-30px;left:-60px;
              width:560px;height:340px;
              background:url('/img/logo-light.png') no-repeat center/contain!important;
              opacity:.045;transform:rotate(-8deg);pointer-events:none}
.hero::after{display:none!important}
.hero-grid{grid-template-columns:1fr 1.05fr!important;gap:52px!important;position:relative;z-index:1}
.hero-title{padding:10px 0}
.hero-title h1{font-size:39px!important;line-height:1.35!important;letter-spacing:-.5px}
.hero-title h1 span{color:#ff9a5c!important}
.hero-title p{font-size:15px!important;line-height:2!important;color:#e5e7eb!important;max-width:520px}
.hero-badge{background:var(--primary)!important;border:0!important;border-radius:6px!important;color:#fff!important;padding:5px 12px!important}
.hero-checks{gap:8px!important}
.hero-checks span{background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.16);backdrop-filter:none!important;border-radius:6px!important;padding:5px 11px!important}
.hero-checks span i{color:#ff9a5c!important}
.booking-card{border-radius:10px!important;padding:26px!important;box-shadow:0 16px 32px rgba(0,0,0,.18)!important;border:1px solid rgba(255,255,255,.25)!important}
.booking-card h3{font-size:19px!important;margin-bottom:18px!important}
.booking-card h3 i{color:var(--primary)!important}
.form-group{margin-bottom:14px!important}
.form-group label{font-size:12.5px!important;color:#59616a!important}
input[type="date"],input[type="number"],select.native-select, .booking-card select{border:1px solid #d9d6d2!important;border-radius:7px!important;background:#fff!important;min-height:46px!important;box-shadow:none!important;font-family:'Cairo',sans-serif!important}
input[type="date"]:focus,input[type="number"]:focus,.booking-card select:focus{outline:none!important;border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(231,111,31,.10)!important}
.input-wrap>i{color:var(--primary)!important}
.btn-search,.btn-primary,.btn-book,.booking-card button[type="submit"]{background:var(--primary)!important;border:0!important;border-radius:7px!important;box-shadow:none!important}
.btn-search:hover,.btn-primary:hover,.btn-book:hover,.booking-card button[type="submit"]:hover{background:var(--primary-dark)!important;transform:none!important}

/* Search results and cards */
.results-wrapper{background:#f7f5f2!important}
.trip-card,.result-card,.route-card,.office-card,.info-card,.card{border-radius:10px!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-soft)!important;background:#fff!important}
.card:hover,.trip-card:hover,.result-card:hover,.route-card:hover{box-shadow:var(--shadow)!important;transform:none!important}
.trip-route{background:var(--primary-soft)!important;border:1px solid #ffd8c2!important;border-radius:8px!important}
.route-line{background:var(--primary)!important;height:2px!important}
.route-line::before,.route-line::after{background:var(--primary)!important;box-shadow:0 0 0 2px var(--primary-soft)!important}

/* Sections */
section:not(.hero){scroll-margin-top:20px}
.section-title h2{font-size:25px!important;color:var(--ink)!important}
.section-title p{color:var(--muted)!important}

/* Auth pages */
/* =====================================================================
 *  ⚠️ خلفية صفحات الدخول
 * =====================================================================
 *  كانت #f3f0ec — رمادي فاتح.
 *
 *  ده اللي كان باين في الصورة على الموبايل: كارت أبيض على
 *  رمادي باهت، شكل نصف مكتمل.
 *
 *  بقت كحلي — نفس خلفية الهيرو، فالموقع متسق.
 *
 *  ⚠️ و100dvh مع 100vh: على الموبايل الـ vh بتحسب الشاشة
 *     بالشريط العلوي والسفلي، فبيفضل فراغ لما يختفوا.
 * ===================================================================== */
html{min-height:100%}
body.auth-page{font-family:'Cairo',Arial,sans-serif!important;
  background:linear-gradient(135deg,#0F2044 0%,#071530 100%)!important;
  background-attachment:fixed!important;
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:20px 16px!important}

/* الغلاف — بيلم الكارت والروابط في عمود */
.auth-page .page{width:100%;max-width:400px;
  display:flex;flex-direction:column;align-items:stretch}
.auth-page .card{max-width:400px!important;width:100%;background:#fff!important;border-radius:10px!important;padding:34px!important;border:1px solid var(--line)!important;box-shadow:0 12px 28px rgba(37,43,49,.09)!important}
.auth-page .card-header{margin-bottom:24px!important}
.auth-page .card-header i{font-size:42px!important;color:var(--primary)!important;margin-bottom:8px!important}
/* اللوجو الحقيقي بدل الأيقونة */
.auth-page .brand-logo{height:60px!important;width:auto!important;
  margin:0 auto 14px!important;display:block!important}

@media(max-width:400px){
  .auth-page .card{padding:26px 20px!important;border-radius:14px!important}
  .auth-page .brand-logo{height:52px!important}
}
.auth-page .card-header h2{font-size:23px!important;color:var(--ink)!important}
.auth-page .card-header p{color:var(--muted)!important}
.auth-page .form-group input{border:1px solid #d8d4cf!important;border-radius:7px!important;background:#fff!important;padding:12px 14px!important}
.auth-page .form-group input:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(231,111,31,.10)!important}
.auth-page .btn-login,.auth-page .btn-register{background:var(--primary)!important;border-radius:7px!important;box-shadow:none!important}
.auth-page .btn-login:hover,.auth-page .btn-register:hover{background:var(--primary-dark)!important}
.auth-page .bottom-link a{color:var(--primary)!important}

/* Trip / booking */
.page-grid{max-width:820px!important}

/* =====================================================================
 *  صفحة نتائج البحث
 * =====================================================================
 *  ⚠️ القواعد دي هنا مش في الصفحة — عشان الملف ده بيتحمّل
 *     بعدها وفيه !important، فأي حاجة في الصفحة بتتغلب.
 * ===================================================================== */
.wrap{max-width:1140px!important;margin:0 auto!important;}
.wrap > *{min-width:0!important;}
.card{max-width:820px!important;min-width:0!important;}

/* ⚠️ min-width:0 ضرورية — في Grid العنصر بيرفض يصغّر عن
   محتواه، فالكارت كان بيطلع أعرض من الشاشة على الموبايل. */
.c-path,.c-path > *,.c-row,.sum > *{min-width:0!important;}

@media(max-width:760px){
  .card{flex-direction:column!important;}
  .c-time{display:none!important;}
  .c-book{grid-column:1/-1!important;text-align:center!important;}
}
.card{padding:22px!important;margin-bottom:16px!important}
.card-header{font-size:17px!important}
.card-header .icon-circle{border-radius:8px!important}
.icon-primary{background:var(--primary-soft)!important;color:var(--primary)!important}
.trip-text{background:#fff}
.tt-route{font-size:18px!important;border-bottom:1px solid var(--line)!important}
.tt-route i{color:var(--primary)!important}
.seat,.seat-btn,.seat-item{border-radius:6px!important}
.seat.selected,.seat-btn.selected,.seat-item.selected{background:var(--primary)!important;border-color:var(--primary)!important}

/* Wallet / bookings */
.wallet-balance,.balance-card{border-radius:10px!important;box-shadow:var(--shadow-soft)!important}
.btn-primary{font-family:'Cairo',sans-serif!important}
.modal-content,#rfModal>div,#trModal>div{border-radius:10px!important}

/* Mobile drawer */
.drawer-head{background:var(--ink)!important}
.drawer{border-left:1px solid var(--line)}
.drawer-links a{border-radius:7px!important}
.drawer-links a:hover{background:var(--primary-soft)!important}
.drawer-links a i{color:var(--primary)!important}

/* Tables / lists */
table{border-color:var(--line)!important}
th{background:#f4f1ed!important;color:#4b5563!important;font-weight:800!important}
td,th{border-color:#ebe6e0!important}

/* Reduce the AI look: remove animated/glass effects */
[style*="backdrop-filter"],[style*="linear-gradient"]{backdrop-filter:none!important}

@media(max-width:900px){
 .hero{padding:38px 0 44px!important}
 .hero-grid{grid-template-columns:1fr!important;gap:28px!important}
 .hero-title{text-align:center}
 .hero-title p{margin-left:auto;margin-right:auto}
 .hero-checks{justify-content:center}
 .booking-card{max-width:680px;margin:auto}
}
@media(max-width:768px){
 .container{padding-left:14px!important;padding-right:14px!important}
 .navbar{min-height:62px}
 .hero-title h1{font-size:31px!important}
 .hero{background-position:center!important}
 .booking-card{padding:20px!important}
 .row-2{grid-template-columns:1fr!important}
 .auth-page{padding:14px!important}
 .auth-page .card{padding:25px 20px!important}
}
@media(max-width:480px){
 .hero-title h1{font-size:27px!important}
 .hero-title p{font-size:14px!important}
 .hero-checks span{font-size:11px!important}
}

/* =====================================================================
   الموبايل — الكارت ياخد عرض الشاشة كله
   ---------------------------------------------------------------------
   كان .booking-card{max-width:680px;margin:auto} في ميديا 900،
   وده بيسيب هوامش جانبية كبيرة على التليفون. دلوقتي بيتمدد
   لعرض الحاوية كاملاً وبيسيب 12px بس من كل ناحية.
   ===================================================================== */
@media(max-width:768px){
 .hero .container{padding-left:12px!important;padding-right:12px!important}
 .booking-card{max-width:100%!important;width:100%!important;margin:0!important;padding:18px 16px!important;box-sizing:border-box}
 .booking-card h3{font-size:17px!important;margin-bottom:14px!important}
 .form-group{margin-bottom:12px!important}
 .booking-card label{font-size:12.5px!important}

 /* منع أي تمدد أفقي يطلع سكرول جانبي */
 html,body{overflow-x:hidden;max-width:100%}
 .booking-card input,.booking-card select,
 .booking-card .select2-container{max-width:100%!important;box-sizing:border-box}
 .select2-container{width:100%!important}
}

@media(max-width:480px){
 .hero{padding:22px 0 30px!important}
 .booking-card{padding:16px 14px!important;border-radius:12px!important}
 .booking-card h3{font-size:16px!important}
 input[type="date"],input[type="number"],select.native-select,
 .booking-card select{min-height:44px!important;font-size:14.5px!important}
 .btn-search{padding:13px!important;font-size:15px!important}
}

/* =====================================================================
   كارت الرحلة بعد شيل رأسه (اسم الخط + درجة الخدمة)
   ---------------------------------------------------------------------
   الرأس كان بيدي الكارت حتة ملوّنة فوق. من غيره الجسم بيلزق
   في الحافة العليا، فمحتاج حشو زيادة من فوق.
   ===================================================================== */
.trip-card .trip-head{display:none!important}
.trip-card .trip-body{padding-top:20px!important}

@media(max-width:640px){
 .trip-card .trip-body{padding-top:16px!important}
}

/* =====================================================================
   الرحلة اللي أطلقت — خافتة ومش قابلة للحجز
   ---------------------------------------------------------------------
   الزرار كان متعطّل بس الكارت كان بلونه العادي، فالعميل
   بيفضل يحاول يضغط عليه. دلوقتي الكارت كله باهت والشريط
   الجانبي رمادي بدل البرتقالي.
   ===================================================================== */
.trip-card.trip-departed{
  border-right-color:#cbd5e1!important;
  background:#fafafa!important;
  box-shadow:none!important;
}
.trip-card.trip-departed .trip-body{opacity:.5}

/* السعر والوقت والمحطات كلهم رمادي — مفيش حاجة بتنادي على الضغط */
.trip-card.trip-departed .trip-price,
.trip-card.trip-departed .trip-period,
.trip-card.trip-departed .trip-arrow i{color:#94a3b8!important}

/* شارة "أطلقت الرحلة" تفضل واضحة — هي الرسالة المهمة */
.trip-card.trip-departed .seats{opacity:1!important}

/* مايتحركش عند اللمس */
.trip-card.trip-departed:hover{transform:none!important;box-shadow:none!important}
.trip-card.trip-departed .btn-book{
  background:#cbd5e1!important;
  color:#64748b!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
}

/* =====================================================================
   قسم المكاتب — مجمّع بالمحافظة
   ---------------------------------------------------------------------
   الشبكة اتقسمت لمجموعات، فمحتاجة مسافة أقل بين الكروت
   ومساحة أوضح بين المحافظات.
   ===================================================================== */
.offices-grid{margin-bottom:6px}

/* أزرار الاتصال بتلف سطر لو المكتب عنده أكتر من رقم */
.office-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.office-actions .btn-sm{white-space:nowrap}

@media(max-width:768px){
 .offices-grid{grid-template-columns:1fr!important;gap:12px!important}
 .office-card{padding:16px!important}
 .office-actions .btn-sm{flex:1 1 auto;text-align:center;justify-content:center}
}

/* شريط أزرار فاضي (مكتب من غير تليفون ولا إحداثيات) مايسيبش مسافة */
.office-actions:empty{display:none!important;margin:0!important}