/* Combined BCAm stylesheet. Edit this file for APK/WebView styling. */


/* Shared theme variables */
/* KEEP_IN_SYNC(fullscreen/resources/figmake/shadcn/globals.css) */

:root {
  --font-size: 16px;
  --background: #ffffff;
  --foreground: oklch(0.145 0 0);
  --card: #ffffff;
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: #030213;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.95 0.0058 264.53);
  --secondary-foreground: #030213;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: #cbced4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-background: var(--input-background);
  --color-switch-background: var(--switch-background);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}



/* Index / login landing */

/* BCA Sans font for index page */
html {
    background: #ffffff;
    min-height: 100%;
    min-height: 100dvh;
}

/* ── Full-screen background: match html to each page so nav gesture area never shows white ── */
html:has(body.page-dashboard)                              { background: #001e3a; }
html:has(body.page-minfo),
html:has(body.page-transfer)                               { background: #002849; }
html:has(body.page-antar),
html:has(body.page-daftar-antar),
html:has(body.page-validate-rekening),
html:has(body.page-mutasi-rekening)                        { background: #003f7a; }
html:has(body.page-mutasi-hasil)                           { background: #e8e8e8; }
html:has(body.page-pin),
html:has(body.page-transfer-pin)                           { background: #003f7a; }

@font-face {
    font-family: 'Montserrat Local';
    src: url('asset/font/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BCA Sans';
    src: url('asset/font/bca_sans_regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'BCA Sans';
    src: url('asset/font/bca_sans_light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'BCA Sans';
    src: url('asset/font/bca_sans_semi_bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'BCA Sans';
    src: url('asset/font/bca_sans_extra_bold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'BCA Sans';
    src: url('asset/font/bca_sans_italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

body.page-index * { box-sizing: border-box; font-weight: 400; }

body.page-index {
    margin: 0;
    background: radial-gradient(ellipse at 50% 38%, #1e72cc 0%, #0d52b0 30%, #083898 60%, #041f70 100%);
    min-height: 100vh;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    font-weight: 400;
    overflow-x: hidden;
}

body.page-index .hidden { display: none !important; }

body.page-index #splash-screen {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 38%, #1e72cc 0%, #0d52b0 30%, #083898 60%, #041f70 100%);
}

body.page-index .splash-content { text-align: center; color: #ffffff; }

body.page-index .splash-logo-box {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 26px;
}

body.page-index .splash-bca {
    color: #ffffff;
    font-size: 46px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -2px;
    line-height: 1;
}

body.page-index .splash-mobile {
    color: #ffffff;
    font-size: 34px;
    font-style: italic;
    line-height: 1;
}

body.page-index .loading-text { color: rgba(255,255,255,0.75); font-size: 14px; }

body.page-index .app-container {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    margin: 0 auto;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 28px 24px 20px;
    background: transparent;
    position: relative;
}

body.page-index .top-info {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-index .info-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.85);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    font-family: Arial, Helvetica, sans-serif;
}

body.page-index .logo-container {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0 18px;
}

body.page-index .menu-card {
    width: 100%;
    overflow: hidden;
    background: rgba(10, 60, 160, 0.55);
    border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,0.25);
    box-shadow: 0 4px 18px rgba(0,0,0,0.30);
}

body.page-index .app-container .menu-item {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 20px;
    color: #ffffff;
    background: transparent;
    cursor: pointer;
}

body.page-index .app-container .menu-item:active { background: rgba(255,255,255,0.10); }

body.page-index .border-bottom { border-bottom: 1px solid rgba(255,255,255,0.20); }

body.page-index .icon-box {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 9px;
    overflow: hidden;
}

body.page-index .icon-box img { width: 44px; height: 44px; object-fit: contain; display: block; }

body.page-index .menu-text { font-size: 22px; font-weight: 400; color: #ffffff; }

body.page-index .action-buttons { width: 100%; margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }

body.page-index .btn-action {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 30px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    background: linear-gradient(180deg, #2a7de1 0%, #1558c0 50%, #0d44a8 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 3px 10px rgba(0,0,0,0.30);
    cursor: pointer;
    letter-spacing: 0.2px;
}

body.page-index .footer { margin-top: auto; padding-top: 22px; color: rgba(255,255,255,0.80); text-align: center; font-size: 12px; line-height: 1.55; }

body.page-index #loading-overlay,
body.page-index #modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    padding: 24px;
}

body.page-index .loading-box {
    min-width: 190px;
    padding: 24px 20px;
    background: #ffffff;
    border-radius: 12px;
    text-align: center;
    color: #0062af;
    box-shadow: 0 12px 34px rgba(0,0,0,0.32);
}

body.page-index .spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    border: 4px solid #d7eaff;
    border-top-color: #0062af;
    border-radius: 50%;
    animation: bcamSpin 0.8s linear infinite;
}

@keyframes bcamSpin { to { transform: rotate(360deg); } }

body.page-index .kode-akses-card {
    width: min(330px, 88vw);
    overflow: hidden;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 14px 42px rgba(0,0,0,0.42);
}

body.page-index .glossy-header {
    padding: 14px 18px;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    background: linear-gradient(180deg, #5aa9e8 0%, #176ebd 52%, #064f98 100%);
}

body.page-index .modal-body { padding: 18px 16px 14px; background: #f4f4f4; }

body.page-index #kode-input {
    width: 100%;
    height: 42px;
    border: 1px solid #c6c6c6;
    border-radius: 5px;
    background: #ffffff;
    padding: 0 12px;
    font-size: 16px;
    outline: none;
}

body.page-index .modal-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }

body.page-index .btn-modal {
    min-height: 40px;
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    background: linear-gradient(180deg, #38c9ff 0%, #0b89ec 48%, #0057d6 100%);
}




/* Dashboard + m-Info shared styles */
@font-face {
    font-family: 'BCA Sans';
    src: url('asset/font/bca_sans_regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'BCA Sans';
    src: url('asset/font/bca_sans_italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'BCA Sans';
    src: url('asset/font/bca_sans_light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'BCA Sans';
    src: url('asset/font/bca_sans_light_italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'BCA Sans';
    src: url('asset/font/bca_sans_semi_bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'BCA Sans';
    src: url('asset/font/bca_sans_semi_bold_italic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'BCA Sans';
    src: url('asset/font/bca_sans_bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'BCA Sans';
    src: url('asset/font/bca_sans_extra_bold_italic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'BCA Sans';
    src: url('asset/font/bca_sans_bold_italic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}


body.page-dashboard *,
body.page-minfo *,
body.page-transfer * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'BCA Sans', sans-serif;
}


body.page-minfo,
body.page-transfer {
    height: 100vh;
    height: 100dvh;
    background: #002849;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

body.page-dashboard {
    height: 100vh;
    margin: 0;
    padding: 0;
    background: #002849;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    overflow: hidden;
}


body.page-dashboard .minfo-container,
body.page-minfo .minfo-container,
body.page-transfer .minfo-container {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    background: #002f55;
    position: relative;
    display: flex;
    flex-direction: column;
}


body.page-dashboard .dashboard-container,
body.page-minfo .dashboard-container,
body.page-transfer .dashboard-container {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #002849;
    position: relative;
    padding-bottom: 104px;
}


body.page-dashboard .header,
body.page-minfo .header,
body.page-transfer .header {
    height: 68px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 32px 12px 20px;
    position: sticky;
    top: 0;
    z-index: 50;
}


body.page-dashboard .logo-area,
body.page-minfo .logo-area,
body.page-transfer .logo-area {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}


body.page-dashboard .logo-bca,
body.page-minfo .logo-bca,
body.page-transfer .logo-bca {
    color: #0050a8;
    font-size: 27px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -1.3px;
    line-height: 1;
}


body.page-dashboard .logo-mobile,
body.page-minfo .logo-mobile,
body.page-transfer .logo-mobile {
    color: #0050a8;
    font-size: 22px;
    font-style: italic;
    line-height: 1;
}


body.page-dashboard .header-icons,
body.page-minfo .header-icons,
body.page-transfer .header-icons {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #0061af;
}


body.page-dashboard .status-indicator,
body.page-minfo .status-indicator,
body.page-transfer .status-indicator {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: #8bc53f;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),
                0 0 0 1px rgba(107, 159, 36, 0.35);
}


body.page-dashboard .logout-icon,
body.page-minfo .logout-icon,
body.page-transfer .logout-icon {
    color: #0061af;
    font-size: 28px;
}


body.page-dashboard .welcome-section,
body.page-minfo .welcome-section,
body.page-transfer .welcome-section {
    padding: 32px 20px 0;
}


body.page-dashboard .welcome-section p,
body.page-minfo .welcome-section p,
body.page-transfer .welcome-section p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: px;
}


body.page-dashboard .welcome-section h1,
body.page-minfo .welcome-section h1,
body.page-transfer .welcome-section h1 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
}


body.page-dashboard .promo-banner,
body.page-minfo .promo-banner,
body.page-transfer .promo-banner {
    margin: 7px 18px 22px;
    height: 36px;
    border-radius: 7px;
    background: linear-gradient(90deg, #0678c9 0%, #079dda 100%);
    border: none;
    box-shadow: none;
    overflow: hidden;
}


body.page-dashboard .promo-content,
body.page-minfo .promo-content,
body.page-transfer .promo-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0;
}


body.page-dashboard .promo-text,
body.page-minfo .promo-text,
body.page-transfer .promo-text {
    color: #003d7a;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
    padding: 0 10px;
    flex: 1;
}


body.page-dashboard .promo-text .promo-new,
body.page-minfo .promo-text .promo-new,
body.page-transfer .promo-text .promo-new {
    font-size: 10px;
    font-weight: 700;
    color: #c8860a;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}


body.page-dashboard .promo-text .promo-gebyar,
body.page-minfo .promo-text .promo-gebyar,
body.page-transfer .promo-text .promo-gebyar {
    font-size: 14px;
    font-weight: 900;
    color: #003d7a;
    display: block;
}


body.page-dashboard .promo-text .promo-hadiah,
body.page-minfo .promo-text .promo-hadiah,
body.page-transfer .promo-text .promo-hadiah {
    font-size: 12px;
    font-weight: 800;
    color: #003d7a;
    display: block;
}


body.page-dashboard .promo-link,
body.page-minfo .promo-link,
body.page-transfer .promo-link {
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    padding: 0 12px;
    height: 100%;
    background: transparent;
    white-space: nowrap;
}


body.page-dashboard .promo-link i,
body.page-minfo .promo-link i,
body.page-transfer .promo-link i {
    font-size: 13px;
}


body.page-dashboard .menu-grid,
body.page-minfo .menu-grid,
body.page-transfer .menu-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 5px;
    row-gap: 18px;
    flex: 1;    
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 10px -15px;
    min-height: 0;
}


body.page-dashboard .menu-item,
body.page-minfo .menu-item,
body.page-transfer .menu-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    text-align: center;
    font-size: clamp(9px, 2.55vw, 11px);
    line-height: 1.2;
    font-weight: 400;
    cursor: pointer;
}


body.page-dashboard .icon-square,
body.page-minfo .icon-square,
body.page-transfer .icon-square {
    width: clamp(65px, 19vw, 80px);
    margin: 0 auto;
    aspect-ratio: 1;
    border-radius: 30% / 24%;
    background: linear-gradient(180deg, #04a7d4 0%, #087dbd 50%, #064f98 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    clip-path: polygon(
        14% 11%,
        30% 5%,
        50% 3%,
        70% 5%,
        86% 11%,
        93% 29%,
        96% 50%,
        93% 71%,
        86% 89%,
        70% 95%,
        50% 97%,
        30% 95%,
        14% 89%,
        7% 71%,
        4% 50%,
        7% 29%
    );
    box-shadow: inset 0 10px 18px rgba(255, 255, 255, 0.10),
                inset 0 -10px 16px rgba(0, 39, 96, 0.25);
}


body.page-dashboard .menu-svg-icon,
body.page-minfo .menu-svg-icon,
body.page-transfer .menu-svg-icon {
    width: 78%;
    height: 78%;
    object-fit: contain;
    display: block;
}


body.page-dashboard .icon-square i,
body.page-minfo .icon-square i,
body.page-transfer .icon-square i {
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
    position: relative;
    z-index: 1;
}


body.page-dashboard .icon-square .fa-cart-shopping,
body.page-dashboard .icon-square .fa-keyboard,
body.page-minfo .icon-square .fa-cart-shopping,
body.page-minfo .icon-square .fa-keyboard,
body.page-transfer .icon-square .fa-cart-shopping,
body.page-transfer .icon-square .fa-keyboard {
    font-size: 26px;
}


body.page-dashboard .icon-square .fa-gift,
body.page-dashboard .icon-square .fa-bag-shopping,
body.page-minfo .icon-square .fa-gift,
body.page-minfo .icon-square .fa-bag-shopping,
body.page-transfer .icon-square .fa-gift,
body.page-transfer .icon-square .fa-bag-shopping {
    font-size: 29px;
}


body.page-dashboard /* Flazz text logo */
.icon-square .flazz-logo,
body.page-minfo /* Flazz text logo */
.icon-square .flazz-logo,
body.page-transfer /* Flazz text logo */
.icon-square .flazz-logo {
    color: #ffffff;
    font-size: 18px;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -0.5px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 1;
    font-family: Arial, sans-serif;
}


body.page-dashboard /* BagiBagi text logo */
.icon-square .bagibagi-logo,
body.page-minfo /* BagiBagi text logo */
.icon-square .bagibagi-logo,
body.page-transfer /* BagiBagi text logo */
.icon-square .bagibagi-logo {
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 1;
    font-family: Arial, sans-serif;
}


body.page-dashboard .menu-item span,
body.page-minfo .menu-item span,
body.page-transfer .menu-item span {
    display: block;
    width: 100%;
    max-width: 92px;
    min-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}


body.page-dashboard .bottom-nav,
body.page-minfo .bottom-nav,
body.page-transfer .bottom-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 60px;
    background: #ffffff;
    border-top: 1px solid #d8d8d8;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 0 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    color: #888888;
    z-index: 20;
}


body.page-dashboard .nav-item,
body.page-dashboard .nav-qris,
body.page-minfo .nav-item,
body.page-minfo .nav-qris,
body.page-transfer .nav-item,
body.page-transfer .nav-qris {
    min-width: 0;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    color: #999999;
}


body.page-dashboard .nav-item i,
body.page-minfo .nav-item i,
body.page-transfer .nav-item i {
    font-size: 24px;
}


body.page-dashboard .nav-icon,
body.page-minfo .nav-icon,
body.page-transfer .nav-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}


body.page-dashboard .nav-item.active .nav-icon,
body.page-minfo .nav-item.active .nav-icon,
body.page-transfer .nav-item.active .nav-icon {
    filter: none;
}


body.page-dashboard .nav-item.active,
body.page-minfo .nav-item.active,
body.page-transfer .nav-item.active {
    color: #0068b9;
}


body.page-dashboard .nav-qris,
body.page-minfo .nav-qris,
body.page-transfer .nav-qris {
    position: relative;
    color: #5e5e5e;
    font-weight: 600;
}


body.page-dashboard .qris-circle,
body.page-minfo .qris-circle,
body.page-transfer .qris-circle {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 66px;
    height: 66px;
    border-radius: 38%;
    background: linear-gradient(160deg, #3ab5e0 0%, #1480c8 40%, #0a5fa8 100%);
    border: 4px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}


body.page-dashboard .qris-circle i,
body.page-minfo .qris-circle i,
body.page-transfer .qris-circle i {
    color: #ffffff;
    font-size: 26px;
}


body.page-dashboard .nav-qris span,
body.page-minfo .nav-qris span,
body.page-transfer .nav-qris span {
    padding-top: 30px;
    font-size: 10px;
    font-weight: 600;
    color: #555555;
}


body.page-dashboard .qris-btn-icon,
body.page-minfo .qris-btn-icon,
body.page-transfer .qris-btn-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}


body.page-dashboard .qris-label,
body.page-minfo .qris-label,
body.page-transfer .qris-label {
    padding-top: 30px;
    width: 40px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}


body.page-dashboard .blur-overlay,
body.page-minfo .blur-overlay,
body.page-transfer .blur-overlay {
    position: fixed;
    inset: 0;
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(2px);
    transition: opacity 0.18s ease;
}


body.page-dashboard .blur-overlay.active,
body.page-minfo .blur-overlay.active,
body.page-transfer .blur-overlay.active {
    opacity: 1;
    pointer-events: auto;
}


body.page-dashboard .transaksi-popup,
body.page-minfo .transaksi-popup,
body.page-transfer .transaksi-popup {
    position: fixed;
    bottom: 92px;
    width: 176px;
    min-height: 150px;
    background: #ffffff;
    color: #333333;
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    overflow: visible;
    padding: 16px 18px 8px;
}


body.page-dashboard .transaksi-popup.open,
body.page-minfo .transaksi-popup.open,
body.page-transfer .transaksi-popup.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}


body.page-dashboard .popup-item,
body.page-minfo .popup-item,
body.page-transfer .popup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    color: #1e4f91;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
}

body.page-dashboard .popup-item:active,
body.page-minfo .popup-item:active,
body.page-transfer .popup-item:active {
    background: #f0f6ff;
}


body.page-dashboard .popup-icon,
body.page-minfo .popup-icon,
body.page-transfer .popup-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


body.page-dashboard .popup-icon img,
body.page-minfo .popup-icon img,
body.page-transfer .popup-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}


body.page-dashboard .popup-divider,
body.page-minfo .popup-divider,
body.page-transfer .popup-divider {
    display: none;
}


body.page-dashboard .popup-arrow,
body.page-minfo .popup-arrow,
body.page-transfer .popup-arrow {
    position: absolute;
    left: 38px;
    bottom: -10px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    transform: rotate(45deg);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.06);
}


body.page-dashboard .logout-overlay,
body.page-minfo .logout-overlay,
body.page-transfer .logout-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 20, 60, 0.55);
}


body.page-dashboard .logout-dialog,
body.page-minfo .logout-dialog,
body.page-transfer .logout-dialog {
    width: min(380px, 92%);
    background: #f0f0f0;
    border-radius: 0;
    border: 2px solid #ffffff;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}


body.page-dashboard .logout-title,
body.page-minfo .logout-title,
body.page-transfer .logout-title {
    padding: 1px 24px 8px;
    font-size: 20px;
    font-weight: 400;
    color: #0062af;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}


body.page-dashboard .logout-message,
body.page-minfo .logout-message,
body.page-transfer .logout-message {
    padding: 8px 24px 0;
    color: #0062af;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}


body.page-dashboard .logout-spacer,
body.page-minfo .logout-spacer,
body.page-transfer .logout-spacer {
    flex: 1;
    min-height: 200px;
}


body.page-dashboard .logout-buttons,
body.page-minfo .logout-buttons,
body.page-transfer .logout-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px 16px 20px;
}


body.page-dashboard .logout-btn,
body.page-minfo .logout-btn,
body.page-transfer .logout-btn {
    height: 44px;
    border: 0;
    border-radius: 5px;
    background: linear-gradient(180deg, #2196d3 0%, #0d6bb5 100%);
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 80, 160, 0.35);
}


body.page-dashboard .logout-btn:active,
body.page-minfo .logout-btn:active,
body.page-transfer .logout-btn:active {
    opacity: 0.85;
}


body.page-dashboard .logout-btn + .logout-btn,
body.page-minfo .logout-btn + .logout-btn,
body.page-transfer .logout-btn + .logout-btn {
    border-left: none;
}


body.page-dashboard .logout-btn.confirm,
body.page-minfo .logout-btn.confirm,
body.page-transfer .logout-btn.confirm {
    color: #ffffff;
    background: linear-gradient(180deg, #2196d3 0%, #0d6bb5 100%);
}


body.page-dashboard .minfo-container,
body.page-minfo .minfo-container,
body.page-transfer .minfo-container {
    padding-bottom: 80px;
    background: #002f55;
}



body.page-dashboard .minfo-header,
body.page-minfo .minfo-header,
body.page-transfer .minfo-header {
    position: relative;
    justify-content: space-between;
}


body.page-dashboard .minfo-back-btn,
body.page-minfo .minfo-back-btn,
body.page-transfer .minfo-back-btn {
    color: #0062af;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}


body.page-dashboard .minfo-header-title,
body.page-minfo .minfo-header-title,
body.page-transfer .minfo-header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #0062af;
    font-size: 16px;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
}


body.page-dashboard .header-nav,
body.page-minfo .header-nav,
body.page-transfer .header-nav {
    height: 39px;
    background: #ffffff;
    color: #0068b9;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 13px;
    border-bottom: 1px solid #d8d8d8;
}


body.page-dashboard .back-btn,
body.page-minfo .back-btn,
body.page-transfer .back-btn {
    color: #0068b9;
    text-decoration: none;
    font-size: 12px;
    font-weight: 400;
    justify-self: start;
}


body.page-dashboard .page-title,
body.page-minfo .page-title,
body.page-transfer .page-title {
    color: #0068b9;
    font-size: 12px;
    font-weight: 800;
}


body.page-dashboard .status-box,
body.page-minfo .status-box,
body.page-transfer .status-box {
    justify-self: end;
    width: 48px;
    display: flex;
    justify-content: center;
}


body.page-dashboard .indicator-green,
body.page-minfo .indicator-green,
body.page-transfer .indicator-green {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: #8bc53f;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),
                0 0 0 1px rgba(107, 159, 36, 0.25);
}


body.page-dashboard .content-wrapper,
body.page-minfo .content-wrapper,
body.page-transfer .content-wrapper {
    padding: 20px 14px 18px;
    background: #002f55;
    flex: 1;
}


body.page-dashboard .info-card,
body.page-minfo .info-card,
body.page-transfer .info-card {
    background: #ffffff;
    color: #005fae;
    border-radius: 9px;
    border: 1px solid rgba(205, 205, 205, 0.95);
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 68px - 32px - 80px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    scrollbar-width: none;
}
body.page-dashboard .info-card::-webkit-scrollbar,
body.page-minfo .info-card::-webkit-scrollbar,
body.page-transfer .info-card::-webkit-scrollbar {
    display: none;
}


body.page-dashboard .card-header,
body.page-minfo .card-header,
body.page-transfer .card-header {
    height: 80px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 0px;
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
    border-bottom: 1px solid #e0e0e0;
    border-radius: 6px 6px 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}


body.page-dashboard .icon-sq,
body.page-minfo .icon-sq,
body.page-transfer .icon-sq {
    width: 72px;
    height: 70px;
    margin: 1px 0;
    border-radius: 0;
    background: linear-gradient(180deg, #047eae 0%, #076dab 52%, #04518d 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cpath d='M 18 30 C 76 5 124 5 182 30 C 205 100 205 120 182 190 C 124 215 76 215 18 190 C -5 120 -5 100 18 30 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cpath d='M 18 30 C 76 5 124 5 182 30 C 205 100 205 120 182 190 C 124 215 76 215 18 190 C -5 120 -5 100 18 30 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 123% 108%;
    mask-size: 123% 108%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    box-shadow: inset 0 12px 18px rgba(255, 255, 255, 0.10),
                inset 0 -12px 18px rgba(0, 34, 88, 0.25);
}


body.page-dashboard .icon-sq i,
body.page-minfo .icon-sq i,
body.page-transfer .icon-sq i {
    color: #ffffff;
    font-size: 32px;
}


body.page-dashboard .icon-sq .menu-svg-icon,
body.page-minfo .icon-sq .menu-svg-icon,
body.page-transfer .icon-sq .menu-svg-icon {
    margin: auto;
    display: block;
    object-fit: contain;
    object-position: center center;
    width: 78%;
    height: 78%;
}


body.page-dashboard .header-text,
body.page-minfo .header-text,
body.page-transfer .header-text {
    color: #0062af;
    font-size: 20px;
    font-weight: 400;
}


body.page-dashboard .list-group,
body.page-minfo .list-group,
body.page-transfer .list-group {
    background: #ffffff;
}


body.page-dashboard .list-item,
body.page-minfo .list-item,
body.page-transfer .list-item {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 18px;
    color: #0062af;
    border-top: 1px solid #e0e0e0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}


body.page-dashboard .list-item.indent,
body.page-minfo .list-item.indent,
body.page-transfer .list-item.indent {
    padding-left: 30px;
}


body.page-dashboard .list-item i,
body.page-minfo .list-item i,
body.page-transfer .list-item i {
    color: #0092c8;
    font-size: 15px;
    flex-shrink: 0;
}


body.page-dashboard .section-divider,
body.page-minfo .section-divider,
body.page-transfer .section-divider {
    min-height: 26px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: #5a5a5a;
    color: #ffffff;
    border-top: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}



body.page-dashboard .modal-overlay,
body.page-minfo .modal-overlay,
body.page-transfer .modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.45);
}


body.page-dashboard .modal-box,
body.page-minfo .modal-box,
body.page-transfer .modal-box {
    width: min(360px, 88%);
    background: #f3f2f2;
    color: #1b1b1b;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.38);
    display: flex;
    flex-direction: column;
    border: 4px solid #ffffff;
    min-height: 260px;
}


body.page-dashboard .modal-title,
body.page-minfo .modal-title,
body.page-transfer .modal-title {
    padding: 0 18px 10px;
    color: #0062af;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    background: #f4f4f4;
    margin-top: 0;
    font-family: 'bca_sans_regular', sans-serif;
}


body.page-dashboard .modal-body,
body.page-minfo .modal-body,
body.page-transfer .modal-body {
    padding: 10px 20px 120px;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    background: #f4f4f4;
}


body.page-dashboard .modal-body .label,
body.page-minfo .modal-body .label,
body.page-transfer .modal-body .label {
    color: #1a1a1a;
    font-weight: 400;
    line-height: 1.5;
}


body.page-dashboard .modal-body .datetime,
body.page-minfo .modal-body .datetime,
body.page-transfer .modal-body .datetime {
    color: #1a1a1a;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 18px;
}


body.page-dashboard .account-line,
body.page-minfo .account-line,
body.page-transfer .account-line {
    font-weight: 400;
    font-size: 15px;
    color: #1a1a1a;
    line-height: 1.5;
}


body.page-dashboard .modal-ok-btn,
body.page-minfo .modal-ok-btn,
body.page-transfer .modal-ok-btn {
    width: calc(100% - 20px);
    height: 46px;
    border: 0;
    background: linear-gradient(180deg, #4da6f5 0%, #1a72d4 40%, #1460b8 100%);
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.3px;
    border-radius: 6px;
    margin: 3px auto;
    font-family: 'bca_sans_regular';
    display: block;
}


@media (min-height: 780px) {

    body.page-dashboard .dashboard-container,
body.page-minfo .dashboard-container,
body.page-transfer .dashboard-container {
        min-height: 100vh;
    }


    body.page-dashboard .menu-grid,
body.page-minfo .menu-grid,
body.page-transfer .menu-grid {
        row-gap: 34px;
    }


}


@media (max-width: 374px) {

    body.page-dashboard .dashboard-container::after,
body.page-minfo .dashboard-container::after,
body.page-transfer .dashboard-container::after {
        right: 22px;
    }


    body.page-dashboard .header,
body.page-minfo .header,
body.page-transfer .header {
        padding-left: 22px;
        padding-right: 24px;
    }


    body.page-dashboard .welcome-section,
body.page-minfo .welcome-section,
body.page-transfer .welcome-section {
        padding-left: 22px;
    }


    body.page-dashboard .promo-banner,
body.page-minfo .promo-banner,
body.page-transfer .promo-banner {
        margin-left: 22px;
        margin-right: 22px;
    }


    body.page-dashboard .menu-grid,
body.page-minfo .menu-grid,
body.page-transfer .menu-grid {
        column-gap: 4px;
        padding-left: 8px;
        padding-right: 8px;
    }


    body.page-dashboard .menu-item,
body.page-minfo .menu-item,
body.page-transfer .menu-item {
        font-size: 9px;
        gap: 5px;
    }


    body.page-dashboard .icon-square,
body.page-minfo .icon-square,
body.page-transfer .icon-square {
        width: 68px;
    }


}




/* Transfer menu styles */
body.page-transfer * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'BCA Sans', Arial, sans-serif;
}


body.page-transfer {
    background: #002849;
    min-height: 100vh;
    display: flex;
    justify-content: center;
}


body.page-transfer .transfer-container {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #002849;
}


body.page-transfer /* ── Header ── */
.header-nav {
    background-color: #ffffff;
    height: 68px;
    padding: 12px 32px 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    position: relative;
}


body.page-transfer .back-btn {
    color: #0062af;
    text-decoration: none;
    font-weight: 400;
    font-size: 16.1px;
    font-family: 'BCA Sans', Arial, sans-serif;
    min-width: 48px;
}


body.page-transfer .page-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #0062af;
    font-weight: 400;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}


body.page-transfer .indicator-green {
    width: 13px;
    height: 13px;
    background: #8bc53f;
    border-radius: 3px;
    min-width: 13px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),
                0 0 0 1px rgba(107, 159, 36, 0.35);
}






body.page-transfer /* Card top header row */
.card-header {
    background-color: #f8f8f8;
    padding: 10px 16px 10px 0px;
    gap: 8px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}


body.page-transfer .icon-sq {
    width: 72px;
    height: 70px;
    margin: 1px 0;
    background: linear-gradient(180deg, #047eae 0%, #076dab 52%, #04518d 100%);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    font-size: 32px;
    margin-right: 0;
    flex-shrink: 0;
    clip-path: none;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cpath d='M 18 30 C 76 5 124 5 182 30 C 205 100 205 120 182 190 C 124 215 76 215 18 190 C -5 120 -5 100 18 30 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cpath d='M 18 30 C 76 5 124 5 182 30 C 205 100 205 120 182 190 C 124 215 76 215 18 190 C -5 120 -5 100 18 30 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-size: 123% 108%;
    mask-size: 123% 108%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    box-shadow: inset 0 12px 18px rgba(255, 255, 255, 0.10),
                inset 0 -12px 18px rgba(0, 34, 88, 0.25);
}


body.page-transfer .icon-sq .menu-svg-icon {
    margin: auto;
    display: block;
    object-fit: contain;
    object-position: center center;
    width: 78%;
    height: 78%;
    position: relative;
    top: 4px;
}


body.page-transfer .header-text {
    color: #0045a1;
    font-weight: 400;
    font-size: 20px;
}


body.page-transfer /* ── Section divider (gray bar) ── */
.section-divider {
    background-color: #e4e4e4;
    padding: 7px 16px;
    color: #222222;
    font-weight: 700;
    font-size: 14px;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
}


body.page-transfer /* ── List items ── */
.list-item {
    padding: 15px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    color: #0045a1;
    font-weight: 400;
    font-size: 15px;
    cursor: pointer;
    background: #ffffff;
}


body.page-transfer .list-item.last {
    border-bottom: none;
}


body.page-transfer .list-item:active {
    background-color: #f0f5ff;
}


body.page-transfer .list-item i {
    color: #0088cc;
    font-size: 13px;
}


body.page-transfer /* ── Bottom Nav ── */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    height: auto;
    min-height: 60px;
    background: #ffffff;
    border-top: 1px solid #d8d8d8;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 0 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    color: #888888;
    z-index: 20;
}


body.page-transfer .nav-item,
body.page-transfer .nav-qris {
    min-width: 0;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    color: #999999;
}


body.page-transfer .nav-item i { font-size: 24px; }


body.page-transfer .nav-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}


body.page-transfer .nav-item.active .nav-icon {
    filter: none;
}


body.page-transfer .nav-item.active { color: #0068b9; }


body.page-transfer .nav-qris {
    position: relative;
    color: #5e5e5e;
    font-weight: 600;
}


body.page-transfer .qris-circle {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 66px;
    height: 66px;
    border-radius: 38%;
    background: linear-gradient(160deg, #3ab5e0 0%, #1480c8 40%, #0a5fa8 100%);
    border: 4px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}


body.page-transfer .qris-btn-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}


body.page-transfer .qris-label {
    padding-top: 30px;
    width: 40px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}


body.page-transfer .nav-qris span {
    padding-top: 30px;
    font-size: 10px;
    font-weight: 600;
    color: #555555;
}




/* Antar rekening / daftar rekening / validate rekening styles */
body.page-antar *,
body.page-daftar-antar *,
body.page-validate-rekening * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family:bca_sans_regular;
}


body.page-antar,
body.page-daftar-antar,
body.page-validate-rekening {
    background-image: url('asset/bg/image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    min-height: 100dvh;
}


body.page-antar .page-container,
body.page-daftar-antar .page-container,
body.page-validate-rekening .page-container {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-image: url('asset/bg/image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


body.page-antar /* ── Header ── */
.header,
body.page-daftar-antar /* ── Header ── */
.header,
body.page-validate-rekening /* ── Header ── */
.header {
    position: relative;
    height: 68px;
    background-color: #ffffff;
    padding: 12px 32px 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}


body.page-antar .back-btn,
body.page-daftar-antar .back-btn,
body.page-validate-rekening .back-btn {
    color: #007aff;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    min-width: 48px;
}


body.page-antar .page-title,
body.page-daftar-antar .page-title,
body.page-validate-rekening .page-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #0062af;
    font-weight: 600;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}


body.page-antar .header-icons,
body.page-daftar-antar .header-icons,
body.page-validate-rekening .header-icons {
    position: absolute;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #0061af;
}


body.page-antar .status-indicator,
body.page-daftar-antar .status-indicator,
body.page-validate-rekening .status-indicator {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: #8bc53f;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),
                0 0 0 1px rgba(107, 159, 36, 0.35);
}


body.page-antar .send-label,
body.page-daftar-antar .send-label,
body.page-validate-rekening .send-label {
    color: #ffffff;
    min-width: 48px;
    height: 38px;
    padding: 0 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 38px;
    text-align: center;
    display: inline-block;
    background: linear-gradient(180deg, #7a9fc4 0%, #5580a8 45%, #3d6490 100%);
    border: 1px solid #2e5278;
    border-radius: 5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40),
                inset 0 -1px 0 rgba(0, 0, 0, 0.15),
                0 2px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}


body.page-antar /* ── Thin gray bar under header ── */
.gray-bar,
body.page-daftar-antar /* ── Thin gray bar under header ── */
.gray-bar,
body.page-validate-rekening /* ── Thin gray bar under header ── */
.gray-bar {
    height: 10px;
    background-color: #b2b2b2;
    flex-shrink: 0;
}


body.page-antar /* ── White form card ── */
.form-card,
body.page-daftar-antar /* ── White form card ── */
.form-card,
body.page-validate-rekening /* ── White form card ── */
.form-card {
    background: #ffffff;
    flex-shrink: 0;
}


body.page-antar /* Generic row */
.form-row,
body.page-daftar-antar /* Generic row */
.form-row,
body.page-validate-rekening /* Generic row */
.form-row {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    background: #ffffff;
}


body.page-antar .form-row.no-arrow,
body.page-daftar-antar .form-row.no-arrow,
body.page-validate-rekening .form-row.no-arrow {
    flex-direction: column;
    align-items: flex-start;
}


body.page-antar .form-row.has-arrow,
body.page-daftar-antar .form-row.has-arrow,
body.page-validate-rekening .form-row.has-arrow {
    flex-direction: row;
    justify-content: space-between;
}


body.page-antar .row-content,
body.page-daftar-antar .row-content,
body.page-validate-rekening .row-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}


body.page-antar .row-label,
body.page-daftar-antar .row-label,
body.page-validate-rekening .row-label {
    color: #0055bb;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 2px;
}


body.page-antar .row-value,
body.page-daftar-antar .row-value,
body.page-validate-rekening .row-value {
    color: #777777;
    font-size: 13.5px;
    font-weight: 400;
    margin-top: 1px;
    font-family: 'bca_sans_regular', 'BCA Sans', Arial, Helvetica, sans-serif;
}

body.page-antar .row-value {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

body.page-antar .row-value .selected-acc,
body.page-antar .row-value .selected-separator,
body.page-antar .row-value .selected-name {
    display: inline-block;
    min-width: 0;
}

body.page-antar .row-value .selected-name {
    color: #555555;
    font-size: 14px;
}


body.page-antar .arrow-icon,
body.page-daftar-antar .arrow-icon,
body.page-validate-rekening .arrow-icon {
    color: #0088cc;
    font-size: 13px;
    flex-shrink: 0;
    margin-left: 6px;
}


body.page-antar .row-divider,
body.page-daftar-antar .row-divider,
body.page-validate-rekening .row-divider {
    height: 1px;
    background-color: #e4e4e4;
}


body.page-antar /* ── Jumlah Uang label row (tighter bottom padding) ── */
.jumlah-label-row,
body.page-daftar-antar /* ── Jumlah Uang label row (tighter bottom padding) ── */
.jumlah-label-row,
body.page-validate-rekening /* ── Jumlah Uang label row (tighter bottom padding) ── */
.jumlah-label-row {
    padding-bottom: 6px;
}


body.page-antar /* ── Jumlah Uang input row ── */
.jumlah-row,
body.page-daftar-antar /* ── Jumlah Uang input row ── */
.jumlah-row,
body.page-validate-rekening /* ── Jumlah Uang input row ── */
.jumlah-row {
    display: flex;
    align-items: center;
    padding: 10px 16px 14px;
    background: #ffffff;
    gap: 0;
}


body.page-antar .rp-selector,
body.page-daftar-antar .rp-selector,
body.page-validate-rekening .rp-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}


body.page-antar .rp-text,
body.page-daftar-antar .rp-text,
body.page-validate-rekening .rp-text {
    color: #0055bb;
    font-size: 14px;
    font-weight: 700;
}


body.page-antar .rp-arrow,
body.page-daftar-antar .rp-arrow,
body.page-validate-rekening .rp-arrow {
    color: #0088cc;
    font-size: 11px;
}


body.page-antar .jumlah-input-area,
body.page-daftar-antar .jumlah-input-area,
body.page-validate-rekening .jumlah-input-area {
    flex: 1;
}


body.page-antar .jumlah-right-arrow,
body.page-daftar-antar .jumlah-right-arrow,
body.page-validate-rekening .jumlah-right-arrow {
    color: #0088cc;
    font-size: 13px;
    flex-shrink: 0;
}


body.page-antar /* ── Last row (no bottom border needed) ── */
.last-row,
body.page-daftar-antar /* ── Last row (no bottom border needed) ── */
.last-row,
body.page-validate-rekening /* ── Last row (no bottom border needed) ── */
.last-row {
    border-bottom: none;
}


body.page-antar /* ── Gray fill rest of page ── */
.gray-fill,
body.page-daftar-antar /* ── Gray fill rest of page ── */
.gray-fill,
body.page-validate-rekening /* ── Gray fill rest of page ── */
.gray-fill {
    flex: 1;
    background-color: transparent;
    min-height: 300px;
}


body.page-antar /* ── Confirmation Popup ── */
.confirm-overlay,
body.page-daftar-antar /* ── Confirmation Popup ── */
.confirm-overlay,
body.page-validate-rekening /* ── Confirmation Popup ── */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}


body.page-antar .confirm-dialog,
body.page-daftar-antar .confirm-dialog,
body.page-validate-rekening .confirm-dialog {
    background: #ffffff;
    border-radius: 16px;
    width: 82%;
    max-width: 340px;
    overflow: hidden;
    box-shadow: 0 10px 36px rgba(0,0,0,0.30);
}


body.page-antar .confirm-body,
body.page-daftar-antar .confirm-body,
body.page-validate-rekening .confirm-body {
    padding: 20px 20px 14px;
}


body.page-antar .confirm-line,
body.page-daftar-antar .confirm-line,
body.page-validate-rekening .confirm-line {
    font-size: 14px;
    color: #111111;
    line-height: 1.7;
}


body.page-antar .confirm-line.bold,
body.page-daftar-antar .confirm-line.bold,
body.page-validate-rekening .confirm-line.bold {
    font-weight: 700;
    margin-bottom: 2px;
}


body.page-antar .confirm-note,
body.page-daftar-antar .confirm-note,
body.page-validate-rekening .confirm-note {
    font-size: 12.5px;
    color: #0055bb;
    line-height: 1.6;
    margin-top: 14px;
}


body.page-antar .confirm-buttons,
body.page-daftar-antar .confirm-buttons,
body.page-validate-rekening .confirm-buttons {
    display: flex;
    border-top: 1px solid #e0e0e0;
}


body.page-antar .confirm-btn,
body.page-daftar-antar .confirm-btn,
body.page-validate-rekening .confirm-btn {
    flex: 1;
    padding: 15px 0;
    font-size: 15px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    color: #ffffff;
}


body.page-antar .confirm-btn.cancel,
body.page-daftar-antar .confirm-btn.cancel,
body.page-validate-rekening .confirm-btn.cancel {
    background: linear-gradient(180deg, #2196F3 0%, #1565C0 100%);
    border-right: 1px solid rgba(255,255,255,0.3);
    border-radius: 0 0 0 16px;
}


body.page-antar .confirm-btn.ok,
body.page-daftar-antar .confirm-btn.ok,
body.page-validate-rekening .confirm-btn.ok {
    background: linear-gradient(180deg, #2196F3 0%, #1565C0 100%);
    border-radius: 0 0 16px 0;
}


body.page-antar .confirm-btn:active,
body.page-daftar-antar .confirm-btn:active,
body.page-validate-rekening .confirm-btn:active {
    opacity: 0.85;
}


body.page-antar /* ── Receipt Popup ── */
.receipt-dialog,
body.page-daftar-antar /* ── Receipt Popup ── */
.receipt-dialog,
body.page-validate-rekening /* ── Receipt Popup ── */
.receipt-dialog {
    background: #ffffff;
    border-radius: 0;
    width: 90%;
    max-width: 380px;
    overflow: hidden;
    box-shadow: 0 10px 36px rgba(0,0,0,0.35);
    position: relative;
}


body.page-antar /* BCA diagonal watermark */
.receipt-watermark,
body.page-daftar-antar /* BCA diagonal watermark */
.receipt-watermark,
body.page-validate-rekening /* BCA diagonal watermark */
.receipt-watermark {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background-image: url("asset/bg/watermark.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    opacity: 0.7;
}


body.page-antar .receipt-body,
body.page-daftar-antar .receipt-body,
body.page-validate-rekening .receipt-body {
    padding: 12px 16px 8px;
    position: relative;
    z-index: 1;
    min-height: 360px;
    border-radius: 0;
    font-family: 'bca_sans_regular', 'BCA Sans', Arial, Helvetica, sans-serif;
    font-weight: 400;
}


body.page-antar .receipt-line,
body.page-daftar-antar .receipt-line,
body.page-validate-rekening .receipt-line {
    font-size: 15px;
    color: #003a8c;
    line-height: 1.22;
    margin: 0;
}


body.page-antar .receipt-line.bold,
body.page-daftar-antar .receipt-line.bold,
body.page-validate-rekening .receipt-line.bold {
    font-weight: 700;
    color: #003a8c;
}


body.page-antar .receipt-line.green,
body.page-daftar-antar .receipt-line.green,
body.page-validate-rekening .receipt-line.green {
    color: #003a8c;
    font-weight: 700;
}


body.page-antar .receipt-actions,
body.page-daftar-antar .receipt-actions,
body.page-validate-rekening .receipt-actions {
    display: flex;
    align-items: center;
    padding: 8px 20px 10px 16px;
    gap: 8px;
    position: relative;
    z-index: 1;
    border: none;
    border-radius: 0;
}


body.page-antar .receipt-icon-btn,
body.page-daftar-antar .receipt-icon-btn,
body.page-validate-rekening .receipt-icon-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #1565C0;
    background: transparent;
    color: #333;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: none;
}


body.page-antar .receipt-icon-btn:active,
body.page-daftar-antar .receipt-icon-btn:active,
body.page-validate-rekening .receipt-icon-btn:active {
    background: transparent;
}


body.page-antar .receipt-share,
body.page-daftar-antar .receipt-share,
body.page-validate-rekening .receipt-share,
body.page-antar .receipt-save,
body.page-daftar-antar .receipt-save,
body.page-validate-rekening .receipt-save {
    margin: 0;
}

body.page-antar .receipt-share,
body.page-daftar-antar .receipt-share,
body.page-validate-rekening .receipt-share {
    margin-left: 8px;
}

body.page-antar .receipt-save,
body.page-daftar-antar .receipt-save,
body.page-validate-rekening .receipt-save {
    margin-left: 14px;
}


body.page-antar .receipt-ok-btn,
body.page-daftar-antar .receipt-ok-btn,
body.page-validate-rekening .receipt-ok-btn {
    flex: 0 1 185px;
    height: 50px;
    margin-left: auto;
    padding: 0;
    background: linear-gradient(180deg, #4fb9f2 0%, #1565C0 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    font-family: 'bca_sans_regular', 'BCA Sans', Arial, Helvetica, sans-serif;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(21,101,192,0.40);
}


body.page-antar .receipt-ok-btn:active,
body.page-daftar-antar .receipt-ok-btn:active,
body.page-validate-rekening .receipt-ok-btn:active {
    opacity: 0.88;
}


body.page-antar /* ── Jumlah display text inside row ── */
.jumlah-display-text,
body.page-daftar-antar /* ── Jumlah display text inside row ── */
.jumlah-display-text,
body.page-validate-rekening /* ── Jumlah display text inside row ── */
.jumlah-display-text {
    color: #111;
    font-size: 14px;
    font-weight: 600;
    padding-left: 8px;
}


body.page-antar /* ── Jumlah Uang Popup ── */
.jumlah-overlay,
body.page-daftar-antar /* ── Jumlah Uang Popup ── */
.jumlah-overlay,
body.page-validate-rekening /* ── Jumlah Uang Popup ── */
.jumlah-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}


body.page-antar .jumlah-dialog,
body.page-daftar-antar .jumlah-dialog,
body.page-validate-rekening .jumlah-dialog {
    background: linear-gradient(180deg, #5572a8 0%, #2e4880 50%, #253d6e 100%);
    border-radius: 16px;
    width: 78%;
    max-width: 310px;
    overflow: hidden;
    box-shadow: 0 10px 36px rgba(0,0,0,0.55);
}


body.page-antar .jumlah-title,
body.page-daftar-antar .jumlah-title,
body.page-validate-rekening .jumlah-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    padding: 16px 16px 10px;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}


body.page-antar .jumlah-input-wrap,
body.page-daftar-antar .jumlah-input-wrap,
body.page-validate-rekening .jumlah-input-wrap {
    padding: 4px 14px 16px;
}


body.page-antar .jumlah-input,
body.page-daftar-antar .jumlah-input,
body.page-validate-rekening .jumlah-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    background: #ffffff;
    outline: none;
    color: #111;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}


body.page-antar .jumlah-buttons,
body.page-daftar-antar .jumlah-buttons,
body.page-validate-rekening .jumlah-buttons {
    display: flex;
    border-top: 1px solid rgba(255,255,255,0.18);
}


body.page-antar .jumlah-btn,
body.page-daftar-antar .jumlah-btn,
body.page-validate-rekening .jumlah-btn {
    flex: 1;
    padding: 14px 0;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: transparent;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}


body.page-antar .jumlah-btn.cancel,
body.page-daftar-antar .jumlah-btn.cancel,
body.page-validate-rekening .jumlah-btn.cancel {
    border-right: 1px solid rgba(255,255,255,0.18);
}


body.page-antar .jumlah-btn:active,
body.page-daftar-antar .jumlah-btn:active,
body.page-validate-rekening .jumlah-btn:active {
    background: rgba(0,0,0,0.18);
}




/* Transfer list styles */
body.page-transfer-list * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}


body.page-transfer-list {
    min-height: 100vh;
    background: #d8d8d8;
    display: flex;
    justify-content: center;
}


body.page-transfer-list .page-container {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0 34%, transparent 34% 100%),
        linear-gradient(24deg, transparent 0 58%, rgba(255, 255, 255, 0.18) 58% 100%),
        #d5d5d5;
}


body.page-transfer-list .header-nav {
    background-color: #ffffff;
    height: 68px;
    padding: 12px 32px 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    position: relative;
}


body.page-transfer-list .back-btn {
    color: #0062af;
    text-decoration: none;
    font-weight: 400;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    min-width: 48px;
}


body.page-transfer-list .page-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #0062af;
    font-weight: 700;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}


body.page-transfer-list .indicator-green {
    width: 13px;
    height: 13px;
    background: #8bc53f;
    border-radius: 3px;
    min-width: 13px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),
                0 0 0 1px rgba(107, 159, 36, 0.35);
}


body.page-transfer-list .tab-bar {
    height: 46px;
    margin: 20px 24px 16px;
    display: flex;
    flex-shrink: 0;
    overflow: hidden;
    background: #bfbfbf;
    border-radius: 7px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
}


body.page-transfer-list .tab-btn {
    flex: 1;
    border: 0;
    background: #bfbfbf;
    color: #ffffff;
    font-size: 17px;
    font-weight: 400;
    cursor: pointer;
}


body.page-transfer-list .tab-btn:first-child {
    border-radius: 7px 0 0 7px;
}


body.page-transfer-list .tab-btn:last-child {
    border-radius: 0 7px 7px 0;
}


body.page-transfer-list .tab-btn.active {
    background: #006ab2;
}


body.page-transfer-list .search-wrap {
    min-height: 40px;
    margin: 0 24px 10px;
    padding: 0 13px 0 14px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.20);
}


body.page-transfer-list .search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #333333;
    font-size: 18px;
    line-height: 1;
}


body.page-transfer-list .search-input::placeholder {
    color: #777777;
}


body.page-transfer-list .search-icon {
    flex-shrink: 0;
    color: #777777;
    font-size: 17px;
}


body.page-transfer-list .contact-list {
    flex: 1;
    margin: 0 24px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.22);
}


body.page-transfer-list .contact-item {
    min-height: 50px;
    padding: 11px 12px 8px;
    background: #ffffff;
    border-bottom: 1px solid #c8c8c8;
    cursor: pointer;
}


body.page-transfer-list .contact-item:active {
    background: #f2f6fb;
}


body.page-transfer-list .contact-name {
    margin-bottom: 5px;
    color: #00629b;
    font-size: 14px;
    font-weight: 600;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    line-height: 1.1;
    text-transform: uppercase;
}


body.page-transfer-list .contact-acc {
    color: #111111;
    font-size: 13px;
    font-weight: 400;
    font-family: 'bca_sans_regular', 'BCA Sans', Arial, Helvetica, sans-serif;
    line-height: 1.1;
}


body.page-transfer-list .empty-state {
    padding: 28px 18px;
    color: #777777;
    font-size: 16px;
    text-align: center;
}


@media (max-width: 374px) {

    body.page-transfer-list .header-nav {
        padding-left: 24px;
        padding-right: 24px;
    }


    body.page-transfer-list .page-title {
        font-size: 17px;
    }


    body.page-transfer-list .tab-bar,
body.page-transfer-list .search-wrap,
body.page-transfer-list .contact-list {
        margin-left: 16px;
        margin-right: 16px;
    }


    body.page-transfer-list .tab-btn {
        font-size: 15px;
    }


    body.page-transfer-list .search-input {
        font-size: 16px;
    }


}




/* Mutasi rekening form styles */
body.page-mutasi-rekening * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}


body.page-mutasi-rekening {
    background-image: url('asset/bg/image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    min-height: 100dvh;
}


body.page-mutasi-rekening .page-container {
    max-width: 450px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-image: url('asset/bg/image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


body.page-mutasi-rekening /* ── Header ── */
.header-nav {
    background-color: #ffffff;
    padding: 13px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}


body.page-mutasi-rekening .back-btn {
    color: #007aff;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    min-width: 48px;
}


body.page-mutasi-rekening .page-title {
    color: #003399;
    font-weight: 900;
    font-size: 18px;
}


body.page-mutasi-rekening .header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 60px;
    justify-content: flex-end;
}


body.page-mutasi-rekening .indicator-green {
    width: 16px;
    height: 16px;
    background-color: #6dc500;
    border-radius: 4px;
    flex-shrink: 0;
}


body.page-mutasi-rekening .send-label {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(180deg, #7a9fc4 0%, #5580a8 45%, #3d6490 100%);
    min-width: 48px;
    padding: 0 10px;
    height: 38px;
    line-height: 38px;
    border-radius: 5px;
    border: 1px solid #2e5278;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.40),
                inset 0 -1px 0 rgba(0,0,0,0.15),
                0 2px 4px rgba(0,0,0,0.25);
    cursor: pointer;
    display: inline-block;
    text-align: center;
}


body.page-mutasi-rekening /* ── Gray bar under header ── */
.gray-bar {
    height: 10px;
    background-color: #b2b2b2;
    flex-shrink: 0;
}


body.page-mutasi-rekening /* ── White form card ── */
.form-card {
    background: #ffffff;
    margin: 14px 12px 0;
    border-radius: 12px;
    border: 1px solid #d8d8d8;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    flex-shrink: 0;
}


body.page-mutasi-rekening /* Generic form row */
.form-row {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    background: #ffffff;
}


body.page-mutasi-rekening .form-row.no-arrow {
    flex-direction: column;
    align-items: flex-start;
}


body.page-mutasi-rekening .form-row.has-arrow {
    flex-direction: row;
    justify-content: space-between;
    cursor: pointer;
}


body.page-mutasi-rekening .form-row.periode-header {
    padding-bottom: 8px;
}


body.page-mutasi-rekening .row-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}


body.page-mutasi-rekening .row-label {
    color: #1a5cbf;
    font-weight: 700;
    font-size: 14.5px;
    margin-bottom: 2px;
}


body.page-mutasi-rekening .row-value {
    color: #777777;
    font-size: 13.5px;
    font-weight: 400;
    margin-top: 1px;
}


body.page-mutasi-rekening .arrow-icon {
    color: #1a5cbf;
    font-size: 22px;
    flex-shrink: 0;
    margin-left: 6px;
    line-height: 1;
}


body.page-mutasi-rekening .row-divider {
    height: 1px;
    background-color: #e4e4e4;
}


body.page-mutasi-rekening /* ── Date rows ── */
.date-row {
    padding: 8px 16px 12px;
    background: #ffffff;
}


body.page-mutasi-rekening .date-label {
    color: #1a5cbf;
    font-weight: 700;
    font-size: 14.5px;
    margin-bottom: 6px;
}


body.page-mutasi-rekening .date-box {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    background: #ffffff;
    color: #1a5cbf;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.5px;
}


body.page-mutasi-rekening /* ── Notes section (inside card) ── */
.notes-section {
    padding: 14px 16px 16px;
    background: #ffffff;
    border-top: 1px solid #e4e4e4;
}


body.page-mutasi-rekening .note-title {
    color: #cc0000;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 6px;
}


body.page-mutasi-rekening .note-item {
    color: #cc0000;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.7;
}


body.page-mutasi-rekening /* ── Gray fill rest of page ── */
.gray-fill {
    flex: 1;
    background-color: transparent;
    min-height: 200px;
}


body.page-mutasi-rekening /* ── PIN m-BCA Popup ── */
.pin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}


body.page-mutasi-rekening .pin-dialog {
    background: #07101b;
    border-radius: 0;
    width: 64%;
    max-width: 275px;
    overflow: hidden;
    padding: 8px 12px 11px;
    border: 1px solid rgba(235,245,255,0.55);
    border-top-color: transparent;
    box-shadow: 0 7px 18px rgba(0,0,0,0.5);
    position: relative;
}


body.page-mutasi-rekening .pin-dialog::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.95), rgba(255,255,255,0.15));
}


body.page-mutasi-rekening .pin-title {
    color: #ffffff;
    font-size: 21px;
    font-weight: 400;
    text-align: center;
    padding: 0 0 6px;
    letter-spacing: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}


body.page-mutasi-rekening .pin-input-wrap {
    padding: 0 4px 14px;
}


body.page-mutasi-rekening .pin-input {
    width: 100%;
    height: 34px;
    padding: 2px 5px;
    font-size: 16px;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    background: #ffffff;
    outline: none;
    color: #111;
    letter-spacing: 3px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.22);
}


body.page-mutasi-rekening .pin-buttons {
    display: flex;
    gap: 4px;
    border-top: none;
    padding: 0 5px 2px;
}


body.page-mutasi-rekening .pin-btn {
    flex: 1;
    height: 34px;
    padding: 0;
    font-size: 18px;
    font-weight: 400;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background: linear-gradient(180deg, #38c9ff 0%, #0b89ec 48%, #0057d6 100%);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.55);
    box-shadow: 0 1px 3px rgba(0,0,0,0.45);
}


body.page-mutasi-rekening .pin-btn.cancel {
    border-right: none;
}


body.page-mutasi-rekening .pin-btn:active {
    filter: brightness(0.9);
}

body.page-mutasi-rekening .jenis-overlay {
    position: fixed;
    inset: 0;
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    background: rgba(0, 0, 0, 0.58);
}

body.page-mutasi-rekening .jenis-dialog {
    width: min(440px, calc(100vw - 44px));
    background: rgba(0, 0, 0, 0.96);
    border: 2px solid rgba(90, 90, 90, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
    padding: 1px 8px;
}

body.page-mutasi-rekening .jenis-option {
    width: 100%;
    min-height: 56px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background: transparent;
    color: #eeeeee;
    font-size: 18px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

body.page-mutasi-rekening .jenis-option:last-child {
    border-bottom: 0;
}

body.page-mutasi-rekening .jenis-option.active,
body.page-mutasi-rekening .jenis-option:active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

body.page-mutasi-rekening .pin-error-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px 24px 22vh;
    background: rgba(0, 0, 0, 0.58);
}

body.page-mutasi-rekening .pin-error-card {
    width: min(324px, 84vw);
    min-height: min(400px, 56vh);
    padding: 6px 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #f2f2f2;
    border: 4px solid #ffffff;
    outline: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
}

body.page-mutasi-rekening .pin-error-message {
    padding: 2px 8px;
    color: #0062af;
    font-size: 14px;
    font-weight: 400;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    line-height: 1.25;
    text-align: center;
}

body.page-mutasi-rekening .pin-error-card::after {
    content: "";
    display: block;
    order: 1;
    width: min(300px, 90%);
    align-self: center;
    height: 1px;
    margin: auto 0 4px;
    background: linear-gradient(90deg, rgba(211, 211, 211, 0) 0%, #cfcfcf 16%, #cfcfcf 84%, rgba(211, 211, 211, 0) 100%);
}

body.page-mutasi-rekening .pin-error-back {
    order: 2;
    width: min(166px, 58%);
    align-self: center;
    margin-top: 0;
    min-height: 46px;
    border: 0;
    border-radius: 7px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    background: linear-gradient(180deg, #48b6ee 0%, #1677c7 48%, #064f98 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38),
                0 2px 5px rgba(0, 0, 0, 0.28);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.42);
    cursor: pointer;
    text-align: center;
}

body.page-mutasi-rekening /* No Transaction Popup */
.notrans-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.58);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}


body.page-mutasi-rekening .notrans-dialog {
    width: 62%;
    max-width: 285px;
    min-height: 410px;
    background: linear-gradient(145deg, #ffffff 0%, #fdfdfd 62%, #eeeeee 100%);
    border: 7px solid #ffffff;
    box-shadow: 0 12px 45px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
}


body.page-mutasi-rekening .notrans-title {
    color: #00549a;
    font-size: 19px;
    font-weight: 400;
    padding: 8px 22px 0;
    line-height: 1.35;
}


body.page-mutasi-rekening .notrans-actions {
    margin-top: auto;
    padding: 8px 0 10px;
    border-top: 1px solid #d8d8d8;
    display: flex;
    justify-content: center;
}


body.page-mutasi-rekening .notrans-back {
    width: 140px;
    height: 47px;
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-size: 21px;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(180deg, #59c8f7 0%, #1179c4 46%, #003f92 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), 0 2px 4px rgba(0,0,0,0.25);
}


body.page-mutasi-rekening .notrans-back:active {
    filter: brightness(0.92);
}


body.page-mutasi-rekening /* ══════════════ CALENDAR PICKER ══════════════ */
.cal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}


body.page-mutasi-rekening .cal-dialog {
    background: #ffffff;
    border-radius: 4px;
    width: 88%;
    max-width: 340px;
    overflow: hidden;
    box-shadow: 0 8px 36px rgba(0,0,0,0.35);
    font-family: 'bca_sans_regular', 'BCA Sans', Arial, Helvetica, sans-serif;
    font-weight: 400;
}


body.page-mutasi-rekening /* Blue header */
.cal-header {
    background: #3d6199;
    padding: 18px 22px 16px;
}


body.page-mutasi-rekening .cal-year {
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 4px;
}


body.page-mutasi-rekening .cal-selected-date {
    color: #ffffff;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.15;
}


body.page-mutasi-rekening /* Month navigation */
.cal-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px 4px;
}


body.page-mutasi-rekening .cal-nav-btn {
    background: none;
    border: none;
    font-size: 26px;
    color: #555;
    cursor: pointer;
    padding: 4px 10px;
    line-height: 1;
}


body.page-mutasi-rekening .cal-nav-btn:active { color: #003a8c; }


body.page-mutasi-rekening .cal-month-label {
    font-size: 14px;
    font-weight: 700;
    color: #222;
    text-align: center;
}


body.page-mutasi-rekening /* Day-of-week headers */
.cal-day-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 4px 12px 2px;
}


body.page-mutasi-rekening .cal-day-headers span {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    padding: 4px 0;
}


body.page-mutasi-rekening /* Day grid */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 12px 4px;
    gap: 2px 0;
}


body.page-mutasi-rekening .cal-cell {
    text-align: center;
    padding: 7px 0;
    font-size: 13.5px;
    color: #222;
    cursor: pointer;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: background 0.1s;
}


body.page-mutasi-rekening .cal-cell.empty {
    cursor: default;
}


body.page-mutasi-rekening .cal-cell.disabled {
    color: #cccccc;
    cursor: default;
    pointer-events: none;
}


body.page-mutasi-rekening .cal-cell:not(.empty):active {
    background: #e8eeff;
}


body.page-mutasi-rekening .cal-cell.picked {
    background: #3d6199;
    color: #ffffff;
    border-radius: 50%;
    font-weight: 700;
}


body.page-mutasi-rekening /* Action buttons */
.cal-actions {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px 12px;
    gap: 8px;
    border-top: 1px solid #f0f0f0;
}


body.page-mutasi-rekening .cal-action-btn {
    background: none;
    border: none;
    color: #3d6199;
    font-family: 'bca_sans_regular', 'BCA Sans', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
    padding: 8px 14px;
    cursor: pointer;
    border-radius: 4px;
    letter-spacing: 0.5px;
}


body.page-mutasi-rekening .cal-action-btn:active {
    background: #eef2ff;
}




/* Mutasi hasil styles */
body.page-mutasi-hasil * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}


body.page-mutasi-hasil {
    background-color: #e8e8e8;
    min-height: 100vh;
}


body.page-mutasi-hasil .page-container {
    max-width: 450px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #e8e8e8;
}


body.page-mutasi-hasil /* ── Header ── */
.header-nav {
    background-color: #ffffff;
    padding: 13px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
}


body.page-mutasi-hasil .back-btn {
    color: #007aff;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    min-width: 48px;
}


body.page-mutasi-hasil .page-title {
    color: #003399;
    font-weight: 900;
    font-size: 18px;
}


body.page-mutasi-hasil .header-right {
    display: flex;
    align-items: center;
    min-width: 48px;
    justify-content: flex-end;
}


body.page-mutasi-hasil .indicator-green {
    width: 13px;
    height: 13px;
    background-color: #8cc63f;
    border-radius: 3px;
}


body.page-mutasi-hasil /* ── Blue info bar ── */
.info-bar {
    background: linear-gradient(180deg, #1565C0 0%, #0d47a1 100%);
    padding: 9px 16px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}


body.page-mutasi-hasil .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


body.page-mutasi-hasil .info-label {
    color: #cfe3ff;
    font-size: 11px;
    font-weight: 400;
    flex-shrink: 0;
    margin-right: 8px;
}


body.page-mutasi-hasil .info-value {
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    text-align: right;
}


body.page-mutasi-hasil /* ── Search bar ── */
.search-wrap {
    background: #e8e8e8;
    padding: 5px 6px;
    display: flex;
    align-items: center;
}


body.page-mutasi-hasil .search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #d0d0d0;
    padding: 7px 12px;
}


body.page-mutasi-hasil .search-icon {
    color: #aaa;
    font-size: 14px;
    flex-shrink: 0;
}


body.page-mutasi-hasil .search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333;
    background: transparent;
}


