/* =========================================================
   components.css (Improved)
   - Buttons, Cards, Modal, Small UI parts
   - NOTE: Grid + Dividers moved to style.css to avoid duplicates
   - UPDATED: Modal z-index, RTL-safe positions, Mobile fixes, Map/Form iframe support
========================================================= */

/* ========== Buttons ========== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border-radius:16px;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  border:1px solid transparent;
  transition:.22s ease;
  line-height:1;
  user-select:none;
  max-width:100%;
}
.btn i{ font-size:14px; flex:0 0 auto; }
.btn span{ min-width:0; }

.btn:focus-visible{
  outline:3px solid rgba(201,163,74,.35);
  outline-offset:3px;
}

.btn--primary{
  background:var(--primary);
  color:#fff;
}
.btn--primary:hover{
  background:var(--primary-2);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.btn--outline{
  background:transparent;
  color:var(--primary);
  border:1px solid rgba(11,58,91,.25);
}
.btn--outline:hover{
  background:rgba(11,58,91,.06);
  transform:translateY(-2px);
}

.btn--soft{
  background:rgba(11,58,91,.06);
  color:var(--primary);
  border:1px solid rgba(2,6,23,.06);
}
.btn--soft:hover{
  background:rgba(11,58,91,.12);
  transform:translateY(-2px);
}

.btn--block{
  width:100%;
  justify-content:center;
}

/* Mobile: make buttons behave nicer in narrow cards */
@media (max-width: 520px){
  .btn{
    padding:12px 14px;
    border-radius:16px;
  }
}

/* ========== Service Cards ========== */
.service-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  transition:.28s;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}

/* Accent line (industrial touch) */
.service-card::before{
  content:"";
  position:absolute;
  top:0;
  inset-inline:0;
  height:4px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity:.85;
}

.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 45px rgba(0,0,0,.14);
}

.service-card__icon{
  width:56px;height:56px;
  border-radius:18px;
  display:grid;place-items:center;
  background:rgba(11,58,91,.08);
  color:var(--primary);
  font-size:22px;
  margin-bottom:14px;
}
.service-card h3{
  margin:0 0 8px;
  font-size:18px;
  color:var(--primary);
  font-weight:900;
}
.service-card p{
  margin:0 0 18px;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}
.service-card__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Mobile: prevent action area from breaking layout */
@media (max-width: 520px){
  .service-card{ padding:18px; }
  .service-card__actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* ========== Mini Cards (Why / HSE) ========== */
.mini-card{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:#fff;
  backdrop-filter: blur(6px);
  transition:.22s;
  position:relative;
  overflow:hidden;
}

/* subtle dots */
.mini-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 25% 35%, rgba(255,255,255,.14), transparent 45%),
    radial-gradient(circle at 85% 60%, rgba(201,163,74,.14), transparent 45%);
  opacity:.55;
  pointer-events:none;
}

.mini-card i{
  font-size:20px;
  color:var(--accent);
  position:relative;
  z-index:1;
}
.mini-card span{
  font-size:13px;
  font-weight:800;
  text-align:center;
  position:relative;
  z-index:1;
}
.mini-card:hover{
  transform:translateY(-6px);
  background:rgba(201,163,74,.10);
  border-color:rgba(201,163,74,.28);
}
.mini-card--light{
  background:rgba(255,255,255,.12);
  color:#fff;
}

/* ========== Quote / Testimonial Cards ========== */
.quote-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  transition:.22s;
  position:relative;
  overflow:hidden;
}
.quote-card::before{
  content:"“";
  position:absolute;
  top:-20px;
  inset-inline-end:16px;
  font-size:90px;
  color:rgba(6,38,66,.06);
  font-weight:900;
  pointer-events:none;
}
.quote-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.14);
}
.quote-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  gap:10px;
}
.quote-card__head i{
  color:var(--accent);
  font-size:20px;
}
.stars{
  display:flex;
  gap:2px;
  flex-wrap:nowrap;
}
.stars i{
  color:var(--accent);
  font-size:14px;
}
.quote-card p{
  font-size:14px;
  color:var(--muted);
  margin:0 0 14px;
  font-weight:700;
}
.quote-card__user{
  display:flex;
  align-items:center;
  gap:10px;
}
.quote-card__user i{
  font-size:26px;
  color:var(--primary);
}
.quote-card__user strong{
  display:block;
  font-size:14px;
  font-weight:900;
}
.quote-card__user span{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}

