html, body{
  overflow-x:hidden;
  width:100%;
    position:relative;
}






:root{
  --blue-900:#0a4e74;
  --blue-800:#0c5d88;
  --blue-700:#0f6b9a;
  --blue-200:#eaf5fb;

  --ink:#0a1a24;
  --muted:#6b7b88;
  --line:#e6eef3;

  --white:#ffffff;
  --danger:#d7263d;

  --radius:18px;

  --shadow:0 10px 30px rgba(10,78,116,.08);
  --focus:0 0 0 4px rgba(111,176,214,.25);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:"Tajawal", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--ink);
  background:#e0e0e0;

  overflow-x:hidden;   /* ← يمنع السحب */
}


.container-xl{
  width:min(1200px, 92%);
  margin-inline:auto;
}

/* =========================
   TOP MINI BAR
========================= */
.top-mini-bar{
  background:#ffffff;
  border-bottom:1px solid var(--line);
  font-size:13px;
  color:var(--muted);
}
.top-mini-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
}
.top-mini-left{ display:flex; align-items:center; gap:10px; }
.dot{ opacity:.5; }
.mini-social{
  width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  color:var(--muted);
  font-weight:800;
  margin-inline-start:6px;
  transition:.2s ease;
}
.mini-social:hover{
  border-color:#cfe6f4;
  color:var(--blue-900);
  transform:translateY(-1px);
}

/* =========================
   HEADER
========================= */
.main-header{
  background:var(--blue-900);
  color:#fff;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
}

.header-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:240px;
}
.brand-logo{
  width:42px;height:42px;
  border-radius:12px;
  background:#fff;
  color:var(--blue-900);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  letter-spacing:.5px;
}
.brand-titles{ line-height:1.1; }
.brand-ar{ font-weight:800; font-size:14px; }
.brand-en{ font-size:11px; opacity:.9; letter-spacing:.4px; }

.header-nav{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}
.nav-link{
  color:#e9f6ff;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  opacity:.95;
  transition:.2s ease;
}
.nav-link:hover{
  opacity:1;
  text-decoration:underline;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-end;
  min-width:260px;
}

.lang-btn{
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:#fff;
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  display:flex; align-items:center; gap:8px;
  transition:.2s ease;
}
.lang-dot{
  width:8px;height:8px;border-radius:99px;background:#fff;opacity:.9;
}
.lang-btn:hover{
  border-color:rgba(255,255,255,.45);
  transform:translateY(-1px);
}

.cta-btn{
  background:#c7373f;
  color:#fff;
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:900;
  font-size:13px;
  transition:.2s ease;
}
.cta-btn:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}

/* =========================
   HERO
========================= */
.hero{
  background:linear-gradient(180deg, rgba(10,78,116,.95), rgba(10,78,116,.65)),
    url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?q=80&w=1600&auto=format&fit=crop");
  background-size:cover;
  background-position:center;
  color:#fff;
  padding:44px 0 48px;
}
.hero-inner{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hero-title{
  margin:0;
  font-size:40px;
  font-weight:900;
  letter-spacing:.2px;
}
.hero-subtitle{
  margin:0;
  opacity:.95;
  font-size:14px;
  font-weight:500;
}

/* =========================
   BODY
========================= */
.page-body{
  padding:26px 0 36px;
}

.card-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.card-head{
  padding:22px 22px 12px;
}
.card-head h2{
  margin:0;
  font-size:20px;
  font-weight:900;
  color:var(--blue-900);
}
.card-head p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}

form{
  padding:14px 22px 22px;
}

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px 18px;
}

.form-group label{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:900;
  font-size:13px;
  color:var(--blue-900);
  margin-bottom:7px;
}
.req{
  color:var(--danger);
  font-weight:900;
}

/* =========================
   INPUTS / SELECTS
========================= */
.form-group input,
.form-group select{
  width:100%;
  height:48px;
  border:1px solid #cfe3f0;
  border-radius:999px;
  padding:0 16px;
  outline:none;
  font-size:14px;
  transition:.2s ease;
  background:#fff;
  color:var(--ink);
}

.form-group input::placeholder{
  color:#9aa8b3;
}

.form-group input:focus,
.form-group select:focus{
  border-color:#6fb0d6;
  box-shadow:var(--focus);
}

/* ✅ Fix date input looks clean */
input[type="date"]{
  direction: rtl;
  text-align: right;
  padding-inline:16px;
}
html[dir="ltr"] input[type="date"]{
  direction:ltr;
  text-align:left;
}