body.page-mutasi-hasil .search-input::placeholder {
    color: #bbb;
}


body.page-mutasi-hasil /* ── Transaction list ── */
.trx-list {
    background: #ffffff;
    flex-shrink: 0;
}


body.page-mutasi-hasil .trx-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 13px 16px;
    border-bottom: 1px solid #eeeeee;
    overflow: hidden;
}


body.page-mutasi-hasil .trx-left {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
}


body.page-mutasi-hasil .trx-code {
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 2px;
}


body.page-mutasi-hasil .trx-ref {
    font-size: 12.5px;
    color: #444;
    margin-bottom: 2px;
}


body.page-mutasi-hasil .trx-desc {
    font-size: 12.5px;
    color: #444;
    line-height: 1.5;
}


body.page-mutasi-hasil .trx-right {
    text-align: right;
    flex: 0 0 auto;
    min-width: 86px;
    max-width: 45%;
}


body.page-mutasi-hasil .trx-amount {
    font-size: 13px;
    font-weight: 700;
    color: #111111;
    white-space: nowrap;
    margin-bottom: 4px;
}

body.page-mutasi-hasil .trx-amount.cr { color: #1565C0; }

body.page-mutasi-hasil .trx-amount.db { color: #cc0000; }

.amount-cents {
    font-size: inherit;
    font-family: inherit;
    vertical-align: baseline;
}


body.page-mutasi-hasil .trx-type {
    font-size: 13px;
    font-weight: 700;
}

body.page-mutasi-hasil .trx-type.cr { color: #1565C0; }

body.page-mutasi-hasil .trx-type.db { color: #cc0000; }


body.page-mutasi-hasil .trx-divider {
    height: 1px;
    background: #eeeeee;
    margin: 0 16px;
}


body.page-mutasi-hasil .trx-empty {
    padding: 20px 16px;
    color: #888;
    font-size: 14px;
    text-align: center;
}


body.page-mutasi-hasil /* ── Spacer ── */
.spacer {
    flex: 1;
    min-height: 40px;
}


body.page-mutasi-hasil /* ── Bottom buttons ── */
.share-wrap {
    padding: 12px 14px;
    background: linear-gradient(180deg, #1565C0 0%, #0d47a1 100%);
    display: flex;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 50;
}


body.page-mutasi-hasil .share-btn {
    flex: 1;
    padding: 13px;
    background: rgba(255,255,255,0.18);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}


body.page-mutasi-hasil .share-btn:active {
    background: rgba(255,255,255,0.30);
}




/* Mutasi PDF/print preview styles */
body.page-mutasi-pdf * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body.page-mutasi-pdf {
    min-height: 100vh;
    background-color: white;
    padding: 1.5rem;
    font-family: Arial, sans-serif;
}


body.page-mutasi-pdf .container {
    min-height: 100vh;
}


body.page-mutasi-pdf .content {
    max-width: 1000px;
    margin: 0 auto;
}


body.page-mutasi-pdf .header {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}


body.page-mutasi-pdf .logo {
    height: 4rem;
    width: auto;
}


body.page-mutasi-pdf .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    letter-spacing: 0.025em;
    font-weight: normal;
}


body.page-mutasi-pdf .account-info {
    border: 2px solid black;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    display: inline-block;
}


body.page-mutasi-pdf .info-item {
    display: flex;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: bold;
}


body.page-mutasi-pdf .info-item:last-child {
    margin-bottom: 0;
}


body.page-mutasi-pdf .info-label {
    width: 10rem;
}


body.page-mutasi-pdf .info-colon {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}


body.page-mutasi-pdf .info-value {
    flex: 1;
}


body.page-mutasi-pdf .catatan-box {
    border: 2px solid black;
    border-radius: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
}


body.page-mutasi-pdf .catatan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}


body.page-mutasi-pdf .catatan-title {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    font-weight: bold;
}


body.page-mutasi-pdf .catatan-text {
    font-size: 0.625rem;
    line-height: 1.625;
    color: #4b5563;
}


body.page-mutasi-pdf .transaction-table {
    margin-top: 1rem;
}


body.page-mutasi-pdf .table-header {
    background-color: #1565c0;
    color: white;
    display: flex;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    border: 2px solid #1565c0;
    border-radius: 0.5rem;
}


body.page-mutasi-pdf .header-col {
    padding-right: 0.75rem;
}


body.page-mutasi-pdf .tanggal-col {
    width: 120px;
    border-right: 1px solid black;
    padding-right: 0.75rem;
}


body.page-mutasi-pdf .keterangan-col {
    flex: 1;
    border-right: 1px solid black;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}


body.page-mutasi-pdf .mutasi-col {
    width: 150px;
    text-align: right;
    padding-left: 0.75rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.5rem;
}


body.page-mutasi-pdf .table-row {
    display: flex;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}


body.page-mutasi-pdf .row-col {
    padding-right: 0.75rem;
}


body.page-mutasi-pdf .table-row .tanggal-col {
    border-right: none;
}


body.page-mutasi-pdf .table-row .keterangan-col {
    border-right: none;
    white-space: pre-line;
    line-height: 1.375;
}


body.page-mutasi-pdf .table-row .mutasi-col {
    border-right: none;
}

/* Index screen restore */
@font-face {
    font-family: 'BCA Index Sans';
    src: url('bca_sans_semi_bold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BCA Access Regular';
    src: url('bca_sans_regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BCA Transfer Regular';
    src: url('bca_sans_regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body.page-index {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: #ffffff;
    color: #ffffff;
    font-family: 'BCA Index Sans', Arial, Helvetica, sans-serif;
}

body.page-index *,
body.page-index button,
body.page-index input {
    font-family: 'BCA Index Sans', Arial, Helvetica, sans-serif;
    font-weight: 600;
}

body.page-index #splash-screen {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-index .app-container {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 44px 22px 28px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: url('asset/bg/background.png') center top / cover no-repeat;
    color: #ffffff;
    font-family: 'BCA Index Sans', Arial, Helvetica, sans-serif;
}

body.page-index .top-info {
    position: absolute;
    top: 52px;
    right: 22px;
    width: 28px;
    height: 28px;
}

body.page-index .info-icon {
    width: 27px;
    height: 27px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    color: #ffffff;
    background: transparent;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.page-index .logo-container {
    height: 150px;
    margin: 22px 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-index .logo-container img {
    width: min(292px, 74vw) !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
}

body.page-index .menu-card {
    width: 100%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.96);
    border-radius: 9px;
    background: rgba(0, 75, 165, 0.95);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

body.page-index .app-container .menu-item {
    min-height: 78px;
    padding: 10px 12px 10px 10px;
    display: grid;
    grid-template-columns: 78px 1fr;
    align-items: center;
    gap: 14px;
    background: linear-gradient(180deg, #139dde 0%, #0665b1 44%, #003579 100%);
    color: #ffffff;
    border: 0;
    transition: background 0.08s ease, color 0.08s ease;
}

body.page-index .app-container .menu-item + .menu-item,
body.page-index .app-container .border-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.78);
    border-bottom: 0;
}

body.page-index .app-container .menu-item:first-child {
    border-top: 0;
}

body.page-index .app-container .menu-item:active {
    background: #ffffff;
    color: #0052a8;
    filter: none;
}

body.page-index .app-container .menu-item:active .icon-box {
    background: linear-gradient(180deg, #139dde 0%, #0665b1 48%, #00458f 100%);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35),
                0 1px 2px rgba(0, 0, 0, 0.25);
}

body.page-index .app-container .menu-item:active .menu-text {
    color: #0052a8;
    text-shadow: none;
}

body.page-index .icon-box {
    width: 64px;
    height: 64px;
    border-radius: 15px;
    background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.7),
                0 1px 2px rgba(0, 0, 0, 0.25);
}

body.page-index .icon-box img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
}

body.page-index .menu-text {
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

body.page-index .action-buttons {
    width: 100%;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

body.page-index .btn-action {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    font-family: 'BCA Index Sans', Arial, Helvetica, sans-serif;
    line-height: 1.1;
    text-align: center;
    background: linear-gradient(180deg, #149fdf 0%, #0668b5 48%, #00387f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
                0 3px 5px rgba(0, 0, 0, 0.25);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

body.page-index .footer {
    margin-top: auto;
    padding-top: 28px;
    color: #ffffff;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

body.page-index .footer p {
    margin: 0;
}

body.page-index .loading-box,
body.page-index .kode-akses-card {
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    font-weight: 400;
}

body.page-index .kode-akses-card {
    width: min(294px, 84vw);
    overflow: visible;
    border-radius: 0;
    background: #f3eadb;
    border: 1px solid rgba(130, 120, 105, 0.45);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.42);
    transform: translateY(var(--kode-modal-shift, 0px));
    transition: transform 0.18s ease;
}

body.page-index #modal-overlay.keyboard-open {
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--kode-modal-top, 18vh);
    padding-bottom: 12px;
}

body.page-index .glossy-header {
    padding: 11px 12px 10px;
    background: #f3eadb;
    color: #5d6272;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    line-height: 1;
    box-shadow: none;
    text-shadow: none;
}

body.page-index .modal-body {
    padding: 0 9px 10px;
    background: #f3eadb;
}

body.page-index #kode-input {
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 0 5px;
    border: 1px solid #b8ad9c;
    border-radius: 2px;
    background: #fffaf0;
    color: #333333;
    font-size: 20px;
    font-weight: 400;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

body.page-index #kode-input::placeholder {
    color: #8f8a82;
    opacity: 1;
}

body.page-index .modal-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    font-weight: 600;
}

body.page-index .btn-modal {
    min-height: 43px;
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    background: linear-gradient(180deg, #14bdf0 0%, #0877c7 47%, #1049a8 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
                0 1px 2px rgba(0, 0, 0, 0.28);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

body.page-index #kode-error-overlay {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px 24px 22vh;
    background: rgba(0, 0, 0, 0.58);
}

body.page-index .kode-error-card {
    width: min(324px, 84vw);
    min-height: min(400px, 56vh);
    padding: 14px 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    border: 4px solid #ffffff;
    outline: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
}

body.page-index .kode-error-message {
    padding: 2px 8px;
    color: #0062af;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
}

body.page-index .kode-error-card::after {
    content: none;
}

body.page-index .kode-error-back {
    order: 2;
    width: 100%;
    align-self: center;
    margin-top: auto;
    min-height: 46px;
    border: 0;
    border-radius: 7px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    background: linear-gradient(180deg, #48b6ee 0%, #1677c7 48%, #064f98 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38),
                0 2px 5px rgba(0, 0, 0, 0.28);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.42);
    cursor: pointer;
    text-align: center;
}

/* m-Info list arrows */
body.page-minfo .list-item {
    position: relative;
    padding-right: 34px;
}

body.page-minfo .list-item i {
    display: none;
}

body.page-minfo .list-item::after {
    content: "›";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-52%);
    color: #0092c8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
}

/* m-Info should fill the WebView without side frame color. */
body.page-minfo {
    margin: 0;
    padding: 0;
    display: block;
}

body.page-minfo .minfo-container {
    width: 100vw;
    max-width: none;
    min-height: 100vh;
}

/* Keep internal app pages edge-to-edge in WebView. */
body.page-transfer,
body.page-transfer-list,
body.page-antar,
body.page-daftar-antar,
body.page-validate-rekening,
body.page-mutasi-rekening,
body.page-mutasi-hasil {
    margin: 0;
    padding: 0;
    display: block;
}

body.page-transfer .transfer-container,
body.page-transfer-list .page-container,
body.page-antar .page-container,
body.page-daftar-antar .page-container,
body.page-validate-rekening .page-container,
body.page-mutasi-rekening .page-container,
body.page-mutasi-hasil .page-container {
    width: 100vw;
    max-width: none;
    min-height: 100vh;
}

/* Transfer list arrows */
body.page-transfer .list-item {
    position: relative;
    padding-right: 34px;
}

body.page-transfer .list-item i {
    display: none;
}

body.page-transfer .list-item::after {
    content: "›";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-52%);
    color: #0092c8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
}

/* Daftar antar rekening screen */
body.page-daftar-antar {
    min-height: 100vh;
    background:
        linear-gradient(148deg, rgba(255, 255, 255, 0.34) 0 34%, transparent 34% 100%),
        linear-gradient(25deg, transparent 0 58%, rgba(255, 255, 255, 0.22) 58% 100%),
        #cfcfcf !important;
}

body.page-daftar-antar .page-container {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    background:
        linear-gradient(148deg, rgba(255, 255, 255, 0.34) 0 34%, transparent 34% 100%),
        linear-gradient(25deg, transparent 0 58%, rgba(255, 255, 255, 0.22) 58% 100%),
        #cfcfcf !important;
}

body.page-daftar-antar .rekening-label {
    padding: 18px 18px 2px !important;
    color: #0062af !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.1;
}

body.page-daftar-antar .rekening-card {
    margin: 0 10px !important;
    overflow: hidden;
    background: #ffffff !important;
    border: 1px solid #c7c7c7;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16) !important;
}

body.page-daftar-antar .input-row {
    position: relative;
    min-height: 40px !important;
    padding: 0 34px 0 10px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #d8d8d8 !important;
}

body.page-daftar-antar .rekening-card > div:last-child .input-row {
    border-bottom: 0 !important;
}

body.page-daftar-antar .norek-input {
    width: 100%;
    min-width: 0;
    padding: 0 !important;
    color: #4b4b4b !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 40px !important;
    letter-spacing: 0 !important;
}

body.page-daftar-antar .norek-input::placeholder {
    color: #9b9b9b !important;
    opacity: 1;
}

body.page-daftar-antar .chevron-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 40px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0092c8 !important;
    background: transparent !important;
    border: 0 !important;
    opacity: 1 !important;
}

body.page-daftar-antar .chevron-btn i {
    display: none;
}

body.page-daftar-antar .chevron-btn::after {
    content: "›";
    color: #0092c8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-1px);
}

body.page-daftar-antar .chevron-btn:disabled {
    cursor: default;
}

body.page-daftar-antar .gray-fill {
    background: transparent !important;
}

/* Antar rekening form screen */
@font-face {
    font-family: 'bca_sans_regular';
    src: url('asset/font/bca_sans_regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

body.page-antar {
    min-height: 100vh;
    font-family: 'bca_sans_regular', sans-serif !important;
    background:
        linear-gradient(148deg, rgba(255, 255, 255, 0.34) 0 34%, transparent 34% 100%),
        linear-gradient(25deg, transparent 0 58%, rgba(255, 255, 255, 0.22) 58% 100%),
        #cfcfcf !important;
}

body.page-antar .page-container {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    background:
        linear-gradient(148deg, rgba(255, 255, 255, 0.34) 0 34%, transparent 34% 100%),
        linear-gradient(25deg, transparent 0 58%, rgba(255, 255, 255, 0.22) 58% 100%),
        #cfcfcf !important;
}

body.page-antar .gray-bar {
    height: 22px !important;
    background: #d4d4d4 !important;
}

body.page-antar .form-card {
    margin: 0 !important;
    padding: 10px 14px 14px;
    background: #ffffff !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.page-antar .form-row {
    position: relative;
    min-height: 48px;
    padding: 5px 32px 5px 0 !important;
    background: #ffffff !important;
}

body.page-antar .form-row.no-arrow {
    justify-content: center;
}

body.page-antar .form-row.has-arrow {
    align-items: center;
}

body.page-antar .row-divider {
    height: 1px !important;
    background: #cfcfcf !important;
}

body.page-antar .row-label {
    margin: 0 0 4px !important;
    color: #0062af !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.1;
}

body.page-antar .row-value {
    color: #858585 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: 'bca_sans_regular' !important;
    line-height: 1.1;
}

body.page-antar .form-row.has-arrow .arrow-icon,
body.page-antar .jumlah-right-arrow {
    display: none;
}

body.page-antar .form-row.has-arrow::after,
body.page-antar .jumlah-row::after {
    content: "›";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-52%);
    color: #0092c8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
}

body.page-antar .jumlah-label-row {
    min-height: 40px !important;
    padding: 10px 0 6px !important;
}

body.page-antar .jumlah-row {
    position: relative;
    min-height: 48px !important;
    padding: 0 32px 0 0 !important;
    display: flex;
    align-items: stretch;
    background: #ffffff !important;
}

body.page-antar .rp-selector {
    width: 84px;
    min-height: 48px;
    padding: 0 0 0 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

body.page-antar .rp-selector .rp-arrow {
    display: none;
}

body.page-antar .rp-selector::after {
    content: "›";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-52%);
    color: #0092c8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
}

body.page-antar .rp-text {
    color: #0062af !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'bca_sans_regular', sans-serif !important;
}

body.page-antar .jumlah-input-area {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding-left: 12px;
}

body.page-antar .jumlah-display-text {
    color: #333333 !important;
    font-size: 13px !important;
    font-family: 'bca_sans_regular', 'BCA Sans', Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
}

body.page-antar .last-row {
    min-height: 48px;
}

body.page-antar .gray-fill {
    background: transparent !important;
}

body.page-antar .jumlah-row {
    border-top: 1px solid #cfcfcf;
}

/* Antar rekening amount/berita popups */
body.page-antar .jumlah-overlay {
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.62) !important;
    padding: 0 12px;
}

body.page-antar #jumlahModal .jumlah-dialog,
body.page-antar #beritaModal .jumlah-dialog {
    width: min(314px, 86vw) !important;
    max-width: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    border: 1px solid #5a5a5a;
    background: #050505 !important;
    box-shadow: none !important;
}

body.page-antar #beritaModal .jumlah-dialog {
    width: min(342px, 88vw) !important;
}

body.page-antar .jumlah-title {
    padding: 10px 24px 6px !important;
    color: #ffffff !important;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

body.page-antar #beritaModal .jumlah-title {
    padding: 8px 18px 5px !important;
    font-size: 15px !important;
}

body.page-antar .jumlah-input-wrap {
    padding: 3px 24px 10px !important;
}

body.page-antar #beritaModal .jumlah-input-wrap {
    padding: 2px 18px 8px !important;
}

