/* =========================================================
   أقسام الصفحة — بالترتيب الذي تظهر به في index.html
   (تنسيق نموذج الحجز في booking.css)
   ========================================================= */

/* ---------- الشريط العلوي: أرقام الأقسام ---------- */

.topbar {
  background: var(--navy);
  color: var(--on-dark);
  font-size: var(--fs-sm);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
}

/* على الجوال: ثلاثة أعمدة، اسم القسم فوق رقمه */
.topbar__contacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  padding-block: 0.5rem;
  list-style: none;
}

.topbar__contacts a {
  display: flex;
  flex-direction: column;
  color: inherit;
  line-height: 1.45;
  text-decoration: none;
}
.topbar__contacts a:hover .topbar__number { color: var(--gold-light); }
.topbar__contacts .icon { display: none; width: var(--icon-sm); height: var(--icon-sm); color: var(--gold-light); }

.topbar__label { font-size: var(--fs-xs); }
.topbar__number { align-self: flex-start; color: var(--white); font-weight: var(--fw-semibold); white-space: nowrap; }

.topbar .topbar__social { display: none; }

@media (max-width: 379px) {
  .topbar__number { font-size: var(--fs-xs); }
}

@media (min-width: 900px) {
  .topbar__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.75rem;
    width: auto;
    padding-block: 0;
  }
  .topbar__contacts a { flex-direction: row; align-items: center; gap: 0.45rem; }
  .topbar__contacts .icon { display: block; }
  .topbar__label { font-size: var(--fs-sm); }
  .topbar__label::after { content: ":"; }
  .topbar .topbar__social { display: flex; }
}

/* ---------- روابط التواصل الاجتماعي ---------- */

.social { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }

.social a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.45rem 1rem;
  border: 1.5px solid var(--grout);
  border-radius: var(--radius-control);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.social a:hover { border-color: var(--navy); }
.social .icon { width: var(--icon-sm); height: var(--icon-sm); }

.social--compact { gap: 0.25rem; }
.social--compact a {
  justify-content: center;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
}

/* ---------- الهيدر والقائمة ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--grout);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--navy);
  text-decoration: none;
}

.brand__mark { width: auto; height: 46px; }

.brand__text { display: grid; line-height: 1.25; }

.brand__name { font-weight: var(--fw-bold); font-size: var(--fs-lg); }

.brand__latin {
  justify-self: start;
  direction: ltr;
  font-size: 0.625rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.34em;
  color: var(--gold-deep);
}

.brand--light { color: var(--white); }
.brand--light .brand__latin { color: var(--gold-light); }

.nav-toggle { display: none; }

.site-nav { display: flex; align-items: center; gap: 2rem; }

.site-nav__list { display: flex; gap: 1.75rem; list-style: none; }

.site-nav__list a {
  font-weight: var(--fw-semibold);
  text-decoration: none;
  text-underline-offset: 0.5em;
  text-decoration-thickness: 2px;
}
.site-nav__list a:hover { color: var(--gold-deep); text-decoration-line: underline; }
.site-nav__list a[aria-current="page"] { color: var(--gold-deep); text-decoration-line: underline; }

@media (max-width: 959px) {
  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: var(--white);
    border: 1.5px solid var(--grout);
    border-radius: var(--radius-control);
    color: var(--navy);
    cursor: pointer;
  }
  .nav-toggle .icon { width: var(--icon-lg); height: var(--icon-lg); }
  .nav-toggle__close,
  .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

  .site-header__inner { flex-wrap: wrap; }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding-block-end: 1.25rem;
  }

  .js .site-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: none;
    padding: 0.5rem var(--gutter) 1.5rem;
    background: var(--white);
    border-bottom: 1px solid var(--grout);
    box-shadow: 0 24px 32px -24px rgb(15 44 74 / 0.35);
  }
  .js .site-nav.is-open { display: flex; animation: nav-open 0.2s ease-out; }

  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list a {
    display: block;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--grout);
  }
  .site-nav__cta { margin-top: 1.25rem; min-height: 50px; }
}

@keyframes nav-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- الرئيسية: الافتتاحية وبوابة الطلب ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip; /* لا ينشئ منطقة تمرير، فيبقى ملخص الطلب ثابتاً أثناء التمرير */
  padding-block: clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  background-color: var(--tile);
  /* بلاط بفواصل رفيعة، ولمعة خفيفة كأن الأرضية مُسحت للتو */
  background-image:
    radial-gradient(120% 80% at 85% -10%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0) 60%),
    linear-gradient(to left, var(--grout) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grout) 1px, transparent 1px);
  background-size: auto, var(--tile-size) var(--tile-size), var(--tile-size) var(--tile-size);
  background-position: 0 0, right -1px top -1px, right top -1px;
}