/* ========== Workflow Steps ========== */
.steps{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.step{
  flex:1;
  min-width:150px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px 14px;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  transition:.22s;
  position:relative;
  overflow:hidden;
}
.step::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(201,163,74,.10), transparent 45%);
  opacity:.7;
  pointer-events:none;
}
.step:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.14);
}
.step__num{
  width:38px;height:38px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:grid;place-items:center;
  margin:0 auto 10px;
  font-weight:900;
  position:relative;
  z-index:1;
}
.step i{
  font-size:18px;
  color:var(--accent);
  margin-bottom:6px;
  display:block;
  position:relative;
  z-index:1;
}
.step strong{
  font-size:14px;
  color:var(--primary);
  font-weight:900;
  position:relative;
  z-index:1;
}

/* ========== Project Cards ========== */
.project-card{
  border-radius:22px;
  overflow:hidden;
  position:relative;
  box-shadow:0 14px 40px rgba(0,0,0,.20);
  transition:.28s;
}
.project-card img{
  width:100%;
  height:260px;
  object-fit:cover;
  transform:scale(1.02);
  transition:.28s;
}
.project-card__body{
  position:absolute;
  inset:auto 0 0 0;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.08));
  color:#fff;
  padding:16px;
}
.project-card__body strong{
  display:block;
  font-size:16px;
  font-weight:900;
}
.project-card__body span{
  font-size:13px;
  opacity:.86;
  font-weight:700;
}
.project-card:hover{
  transform:translateY(-6px);
}
.project-card:hover img{
  transform:scale(1.06);
}

/* ========== Contact ========== */
.contact-list{
  display:grid;
  gap:14px;
  margin-top:16px;
}
.contact-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}
.contact-item i{
  font-size:20px;
  color:var(--primary);
}
.contact-item strong{
  display:block;
  font-size:14px;
  font-weight:900;
}
.contact-item span,
.contact-item a{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
  word-break: break-word;
}

/* ========== Form ========== */
.form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
.form__row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}
.form__row label{
  font-size:13px;
  color:var(--primary);
  font-weight:900;
}
.form__row input,
.form__row textarea{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  font-family:inherit;
  font-size:14px;
  transition:.18s;
}
.form__row input:focus,
.form__row textarea:focus{
  outline:none;
  border-color:rgba(6,38,66,.45);
  box-shadow:0 0 0 4px rgba(6,38,66,.08);
}

/* =========================================================
   ✅ Map Support (matches your current HTML usage)
   - إذا الفورم يحتوي iframe (الخريطة) خليه مثل map-card
========================================================= */
.form iframe{
  width:100%;
  height:360px;
  border:0;
  display:block;
}

/* keep your map-card too (optional if you switch HTML later) */
.map-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
  min-height: 360px;
}
.map-card iframe{
  width:100%;
  height:360px;
  border:0;
  display:block;
}

/* optional: small map link under contact items */
.map-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  font-weight:900;
  color: var(--primary);
}
.map-link i{ color: var(--accent); }

/* =========================================================
   Modal (Service Details) — UPDATED
   - أعلى من Popup Nav
   - RTL-safe close button position
   - Better mobile spacing
========================================================= */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:20000; /* ✅ was 2000 */
  padding: 16px;
}
.modal-overlay.active{ display:flex; }

.modal{
  background:#fff;
  width:min(560px,92%);
  max-height: 82vh;
  overflow:auto;
  border-radius:26px;
  padding:22px;
  position:relative;
  box-shadow:0 30px 70px rgba(0,0,0,.30);
  animation:fadeUp .35s ease;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:translateY(0); }
}

.modal__close{
  position:absolute;
  top:14px;
  inset-inline-start:14px; /* ✅ بدل left:14px */
  background:rgba(0,0,0,.05);
  border:none;
  border-radius:12px;
  width:36px;height:36px;
  cursor:pointer;
  transition:.2s;
}
.modal__close:hover{
  background:rgba(0,0,0,.08);
}

.modal__head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.modal__icon{
  width:54px;height:54px;
  border-radius:18px;
  display:grid;place-items:center;
  background:rgba(11,58,91,.08);
  color:var(--primary);
  font-size:22px;
}
.modal__sub{
  font-size:13px;
  color:var(--muted);
  font-weight:700;
}
.modal__desc{
  font-size:14px;
  color:var(--muted);
  margin:0 0 12px;
  font-weight:700;
}
.modal__list{
  margin:0 0 16px;
  padding:0;
}
.modal__list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  margin-bottom:6px;
  font-weight:700;
}
.modal__list li::before{
  content:"✔";
  color:var(--accent);
  margin-top: 1px;
}
.modal__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Mobile modal tuning */
@media (max-width: 520px){
  .modal{
    width: 100%;
    border-radius: 20px;
    padding: 16px;
    max-height: 84vh;
  }
  .modal__icon{ width:48px; height:48px; border-radius:16px; }
}

/* lock body scroll (used by improved modal.js) */
body.modal-open{
  overflow:hidden;
}

/* =========================================================
   PARTNERS / AGENCIES + CERTIFICATE SECTION
========================================================= */

/* ✅ FIX: don't override the calm grid background in style.css */
.partners{
  background: transparent;
}

.partners .sec-title{
  display:flex;
  align-items:center;
  gap:10px;
}

/* --- Logos Row --- */
.partners-logos{
  margin-top: 24px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.partner-badge{
  text-align:center;
}

.partner-badge__circle{
  width: 160px;
  height: 160px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(6,38,66,.96), rgba(6,38,66,.92));
  box-shadow:
    0 16px 30px rgba(0,0,0,.12),
    inset 0 0 0 10px rgba(255,255,255,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.partner-badge__circle::after{
  content:"";
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 45%);
  transform: rotate(10deg);
}

.partner-badge__circle img{
  width: 68%;
  height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.20));
  position:relative;
  z-index:2;
}

.partner-badge span{
  display:block;
  font-weight:900;
  letter-spacing:.2px;
  color: var(--text);
  opacity:.92;
}

/* --- Certificate Card --- */
.cert-card{
  margin-top: 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fbfbfd);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  overflow:hidden;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
}

.cert-card__media{
  background: #f4f6f9;
  position:relative;
  min-height: 320px;
}

.cert-card__media::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(6,38,66,.10), transparent 45%),
    radial-gradient(circle at 90% 60%, rgba(6,38,66,.10), transparent 50%);
  pointer-events:none;
}

.cert-card__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
}

.cert-card__info{
  padding: 26px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 12px;
}

.cert-kicker{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  color: var(--accent);
}

.cert-kicker i{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(6,38,66,.08);
}

.cert-card__info h3{
  margin:0;
  font-size: 22px;
  font-weight: 900;
  color: var(--text);
}

.cert-card__info p{
  margin:0;
  color: rgba(0,0,0,.72);
  line-height: 1.9;
  font-weight:700;
}

.cert-meta{
  margin-top: 6px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.cert-meta__item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(6,38,66,.06);
  color: rgba(0,0,0,.78);
  font-weight: 800;
}

.cert-meta__item i{
  color: var(--accent);
}

/* =========================================================
   Responsive for Partners
========================================================= */
@media (max-width: 980px){
  .partners-logos{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .partner-badge__circle{
    width: 150px;
    height: 150px;
  }
  .cert-card{
    grid-template-columns: 1fr;
  }
  .cert-card__media{
    min-height: 260px;
  }
}

@media (max-width: 520px){
  .partners-logos{
    grid-template-columns: 1fr;
  }
  .partner-badge__circle{
    width: 160px;
    height: 160px;
  }
}