body.page-antar .jumlah-input {
    width: 100% !important;
    height: 31px !important;
    padding: 4px 6px !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

body.page-antar #beritaModal .jumlah-input {
    height: 30px !important;
    font-size: 18px !important;
}

body.page-antar .jumlah-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 24px 8px !important;
    border-top: 0 !important;
}

body.page-antar #beritaModal .jumlah-buttons {
    padding: 0 42px 8px !important;
    gap: 6px;
}

body.page-antar .jumlah-btn-divider {
    display: none;
}

body.page-antar .jumlah-btn {
    width: 100%;
    height: 48px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #2aaeee 0%, #0873c6 50%, #0646a7 100%) !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

body.page-antar #beritaModal .jumlah-btn {
    height: 46px;
    font-size: 18px !important;
}

/* Transfer header title + compact popup buttons */
body.page-transfer .page-title,
body.page-antar .page-title,
body.page-daftar-antar .page-title,
body.page-validate-rekening .page-title,
body.page-transfer-list .page-title {
    color: #0062af !important;
    font-family: 'BCA Index Sans', Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

body.page-antar .jumlah-buttons {
    gap: 7px;
}

body.page-antar .jumlah-btn {
    height: 40px;
    border-radius: 5px !important;
    font-size: 16px !important;
}

body.page-antar #beritaModal .jumlah-btn {
    height: 39px;
    font-size: 15px !important;
}

