:root {
  --appx-bg: #0e1110;
  --appx-surface: #171b19;
  --appx-ink: #ffffff;
  --appx-muted: rgba(255, 255, 255, .72);
  --appx-accent: #cda85a;
  --appx-accent-2: #f3d99b;
  --appx-radius: 28px;
}

.appx-hut { --appx-bg: #0b0b0c; --appx-surface: #151413; --appx-accent: #caa45a; --appx-accent-2: #f4dfac; }
.appx-scc { --appx-bg: #073d2d; --appx-surface: #0b4b38; --appx-accent: #d5b875; --appx-accent-2: #f7e8ba; }
.appx-idrive { --appx-bg: #0d3527; --appx-surface: #124531; --appx-accent: #d8bd78; --appx-accent-2: #f4e6bc; }

body.appx-launching { overflow: hidden; }
body.appx-launching [data-consent-centre],
body.appx-launching [data-visitor-preferences],
body.appx-launching .consent-centre,
body.appx-launching .idrive-consent { visibility: hidden !important; pointer-events: none !important; }

.appx-launch {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 28px;
  color: var(--appx-ink);
  background:
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--appx-accent) 22%, transparent), transparent 32%),
    linear-gradient(145deg, var(--appx-surface), var(--appx-bg));
  opacity: 1;
  transition: opacity .26s ease, visibility .26s ease;
}

.appx-launch[hidden] { display: none; }
.appx-launch.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }

