/* ============================================================
   RAKYAT ONE — shared brand system
   Bank Rakyat · deep blue + bright orange
   Colours sampled from the official mark: blue #0963A1, orange #EC6C2B
   Geometry: the three-arrow mark sits on a 0/60/120 trigonal grid,
   so 60 degree cuts are the signature form throughout the system.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Reem+Kufi:wght@400;600&display=swap');

:root{
  /* ---- brand core ---- */
  --blue:        #0963A1;   /* the mark's blue */
  --blue-ink:    #04263F;   /* deepest, for text on light */
  --blue-900:    #052E4D;
  --blue-800:    #073F69;
  --blue-700:    #0A5286;
  --blue-600:    #0963A1;
  --blue-500:    #127AC8;
  --blue-400:    #3B96CE;
  --blue-100:    #DCEBF6;
  --blue-050:    #EFF6FB;

  --orange:      #EC6C2B;   /* the mark's orange */
  --orange-600:  #D95E1E;
  --orange-500:  #EC6C2B;
  --orange-400:  #FF8A47;
  --orange-100:  #FDE6D8;
  --orange-050:  #FFF4ED;

  /* ---- neutrals ---- */
  --ink:         #0E1C28;
  --ink-2:       #40566A;
  --ink-3:       #6E8497;
  --ink-4:       #9AACBB;
  --line:        #E2E9F0;
  --line-2:      #EDF2F7;
  --surface:     #FFFFFF;
  --canvas:      #F4F7FA;
  --sunken:      #EAF0F6;

  /* ---- semantic ---- */
  --good:        #0E9F6E;
  --good-bg:     #E6F6F0;
  --warn:        #C77700;
  --warn-bg:     #FFF4E0;
  --bad:         #D92D20;
  --bad-bg:      #FEECEA;
  --halal:       #0E9F6E;

  /* ---- form ---- */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px;

  --shadow-1: 0 1px 2px rgba(4,38,63,.05), 0 1px 3px rgba(4,38,63,.04);
  --shadow-2: 0 2px 6px rgba(4,38,63,.06), 0 8px 20px rgba(4,38,63,.06);
  --shadow-3: 0 10px 30px rgba(4,38,63,.10), 0 2px 8px rgba(4,38,63,.06);
  --shadow-card: 0 18px 40px rgba(4,38,63,.22), 0 4px 12px rgba(4,38,63,.14);

  --ease: cubic-bezier(.22,.9,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-ar: 'Reem Kufi', var(--font);
  --num: 'Plus Jakarta Sans', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
:focus-visible{ outline:3px solid var(--orange-400); outline-offset:2px; border-radius:6px; }

/* ============================================================
   TYPE
   ============================================================ */
.t-display{ font-size:clamp(30px,5vw,42px); font-weight:800; letter-spacing:-.03em; line-height:1.04; }
.t-h1{ font-size:26px; font-weight:800; letter-spacing:-.025em; line-height:1.14; }
.t-h2{ font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.t-h3{ font-size:16px; font-weight:700; letter-spacing:-.012em; }
.t-body{ font-size:14.5px; font-weight:500; line-height:1.55; color:var(--ink-2); }
.t-sm{ font-size:13px; font-weight:500; line-height:1.5; color:var(--ink-2); }
.t-cap{ font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.t-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:-.02em; }
.t-ar{ font-family:var(--font-ar); }
.muted{ color:var(--ink-3); }
.strong{ color:var(--ink); font-weight:700; }

/* money: big, readable, tabular */
.money{ font-variant-numeric:tabular-nums; font-weight:800; letter-spacing:-.03em; }
.money .cur{ font-size:.55em; font-weight:700; opacity:.62; margin-right:.28em; vertical-align:.14em; letter-spacing:0; }
.money .cent{ font-size:.62em; opacity:.66; }

/* ============================================================
   THE MARK
   Three arrows, 120 degree rotational symmetry, 0/60/120 edges.
   Traced from the official file, corrected for a 3.5% horizontal
   stretch present in the source raster.
   ============================================================ */
/* the mark always fills its wrapper, so callers size it once and it
   stays sharp from a 16px favicon to a full bleed backdrop */
.rb-mark{ display:block; width:100%; height:auto; }
.rb-mark path{ fill:var(--mark-fill, var(--orange)); }
.rb-lockup{ display:flex; align-items:center; gap:10px; }
.rb-lockup .rb-word{ font-weight:800; letter-spacing:-.03em; font-size:17px; line-height:1; color:var(--lockup-ink, var(--blue-ink)); }
.rb-lockup .rb-word b{ font-weight:800; }
.rb-lockup .rb-word span{ font-weight:500; opacity:.62; }
.rb-lockup .rb-sub{ font-size:9.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--lockup-sub, var(--ink-3)); margin-top:3px; }

/* ============================================================
   PRIMITIVES
   ============================================================ */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1);
}
.card.pad{ padding:var(--sp-5); }
.card.flat{ box-shadow:none; }
.hr{ height:1px; background:var(--line); border:0; margin:var(--sp-5) 0; }