body.page-minfo .header-text {
    color: #0062af !important;
    font-family: 'BCA Index Sans', Arial, Helvetica, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* Unified top headers */
body.page-minfo .minfo-header-title,
body.page-minfo .page-title,
body.page-transfer .page-title,
body.page-antar .page-title,
body.page-daftar-antar .page-title,
body.page-validate-rekening .page-title,
body.page-transfer-list .page-title,
body.page-mutasi-rekening .page-title,
body.page-mutasi-hasil .page-title {
    color: #0062af !important;
    font-family: 'BCA Index Sans', Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

body.page-minfo .status-indicator,
body.page-transfer .status-indicator,
body.page-antar .status-indicator,
body.page-daftar-antar .status-indicator,
body.page-validate-rekening .status-indicator,
body.page-transfer-list .indicator-green,
body.page-mutasi-rekening .indicator-green,
body.page-mutasi-hasil .indicator-green {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    border-radius: 4px !important;
    background: #8bc53f !important;
    flex: 0 0 16px;
    margin: 0 !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),
                0 0 0 1px rgba(107, 159, 36, 0.35) !important;
}

body.page-minfo .header-icons,
body.page-transfer .header-icons,
body.page-antar .header-icons,
body.page-daftar-antar .header-icons,
body.page-validate-rekening .header-icons {
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%);
    align-items: center !important;
    gap: 12px !important;
}

