/* ─── Umrah departure cards: extras over pages.css ─────────────── */
.mk-omra-card__title a {
  color: inherit;
  text-decoration: none;
}

.mk-omra-card__title a:hover,
.mk-omra-card__title a:focus-visible {
  text-decoration: underline;
}

.mk-omra-card__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.mk-omra-card__more,
.mk-omra__more a,
.mk-omra-depart__back a,
.mk-omra-page__reviews a {
  color: var(--teal-700);
  font-weight: var(--fw-medium);
}

.mk-omra__more,
.mk-omra-depart__back {
  margin-block-start: var(--space-8);
  text-align: center;
}

/* ─── Umrah page ───────────────────────────────────────────────── */
.mk-omra-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.mk-omra-page__why {
  min-block-size: 0;
}

.mk-omra-page__why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.mk-omra-page__reviews {
  margin-block-start: var(--space-8);
  text-align: center;
}

.mk-omra-page__reviews a {
  color: var(--paper-warm);
}

.mk-omra-page__steps {
  background-color: var(--green-900);
  padding-block: var(--space-24);
}

.mk-omra-page__steps-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mk-step;
}

.mk-omra-page__steps-list li {
  counter-increment: mk-step;
  padding: var(--space-8) var(--space-6);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-md);
  color: var(--paper-warm);
}

.mk-omra-page__steps-list li::before {
  content: counter(mk-step);
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  margin-block-end: var(--space-4);
  border-radius: 50%;
  background-color: var(--gold);
  color: var(--green-900);
  font-weight: var(--fw-bold);
}

.mk-omra-page__steps-list h3 {
  margin-block-end: var(--space-2);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
}

.mk-omra-page__steps-list p {
  line-height: 1.7;
  opacity: 0.9;
}

.mk-omra-page__faq {
  background-color: var(--cream);
  padding-block: var(--space-24);
}

.mk-omra-page__faq-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-12);
  align-items: start;
}

.mk-omra-page__h2,
.mk-omra-depart__h2 {
  margin-block-end: var(--space-4);
  color: var(--teal-700);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: var(--fw-bold);
}

.mk-omra-page__docs {
  gap: var(--space-3);
  opacity: 1;
}

.mk-omra-page__qa {
  border-block-end: 1px solid rgb(200 153 46 / 0.35);
}

.mk-omra-page__qa summary {
  padding-block: var(--space-4);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.mk-omra-page__qa p {
  padding-block-end: var(--space-4);
  line-height: 1.7;
}

.mk-omra-page__ask {
  margin-block-start: var(--space-8);
}

/* ─── Departure page ───────────────────────────────────────────── */
.mk-omra-depart {
  background-color: var(--cream);
  padding-block: var(--space-16) var(--space-24);
}

.mk-omra-ended {
  margin-block-end: var(--space-8);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  background-color: var(--green-900);
  color: var(--paper-warm);
  font-weight: var(--fw-bold);
  text-align: center;
}

.mk-omra-depart__grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

/* No flyer: the details take the whole width. */
.mk-omra-depart__grid > .mk-omra-depart__details:only-child {
  grid-column: 1 / -1;
}

.mk-omra-depart__poster {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.mk-omra-depart__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-6);
  margin-block-end: var(--space-8);
  line-height: 1.7;
}

.mk-omra-depart__facts dt {
  font-weight: var(--fw-bold);
  color: var(--green-700);
}

.mk-omra-depart__table-wrap {
  overflow-x: auto;
}

.mk-omra-depart__table {
  inline-size: 100%;
  border-collapse: collapse;
  background-color: var(--paper);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.mk-omra-depart__table th,
.mk-omra-depart__table td {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  border-block-end: 1px solid rgb(200 153 46 / 0.25);
}

.mk-omra-depart__table th {
  background-color: var(--green-900);
  color: var(--paper-warm);
  font-weight: var(--fw-bold);
}

.mk-omra-depart__price {
  font-weight: var(--fw-bold);
  color: var(--green-900);
  white-space: nowrap;
}

.mk-omra-depart__stars {
  color: var(--gold);
  white-space: nowrap;
}

.mk-omra-depart__breakfast {
  display: block;
  font-size: 0.8125rem;
  opacity: 0.7;
}

.mk-omra-depart__note {
  margin-block: var(--space-2) var(--space-8);
  font-size: 0.875rem;
  opacity: 0.75;
}

.mk-omra-depart__included {
  margin-block-end: var(--space-8);
}

.mk-omra-depart__next-title {
  margin-block-start: var(--space-16);
  text-align: center;
}

.mk-reels-section.mk-omra-depart__videos {
  background-color: var(--green-900);
}

/* ─── Responsive ───────────────────────────────────────────────── */
/* ─── Local pages and Umrah guide (inc/omra-pages.php) ─────────── */
.mk-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  color: rgb(255 255 255 / 0.75);
  font-size: 0.875rem;
}