/* signature: 60 degree corner cut, echoing the mark's geometry */
.cut60{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 11.55px) 100%, 0 100%); }
.slash60{ display:inline-block; width:12px; height:20px; background:var(--orange);
  clip-path:polygon(58% 0,100% 0,42% 100%,0 100%); vertical-align:-3px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 20px; border-radius:var(--r-sm);
  font-weight:700; font-size:15px; letter-spacing:-.01em;
  transition:transform .12s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), opacity .2s;
  user-select:none; white-space:nowrap;
}
.btn:active{ transform:scale(.975); }
.btn svg{ width:18px; height:18px; flex:none; }
.pill svg{ width:12px; height:12px; flex:none; }
.rb-i{ flex:none; }
.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 2px 0 var(--orange-600), 0 8px 20px rgba(236,108,43,.28); }
.btn-primary:hover{ background:var(--orange-400); }
.btn-blue{ background:var(--blue-700); color:#fff; box-shadow:0 2px 0 var(--blue-900), 0 8px 20px rgba(9,99,161,.24); }
.btn-blue:hover{ background:var(--blue-600); }
.btn-ghost{ background:var(--blue-050); color:var(--blue-700); border:1px solid var(--blue-100); }
.btn-ghost:hover{ background:var(--blue-100); }
.btn-quiet{ background:transparent; color:var(--ink-2); border:1px solid var(--line); }
.btn-quiet:hover{ background:var(--canvas); }
.btn-sm{ height:38px; padding:0 14px; font-size:13.5px; border-radius:10px; }
.btn-lg{ height:56px; font-size:16.5px; border-radius:var(--r-md); width:100%; }
.btn[disabled]{ opacity:.42; pointer-events:none; }

.pill{
  display:inline-flex; align-items:center; gap:5px;
  height:24px; padding:0 10px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:700; letter-spacing:.01em; white-space:nowrap;
  background:var(--sunken); color:var(--ink-2);
}
.pill-halal{ background:var(--good-bg); color:var(--good); }
.pill-orange{ background:var(--orange-050); color:var(--orange-600); }
.pill-blue{ background:var(--blue-050); color:var(--blue-700); }
.pill-warn{ background:var(--warn-bg); color:var(--warn); }
.pill-bad{ background:var(--bad-bg); color:var(--bad); }
.pill-dark{ background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(6px); }
.pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

/* the Shariah contract tag: every product declares its contract */
.aqad{
  display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px 0 7px;
  border-radius:6px; background:var(--good-bg); color:#0B7F58;
  font-size:11px; font-weight:700; letter-spacing:.01em;
}
.aqad svg{ width:11px; height:11px; flex:none; }
.aqad em{ font-style:normal; font-family:var(--font-ar); font-weight:600; }

.row{ display:flex; align-items:center; gap:var(--sp-3); }
.row.between{ justify-content:space-between; }
.col{ display:flex; flex-direction:column; }
.grow{ flex:1; min-width:0; }
.wrap{ flex-wrap:wrap; }
.ell{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.center{ align-items:center; }
.gap1{gap:4px}.gap2{gap:8px}.gap3{gap:12px}.gap4{gap:16px}.gap5{gap:20px}.gap6{gap:24px}

.icon{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:var(--blue-050); color:var(--blue-700); flex:none;
}
.icon svg{ width:21px; height:21px; }
.icon.o{ background:var(--orange-050); color:var(--orange-600); }
.icon.g{ background:var(--good-bg); color:var(--good); }
.icon.n{ background:var(--sunken); color:var(--ink-2); }
.icon.sm{ width:34px; height:34px; border-radius:10px; }
.icon.sm svg{ width:17px; height:17px; }

.toggle{
  width:46px; height:27px; border-radius:var(--r-pill); background:var(--line);
  position:relative; transition:background .22s var(--ease); flex:none; cursor:pointer;
}
.toggle::after{
  content:''; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .22s var(--ease);
}
.toggle[data-on="1"]{ background:var(--good); }
.toggle[data-on="1"]::after{ transform:translateX(19px); }

.field{ display:block; }
.field label{ display:block; font-size:12px; font-weight:700; color:var(--ink-3); margin-bottom:6px; letter-spacing:.02em; }
.field input,.field select,.field textarea{
  width:100%; height:50px; padding:0 14px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); font-size:15px; font-weight:600;
  transition:border-color .18s, box-shadow .18s;
}
.field textarea{ height:auto; padding:12px 14px; font-weight:500; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--blue-400); box-shadow:0 0 0 4px var(--blue-050);
}