body.page-transfer-list .indicator-green {
    position: absolute;
    top: 50%;
    right: 32px;
    transform: translateY(-50%);
}

body.page-mutasi-rekening .header-right,
body.page-mutasi-hasil .header-right {
    align-items: center !important;
    min-width: 104px !important;
    justify-content: flex-end !important;
    gap: 6px !important;
}

/* Align m-Transfer green status dots */
body.page-transfer .header,
body.page-antar .header,
body.page-daftar-antar .header,
body.page-validate-rekening .header,
body.page-transfer-list .header-nav {
    position: relative !important;
}

body.page-minfo .header {
    position: relative !important;
}

body.page-minfo .header-icons {
    position: absolute !important;
    top: 0 !important;
    right: 8px !important;
    height: 68px !important;
    width: 104px !important;
    transform: none !important;
}

body.page-minfo .status-indicator {
    position: absolute !important;
    top: 50% !important;
    right: 74px !important;
    transform: translateY(-50%) !important;
}

body.page-transfer .header-icons,
body.page-antar .header-icons,
body.page-daftar-antar .header-icons,
body.page-validate-rekening .header-icons {
    position: absolute !important;
    top: 0 !important;
    right: 8px !important;
    height: 68px !important;
    width: 104px !important;
    transform: none !important;
}