.appx-launch__inner { width: min(88vw, 390px); text-align: center; }
.appx-launch__logo-wrap { position: relative; width: 132px; height: 132px; margin: 0 auto 22px; }
.appx-launch__logo-wrap::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid color-mix(in srgb, var(--appx-accent) 48%, transparent);
  border-radius: 34%;
  animation: appx-breathe 1.1s ease-in-out infinite;
}
.appx-launch__logo { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .34)); }
.appx-idrive .appx-launch__logo-wrap { width: 162px; height: 142px; }
.appx-idrive .appx-launch__logo-wrap::before { border-radius: 50%; inset: -8px 4px; }
.appx-idrive .appx-launch__logo { transform: scale(1.22); }
.appx-launch__eyebrow { margin: 0 0 8px; color: var(--appx-accent-2); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.appx-launch__title { margin: 0; color: #fff; font-size: clamp(25px, 7vw, 34px); line-height: 1.08; letter-spacing: -.035em; }
.appx-launch__tagline { margin: 10px auto 20px; max-width: 31ch; color: var(--appx-muted); font-size: 14px; line-height: 1.55; }
.appx-launch__track { overflow: hidden; width: 100%; height: 5px; border-radius: 999px; background: rgba(255,255,255,.13); box-shadow: inset 0 1px 2px rgba(0,0,0,.28); }
.appx-launch__bar { width: 18%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--appx-accent), var(--appx-accent-2), var(--appx-accent)); box-shadow: 0 0 18px color-mix(in srgb, var(--appx-accent) 54%, transparent); animation: appx-progress 1.1s cubic-bezier(.22,.75,.22,1) forwards; }
.appx-launch__message { min-height: 1.5em; margin: 12px 0 0; color: var(--appx-muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.appx-launch__message.is-changing { animation: appx-message .22s ease; }

.appx-downloads { margin: 28px auto; padding: 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.06); }
.appx-downloads__copy { display: grid; gap: 5px; }
.appx-downloads__copy strong { color: inherit; font-size: 18px; }
.appx-downloads__copy span { opacity: .76; font-size: 13px; line-height: 1.55; }
.appx-downloads__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.appx-store-button,
.appx-settings-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 15px;
  border: 1px solid color-mix(in srgb, var(--appx-accent) 44%, transparent);
  border-radius: 14px;
  color: #fff !important;
  background: rgba(0,0,0,.22);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.appx-store-button:hover,
.appx-settings-button:hover { transform: translateY(-1px); border-color: var(--appx-accent); background: rgba(0,0,0,.34); }
.appx-store-button svg { width: 20px; height: 20px; margin-inline-end: 9px; fill: currentColor; }

.appx-sheet {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: grid;
  align-items: end;
  padding: 18px;
  background: rgba(2, 10, 7, .66);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.appx-sheet[hidden] { display: none; }
.appx-sheet--passive {
  align-items: end;
  padding: 10px;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
}
.appx-sheet--passive .appx-sheet__panel {
  width: min(100%, 430px);
  border-radius: 22px;
  pointer-events: auto;
  box-shadow: 0 18px 54px rgba(0,0,0,.34);
}
.appx-sheet--passive .appx-sheet__content { padding: 18px; }
.appx-sheet--passive .appx-sheet__brand { gap: 10px; margin-bottom: 8px; }
.appx-sheet--passive .appx-sheet__brand img { width: 46px; height: 46px; }
.appx-sheet--passive .appx-sheet__brand span { display: none; }
.appx-sheet--passive .appx-sheet__brand strong { font-size: 14px; }
.appx-sheet--passive h2 { margin-bottom: 7px; font-size: 20px; }
.appx-sheet--passive p { display: none; }
.appx-sheet--passive .appx-sheet__trust { display: none; }
.appx-sheet--passive .appx-sheet__actions { grid-template-columns: 1fr; margin-top: 10px; }
.appx-sheet--passive .appx-sheet__primary,
.appx-sheet--passive .appx-sheet__secondary { min-height: 44px; padding: 9px 13px; font-size: 12px; }
.appx-sheet--passive .appx-sheet__secondary { display: none; }
.appx-sheet__panel {
  position: relative;
  width: min(100%, 520px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--appx-accent) 30%, transparent);
  border-radius: var(--appx-radius);
  color: #fff;
  background: linear-gradient(145deg, var(--appx-surface), var(--appx-bg));
  box-shadow: 0 28px 80px rgba(0,0,0,.42);
  animation: appx-sheet-in .28s cubic-bezier(.22,.75,.22,1);
}
.appx-sheet__content { padding: 26px; }
.appx-sheet__brand { display: flex; align-items: center; gap: 14px; margin: 0 44px 20px 0; }
.appx-sheet__brand img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.26)); }
.appx-idrive .appx-sheet__brand img { width: 74px; }
.appx-sheet__brand span { display: block; color: var(--appx-accent-2); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.appx-sheet__brand strong { display: block; margin-top: 3px; color: #fff; font-size: 17px; }
.appx-sheet h2 { margin: 0 0 10px; color: #fff; font-size: 25px; line-height: 1.15; letter-spacing: -.025em; }
.appx-sheet p { margin: 0; color: var(--appx-muted); font-size: 14px; line-height: 1.65; }
.appx-sheet__trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0; }
.appx-sheet__trust span { padding: 10px 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.05); font-size: 10px; font-weight: 750; text-align: center; }
.appx-sheet__actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.appx-sheet__primary,
.appx-sheet__secondary,
.appx-sheet__close { font: inherit; cursor: pointer; }
.appx-sheet__primary { min-height: 50px; padding: 12px 18px; border: 0; border-radius: 14px; color: #102418; background: linear-gradient(135deg, var(--appx-accent-2), var(--appx-accent)); font-weight: 900; }
.appx-sheet__secondary { min-height: 50px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; color: #fff; background: transparent; font-weight: 800; }
.appx-sheet__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: #fff; background: rgba(255,255,255,.07); font-size: 20px; line-height: 1; }
body.appx-sheet-open { overflow: hidden; }

.appx-tabbar,
.appx-connectivity { display: none; }

.appx-notification-prefs { display: grid; gap: 8px; margin: 18px 0 4px; }
.appx-notification-prefs__title { color: var(--appx-accent-2); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.appx-notification-pref {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;
  background: rgba(255,255,255,.045);
  cursor: pointer;
}
.appx-notification-pref > span { display: grid; gap: 3px; }
.appx-notification-pref b { color: #fff; font-size: 13px; }
.appx-notification-pref small { color: var(--appx-muted); font-size: 11px; line-height: 1.4; }
.appx-notification-pref input { position: absolute; opacity: 0; pointer-events: none; }
.appx-notification-pref i { position: relative; width: 46px; height: 27px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.12); transition: background .18s ease, border-color .18s ease; }
.appx-notification-pref i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .18s ease; }
.appx-notification-pref input:checked + i { border-color: var(--appx-accent); background: var(--appx-accent); }
.appx-notification-pref input:checked + i::after { transform: translateX(19px); }
[dir="rtl"] .appx-notification-pref input:checked + i::after { transform: translateX(-19px); }
.appx-notification-pref input:focus-visible + i { outline: 3px solid color-mix(in srgb, var(--appx-accent) 46%, transparent); outline-offset: 3px; }
.appx-notification-prefs__note { margin: 3px 2px 0 !important; color: var(--appx-muted) !important; font-size: 11px !important; line-height: 1.5 !important; }

.appx-shortcut-settings { display: grid; gap: 9px; margin: 18px 0 4px; }
.appx-shortcut-settings__list { display: grid; gap: 7px; }
.appx-shortcut-settings__list > p { margin: 0 !important; color: var(--appx-muted) !important; font-size: 11px !important; }
.appx-shortcut-settings__list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid color-mix(in srgb, var(--appx-accent) 22%, transparent); border-radius: 12px; }
.appx-shortcut-settings__list > div span { display: grid; gap: 2px; min-width: 0; }
.appx-shortcut-settings__list > div b, .appx-shortcut-settings__list > div small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appx-shortcut-settings__list > div b { font-size: 11px; }
.appx-shortcut-settings__list > div small { color: var(--appx-muted); font-size: 9px; }
.appx-shortcut-settings__list button { flex: 0 0 auto; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--appx-accent-2) 38%, transparent); border-radius: 999px; color: var(--appx-ink); background: transparent; font: inherit; font-size: 9px; font-weight: 850; cursor: pointer; }
.appx-shortcut-settings__clear { justify-self: start; color: #ffc2c2 !important; }

.appx-shortcut-panel { display: none; }
html.appx-standalone .appx-shortcut-panel {
  display: grid;
  grid-column: 1 / -1;
  gap: 11px;
  width: 100%;
  margin: 0 0 15px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--appx-accent) 30%, transparent);
  border-radius: 20px;
  color: var(--appx-ink);
  background: linear-gradient(145deg, color-mix(in srgb, var(--appx-surface) 94%, #fff 6%), var(--appx-surface));
  box-shadow: 0 12px 30px rgba(0,0,0,.1);
  box-sizing: border-box;
}
.appx-shortcut-panel > div:first-child { display: grid; gap: 3px; }
.appx-shortcut-panel > div:first-child strong { font-size: 13px; }
.appx-shortcut-panel > div:first-child small { color: var(--appx-muted); font-size: 10px; line-height: 1.45; }
.appx-shortcut-panel__saved { display: grid; grid-auto-columns: minmax(190px, 72%); grid-auto-flow: column; gap: 8px; overflow-x: auto; padding: 2px 1px 6px; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; }
.appx-shortcut-panel__saved::-webkit-scrollbar { display: none; }
.appx-shortcut-panel__saved button { display: grid; gap: 5px; min-width: 0; padding: 11px; border: 1px solid color-mix(in srgb, var(--appx-accent-2) 30%, transparent); border-radius: 14px; color: var(--appx-ink); background: color-mix(in srgb, var(--appx-bg) 72%, transparent); text-align: start; scroll-snap-align: start; cursor: pointer; }
.appx-shortcut-panel__saved b, .appx-shortcut-panel__saved small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appx-shortcut-panel__saved b { font-size: 11px; }
.appx-shortcut-panel__saved small { color: var(--appx-muted); font-size: 9px; }
.appx-shortcut-panel__actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.appx-shortcut-panel__actions button, .appx-shortcut-panel__setup { min-height: 40px; padding: 8px 12px; border: 0; border-radius: 12px; color: var(--appx-accent-contrast, #17140c); background: var(--appx-accent); font: inherit; font-size: 10px; font-weight: 900; cursor: pointer; }
.appx-shortcut-panel__actions button + button { border: 1px solid color-mix(in srgb, var(--appx-accent-2) 34%, transparent); color: var(--appx-ink); background: transparent; }
.appx-shortcut-panel > p { min-height: 15px; margin: 0 !important; color: var(--appx-accent-2) !important; font-size: 9px !important; line-height: 1.4 !important; }
.appx-shortcut-panel__setup { justify-self: start; }

.appx-journey-hub { display: none; }
html.appx-standalone .appx-journey-hub {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 13px;
  width: min(720px, calc(100% - 28px));
  margin: 14px auto 18px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--appx-accent) 32%, transparent);
  border-radius: 24px;
  color: var(--appx-ink);
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--appx-accent-2) 20%, transparent), transparent 34%),
    var(--appx-surface);
  box-shadow: 0 18px 48px rgba(0,0,0,.14);
}
.appx-journey-hub__top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.appx-journey-hub__top > div { display: grid; gap: 4px; min-width: 0; }
.appx-journey-hub__eyebrow { color: var(--appx-accent-2); font-size: 10px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.appx-journey-hub__date { font-size: clamp(18px, 5vw, 25px); line-height: 1.12; }
.appx-journey-hub__status { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: var(--appx-ink); background: color-mix(in srgb, var(--appx-accent) 18%, transparent); font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.appx-journey-hub__status.is-cancelled { color: #fff; background: #a72f2f; }
.appx-journey-hub__route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 13px; border-radius: 17px; background: color-mix(in srgb, var(--appx-bg) 72%, transparent); }
.appx-journey-hub__route span { overflow: hidden; font-size: 13px; font-weight: 750; line-height: 1.35; text-overflow: ellipsis; }
.appx-journey-hub__route b { color: var(--appx-accent-2); font-size: 20px; }
.appx-journey-hub__details { display: flex; flex-wrap: wrap; gap: 7px; }
.appx-journey-hub__details span { padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--appx-ink) 14%, transparent); border-radius: 999px; font-size: 10px; font-weight: 750; opacity: .78; }
.appx-journey-hub__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.appx-journey-hub__actions a,
.appx-journey-hub__actions button { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 8px 12px; border-radius: 14px; font: inherit; font-size: 12px; font-weight: 900; line-height: 1.2; text-align: center; text-decoration: none !important; cursor: pointer; }
.appx-journey-hub__primary { color: var(--appx-accent-contrast, #fff) !important; background: var(--appx-accent); }
.appx-journey-hub__secondary { border: 1px solid color-mix(in srgb, var(--appx-accent-2) 48%, transparent); color: var(--appx-ink) !important; background: transparent; }
.appx-journey-hub__utility { border: 1px solid color-mix(in srgb, var(--appx-ink) 16%, transparent); color: var(--appx-ink) !important; background: color-mix(in srgb, var(--appx-bg) 76%, transparent); }
.appx-journey-hub__utility:focus-visible { outline: 3px solid color-mix(in srgb, var(--appx-accent-2) 55%, transparent); outline-offset: 2px; }
.appx-journey-hub__share-status { min-height: 0; margin: -4px 2px 0; color: var(--appx-accent-2); font-size: 11px; font-weight: 750; line-height: 1.35; }
.appx-journey-hub__share-status:empty { display: none; }
.appx-journey-hub.is-loading { min-height: 148px; align-content: center; }
.appx-journey-hub__skeleton { display: block; height: 24px; border-radius: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--appx-ink) 7%, transparent), color-mix(in srgb, var(--appx-ink) 15%, transparent), color-mix(in srgb, var(--appx-ink) 7%, transparent)); background-size: 220% 100%; animation: appx-skeleton 1.1s linear infinite; }
.appx-journey-hub__skeleton:last-child { height: 58px; }