/* Remove ugly default arrow styling issues on some browsers */
select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #7aa7c3 50%),
    linear-gradient(135deg, #7aa7c3 50%, transparent 50%);
  background-position:
    calc(16px) 50%,
    calc(10px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* ✅ No hints anymore */
.hint{ display:none !important; }

/* Errors */
.error-msg{
  display:none;
  margin-top:6px;
  color:var(--danger);
  font-size:12px;
  font-weight:800;
}

/* =========================
   PHONE FIELD
========================= */
.phone-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.phone-code{
  height:48px;
  padding:0 14px;
  border:1px solid #cfe3f0;
  border-radius:999px;
  display:flex;
  align-items:center;
  font-weight:900;
  color:var(--blue-900);
  background:#f7fcff;
  min-width:62px;
  justify-content:center;
}

/* =========================
   DIVIDER
========================= */
.section-divider{
  border-top:1px solid var(--line);
  margin:18px 0;
}

/* =========================
   SERVICE TABS
========================= */
.service-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.service-title{
  color:var(--blue-900);
  font-weight:900;
  font-size:14px;
}

.service-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.tab-btn{
  border:1px solid #8dc0de;
  background:#fff;
  color:var(--blue-900);
  border-radius:999px;
  padding:9px 14px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  transition:.2s ease;
}
.tab-btn:hover{
  background:rgba(15,107,154,.06);
  transform:translateY(-1px);
}
.tab-btn.active{
  background:var(--blue-900);
  color:#fff;
  border-color:var(--blue-900);
}

.service-box{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  padding:18px 18px 14px;
}

.service-box-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.service-box-head h3{
  margin:0;
  font-size:18px;
  color:var(--blue-900);
  font-weight:900;
}

.instructions{
  flex:1;
  min-width:260px;
}
.instructions-title{
  font-weight:900;
  color:var(--muted);
  font-size:13px;
  margin-bottom:6px;
}
.instructions ul{
  margin:0;
  padding-inline-start:18px;
  color:#4f6270;
  font-size:13px;
  line-height:1.7;
}

/* ✅ service dynamic fields */
.service-fields{
  padding-top:16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

/* =========================
   RADIO
========================= */
.radio-block{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.radio-title{
  font-weight:900;
  color:var(--blue-900);
  margin-bottom:10px;
}

.radio-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.radio-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:#345062;
}
.radio-item input{
  transform:scale(1.12);
  accent-color: var(--blue-900);
}

/* =========================
   ACTIONS
========================= */
.actions-row{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}

.submit-btn{
  background:var(--blue-900);
  border:none;
  color:#fff;
  border-radius:999px;
  padding:12px 22px;
  font-weight:900;
  cursor:pointer;
  min-width:160px;
  transition:.2s ease;
}
.submit-btn:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}
.submit-btn:active{
  transform:translateY(0px);
}

/* =========================
   FOOTER
========================= */
.main-footer{
  background:linear-gradient(180deg, #b7d7ea, #a6cbe1);
  padding:24px 0 14px;
  margin-top:30px;
  border-top:1px solid rgba(255,255,255,.7);
}

.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.footer-news-title{
  font-weight:900;
  color:#1b445c;
  margin-bottom:10px;
}

.footer-news-box{
  display:flex;
  gap:10px;
  align-items:center;
}

.footer-news-box input{
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.8);
  padding:0 16px;
  outline:none;
  width:min(380px, 60vw);
}

.footer-news-box button{
  height:44px;
  border-radius:999px;
  border:none;
  background:var(--blue-900);
  color:#fff;
  font-weight:900;
  padding:0 18px;
  cursor:pointer;
  transition:.2s ease;
}
.footer-news-box button:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}

.footer-links{
  padding-top:18px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:18px;
}

.footer-col h4{
  margin:0 0 10px;
  color:#1b445c;
  font-weight:900;
}

.footer-col a{
  display:block;
  text-decoration:none;
  color:#1f475f;
  opacity:.88;
  margin:7px 0;
  font-weight:700;
  font-size:13px;
  transition:.2s ease;
}
.footer-col a:hover{
  opacity:1;
  text-decoration:underline;
}

.footer-bottom{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.65);
  color:#1b445c;
  font-weight:800;
  font-size:13px;
  display:flex;
  justify-content:space-between;
}

/* =========================
   VALIDATION UI
========================= */
.is-invalid{
  border-color:rgba(215,38,61,.7) !important;
  box-shadow:0 0 0 4px rgba(215,38,61,.12) !important;
}

/* =========================
   RESPONSIVE
========================= */
/* =========================================================
   HEADER MOBILE FIX — CLEAN STACK
   بدون تغيير ألوان أو ستايل
========================================================= */

@media (max-width: 900px){

  /* الهيدر صف واحد مرتب */
 .header-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
  }

  /* الشعار بالنص */
  .header-brand{
    justify-self:center;
    min-width:auto;
  }

  /* القائمة تختفي */
  .header-nav{
    display:none !important;
  }

  /* اللغة تختفي (تروح للمنيو الجانبي) 
  .lang-btn{
    display:none;
  }*/

  /* زر الحجز يصغر بدون ما يتغير شكله */
  .cta-btn{
    padding:8px 12px;
    font-size:12px;
    border-radius:10px;
    white-space:nowrap;
  }

  /* زر المنيو يظهر */
  .mobile-toggle{
    display:inline-flex;
    order:-1;
  }

  /* الهيدر ما يتمدد */
  .header-actions{
    min-width:auto;
    gap:8px;
  }
}



/* =========================
   MOBILE NAV (SIDEBAR)
========================= */
.mobile-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:900;
  transition:.2s ease;
}
.mobile-toggle:hover{
  border-color:rgba(255,255,255,.45);
  transform:translateY(-1px);
}

.mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
  z-index:9998;
}


.mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
  z-index:9998;
}

.mobile-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:320px;
  max-width:86vw;
  background:#ffffff;
  box-shadow:-20px 0 50px rgba(0,0,0,.18);

  /* FIX */
  transform:translateX(100%);
  transition:transform .28s ease;
   will-change: transform;

  z-index:99999;
  display:flex;
  flex-direction:column;
}

.drawer-open{
  overflow:hidden;
}


.drawer-open .mobile-overlay{
  opacity:1;
  pointer-events:auto;
}

.drawer-open .mobile-drawer{
  transform:translateX(0);
}


/* =========================
   FULL HEIGHT LAYOUT (nice)
========================= */
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.page-body{
  flex:1;
}

/* =========================
   RESPONSIVE NAV BEHAVIOR
========================= */







/* =========================================================
   ULTRA RESPONSIVE FIX (NO DESIGN CHANGE)
   فقط تكيّف — بدون تغيير شكل
========================================================= */

/* ---------- Tablets ---------- */
@media (max-width: 900px){

  .container-xl{
    width:94%;
  }


  .header-brand{
    flex:1;
    min-width:auto;
  }

  .header-actions{
    flex:1;
    justify-content:flex-end;
  }

  .hero{
    padding:32px 0 36px;
  }

  .hero-title{
    font-size:28px;
    line-height:1.3;
  }

  .hero-subtitle{
    font-size:13px;
  }

  .card-head{
    padding:18px 16px 10px;
  }

  form{
    padding:12px 16px 18px;
  }
}


/* ---------- Large Phones ---------- */
@media (max-width: 600px){

  .container-xl{
    width:96%;
  }

  /* Stack header nicely */
  .header-inner{
    flex-direction:row;
    align-items:center;
  }

  .brand-logo{
    width:38px;
    height:38px;
  }

  .brand-ar{
    font-size:13px;
  }

  .brand-en{
    font-size:10px;
  }

  /* Hero resize */
  .hero-title{
    font-size:24px;
  }

  .hero-subtitle{
    font-size:12px;
  }

  /* Form spacing */
  .card-form{
    border-radius:14px;
  }

  .grid-2{
    grid-template-columns:1fr;
    gap:14px;
  }

  .service-fields{
    grid-template-columns:1fr;
  }

  /* Inputs smaller but same look */
  .form-group input,
  .form-group select{
    height:44px;
    font-size:13px;
  }

  .phone-code{
    height:44px;
  }

  /* Tabs wrap nicer */
  .service-tabs{
    justify-content:flex-start;
  }

  .tab-btn{
    font-size:11px;
    padding:8px 12px;
  }

  /* Buttons full width */
  .actions-row{
    justify-content:stretch;
  }

  .submit-btn{
    width:100%;
    min-width:auto;
  }
}


/* ---------- Small Phones ---------- */
@media (max-width: 420px){

  .hero{
    padding:26px 0 28px;
  }

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

  .hero-subtitle{
    font-size:11px;
  }

  .card-head h2{
    font-size:17px;
  }

  .card-head p{
    font-size:12px;
  }

  .form-group label{
    font-size:12px;
  }

  .form-group input,
  .form-group select{
    height:42px;
    padding:0 14px;
  }

  .phone-wrap{
    gap:6px;
  }

  .phone-code{
    min-width:54px;
    font-size:12px;
  }

  /* Footer stack */
  .footer-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-links{
    grid-template-columns:1fr;
  }

  .footer-bottom{
    flex-direction:column;
    gap:6px;
    text-align:center;
  }
}





/* =========================================================
   RESET
========================================================= */
*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  width:100%;
  position:relative;
}

body{
  font-family:"Tajawal", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:#0a1a24;
  background:#e0e0e0;
}

/* =========================================================
   ROOT
========================================================= */
:root{
  --blue-900:#0a4e74;
  --blue-800:#0c5d88;
  --blue-700:#0f6b9a;
  --blue-200:#eaf5fb;

  --ink:#0a1a24;
  --muted:#6b7b88;
  --line:#e6eef3;

  --white:#ffffff;
  --danger:#d7263d;

  --radius:18px;
  --shadow:0 10px 30px rgba(10,78,116,.08);
  --focus:0 0 0 4px rgba(111,176,214,.25);
}

/* =========================================================
   CONTAINER
========================================================= */
.container-xl{
  width:min(1200px, 92%);
  margin-inline:auto;
}

/* =========================================================
   TOP BAR
========================================================= */
.top-mini-bar{
  background:#fff;
  border-bottom:1px solid var(--line);
  font-size:13px;
  color:var(--muted);
}

.top-mini-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
}

.top-mini-left{
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================================================
   HEADER
========================================================= */
.main-header{
  background:var(--blue-900);
  color:#fff;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
}

/* BRAND */
.header-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:240px;
}

