/* ====== متغيرات الألوان والثيم ====== */
:root{
  --brand:#009fe3; --brand-2:#2c7a7b;
  --bg:#0f172a0a;
  --card:#ffffff; --text:#1f2937; --muted:#4a5568; --line:#e2e8f0;
  --pill-bg:#e9f6ff; --pill-border:#cfe9fb; --pill-text:#0f3b59;
  --hero-text:#ffffff; --btn-top:#0ea5e9; --btn-top-hover:#0284c7;

  --input-bg:#ffffff; --input-text:#1f2937; --input-border:#e2e8f0;
  --header-fg:#ffffff;
  --error:#e11d48; --success:#16a34a;
}
body.theme-dark{
  --bg:#0b1324;
  --card:#0f172a; --text:#e2e8f0; --muted:#cbd5e1; --line:#1f2937;
  --pill-bg:#0b2940; --pill-border:#1e3a5f; --pill-text:#dbeafe;
  --hero-text:#e5f2ff; --btn-top:#38bdf8; --btn-top-hover:#0ea5e9;

  --input-bg:#0b1e34; --input-text:#e2e8f0; --input-border:#1f2a3b;
  --header-fg:#eaf6ff;
}

/* ====== أساسيات + انتقالات عامة ====== */
*{margin:0;padding:0;box-sizing:border-box}
html{ text-size-adjust:100%; scroll-behavior:smooth }
html,body{width:100%; overflow-x:hidden}
body{
  font-family:'Cairo',sans-serif; background:var(--bg); color:var(--text);
  line-height:1.7; padding:20px;
  transition: background-color .35s ease, color .35s ease;
}
body{ opacity:0; animation:fadeIn .6s ease forwards }
@keyframes fadeIn{ to{opacity:1} }

.container,.wrap{
  max-width:1200px; margin:0 auto; background:var(--card); border-radius:16px; overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.06); border:1px solid var(--line);
}
.wrap{max-width:900px}
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ====== فلاش تبديل الثيم ====== */
body.theme-flip::before{
  content:""; position:fixed; inset:0;
  background:radial-gradient(1200px 600px at 50% 50%, rgba(255,255,255,.15), rgba(0,0,0,.35));
  pointer-events:none; opacity:0; animation:flipFade .45s ease;
  z-index:9999;
}
@keyframes flipFade{ 0%{opacity:.8} 100%{opacity:0} }

/* ====== رأس عام ====== */
header{
  position:relative; text-align:center; color:var(--hero-text);
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  padding:64px 20px 96px; transition:background .35s ease;
}
.wrap > header{ padding:28px 20px; color:var(--header-fg) }
header h1{font-size:2.5rem; font-weight:700}
.wrap > header h1{font-size:1.8rem}
header p{font-size:1.1rem; opacity:.95; margin-top:8px}