.mk-crumbs li + li::before {
  content: "›";
  margin-inline-end: var(--space-2);
}

.mk-crumbs a {
  color: var(--paper-warm);
}

.mk-local__hero-cta {
  margin-block-start: var(--space-8);
}

.mk-local__steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mk-local__address p {
  margin-block-end: var(--space-3);
  font-style: normal;
  line-height: 1.7;
}

.mk-local__address a,
.mk-local__directions a,
.mk-guides-section__local a,
.mk-guide__aside-link {
  color: var(--teal-700);
  font-weight: var(--fw-medium);
}

.mk-local__directions {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.mk-guides-section {
  margin-block-start: var(--space-16);
  padding-block-start: var(--space-12);
  border-block-start: 1px solid rgb(200 153 46 / 0.35);
}

.mk-guides-section .mk-omra-page__h2 a {
  color: inherit;
}

.mk-guides {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-guides__item {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background-color: var(--paper);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s;
}

.mk-guides__item:hover,
.mk-guides__item:focus-within {
  box-shadow: var(--shadow-card-hover);
}

/* The whole card is the link. */
.mk-guides__link {
  display: block;
  margin-block-end: var(--space-2);
  color: var(--teal-700);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.mk-guides__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.mk-guides__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.mk-guides-section__local {
  margin-block-start: var(--space-8);
  text-align: center;
}

.mk-guide__wrap {
  background-color: var(--cream);
  padding-block: var(--space-16) var(--space-24);
}

.mk-guide__wrap > .mk-container:only-child .mk-guides {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mk-guide__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-12);
  align-items: start;
}

.mk-guide__body {
  max-inline-size: 72ch;
  line-height: 1.8;
}

.mk-guide__body section + section {
  margin-block-start: var(--space-12);
}

.mk-guide__body h2 {
  margin-block-end: var(--space-4);
  color: var(--teal-700);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: var(--fw-bold);
}

.mk-guide__body p + p,
.mk-guide__body p + ul,
.mk-guide__body p + ol {
  margin-block-start: var(--space-4);
}

.mk-guide__body ul,
.mk-guide__body ol {
  display: grid;
  gap: var(--space-2);
  padding-inline-start: var(--space-6);
}

.mk-guide__body ul {
  list-style: disc;
}

.mk-guide__body ol {
  list-style: decimal;
}

.mk-guide__body li::marker {
  color: var(--gold);
}

.mk-guide__q {
  margin-block: var(--space-6) var(--space-2);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
}

.mk-guide__note {
  margin-block-start: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border-inline-start: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  background-color: var(--paper-warm);
}

.mk-guide__body .mk-omra-depart__table-wrap {
  margin-block-start: var(--space-2);
}

.mk-guide__aside {
  position: sticky;
  inset-block-start: calc(var(--header-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background-color: var(--paper);
  box-shadow: var(--shadow-card);
  line-height: 1.6;
}

.mk-guide__aside-title {
  color: var(--teal-700);
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
}

@media (max-width: 900px) {
  .mk-local__steps,
  .mk-guides,
  .mk-guide__wrap > .mk-container:only-child .mk-guides,
  .mk-guide__layout,
  .mk-omra-page__why-grid,
  .mk-omra-page__steps-list,
  .mk-omra-page__faq-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* minmax(0, …): a plain 1fr track would grow to the price table's
     width and push the page sideways on a phone. */
  .mk-omra-depart__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mk-omra-depart__poster {
    max-inline-size: 360px;
    margin-inline: auto;
  }

  .mk-guide__aside {
    position: static;
  }
}