.brand-logo{
  width:42px;
  height:42px;
  border-radius:12px;
  background:#fff;
  color:var(--blue-900);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.brand-ar{ font-weight:800; font-size:14px; }
.brand-en{ font-size:11px; opacity:.9; }

/* NAV */
.header-nav{
  display:flex;
  align-items:center;
  gap:16px;
}

.nav-link{
  color:#e9f6ff;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}

/* ACTIONS */
.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* LANGUAGE */
.lang-btn{
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:#fff;
  padding:9px 12px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
}

/* CTA */
.cta-btn{
  background:#c7373f;
  color:#fff;
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:900;
  font-size:13px;
}

/* =========================================================
   MOBILE TOGGLE
========================================================= */
.mobile-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

/* =========================================================
   MOBILE DRAWER
========================================================= */
.mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
  z-index:9998;
}

.mobile-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:320px;
  max-width:86vw;
  background:#fff;
  box-shadow:-20px 0 50px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s ease;
  z-index:99999;
  display:flex;
  flex-direction:column;
  padding:20px;
}

.drawer-open{
  overflow:hidden;
}

.drawer-open .mobile-overlay{
  opacity:1;
  pointer-events:auto;
}

.drawer-open .mobile-drawer{
  transform:translateX(0);
}

/* =========================================================
   HERO
========================================================= */
.hero{
  background:linear-gradient(180deg, rgba(10,78,116,.95), rgba(10,78,116,.65)),
  url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?q=80&w=1600&auto=format&fit=crop");
  background-size:cover;
  background-position:center;
  color:#fff;
  padding:44px 0 48px;
}

.hero-title{
  margin:0;
  font-size:40px;
  font-weight:900;
}

.hero-subtitle{
  margin:0;
  font-size:14px;
}

/* =========================================================
   FORM + BODY
========================================================= */
.page-body{
  padding:26px 0 36px;
}

.card-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* =========================================================
   RESPONSIVE FIX
========================================================= */
@media (max-width:900px){

  .header-nav{
    display:none !important;
  }

  .mobile-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .header-brand{
    margin-inline:auto;
    min-width:auto;
  }

  .cta-btn{
    padding:8px 12px;
    font-size:12px;
  }
}

/* PHONES */
@media (max-width:600px){

  .hero-title{
    font-size:24px;
  }

  .grid-2{
    grid-template-columns:1fr;
  }
}



/* =========================================
   MOBILE HEADER — CLEAN STRUCTURE
========================================= */

@media (max-width: 900px){

  .header-inner{
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items:center;
    gap:10px;
  }

  /* زر المنيو يسار */
  .mobile-toggle{
    display:flex;
    order:1;
  }

  /* الشعار بالنص */
  .header-brand{
    order:2;
    justify-self:center;
    text-align:center;
  }

  /* الأزرار يمين */
  .header-actions{
    order:3;
    min-width:auto;
    gap:8px;
  }

  /* زر اللغة يصغر */
  .lang-btn{
    padding:6px 10px;
    font-size:12px;
  }

  /* زر الحجز يصغر */
  .cta-btn{
    padding:7px 10px;
    font-size:11px;
    white-space:nowrap;
  }

}


/* =========================================
   MOBILE DRAWER UI IMPROVEMENT
========================================= */

.mobile-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid #e6eef3;
}

.mobile-drawer-title{
  font-weight:900;
  color:#0a4e74;
  font-size:16px;
}

.mobile-close{
  width:34px;
  height:34px;
  border-radius:8px;
  border:1px solid #dbe7ef;
  background:#fff;
  cursor:pointer;
  font-weight:900;
}

.mobile-drawer-links{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mobile-drawer-links a{
  display:block;
  padding:12px 14px;
  border:1px solid #e3edf5;
  border-radius:12px;
  text-decoration:none;
  color:#0a4e74;
  font-weight:800;
  background:#f7fbff;
  transition:.2s;
}

.mobile-drawer-links a:hover{
  background:#eaf5fb;
  transform:translateX(-2px);
}


/* =========================================
   reCAPTCHA FULL MOBILE FIX
========================================= */

.recaptcha-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  overflow:visible;
}

.recaptcha-group{
  overflow:visible;
}

/* Fix clipping from parent cards */
.card-form,
.service-box{
  overflow:visible !important;
}



/* ===== Logo Image ===== */

.brand-logo-img{
  height: 60px;      /* حجم الشعار */
  width: auto;
  object-fit: contain;
  display: block;
}

/* للجوال */
@media (max-width:768px){
  .brand-logo-img{
    height: 28px;
  }
}



/* ===== FIX HORIZONTAL SCROLL SAFE ===== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.container-xl,
.main-header,
.hero,
.page-body,
.main-footer {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  max-width: 100%;
}




html, body{
  overflow-x:hidden;
  width:100%;
    position:relative;
}






:root{
  --blue-900:#0a4e74;
  --blue-800:#0c5d88;
  --blue-700:#0f6b9a;
  --blue-200:#eaf5fb;

  --ink:#0a1a24;
  --muted:#6b7b88;
  --line:#e6eef3;

  --white:#ffffff;
  --danger:#d7263d;

  --radius:18px;

  --shadow:0 10px 30px rgba(10,78,116,.08);
  --focus:0 0 0 4px rgba(111,176,214,.25);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:"Tajawal", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--ink);
  background:#e0e0e0;

  overflow-x:hidden;   /* ← يمنع السحب */
}


.container-xl{
  width:min(1200px, 92%);
  margin-inline:auto;
}