body.page-transfer .status-indicator,
body.page-antar .status-indicator,
body.page-daftar-antar .status-indicator,
body.page-validate-rekening .status-indicator {
    position: absolute !important;
    top: 50% !important;
    right: 74px !important;
    transform: translateY(-50%) !important;
}

body.page-transfer .send-label,
body.page-antar .send-label,
body.page-daftar-antar .send-label,
body.page-validate-rekening .send-label {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
}

body.page-transfer-list .indicator-green {
    right: 74px !important;
}

body.page-antar .status-indicator,
body.page-daftar-antar .status-indicator,
body.page-validate-rekening .status-indicator,
body.page-mutasi-rekening .indicator-green {
    right: 88px !important;
}

/* Transfer confirmation dialog */
body.page-antar .confirm-overlay {
    background: rgba(0, 0, 0, 0.62) !important;
    align-items: center !important;
    justify-content: center !important;
}

body.page-antar .confirm-dialog {
    width: min(338px, 74vw) !important;
    max-width: none !important;
    min-height: 448px;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    border-radius: 0 !important;
    border: 6px solid #ffffff;
    background: #ffffff !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.36) !important;
}

body.page-antar .confirm-body {
    flex: 1;
    padding: 4px 20px 14px !important;
    background: #ffffff !important;
}

