/* Responsive layer for the stripped-down payment portal (dashboard style).
   Phone: single column + bottom nav. >=900px: sidebar + top bar + card grid. */

:root {
  --rs-blue: #2f5bff; --rs-blue-dark: #1b3fd1; --rs-ink: #101828; --rs-mute: #667085;
  --rs-bg: #f4f7fc; --rs-line: #e8edf6; --rs-card-shadow: 0 1px 3px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.05);
}

html, body { background: var(--rs-bg); }
body { color: var(--rs-ink); -webkit-font-smoothing: antialiased; }
#root > div { background: var(--rs-bg) !important; }
#root > div > div { box-shadow: none !important; background: var(--rs-bg) !important; }

/* ---------- avatar ---------- */
.rs-av { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; background: linear-gradient(135deg, #5b7cff, var(--rs-blue-dark)); }
.rs-av-sm { width: 40px; height: 40px; font-size: 16px; }
.rs-av-lg { width: 92px; height: 92px; font-size: 36px; border: 4px solid #fff; box-shadow: 0 6px 18px rgba(16,24,40,.15); margin: 28px auto 10px; }

/* ---------- top bar (_m) ---------- */
.rs-top { background: transparent !important; }
.rs-top-right { display: none; }
.rs-topuser { display: none; }

/* ---------- hero (greeting) ---------- */
.rs-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rs-hero-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rs-hero-text small { font-size: 13px; color: var(--rs-mute); }
.rs-hero-text b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-hero-text p { display: none; margin: 0; }
.rs-hero-date { display: none; }

/* ---------- balance card ---------- */
.rs-bal { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 20px; color: #fff;
  background: linear-gradient(135deg, #4a74ff 0%, var(--rs-blue-dark) 100%); box-shadow: 0 12px 28px rgba(47,91,255,.30); margin-bottom: 16px; }
.rs-bal-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.2); color: #fff; }
.rs-bal-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rs-bal-main small { font-size: 13px; opacity: .85; }
.rs-bal-main b { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.rs-bal-main b span { font-size: 14px; font-weight: 500; opacity: .85; letter-spacing: 0; }
.rs-bal-btn { flex: none; border: 0; border-radius: 999px; padding: 10px 18px; font: inherit; font-weight: 600; font-size: 14px; background: #fff; color: var(--rs-blue); cursor: pointer; }

/* ---------- content card ---------- */
.rs-card { background: #fff; border-radius: 20px; padding: 20px; box-shadow: var(--rs-card-shadow); }
.rs-card h3 { font-size: 17px; }
.mantine-Paper-root[class*="topupOption"], [class*="_topupOption_"] { border-radius: 16px !important; }
._positiveButton_regkn_1 { min-height: 52px; font-size: 16px; box-shadow: 0 6px 16px rgba(47,91,255,.25); }

/* ---------- profile ---------- */
.rs-pcard { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--rs-card-shadow); margin-bottom: 16px; }
.rs-banner { display: none; }
.rs-pbody { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 20px 20px; }
.rs-pname { font-size: 20px; font-weight: 700; }
.rs-pmail { font-size: 14px; color: var(--rs-mute); margin-bottom: 14px; }
.rs-pbody .rs-bal { width: 100%; margin: 12px 0 0; text-align: left; background: #f3f6ff; color: var(--rs-ink); box-shadow: none; border: 1px solid #e3eafd; }
.rs-pbody .rs-bal-ico { background: #e2eaff; color: var(--rs-blue); }
.rs-pbody .rs-bal-btn { background: var(--rs-blue); color: #fff; }
.rs-menu-title { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rs-mute); margin: 8px 4px 10px; }
.rs-menu { background: #fff; border-radius: 20px; box-shadow: var(--rs-card-shadow); overflow: hidden; }
.rs-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 0 16px; border: 0; background: none; font: inherit; color: var(--rs-ink); cursor: pointer; text-align: left; }
.rs-row + .rs-row { border-top: 1px solid var(--rs-line); }
.rs-row:hover { background: #f8faff; }
.rs-row-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #eef3ff; }
.rs-row-label { flex: 1; font-size: 16px; font-weight: 500; }
.rs-row-chev { color: #98a2b3; }
.rs-row.is-danger { color: #e5484d; }
.rs-row.is-danger .rs-row-ico { background: #fdecec; }
.rs-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 20px 0 4px; font-size: 12px; color: var(--rs-mute); }

/* ---------- other (payment) pages ---------- */
#root h1.mantine-Title-root { font-size: clamp(24px, 5vw, 30px); letter-spacing: -.02em; }
.mantine-Card-root { border-radius: 16px !important; box-shadow: var(--rs-card-shadow); }
.mantine-List-root > div.mantine-Group-root { min-height: 52px; }

/* ---------- bottom navigation (phone) ---------- */
._navBar_5wca_1 { border-top: 0 !important; border-radius: 22px 22px 0 0; box-shadow: 0 -6px 24px rgba(16,24,40,.08) !important; padding-bottom: env(safe-area-inset-bottom); }
._navButton_5wca_14 { min-height: 64px; gap: 2px; border-radius: 14px; }
._activeNavButton_5wca_28 { background: transparent !important; box-shadow: none !important; color: var(--rs-blue); }
._activeNavButton_5wca_28 p { color: var(--rs-blue); }

@media (max-width: 439px) { :root { --frame-width: 100vw; } }
@media (min-width: 600px) and (max-width: 899px) {
  :root { --frame-width: 600px; }
  #root > div > div { box-shadow: 0 0 40px rgba(16,24,40,.08) !important; }
}

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  :root { --frame-width: 560px; --rs-side: 248px; }
  #root > div > div { max-width: none !important; width: 100% !important; box-shadow: none !important; }
  .rs-top-right { display: block; }

  /* sidebar */
  ._navBar_5wca_1 { left: 0; top: 0; bottom: 0; transform: none; width: var(--rs-side); max-width: none; border-radius: 0; border-right: 1px solid var(--rs-line) !important; box-shadow: none !important; background: #fff; padding: 104px 16px 24px; }
  ._navBar_5wca_1::before { content: ""; position: absolute; top: 30px; left: 22px; right: 22px; height: 40px; background: url("../brandIcons/brandwithNameHorizontal.svg") left center / contain no-repeat; }
  ._navBar_5wca_1 .mantine-Container-root { padding: 0; max-width: none; }
  ._navBar_5wca_1 .mantine-Flex-root { flex-direction: column; align-items: stretch !important; gap: 6px; }
  ._navButton_5wca_14 { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 0 16px; min-height: 52px; border-radius: 12px; width: 100%; }
  ._navButton_5wca_14 p { font-size: 15px !important; }
  ._navButton_5wca_14:hover { background: #f1f5fd; }
  ._activeNavButton_5wca_28 { background: #e8eeff !important; }

  #root > div > div > div:has(> ._navBar_5wca_1) { padding-left: var(--rs-side); min-height: 100vh; }

  /* top bar */
  #root > div > div > div:has(> ._navBar_5wca_1) > .rs-top { background: #fff !important; border-bottom: 1px solid var(--rs-line); position: sticky; top: 0; z-index: 50; }
  .rs-top .mantine-Container-root { --container-size: 100%; max-width: none; padding: 0 32px; height: 72px; display: flex; align-items: center; }
  .rs-top .mantine-Group-root { width: 100%; justify-content: flex-end !important; gap: 20px; }
  .rs-top-left { width: auto !important; }
  .rs-top-center, .rs-top img.mantine-Image-root { display: none; }
  .rs-top-right { width: auto !important; }
  .rs-topuser { display: flex; align-items: center; gap: 12px; padding-left: 20px; border-left: 1px solid var(--rs-line); }
  .rs-topuser-text { display: flex; flex-direction: column; line-height: 1.25; }
  .rs-topuser-text b { font-size: 14px; font-weight: 600; }
  .rs-topuser-text span { font-size: 12px; color: var(--rs-mute); }

  /* content grids */
  #root > div > div > div:has(> ._navBar_5wca_1) > .mantine-Container-root { --container-size: 1120px; max-width: 1120px; margin-inline: auto; width: 100%; padding: 32px 32px 48px !important; }
  #root > div > div > div:has(> ._navBar_5wca_1) > .mantine-Container-root:not(.rs-grid) { --container-size: 760px; max-width: 760px; margin: 32px auto 48px; background: #fff; border-radius: 20px; box-shadow: var(--rs-card-shadow); width: calc(100% - 64px); padding: 36px 40px !important; }
  .rs-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
  .rs-grid .rs-hero { grid-column: 1 / -1; margin: 0; }
  .rs-grid .rs-bal { margin: 0; }
  .rs-grid .rs-card { padding: 28px; }
  .rs-grid-profile { grid-template-columns: 380px minmax(0, 1fr); }
  .rs-grid-profile .rs-pcard { margin: 0; }
  .rs-grid-profile .rs-menu-title { margin-top: 0; }
  ._positiveButton_regkn_1 { max-width: 360px; margin-inline: auto; display: flex; }

  /* greeting banner */
  .rs-hero { position: relative; padding: 28px 32px; border-radius: 20px; background: #fff; box-shadow: var(--rs-card-shadow); }
  .rs-hero .rs-av { display: none; }
  .rs-hero-text small { font-size: 16px; color: var(--rs-ink); }
  .rs-hero-text b { font-size: 32px; line-height: 1.2; }
  .rs-hero-text p { display: block; margin-top: 6px; font-size: 14px; color: var(--rs-mute); max-width: 420px; }
  .rs-hero-date { display: flex; flex-direction: column; align-items: flex-end; position: absolute; top: 20px; right: 28px; font-size: 13px; color: var(--rs-mute); }

  /* stat-card balance */
  .rs-grid > .rs-bal { background: #fff; color: var(--rs-ink); box-shadow: var(--rs-card-shadow); }
  .rs-grid > .rs-bal .rs-bal-ico { background: #e8eeff; color: var(--rs-blue); }
  .rs-grid > .rs-bal .rs-bal-main small { color: var(--rs-mute); opacity: 1; }
  .rs-grid > .rs-bal .rs-bal-main b span { color: var(--rs-mute); }
}
@media (min-width: 1400px) { :root { --rs-side: 280px; } }

/* ---------- login: narrow centred box ---------- */
@media (min-width: 600px) {
  #root div[style*="min-height: 100dvh"] > .mantine-Container-root { --container-size: 420px; max-width: 420px; margin-inline: auto; }
}

/* ---------- language bottom sheet ---------- */
.rs-lang-grab { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 4px; background: #d5dbe8; }
.rs-lang-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 0 16px;
  border: 1.5px solid #e3e9f4; border-radius: 16px; background: #fff; cursor: pointer; text-align: left;
  font: inherit; color: var(--rs-ink); transition: border-color .15s, background .15s, box-shadow .15s;
}
.rs-lang-opt:hover { background: #f6f9ff; }
.rs-lang-opt.is-on { border-color: var(--rs-blue); background: #eef4ff; box-shadow: 0 0 0 3px rgba(23, 105, 255, .10); }
.rs-lang-code { width: 36px; height: 36px; border-radius: 50%; background: #eef2f9; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #4a5a78; }
.rs-lang-opt.is-on .rs-lang-code { background: var(--rs-blue); color: #fff; }
.rs-lang-name { flex: 1; font-size: 16px; font-weight: 600; }
.rs-lang-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c8d1e3; display: grid; place-items: center; }
.rs-lang-opt.is-on .rs-lang-radio { background: var(--rs-blue); border-color: var(--rs-blue); }
.rs-lang-sheet .mantine-Drawer-content { box-shadow: 0 -12px 40px rgba(15, 27, 51, .18); }


/* header bands of the payment pages: blend with the page */
@media (max-width: 899px) { #root > div > div > div > div[style*="blue-0"] { background: transparent !important; } }

/* ---------- dialogs & sheets on desktop: dim the whole viewport, keep the panel compact ---------- */
@media (min-width: 900px) {
  .mantine-Drawer-overlay, .mantine-Modal-overlay,
  .mantine-Drawer-inner, .mantine-Modal-inner { left: 0 !important; right: 0 !important; max-width: none !important; width: 100% !important; margin: 0 !important; }
  .mantine-Drawer-inner { align-items: center !important; justify-content: center !important; }
  .mantine-Drawer-content { max-width: 480px !important; width: 100% !important; margin-inline: auto !important; flex: 0 0 auto !important; height: auto !important; max-height: 90vh; border-radius: 24px !important; box-shadow: 0 24px 60px rgba(16,24,40,.25) !important; }
  .rs-lang-grab { display: none; }
  .mantine-Modal-content { max-width: 520px !important; width: 100% !important; margin-inline: auto !important; }
  .mantine-Modal-inner { padding-inline: 16px !important; }
}

/* ---------- payment pages: same look as profile ---------- */
.rs-card.mantine-Paper-root { border: 0 !important; border-radius: 20px !important; box-shadow: var(--rs-card-shadow); background: #fff; }
.rs-grid-pay h1.mantine-Title-root { margin: 4px 4px 16px; font-size: 24px; }
.rs-card .mantine-Paper-root { background: #f8faff; border: 1px solid #e6ecfa; border-radius: 14px; padding: 12px 14px; }
.rs-card .mantine-Divider-root { border-color: var(--rs-line); }
.rs-grid-pay .rs-card h3 { font-size: 16px; font-weight: 700; }
@media (max-width: 899px) { .rs-grid-pay { display: block; } .rs-grid-pay > .rs-card { margin-bottom: 16px; } }
@media (min-width: 900px) {
  .rs-top-back .mantine-Group-root { justify-content: space-between !important; }
  .rs-top-back .mantine-Group-root > button { margin: 0 auto 0 0 !important; }
  .rs-grid.rs-grid-pay { grid-template-columns: minmax(0, 720px); }
  .rs-grid-pay > .rs-card { padding: 28px; margin-bottom: 20px; }
}

/* primary button label: always centred */
._positiveButton_regkn_1 { justify-content: center; text-align: center; }
._positiveButton_regkn_1 .mantine-Button-inner, ._positiveButton_regkn_1 .mantine-Button-label { width: 100%; justify-content: center; text-align: center; }

/* ---------- loading indicators ---------- */
@keyframes rs-spin { to { transform: rotate(360deg); } }
.rs-spin { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(47,91,255,.2); border-top-color: var(--rs-blue); animation: rs-spin .8s linear infinite; vertical-align: middle; }
/* balance card value while loading */
.rs-bal-loading { display: flex; align-items: center; height: 34px; }
.rs-bal .rs-bal-loading .rs-spin { width: 24px; height: 24px; border-color: rgba(255,255,255,.35); border-top-color: #fff; }
.rs-pbody .rs-bal .rs-bal-loading .rs-spin { border-color: rgba(47,91,255,.2); border-top-color: var(--rs-blue); }
@media (min-width: 900px) { .rs-grid > .rs-bal .rs-bal-loading .rs-spin { border-color: rgba(47,91,255,.2); border-top-color: var(--rs-blue); } }
/* inline "Loading..." row (top-up amounts) */
.rs-inline-load { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 0 22px; color: var(--rs-mute); font-size: 14px; }