/* =========================
   TOP MINI BAR
========================= */
.top-mini-bar{
  background:#ffffff;
  border-bottom:1px solid var(--line);
  font-size:13px;
  color:var(--muted);
}
.top-mini-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
}
.top-mini-left{ display:flex; align-items:center; gap:10px; }
.dot{ opacity:.5; }
.mini-social{
  width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  color:var(--muted);
  font-weight:800;
  margin-inline-start:6px;
  transition:.2s ease;
}
.mini-social:hover{
  border-color:#cfe6f4;
  color:var(--blue-900);
  transform:translateY(-1px);
}

/* =========================
   HEADER
========================= */
.main-header{
  background:var(--blue-900);
  color:#fff;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
}

.header-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:240px;
}
.brand-logo{
  width:42px;height:42px;
  border-radius:12px;
  background:#fff;
  color:var(--blue-900);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  letter-spacing:.5px;
}
.brand-titles{ line-height:1.1; }
.brand-ar{ font-weight:800; font-size:14px; }
.brand-en{ font-size:11px; opacity:.9; letter-spacing:.4px; }

.header-nav{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}
.nav-link{
  color:#e9f6ff;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  opacity:.95;
  transition:.2s ease;
}
.nav-link:hover{
  opacity:1;
  text-decoration:underline;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-end;
  min-width:260px;
}

.lang-btn{
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:#fff;
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  display:flex; align-items:center; gap:8px;
  transition:.2s ease;
}
.lang-dot{
  width:8px;height:8px;border-radius:99px;background:#fff;opacity:.9;
}
.lang-btn:hover{
  border-color:rgba(255,255,255,.45);
  transform:translateY(-1px);
}

.cta-btn{
  background:#c7373f;
  color:#fff;
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:900;
  font-size:13px;
  transition:.2s ease;
}
.cta-btn:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}

/* =========================
   HERO
========================= */
.hero{
  background:linear-gradient(180deg, rgba(10,78,116,.95), rgba(10,78,116,.65)),
    url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?q=80&w=1600&auto=format&fit=crop");
  background-size:cover;
  background-position:center;
  color:#fff;
  padding:44px 0 48px;
}
.hero-inner{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hero-title{
  margin:0;
  font-size:40px;
  font-weight:900;
  letter-spacing:.2px;
}
.hero-subtitle{
  margin:0;
  opacity:.95;
  font-size:14px;
  font-weight:500;
}

/* =========================
   BODY
========================= */
.page-body{
  padding:26px 0 36px;
}

.card-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.card-head{
  padding:22px 22px 12px;
}
.card-head h2{
  margin:0;
  font-size:20px;
  font-weight:900;
  color:var(--blue-900);
}
.card-head p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
}

form{
  padding:14px 22px 22px;
}

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px 18px;
}

.form-group label{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:900;
  font-size:13px;
  color:var(--blue-900);
  margin-bottom:7px;
}
.req{
  color:var(--danger);
  font-weight:900;
}

/* =========================
   INPUTS / SELECTS
========================= */
.form-group input,
.form-group select{
  width:100%;
  height:48px;
  border:1px solid #cfe3f0;
  border-radius:999px;
  padding:0 16px;
  outline:none;
  font-size:14px;
  transition:.2s ease;
  background:#fff;
  color:var(--ink);
}

.form-group input::placeholder{
  color:#9aa8b3;
}

.form-group input:focus,
.form-group select:focus{
  border-color:#6fb0d6;
  box-shadow:var(--focus);
}

/* ✅ Fix date input looks clean */
input[type="date"]{
  direction: rtl;
  text-align: right;
  padding-inline:16px;
}
html[dir="ltr"] input[type="date"]{
  direction:ltr;
  text-align:left;
}