/* زر الثيم (يسار) */
.theme-toggle{
  position:absolute; top:14px; left:14px; width:40px; height:40px; border:none; border-radius:50%;
  background:rgba(255,255,255,.2); color:#fff; backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.theme-toggle:hover{ transform:scale(1.05); background:rgba(255,255,255,.28) }
body.theme-dark .theme-toggle{ background:rgba(0,0,0,.25) }
/* إظهار زر الثيم في صفحة الحجز */
body.page-book .theme-toggle{ display:flex !important; }

.wave{ position:absolute; left:0; right:0; bottom:-1px; width:100% }
header .wave path{ fill:var(--card); transition:fill .35s ease }

/* ====== CTA ====== */
.cta{ margin-top:20px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap }
.btn{ display:inline-flex; align-items:center; gap:8px; border:none; border-radius:12px; cursor:pointer; padding:14px 20px; font-size:1rem; font-weight:800; text-decoration:none; color:#fff; transition:.2s ease; outline:none; box-shadow:0 8px 20px rgba(0,0,0,.12) }
.btn:focus-visible{ box-shadow:0 0 0 3px rgba(255,255,255,.45) }
.btn:hover{ transform:translateY(-2px) }
.btn-call{ background:var(--btn-top) } .btn-call:hover{ background:var(--btn-top-hover) }
.btn-wa{ background:#16a34a } .btn-wa:hover{ background:#15803d }
.btn-book{ background:#f59e0b } .btn-book:hover{ background:#d97706 }

/* ====== بطاقات التواصل ====== */
.contact-section{ margin-top:32px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; padding:40px 24px }
.contact-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; text-align:center; padding:24px 18px; transition:.3s ease; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.05) }
.contact-card:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.08) }
.contact-card i{ background:#009fe3; color:#fff; border-radius:50%; width:64px; height:64px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:1.6rem }
body.theme-dark .contact-card i{ background:#0ea5e9 }
.contact-card h3{font-size:1.1rem; color:var(--text); margin-bottom:8px}
.pill{ display:flex; align-items:center; gap:8px; background:var(--pill-bg); border:1px solid var(--pill-border); color:var(--pill-text); padding:10px 12px; border-radius:10px; text-decoration:none; font-weight:700; width:100%; white-space:nowrap; direction:ltr; unicode-bidi:plaintext }
.contact-card a.link, .contact-card button.link{ color:#009fe3; text-decoration:none; font-weight:700; transition:.2s; background:none; border:none; padding:0; cursor:pointer }
.contact-card a.link:hover, .contact-card button.link:hover{ text-decoration:underline }

/* ====== الخدمات ====== */
.services{ background:var(--bg); padding:50px 24px; text-align:center }
.services h2{ font-size:1.8rem; margin-bottom:28px; color:var(--text) }
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px }
.service-box{ background:var(--card); border-radius:12px; border:1px solid var(--line); padding:18px 16px; transition:.3s ease; box-shadow:0 6px 18px rgba(0,0,0,.05) }
.service-box:hover{ transform:translateY(-4px); box-shadow:0 10px 22px rgba(0,0,0,.08) }
.service-box p{ color:var(--muted); font-size:1.02rem }

/* ====== السوشيال ====== */
.social{ padding:50px 20px; text-align:center; background:var(--card); border-top:1px solid var(--line) }
.social h2{ font-size:1.8rem; margin-bottom:20px; color:var(--text) }
.social-icons{ display:flex; justify-content:center; gap:22px; flex-wrap:wrap }
.social-icon{ width:68px; height:68px; border-radius:50%; background:#f9fcfe; display:flex; align-items:center; justify-content:center; transition:.2s ease; box-shadow:0 4px 15px rgba(0,0,0,.05); text-decoration:none }
body.theme-dark .social-icon{ background:#0b2940 }
.social-icon:hover{ transform:scale(1.08) }
.social-icon i{ font-size:1.6rem }
.whatsapp i{ color:#25d366 } .facebook i{ color:#1877f2 } .instagram i{ color:#e4405f }
.vcard-btn{ background:var(--brand-2); color:#fff; border:none; border-radius:8px; padding:12px 18px; font-size:1rem; text-decoration:none; display:inline-flex; align-items:center; gap:8px; margin-top:22px; transition:.2s }
.vcard-btn:hover{ background:#25625f }

/* ====== الموقع ====== */
.location{ background:var(--bg); padding:50px 24px; text-align:center }
.location h2{ font-size:1.8rem; margin-bottom:22px; color:var(--text) }
.location-card{ max-width:620px; margin:0 auto; background:var(--card); border-radius:12px; border:1px solid var(--line); padding:24px; box-shadow:0 8px 20px rgba(0,0,0,.03) }
.location-card i{ color:#009fe3; font-size:2rem; margin-bottom:10px }
body.theme-dark .location-card i{ color:#0ea5e9 }
.location-card p{ font-size:1.05rem; color:var(--muted); margin-bottom:16px; word-break:break-word; overflow-wrap:anywhere }
.maps-button{ background:#009fe3; color:#fff; border:none; border-radius:8px; padding:10px 16px; cursor:pointer; transition:.2s; font-size:1rem }
.maps-button:hover{ background:#007bb8 }

/* ====== أخرى ====== */
footer{ background:#2d3748; color:#fff; text-align:center; padding:26px 18px; font-size:.95rem }
.fab-wa{ position:fixed; z-index:999; right:16px; bottom:16px; width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.2); text-decoration:none }
.fab-wa i{ font-size:1.6rem }
#toTop{ position:fixed; right:16px; bottom:84px; width:44px; height:44px; border:none; border-radius:50%; background:#0ea5e9; color:#fff; display:none; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:999 }
#toTop.show{ display:flex }

/* ====== صفحة الحجز (الأيقونات داخل الحقول) ====== */
.content{ padding:26px 18px }
.form-card{
  background:linear-gradient(180deg, color-mix(in srgb, var(--card), transparent 0%), color-mix(in srgb, var(--card), transparent 6%));
  border:1px solid var(--line); border-radius:16px; padding:22px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.form-steps{ display:flex; gap:10px; justify-content:center; margin:10px 0 18px }
.step-chip{
  padding:8px 12px; border-radius:999px; font-weight:800; font-size:.95rem;
  background:color-mix(in srgb, var(--brand), white 70%); color:#0b2a3a;
  border:1px solid color-mix(in srgb, var(--brand), white 55%);
}
body.theme-dark .step-chip{ color:#e6f7ff }
form{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px }
@media (max-width:900px){ form{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:520px){ form{ grid-template-columns:1fr } }
.full{ grid-column:1/-1 }
label{ display:block; font-weight:800; margin-bottom:6px }
.input-icon{ position:relative }
.input-icon::before{
  position:absolute; right:12px; top:38px;
  font-family:"Font Awesome 6 Free"; font-weight:900; font-size:1rem; line-height:1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  color:color-mix(in srgb, var(--text), transparent 40%); content:""; pointer-events:none;
}
.input-name::before{ content:"\f007" }     /* user */
.input-phone::before{ content:"\f095" }    /* phone */
.input-email::before{ content:"\f0e0" }    /* envelope */
.input-service::before{ content:"\f21e" }  /* heart-pulse */
.input-date::before{ content:"\f073" }     /* calendar */
.input-time::before{ content:"\f017" }     /* clock */
input, select, textarea{
  width:100%; padding:12px 42px 12px 14px; border-radius:12px; font-family:inherit; font-size:1rem;
  background:var(--input-bg); color:var(--input-text); border:1px solid var(--input-border);
  outline:none; transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
input:focus, select:focus, textarea:focus{
  border-color:color-mix(in srgb, var(--brand), #fff 10%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand), transparent 70%);
}
textarea{ min-height:120px; resize:vertical }
.hint{ display:block; margin-top:6px; font-size:.9rem; color:color-mix(in srgb, var(--muted), transparent 10%) }
.field-error{ margin-top:6px; font-size:.92rem; color:var(--error) }
input:invalid[aria-invalid="true"], select:invalid[aria-invalid="true"]{
  border-color:var(--error);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--error), transparent 75%);
}
.consent{ grid-column:1/-1 }
.consent label{ display:flex; gap:10px; align-items:center; font-weight:700 }
.consent input[type="checkbox"]{ inline-size:18px; block-size:18px; accent-color:#2c7a7b }
.actions{ display:flex; gap:10px; align-items:center; margin-top:6px }
button[type="submit"]{
  background:var(--brand-2); color:#fff; border:none; border-radius:12px;
  padding:12px 20px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  box-shadow:0 10px 20px rgba(0,0,0,.12); transition:transform .15s ease, background .2s ease;
}
button[type="submit"]:hover{ background:#25625f; transform:translateY(-1px) }
button[type="submit"].loading{ pointer-events:none; opacity:.85 }
button[type="submit"].loading::after{
  content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff; display:inline-block; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.back{ text-decoration:none; font-weight:700; color:var(--brand) }
.hp{ display:none !important }
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto; animation:none!important}
  .social-icon:hover, .contact-card:hover, .service-box:hover{ transform:none }
}

/* ====== صفحة شركات التأمين ====== */
body.page-insurers header{ padding-bottom:120px }
.insure-filter{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:6px 0 18px;
}
.insure-filter .search{ position:relative; flex:1 1 auto }
.insure-filter .search-ico{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  opacity:.6; pointer-events:none; font-size:1rem;
}
.insure-filter input[type="search"]{
  width:100%; padding:12px 40px 12px 14px; border-radius:12px;
  border:1px solid var(--input-border); background:var(--input-bg); color:var(--input-text);
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.insure-filter input[type="search"]:focus{
  border-color:color-mix(in srgb, var(--brand), #fff 10%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand), transparent 70%);
}
.badge{
  background:color-mix(in srgb, var(--brand), white 70%);
  color:#0b2a3a; border:1px solid color-mix(in srgb, var(--brand), white 55%);
  padding:8px 12px; border-radius:999px; font-weight:800; white-space:nowrap;
}
.brand-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px }
.brand-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  padding:22px; gap:8px; min-height:170px; text-align:center;
  box-shadow:0 6px 16px rgba(0,0,0,.04); transition:.2s;
}
.brand-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.08) }
.brand-card img{ max-width:80%; max-height:64px; display:block; object-fit:contain; margin-bottom:4px }
.brand-card .fallback{
  width:72px; height:72px; border-radius:18px; display:grid; place-items:center; margin-bottom:6px;
  font-weight:800; color:#fff; background:linear-gradient(135deg,#0ea5e9,#2c7a7b); font-size:1.05rem;
}
.brand-card figcaption{ font-weight:800; color:var(--text) }

/* ====== زر القائمة داخل الهيدر ====== */
header{ position:relative }
.menu-toggle{
  position:absolute; top:14px; right:14px;
  width:40px; height:40px; border:none; border-radius:50%;
  background:rgba(255,255,255,.2); color:#fff; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; backdrop-filter:blur(6px);
  box-shadow:0 6px 16px rgba(0,0,0,.15); transition:.2s ease; z-index:5;
}
.menu-toggle:hover{ transform:scale(1.05); background:rgba(255,255,255,.28) }
body.theme-dark .menu-toggle{ background:rgba(0,0,0,.25) }
.menu-panel{
  position:absolute; top:60px; right:14px; min-width:220px; z-index:6;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 14px 32px rgba(0,0,0,.18); padding:8px; display:none;
}
.menu-panel.show{ display:block }
.menu-panel a{
  display:block; padding:10px 12px; border-radius:8px; text-decoration:none; color:var(--text); font-weight:700;
}
.menu-panel a:hover{ background:color-mix(in srgb, var(--brand), white 85%) }

.menu-toggle{ touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.menu-panel{ pointer-events: auto; }




/* ====== فلترة حسب النوع (شركات/TPA/نقابات) ====== */
.type-filter{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end;
}
.type-btn{
  border:1px solid var(--line); background:var(--card); color:var(--text);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:800;
  transition:.15s ease; box-shadow:0 4px 10px rgba(0,0,0,.04);
}
.type-btn:hover{ transform:translateY(-1px) }
.type-btn.active{
  background:color-mix(in srgb, var(--brand), white 82%);
  border-color:color-mix(in srgb, var(--brand), white 60%);
  color:#0b2a3a;
}

/* روابط البطاقات (لو فيها data-url) */
.brand-card a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; color:inherit; width:100%;
}

/* ====== قسم "شركاؤنا" في الرئيسية ====== */
.partners{ background:var(--card); border-top:1px solid var(--line); padding:36px 20px; text-align:center }
.partners h2{ font-size:1.6rem; margin-bottom:14px; color:var(--text) }
.partners-logos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:16px; align-items:center; justify-items:center; margin:10px auto 18px; max-width:900px }
.partners-logos img{ max-height:40px; max-width:100%; object-fit:contain; filter:grayscale(100%); opacity:.85; transition:.2s }
.partners-logos img:hover{ filter:none; opacity:1 }
.partners-cta{ display:inline-block; padding:10px 14px; border-radius:10px; background:var(--brand); color:#fff; text-decoration:none; font-weight:800 }
.partners-cta:hover{ background:#0ea5e9 }
/* === صفحة شركات التأمين – تحسين ترتيب الجوال فقط === */

/* لو مش موجود عندك مسبقًا، يضمن إن الموجة ما تغطي المحتوى */
body.page-insurers header{ padding-bottom:120px; }

/* شريط البحث + الفلاتر + العدّاد */
.insure-filter{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:6px 0 18px;
}

.insure-filter .search{ position:relative; flex:1 1 360px; }
.insure-filter .search input{
  width:100%; padding:12px 40px 12px 14px;
  border:1px solid var(--input-border); border-radius:12px;
  background:var(--input-bg); color:var(--input-text);
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.insure-filter .search input:focus{
  border-color:color-mix(in srgb, var(--brand), #fff 10%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand), transparent 70%);
}
.insure-filter .search-ico{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  opacity:.6; pointer-events:none; font-size:1rem;
}

/* أزرار النوع */
.type-filter{ display:flex; flex-wrap:wrap; gap:8px; }
.type-btn{
  padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:800;
  border:1px solid color-mix(in srgb, var(--brand), white 55%);
  background:color-mix(in srgb, var(--brand), white 88%); color:#0b2a3a;
}
body.theme-dark .type-btn{
  color:#eaf6ff; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12);
}
.type-btn.active{ background:var(--brand); color:#fff; border-color:transparent; }

/* عدّاد الجهات */
.badge{ margin-inline-start:auto; }

/* ضبط الجوال */
@media (max-width: 768px){
  .insure-filter{
    display:grid; grid-template-columns:1fr; gap:10px;
  }
  .badge{ justify-self:start; } /* يظهر تحت الفلاتر مباشرة */
  .type-filter{
    overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px;
  }
  .type-filter::-webkit-scrollbar{ display:none; }
  .type-btn{ flex:0 0 auto; white-space:nowrap; }

  /* كروت الشركات صف واحد لسهولة اللمس */
  .brand-grid{ grid-template-columns:1fr; gap:14px; }
  .brand-card{ min-height:150px; padding:18px; }
  .brand-card img{ max-height:56px; }
}
/* ===== Footer (الحقوق + شريط المطوّر) ===== */
.site-footer{
  margin-top: 22px;
  padding: 14px 16px;
  text-align: center;
  background: #ffffff;
  color: #222;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
body.theme-dark .site-footer{
  background: #101418;
  color: #e9edf3;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.site-footer .footer-main{ margin-bottom: 10px; font-weight: 600; }

/* شريط المطوّر */
.devbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: linear-gradient(135deg, #0aa0e6, #16c2a1);
  color: #fff;
}
body.theme-dark .devbar{ border-color: rgba(255,255,255,.08); }
.dev-credit{ font-weight: 800; }

/* زر واتساب */
.dev-wa{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.dev-wa:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.dev-wa i{ font-size: 1rem; }

/* عرض الرقم من اليسار لليمين ليتنسق داخل العربية */
.wa-num{
  direction: ltr;
  unicode-bidi: bidi-override;
}

/* موبايل */
@media (max-width:700px){
  .devbar{ flex-direction: column; align-items: stretch; text-align: center; }
  .dev-wa{ justify-content: center; }
}