/* =========================================================
   بوابة الطلب: «أفراد» و«أعمال»، الخطوات، الخيارات، الملخص
   ========================================================= */

html:not(.js) .portal { display: none; }

/* ---------- البوابة ---------- */

.portal {
  margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  padding: clamp(1rem, 0.6rem + 2vw, 2rem);
  background: var(--white);
  border: 1px solid var(--grout);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.portal__title { margin-bottom: 1.25rem; font-size: var(--fs-lg); }
.portal__title:focus,
.portal__heading:focus { outline: none; }

.doors { display: grid; gap: 1rem; }

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

.door {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1rem 1.25rem;
  width: 100%;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  background: var(--tile);
  border: 1.5px solid var(--grout);
  border-radius: var(--radius-card);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.door:hover {
  background: var(--white);
  border-color: var(--gold);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.door__icon { width: 3.5rem; height: 3.5rem; }
.door__icon .icon { width: 1.75rem; height: 1.75rem; }

.door__text { display: grid; gap: 0.15rem; }
.door__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.4; }
.door__sub { color: var(--slate); font-size: var(--fs-sm); }

.door__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.door__chips span {
  padding: 0.1rem 0.7rem;
  background: var(--white);
  border: 1px solid var(--grout);
  border-radius: 999px;
  color: var(--slate);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.door__go {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 46px;
  background: var(--navy);
  border-radius: var(--radius-control);
  color: var(--white);
  font-weight: var(--fw-semibold);
}
.door__go .icon { width: var(--icon-sm); height: var(--icon-sm); }
.door:hover .door__go { background: var(--navy-soft); }

/* شريط داخل البوابة: الرجوع، اسم البوابة، رقم القسم */
.portal__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--grout);
}

.portal__heading { font-size: var(--fs-xl); }
.portal__heading-sub { color: var(--slate); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.portal__heading-sub::before { content: "· "; }

.portal__call { margin-inline-start: auto; color: var(--slate); font-size: var(--fs-sm); }
.portal__call a { color: var(--navy); font-weight: var(--fw-bold); text-decoration: none; }
.portal__call a:hover { text-decoration: underline; }

@media (max-width: 559px) {
  .portal__call { flex-basis: 100%; margin-inline-start: 0; }
}

.portal__prompt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--slate);
  font-size: var(--fs-sm);
}
.portal__prompt .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--gold-deep); }

/* ---------- اختيار نوع الحجز ---------- */

.track-switch {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

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

@media (min-width: 1024px) {
  .track-switch { max-width: calc((100% - 2rem) * 1.6 / 2.6); }
}

.track {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.15rem;
  background: var(--tile);
  border: 1.5px solid var(--grout);
  border-radius: var(--radius-card);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.track:hover { border-color: var(--grout-strong); }

.track__text { display: grid; }
.track__title { font-weight: var(--fw-bold); font-size: var(--fs-md); line-height: 1.5; }
.track__desc { color: var(--slate); font-size: var(--fs-sm); line-height: 1.6; }

.track[aria-selected="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-card);
}
.track[aria-selected="true"] .track__desc { color: var(--on-dark); }
.track[aria-selected="true"] .icon-badge {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(233 197 127 / 0.3);
  color: var(--gold-light);
}

/* ---------- التخطيط: الخطوات + الملخص ---------- */

.track-switch[hidden] + .portal__prompt + .booking-app__body { margin-top: 0; }
.booking-app__body { margin-top: 1.5rem; }

/* minmax(0, 1fr) يمنع شريط التواريخ من توسيع العمود أكثر من الشاشة */
.booking-app__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }

@media (min-width: 1024px) {
  .booking-app__body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; }
}

.wizard {
  --wizard-pad: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  padding: var(--wizard-pad);
  background: var(--tile);
  border: 1px solid var(--grout);
  border-radius: var(--radius-card);
}

/* ---------- شريط التقدم ---------- */

.progress { margin-bottom: 1.75rem; }

.progress__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
  color: var(--slate);
  font-size: var(--fs-sm);
}
.progress__meta strong { color: var(--navy); font-weight: var(--fw-bold); }
.progress__current { color: var(--navy); font-weight: var(--fw-semibold); }

.progress__list { display: flex; list-style: none; }

.progress__item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  justify-content: center;
}

/* الخط الواصل بين كل نقطة والتي قبلها */
.progress__item + .progress__item::before {
  content: "";
  position: absolute;
  top: 15px;
  inset-inline-end: 50%;
  width: 100%;
  height: 2px;
  background: var(--grout);
}
.progress__item.is-done + .progress__item::before { background: var(--gold); }