.hero__inner {
  display: grid;
  align-items: center;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

.hero__title {
  max-width: 20em;
  font-size: var(--fs-3xl);
  line-height: 1.5;
}

.hero__accent { color: var(--gold-deep); }

.hero__lead {
  max-width: 36em;
  margin-top: 1.25rem;
  color: var(--slate);
  font-size: var(--fs-md);
  line-height: 1.8;
}

.hero__sign { display: none; }

@media (min-width: 900px) {
  .hero__sign { display: grid; place-items: center; }
  .hero__sign img {
    width: auto;
    height: clamp(180px, 18vw, 260px);
    /* حروف بارزة كاللوحة المعلّقة على الجدار */
    filter: drop-shadow(0 2px 1px rgb(15 44 74 / 0.25)) drop-shadow(0 24px 28px rgb(15 44 74 / 0.2));
  }
}

/* لحظة الافتتاح الوحيدة: طبقة غبار تمسحها مسّاحة من اليمين إلى اليسار */
.hero__haze {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-color: color-mix(in srgb, var(--haze) 55%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .38 0 0 0 0 .32 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-backdrop-filter: blur(3px) saturate(0.4);
  backdrop-filter: blur(3px) saturate(0.4);
  animation: haze-wipe 1.35s cubic-bezier(0.65, 0, 0.35, 1) 0.45s both;
}

.hero__squeegee {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  animation:
    squeegee-move 1.35s cubic-bezier(0.65, 0, 0.35, 1) 0.45s both,
    squeegee-out 0.25s ease 1.8s forwards;
}

.hero__squeegee span {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 6px;
  background: var(--navy-soft);
}

/* لمعة الماء على الجانب النظيف خلف المسّاحة */
.hero__squeegee span::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 110px;
  background: linear-gradient(to right, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0));
}

@keyframes haze-wipe {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 100% 0 0); }
}

@keyframes squeegee-move {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes squeegee-out {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__haze,
  .hero__squeegee { display: none; }
}

/* ---------- عن المؤسسة ---------- */

.about { background: var(--white); border-block: 1px solid var(--grout); }

.about__grid { display: grid; gap: 2.5rem; }

@media (min-width: 960px) {
  .about__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 5rem;
  }
}

.about__intro { max-width: 38em; margin-top: 1.25rem; font-size: var(--fs-md); line-height: 1.85; }

.about__note {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--tile);
  border-inline-start: 3px solid var(--gold);
  color: var(--slate);
}

.about__subtitle { margin-bottom: 0.5rem; font-size: var(--fs-lg); }

@media (min-width: 960px) {
  .about__sectors { padding-top: 0.6rem; }
}

.sectors { border-top: 1px solid var(--grout); }

.sectors__row {
  display: grid;
  gap: 0.35rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--grout);
}

.sectors dt {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
}

.sectors dd {
  padding-inline-start: calc(var(--badge-size-sm) + 0.85rem);
  color: var(--slate);
}

/* ---------- خدماتنا (قائمة أسعار) ---------- */

.rate-group {
  display: grid;
  gap: 1.5rem;
  padding-block: 2.25rem 1rem;
  border-top: 2px solid var(--navy);
}

.rate-group + .rate-group { margin-top: 2.5rem; }

@media (min-width: 960px) {
  .rate-group { grid-template-columns: 17rem 1fr; gap: 3.5rem; }
}

