.catalog-portal-page body { background: var(--bt-canvas, #f3f6fa); }
.catalog-portal-page .top { display: none; }
.bustan-ui.catalog-portal-page #app { width: min(100% - 40px, 1140px); margin-inline: auto; padding: 0; }

.bpc {
  --bpc-deep: var(--bt-deep, #112843);
  --bpc-brand: var(--bt-brand, #214c7a);
  --bpc-ink: var(--bt-ink, #132943);
  --bpc-muted: var(--bt-muted, #52637a);
  --bpc-surface: var(--bt-surface, #fff);
  --bpc-soft: var(--bt-surface-soft, #f7f9fc);
  --bpc-line: var(--bt-line, #dce4ee);
  --bpc-tint: var(--bt-tint, #e9f1fa);
  --bpc-panel-radius: var(--bt-card-radius, 18px);
  --bpc-control-radius: var(--bt-control-radius, 12px);
  color: var(--bpc-ink);
  font-family: var(--bustan-font, system-ui, sans-serif);
  line-height: 1.65;
  padding-block-end: 36px;
}
.bpc *, .bpc *::before, .bpc *::after { box-sizing: border-box; }
.bpc :is(p, h1, h2, h3, dl, dd) { margin: 0; }
.bpc-icon { width: 19px; height: 19px; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.bpc :is(button, a, select, summary, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--bt-focus, #2864a3);
  outline-offset: 3px;
}
.bpc :is(.bpc-primary, .bpc-secondary, .bpc-signin) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; min-width: 0; padding: 8px 16px; border: 1px solid transparent;
  border-radius: var(--bpc-control-radius); font: inherit; font-size: .88rem; font-weight: 750;
  text-align: center; text-decoration: none; line-height: 1.4; cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.bpc .bpc-primary { color: #fff; background: var(--bpc-brand); }
.bpc .bpc-primary:hover { background: var(--bpc-deep); }
.bpc .bpc-primary:disabled { opacity: .58; cursor: wait; }
.bpc .bpc-secondary, .bpc .bpc-signin {
  color: var(--bpc-brand); background: var(--bpc-surface); border-color: var(--bpc-line);
}
.bpc :is(.bpc-secondary, .bpc-signin):hover { background: var(--bpc-tint); border-color: var(--bt-line-emphasis); }

.bpc-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 74px; }
.bpc-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bpc-brand > span {
  width: 46px; height: 46px; flex: none; border-radius: var(--bpc-control-radius); background: var(--bpc-surface);
  border: 1px solid var(--bpc-line); display: grid; place-items: center;
}
.bpc-brand img { width: 39px; height: 39px; object-fit: contain; border-radius: 7px; }
.bpc-brand strong, .bpc-brand small { display: block; }
.bpc-brand strong { color: var(--bpc-ink); font-size: 1.07rem; line-height: 1.4; }
.bpc-brand small { color: var(--bpc-muted); font-size: .73rem; }
.bpc-signin { flex-shrink: 0; }
.bpc-signin .bpc-icon { width: 17px; height: 17px; }

.bpc-hero {
  position: relative; isolation: isolate; overflow: hidden; min-height: 238px;
  display: flex; align-items: center; padding: clamp(22px, 4vw, 42px);
  border-radius: var(--bpc-panel-radius); background: linear-gradient(120deg, var(--bpc-brand), var(--bpc-deep) 72%);
  color: #fff; box-shadow: 0 14px 32px rgb(var(--bt-deep-rgb) / 0.102);
}
.bpc-hero::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 55%; z-index: -1;
  background: url('/brand/portal-makkah.svg') left bottom / contain no-repeat; opacity: .68;
  filter: grayscale(1) sepia(.35) hue-rotate(var(--bt-art-hue)) saturate(1.4);
}
.bpc-hero-copy { max-width: 55%; }
.bpc .bpc-eyebrow { font-size: .76rem; font-weight: 750; color: var(--bpc-brand); }
.bpc-hero .bpc-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--bt-hero-accent, #aec9ea); }
.bpc-hero .bpc-eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bpc-hero h1 {
  color: #fff; font-size: clamp(2.1rem, 4.8vw, 3.4rem); line-height: 1.3; margin-block: 7px 10px;
  font-weight: 800; text-wrap: balance;
}
.bpc-hero-copy > p:not(.bpc-eyebrow) { max-width: 42ch; color: var(--bt-hero-muted, #cbdaea); font-size: .94rem; line-height: 1.7; }

.bpc-next {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 14px 16px; margin-block-start: 12px; border: 1px solid var(--bpc-line);
  border-radius: var(--bpc-panel-radius); background: var(--bpc-surface);
}
.bpc-next-icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--bpc-control-radius);
  background: var(--bpc-tint); color: var(--bpc-brand);
}
.bpc-next-copy h2 { color: var(--bpc-ink); font-size: 1.05rem; line-height: 1.4; }
.bpc-next-copy p { color: var(--bpc-muted); font-size: .83rem; margin-block-start: 3px; }
.bpc-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.bpc-next .bpc-contact-link {
  display: inline-flex; align-items: center; min-height: 48px; color: var(--bpc-brand);
  font-size: .82rem; font-weight: 750; text-underline-offset: 4px;
}

.bpc-packages { scroll-margin-block-start: 16px; margin-block-start: 24px; }
.bpc-section-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-block-end: 14px; }
.bpc-section-head h2 {
  color: var(--bpc-ink); font-size: clamp(1.35rem, 3vw, 1.95rem); font-weight: 800; line-height: 1.4;
  margin-block-start: 4px;
}
.bpc-result-count { color: var(--bpc-muted); font-size: .83rem; flex-shrink: 0; }
.bpc-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 14px; }
.bpc-controls[hidden] { display: none; }
.bpc-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.bpc-filters button {
  padding: 7px 14px; min-height: 48px; min-width: 48px; border: 1px solid var(--bpc-line); border-radius: var(--bpc-control-radius);
  background: var(--bpc-surface); color: var(--bpc-muted); font: inherit; font-size: .82rem; font-weight: 750; cursor: pointer;
}
.bpc-filters button:hover { border-color: var(--bt-line-emphasis); }
.bpc-filters button[aria-pressed="true"] {
  color: var(--bpc-brand); background: var(--bpc-tint); border-color: var(--bpc-brand);
}
.bpc-sort { display: flex; align-items: center; gap: 8px; color: var(--bpc-muted); font-size: .81rem; white-space: nowrap; }
.bpc-sort select {
  min-height: 48px; width: auto; padding: 7px 11px; border-radius: var(--bpc-control-radius);
  border: 1px solid var(--bpc-line); background: var(--bpc-surface); color: var(--bpc-ink); font: inherit;
}
.bpc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19.75rem), 1fr)); gap: 16px; align-items: stretch; }
.bpc-list:has(> .bpc-card:only-child) { grid-template-columns: minmax(0, 34rem); }
.bpc-card {
  min-width: 0; display: flex; flex-direction: column; background: var(--bpc-surface); border: 1px solid var(--bpc-line);
  border-radius: var(--bpc-panel-radius); padding: 18px; box-shadow: 0 5px 16px rgb(var(--bt-deep-rgb) / 0.039); overflow-wrap: anywhere;
}
.bpc-card-head { margin-block-end: 12px; }
.bpc-transport {
  display: inline-flex; align-items: center; gap: 6px; color: var(--bpc-brand); background: var(--bpc-tint);
  border-radius: 8px; padding: 4px 9px; font-size: .75rem; font-weight: 750;
}
.bpc-transport .bpc-icon { width: 15px; height: 15px; }
.bpc-card-head h3 { color: var(--bpc-ink); font-size: 1.22rem; line-height: 1.45; margin-block-start: 7px; }
.bpc-card-head p { color: var(--bpc-muted); font-size: .85rem; }
.bpc-dates {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px;
  border: 1px solid var(--bpc-line); border-radius: var(--bpc-control-radius); background: var(--bpc-soft);
}
.bpc-dates > div, .bpc-facts > div { min-width: 0; }
.bpc-dates > div + div { border-inline-start: 1px solid var(--bpc-line); padding-inline-start: 10px; }
.bpc-dates .bpc-icon, .bpc-facts .bpc-icon { color: var(--bpc-brand); width: 15px; height: 15px; }
.bpc-dates dt, .bpc-facts dt { color: var(--bpc-muted); font-size: .75rem; display: flex; align-items: center; gap: 5px; }
.bpc-dates dd, .bpc-facts dd { color: var(--bpc-ink); font-weight: 700; font-size: .88rem; }
.bpc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; padding-block: 14px; }
.bpc-details { color: var(--bpc-muted); padding-block: 0 8px; font-size: .86rem; }
.bpc-details summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; min-height: 48px;
  color: var(--bpc-brand); font-weight: 750; list-style: none;
}
.bpc-details summary::-webkit-details-marker { display: none; }
.bpc-details summary .bpc-icon { width: 15px; height: 15px; }
.bpc-details[open] summary .bpc-icon { transform: rotate(180deg); }
.bpc-details p { white-space: pre-line; padding-block-start: 4px; }
.bpc-card-foot { margin-block-start: auto; padding-block-start: 11px; border-block-start: 1px solid var(--bpc-line); }
.bpc-price { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.bpc-price span { color: var(--bpc-muted); font-size: .83rem; }
.bpc-price strong { color: var(--bpc-ink); font-size: 1.5rem; line-height: 1.45; font-weight: 800; font-variant-numeric: tabular-nums; }
.bpc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block-start: 10px; }
.bpc-actions :is(.bpc-primary, .bpc-secondary) { padding-inline: 8px; }
.bpc-actions .bpc-icon { width: 16px; height: 16px; }

.bpc-empty, .bpc-loading {
  grid-column: 1 / -1; padding: 28px 16px; text-align: center; background: var(--bpc-surface);
  border: 1px solid var(--bpc-line); border-radius: var(--bpc-panel-radius); color: var(--bpc-muted);
}
.bpc-empty-icon {
  width: 44px; height: 44px; margin-inline: auto; display: grid; place-items: center;
  border-radius: var(--bpc-control-radius); background: var(--bpc-tint); color: var(--bpc-brand);
}
.bpc-empty h3 { color: var(--bpc-ink); margin-block: 8px 3px; font-size: 1.05rem; }
.bpc-empty .bpc-secondary { margin-block-start: 12px; }
.bpc-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-block-start: 24px; padding: 13px 0 5px; border-block-start: 1px solid var(--bpc-line);
}
.bpc-footer > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 9px; }
.bpc-footer strong { color: var(--bpc-ink); }
.bpc-footer span { color: var(--bpc-muted); font-size: .8rem; }
.bpc-contact { display: flex; gap: 6px 13px; flex-wrap: wrap; }
.bpc-contact a {
  display: inline-flex; align-items: center; gap: 5px; min-height: 48px; color: var(--bpc-brand);
  font-size: .83rem; font-weight: 750; text-underline-offset: 4px;
}
.bpc-contact .bpc-icon { width: 16px; height: 16px; }