.progress__btn {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.progress__btn:disabled { cursor: default; }

.progress__dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--white);
  border: 2px solid var(--grout);
  border-radius: 50%;
  color: var(--slate);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.progress__dot .icon { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2.5; }

.progress__item.is-done .progress__dot { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.progress__item.is-done .progress__btn:hover .progress__dot { background: var(--gold-light); }
.progress__item.is-current .progress__dot {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  box-shadow: 0 0 0 4px rgb(15 44 74 / 0.12);
}

.progress__label {
  display: none;
  color: var(--slate);
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.progress__item.is-current .progress__label { color: var(--navy); font-weight: var(--fw-semibold); }

@media (min-width: 560px) {
  .progress__label { display: block; }
  .progress__current { display: none; }
}

/* ---------- الخطوة ---------- */

.wizard__step:not([hidden]) { animation: step-in 0.28s ease-out; }

@keyframes step-in {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

.step-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.step-head__title { font-size: var(--fs-lg); }
/* يُنقل التركيز إلى عنوان الخطوة لقارئات الشاشة فقط، فلا حاجة لإطار ظاهر */
.step-head__title:focus { outline: none; }
.step-head__hint { margin-top: 0.15rem; color: var(--slate); font-size: var(--fs-sm); line-height: 1.7; }

.wizard__error {
  margin-top: 1rem;
  padding: 0.65rem 0.9rem;
  background: #fdf0ef;
  border-inline-start: 3px solid var(--danger);
  border-radius: 4px;
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.wizard__error:empty { display: none; }

.wizard__nav {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--grout);
}
.wizard__nav [data-next] { margin-inline-start: auto; min-width: 9rem; }
.wizard__nav [data-next].is-waiting { opacity: 0.55; }
.wizard__nav [data-next].is-waiting:hover { opacity: 0.75; }

@media (max-width: 479px) {
  .wizard__nav .btn { flex: 1 1 0; min-width: 0; padding-inline: 1rem; }
}

/* ---------- الخيارات ---------- */

.choices { display: grid; gap: 0.75rem; }

.choices--2 { grid-template-columns: 1fr; }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choices--freq { grid-template-columns: 1fr; }
.choices--days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices--text { grid-template-columns: repeat(2, minmax(0, 1fr)); }

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

@media (min-width: 720px) {
  .choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .choices--freq { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choices--days { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .choices--text { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* الأيام القادمة: شريط يُسحب أفقياً على الجوال، وشبكة من 7 أعمدة على الشاشات الأوسع */
.choices--dates {
  grid-auto-flow: column;
  grid-auto-columns: 4.6rem;
  gap: 0.6rem;
  margin-inline: calc(var(--wizard-pad) * -1);
  padding: 0.6rem var(--wizard-pad) 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.choices--dates .choice { scroll-snap-align: start; }

@media (min-width: 640px) {
  .choices--dates {
    grid-auto-flow: row;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
}

.choice { position: relative; display: block; }

/* الـ input الحقيقي يغطي الخيار كاملاً وهو شفاف، فيبقى قابلاً للنقر والتركيز */
.choice__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice__input:disabled { cursor: not-allowed; }

.choice__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  height: 100%;
  min-height: 64px;
  padding: 0.85rem 0.75rem;
  background: var(--white);
  border: 1.5px solid var(--grout);
  border-radius: var(--radius-control);
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.choice:hover .choice__input:not(:disabled) + .choice__body { border-color: var(--grout-strong); }

.choice__input:checked + .choice__body {
  background: var(--gold-tint);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

.choice__input:focus-visible + .choice__body { outline: 3px solid var(--focus); outline-offset: 2px; }

.choice__input:disabled + .choice__body {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
}
.choice__input:disabled + .choice__body .choice__unit,
.choice__input:disabled + .choice__body .choice__day { color: var(--muted); }

.choice__check {
  position: absolute;
  top: 0.4rem;
  inset-inline-end: 0.4rem;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--gold);
  border-radius: 50%;
  color: var(--navy);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.choice__check .icon { width: 0.75rem; height: 0.75rem; stroke-width: 3; }
.choice__input:checked + .choice__body .choice__check { opacity: 1; transform: none; }

.choice__num { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.2; }
.choice__unit { color: var(--slate); font-size: var(--fs-sm); line-height: 1.5; }
.choice__day { color: var(--slate); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.5; }
.choice__title { font-weight: var(--fw-semibold); line-height: 1.5; }
.choice__meta { color: var(--slate); font-size: var(--fs-sm); line-height: 1.6; }
.choice__note:empty { display: none; }
.choice__note { color: var(--danger); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }

.choice__badge {
  position: absolute;
  top: -0.7rem;
  inset-inline-start: 50%;
  transform: translateX(50%);
  padding: 0 0.55rem;
  background: var(--success);
  border-radius: 999px;
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  white-space: nowrap;
}

/* بطاقة أفقية: الفترات وعدد الزيارات */
.choice--card .choice__body {
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  text-align: start;
}
.choice__text { display: grid; }

.choice--card .choice__num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--badge-size);
  height: var(--badge-size);
  background: var(--tile);
  border-radius: var(--radius-control);
  font-size: var(--fs-lg);
}
.choice--card .choice__input:checked + .choice__body .choice__num { background: var(--gold); }

/* بطاقة الجنسية بالعلم */
.choice--flag .choice__body { gap: 0.55rem; padding-block: 1.1rem; }

.choice__flag {
  width: 60px;
  height: 40px;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgb(15 44 74 / 0.12), 0 4px 10px -4px rgb(15 44 74 / 0.3);
}

.choice--date .choice__body { gap: 0; min-height: 86px; padding: 0.6rem 0.25rem; }
.choice--date .choice__unit { font-size: var(--fs-xs); }

.choice--day .choice__body { min-height: 56px; }
.choice--text .choice__body { min-height: 60px; padding-inline: 0.75rem; }

.days-counter {
  margin-top: 0.9rem;
  color: var(--slate);
  font-size: var(--fs-sm);
}
.days-counter.is-complete { color: var(--success); font-weight: var(--fw-semibold); }

.date-other { max-width: 20rem; margin-top: 1.25rem; }
.date-other .field__control { cursor: pointer; }

/* الحقل فارغاً: نخفي نص «يوم/شهر/سنة» لأن Chrome يعرضه معكوس الحروف في الواجهة العربية */
.date-other .field__control:invalid::-webkit-datetime-edit { color: transparent; }

/* ---------- الملخص ---------- */

/* على الجوال يظهر في الخطوة الأخيرة، وعلى الشاشات العريضة يبقى ظاهراً بجوار الخطوات */
.order-summary {
  display: none;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--grout);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.booking-app.is-review .order-summary { display: block; animation: step-in 0.28s ease-out; }

@media (min-width: 1024px) {
  .order-summary { display: block; position: sticky; top: calc(var(--header-height) + 1.5rem); }
}

.summary__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  background: var(--navy);
  color: var(--white);
}
.summary__title { font-size: var(--fs-md); }
.summary__sub { color: var(--on-dark); font-size: var(--fs-xs); }

.summary__list { padding: 0.35rem 1.25rem; }

.summary__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-block: 0.75rem;
  border-bottom: 1px dashed var(--grout);
  font-size: var(--fs-sm);
}
.summary__row:last-child { border-bottom: 0; }
.summary__row dt { color: var(--slate); }
.summary__row dd { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }

.summary__value { display: grid; font-weight: var(--fw-semibold); line-height: 1.6; overflow-wrap: anywhere; }
.summary__value small { color: var(--slate); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
.summary__value--empty { color: var(--muted); font-weight: var(--fw-regular); }

.summary__nat { display: inline-flex; align-items: center; gap: 0.5rem; }
.summary__flag { width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(15 44 74 / 0.12); }

.summary__edit {
  flex-shrink: 0;
  min-height: 28px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gold-deep);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  cursor: pointer;
}
.summary__edit:hover { color: var(--navy); }

.summary__total {
  display: grid;
  gap: 0.35rem;
  margin: 0.25rem 1.25rem 0;
  padding: 1rem 1.1rem;
  background: var(--tile);
  border-radius: var(--radius-control);
}

.summary__total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--fs-sm);
}
.summary__total-value { font-weight: var(--fw-semibold); }

.summary__total-row--grand {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--grout);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}
.summary__total-row--grand:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.summary__total-row--grand .summary__total-value { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.summary__total-row--grand .summary__total-value.is-pending { color: var(--slate); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

.summary__actions { padding: 1.25rem; }

.summary__to {
  margin-top: 0.75rem;
  color: var(--slate);
  font-size: var(--fs-xs);
  line-height: 1.7;
  text-align: center;
}