body.page-antar .confirm-body::before {
    content: "m-Transfer";
    display: block;
    margin-bottom: 24px;
    color: #0062af;
    text-align: center;
    font-family: 'BCA Index Sans', Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1;
}

body.page-antar .confirm-line,
body.page-antar .confirm-note {
    color: #0062af !important;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.22 !important;
}

body.page-antar .confirm-line.bold {
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}

body.page-antar .confirm-note {
    margin-top: 28px !important;
}

body.page-antar .confirm-buttons {
    display: flex !important;
    gap: 6px;
    padding: 6px 8px !important;
    border-top: 1px solid #cfd8e2 !important;
    background: #ffffff;
    align-items: center;
}

body.page-antar .confirm-btn-divider {
    display: none;
}

body.page-antar .confirm-btn {
    height: 48px;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #27aeee 0%, #0874c7 50%, #0648a8 100%) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

/* Transfer menu normal-weight text */
body.page-transfer,
body.page-transfer .transfer-container,
body.page-transfer .info-card,
body.page-transfer .list-item,
body.page-transfer .section-divider,
body.page-transfer .header-text {
    font-family: 'BCA Transfer Regular', Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
}

body.page-transfer .list-item,
body.page-transfer .section-divider,
body.page-transfer .popup-item,
body.page-transfer .nav-item,
body.page-transfer .nav-qris {
    font-weight: 400 !important;
}

body.page-transfer .header-text {
    font-weight: 400 !important;
}

/* Fixed status-indicator location across headers */
body.page-dashboard .header,
body.page-minfo .header,
body.page-transfer .header,
body.page-antar .header,
body.page-daftar-antar .header,
body.page-validate-rekening .header,
body.page-transfer-list .header-nav,
body.page-mutasi-rekening .header-nav,
body.page-mutasi-hasil .header-nav {
    position: relative !important;
}

body.page-dashboard .header-icons,
body.page-minfo .header-icons,
body.page-transfer .header-icons,
body.page-antar .header-icons,
body.page-daftar-antar .header-icons,
body.page-validate-rekening .header-icons,
body.page-mutasi-rekening .header-right,
body.page-mutasi-hasil .header-right {
    position: absolute !important;
    top: 0 !important;
    right: 8px !important;
    width: 104px !important;
    height: 68px !important;
    display: block !important;
    transform: none !important;
}

body.page-dashboard .status-indicator,
body.page-minfo .status-indicator,
body.page-transfer .status-indicator,
body.page-antar .status-indicator,
body.page-daftar-antar .status-indicator,
body.page-validate-rekening .status-indicator,
body.page-transfer-list .indicator-green,
body.page-mutasi-rekening .indicator-green,
body.page-mutasi-hasil .indicator-green {
    position: absolute !important;
    top: 50% !important;
    right: 84px !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    background: #8bc53f !important;
    transform: translateY(-50%) !important;
}

body.page-dashboard .header-icons img,
body.page-transfer .header-icons > div:not(.status-indicator),
body.page-minfo .header-icons > div:not(.status-indicator),
body.page-validate-rekening .header-icons > div:not(.status-indicator),
body.page-antar .send-label,
body.page-daftar-antar .send-label,
body.page-validate-rekening .send-label,
body.page-mutasi-rekening .send-label {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
}

body.page-antar .status-indicator,
body.page-daftar-antar .status-indicator,
body.page-validate-rekening .status-indicator,
body.page-mutasi-rekening .indicator-green {
    right: 54px !important;
}

/* Match m-Info header to mutasi header */
body.page-minfo .minfo-header {
    height: 68px !important;
    padding: 13px 15px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #dddddd !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body.page-minfo .minfo-back-btn {
    color: #007aff !important;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    min-width: 48px !important;
}

body.page-minfo .minfo-header-title {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: #0062af !important;
    font-family: 'BCA Index Sans', Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

body.page-minfo .header-icons {
    right: 8px !important;
    width: 104px !important;
    height: 68px !important;
}

/* Copy m-Info header style to mutasi rekening header */
body.page-mutasi-rekening .header-nav,
body.page-mutasi-hasil .header-nav {
    height: 68px !important;
    padding: 13px 15px !important;
    background: #f0f0f0 !important;
    border-bottom: 1px solid #dddddd !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
}

body.page-mutasi-rekening .back-btn,
body.page-mutasi-hasil .back-btn {
    color: #007aff !important;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    min-width: 48px !important;
}

body.page-mutasi-rekening .page-title,
body.page-mutasi-hasil .page-title {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: #0062af !important;
    font-family: 'BCA Index Sans', Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Uniform header dimensions across all pages */
body.page-dashboard .header,
body.page-minfo .header,
body.page-minfo .minfo-header,
body.page-transfer .header,
body.page-antar .header,
body.page-daftar-antar .header,
body.page-validate-rekening .header,
body.page-transfer-list .header-nav,
body.page-mutasi-rekening .header-nav,
body.page-mutasi-hasil .header-nav {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    padding: 0 16px !important;
    top: 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

body.page-dashboard .header-icons {
    width: 104px !important;
    right: 8px !important;
    height: 68px !important;
    transform: none !important;
}

body.page-dashboard .status-indicator {
    display: block !important;
    position: fixed !important;
    top: 34px !important;
    right: 92px !important;
    transform: translateY(-50%) !important;
}

body.page-antar .header-icons .status-indicator,
body.page-daftar-antar .header-icons .status-indicator,
body.page-validate-rekening .header-icons .status-indicator,
body.page-mutasi-rekening .header-right .indicator-green {
    right: 66px !important;
}

body.page-dashboard .status-indicator,
body.page-minfo .status-indicator,
body.page-transfer .status-indicator,
body.page-antar .status-indicator,
body.page-daftar-antar .status-indicator,
body.page-validate-rekening .status-indicator,
body.page-transfer-list .indicator-green,
body.page-mutasi-rekening .indicator-green,
body.page-mutasi-hasil .indicator-green {
    position: absolute !important;
    top: 50% !important;
    right: 66px !important;
    transform: translateY(-50%) !important;
}

body.page-dashboard .header-icons img {
    right: 31px !important;
}

body.page-dashboard .header {
    height: 68px !important;
    padding: 13px 15px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #dddddd !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body.page-dashboard .logout-dialog {
    width: min(300px, calc(100vw - 24px)) !important;
    min-height: 320px !important;
    background: #ffffff !important;
    border: 4px solid #e7e7e7 !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.28) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
}

body.page-dashboard .logout-title {
    padding: 0 12px 14px !important;
    color: #005b9f !important;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
}

body.page-dashboard .logout-message {
    padding: 4px 10px 0 !important;
    color: #005b9f !important;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

body.page-dashboard .logout-dialog *:not(.logout-btn) {
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif !important;
}

body.page-dashboard .logout-spacer {
    flex: 1 1 auto !important;
    min-height: 190px !important;
}

body.page-dashboard .logout-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    padding: 0 18px 8px !important;
}

body.page-dashboard .logout-btn {
    height: 44px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg, #3bc3f3 0%, #1388d0 45%, #005196 100%) !important;
    color: #ffffff !important;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

body.page-dashboard .logo-area img {
    height: 42px !important;
    margin-left: 0 !important;
}

/* m-Info normal-weight text */
body.page-minfo,
body.page-minfo .minfo-container,
body.page-minfo .info-card,
body.page-minfo .list-item,
body.page-minfo .section-divider,
body.page-minfo .modal-box,
body.page-minfo .modal-body,
body.page-minfo .popup-item,
body.page-minfo .nav-item,
body.page-minfo .nav-qris {
    font-family: 'BCA Transfer Regular', Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
}

body.page-minfo .minfo-header-title,
body.page-minfo .header-text {
    font-family: 'BCA Index Sans', Arial, Helvetica, sans-serif !important;
    font-weight: 600 !important;
}

/* m-Info/Transfer page slide */
body.page-minfo .minfo-container,
body.page-transfer .transfer-container {
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s linear;
    will-change: transform;
}

body.page-minfo .minfo-container {
    padding-bottom: 80px !important;
}

body.page-minfo.page-slide-out-left .minfo-container,
body.page-transfer.page-slide-out-left .transfer-container {
    transform: translateX(-18%);
    opacity: 0.98;
}

body.page-minfo.page-enter-from-right .minfo-container {
    animation: pageSlideInFromRight 0.22s cubic-bezier(0.32, 0.72, 0, 1) both;
}

body.page-mutasi-rekening .page-container,
body.page-antar .page-container {
    animation: pageSlideInFromRight 0.22s cubic-bezier(0.32, 0.72, 0, 1) both;
    transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s linear;
    will-change: transform;
}

body.page-mutasi-rekening.page-slide-out-left .page-container,
body.page-antar.page-slide-out-left .page-container {
    transform: translateX(-18%);
    opacity: 0.98;
}

body.page-minfo .page-transition-blackout,
body.page-mutasi-rekening .page-transition-blackout,
body.page-transfer .page-transition-blackout,
body.page-antar .page-transition-blackout {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.08s linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-minfo .page-transition-blackout.show,
body.page-mutasi-rekening .page-transition-blackout.show,
body.page-transfer .page-transition-blackout.show,
body.page-antar .page-transition-blackout.show {
    opacity: 1;
}

body.page-minfo .page-transition-card,
body.page-mutasi-rekening .page-transition-card,
body.page-transfer .page-transition-card,
body.page-antar .page-transition-card {
    width: min(300px, calc(100vw - 28px));
    min-height: 112px;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

body.page-minfo .page-transition-loader,
body.page-mutasi-rekening .page-transition-loader,
body.page-transfer .page-transition-loader,
body.page-antar .page-transition-loader {
    width: 34px;
    height: 34px;
    border: 6px solid #d7eaf6;
    border-top-color: #0b72bd;
    border-right-color: #0b72bd;
    border-radius: 50%;
    animation: pageTransitionSpin 0.7s linear infinite;
}

body.page-minfo .page-transition-text,
body.page-mutasi-rekening .page-transition-text,
body.page-transfer .page-transition-text,
body.page-antar .page-transition-text {
    color: #29374a;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
}

@keyframes pageTransitionSpin {
    to { transform: rotate(360deg); }
}

@keyframes pageSlideInFromRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-minfo .minfo-container,
    body.page-transfer .transfer-container,
    body.page-mutasi-rekening .page-container,
    body.page-antar .page-container {
        transition: none !important;
        animation: none !important;
    }
}

/* Antar rekening PIN screen */
body.page-antar .pin-screen {
    position: fixed;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    background: #f7f7f7;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
}

body.page-antar .pin-header {
    height: 68px;
    flex: 0 0 63px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: #f5f5f5;
    border-bottom: 1px solid #d7d7d7;
}

body.page-antar .pin-back {
    display: none;
}

body.page-antar .pin-header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #0062af;
    font-family: 'BCA Index Sans', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
}

body.page-antar .pin-header-dot {
    position: absolute;
    top: 50%;
    right: 74px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    transform: translateY(-50%);
    background: #8bc53f;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),
                0 0 0 1px rgba(107, 159, 36, 0.35);
}

/* Dynamic connection/loading status colors */
body.status-green .status-indicator,
body.status-green .indicator-green,
body.status-green .pin-header-dot {
    background: #8bc53f !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),
                0 0 0 1px rgba(107, 159, 36, 0.35) !important;
}

body.status-blue .status-indicator,
body.status-blue .indicator-green,
body.status-blue .pin-header-dot {
    background: #168fd6 !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),
                0 0 0 1px rgba(0, 96, 174, 0.35) !important;
}

body.status-red .status-indicator,
body.status-red .indicator-green,
body.status-red .pin-header-dot {
    background: #e53935 !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5),
                0 0 0 1px rgba(176, 0, 0, 0.35) !important;
}

/* Mutasi hasil fixed header/detail/search/footer; only the transaction list scrolls */
body.page-mutasi-hasil {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.page-mutasi-hasil .page-container {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

body.page-mutasi-hasil .header-nav,
body.page-mutasi-hasil .info-bar,
body.page-mutasi-hasil .search-wrap,
body.page-mutasi-hasil .share-wrap {
    flex: 0 0 auto !important;
}

body.page-mutasi-hasil .info-bar,
body.page-mutasi-hasil .search-wrap {
    position: relative !important;
    z-index: 20 !important;
}

body.page-mutasi-hasil .info-bar,
body.page-mutasi-hasil .info-bar * {
    font-family: 'bca_sans_regular', 'BCA Sans', Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
}

body.page-mutasi-hasil .trx-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

body.page-mutasi-hasil .trx-list::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body.page-mutasi-hasil .spacer {
    display: none !important;
}

body.page-mutasi-hasil .share-wrap {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 30 !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}

body.page-dashboard .welcome-section p {
    color: #ffffff !important;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif !important;
    font-weight: 400 !important;
}

/* m-BCA index visual match */
body.page-dashboard {
    background: #001e3a !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
}

body.page-dashboard .dashboard-container {
    background: #002744 !important;
    padding-bottom: 86px !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 430px !important;
}

body.page-dashboard .bottom-nav {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 430px !important;
}

body.page-dashboard .header {
    background: #ffffff !important;
    border-bottom: 0 !important;
}

body.page-dashboard .welcome-section {
    padding: clamp(20px, 4.6vw, 34px) clamp(24px, 6.4vw, 58px) 0 !important;
}

body.page-dashboard .welcome-section p {
    font-size: clamp(13px, 3.4vw, 18px) !important;
    line-height: 1.18 !important;
    margin-bottom: clamp(4px, 1vw, 8px) !important;
}

body.page-dashboard .welcome-section h1 {
    font-size: clamp(20px, 5.6vw, 32px) !important;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.08 !important;
}

body.page-dashboard .promo-banner {
    height: clamp(46px, 11.5vw, 82px) !important;
    margin: clamp(12px, 3vw, 18px) clamp(24px, 6.4vw, 58px) clamp(17px, 6vw, 17px) !important;
    border-radius: 9px !important;
}

body.page-dashboard .menu-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    align-content: start !important;
    column-gap: clamp(8px, 2.8vw, 34px) !important;
    row-gap: clamp(24px, 6vw, 54px) !important;
    padding: 0 clamp(8px, 2.6vw, 32px) 24px !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

body.page-dashboard .menu-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body.page-dashboard .menu-item {
    gap: clamp(3px, 0.9vw, 7px) !important;
    color: #ffffff !important;
    font-family: 'bca_sans_regular' !important;
    font-weight: 400 !important;
}

body.page-dashboard .icon-square {
    width: clamp(80px, 15vw, 110px) !important;
    height: clamp(78px, 13.5vw, 78px) !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    clip-path: none !important;
    background: linear-gradient(180deg, #047eae 0%, #076dab 52%, #04518d 100%) !important;
    box-shadow: inset 0 12px 18px rgba(255, 255, 255, 0.10),
                inset 0 -12px 18px rgba(0, 34, 88, 0.25) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cpath d='M 18 30 C 76 5 124 5 182 30 C 205 100 205 120 182 190 C 124 215 76 215 18 190 C -5 120 -5 100 18 30 Z' fill='black'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cpath d='M 18 30 C 76 5 124 5 182 30 C 205 100 205 120 182 190 C 124 215 76 215 18 190 C -5 120 -5 100 18 30 Z' fill='black'/%3E%3C/svg%3E") !important;
    -webkit-mask-size: 123% 108% !important;
    mask-size: 123% 108% !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

body.page-dashboard .menu-svg-icon {
    width: 74% !important;
    height: 74% !important;
}

body.page-dashboard .menu-item-large-icon .menu-svg-icon {
    width: 80% !important;
    height: 80% !important;
}

body.page-dashboard .pressable-menu.is-pressing .icon-square {
    background: #ffffff !important;
    box-shadow: none !important;
}

body.page-dashboard .icon-square-minfo {
    border-radius: 0 !important;
    clip-path: none !important;
}

body.page-dashboard .menu-item span {
    max-width: 118px !important;
    min-height: 0 !important;
    color: #ffffff !important;
    font-family: 'bca_sans_regular' !important;
    font-size: clamp(9px, 2.4vw, 12px) !important;
    line-height: 1.16 !important;
    letter-spacing: 0.2px !important;
    font-weight: 400 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: center !important;
    word-break: break-word !important;
}

body.page-dashboard .menu-item-keyboard span {
    max-width: 80px !important;
    white-space: normal !important;
    overflow: visible !important;
}

/* Match m-Info and m-Transfer bottom nav to m-BCA index */
body.page-minfo .bottom-nav,
body.page-transfer .bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 60px !important;
    background: #ffffff !important;
    border-top: 1px solid #d8d8d8 !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: center !important;
    padding: 0 8px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    color: #888888 !important;
    z-index: 20 !important;
}

body.page-minfo .nav-item,
body.page-minfo .nav-qris,
body.page-transfer .nav-item,
body.page-transfer .nav-qris {
    min-width: 0 !important;
    height: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: #999999 !important;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-align: center !important;
}

body.page-minfo .nav-item.active,
body.page-transfer .nav-item.active {
    color: #0068b9 !important;
}

body.page-minfo .nav-icon,
body.page-transfer .nav-icon {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
}

body.page-minfo .qris-circle,
body.page-transfer .qris-circle {
    position: absolute !important;
    top: -30px !important;
    left: 50% !important;
    width: 66px !important;
    height: 66px !important;
    border-radius: 38% !important;
    border: 4px solid #ffffff !important;
    background: linear-gradient(160deg, #3ab5e0 0%, #1480c8 40%, #0a5fa8 100%) !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

body.page-minfo .qris-btn-icon,
body.page-transfer .qris-btn-icon {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
}

body.page-minfo .qris-label,
body.page-transfer .qris-label {
    width: 40px !important;
    height: auto !important;
    padding-top: 30px !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

@media (max-width: 374px) {
    body.page-dashboard .menu-grid {
        column-gap: 7px !important;
        row-gap: 20px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.page-dashboard .icon-square {
        width: clamp(66px, 20vw, 74px) !important;
    }

    body.page-dashboard .menu-item span {
        font-size: 11px !important;
    }
}

body.page-antar .pin-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 82px;
    background: #f7f7f7;
}

body.page-antar .pin-lock {
    width: 19px;
    height: 16px;
    margin-bottom: 16px;
    position: relative;
    display: block;
    border: 2px solid #8a8a8a;
    border-radius: 3px;
    color: #777777;
}

body.page-antar .pin-lock::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -12px;
    width: 10px;
    height: 12px;
    border: 2px solid #8a8a8a;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    transform: translateX(-50%);
}

body.page-antar .pin-lock::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 5px;
    width: 3px;
    height: 6px;
    border-radius: 2px;
    background: #8a8a8a;
    transform: translateX(-50%);
}

body.page-antar .pin-instruction {
    margin: 0 0 30px;
    color: #486d9d;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 400;
}

body.page-antar .pin-dots {
    display: flex;
    gap: 23px;
}

body.page-antar .pin-dot {
    width: 21px;
    height: 21px;
    border: 2px solid #a8a8a8;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

body.page-antar .pin-dot.filled {
    background: #777777;
    border-color: #777777;
}

body.page-antar .pin-numpad {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 8px;
    padding: 0 8px 10px;
    background: #f7f7f7;
}

body.page-antar .pin-key,
body.page-antar .pin-key-del {
    width: 100%;
    height: 66px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(180deg, #f7f7f7 0%, #eeeeee 100%);
    color: #6f6f6f;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 400;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

body.page-antar .pin-key-del {
    font-size: 28px;
}

body.page-antar .backspace-icon {
    display: inline-block;
    transform: translateY(-1px);
    color: #666666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 29px;
    line-height: 1;
}

body.page-antar .pin-key:active,
body.page-antar .pin-key-del:active {
    background: #e1e1e1;
}

body.page-antar .pin-key-empty {
    background: transparent;
    box-shadow: none;
}

body.page-antar .pin-error-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 24px 24px 22vh;
    background: rgba(0, 0, 0, 0.58);
}

body.page-antar .pin-error-card {
    width: min(324px, 84vw);
    min-height: min(400px, 56vh);
    padding: 6px 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    border: 4px solid #ffffff;
    outline: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
}

body.page-antar .pin-error-message {
    padding: 2px 8px;
    color: #0062af;
    font-size: 14px;
    font-weight: 400;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    line-height: 1.25;
    text-align: center;
}

body.page-antar .pin-error-card::after {
    content: none;
}

body.page-antar .pin-error-back {
    order: 2;
    width: 100%;
    align-self: center;
    margin-top: auto;
    min-height: 46px;
    border: 0;
    border-radius: 7px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    font-family: 'BCA Sans', Arial, Helvetica, sans-serif;
    background: linear-gradient(180deg, #48b6ee 0%, #1677c7 48%, #064f98 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38),
                0 2px 5px rgba(0, 0, 0, 0.28);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.42);
    cursor: pointer;
    text-align: center;
}

body.page-antar {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body.page-antar .page-container {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.page-antar .receipt-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-antar .receipt-share::before,
body.page-antar .receipt-save::before {
    content: none;
}

body.page-antar .receipt-save::after {
    content: none;
}

/* Transfer list search icon fallback */
body.page-transfer-list .search-wrap {
    position: relative;
}

body.page-transfer-list .search-icon {
    display: none;
}

body.page-transfer-list .search-wrap::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 50%;
    width: 13px;
    height: 13px;
    border: 2px solid #777777;
    border-radius: 50%;
    transform: translateY(-58%);
    pointer-events: none;
}

body.page-transfer-list .search-wrap::before {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 8px;
    height: 2px;
    border-radius: 1px;
    background: #777777;
    transform: translateY(6px) rotate(45deg);
    pointer-events: none;
}

body.page-transfer-list .search-input {
    padding-right: 28px;
}

@media (max-width: 374px) {
    body.page-index .app-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    body.page-index .logo-container {
        height: 128px;
        margin-top: 18px;
    }

    body.page-index .app-container .menu-item {
        min-height: 70px;
        grid-template-columns: 66px 1fr;
        gap: 12px;
    }

    body.page-index .icon-box {
        width: 56px;
        height: 56px;
    }

    body.page-index .icon-box img {
        width: 49px;
        height: 49px;
    }

    body.page-index .menu-text {
        font-size: 20px;
    }

    body.page-index .btn-action {
        min-height: 44px;
        font-size: 18px;
    }

    body.page-index .footer {
        font-size: 12px;
    }
}

body.page-dashboard .menu-grid .menu-item,
body.page-dashboard .menu-grid .menu-item span {
    font-family: 'bca_sans_regular' !important;
    font-weight: 400 !important;
}

body.page-dashboard .menu-grid .menu-item span {
    letter-spacing: 0.55px !important;
}

/* Locked m-Info / m-Transfer viewport: only the white info card scrolls */
html:has(body.page-minfo),
html:has(body.page-transfer) {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
}

body.page-minfo,
body.page-transfer {
    width: 100%;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body.page-minfo .minfo-container,
body.page-transfer .transfer-container {
    width: 100%;
    max-width: 430px;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

body.page-minfo .header,
body.page-transfer .header {
    flex: 0 0 68px !important;
    position: relative !important;
}

body.page-minfo .content-wrapper,
body.page-transfer .content-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    padding: clamp(12px, 4vw, 20px) clamp(10px, 3.6vw, 14px) 12px !important;
}

body.page-minfo .info-card,
body.page-transfer .info-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: none !important;
}

body.page-minfo .list-item,
body.page-transfer .list-item {
    min-height: clamp(44px, 7.1vh, 50px) !important;
    padding-left: clamp(14px, 4.2vw, 18px) !important;
    padding-right: clamp(14px, 4.2vw, 18px) !important;
    font-size: clamp(13px, 3.9vw, 15px) !important;
}

body.page-minfo .section-divider,
body.page-transfer .section-divider {
    padding: clamp(6px, 1.7vh, 7px) clamp(14px, 4.2vw, 16px) !important;
    font-size: clamp(12px, 3.6vw, 14px) !important;
}

body.page-minfo .card-header,
body.page-transfer .card-header {
    height: clamp(68px, 11vh, 80px) !important;
    min-height: clamp(68px, 11vh, 80px) !important;
}

body.page-minfo .icon-sq,
body.page-transfer .icon-sq {
    width: clamp(60px, 17vw, 72px) !important;
    height: clamp(58px, 16.5vw, 70px) !important;
    flex: 0 0 clamp(60px, 17vw, 72px) !important;
}

body.page-minfo .header-text,
body.page-transfer .header-text {
    min-width: 0 !important;
    font-size: clamp(17px, 5vw, 20px) !important;
    line-height: 1.15 !important;
}

body.page-minfo .bottom-nav,
body.page-transfer .bottom-nav {
    height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-height: 620px) {
    body.page-minfo .header,
    body.page-transfer .header {
        flex-basis: 58px !important;
        height: 58px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    body.page-minfo .content-wrapper,
    body.page-transfer .content-wrapper {
        padding-top: 10px !important;
        padding-bottom: 8px !important;
    }

    body.page-minfo .bottom-nav,
    body.page-transfer .bottom-nav {
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        min-height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.page-minfo .nav-item,
    body.page-minfo .nav-qris,
    body.page-transfer .nav-item,
    body.page-transfer .nav-qris {
        height: 52px !important;
    }
}

/* Final mobile lock: m-Info and m-Transfer must never page-scroll. */
html:has(body.page-minfo),
html:has(body.page-transfer),
body.page-minfo,
body.page-transfer {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    touch-action: none !important;
}

body.page-minfo .minfo-container,
body.page-transfer .transfer-container {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    transform: none !important;
    animation: none !important;
}

body.page-minfo .content-wrapper,
body.page-transfer .content-wrapper {
    min-height: 0 !important;
    overflow: hidden !important;
    touch-action: none !important;
}

body.page-minfo .info-card,
body.page-transfer .info-card {
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: pan-y !important;
    overscroll-behavior: none !important;
}

/* slide/enter transitions handled by earlier rules — no override needed */

@media (max-width: 480px) {
    body.page-dashboard .menu-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        column-gap: 8px !important;
        row-gap: 26px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.page-dashboard .menu-grid .menu-item {
        min-width: 0 !important;
        gap: 5px !important;
    }

    body.page-dashboard .menu-grid .icon-square {
        width: min(20vw, 84px) !important;
        height: min(20vw, 84px) !important;
    }

    body.page-dashboard .menu-grid .menu-item span {
        width: 100% !important;
        max-width: 100% !important;
        font-family: 'bca_sans_regular' !important;
        font-size: clamp(8px, 2.55vw, 10px) !important;
        line-height: 1.08 !important;
        letter-spacing: 0.08px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        text-align: center !important;
    }
}