.bar{ height:8px; border-radius:var(--r-pill); background:var(--sunken); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:var(--r-pill); background:var(--blue-600);
  transition:width .8s var(--ease-out); }
.bar.o > i{ background:linear-gradient(90deg,var(--orange),var(--orange-400)); }
.bar.g > i{ background:var(--good); }

/* ============================================================
   LANGUAGE SWITCH
   ============================================================ */
.lang{ display:inline-flex; background:var(--sunken); border-radius:var(--r-pill); padding:3px; gap:2px; }
.lang button{
  height:26px; padding:0 11px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:800; letter-spacing:.04em; color:var(--ink-3);
  transition:all .2s var(--ease);
}
.lang button[aria-pressed="true"]{ background:var(--surface); color:var(--blue-700); box-shadow:var(--shadow-1); }
.lang.on-dark{ background:rgba(255,255,255,.14); }
.lang.on-dark button{ color:rgba(255,255,255,.72); }
.lang.on-dark button[aria-pressed="true"]{ background:rgba(255,255,255,.95); color:var(--blue-800); }

/* language morphs rather than snaps (house taste) */
[data-i18n],[data-i18n-html]{ transition:opacity .16s ease, filter .16s ease; }
body.lang-swap [data-i18n],body.lang-swap [data-i18n-html]{ opacity:.28; filter:blur(2.5px); }

/* ============================================================
   TOAST
   ============================================================ */
#rb-toast{ position:fixed; left:50%; bottom:34px; transform:translateX(-50%); z-index:9000;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.rb-t{
  display:flex; align-items:center; gap:10px; max-width:min(92vw,420px);
  padding:12px 18px; border-radius:var(--r-pill);
  background:var(--blue-ink); color:#fff; font-size:13.5px; font-weight:600;
  box-shadow:var(--shadow-3); animation:rbT .32s var(--ease-out);
}
.rb-t.good{ background:#0B7F58; } .rb-t.bad{ background:var(--bad); }
.rb-t svg{ width:16px; height:16px; flex:none; }
@keyframes rbT{ from{ opacity:0; transform:translateY(14px) scale(.94); } }
.rb-t.out{ animation:rbTo .26s var(--ease) forwards; }
@keyframes rbTo{ to{ opacity:0; transform:translateY(10px) scale(.96); } }

/* ============================================================
   PROPOSAL RIBBON
   The same line on every page: this is a Univa concept, not a
   Bank Rakyat product. It sits bottom left because the toast owns
   the bottom centre and the assistant dock owns the bottom right.
   Small type, low contrast, and dismissible, so it states the fact
   without competing with the product behind it.
   ============================================================ */
.rb-disc{
  position:fixed; left:14px; bottom:14px; z-index:790;
  display:flex; align-items:flex-start; gap:9px; max-width:min(88vw,318px);
  padding:8px 10px; border-radius:11px;
  background:rgba(255,255,255,.86); border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(1.5); box-shadow:var(--shadow-1);
  font-size:9.5px; line-height:1.5; font-weight:600; color:var(--ink-3);
}
.rb-disc b{ display:block; font-weight:700; color:var(--ink-2); }
.rb-disc i{ display:block; font-style:normal; opacity:.8; }
.rb-disc button{ flex:none; width:15px; height:15px; margin-top:1px; padding:0;
  font-size:14px; line-height:1; color:var(--ink-4); }
.rb-disc button:hover{ color:var(--ink-2); }
/* on the dark surfaces the same panel is a tint rather than a card */
.rb-disc.on-dark{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.17);
  color:rgba(255,255,255,.6); box-shadow:none; }
.rb-disc.on-dark b{ color:rgba(255,255,255,.82); }
.rb-disc.on-dark button{ color:rgba(255,255,255,.42); }
.rb-disc.on-dark button:hover{ color:#fff; }
@media print{ .rb-disc{ display:none; } }

/* ============================================================
   UTILITIES
   ============================================================ */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.scroll-x{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.scroll-x::-webkit-scrollbar{ display:none; }
.scroll-x > *{ scroll-snap-align:start; flex:none; }
.skeleton{ background:linear-gradient(90deg,var(--sunken) 25%,var(--line-2) 37%,var(--sunken) 63%);
  background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:8px; }
@keyframes sk{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
}