/* ===========================
   Variables & Base
=========================== */
:root{
  --primary-color: #005f6b;
  --secondary-color: #25d366;
  --light-color: #f9f9f9;
  --dark-color: #2c3e50;

  /* ارتفاع الهيدر الافتراضي (يُستخدم كأوفست عند التثبيت) */
  --header-h: 84px;
}

/* على الشاشات الصغيرة قد يكون الهيدر أعلى */
@media (max-width: 768px){
  :root{ --header-h: 96px; }
}

*{box-sizing:border-box}

html, body{
  height:100%;
}
.side-nav .language-switch .dropbtn {
    background: #ffffff;
    color: #0f172a;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
}

.side-nav .language-switch .dropdown-content a {
    color: #0f172a;
}

body{
  font-family: 'Cairo', sans-serif;
  margin:0;
  background-color: var(--light-color);
  direction: rtl;
  /* أوفست علشان الهيدر الثابت ما يغطيش أول سكشن */
  padding-top: var(--header-h);
  color: var(--dark-color);
}

/* ===========================
   Header (Fixed)
=========================== */
header{
  position: fixed;
  top:0; left:0; right:0;
  z-index:1200;
  background-color: var(--primary-color);
  color:#fff;
  padding:10px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

header .logo{ max-width:250px; cursor:pointer; }

header nav{ display:flex; align-items:center; gap:16px; }
header nav a{
  color:#fff; text-decoration:none; margin:0 8px; white-space:nowrap;
}

header .social{ display:flex; align-items:center; gap:10px; }
header .social a{ color:#fff; text-decoration:none; font-size:20px; }

header .menu-toggle{ display:none; font-size:24px; cursor:pointer; }

/* ===========================
   Language Switch (dropdown)
=========================== */
.language-switch{ display:flex; justify-content:center; align-items:center; }
.dropdown{ position:relative; display:inline-block; }
.dropbtn{
  background:#f0f0f0; color:#333; border:1px solid #ccc; border-radius:5px;
  padding:5px 10px; cursor:pointer; display:flex; align-items:center; gap:6px;
  transition: background-color .3s, color .3s;
}
.dropbtn i.flag-icon{ margin-right:5px; }
.dropbtn:hover, .dropbtn:focus{ background:#007bff; color:#fff; }
.dropdown-content{
  display:none; position:absolute; background:#f9f9f9; min-width:160px;
  box-shadow:0 8px 16px rgba(0,0,0,.2); z-index:1500; border-radius:5px; overflow:hidden;
}
.dropdown-content a{
  color:#000; padding:12px 16px; text-decoration:none; display:flex; align-items:center; gap:8px;
}
.dropdown-content a:hover{ background:#007bff; color:#fff; }
.dropdown:hover .dropdown-content{ display:block; }

/* ===========================
   Side Nav (mobile)
=========================== */
.side-nav{
  width:0; height:100%; position:fixed; z-index:1300; top:0; right:0;
  background-color: var(--primary-color); overflow-x:hidden; transition: width .5s; padding-top:60px;
  display:flex; flex-direction:column; justify-content:flex-start;
}
.side-nav a{
  padding:8px 8px 8px 32px; text-decoration:none; font-size:25px; color:#fff; display:block; transition: color .3s;
}
.side-nav a:hover{ color:#f1f1f1; }
.side-nav .closebtn{ position:absolute; top:0; left:25px; font-size:36px; }

/* ===========================
   Sections (Services / Insurance)
=========================== */
.section-services, .section-insurance{
  display:flex; align-items:center; justify-content:space-between; padding:20px; flex-wrap:wrap;
}

.section-services img, .section-insurance img{
  max-width:45%; height:auto; border-radius:10px; margin:20px;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
}

.section-services .content, .section-insurance .content{
  max-width:45%; padding:20px; background:rgba(255,255,255,.8);
  border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,.1); text-align:center;
}

h1,h2,h3{ color:var(--dark-color); text-align:center; margin:12px 0; }
p{ color:var(--dark-color); line-height:1.6; text-align:center; }

/* CTA */
.cta-button{
  background:var(--secondary-color); color:#fff; padding:10px 20px; text-decoration:none; border-radius:5px;
  display:inline-block; margin-top:20px; text-align:center; transition: background-color .3s;
}
.cta-button i{ margin-left:10px; }
.cta-button:hover{ background:#1ebe57; }

/* ===========================
   Footer
=========================== */
footer, .site-footer{
  background-color: var(--primary-color); color:#fff; padding:30px 20px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
}
footer img, .site-footer img{ max-width:250px; margin-bottom:10px; }
footer .social, .site-footer .social{ gap:10px; justify-content:center; align-items:center; margin-bottom:10px; }
footer .social a, .site-footer .social a{ color:#fff; font-size:22px; text-decoration:none; }

.site-footer .copy{ margin:8px 0 2px; color:#e0e0e0; }
.footer-contact{ display:flex; flex-direction:column; gap:6px; }
.footer-link{ color:#e0e0e0; text-decoration:none; }
.footer-link:hover{ text-decoration:underline; }

/* ===========================
   Accordion / Columns / Table
=========================== */
.accordion{
  width:100%; max-width:800px; margin:20px auto; background:#fff; border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,.1); overflow:hidden;
}
.accordion-item{ border-top:1px solid #ddd; }
.accordion-item:first-of-type{ border-top:none; }
.accordion-header{ background:#f7f7f7; padding:15px; font-size:18px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition: background .3s; }
.accordion-header:hover{ background:#e2e2e2; }
.accordion-content{ display:none; padding:15px; font-size:16px; line-height:1.6; }
.accordion-content p{ margin:5px 0; }

.columns{ display:flex; justify-content:space-between; padding:20px; flex-wrap:wrap; gap:20px; }
.column{
  width:30%; padding:20px; background:rgba(255,255,255,.8); border-radius:10px; box-shadow:0 4px 8px rgba(0,0,0,.1); text-align:center;
}
.column .flag-icon{ font-size:50px; margin-bottom:10px; color:var(--primary-color); }
.column h3{ margin-bottom:15px; }

table{ width:100%; border-collapse:collapse; margin-bottom:20px; background:#fff; }
th, td{ padding:10px; text-align:center; border:1px solid #ddd; }
th{ background:var(--primary-color); color:#fff; }

/* ===========================
   Visas Section (Oman only)
=========================== */
.section-visas h2{ text-align:center; }

.section-visas.bg-alt{
  background:#f6fbfd; border-radius:14px; padding:18px; margin:16px auto;
}
.section-visas .cta-button{ display:block; margin:0 auto; }

.visas-head{ text-align:center; margin:6px 0 16px; }

.visas-grid{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:24px; align-items:stretch;
}

.visa-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.06); display:flex; flex-direction:column; align-items:center;
}
.om-card{ transform: translateX(-6px); }

.visa-table{ width:100%; border-collapse:collapse; margin-top:8px; }
.visa-table th, .visa-table td{ border:1px solid #e5e7eb; padding:10px; text-align:center; }
.visa-table th{ background: var(--primary-color); color:#fff; }

.visa-docs-title{ margin:12px 0 6px; }
.documents-list{ text-align:center; padding:0; list-style:none; margin:15px 0; }
.documents-list li{ padding:5px 0; display:flex; justify-content:center; align-items:center; gap:8px; }
.documents-list li i{ color:var(--secondary-color); }

.visa-time{ margin:6px 0 14px; color:#0f172a; display:flex; align-items:center; gap:6px; }
.order-button{
  display:inline-block; background:var(--primary-color); color:#fff; padding:12px 16px; border-radius:10px; text-decoration:none;
}
.order-button:hover{ background:#004f5c; }

/* Illustration box (right) */
.visa-illustration{
  border:1px dashed #e2e8f0; border-radius:14px; background:#fff; overflow:hidden; position:relative; min-height:340px;
}
.visa-illustration-img{
  position:absolute; inset:0;
  background-image: url('/image/imagevisa.png'); /* تعديل المسار جذريًا */
  background-size:cover; background-position:center; opacity:.95;
}


.order-button, .btn{
  cursor:pointer;
}

/* ===========================
   Contact (Map helper)
=========================== */
.ltr-txt{ direction:ltr; unicode-bidi:embed; display:inline-block; }
.contact-map{ padding:0; border-radius:12px; overflow:hidden; }
.map-fill{
  width:100%; height:430px; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.map-fill iframe{ display:block; width:100%; height:100%; border:0; }

/* ===========================
   Responsive
=========================== */
@media (max-width: 991px){
  /* visas -> عمود واحد + إخفاء الصورة */
  .visas-grid{ grid-template-columns: 1fr; }
  .visa-illustration{ display:none; }
  .visa-card{ width:100%; max-width:none; }
  .section-visas.bg-alt{ padding-left:12px; padding-right:12px; }
}

@media (max-width: 768px){
  header .menu-toggle{ display:block; }
  header nav, header .social{ display:none; }

  .section-services, .section-insurance{
    flex-direction:column-reverse; text-align:center;
  }
  .section-services img, .section-insurance img{ order:2; }
  .section-services img, .section-insurance img,
  .section-services .content, .section-insurance .content{
    max-width:100%; margin:10px 0;
  }

  .columns{ flex-direction:column; }
  .column{ width:100%; }

  /* مسافة بسيطة تحت الهيدر للراحة البصرية */
  .section, .section-services, .section-visas, .section-insurance{ margin-top:6px; }

  .map-fill{ height:320px; }
}

/* ===========================
   Small helpers
=========================== */
.order-button:focus, .btn:focus, a:focus, input:focus, select:focus, textarea:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(15,118,110,.12);
}