/* Event 1 public landing: deliberately scoped so auth and checkout retain their UI. */
.e7sebha-landing {
  --font-body-ar: "DIN Next LT Arabic", "Tajawal", sans-serif;
  --font-body-en: "Proxima Nova", "Montserrat", system-ui, sans-serif;
  --font-display-ar: "Lutfey Arabic", "Baloo Bhaijaan 2", "Tajawal", sans-serif;
  --font-display-en: "Organica", "Baloo 2", system-ui, sans-serif;
  --e7sebha-ink: var(--e7-navy, #060533);
  --e7sebha-sky: var(--e7-navy, #060533);
  --e7sebha-blue: var(--e7-blue, #00aae6);
  --e7sebha-green: var(--e7-green, #00b66d);
  --e7sebha-yellow: var(--e7-yellow, #ffcd00);
  --e7sebha-paper: var(--e7-paper, #f6f7f9);
  overflow: clip;
  background: var(--e7sebha-paper);
  color: var(--e7sebha-ink);
  font-family: var(--font-body-ar);
}

.e7sebha-container { width: min(100% - 2rem, 70rem); margin-inline: auto; }
.e7sebha-eyebrow { color: var(--e7sebha-yellow); font-size: .875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.e7sebha-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: 9999px; background: var(--e7sebha-yellow); padding: .625rem 1.5rem; color: var(--e7sebha-ink); font-weight: 800; text-decoration: none; box-shadow: 0 .5rem 1rem rgb(0 0 0 / .18); }
.e7sebha-button--hero { min-height: 56px; padding: .875rem 2rem; font-family: var(--font-body-ar); font-size: 1.125rem; }
.e7sebha-button:focus-visible { outline: 3px solid var(--e7sebha-yellow); outline-offset: 3px; }
.e7sebha-hero { position: relative; isolation: isolate; overflow: hidden; padding: 1.25rem 0 0; background: var(--e7sebha-sky); color: #fff; text-align: center; }
.e7sebha-hero__decorations { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.e7sebha-hero__decoration { position: absolute; object-fit: contain; transform: rotate(var(--e7-rotation, 0deg)); }
.e7sebha-hero__decoration--purple { width: 46rem; top: -10rem; right: -14rem; opacity: .14; --e7-rotation: -10deg; animation: e7sebha-float 11s ease-in-out infinite; }
.e7sebha-hero__decoration--pattern { width: 46rem; top: -3rem; left: -14rem; opacity: .14; transform: rotate(-6deg); }
.e7sebha-hero__decoration--yellow-check { width: 10.5rem; top: 15.9rem; left: 7%; --e7-rotation: -17deg; animation: e7sebha-float-wiggle 6.2s ease-in-out infinite; }
.e7sebha-hero__decoration--green-badge { width: 7.75rem; right: 8%; bottom: 5.2rem; --e7-rotation: -12deg; animation: e7sebha-float-wiggle 9.1s ease-in-out .6s infinite; }
.e7sebha-hero__decoration--blue-check { width: 10rem; top: 2rem; right: 8%; --e7-rotation: 13deg; animation: e7sebha-float 7.3s ease-in-out .8s infinite; }
.e7sebha-hero__year { position: absolute; top: 12.8rem; left: 7%; color: var(--e7sebha-yellow); font-family: "Organica", sans-serif; font-size: 2.75rem; transform: rotate(-9deg); --e7-rotation: -9deg; animation: e7sebha-float-wiggle 7s ease-in-out .3s infinite; }
.e7sebha-hero__content { display: grid; justify-items: center; gap: .9rem; }
.e7sebha-hero__availability, .e7sebha-sticker { display: inline-flex; align-items: center; font-size: 1rem; font-weight: 700; line-height: 1.1; }
.e7sebha-hero__availability { margin: 0; border-radius: 999px; background: var(--e7sebha-green); padding: .32rem .85rem; }
.e7sebha-hero__wordmark { width: min(14.5rem, 50vw); height: 17rem; margin: .1rem 0 -.2rem; object-fit: contain; }
.e7sebha-hero h1, .e7sebha-section h2, .e7sebha-features h2, .e7sebha-footer h2 { margin: 0; font-weight: 500; line-height: 1.15; }
.e7sebha-hero h1 { font-size: clamp(2.25rem, 10vw, 5rem); }
.e7sebha-hero__lead { max-width: 42rem; margin: 0; color: rgb(255 255 255 / .78); font-size: 1.125rem; line-height: 1.8; }
.e7sebha-hero__stickers, .e7sebha-hero__booking { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem; }
.e7sebha-sticker { border-radius: 40% 42% 44% 40% / 60% 58% 62% 60%; padding: 5px 14px; color: #fff; box-shadow: 0 .35rem .8rem rgb(0 0 0 / .14); }
.e7sebha-sticker--green { background: #00b66d; transform: rotate(-4deg); }
.e7sebha-sticker--blue { background: #00aae6; transform: rotate(3deg); }
.e7sebha-sticker--date { direction: ltr; font-family: "Organica", "Baloo 2", system-ui, sans-serif; unicode-bidi: isolate; }
.e7sebha-sticker--venue { font-family: "Lutfey Arabic", "Baloo Bhaijaan 2", "Tajawal", sans-serif; }
.e7sebha-hero__booking { margin: .55rem 0 1.75rem; }
.e7sebha-from-price { display: inline-flex; align-items: baseline; gap: .3rem; margin: 0; color: rgb(255 255 255 / .6); font-family: var(--font-body-ar); font-size: .9375rem; }
.e7sebha-from-price strong { color: #fff; font-size: 1.125rem; }
.e7sebha-from-price__suffix { white-space: nowrap; }
.e7sebha-marquee { overflow: hidden; border-top: 1px solid rgb(255 255 255 / .1); padding: .8rem 0; direction: ltr; }
.e7sebha-marquee p { display: flex; width: max-content; gap: 0; margin: 0; color: rgb(255 255 255 / .82); font-size: 1rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; animation: e7sebha-marquee 26s linear infinite; }
.e7sebha-marquee__text { display: inline-flex; align-items: center; font-family: var(--font-body-ar); }
.e7sebha-marquee__english { font-family: var(--font-body-en); }
.e7sebha-marquee__separator { display: inline-flex; align-items: center; }
.e7sebha-section { background: var(--e7sebha-paper); padding: 60px 40px; }
.e7sebha-section .e7sebha-container { width: min(100%, 1200px); text-align: center; }
.e7sebha-programme-heading { margin-bottom: 36px; text-align: center; }
.e7sebha-section .e7sebha-eyebrow { margin: 0; color: var(--e7sebha-green); font-family: var(--font-body-en); font-size: 1.5rem; font-weight: 700; letter-spacing: .16em; }
.e7sebha-section h2 { margin: 10px 0 0; color: var(--e7sebha-ink); font-family: var(--font-display-ar); font-size: 56px; font-weight: 400; line-height: .98; }
.e7sebha-features h2 { font-size: clamp(1.8rem, 7vw, 3rem); }
.e7sebha-programme-grid, .e7sebha-features__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; counter-reset: day; }
.e7sebha-programme-grid { align-items: start; margin-top: 0; }
.e7sebha-programme-card { display: grid; align-content: start; min-height: 0; overflow: hidden; border-radius: 22px; background: var(--surface-card, #fff); color: var(--e7sebha-ink); box-shadow: 0 8px 20px rgb(6 5 51 / .1); text-align: start; counter-increment: day; font-family: var(--font-body-en); }
.e7sebha-programme-card__accent { height: 6px; background: var(--e7sebha-blue); }
.e7sebha-programme-card:nth-child(2) .e7sebha-programme-card__accent { background: var(--e7sebha-yellow); }
.e7sebha-programme-card:nth-child(3n) .e7sebha-programme-card__accent { background: var(--e7sebha-green); }
.e7sebha-programme-card__content { display: grid; align-content: start; row-gap: 8px; padding: 30px; }
.e7sebha-programme-card p, .e7sebha-programme-card h3 { margin: 0; }
.e7sebha-programme-card__heading { display: flex; align-items: baseline; gap: 10px; }
.e7sebha-programme-card__number::before { content: counter(day, decimal-leading-zero); color: var(--e7sebha-blue); font-family: var(--font-display-en); font-size: 32px; line-height: .9; }
.e7sebha-programme-card:nth-child(2) .e7sebha-programme-card__number::before { color: #e6b800; }
.e7sebha-programme-card:nth-child(3n) .e7sebha-programme-card__number::before { color: var(--e7sebha-green); }
.e7sebha-programme-card h3 { color: var(--e7sebha-ink); font-family: var(--font-display-ar); font-size: 34px; font-weight: 400; line-height: 1; }
.e7sebha-programme-card__date { color: var(--e7-ink-60); font-family: var(--font-body-ar); font-size: 17px; }
.e7sebha-programme-card__transport-prices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.e7sebha-programme-card__transport-pill { display: inline-flex; align-items: center; border-radius: 12px; padding: 8px 16px; color: #fff; font-family: "DIN Next LT Arabic", sans-serif; font-size: 14px; font-weight: 700; line-height: 1; }
.e7sebha-programme-card__availability { justify-self: start; margin-top: 2px; border: 1px solid #ebc7e4; border-radius: 999px; background: #f7e6f4; padding: 5px 14px; color: #9c1a8e; font-family: var(--font-body-ar); font-size: 14px; font-weight: 700; }
.e7sebha-button--card { width: 100%; margin-top: .25rem; }
.e7sebha-empty { margin-top: 1.5rem; }
.e7sebha-features { padding: 3.25rem 0; background: var(--e7sebha-yellow); }
.e7sebha-features__grid { margin-top: 0; }
.e7sebha-features article { display: flex; align-items: center; flex-direction: column; gap: .75rem; padding: 1rem; color: var(--e7sebha-ink); text-align: center; }
.e7sebha-features h3 { margin: 0; color: var(--e7-navy); font-family: var(--font-display-ar); font-size: 1.625rem; font-weight: 500; }
.e7sebha-features p { max-width: 18rem; margin: .3rem 0 0; color: rgb(6 5 51 / .7); line-height: 1.55; }
.e7sebha-check { display: block; width: 3.6rem; height: 3.6rem; object-fit: contain; }
.e7sebha-footer { padding: 3.875rem 0 calc(2.25rem + env(safe-area-inset-bottom)); background: var(--e7sebha-ink); color: white; text-align: center; }
.e7sebha-footer__cta { max-width: 46rem; margin-inline: auto; }
.e7sebha-footer h2 { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.e7sebha-footer__description { max-width: 38rem; margin: .9rem auto 1.75rem; color: rgb(255 255 255 / .7); font-size: 1.125rem; line-height: 1.6; }
.e7sebha-footer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .875rem; }
.e7sebha-footer__actions .e7sebha-button { min-height: 3.5rem; padding-inline: 2.25rem; font-family: var(--font-display-en); font-size: 1.15rem; font-weight: 400; }
.e7sebha-button--light { background: var(--e7sebha-yellow); color: var(--e7sebha-ink); }
.e7sebha-button--outline { border: 2px solid rgb(255 255 255 / .45); background: transparent; color: #fff; box-shadow: none; }
.e7sebha-button--outline:hover { border-color: #fff; background: rgb(255 255 255 / .08); }
.e7sebha-footer__lower { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.875rem; border-top: 1px solid rgb(255 255 255 / .12); padding-top: 1.5rem; text-align: start; }
.e7sebha-footer__brand { display: inline-flex; align-items: center; gap: .625rem; font-size: 1.125rem; font-weight: 500; }
.e7sebha-footer__icon { width: 4rem; object-fit: contain; }
.e7sebha-footer__copyright { margin: 0; color: rgb(255 255 255 / .45); font-family: "Proxima Nova", ui-sans-serif, system-ui, sans-serif; font-size: .8125rem; letter-spacing: .08em; }

/* Event 1 checkout: shared, logical-direction booking chrome. */
.e7sebha-checkout {
  --e7sebha-checkout-ink: var(--e7-navy, #060533);
  --e7sebha-checkout-blue: var(--e7-green, #00b66d);
  --e7sebha-checkout-yellow: var(--e7-yellow, #ffcd00);
  color: var(--e7sebha-checkout-ink);
  font-family: "DIN Next LT Arabic", "Lutfey Arabic", ui-sans-serif, system-ui, sans-serif;
}
.e7sebha-auth, .e7sebha-wallet {
  --e7sebha-checkout-ink: var(--e7-navy, #060533);
  --e7sebha-checkout-blue: var(--e7-green, #00b66d);
  --e7sebha-checkout-yellow: var(--e7-yellow, #ffcd00);
  color: var(--e7sebha-checkout-ink);
  font-family: "DIN Next LT Arabic", "Lutfey Arabic", ui-sans-serif, system-ui, sans-serif;
}
.e7sebha-landing :lang(en), .e7sebha-checkout :lang(en), .e7sebha-auth :lang(en) { font-family: "Proxima Nova", ui-sans-serif, system-ui, sans-serif; }
.e7sebha-landing :is(h1, h2, h3):lang(en), .e7sebha-checkout :is(h1, h2, h3):lang(en), .e7sebha-auth :is(h1, h2, h3):lang(en) { font-family: "Organica", "Proxima Nova", ui-sans-serif, system-ui, sans-serif; font-weight: 400; }
.e7sebha-checkout { width: min(100%, 80rem); min-height: calc(100vh - 4.5rem); margin-inline: auto; background: var(--e7-paper, #f6f7f9); }
.e7sebha-checkout .bg-surface, .e7sebha-auth__card { border-color: var(--e7-line, rgba(6, 5, 51, 0.12)); border-radius: 1.25rem; background: #fff; box-shadow: 0 .75rem 2rem rgb(6 5 51 / .08); }
.e7sebha-account-header { min-height: 3.75rem; }
.e7sebha-account-header .e7sebha-site-header__inner { min-height: 3.75rem; justify-content: flex-start; }
.e7sebha-account-header .e7sebha-site-header__logo { width: 7.75rem; height: 2.55rem; }
.e7sebha-auth__card { display: grid; gap: 1rem; padding: 2rem; }
.e7sebha-account { min-height: calc(100vh - 4.5rem); }
.e7sebha-account__progress { border-bottom: 1px solid var(--e7-line, rgba(6, 5, 51, 0.12)); background: #fff; padding: .95rem max(1rem, calc((100% - 75rem) / 2)); }
.e7sebha-account__progress .e7sebha-checkout__progress { max-width: 75rem; margin-inline: auto; overflow: visible; }
.e7sebha-account__content { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; box-sizing: border-box; min-height: calc(100vh - 9.5rem); justify-items: center; align-content: start; padding: 2.5rem 1rem 4rem; background: var(--e7-paper, #f6f7f9); }
.e7sebha-account__flash { width: min(100% - 2rem, 45rem); margin: 1rem auto 0; }
.e7sebha-account__card { box-sizing: border-box; min-width: 0; width: min(100%, 35rem); border: 1px solid var(--e7-line, rgba(6, 5, 51, 0.12)); border-radius: 22px; padding: 30px; box-shadow: 0 8px 24px rgb(6 5 51 / .08); }
.e7sebha-account__tabs { display: flex; width: 100%; gap: .25rem; border-radius: 999px; background: var(--e7-paper, #f6f7f9); padding: .25rem; }
.e7sebha-account__tab { display: inline-flex; min-height: 2.75rem; flex: 1; align-items: center; justify-content: center; border-radius: 999px; color: var(--e7-ink-60); font-size: .95rem; font-weight: 500; text-align: center; text-decoration: none; }
.e7sebha-account__tab--active { background: var(--e7-navy, #060533); color: #fff; font-weight: 700; box-shadow: 0 .25rem .75rem rgb(6 5 51 / .15); }
.e7sebha-account__title { margin: .25rem 0 0; color: var(--e7sebha-checkout-ink); font-family: "Lutfey Arabic", "DIN Next LT Arabic", sans-serif; font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 500; line-height: 1.1; text-align: center; }
.e7sebha-account__description { margin: -.35rem 0 .4rem; color: var(--e7-ink-60); font-size: .95rem; line-height: 1.6; text-align: center; }
.e7sebha-account__otp-note { display: flex; gap: .625rem; align-items: flex-start; margin: 0; border-radius: .75rem; background: #cceffb; padding: .8rem .9rem; color: #0a5e80; font-size: .875rem; line-height: 1.55; }
.e7sebha-account__otp-note-icon { width: 1.125rem; height: 1.125rem; flex: none; margin-top: .1rem; color: var(--e7-blue, #00aae6); }
.e7sebha-account__phone { display: flex; min-height: 3.25rem; align-items: stretch; overflow: hidden; border: 2px solid var(--e7-line, rgba(6, 5, 51, 0.12)); border-radius: .75rem; background: #fff; direction: ltr; }
.e7sebha-account .e7sebha-account__phone > span { border-radius: 0; border-color: var(--e7-line, rgba(6, 5, 51, 0.12)); background: var(--e7-paper, #f6f7f9); color: var(--e7sebha-checkout-ink); font-family: "Proxima Nova", "DIN Next LT Arabic", sans-serif; font-size: 1rem; box-shadow: none; }
.e7sebha-account__phone input { min-height: 3.1rem; border: 0 !important; border-radius: 0 !important; font-size: 1rem; }
.e7sebha-account__phone:focus-within { border-color: var(--e7-blue, #00aae6); outline: 3px solid rgb(10 167 222 / .2); outline-offset: 2px; }
.e7sebha-account__switch { margin: 0; color: var(--e7-ink-60); font-size: .9rem; text-align: center; }
.e7sebha-account__recovery { margin: 0; color: var(--e7-ink-60); font-size: .9rem; text-align: end; }
.e7sebha-account__recovery a { color: var(--e7sebha-checkout-ink); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
.e7sebha-account__switch a, .e7sebha-account__resend a { color: var(--e7sebha-checkout-ink); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
.e7sebha-account__resend { color: var(--e7-ink-60); font-size: .875rem; text-align: center; }
.e7sebha-account__details { gap: 16px; }
.e7sebha-account__verified-phone { display: flex; align-items: center; justify-content: flex-start; gap: .55rem; margin: 0; border: 1px solid #bfe8d5; border-radius: 12px; background: #d3f4e6; padding: .8rem .9rem; color: var(--e7sebha-checkout-ink); font-size: .9rem; }
.e7sebha-account__verified-phone-label { color: #36735b; }
.e7sebha-account__verified-phone b { margin-inline-start: auto; font-family: "Proxima Nova", "DIN Next LT Arabic", sans-serif; font-weight: 700; }
.e7sebha-account__verified-phone-icon { width: 1.15rem; height: 1.15rem; flex: none; color: var(--e7-green, #00b66d); }
.e7sebha-account .ui-otp-code-field, .e7sebha-account [data-controller~="otp-code"] { justify-content: center; }
.e7sebha-account [type="submit"] { width: 100%; min-height: 3.5rem; font-size: 1rem; font-weight: 700; }
.e7sebha-checkout .text-primary, .e7sebha-auth .text-primary { color: var(--e7-green, #00b66d); }
.e7sebha-checkout .bg-primary, .e7sebha-auth .bg-primary { background-color: var(--e7-navy, #060533); color: #fff; }
.e7sebha-checkout [type="submit"], .e7sebha-auth [type="submit"] { border-radius: 999px; background: var(--e7-navy, #060533); color: #fff; box-shadow: 0 .35rem .8rem rgb(6 5 51 / .18); }
.e7sebha-checkout input:not([type="hidden"]):not([type="checkbox"]), .e7sebha-checkout select, .e7sebha-auth input:not([type="hidden"]):not([type="checkbox"]), .e7sebha-auth select { border-color: var(--e7-line, rgba(6, 5, 51, 0.12)); border-radius: .75rem; }
.e7sebha-checkout .ui-input-checkbox input[type="checkbox"], .e7sebha-auth .ui-input-checkbox input[type="checkbox"] { appearance: none; box-sizing: border-box; width: 16px; height: 16px; min-width: 16px; min-height: 16px; border: 1px solid var(--e7-line, rgba(6, 5, 51, 0.12)); border-radius: 4px; background: #fff; }
.e7sebha-checkout .ui-input-checkbox input[type="checkbox"]:checked, .e7sebha-auth .ui-input-checkbox input[type="checkbox"]:checked { border-color: var(--e7-green, #00b66d); background: var(--e7-green, #00b66d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8 3 3 7-7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.e7sebha-checkout .ui-input-checkbox input[type="checkbox"]:focus-visible, .e7sebha-auth .ui-input-checkbox input[type="checkbox"]:focus-visible { outline: 3px solid var(--e7-navy, #060533); outline-offset: 2px; }
.e7sebha-checkout .ui-input-checkbox input[type="checkbox"]:disabled, .e7sebha-auth .ui-input-checkbox input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .6; }
@media (forced-colors: active) {
  .e7sebha-checkout .ui-input-checkbox input[type="checkbox"],
  .e7sebha-checkout .ui-input-checkbox input[type="checkbox"]:checked,
  .e7sebha-checkout .ui-input-checkbox input[type="checkbox"]:focus-visible,
  .e7sebha-checkout .ui-input-checkbox input[type="checkbox"]:disabled,
  .e7sebha-auth .ui-input-checkbox input[type="checkbox"],
  .e7sebha-auth .ui-input-checkbox input[type="checkbox"]:checked,
  .e7sebha-auth .ui-input-checkbox input[type="checkbox"]:focus-visible,
  .e7sebha-auth .ui-input-checkbox input[type="checkbox"]:disabled { appearance: auto; border: revert; border-radius: revert; background: revert; outline: revert; opacity: revert; cursor: revert; }
}
.e7sebha-checkout__panel { border-color: var(--e7-line, rgba(6, 5, 51, 0.12)) !important; }
.e7sebha-checkout__panel { box-shadow: 0 .7rem 2rem rgb(23 60 87 / .08); }
.e7sebha-checkout__progress { overflow-x: auto; padding-block-end: .25rem; }
.e7sebha-checkout__progress ol { display: flex; min-width: max-content; align-items: flex-start; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.e7sebha-checkout__progress-step { display: flex; min-width: 2.5rem; flex-direction: column; align-items: center; gap: .25rem; color: #617080; font-size: .75rem; font-weight: 800; text-align: center; }
.e7sebha-checkout__progress-number { display: grid; width: 2rem; height: 2rem; place-items: center; border: 2px solid #cde4e9; border-radius: 50%; background: white; color: inherit; }
.e7sebha-checkout__progress-step--complete, .e7sebha-checkout__progress-step--current { color: var(--e7sebha-checkout-blue); }
.e7sebha-checkout__progress-step--complete .e7sebha-checkout__progress-number { border-color: var(--e7sebha-checkout-blue); background: var(--e7sebha-checkout-blue); color: white; }
.e7sebha-checkout__progress-step--current .e7sebha-checkout__progress-number { border-color: var(--e7sebha-checkout-yellow); background: var(--e7sebha-checkout-yellow); color: var(--e7sebha-checkout-ink); }
.e7sebha-account .e7sebha-checkout__progress ol { display: grid; min-width: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .25rem; }
.e7sebha-account .e7sebha-checkout__progress-step { position: relative; min-width: 0; color: #9292a2; font-family: "DIN Next LT Arabic", "Lutfey Arabic", sans-serif; font-size: .78rem; font-weight: 500; }
.e7sebha-account .e7sebha-checkout__progress-step--current { color: var(--e7sebha-checkout-ink); font-weight: 700; }
.e7sebha-account .e7sebha-checkout__progress-number { width: 1.625rem; height: 1.625rem; border-color: var(--e7-line, rgba(6, 5, 51, 0.12)); background: var(--e7-paper, #f6f7f9); font-family: "Proxima Nova", "DIN Next LT Arabic", sans-serif; }
.e7sebha-account .e7sebha-checkout__progress-label { overflow-wrap: anywhere; }
/* Account-only reference details: phone, OTP, and final signup stay isolated from checkout and landing. */
.e7sebha-account__card--entry, .e7sebha-account__card--details { padding: 40px; }
.e7sebha-account__card--signup { width: min(100%, 45rem); gap: 16px; padding: 40px 60px 52px; }
.e7sebha-account__card--signup > .min-w-0 { display: grid; gap: 6px; }
.e7sebha-account__signup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.e7sebha-account__signup-grid > .min-w-0, .e7sebha-account__signup-grid > div, .e7sebha-account__signup-grid > fieldset, .e7sebha-account__card > div:not(.ui-input-checkbox) { display: grid; min-width: 0; gap: 1rem; }
.e7sebha-account__signup-grid > .e7sebha-account__gender { gap: 0; }
.e7sebha-account__card--entry label { color: var(--e7-navy); font-size: 14px; font-weight: 500; }
.e7sebha-account__card--entry input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), .e7sebha-account__card--entry select { box-sizing: border-box; min-height: 52px; font-size: 1.05rem; }
.e7sebha-account__card--entry input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), .e7sebha-account__card--entry select, .e7sebha-account__phone { border: 2px solid var(--e7-line, rgba(6, 5, 51, 0.12)); border-radius: 14px; }
.e7sebha-account__card--entry input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):focus, .e7sebha-account__card--entry select:focus { border-color: var(--e7-green, #00b66d); outline: 3px solid rgb(0 182 109 / .14); outline-offset: 0; }
.e7sebha-account__card--signup .e7sebha-account__phone { min-height: 52px; }
.e7sebha-account__card--signup .e7sebha-account__phone input { min-height: 48px; }
.e7sebha-account__card--signup .e7sebha-account__phone:focus-within { border-color: var(--e7-green, #00b66d); outline: 3px solid rgb(0 182 109 / .14); outline-offset: 0; }
.e7sebha-account__gender { margin: 0; border: 0; padding: 0; gap: 0; }
.e7sebha-account__gender-label { padding: 0; }
.e7sebha-account__gender-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 0; }
.e7sebha-account__gender-option { display: flex; box-sizing: border-box; height: 52px; min-height: 52px; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--e7-line, rgba(6, 5, 51, 0.12)); border-radius: 14px; cursor: pointer; }
.e7sebha-account__gender-option input[type="radio"] { width: 18px; min-width: 18px; min-height: 18px; margin: 0; padding: 0; accent-color: var(--e7-green, #00b66d); }
.e7sebha-account__gender-option:has(input[type="radio"]:checked) { border-color: var(--e7-green, #00b66d); background: #d3f4e6; }
.e7sebha-account__gender-option:has(input[type="radio"]:focus-visible) { outline: 3px solid rgb(0 182 109 / .14); outline-offset: 2px; }
.e7sebha-account__gender-option:has(input[aria-invalid="true"]) { border-color: #dc2626; }
.e7sebha-account__card--entry input[aria-invalid="true"] { border-color: #dc2626; }
.e7sebha-account__phone--invalid { border-color: #dc2626; }
.e7sebha-account__field-error { margin: 0; color: #dc2626; font-size: .8125rem; }
.e7sebha-account__card--signup [type="submit"], .e7sebha-account__card--otp [type="submit"] { min-height: 56px; background: #00b66d; box-shadow: 0 .5rem 1rem rgb(0 182 109 / .2); }
.e7sebha-account__card--signup [type="submit"]:hover, .e7sebha-account__card--otp [type="submit"]:hover { background: #00b66d; }
.e7sebha-account__card .e7sebha-action-footer { margin-top: 0; }
.e7sebha-account__card .e7sebha-action-footer__button { width: min(100%, 22rem); justify-self: center; }
.e7sebha-account__card--otp { gap: 0; padding: 40px; text-align: center; }
.e7sebha-account__card--otp .e7sebha-account__title { margin: 18px 0 0; font-family: "Lutfey Arabic", "DIN Next LT Arabic", sans-serif; font-size: 40px; font-weight: 400; }
.e7sebha-account__card--otp .e7sebha-account__description { margin: 6px 0 0; font-size: 1rem; }
.e7sebha-account__otp-icon { display: grid; width: 64px; height: 64px; place-items: center; margin-inline: auto; border-radius: 12px; background: #cceffb; color: var(--e7-blue, #00aae6); }
.e7sebha-account__otp-icon svg { width: 30px; height: 30px; }
.e7sebha-account__card--otp .ui-otp-code-field { margin: 26px 0 0; }
.e7sebha-account__card--otp .ui-otp-code-field legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.e7sebha-account__card--otp .ui-otp-code-field__digits { display: flex; width: fit-content; max-width: 100%; margin-inline: auto; justify-content: center; gap: 12px; }
.e7sebha-account__card--otp input[data-two-factor-target^="num"] { width: 60px; height: 70px; min-width: 44px; border: 2px solid var(--e7-navy, #060533); border-radius: 12px; padding: 0; color: var(--e7-navy, #060533); font-family: Arial, Helvetica, sans-serif; font-feature-settings: "locl" 0; font-language-override: "ENG"; font-size: 30px; font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1; unicode-bidi: isolate; }
.e7sebha-account__card--otp input[data-two-factor-target^="num"]:focus { border-color: var(--e7-green, #00b66d); outline: 4px solid rgb(0 182 109 / .14); outline-offset: 0; }
.e7sebha-account__resend > div { display: inline-flex; max-width: 100%; align-items: baseline; justify-content: center; gap: .35rem; direction: rtl; white-space: nowrap; }
.e7sebha-account__card--otp .e7sebha-account__resend { margin-top: 22px; font-size: .8125rem; }
.e7sebha-account__card--otp .e7sebha-account__resend .otp-resend__button { display: inline; min-height: auto; width: auto; border: 0; border-radius: 0; background: transparent; padding: 0; color: #00b66d; font: inherit; font-weight: 700; box-shadow: none; text-decoration: underline; text-underline-offset: .18em; }
.e7sebha-account__card--otp .e7sebha-account__resend .otp-resend__button:disabled { cursor: not-allowed; background: transparent; color: var(--e7-ink-60); opacity: .7; text-decoration: none; }
.e7sebha-account__resend .otp-resend__status { color: var(--e7-ink-60); font-family: Arial, Helvetica, sans-serif; font-feature-settings: "locl" 0; font-language-override: "ENG"; }
.e7sebha-account__card--otp [type="submit"] { margin-top: 24px; }
.e7sebha-account__delivery-note { margin: 16px 0 0; color: #9292a2; font-size: 13px; line-height: 1.5; text-align: center; }
.e7sebha-account__card--details > .min-w-0 { display: grid; gap: 6px; }
.e7sebha-account__card--details input:not([type="hidden"]):not([type="checkbox"]) { min-height: 52px; }
.e7sebha-account__card--details [type="submit"] { min-height: 56px; }
.e7sebha-checkout__ticket { display: grid; gap: 1rem; border: 1px solid #cde4e9; border-radius: 1.25rem; background: white; padding: 1.25rem; box-shadow: 0 .4rem 1.25rem rgb(23 60 87 / .06); }
.e7sebha-checkout__ticket legend { color: var(--e7sebha-checkout-ink); font-size: 1.125rem; font-weight: 900; }
.e7sebha-checkout__ticket-copy p { margin: .35rem 0 0; color: var(--e7-ink-60); font-size: .875rem; }
.e7sebha-checkout__ticket-controls { display: flex; align-items: center; }
.e7sebha-checkout__availability { display: inline-flex; margin-block-start: .75rem; border-radius: 9999px; background: #e9f8f9; padding: .25rem .625rem; color: var(--e7-ink-60); font-size: .75rem; font-weight: 800; }

/* Shared checkout step shell. The title is a sibling of the body rather than
   a cell spanning it, so the aside top-aligns with the main column and not
   with the heading; align-items keeps the aside content-height instead of
   stretching. Sticky lives on the grid item itself — a sticky child of a
   content-height aside has no travel and never engages. RTL places the 1fr
   main column on the right, mirroring for English.
   One breakpoint at 64rem replaces the 48rem used by the ticket-selection and
   review grids: below that, a 340px aside leaves the main column too narrow. */
.e7sebha-checkout__step { display: grid; min-width: 0; gap: 1.5rem; }
.e7sebha-checkout__step-body { display: grid; min-width: 0; gap: 1.5rem; align-items: start; }
.e7sebha-checkout__step-main, .e7sebha-checkout__step-aside { min-width: 0; }
.e7sebha-checkout__step-aside .e7sebha-action-footer { margin-top: 0; }

@media (min-width: 64rem) {
  .e7sebha-checkout__step-body { grid-template-columns: minmax(0, 1fr) 340px; }
  .e7sebha-checkout__step-aside { position: sticky; top: 1rem; }
}

/* Ticket selection stays read-only until the form is submitted. Its summary is
   intentionally client-derived; Inventory::Reserve remains the authority. */
.e7sebha-checkout__shell { width: min(100%, 75rem); margin-inline: auto; padding-bottom: 3rem; }
.e7sebha-checkout__back { display: inline-flex; margin-block-end: 1rem; color: var(--e7sebha-checkout-ink); font-size: .875rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.e7sebha-ticket-selection { min-width: 0; }
.e7sebha-checkout__heading, .e7sebha-checkout-summary__title { margin: 0; color: var(--e7sebha-checkout-ink); font-family: "Lutfey Arabic", "DIN Next LT Arabic", sans-serif; font-weight: 400; }
.e7sebha-checkout__heading { font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1.15; }
.e7sebha-ticket-selection__products { display: grid; gap: 1rem; }
.e7sebha-ticket-selection__ticket { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; border: 1px solid var(--e7-line, rgba(6, 5, 51, 0.12)); border-radius: 1.375rem; padding: 1rem 1.125rem; box-shadow: 0 .35rem 1rem rgb(6 5 51 / .05); transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.e7sebha-ticket-selection__ticket--selected { border-color: var(--e7-green, #00b66d); background: #d3f4e6; box-shadow: 0 .35rem 1rem rgb(0 182 109 / .12); }
.e7sebha-ticket-selection__ticket[disabled] { border-color: #C71818; background: #C71818; color: #fff; box-shadow: 0 .35rem 1rem rgb(6 5 51 / .14); }
.e7sebha-ticket-selection__ticket-copy { min-width: 0; }
.e7sebha-ticket-selection__ticket legend { padding: 0; font-size: 1.05rem; font-weight: 700; }
.e7sebha-ticket-selection__ticket[disabled] legend { color: #fff; }
.e7sebha-ticket-selection__ticket-copy p { margin: .2rem 0 0; color: var(--e7-ink-60); font-size: .8125rem; line-height: 1.5; }
.e7sebha-ticket-selection__price { display: block; margin-top: .35rem; color: var(--e7-ink-60); font-family: "Proxima Nova", "DIN Next LT Arabic", sans-serif; font-size: .875rem; font-weight: 600; }
.e7sebha-ticket-selection__ticket-controls { display: flex; align-items: center; }
.e7sebha-ticket-selection__quantity { display: flex; align-items: center; gap: .7rem; direction: ltr; }
.e7sebha-ticket-selection__quantity-button { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; border: 0; border-radius: 9px !important; background: var(--e7-paper, #f6f7f9); padding: 0; color: var(--e7-ink-60); font-size: 1.25rem; line-height: 1; box-shadow: none; }
.e7sebha-ticket-selection__quantity-button--add { background: var(--e7-navy, #060533) !important; color: #fff !important; }
.e7sebha-ticket-selection__quantity-value { display: inline-flex; width: 2.5rem; min-height: 2.25rem; align-items: center; justify-content: center; color: var(--e7sebha-checkout-ink); font-family: "Proxima Nova", "DIN Next LT Arabic", sans-serif; font-size: 1.35rem; font-weight: 700; text-align: center; }
.e7sebha-ticket-selection__ticket[disabled] .e7sebha-ticket-selection__ticket-copy p { color: rgb(255 255 255 / .88); }
.e7sebha-ticket-selection__ticket[disabled] .e7sebha-checkout__availability { margin: 0; border: 1px solid #fff; background: #fff; color: #000; }
.e7sebha-ticket-selection__transport-note { margin: 0 0 1rem 0; border: 1px solid #f1de9a; border-radius: 14px; background: #fff8d9; padding: .8rem 1rem; color: #8a6d00; font-size: .875rem; line-height: 1.5; }
.e7sebha-checkout-summary { align-self: start; border: 1px solid var(--e7-line, rgba(6, 5, 51, 0.12)); border-radius: 1.375rem; background: #fff; padding: 1.375rem; box-shadow: 0 .5rem 1.25rem rgb(6 5 51 / .07); }
.e7sebha-checkout-summary__title { font-size: 1.5rem; }
.e7sebha-checkout-summary__empty { margin: 1rem 0; color: #9292a2; font-size: .875rem; line-height: 1.55; }
.e7sebha-checkout-summary__lines { display: grid; gap: .65rem; margin-top: 1rem; }
.e7sebha-checkout-summary__line { display: flex; justify-content: space-between; gap: .75rem; color: var(--e7-ink-60); font-size: .9rem; }
.e7sebha-checkout-summary__line.hidden { display: none; }
.e7sebha-checkout-summary__line strong, .e7sebha-checkout-summary__total strong { color: var(--e7sebha-checkout-ink); font-family: "Proxima Nova", "DIN Next LT Arabic", sans-serif; white-space: nowrap; }
.e7sebha-checkout-summary__divider { margin-top: 1rem; border-top: 2px dotted var(--e7-line, rgba(6, 5, 51, 0.12)); }
.e7sebha-checkout-summary__total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 1rem; color: var(--e7-ink-60); font-size: .9rem; }
.e7sebha-checkout-summary__total > strong { font-size: 1.5rem; }
.e7sebha-checkout-summary__breakdown { display: grid; gap: .5rem; margin: 1rem 0 0; color: var(--e7-ink-60); font-size: .9rem; }
.e7sebha-checkout-summary__breakdown > div { display: flex; justify-content: space-between; gap: .75rem; }
.e7sebha-checkout-summary__breakdown dd { margin: 0; color: var(--e7sebha-checkout-ink); font-family: "Proxima Nova", "DIN Next LT Arabic", sans-serif; white-space: nowrap; }
.e7sebha-checkout-summary__breakdown-row--discount { color: var(--e7-green, #00b66d); }
.e7sebha-checkout-summary__line--negative strong { color: var(--e7-green, #00b66d); }
.e7sebha-ticket-selection__submit { width: 100%; min-height: 3.375rem; margin-top: 1.125rem; background: var(--e7-navy, #060533) !important; color: #fff; }
.e7sebha-ticket-selection__submit:disabled { cursor: not-allowed; background: #c9c9d2 !important; box-shadow: none; opacity: 1; }
.e7sebha-ticket-selection__empty { margin-top: 2rem; border: 1px solid var(--e7-line, rgba(6, 5, 51, 0.12)); border-radius: 1.375rem; background: #fff; padding: 2rem; }
.e7sebha-ticket-selection__empty h1, .e7sebha-ticket-selection__empty p { margin: 0; }
.e7sebha-ticket-selection__empty p { margin-top: .75rem; color: var(--e7-ink-60); }
.e7sebha-ticket-selection__empty-action { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; margin-top: 1.5rem; border: 1px solid var(--e7-line, rgba(6, 5, 51, 0.12)); border-radius: 999px; background: #fff; padding: .65rem 1.25rem; color: var(--e7sebha-checkout-ink); font-weight: 700; text-decoration: none; }
.e7sebha-ticket-selection__empty-action:focus-visible { outline: 3px solid var(--e7-green, #00b66d); outline-offset: 3px; }

/* Shared checkout shell. Mobile keeps the contextual progress strip and makes
   the step links available in a horizontally scrollable row. */
.e7sebha-checkout-header__timer { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin: 0; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; background: rgb(255 255 255 / .1); padding: 0 .9rem; color: var(--e7-yellow, #ffcd00); font-family: "Proxima Nova", sans-serif; font-weight: 700; direction: ltr; }
.e7sebha-checkout-header__progress { --e7sebha-checkout-ink: var(--e7-navy, #060533); --e7sebha-checkout-blue: var(--e7-green, #00b66d); --e7sebha-checkout-yellow: var(--e7-yellow, #ffcd00); border-bottom: 1px solid var(--e7-line, rgba(6, 5, 51, 0.12)); background: #fff; color: var(--e7sebha-checkout-ink); padding: .85rem max(1rem, calc((100% - 75rem) / 2)); }
.e7sebha-checkout__progress-compact { display: none; }
.e7sebha-checkout__progress-track { display: block; overflow: hidden; height: .75rem; border-radius: 999px; background: #f6f7f9; }
.e7sebha-checkout__progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--e7-green, #00b66d); transition: width .2s ease; }
.e7sebha-checkout__progress-fill--step-1-of-5 { width: 20%; }
.e7sebha-checkout__progress-fill--step-2-of-5 { width: 40%; }
.e7sebha-checkout__progress-fill--step-3-of-5 { width: 60%; }
.e7sebha-checkout__progress-fill--step-4-of-5 { width: 80%; }
.e7sebha-checkout__progress-fill--step-5-of-5 { width: 100%; }
.e7sebha-checkout__progress-fill--step-1-of-6 { width: 16.667%; }
.e7sebha-checkout__progress-fill--step-2-of-6 { width: 33.333%; }
.e7sebha-checkout__progress-fill--step-3-of-6 { width: 50%; }
.e7sebha-checkout__progress-fill--step-4-of-6 { width: 66.667%; }
.e7sebha-checkout__progress-fill--step-5-of-6 { width: 83.333%; }
.e7sebha-checkout__progress-fill--step-6-of-6 { width: 100%; }
.e7sebha-checkout__progress ol { width: max-content; gap: 0; }
.e7sebha-checkout__progress-step { position: relative; flex: 0 0 auto; min-width: 0; flex-direction: row; justify-content: center; gap: .5rem; border: 0; background: transparent; color: var(--e7-ink-40); font-family: inherit; font-size: .9rem; }
.e7sebha-checkout__progress-step:not(:last-child)::after { width: 2rem; height: 2px; background: rgba(6, 5, 51, 0.12); content: ""; }
.e7sebha-checkout__progress-number { width: 1.625rem; height: 1.625rem; border: 0; background: #f6f7f9; font-family: "Proxima Nova", sans-serif; }
.e7sebha-checkout__progress-step--complete { color: var(--e7-green, #00b66d); cursor: pointer; }
.e7sebha-checkout__progress-step--current { color: var(--e7sebha-checkout-ink); }
.e7sebha-checkout__progress-step--current .e7sebha-checkout__progress-number { border-color: var(--e7-navy, #060533); background: var(--e7-navy, #060533); color: #fff; }
.e7sebha-checkout__progress-step--complete .e7sebha-checkout__progress-number { border-color: var(--e7-green, #00b66d); background: var(--e7-green, #00b66d); color: #fff; }

.e7sebha-action-footer { align-self: start; margin-top: 1.5rem; }
.e7sebha-action-footer__inner { display: grid; width: 100%; gap: 1rem; margin-inline: auto; border: 1px solid var(--e7-line, rgba(6, 5, 51, 0.12)); border-radius: 22px; background: #fff; padding: 1.375rem; box-shadow: 0 .5rem 1.25rem rgb(6 5 51 / .07); }
.e7sebha-action-footer__summary { min-width: 0; }
.e7sebha-action-footer__button { width: 100%; min-height: 3.5rem; border: 0 !important; border-radius: 999px !important; font-size: 1.1rem; font-weight: 700; box-shadow: 0 .5rem 1.25rem rgb(0 182 109 / .22) !important; }
.e7sebha-action-footer__button--green { background: #00b66d !important; color: #fff !important; }
.e7sebha-action-footer__button--yellow { background: #ffcd00 !important; color: var(--e7-navy, #060533) !important; }
.e7sebha-action-footer__button:disabled { background: #c9c9d2 !important; box-shadow: none !important; }
.e7sebha-action-footer__note { margin: 0; color: var(--e7-ink-40); font-size: .82rem; text-align: center; }
.e7sebha-action-footer .e7sebha-checkout-summary { display: grid; border: 0; border-radius: 0; background: transparent; padding: 0; box-shadow: none; }
.e7sebha-action-footer .e7sebha-checkout-summary__lines { display: grid; margin-top: 0; }
.e7sebha-action-footer .e7sebha-checkout-summary__empty { display: none; }
.e7sebha-action-footer .e7sebha-checkout-summary__total { justify-content: space-between; margin: 0; border: 0; padding: 0; }
.e7sebha-ticket-selection__ticket-controls { justify-content: center; }
.e7sebha-ticket-selection__quantity { justify-content: center; }

@media (max-width: 47.99rem) {
  .e7sebha-checkout-header__timer { min-width: 5rem; padding-inline: .6rem; }
  .e7sebha-checkout-header__timer span:first-child { display: none; }
  .e7sebha-checkout-header__progress { padding: .9rem 2.5rem 1.2rem; }
  .e7sebha-checkout__progress ol { display: flex; gap: .25rem; margin-top: 1rem; }
  .e7sebha-checkout__progress-compact { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; color: #74758c; font-size: .92rem; font-weight: 500; }
  .e7sebha-checkout__progress-compact > span:last-child { grid-column: 1 / -1; }
  .e7sebha-account__content { padding-inline: 1.25rem; }
  .e7sebha-account__card { width: 100%; }
  .e7sebha-action-footer { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; margin-top: 0; border-top: 1px solid var(--e7-line, rgba(6, 5, 51, 0.12)); background: rgb(255 255 255 / .97); padding: .85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom)); box-shadow: 0 -10px 28px rgb(6 5 51 / .08); }
  .e7sebha-action-footer__inner { border: 0; background: transparent; padding: 0; box-shadow: none; }
  .e7sebha-action-footer__summary { max-height: 7rem; overflow-y: auto; overscroll-behavior: contain; }
  .e7sebha-action-footer__button { min-height: 3.65rem; font-size: 1.3rem; }
  .e7sebha-auth, .e7sebha-ticket-selection, .e7sebha-checkout__shell, .e7sebha-checkout__wizard { padding-bottom: 8.5rem; }
  .e7sebha-ticket-selection { padding-bottom: 14rem; }
  .e7sebha-ticket-selection__ticket { grid-template-columns: 1fr; }
  .e7sebha-ticket-selection__ticket-controls { margin-top: .5rem; }
}

@media (min-width: 48rem) {
  .e7sebha-account__card .e7sebha-action-footer__inner { border: 0; background: transparent; padding: 0; box-shadow: none; }
}

@media (min-width: 48rem) {
  .e7sebha-checkout__progress ol { justify-content: flex-start; gap: .75rem; }
  .e7sebha-checkout__progress-step { min-width: 5.5rem; flex-direction: row; text-align: start; }
  .e7sebha-checkout__ticket { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .e7sebha-account .e7sebha-checkout__progress ol { display: flex; gap: 0; }
  .e7sebha-account .e7sebha-checkout__progress-step { min-width: 0; flex: 1; flex-direction: row; gap: .5rem; text-align: start; }
  .e7sebha-account .e7sebha-checkout__progress-step:not(:last-child)::after { position: absolute; top: .78rem; inset-inline-start: calc(100% - 1.8rem); width: 1.5rem; height: 2px; background: var(--e7-line, rgba(6, 5, 51, 0.12)); content: ""; }
}

.ui-input-toggle-button { min-height: 2.75rem; border: 1px solid rgba(6, 5, 51, 0.12); border-radius: 999px; background: #fff; padding: .55rem 1rem; color: #060533; font-size: .9rem; font-weight: 700; }
.ui-input-toggle-button[aria-pressed="true"] { border-color: #00b66d; background: #d3f4e6; color: #00b66d; }
.ui-input-toggle-button:disabled { cursor: not-allowed; opacity: .5; }
/* Transport cards. The whole card is the control, so the radio is stripped of
   its native rendering and stretched over the card instead of being hidden: it
   stays visible to the a11y tree and to hit testing, which keeps the entire
   card a single real click target rather than one that only works because a
   label happens to wrap it. :has() drives selection state off the real input
   rather than a mirrored class. */
.e7sebha-transport__modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; margin: 0; border: 0; padding: 0; }
.e7sebha-transport__stations { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; }
.e7sebha-transport__mode-input, .e7sebha-transport__station-input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; appearance: none; border: 0; border-radius: inherit; outline: none; background: transparent; cursor: pointer; }
.e7sebha-transport__mode-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 7rem; border: 2px solid var(--e7-line, rgba(6, 5, 51, 0.12)); border-radius: 1.125rem; background: #fff; padding: 1.125rem; text-align: center; cursor: pointer; }
.e7sebha-transport__mode-icon { width: 1.875rem; height: 1.875rem; color: var(--e7-ink-40); }
.e7sebha-transport__mode-label { color: var(--e7sebha-checkout-ink, #060533); font-size: 1rem; font-weight: 500; }
.e7sebha-transport__mode-card:has(input:checked) { border-color: var(--e7-green, #00b66d); background: #d3f4e6; }
.e7sebha-transport__mode-card:has(input:checked) .e7sebha-transport__mode-icon { color: var(--e7-green, #00b66d); }
.e7sebha-transport__mode-card:has(input:checked) .e7sebha-transport__mode-label { font-weight: 700; }
.e7sebha-transport__mode-card:has(input:focus-visible) { outline: 3px solid rgb(0 182 109 / .3); outline-offset: 2px; }
.e7sebha-transport__station-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .65rem; min-height: 3.25rem; border: 2px solid var(--e7-line, rgba(6, 5, 51, 0.12)); border-radius: .9rem; background: #fff; padding: .8rem .9rem; color: var(--e7sebha-checkout-ink, #060533); font-size: .9rem; cursor: pointer; }
.e7sebha-transport__station-card:has(input:checked) { border-color: var(--e7-blue, #23bdee); background: #e4f7fe; }
.e7sebha-transport__station-card:has(input:focus-visible) { outline: 3px solid rgb(35 189 238 / .3); outline-offset: 2px; }
.e7sebha-transport-card__tag { border-radius: 999px; background: var(--e7-paper, #f6f7f9); padding: .3rem .75rem; color: var(--e7-ink-60); font-size: .8rem; font-weight: 700; }
.e7sebha-transport-card__tag--pending { border: 1px solid #f1de9a; background: #fff8d9; color: #8a6d00; }
.e7sebha-transport-card__tag--selected { background: var(--e7-green, #00b66d); color: #fff; }
.e7sebha-transport__station-heading { margin: 0 0 .65rem; color: #060533; font-size: .9rem; font-weight: 700; }
.e7sebha-checkout { background: #f6f7f9; }

/* People step: the attendee work surface stays paper-backed while the
   booking total rides along in the step shell's aside. The two-column
   arrangement itself belongs to .e7sebha-checkout__step-body. */
/* The wizard sits directly on %main, which has no measure of its own. Without
   this the shell's fixed 340px aside sends every extra pixel into the form
   column, so the review step stretches unboundedly on wide screens. 75rem
   matches the measure .e7sebha-checkout__shell gives the tickets step. */
.e7sebha-checkout__wizard { width: min(100%, 75rem); min-width: 0; margin-inline: auto; }
.e7sebha-checkout__people-step { min-width: 0; }
.e7sebha-checkout__people-form { min-width: 0; }
.e7sebha-attendee-card { position: relative; overflow: visible; border-color: var(--e7-line, rgba(6, 5, 51, .12)); border-radius: 22px; background: #fff; box-shadow: 0 .35rem 1rem rgb(23 60 87 / .05); }
.e7sebha-attendee-card[open] { border: 2px solid var(--e7sebha-checkout-ink); }
.e7sebha-attendee-card:not([open]) { border-width: 1px; background: #fff; box-shadow: none; }
.e7sebha-attendee-card__summary { min-width: 0; padding: 1rem 1.25rem; }
.e7sebha-attendee-card[open] .e7sebha-attendee-card__summary { border-bottom: 1px solid var(--e7-line, rgba(6, 5, 51, .12)); }
.e7sebha-attendee-card__number { background: var(--e7-paper, #f6f7f9) !important; color: var(--e7-ink-60) !important; }
.e7sebha-attendee-card[open] .e7sebha-attendee-card__number { background: var(--e7-navy, #060533) !important; color: #fff !important; }
.e7sebha-attendee-card > summary { list-style: none; }
.e7sebha-attendee-card > summary::-webkit-details-marker { display: none; }
.e7sebha-attendee-card__chevron { display: inline-block; width: .8rem; height: .8rem; flex: none; border-right: .2rem solid currentColor; border-bottom: .2rem solid currentColor; transform: rotate(45deg); transition: transform .16s ease; }
.e7sebha-attendee-card[open] .e7sebha-attendee-card__chevron { transform: rotate(225deg); }
.e7sebha-attendee-card__summary .e7sebha-attendee-card__self-control { display: flex; min-width: max-content; align-items: center; justify-content: flex-end; margin-inline-start: auto; padding: 0; }
.e7sebha-attendee-card__self-control .ui-input-toggle-button { min-height: 2.25rem; padding: .4rem .8rem; }
.e7sebha-attendee-card__body { min-width: 0; padding: 20px !important; }
.e7sebha-attendee-card__status[data-attendee-status-badge="complete"] { background: #d3f4e6; color: #0b7a4e; }
.e7sebha-attendee-card__status[data-attendee-status-badge="incomplete"] { border: 1px solid #e0a93b; background: #fdf6e8; color: #b5771a; }
/* Every control in an attendee card is one field in the same row of the grid,
   so the phone wrapper and the gender cards take the line, radius, and height
   the name, email, and birthday inputs already have. The phone rules live here
   rather than on .e7sebha-account__phone because the account screens carry
   .e7sebha-checkout too and keep their own taller field. */
/* The wrapper and its prefix both carry .bg-surface, which the panel rule
   above rounds and shadows like a card, so these keep the checkout scope to
   outrank it. */
.e7sebha-checkout .e7sebha-attendee-card__phone { border-color: var(--e7-line, rgba(6, 5, 51, .12)); border-radius: .75rem; background: #fff; box-shadow: none; direction: ltr; }
.e7sebha-checkout .e7sebha-attendee-card__phone > span { border-radius: 0; border-color: var(--e7-line, rgba(6, 5, 51, .12)); background: var(--e7-paper, #f6f7f9); color: var(--e7sebha-checkout-ink); box-shadow: none; }
.e7sebha-checkout .e7sebha-attendee-card__phone input { border: 0 !important; border-radius: 0 !important; }
.e7sebha-checkout .e7sebha-attendee-card__phone:focus-within { border-color: var(--e7-green, #00b66d); outline: 3px solid rgb(0 182 109 / .14); outline-offset: 0; }
.e7sebha-attendee-card .e7sebha-account__gender-option { height: 2.75rem; min-height: 2.75rem; border-width: 1px; border-radius: .75rem; font-size: .875rem; }

/* Payment step reassurance. Card fields live at Paymob, so this column
   carries only the trust cues from the booking reference. The pill keeps a
   zero top margin: it is the first child of the step's main column, and any
   leading margin there would push the form column below the sticky aside. */
.e7sebha-checkout__promo-action { height: 52px; min-height: 52px; flex: none; border-radius: .75rem !important; padding-inline: 1.75rem; font-weight: 700; }
.e7sebha-checkout__promo input:not([type="hidden"]) { box-sizing: border-box; height: 52px; min-height: 52px; }
.e7sebha-checkout__payment-assurance { display: inline-flex; align-items: center; align-self: start; margin: 0; border: 1px solid #b8ecd4; border-radius: 999px; background: #d3f4e6; padding: .7rem 1.25rem; color: #0b7a4e; font-size: .95rem; font-weight: 700; }
.e7sebha-checkout__payment-note { margin: 1rem 0 0; color: var(--e7-ink-40); font-size: .8rem; }

/* Hosted payment handoff keeps the customer oriented while the browser opens
   Paymob Unified Checkout in a full-page redirect. */
.e7sebha-payment { box-sizing: border-box; display: flex; width: min(100%, 46rem); flex-direction: column; align-items: stretch; margin-inline: auto; padding: 3rem 1rem 4rem; text-align: start; }
.e7sebha-payment__heading { margin: 0; color: var(--e7sebha-checkout-ink, #060533); font-family: "Lutfey Arabic", "DIN Next LT Arabic", sans-serif; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 500; line-height: 1.2; }
.e7sebha-payment__assurance { display: inline-flex; align-self: start; align-items: center; gap: .5rem; margin: 1.25rem 0 2rem 0; border: 1px solid #b8ecd4; border-radius: 999px; background: #d3f4e6; padding: .7rem 1.25rem; color: #0b7a4e; font-size: .95rem; font-weight: 700; }
.e7sebha-payment__assurance::before { width: 1.05rem; height: 1.05rem; flex: none; background: currentColor; content: ""; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.e7sebha-payment__card { border: 1px solid var(--e7-line, rgba(6, 5, 51, .12)); border-radius: 22px; background: #fff; padding: 1.75rem; box-shadow: 0 .5rem 1.5rem rgb(6 5 51 / .06); }
/* The status is visible from first paint while the hosted redirect begins. */
.e7sebha-payment__status { margin: 0; color: var(--e7sebha-checkout-ink, #060533); font-size: .95rem; font-weight: 700; }
.e7sebha-payment__secure { display: inline-flex; align-self: start; align-items: center; gap: .4rem; margin: 1rem 0 0; color: var(--e7-ink-40); font-size: .8125rem; }
.e7sebha-payment__secure::before { width: .95rem; height: .95rem; flex: none; background: currentColor; content: ""; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat; }
/* .e7sebha-action-footer defaults to align-self: start for the wizard's aside;
   on this single-column page the button spans the measure instead. */
.e7sebha-payment .e7sebha-action-footer { align-self: stretch; }
.e7sebha-payment__notice { text-align: center; }

@media (min-width: 48rem) {
  .e7sebha-checkout__people-form .e7sebha-attendee-card__body > .e7sebha-attendee-card__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .e7sebha-checkout__people-form .e7sebha-attendee-card__body > .e7sebha-attendee-card__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 47.99rem) {
  .e7sebha-checkout__people-step, .e7sebha-checkout__step-body, .e7sebha-attendee-card__summary { max-width: 100%; }
  .e7sebha-attendee-card__summary .e7sebha-attendee-card__self-control { margin-inline-start: auto; }
}

@media (max-width: 63.99rem) {
  .e7sebha-action-footer .e7sebha-checkout-summary__title { margin: 0; }
  .e7sebha-action-footer .e7sebha-checkout-summary__lines { margin-top: .5rem; }
  .e7sebha-action-footer .e7sebha-checkout-summary__total { margin-top: .5rem; padding-top: .5rem; }
}

@media (min-width: 48rem) {
  .e7sebha-hero { padding-top: 1.25rem; }
  .e7sebha-footer h2 { font-family: var(--font-display-ar); font-size: 3.25rem; line-height: 1.8; }
  #landing-programme-heading { line-height: 1.7; }
  .e7sebha-programme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .e7sebha-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 47.99rem) {
  .e7sebha-hero__wordmark { width: 11rem; height: 13rem; }
  .e7sebha-hero__lead { width: min(100% - 2rem, 29rem); font-size: 1rem; }
  .e7sebha-hero__decoration--purple { width: 25rem; right: -13rem; }
  .e7sebha-hero__decoration--pattern { width: 25rem; left: -14rem; }
  .e7sebha-hero__decoration--yellow-check { width: 5.5rem; top: 15rem; left: -1.5rem; }
  .e7sebha-hero__decoration--green-badge { width: 4.7rem; right: -1.25rem; bottom: 6.5rem; }
  .e7sebha-hero__decoration--blue-check { width: 5.4rem; top: 3.5rem; right: -1.7rem; }
  .e7sebha-hero__year { top: 12rem; left: .6rem; font-size: 1.65rem; }
  .e7sebha-hero__booking { flex-direction: column; }
  .e7sebha-section { padding: 48px 16px; }
  .e7sebha-section h2 { font-size: 38px; }
  .e7sebha-programme-grid { gap: 16px; margin-top: 0; }
  .e7sebha-programme-card__content { padding: 24px; }
  .e7sebha-programme-card h3 { font-size: 30px; }
  .e7sebha-programme-card__date, .e7sebha-programme-card__transport-pill { font-size: 16px; }
  .e7sebha-footer { padding-top: 3.25rem; }
  .e7sebha-footer__actions .e7sebha-button { width: 100%; }
  .e7sebha-footer__lower { flex-direction: column; text-align: center; }
  .e7sebha-account__progress { padding-inline: .75rem; }
  .e7sebha-account__content { min-height: calc(100vh - 8.35rem); padding: 1.5rem 1rem 2rem; }
  .e7sebha-account__card { border-radius: .875rem; padding: 1.25rem; }
  .e7sebha-account__title { font-size: 1.8rem; }
  .e7sebha-account__card--entry, .e7sebha-account__card--details { padding: 24px 20px; }
  .e7sebha-account__card--signup { padding: 28px 20px 32px; }
  .e7sebha-account__signup-grid { grid-template-columns: minmax(0, 1fr); }
  .e7sebha-account__card--otp { padding: 30px 16px; }
  .e7sebha-account__card--otp .e7sebha-account__title { font-size: 32px; }
  .e7sebha-account__card--otp .ui-otp-code-field__digits { width: 100%; justify-content: center; gap: clamp(3px, 1.2vw, 8px); }
  .e7sebha-account__card--otp input[data-two-factor-target^="num"] { width: min(12.7vw, 52px); height: 58px; font-size: 25px; }
  .e7sebha-ticket-selection__ticket { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .e7sebha-ticket-selection__ticket-controls { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .e7sebha-button { scroll-behavior: auto; transition: none; }
  .e7sebha-hero__decoration, .e7sebha-hero__year, .e7sebha-marquee p { animation: none; }
}

@keyframes e7sebha-float {
  0%, 100% { transform: translateY(0) rotate(var(--e7-rotation, 0deg)); }
  50% { transform: translateY(-12px) rotate(var(--e7-rotation, 0deg)); }
}

@keyframes e7sebha-float-wiggle {
  0%, 100% { transform: translateY(4px) rotate(calc(var(--e7-rotation, 0deg) - 7deg)); }
  50% { transform: translateY(-16px) rotate(calc(var(--e7-rotation, 0deg) + 7deg)); }
}

@keyframes e7sebha-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Payment result screens — navy ground shared by confirmed, confirming and
   the failure's sticker. */
.e7sebha-checkout-result {
  --font-body-ar: "DIN Next LT Arabic", "Tajawal", sans-serif;
  --font-display-ar: "Lutfey Arabic", "Baloo Bhaijaan 2", "Tajawal", sans-serif;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: 3rem 1rem 4rem;
  background: var(--e7-navy, #060533);
  color: #fff;
  font-family: var(--font-body-ar);
  text-align: center;
}

.e7sebha-checkout-result__decorations {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}

/* Scattered slabs a shade lighter than the ground, plus the brand tick in the
   two accent colours — the confetti of the confirmation art. */
.e7sebha-checkout-result__shape {
  position: absolute;
  border-radius: .5rem;
  background: rgb(255 255 255 / .045);
}
.e7sebha-checkout-result__shape--a { inset-block-start: 4%; inset-inline-start: 12%; width: 16rem; height: 11rem; transform: rotate(-18deg); }
.e7sebha-checkout-result__shape--b { inset-block-start: 2%; inset-inline-end: 8%; width: 13rem; height: 15rem; transform: rotate(24deg); }
.e7sebha-checkout-result__shape--c { inset-block-end: 6%; inset-inline-start: 4%; width: 20rem; height: 13rem; transform: rotate(12deg); }
.e7sebha-checkout-result__shape--d { inset-block-end: 10%; inset-inline-end: 14%; width: 14rem; height: 10rem; transform: rotate(-26deg); }

.e7sebha-checkout-result__tick { position: absolute; width: 3.5rem; }
.e7sebha-checkout-result__tick svg { width: 100%; height: auto; }
.e7sebha-checkout-result__tick--blue { inset-block-start: 6%; inset-inline-end: 9%; color: var(--e7-blue, #00aae6); transform: rotate(-8deg); }
.e7sebha-checkout-result__tick--yellow { inset-block-start: 5%; inset-inline-start: 9%; color: var(--e7-yellow, #ffcd00); transform: rotate(9deg); }

.e7sebha-checkout-result__logo { position: relative; z-index: 1; width: 3.25rem; height: auto; margin-inline: auto; }

.e7sebha-checkout-result__content {
  position: relative;
  z-index: 1;
  /* width:100% is load-bearing: margin-inline:auto cancels the column flex
     container's stretch, and without it this shrink-wraps and the attendee
     cards can never sit two-up. */
  margin-inline: auto;
  display: flex;
  width: 100%;
  max-width: 46rem;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.e7sebha-checkout-result__sticker {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.25rem;
  color: #fff;
}
.e7sebha-checkout-result__sticker svg { width: 55%; height: 55%; }
.e7sebha-checkout-result__sticker--success { background: var(--e7-green, #00b66d); }
.e7sebha-checkout-result__sticker--info { background: var(--e7-blue, #00aae6); }
.e7sebha-checkout-result__sticker--attention { background: var(--e7-yellow, #ffcd00); color: var(--e7-navy, #060533); }

.e7sebha-checkout-result__headline {
  margin: 0;
  font-family: var(--font-display-ar);
  font-size: clamp(2.25rem, 7vw, 4rem);
  line-height: 1.1;
}

.e7sebha-checkout-result__body { margin: 0; max-width: 34rem; color: rgb(255 255 255 / .82); }

.e7sebha-checkout-result__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0;
  font-size: .82rem;
  letter-spacing: .06em;
  color: rgb(255 255 255 / .62);
}
.e7sebha-checkout-result__reference { font-weight: 700; unicode-bidi: isolate; }

/* Centered wrapping row, card-width, capped at two columns. */
.e7sebha-checkout-result__cards {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  width: 100%;
  max-width: 54rem;
  padding: 0;
  margin: .5rem 0 0;
}

.e7sebha-checkout-result__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex: 1 1 21rem;
  max-width: 27rem;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  border-radius: 1.5rem;
  background: #fff;
  color: var(--e7-navy, #060533);
  text-align: start;
}

/* The two panes of light the design lays across the card. Behind the content,
   clipped by the card's own radius. */
.e7sebha-checkout-result__card::before,
.e7sebha-checkout-result__card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: -40%;
  width: 55%;
  transform: skewX(-18deg);
  pointer-events: none;
}
.e7sebha-checkout-result__card::before { inset-inline-start: -14%; background: var(--e7-blue-soft, #cceffb); opacity: .5; }
.e7sebha-checkout-result__card::after { inset-inline-start: 14%; background: var(--e7-green-soft, #d3f4e6); opacity: .45; }

.e7sebha-checkout-result__card-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 1.1rem;
  background: var(--e7-green-soft, #d3f4e6);
  color: var(--e7-green, #00b66d);
}
.e7sebha-checkout-result__card-icon svg { width: 55%; height: 55%; }
.e7sebha-checkout-result__card:nth-child(even) .e7sebha-checkout-result__card-icon { background: var(--e7-blue-soft, #cceffb); color: var(--e7-blue, #00aae6); }

.e7sebha-checkout-result__card-body { display: flex; flex: 1; flex-direction: column; gap: .15rem; min-width: 0; }
.e7sebha-checkout-result__card-name {
  font-family: var(--font-display-ar);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  font-weight: 400;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Day and transport stack on desktop; the design runs them together on one
   line on mobile, dot-separated. */
.e7sebha-checkout-result__card-details { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.e7sebha-checkout-result__card-detail { font-size: .95rem; color: rgb(6 5 51 / .62); }

@media (max-width: 47.99rem) {
  .e7sebha-checkout-result__card-details { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
  .e7sebha-checkout-result__card-detail + .e7sebha-checkout-result__card-detail::before { content: "·"; margin-inline-end: .35rem; }
}

.e7sebha-checkout-result__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
}
.e7sebha-checkout-result__resolving { margin: 0; font-size: .85rem; color: rgb(255 255 255 / .66); }

.e7sebha-checkout-result__cta {
  border-radius: 999px;
  background: var(--e7-yellow, #ffcd00);
  padding: .8rem 1.75rem;
  color: var(--e7-navy, #060533);
  font-weight: 700;
  box-shadow: 0 0 2.5rem rgb(255 205 0 / .35);
}
.e7sebha-checkout-result__tagline {
  margin: 1.75rem 0 0;
  color: var(--e7-yellow, #ffcd00);
  font-family: var(--font-display-ar);
  font-size: clamp(1.25rem, 3.5vw, 1.9rem);
}

.e7sebha-checkout-result__cta--secondary {
  background: transparent;
  border: 1px solid rgb(255 255 255 / .35);
  color: #fff;
  box-shadow: none;
}


/* The failure screen keeps the checkout's paper canvas and wizard chrome, and
   reuses the wizard's step grid so its main column and summary line up exactly
   with every other step. Only the sticker and the reassurance badge carry
   colour. */
.e7sebha-checkout-result--failed,
.e7sebha-checkout-result--pending { min-height: 0; background: none; color: inherit; text-align: start; }
.e7sebha-checkout-result--failed .e7sebha-checkout-result__body,
.e7sebha-checkout-result--pending .e7sebha-checkout-result__body { color: inherit; max-width: 38rem; font-size: 1.05rem; line-height: 1.7; }

.e7sebha-checkout-result__banner { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; margin-block-end: 1.25rem; }
.e7sebha-checkout-result--failed .e7sebha-checkout-result__sticker,
.e7sebha-checkout-result--pending .e7sebha-checkout-result__sticker {
  width: 3.25rem;
  height: 3.25rem;
  flex: none;
  border-radius: 1rem;
}
.e7sebha-checkout-result__sticker--decline { background: var(--e7-navy, #060533); color: var(--e7-yellow, #ffcd00); }
.e7sebha-checkout-result__sticker--decline svg { width: 62%; height: 62%; }
.e7sebha-checkout-result--pending .e7sebha-checkout-result__sticker--attention svg { width: 62%; height: 62%; }

/* The "nothing was charged" reassurance is the first thing to read after the
   headline, so it sits beside the sticker rather than under the button. */
.e7sebha-checkout-result__badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--e7-yellow, #ffcd00);
  padding: .5rem 1rem;
  color: var(--e7-navy, #060533);
  font-size: .95rem;
  font-weight: 700;
}

/* Card and reference read as labelled facts, not anonymous chips. */
.e7sebha-checkout-result__facts { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; padding: 0; margin: 1.5rem 0 0; }
.e7sebha-checkout-result__fact {
  display: grid;
  gap: .2rem;
  border: 1px solid var(--e7-line, rgba(6, 5, 51, 0.12));
  border-radius: 14px;
  background: #fff;
  padding: .6rem .9rem;
  unicode-bidi: isolate;
}
.e7sebha-checkout-result__fact-label { color: var(--e7-ink-40); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.e7sebha-checkout-result__fact-value { color: var(--e7sebha-checkout-ink); font-size: .95rem; font-weight: 700; }

.e7sebha-checkout-result__support { margin: 1.5rem 0 0; color: var(--e7-ink-60); font-size: .9rem; }
.e7sebha-checkout-result__support strong { color: var(--e7sebha-checkout-ink); text-decoration: underline; text-underline-offset: .2em; }

/* The summary's own no-charge line repeats the badge in the place where the
   customer is about to press pay again, so it is tinted rather than muted. */
.e7sebha-checkout-result--failed .e7sebha-action-footer__note,
.e7sebha-checkout-result--pending .e7sebha-action-footer__note {
  border-radius: 14px;
  background: rgb(255 205 0 / .14);
  padding: .6rem .8rem;
  color: var(--e7-ink-60);
  line-height: 1.55;
}

.e7sebha-checkout__progress-step--attention .e7sebha-checkout__progress-number { border-color: var(--e7sebha-checkout-yellow); background: var(--e7sebha-checkout-yellow); color: var(--e7sebha-checkout-ink); font-weight: 700; }
.e7sebha-checkout__progress-step--attention .e7sebha-checkout__progress-label { color: var(--e7sebha-checkout-ink); font-weight: 700; }