.bpc .bpc-dialog {
  width: min(calc(100% - 24px), 555px); max-width: none;
  max-height: min(92vh, 700px); max-height: min(92dvh, 700px); overflow-y: auto;
  border: 1px solid var(--bpc-line); padding: 0; border-radius: var(--bpc-panel-radius);
  background: var(--bpc-surface); color: var(--bpc-ink); box-shadow: 0 24px 72px rgb(var(--bt-deep-rgb) / 0.314);
}
.bpc-dialog::backdrop { background: rgb(var(--bt-deep-rgb, 17 40 67) / 0.651); }
.bpc-form, .bpc-success { display: grid; gap: 12px; padding: clamp(15px, 4vw, 24px); }
.bpc-form-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bpc-form-head h2, .bpc-success h2 { font-size: 1.42rem; color: var(--bpc-ink); }
.bpc .bpc-close {
  border: 1px solid var(--bpc-line); color: var(--bpc-brand); background: var(--bpc-surface);
  width: 48px; min-height: 48px; flex: none; padding: 0; display: grid; place-items: center;
  border-radius: var(--bpc-control-radius); cursor: pointer;
}
.bpc .bpc-close:hover { background: var(--bpc-tint); }
.bpc-order {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px 12px; align-items: center;
  background: var(--bpc-tint); border-radius: var(--bpc-control-radius); padding: 9px 12px;
}
.bpc-order strong, .bpc-order span { display: block; overflow-wrap: anywhere; }
.bpc-order span { color: var(--bpc-muted); font-size: .79rem; }
.bpc-order bdi { color: var(--bpc-ink); font-weight: 800; }
.bpc-form-note { color: var(--bpc-muted); font-size: .86rem; }
.bpc-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bpc-form label { min-width: 0; display: block; color: var(--bpc-ink); font-size: .82rem; font-weight: 700; }
.bpc-form label span { color: var(--bpc-muted); font-size: .73rem; font-weight: 400; }
.bpc-form-fields input, .bpc-form-fields textarea {
  min-width: 0; display: block; width: 100%; min-height: 48px; margin-block-start: 4px; padding: 8px 10px;
  background: var(--bpc-surface); border: 1px solid var(--bpc-line); border-radius: var(--bpc-control-radius);
  color: var(--bpc-ink); font: inherit; font-size: 1rem; font-weight: 400;
}
.bpc-form-fields textarea { resize: vertical; }
.bpc-field-wide { grid-column: 1 / -1; }
.bpc-status { color: var(--bpc-muted); font-size: .86rem; }
.bpc-status:empty { display: none; }
.bpc-status.bpc-error {
  color: var(--bt-error, #973535); background: var(--bt-error-bg, #fcebee);
  border-radius: var(--bpc-control-radius); padding: 8px 10px;
}
.bpc .bpc-send { width: 100%; }
.bpc-success { text-align: center; justify-items: center; padding-block: 28px; }
.bpc-success > span {
  width: 48px; height: 48px; border-radius: var(--bpc-control-radius); display: grid; place-items: center;
  background: var(--bt-ok-bg, #e7f4ed); color: var(--bt-ok, #176246);
}
.bpc-success p { color: var(--bpc-muted); }

/* Existing traveler entry links also use this class. */
.bpc-link { display: inline-flex; margin: 1rem auto; justify-content: center; color: var(--bt-brand, #214c7a); text-underline-offset: 4px; }

@media (max-width: 940px) {
  .bpc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 590px) {
  .bustan-ui.catalog-portal-page #app { width: min(100% - 28px, 1140px); }
  .bpc-topbar { min-height: 65px; }
  .bpc .bpc-signin { padding-inline: 10px; font-size: .8rem; }
  .bpc-brand > span { width: 42px; height: 42px; }
  .bpc-brand img { width: 35px; height: 35px; }
  .bpc-brand strong { font-size: .99rem; }
  .bpc-brand small { font-size: .68rem; }
  .bpc-hero { min-height: 178px; padding: 18px 16px; }
  .bpc-hero::before { inset-block-start: 20px; width: 72%; opacity: .42; }
  .bpc-hero::after {
    content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgb(var(--bt-deep-rgb) / 0.639) 10%, transparent 78%); z-index: -1;
  }
  .bpc-hero-copy { max-width: min(100%, 19rem); }
  .bpc-hero h1 { font-size: clamp(1.8rem, 6.6vw, 2.35rem); margin-block: 6px 8px; }
  .bpc-hero-copy > p:not(.bpc-eyebrow) { max-width: 29ch; font-size: .84rem; }
  .bpc-next { grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; padding: 11px; }
  .bpc-next-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; gap: 8px; }
  .bpc-next-actions .bpc-primary { padding-inline: 6px; }
  .bpc-next .bpc-contact-link { justify-content: center; text-align: center; }
  .bpc-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bpc-packages { margin-block-start: 20px; }
  .bpc-controls { flex-wrap: wrap; }
  .bpc-filters button { padding-inline: 10px; }
  .bpc-card { padding: 15px; }
  .bpc-footer { margin-block-start: 16px; }
}
@media (max-width: 370px) {
  .bpc-hero { min-height: 151px; padding: 13px 12px; }
  .bpc-hero h1 { font-size: 1.6rem; margin-block: 4px 6px; }
  .bpc-hero-copy > p:not(.bpc-eyebrow) { font-size: .81rem; line-height: 1.55; }
  .bpc-next { grid-template-columns: minmax(0, 1fr); }
  .bpc-next-icon { display: none; }
  .bpc-packages { margin-block-start: 14px; }
  .bpc-section-head, .bpc-controls { margin-block-end: 10px; }
  .bpc-section-head .bpc-eyebrow { display: none; }
  .bpc-result-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bpc-controls, .bpc-filters { gap: 6px; }
  .bpc-filters button { padding-inline: 8px; font-size: .78rem; }
  .bpc-form-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .bpc * { transition: none !important; }
}