.appx-account-settings { display: none; }
html.appx-standalone .appx-account-settings {
  align-items: center;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  width: min(720px, calc(100% - 28px));
  margin: 18px auto;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--appx-accent) 24%, transparent);
  border-radius: 22px;
  color: var(--appx-ink);
  background: var(--appx-surface);
  box-shadow: 0 14px 34px rgba(0,0,0,.09);
}
.appx-account-settings__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--appx-accent) 12%, transparent);
}
.appx-account-settings__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.appx-account-settings__copy { display: grid; gap: 3px; min-width: 0; }
.appx-account-settings__copy strong, .appx-account-settings__copy small { display: block; }
.appx-account-settings__copy small { color: inherit; opacity: .7; }
.appx-account-settings button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: var(--appx-accent-contrast, #fff);
  background: var(--appx-accent);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}
.appx-sheet--settings .appx-sheet__panel { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.appx-sheet--settings .appx-sheet__trust { display: none; }

html.appx-standalone { --appx-tabbar-clearance: calc(102px + env(safe-area-inset-bottom)); }
html.appx-standalone body {
  min-height: 100dvh;
  padding-bottom: var(--appx-tabbar-clearance) !important;
  -webkit-tap-highlight-color: transparent;
}
html.appx-standalone .appx-downloads,
html.appx-standalone .hut-mobile-book,
html.appx-standalone .scc-mobile-book { display: none !important; }
html.appx-standalone .hut-service-bar,
html.appx-standalone .scc-corporate-bar { display: none !important; }
html.appx-standalone .site-header { top: 0 !important; }

html.appx-standalone .appx-tabbar {
  position: fixed;
  z-index: 2147481500;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(calc(100% - 20px), 590px);
  min-height: 64px;
  margin-inline: auto;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--appx-accent) 30%, rgba(255,255,255,.1));
  border-radius: 21px;
  color: rgba(255,255,255,.68);
  background: color-mix(in srgb, var(--appx-bg) 91%, transparent);
  box-shadow: 0 16px 44px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  transition: opacity .16s ease, transform .16s ease, visibility .16s linear;
}
.appx-tabbar__item {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 52px;
  padding: 4px 2px;
  border-radius: 16px;
  color: inherit !important;
  text-decoration: none !important;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.appx-tabbar__item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.appx-tabbar__item span { overflow: hidden; max-width: 100%; font-size: 10px; font-weight: 800; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.appx-tabbar__item[aria-current="page"] { color: var(--appx-accent-2) !important; background: color-mix(in srgb, var(--appx-accent) 15%, transparent); }
.appx-tabbar__item--book { color: #182219 !important; background: linear-gradient(145deg, var(--appx-accent-2), var(--appx-accent)); box-shadow: 0 7px 18px color-mix(in srgb, var(--appx-accent) 24%, transparent); }
.appx-tabbar__item:active { transform: scale(.95); }
.appx-tabbar__item em { position: absolute; top: 3px; inset-inline-end: 9px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid var(--appx-bg); border-radius: 999px; color: #fff; background: #c83e3e; font-size: 9px; font-style: normal; font-weight: 900; }
.appx-tabbar__item em[hidden] { display: none; }

/* Full-screen drawers and dialogs own the entire viewport. Hiding the app dock
   while they are open prevents it covering their final controls and native
   select options, then restores it automatically when the overlay closes. */
html.appx-standalone.scc-basket-is-open .appx-tabbar,
html.appx-standalone.has-consent-dialog .appx-tabbar,
html.appx-standalone body.menu-open .appx-tabbar,
html.appx-standalone body.agency-notice-open .appx-tabbar,
html.appx-standalone body.visitor-preferences-open .appx-tabbar,
html.appx-standalone body.appx-sheet-open .appx-tabbar,
html.appx-standalone body.appx-launching .appx-tabbar {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 20px));
}
@supports selector(body:has(*)) {
  html.appx-standalone body:has(.primary-nav.is-open) .appx-tabbar,
  html.appx-standalone body:has([data-menu].is-open) .appx-tabbar,
  html.appx-standalone body:has([data-visitor-preferences]:not([hidden])) .appx-tabbar,
  html.appx-standalone body:has(.scc-basket-layer:not([hidden])) .appx-tabbar,
  html.appx-standalone body:has(.appx-sheet:not([hidden])) .appx-tabbar {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 20px));
  }
}