.rate-group__icons { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.rate-group__segment { color: var(--gold-deep); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

.rate-group__title { font-size: var(--fs-xl); }
.rate-group__text { margin-top: 0.5rem; color: var(--slate); }

.rate-list { list-style: none; }

.rate {
  display: grid;
  gap: 0.9rem 2rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--grout);
}
.rate:first-child { padding-top: 0.25rem; }

@media (min-width: 640px) {
  .rate { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

.rate__name { font-weight: var(--fw-semibold); font-size: var(--fs-md); line-height: 1.6; }
.rate__desc { max-width: 36em; margin-top: 0.3rem; color: var(--slate); }

.rate__meta { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }

@media (min-width: 640px) {
  .rate__meta { flex-direction: column; align-items: flex-end; gap: 0.6rem; }
}

.rate__price { white-space: nowrap; }
.rate__price--pending { color: var(--slate); font-size: var(--fs-sm); }
.rate__amount { font-weight: var(--fw-bold); font-size: var(--fs-md); }
.rate__unit { color: var(--slate); font-size: var(--fs-sm); }

.rate__action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gold-deep);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.4em;
  white-space: nowrap;
}
.rate__action .icon { width: var(--icon-sm); height: var(--icon-sm); }
.rate__action:hover { color: var(--navy); }

.rate-sheet__fallback { padding: 1.5rem; background: var(--white); border: 1px solid var(--grout); }

/* ---------- تواصل معنا ---------- */

.departments {
  display: grid;
  gap: 1px;
  list-style: none;
  background: var(--grout);
  border: 1px solid var(--grout);
  border-radius: var(--radius-tile);
  overflow: hidden;
}

@media (min-width: 768px) {
  .departments { grid-template-columns: 1fr 1fr; }
}

.dept {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  background: var(--white);
}

.dept__head { display: flex; align-items: flex-start; gap: 1rem; }

.dept__name { font-size: var(--fs-lg); }
.dept__role { margin-top: 0.15rem; color: var(--slate); font-size: var(--fs-sm); }

.dept__lines {
  display: grid;
  gap: 0.35rem;
  padding-inline-start: calc(var(--badge-size) + 1rem);
  list-style: none;
}
.dept__lines li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.dept__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  min-height: 44px;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.dept__link .icon { color: var(--gold-deep); }
.dept__link .ltr { overflow-wrap: anywhere; }
.dept__link:hover { text-decoration: underline; text-underline-offset: 0.3em; }

.dept__wa {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--grout);
  border-radius: 50%;
  color: var(--whatsapp);
}
.dept__wa:hover { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--white); }
.dept__wa .icon { width: var(--icon-sm); height: var(--icon-sm); }

@media (max-width: 479px) {
  .dept__lines { padding-inline-start: 0; }
}

.location {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

@media (min-width: 960px) {
  .location { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem; }
}

.location__map {
  min-height: 340px;
  background: var(--grout);
  border: 1px solid var(--grout);
  border-radius: var(--radius-tile);
  overflow: hidden;
}

.location__map iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }

.location__title { font-size: var(--fs-lg); }
.location__info > .location__title ~ .location__title { margin-top: 2.25rem; }

.location__address {
  margin-block: 0.6rem 1.1rem;
  color: var(--slate);
  font-style: normal;
}

.location__info .social { margin-top: 0.75rem; }

/* ---------- رأس الصفحات الداخلية ---------- */

.page-hero {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  background-color: var(--tile);
  background-image:
    radial-gradient(120% 90% at 85% -10%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0) 60%),
    linear-gradient(to left, var(--grout) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grout) 1px, transparent 1px);
  background-size: auto, var(--tile-size) var(--tile-size), var(--tile-size) var(--tile-size);
  background-position: 0 0, right -1px top -1px, right top -1px;
  border-bottom: 1px solid var(--grout);
}

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); color: var(--slate); }
.breadcrumb li + li::before { content: "/"; margin-inline-end: 0.4rem; color: var(--grout-strong); }
.breadcrumb a { color: var(--slate); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-deep); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--navy); font-weight: var(--fw-semibold); }

.page-hero__title { margin-top: 0.75rem; font-size: var(--fs-2xl); }
.page-hero__lead { max-width: 40rem; margin-top: 0.6rem; color: var(--slate); font-size: var(--fs-md); line-height: 1.75; }

/* ---------- تعرّف علينا: روابط الصفحات من الرئيسية ---------- */