/* Remove ugly default arrow styling issues on some browsers */
select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #7aa7c3 50%),
    linear-gradient(135deg, #7aa7c3 50%, transparent 50%);
  background-position:
    calc(16px) 50%,
    calc(10px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* ✅ No hints anymore */
.hint{ display:none !important; }

/* Errors */
.error-msg{
  display:none;
  margin-top:6px;
  color:var(--danger);
  font-size:12px;
  font-weight:800;
}

/* =========================
   PHONE FIELD
========================= */
.phone-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.phone-code{
  height:48px;
  padding:0 14px;
  border:1px solid #cfe3f0;
  border-radius:999px;
  display:flex;
  align-items:center;
  font-weight:900;
  color:var(--blue-900);
  background:#f7fcff;
  min-width:62px;
  justify-content:center;
}

/* =========================
   DIVIDER
========================= */
.section-divider{
  border-top:1px solid var(--line);
  margin:18px 0;
}

/* =========================
   SERVICE TABS
========================= */
.service-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.service-title{
  color:var(--blue-900);
  font-weight:900;
  font-size:14px;
}

.service-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.tab-btn{
  border:1px solid #8dc0de;
  background:#fff;
  color:var(--blue-900);
  border-radius:999px;
  padding:9px 14px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  transition:.2s ease;
}
.tab-btn:hover{
  background:rgba(15,107,154,.06);
  transform:translateY(-1px);
}
.tab-btn.active{
  background:var(--blue-900);
  color:#fff;
  border-color:var(--blue-900);
}

.service-box{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  padding:18px 18px 14px;
}

.service-box-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.service-box-head h3{
  margin:0;
  font-size:18px;
  color:var(--blue-900);
  font-weight:900;
}

.instructions{
  flex:1;
  min-width:260px;
}
.instructions-title{
  font-weight:900;
  color:var(--muted);
  font-size:13px;
  margin-bottom:6px;
}
.instructions ul{
  margin:0;
  padding-inline-start:18px;
  color:#4f6270;
  font-size:13px;
  line-height:1.7;
}

/* ✅ service dynamic fields */
.service-fields{
  padding-top:16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

/* =========================
   RADIO
========================= */
.radio-block{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.radio-title{
  font-weight:900;
  color:var(--blue-900);
  margin-bottom:10px;
}

.radio-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.radio-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:#345062;
}
.radio-item input{
  transform:scale(1.12);
  accent-color: var(--blue-900);
}

/* =========================
   ACTIONS
========================= */
.actions-row{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}

.submit-btn{
  background:var(--blue-900);
  border:none;
  color:#fff;
  border-radius:999px;
  padding:12px 22px;
  font-weight:900;
  cursor:pointer;
  min-width:160px;
  transition:.2s ease;
}
.submit-btn:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}
.submit-btn:active{
  transform:translateY(0px);
}

/* =========================
   FOOTER
========================= */
.main-footer{
  background:linear-gradient(180deg, #b7d7ea, #a6cbe1);
  padding:24px 0 14px;
  margin-top:30px;
  border-top:1px solid rgba(255,255,255,.7);
}

.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.footer-news-title{
  font-weight:900;
  color:#1b445c;
  margin-bottom:10px;
}

.footer-news-box{
  display:flex;
  gap:10px;
  align-items:center;
}

.footer-news-box input{
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.8);
  padding:0 16px;
  outline:none;
  width:min(380px, 60vw);
}

.footer-news-box button{
  height:44px;
  border-radius:999px;
  border:none;
  background:var(--blue-900);
  color:#fff;
  font-weight:900;
  padding:0 18px;
  cursor:pointer;
  transition:.2s ease;
}
.footer-news-box button:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}

.footer-links{
  padding-top:18px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:18px;
}

.footer-col h4{
  margin:0 0 10px;
  color:#1b445c;
  font-weight:900;
}

.footer-col a{
  display:block;
  text-decoration:none;
  color:#1f475f;
  opacity:.88;
  margin:7px 0;
  font-weight:700;
  font-size:13px;
  transition:.2s ease;
}
.footer-col a:hover{
  opacity:1;
  text-decoration:underline;
}

.footer-bottom{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.65);
  color:#1b445c;
  font-weight:800;
  font-size:13px;
  display:flex;
  justify-content:space-between;
}

/* =========================
   VALIDATION UI
========================= */
.is-invalid{
  border-color:rgba(215,38,61,.7) !important;
  box-shadow:0 0 0 4px rgba(215,38,61,.12) !important;
}

/* =========================
   RESPONSIVE
========================= */
/* =========================================================
   HEADER MOBILE FIX — CLEAN STACK
   بدون تغيير ألوان أو ستايل
========================================================= */

@media (max-width: 900px){

  /* الهيدر صف واحد مرتب */
 .header-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
  }

  /* الشعار بالنص */
  .header-brand{
    justify-self:center;
    min-width:auto;
  }

  /* القائمة تختفي */
  .header-nav{
    display:none !important;
  }

  /* اللغة تختفي (تروح للمنيو الجانبي) 
  .lang-btn{
    display:none;
  }*/

  /* زر الحجز يصغر بدون ما يتغير شكله */
  .cta-btn{
    padding:8px 12px;
    font-size:12px;
    border-radius:10px;
    white-space:nowrap;
  }

  /* زر المنيو يظهر */
  .mobile-toggle{
    display:inline-flex;
    order:-1;
  }

  /* الهيدر ما يتمدد */
  .header-actions{
    min-width:auto;
    gap:8px;
  }
}



/* =========================
   MOBILE NAV (SIDEBAR)
========================= */
.mobile-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:900;
  transition:.2s ease;
}
.mobile-toggle:hover{
  border-color:rgba(255,255,255,.45);
  transform:translateY(-1px);
}

.mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
  z-index:9998;
}


.mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
  z-index:9998;
}

.mobile-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:320px;
  max-width:86vw;
  background:#ffffff;
  box-shadow:-20px 0 50px rgba(0,0,0,.18);

  /* FIX */
  transform:translateX(100%);
  transition:transform .28s ease;
   will-change: transform;

  z-index:99999;
  display:flex;
  flex-direction:column;
}

.drawer-open{
  overflow:hidden;
}


.drawer-open .mobile-overlay{
  opacity:1;
  pointer-events:auto;
}

.drawer-open .mobile-drawer{
  transform:translateX(0);
}


/* =========================
   FULL HEIGHT LAYOUT (nice)
========================= */
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.page-body{
  flex:1;
}

/* =========================
   RESPONSIVE NAV BEHAVIOR
========================= */







/* =========================================================
   ULTRA RESPONSIVE FIX (NO DESIGN CHANGE)
   فقط تكيّف — بدون تغيير شكل
========================================================= */

/* ---------- Tablets ---------- */
@media (max-width: 900px){

  .container-xl{
    width:94%;
  }


  .header-brand{
    flex:1;
    min-width:auto;
  }

  .header-actions{
    flex:1;
    justify-content:flex-end;
  }

  .hero{
    padding:32px 0 36px;
  }

  .hero-title{
    font-size:28px;
    line-height:1.3;
  }

  .hero-subtitle{
    font-size:13px;
  }

  .card-head{
    padding:18px 16px 10px;
  }

  form{
    padding:12px 16px 18px;
  }
}


/* ---------- Large Phones ---------- */
@media (max-width: 600px){

  .container-xl{
    width:96%;
  }

  /* Stack header nicely */
  .header-inner{
    flex-direction:row;
    align-items:center;
  }

  .brand-logo{
    width:38px;
    height:38px;
  }

  .brand-ar{
    font-size:13px;
  }

  .brand-en{
    font-size:10px;
  }

  /* Hero resize */
  .hero-title{
    font-size:24px;
  }

  .hero-subtitle{
    font-size:12px;
  }

  /* Form spacing */
  .card-form{
    border-radius:14px;
  }

  .grid-2{
    grid-template-columns:1fr;
    gap:14px;
  }

  .service-fields{
    grid-template-columns:1fr;
  }

  /* Inputs smaller but same look */
  .form-group input,
  .form-group select{
    height:44px;
    font-size:13px;
  }

  .phone-code{
    height:44px;
  }

  /* Tabs wrap nicer */
  .service-tabs{
    justify-content:flex-start;
  }

  .tab-btn{
    font-size:11px;
    padding:8px 12px;
  }

  /* Buttons full width */
  .actions-row{
    justify-content:stretch;
  }

  .submit-btn{
    width:100%;
    min-width:auto;
  }
}


/* ---------- Small Phones ---------- */
@media (max-width: 420px){

  .hero{
    padding:26px 0 28px;
  }

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

  .hero-subtitle{
    font-size:11px;
  }

  .card-head h2{
    font-size:17px;
  }

  .card-head p{
    font-size:12px;
  }

  .form-group label{
    font-size:12px;
  }

  .form-group input,
  .form-group select{
    height:42px;
    padding:0 14px;
  }

  .phone-wrap{
    gap:6px;
  }

  .phone-code{
    min-width:54px;
    font-size:12px;
  }

  /* Footer stack */
  .footer-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-links{
    grid-template-columns:1fr;
  }

  .footer-bottom{
    flex-direction:column;
    gap:6px;
    text-align:center;
  }
}





/* =========================================================
   RESET
========================================================= */
*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  width:100%;
  position:relative;
}

body{
  font-family:"Tajawal", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:#0a1a24;
  background:#e0e0e0;
}

/* =========================================================
   ROOT
========================================================= */
:root{
  --blue-900:#0a4e74;
  --blue-800:#0c5d88;
  --blue-700:#0f6b9a;
  --blue-200:#eaf5fb;

  --ink:#0a1a24;
  --muted:#6b7b88;
  --line:#e6eef3;

  --white:#ffffff;
  --danger:#d7263d;

  --radius:18px;
  --shadow:0 10px 30px rgba(10,78,116,.08);
  --focus:0 0 0 4px rgba(111,176,214,.25);
}

/* =========================================================
   CONTAINER
========================================================= */
.container-xl{
  width:min(1200px, 92%);
  margin-inline:auto;
}

/* =========================================================
   TOP BAR
========================================================= */
.top-mini-bar{
  background:#fff;
  border-bottom:1px solid var(--line);
  font-size:13px;
  color:var(--muted);
}

.top-mini-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
}

.top-mini-left{
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================================================
   HEADER
========================================================= */
.main-header{
  background:var(--blue-900);
  color:#fff;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
}

/* BRAND */
.header-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:240px;
}

.brand-logo{
  width:42px;
  height:42px;
  border-radius:12px;
  background:#fff;
  color:var(--blue-900);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
}

.brand-ar{ font-weight:800; font-size:14px; }
.brand-en{ font-size:11px; opacity:.9; }

/* NAV */
.header-nav{
  display:flex;
  align-items:center;
  gap:16px;
}

.nav-link{
  color:#e9f6ff;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
}

/* ACTIONS */
.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* LANGUAGE */
.lang-btn{
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:#fff;
  padding:9px 12px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
}

/* CTA */
.cta-btn{
  background:#c7373f;
  color:#fff;
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:900;
  font-size:13px;
}

/* =========================================================
   MOBILE TOGGLE
========================================================= */
.mobile-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

/* =========================================================
   MOBILE DRAWER
========================================================= */
.mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
  z-index:9998;
}

.mobile-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:320px;
  max-width:86vw;
  background:#fff;
  box-shadow:-20px 0 50px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .28s ease;
  z-index:99999;
  display:flex;
  flex-direction:column;
  padding:20px;
}