html.appx-standalone .appx-connectivity {
  position: fixed;
  z-index: 2147481490;
  right: 18px;
  bottom: var(--appx-tabbar-clearance);
  left: 18px;
  display: block;
  width: min(calc(100% - 36px), 510px);
  margin-inline: auto;
  padding: 10px 15px;
  border: 1px solid color-mix(in srgb, var(--appx-accent) 34%, transparent);
  border-radius: 14px;
  color: #fff;
  background: var(--appx-surface);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}
html.appx-standalone .appx-connectivity[hidden] { display: none; }

html.appx-standalone .scc-notification-panel {
  position: fixed !important;
  z-index: 2147481600 !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: var(--appx-tabbar-clearance) !important;
  left: max(10px, env(safe-area-inset-left)) !important;
  overflow-y: auto;
  width: min(calc(100% - 20px), 560px) !important;
  max-height: min(70dvh, 620px) !important;
  margin-inline: auto !important;
  border-radius: 24px !important;
  overscroll-behavior: contain;
}

@keyframes appx-breathe { 0%,100% { transform: scale(.94); opacity: .3; } 50% { transform: scale(1.04); opacity: .85; } }
@keyframes appx-progress { from { width: 10%; } to { width: 100%; } }
@keyframes appx-message { from { opacity: .15; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes appx-sheet-in { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes appx-skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (min-width: 760px) {
  .appx-sheet { place-items: center; }
  .appx-downloads { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
  .appx-downloads__actions { flex: 0 0 auto; margin-top: 0; }
}

@media (max-width: 480px) {
  .appx-launch__logo-wrap { width: 112px; height: 112px; }
  .appx-idrive .appx-launch__logo-wrap { width: 168px; height: 146px; }
  .appx-sheet { padding: 10px; }
  .appx-sheet__content { padding: 22px 20px 20px; }
  .appx-sheet__trust { grid-template-columns: 1fr; }
  .appx-sheet__actions { grid-template-columns: 1fr; }
  .appx-downloads__actions > * { flex: 1 1 145px; }
  html.appx-standalone .appx-account-settings { grid-template-columns: 40px minmax(0, 1fr); }
  .appx-account-settings button { grid-column: 1 / -1; width: 100%; }
  .appx-journey-hub__route { grid-template-columns: 1fr; }
  .appx-journey-hub__route b { transform: rotate(90deg); width: max-content; }
}

/* Keep Saudi mobile pages on the browser's native viewport scroller. An
   explicit overflow scroller on <html>, combined with root overscroll
   containment from the accessibility layer, can leave WebKit's primary pan
   gesture attached to a stale scroll layer after a tab/app background cycle.
   `pan-y` keeps one-finger vertical scrolling compositor-driven while retaining
   pinch zoom. Actual dialogs still lock the document with the state rules. */
@media (max-width: 820px) {
  html.appx-hut,
  html.appx-scc {
    overflow-x: clip !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y pinch-zoom;
  }
  html.appx-hut body,
  html.appx-scc body {
    overflow-x: clip !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y pinch-zoom;
  }
  /* Horizontal strips may keep horizontal momentum, but must hand a vertical
     one-finger pan back to the page. The accessibility layer's two-axis
     `overscroll-behavior: contain` otherwise traps the gesture at the strip. */
  html.appx-hut .journey-modes,
  html.appx-scc .journey-modes,
  html.appx-hut .quick-routes,
  html.appx-scc .quick-routes,
  html.appx-hut .entry-content .wp-block-table,
  html.appx-scc .entry-content .wp-block-table {
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y pinch-zoom;
  }
  html.appx-hut body.menu-open,
  html.appx-scc body.menu-open,
  html.appx-hut body.agency-notice-open,
  html.appx-scc body.agency-notice-open,
  html.appx-hut body.visitor-preferences-open,
  html.appx-scc body.visitor-preferences-open,
  html.appx-hut body.appx-launching,
  html.appx-scc body.appx-launching,
  html.appx-hut body.appx-sheet-open,
  html.appx-scc body.appx-sheet-open,
  html.appx-hut.scc-basket-is-open {
    overflow-y: hidden !important;
  }
  html.appx-scc.scc-basket-is-open {
    overflow-y: hidden !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .appx-launch *, .appx-sheet__panel, .appx-store-button, .appx-settings-button, .appx-journey-hub__skeleton { animation: none !important; transition: none !important; }
}