.explore { background: var(--white); border-top: 1px solid var(--grout); }

.explore__list {
  display: grid;
  gap: 1rem;
  list-style: none;
}

@media (min-width: 768px) {
  .explore__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.explore-card {
  display: grid;
  justify-items: start;
  gap: 0.4rem;
  height: 100%;
  padding: 1.5rem;
  background: var(--tile);
  border: 1px solid var(--grout);
  border-radius: var(--radius-card);
  color: var(--navy);
  text-decoration: none;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.explore-card:hover { background: var(--white); border-color: var(--gold); }
.explore-card .icon-badge { margin-bottom: 0.5rem; }
.explore-card__title { font-weight: var(--fw-bold); font-size: var(--fs-md); }
.explore-card__text { color: var(--slate); font-size: var(--fs-sm); line-height: 1.75; }
.explore-card__go {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  color: var(--gold-deep);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}
.explore-card__go .icon { width: var(--icon-sm); height: var(--icon-sm); }

/* ---------- كيف نعمل ---------- */

.how__steps {
  display: grid;
  gap: 1rem;
  counter-reset: none;
  list-style: none;
}

@media (min-width: 640px) {
  .how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .how__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.how__step {
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--grout);
  border-radius: var(--radius-card);
}

.how__num {
  display: inline-grid;
  place-items: center;
  width: var(--badge-size);
  height: var(--badge-size);
  margin-bottom: 1rem;
  background: var(--navy);
  border-radius: var(--radius-control);
  color: var(--gold-light);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
}

.how__title { font-size: var(--fs-md); }
.how__text { margin-top: 0.35rem; color: var(--slate); font-size: var(--fs-sm); line-height: 1.75; }

/* ---------- دعوة للطلب من البوابة ---------- */

.cta-section { padding-bottom: var(--section-space); }

.cta-band {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--navy);
  border-radius: var(--radius-card);
  color: var(--on-dark);
}

@media (min-width: 900px) {
  .cta-band { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; }
}

.cta-band__title { margin-bottom: 0.35rem; color: var(--white); font-size: var(--fs-xl); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cta-band__actions .btn { min-width: 9rem; }

@media (max-width: 479px) {
  .cta-band__actions .btn { flex: 1 1 0; min-width: 0; }
}

/* ---------- الفوتر ---------- */

.site-footer {
  padding-top: clamp(3rem, 2.5rem + 3vw, 5rem);
  background: var(--navy);
  color: var(--on-dark);
  font-size: var(--fs-sm);
}

.site-footer__grid { display: grid; gap: 2.5rem; }

@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.4fr 0.8fr 1.4fr 1.2fr; }
}

.site-footer__tagline { max-width: 26em; margin-top: 1.1rem; line-height: 1.8; }

.site-footer__title {
  margin-bottom: 0.9rem;
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

.site-footer ul { display: grid; gap: 0.55rem; list-style: none; }
.site-footer .social { display: flex; margin-top: 1rem; }

.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--gold-light); }
.site-footer .brand { color: var(--white); }

.footer-contacts { gap: 0.9rem !important; }
.footer-contacts li { display: grid; gap: 0.1rem; }
.footer-contacts__label { color: #9fb1c2; font-size: var(--fs-xs); }
.footer-contacts__numbers { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; color: var(--white); font-weight: var(--fw-semibold); }

.site-footer__bottom {
  margin-top: 3rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--navy-soft);
  color: #9fb1c2;
  font-size: var(--fs-xs);
}

/* ---------- زر واتساب العائم ---------- */

.wa-float {
  position: fixed;
  z-index: 60;
  inset-inline-end: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  background: var(--whatsapp);
  border-radius: 50%;
  color: var(--white);
  box-shadow: 0 12px 24px -10px rgb(15 44 74 / 0.55);
}
.wa-float:hover { background: var(--whatsapp-hover); }
.wa-float { transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; }

/* يختفي أثناء نموذج الحجز: فيه زر واتساب خاص، والزر العائم يغطي أزراره */
.wa-float.is-tucked { opacity: 0; visibility: hidden; transform: translateY(12px); }
.wa-float .icon { width: 30px; height: 30px; }