.drawer-open{
  overflow:hidden;
}

.drawer-open .mobile-overlay{
  opacity:1;
  pointer-events:auto;
}

.drawer-open .mobile-drawer{
  transform:translateX(0);
}

/* =========================================================
   HERO
========================================================= */
.hero{
  background:linear-gradient(180deg, rgba(10,78,116,.95), rgba(10,78,116,.65)),
  url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?q=80&w=1600&auto=format&fit=crop");
  background-size:cover;
  background-position:center;
  color:#fff;
  padding:44px 0 48px;
}

.hero-title{
  margin:0;
  font-size:40px;
  font-weight:900;
}

.hero-subtitle{
  margin:0;
  font-size:14px;
}

/* =========================================================
   FORM + BODY
========================================================= */
.page-body{
  padding:26px 0 36px;
}

.card-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* =========================================================
   RESPONSIVE FIX
========================================================= */
@media (max-width:900px){

  .header-nav{
    display:none !important;
  }

  .mobile-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .header-brand{
    margin-inline:auto;
    min-width:auto;
  }

  .cta-btn{
    padding:8px 12px;
    font-size:12px;
  }
}

/* PHONES */
@media (max-width:600px){

  .hero-title{
    font-size:24px;
  }

  .grid-2{
    grid-template-columns:1fr;
  }
}



/* =========================================
   MOBILE HEADER — CLEAN STRUCTURE
========================================= */

@media (max-width: 900px){

  .header-inner{
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items:center;
    gap:10px;
  }

  /* زر المنيو يسار */
  .mobile-toggle{
    display:flex;
    order:1;
  }

  /* الشعار بالنص */
  .header-brand{
    order:2;
    justify-self:center;
    text-align:center;
  }

  /* الأزرار يمين */
  .header-actions{
    order:3;
    min-width:auto;
    gap:8px;
  }

  /* زر اللغة يصغر */
  .lang-btn{
    padding:6px 10px;
    font-size:12px;
  }

  /* زر الحجز يصغر */
  .cta-btn{
    padding:7px 10px;
    font-size:11px;
    white-space:nowrap;
  }

}


/* =========================================
   MOBILE DRAWER UI IMPROVEMENT
========================================= */

.mobile-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid #e6eef3;
}

.mobile-drawer-title{
  font-weight:900;
  color:#0a4e74;
  font-size:16px;
}

.mobile-close{
  width:34px;
  height:34px;
  border-radius:8px;
  border:1px solid #dbe7ef;
  background:#fff;
  cursor:pointer;
  font-weight:900;
}

.mobile-drawer-links{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mobile-drawer-links a{
  display:block;
  padding:12px 14px;
  border:1px solid #e3edf5;
  border-radius:12px;
  text-decoration:none;
  color:#0a4e74;
  font-weight:800;
  background:#f7fbff;
  transition:.2s;
}

.mobile-drawer-links a:hover{
  background:#eaf5fb;
  transform:translateX(-2px);
}


/* =========================================
   reCAPTCHA FULL MOBILE FIX
========================================= */

.recaptcha-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  overflow:visible;
}

.recaptcha-group{
  overflow:visible;
}

/* Fix clipping from parent cards */
.card-form,
.service-box{
  overflow:visible !important;
}



/* ===== Logo Image ===== */

.brand-logo-img{
  height: 60px;      /* حجم الشعار */
  width: auto;
  object-fit: contain;
  display: block;
}

/* للجوال */
@media (max-width:768px){
  .brand-logo-img{
    height: 28px;
  }
}



/* ===== FIX HORIZONTAL SCROLL SAFE ===== */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.container-xl,
.main-header,
.hero,
.page-body,
.main-footer {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  max-width: 100%;
}


/* تصغير عرض حقول التاريخ فقط بدون تخريب التصميم */

input[type="date"],
input[type="datetime-local"],
input[type="time"]{
width:180px !important;
min-width:180px;
max-width:180px;
}

/* في الشاشات الصغيرة */
@media (max-width:768px){
input[type="date"],
input[type="datetime-local"],
input[type="time"]{
width:100% !important;
max-width:100%;
}
}



/* منع تمدد حقل التاريخ عند الضغط */

input[type="date"]{
width:100%;
max-width:100%;
box-sizing:border-box;
}

input[type="date"]:focus,
input[type="date"]:active{
width:100% !important;
max-width:100% !important;
}

/* fix خاص iOS Safari */
input[type="date"]::-webkit-datetime-edit{
display:flex;
width:100%;
}

input[type="date"]::-webkit-date-and-time-value{
text-align:right;
}

/* منع التمدد داخل الفورم */
.form-group,
.form-field,
.field-wrapper{
overflow:hidden;
}





/* توسيط حقل التاريخ فقط */

input[type="date"],
input[type="datetime-local"],
input[type="time"]{
text-align:center;
}




/* fix english date alignment only */

html[lang="en"] input[type="date"]{
text-align:left !important;
direction:ltr !important;
}







html[lang="en"] input[type="date"],
html[lang="en"] input[type="datetime-local"]{
text-align !important;
direction !important;
unicode-bidi !important;
letter-spacing:0 !important;
font-variant-numeric !important;
}