:root {
  color-scheme: dark;
  --black: #080808; --black-secondary: #111111; --card: #171717;
  --gold: #d4af37; --gold-bright: #f4d06f; --gold-dark: #99721b;
  --white: #ffffff; --muted: #c7c7c7; --border: rgb(212 175 55 / 35%);
  --gold-gradient: linear-gradient(120deg, #9f741b 0%, #d4af37 44%, #f4d06f 62%, #b8861f 100%);
  --button-text: #080808; --icon-surface: #111111; --subtle-surface: rgb(255 255 255 / 3%);
  --card-hover: #1c1c1c; --card-inset: rgb(255 255 255 / 6%);
  --dialog-shadow: rgb(0 0 0 / 55%); --backdrop: rgb(0 0 0 / 75%);
  --gold-shadow: rgb(212 175 55 / 28%); --link-icon: #d4af37;
  --link-icon-border: rgb(212 175 55 / 45%); --page-glow: rgb(212 175 55 / 13%);
  --page-wave: rgb(212 175 55 / 17%);
  --card-highlight: rgb(244 208 111 / 5%); --card-shadow: 0 14px 34px rgb(0 0 0 / 20%);
  --card-hover-shadow: 0 18px 36px rgb(0 0 0 / 28%); --control-shadow: 0 6px 18px rgb(0 0 0 / 16%);
  --page-max-width: 1380px; --section-gap: clamp(28px, 2.2vw, 32px); --link-grid-gap: 14px;
  --link-card-height: clamp(80px, 8.2vh, 84px); --link-card-padding: 13px 15px; --link-card-radius: 16px; --link-icon-size: 38px;
  --links-heading-block-size: 51px; --links-heading-gap: 16px; --sticky-header-block-size: 86px;
  font-family: Tajawal, "DM Sans", sans-serif; color: var(--white); background: var(--black);
}
:root[data-theme="light"] {
  color-scheme: light;
  --black: #f7f4ed; --black-secondary: #fbf8f2; --card: #fffefb;
  --gold: #a57521; --gold-bright: #95651a; --gold-dark: #795316;
  --white: #252017; --muted: #6d6559; --border: rgb(191 157 96 / 58%);
  --gold-gradient: linear-gradient(120deg, #8d621b 0%, #a57521 42%, #d0a34e 67%, #95651a 100%);
  --button-text: #252017; --icon-surface: #f8eedb; --subtle-surface: #fbf8f2;
  --card-hover: #fffaf1; --card-inset: rgb(223 203 163 / 46%);
  --dialog-shadow: rgb(67 49 20 / 22%); --backdrop: rgb(37 32 23 / 30%);
  --gold-shadow: rgb(149 101 26 / 17%); --link-icon: #95651a;
  --link-icon-border: rgb(165 117 33 / 46%); --page-glow: rgb(213 181 113 / 14%);
  --page-wave: rgb(165 117 33 / 18%);
  --card-highlight: rgb(245 234 209 / 58%); --card-shadow: 0 12px 28px rgb(71 56 31 / 10%);
  --card-hover-shadow: 0 16px 32px rgb(71 56 31 / 15%); --control-shadow: 0 5px 14px rgb(71 56 31 / 11%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px; min-height: 100dvh; margin: 0; overflow-x: hidden;
  background: radial-gradient(circle at 88% 12%, var(--page-glow), transparent 21rem), radial-gradient(circle at 8% 88%, var(--page-glow), transparent 25rem), var(--black);
}
body::before, body::after {
  position: fixed; z-index: 0; content: ""; pointer-events: none;
}
body::before {
  top: -115px; inset-inline-end: -80px; width: min(42vw, 590px); height: min(30vw, 410px);
  background: url("assets/images/zero3-architectural-accent.svg") center / contain no-repeat; opacity: .14;
}
body::after {
  bottom: -520px; inset-inline-start: -340px; width: min(58vw, 760px); height: min(58vw, 760px);
  border: 1px solid var(--page-wave); border-radius: 48% 52% 44% 56%; transform: rotate(34deg);
}
:root[data-theme="light"] body::before { opacity: .16; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }

.portal {
  position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr auto;
  width: min(var(--page-max-width), calc(100% - 64px)); min-height: 100dvh; margin: 0 auto;
  padding: clamp(16px, 2.6vh, 28px) 0 clamp(14px, 2vh, 22px);
}
.header {
  position: sticky; inset-block-start: 0; z-index: 1000; align-self: start;
  display: flex; align-items: center; justify-content: space-between; min-height: 64px;
  padding-bottom: clamp(15px, 2vh, 21px); border-bottom: 1px solid var(--border);
  background: var(--black); background: color-mix(in srgb, var(--black) 94%, transparent);
  box-shadow: 0 8px 20px var(--gold-shadow); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.identity, .header-actions, .language-switcher, .card-heading, .wifi-status { display: flex; align-items: center; }
.identity { gap: 14px; min-width: 0; }
.logo-link, .brand-logo { display: block; flex: none; width: 56px; height: 56px; }
.brand-logo { object-fit: contain; object-position: center; }
.identity-copy { min-width: 0; color: var(--white); font: 700 16px/1.2 "DM Sans", Tajawal, sans-serif; letter-spacing: .1px; text-shadow: 0 1px 14px rgb(0 0 0 / 12%); white-space: nowrap; }
.company-name b { color: var(--gold-bright); font-weight: 800; }
.header-actions { gap: 11px; }
.gold-line { width: clamp(42px, 5.5vw, 78px); height: 1px; background: var(--gold-gradient); box-shadow: 0 0 10px var(--gold-shadow); }
.theme-toggle {
  display: inline-grid; grid-template-columns: repeat(2, 1fr); align-items: center; width: 60px; min-width: 60px; height: 38px; padding: 4px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--black-secondary); color: var(--muted);
  box-shadow: var(--control-shadow); cursor: pointer; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.theme-toggle:hover { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-shadow), var(--control-shadow); }
.theme-icon { width: 18px; height: 18px; padding: 2px; border-radius: 6px; transition: background .2s ease, color .2s ease, opacity .2s ease; }
.theme-icon--moon { background: var(--gold); color: var(--button-text); }.theme-icon--sun { opacity: .55; }
:root[data-theme="light"] .theme-icon--sun { background: var(--gold); color: var(--button-text); opacity: 1; }
:root[data-theme="light"] .theme-icon--moon { background: transparent; color: var(--muted); opacity: .55; }
.language-switcher { gap: 3px; padding: 4px; border: 1px solid var(--border); border-radius: 11px; background: var(--black-secondary); box-shadow: var(--control-shadow); }
.language-button { min-width: 42px; min-height: 28px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font: 700 10px/1 "DM Sans", Tajawal, sans-serif; transition: background .2s ease, box-shadow .2s ease, color .2s ease; }
.language-button:hover, .language-button.is-active { background: var(--gold-gradient); box-shadow: 0 2px 8px var(--gold-shadow); color: var(--button-text); }

.content { align-self: start; padding: clamp(28px, 4vh, 48px) 0 clamp(22px, 2.8vh, 32px); }
.welcome { margin-bottom: clamp(25px, 3vh, 34px); }
.kicker, .card-label { margin: 0 0 8px; color: var(--gold-bright); font: 800 11px/1.35 "DM Sans", Tajawal, sans-serif; letter-spacing: 1.45px; }
.welcome h1 { margin: 0; color: var(--white); font-size: clamp(33px, 3vw, 50px); font-weight: 800; line-height: 1.16; letter-spacing: -.8px; text-wrap: balance; }
.welcome h1 em { color: var(--gold-bright); font-style: normal; text-shadow: 0 7px 24px var(--gold-shadow); }
.welcome > p:not(.kicker) { max-width: 660px; margin: 11px 0 0; color: var(--muted); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.7; }
html[lang="ar"] .welcome h1 { letter-spacing: 0; line-height: 1.22; }
html[lang="ar"] .kicker, html[lang="ar"] .card-label { letter-spacing: .7px; }

.portal-grid { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: var(--section-gap); align-items: start; }
.wifi-card, .link-card { border: 1px solid var(--border); background: var(--card); }
.wifi-card { display: flex; flex-direction: column; min-width: 0; margin-block-start: calc(var(--links-heading-block-size) + var(--links-heading-gap)); padding: clamp(28px, 2.2vw, 32px); border-radius: 22px; background: linear-gradient(145deg, var(--card-highlight), transparent 46%), var(--card); box-shadow: 0 18px 42px var(--gold-shadow), inset 0 1px var(--card-inset); text-align: start; }
.card-heading { gap: 15px; }
.card-heading > div { min-width: 0; }
.card-heading h2, .links-heading h2 { margin: 0; color: var(--white); font-size: clamp(22px, 1.8vw, 27px); line-height: 1.18; overflow-wrap: anywhere; }
.card-label { margin-bottom: 5px; font-size: 10px; }
.portal-mode { margin-inline-start: auto; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--gold-bright); background: var(--subtle-surface); box-shadow: inset 0 1px var(--card-inset); font: 800 9px/1 "DM Sans", Tajawal, sans-serif; letter-spacing: .8px; white-space: nowrap; }
.icon-wrap { display: grid; flex: none; width: 36px; height: 36px; place-items: center; border: 1px solid var(--border); border-radius: 10px; color: var(--gold); background: var(--icon-surface); }
.icon-wrap svg { width: 19px; height: 19px; }
.icon-wrap--large { width: 54px; height: 54px; border-color: var(--link-icon-border); border-radius: 15px; box-shadow: 0 8px 18px var(--gold-shadow), inset 0 1px var(--card-inset); }
.icon-wrap--large svg { width: 27px; height: 27px; }
.wifi-copy { margin: clamp(20px, 2.3vh, 25px) 0 18px; color: var(--muted); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.72; }
.gold-button {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 14px 18px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 14px;
  background: var(--gold-gradient); box-shadow: 0 12px 26px var(--gold-shadow), inset 0 1px rgb(255 255 255 / 28%); color: var(--button-text); cursor: pointer;
  font: 800 14px/1 Tajawal, "DM Sans", sans-serif; transition: filter .2s ease, box-shadow .2s ease, transform .2s ease;
}
.gold-button svg { flex: none; width: 19px; }.gold-button .button-wifi { width: 18px; }.gold-button:hover { filter: brightness(1.045); box-shadow: 0 16px 31px var(--gold-shadow), inset 0 1px rgb(255 255 255 / 36%); transform: translateY(-2px); }.gold-button:active { box-shadow: 0 7px 17px var(--gold-shadow), inset 0 1px rgb(255 255 255 / 18%); transform: translateY(0); }
.connection-status { display: inline-flex; align-items: center; align-self: center; gap: 8px; margin-top: 18px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--black-secondary); box-shadow: inset 0 1px var(--card-inset); font: 700 11px/1 "DM Sans", Tajawal, sans-serif; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.connection-status[data-state="authorizing"] .status-dot { background: var(--gold-bright); }
.connection-status[data-state="authorized"] .status-dot { background: var(--gold); box-shadow: 0 0 9px var(--gold-shadow); }
.connection-status[data-state="expired"] .status-dot, .connection-status[data-state="error"] .status-dot { background: var(--gold-dark); }
.session-timer { margin-inline-start: 3px; padding-inline-start: 8px; border-inline-start: 1px solid var(--border); color: var(--gold-bright); font-weight: 800; letter-spacing: .6px; direction: ltr; }
.session-policy { display: flex; justify-content: center; gap: 7px; margin-top: 15px; color: var(--muted); font: 700 11px/1.35 Tajawal, "DM Sans", sans-serif; }.session-policy > span:nth-child(2) { color: var(--gold); }
.session-remaining { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 13px; color: var(--muted); background: var(--subtle-surface); box-shadow: inset 0 1px var(--card-inset); font-size: 11px; }
.session-remaining strong { color: var(--gold-bright); font: 800 17px/1 "DM Sans", Tajawal, sans-serif; letter-spacing: .7px; direction: ltr; }
.session-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.session-progress__segment { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 25%, transparent); transition: background .2s ease, box-shadow .2s ease; }
.session-progress__segment.is-available { background: var(--gold-gradient); box-shadow: 0 2px 7px var(--gold-shadow); }
.daily-limit-message { margin: 10px 0 0; color: var(--gold-bright); font-size: 12px; font-weight: 800; line-height: 1.45; text-align: center; }
.wifi-status { justify-content: flex-start; gap: 7px; margin: 16px 0 0; padding-block-start: 14px; border-block-start: 1px solid var(--border); color: var(--muted); font-size: 11px; line-height: 1.55; text-align: start; }.wifi-status > span:first-child { color: var(--gold); }
.message { margin: 0; color: var(--gold-bright); font-size: 12px; line-height: 1.55; text-align: center; }.message:not(:empty) { margin-top: 12px; }

.links-scroll { display: none; }
.links-area { min-width: 0; text-align: start; } #official-links { scroll-margin-block-start: calc(var(--sticky-header-block-size) + 16px); }.links-heading { display: flex; min-block-size: var(--links-heading-block-size); align-items: end; justify-content: space-between; margin-bottom: var(--links-heading-gap); }.links-heading .kicker { margin-bottom: 6px; }.links-caption { padding-bottom: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: var(--link-card-height); gap: var(--link-grid-gap); }
.link-card { position: relative; isolation: isolate; display: flex; width: 100%; min-width: 0; height: 100%; align-items: center; gap: 13px; overflow: hidden; padding: var(--link-card-padding); border-radius: var(--link-card-radius); background: linear-gradient(145deg, var(--card-highlight), transparent 56%), var(--card); box-shadow: var(--card-shadow), inset 0 1px var(--card-inset); color: var(--white); text-decoration: none; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.link-card::before { position: absolute; z-index: 0; inset-block-start: 0; inset-inline: 15px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-bright), transparent); content: ""; opacity: .5; pointer-events: none; transition: opacity .2s ease; }
.link-card .icon-wrap { width: var(--link-icon-size); height: var(--link-icon-size); border-color: var(--link-icon-border); border-radius: 9px; color: var(--link-icon); background: linear-gradient(145deg, var(--card-highlight), transparent 75%), var(--icon-surface); box-shadow: inset 0 1px var(--card-inset); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.link-card .icon-wrap svg { display: block; width: 20px; height: 20px; }
.link-card:hover, .link-card:focus-visible { border-color: var(--gold); background: linear-gradient(145deg, var(--card-highlight), transparent 56%), var(--card-hover); box-shadow: var(--card-hover-shadow), 0 8px 20px var(--gold-shadow), inset 0 1px var(--card-inset); transform: translateY(-2px); }
.link-card:hover::before, .link-card:focus-visible::before { opacity: .95; }
.link-card:hover .icon-wrap, .link-card:focus-visible .icon-wrap { border-color: var(--gold); box-shadow: 0 6px 14px var(--gold-shadow), inset 0 1px var(--card-inset); transform: translateY(-1px); }
.link-card__content { flex: 1 1 auto; min-width: 0; }
.link-card strong { display: block; overflow-wrap: anywhere; font-size: 14px; font-weight: 800; line-height: 1.3; }
.link-card small { display: block; margin-top: 4px; color: var(--muted); font: 500 10px/1.35 Tajawal, "DM Sans", sans-serif; overflow-wrap: anywhere; }
.link-card__value, .brand-name, .company-name b { direction: ltr; unicode-bidi: isolate; }
.arrow { flex: none; margin-inline-start: auto; color: var(--gold-bright); font: 600 19px/1 "DM Sans", sans-serif; direction: ltr; }
.link-card[data-key="nfcCustomerPortal"] { border-color: color-mix(in srgb, var(--gold) 58%, var(--border)); background: linear-gradient(125deg, var(--card-highlight), transparent 60%), var(--card); }
.link-card[data-key="nfcCustomerPortal"] .icon-wrap { border-color: var(--gold); color: var(--gold-bright); }
.links-grid > .link-card[data-key="nfcCustomerPortal"] { grid-column: 1 / -1; width: calc((100% - var(--link-grid-gap)) / 2); justify-self: center; }
.link-card.is-unavailable { cursor: not-allowed; }.link-card.is-unavailable > span:not(.icon-wrap) { opacity: .46; }.link-card.is-unavailable .icon-wrap { opacity: .72; }.link-card.is-unavailable:hover { border-color: var(--border); background: var(--card); box-shadow: 0 8px 20px rgb(0 0 0 / 4%), inset 0 1px var(--card-inset); transform: none; }.link-card[aria-busy="true"] { cursor: progress; opacity: .7; pointer-events: none; }

footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding-top: 17px; border-top: 1px solid var(--border); color: var(--muted); font: 600 11px/1 "DM Sans", Tajawal, sans-serif; letter-spacing: .15px; }
.footer-copyright { grid-column: 1; justify-self: start; color: var(--gold-bright); }
.footer-signature { position: relative; display: inline-block; grid-column: 2; justify-self: center; padding-block-end: 6px; direction: ltr; color: #f3d78c; font: 700 18px/1 "DM Sans", Tajawal, sans-serif; letter-spacing: 1.8px; text-indent: 1.8px; text-shadow: 0 1px 9px rgb(243 215 140 / 22%); white-space: nowrap; unicode-bidi: isolate; }
.footer-signature::after { position: absolute; inset-inline: 0; inset-block-end: 0; width: 26px; height: 1px; margin-inline: auto; background: linear-gradient(90deg, transparent, currentColor 24%, currentColor 76%, transparent); content: ""; opacity: .9; }
:root[data-theme="light"] .footer-signature { color: #95651a; text-shadow: 0 1px 0 rgb(255 255 255 / 78%); }
.footer-rights { grid-column: 3; justify-self: end; }
.access-dialog { position: relative; z-index: 2; width: min(calc(100% - 32px), 410px); padding: 30px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg, var(--card-highlight), transparent 50%), var(--card); color: var(--white); box-shadow: 0 24px 70px var(--dialog-shadow); text-align: center; }.access-dialog::backdrop { background: var(--backdrop); }.access-dialog .icon-wrap { margin: 0 auto 15px; }.access-dialog .kicker { margin-bottom: 6px; }.access-dialog h2 { margin: 0; font-size: 24px; }.access-dialog p:not(.kicker) { margin: 11px 0 21px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.welcome, .wifi-card, .links-area, .access-dialog { text-align: start; }
.wifi-status { text-align: start; justify-content: flex-start; }
html[dir="rtl"] .gold-button .button-arrow { transform: scaleX(-1); }
@media (max-width: 1000px) { .portal { width: min(1380px, calc(100% - 48px)); }.portal-grid { gap: 26px; }.link-card { gap: 10px; padding-inline: 12px; }.link-card strong { font-size: 13px; } }
@media (max-width: 850px) { .portal { width: min(720px, calc(100% - 40px)); }.content { padding-top: 31px; }.portal-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }.wifi-card { margin-block-start: 0; }.links-scroll { display: inline-flex; align-items: center; align-self: center; gap: 7px; min-block-size: 40px; margin-block: 18px 2px; padding-inline: 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--subtle-surface); color: var(--gold-bright); font: 800 11px/1 Tajawal, "DM Sans", sans-serif; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }.links-scroll svg { inline-size: 17px; block-size: 17px; }.links-scroll:hover, .links-scroll:focus-visible { border-color: var(--gold); box-shadow: 0 6px 14px var(--gold-shadow); transform: translateY(1px); }.links-grid { grid-auto-rows: 84px; } }
@media (max-width: 650px) {
  :root { --sticky-header-block-size: 60px; }.portal { width: calc(100vw - 28px); max-width: 500px; padding-top: 15px; }.header, .content, .portal-grid, .wifi-card, .links-area, .links-grid, .link-card { min-width: 0; max-width: 100%; }.header { min-height: 49px; padding-bottom: 13px; }.logo-link, .brand-logo { width: 42px; height: 42px; }.identity { gap: 9px; overflow: hidden; }.identity-copy { overflow: hidden; max-width: 104px; font-size: 12px; text-overflow: ellipsis; }.header-actions { flex: none; gap: 5px; }.gold-line { display: none; }.theme-toggle { width: 52px; min-width: 52px; height: 34px; }.language-button { min-width: 37px; padding-inline: 6px; }.content { padding-top: 29px; }.welcome { margin-bottom: 25px; }.welcome h1 { font-size: clamp(29px, 9vw, 36px); }.welcome > p:not(.kicker) { font-size: 14px; }.wifi-card { padding: 22px; border-radius: 19px; }.card-heading h2, .links-heading h2 { font-size: 23px; }.icon-wrap--large { width: 48px; height: 48px; }.wifi-copy { font-size: 14px; }.links-heading { margin-bottom: 14px; }.links-grid { grid-template-columns: 1fr; grid-auto-rows: 80px; gap: 11px; }.link-card { padding-inline: 13px; }.links-grid > .link-card[data-key="nfcCustomerPortal"] { grid-column: auto; width: 100%; justify-self: stretch; } footer { grid-template-columns: 1fr; gap: 7px; padding-top: 20px; text-align: center; } .footer-copyright, .footer-signature, .footer-rights { grid-column: 1; justify-self: center; } .footer-copyright { grid-row: 1; } .footer-rights { grid-row: 2; } .footer-signature { grid-row: 3; margin-top: 2px; font-size: 16px; }
}
@media (max-width: 360px) { .identity-copy { display: none; }.header-actions { gap: 4px; }.theme-toggle { width: 49px; min-width: 49px; }.language-button { min-width: 35px; }.wifi-card { padding: 18px; }.card-heading { gap: 10px; }.portal-mode { padding-inline: 6px; font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }