/* Design tokens, reset, layout, header/nav and the global progress indicator */
/* Palette follows the idbibank theme: navy, green, orange */
:root {
    color-scheme: light;
    --bg: #f4f7fa;
    --ink: #003366;
    --tx: #1f2d3d;
    --mut: #5f6f82;
    --sf: #fff;
    --ac: #f58425;
    --chili: #b3261e;
    --ok: #00836c;
    --ln: #e1e7ee;
    --r: 14px;
    --tap: 44px;
    --t: 180ms;
    --paper: #f4f7fa;
    --line-soft: #e8edf3;
    --forest: #003366;
    --lime: #d7efe9;
    --peach: #fde5d0;
    --shadow-soft: 0 12px 32px rgb(0 51 102 / 8%)
}

* {
    box-sizing: border-box;
    margin: 0
}

html {
    -webkit-text-size-adjust: 100%
}

body {
    min-width: 320px;
    font: 16px/1.55 Hind, system-ui, sans-serif;
    background: var(--paper);
    color: var(--tx);
    padding-bottom: calc(76px + env(safe-area-inset-bottom))
}

a {
    color: inherit
}

button,
input,
select,
textarea {
    font: inherit
}

button {
    cursor: pointer
}

:focus-visible {
    outline: 3px solid #00836c;
    outline-offset: 2px
}

.skip-link {
    position: fixed;
    z-index: 1100;
    top: 8px;
    left: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px
}

h1 {
    font-size: clamp(26px, 4vw, 34px);
    line-height: 1.2;
    margin: 26px 0 6px;
    color: var(--ink)
}

h2 {
    font-size: 18px;
    margin: 22px 0 10px;
    color: var(--ink)
}

.meta {
    color: var(--mut);
    font-size: 14px
}

.ic {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
    vertical-align: -4px
}

.top {
    background: rgb(255 255 255 / 92%);
    color: var(--ink);
    padding: calc(12px + env(safe-area-inset-top)) 0 16px;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid rgb(0 51 102 / 8%);
    backdrop-filter: blur(16px);
}

.brand {
    font-weight: 600;
    font-size: 23px;
    letter-spacing: -0.5px
}

.brand b {
    color: #e06f0a
}

.sub {
    opacity: .85;
    font-size: 14px
}

.search {
    display: flex;
    gap: 8px;
    margin-top: 12px
}

#searchForm[hidden],
.bottom[hidden] {
    display: none
}

.search input {
    flex: 1;
    border: 0;
    border: 1px solid var(--ln);
    border-radius: 12px;
    padding: 0 14px;
    min-height: var(--tap);
    box-shadow: 0 2px 8px rgb(0 51 102 / 4%);
}

.bottom {
    position: fixed;
    inset: auto 0 0;
    background: #fff;
    border-top: 1px solid var(--ln);
    display: flex;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 10;
    box-shadow: 0 -4px 14px rgb(0 51 102 / 4%)
}

.bottom a {
    flex: 1;
    min-height: 56px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    text-decoration: none;
    font-size: 13px;
    color: var(--mut);
    transition: color var(--t)
}

.bottom a.on {
    color: var(--ink);
    font-weight: 700
}

.bottom .ic {
    width: 22px;
    height: 22px
}

/* Full-screen loading state blocks pointer and keyboard interaction while work is in progress. */
#loader {
    position: fixed;
    z-index: 1000;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(244 247 250 / 94%);
    color: var(--ink);
    pointer-events: all;
    place-items: center;
    backdrop-filter: blur(10px);
}

#loader.on {
    display: grid
}

#loader .loader-card {
    display: grid;
    justify-items: center;
    gap: 3px;
    width: min(92vw, 520px);
    padding: 36px 24px;
    border: 0;
    border-radius: 24px;
    background: transparent;
    box-shadow: none;
}

.loader-hindi { position: relative; display: grid; justify-items: center; width: min(86vw, 420px); padding-top: 44px; color: #003366; }
.loader-typing { display: flex; align-items: baseline; gap: .13em; font-family: Hind, system-ui, sans-serif; font-size: clamp(48px, 12vw, 76px); font-weight: 700; line-height: 1.2; animation: loader-heart-pulse 1.08s ease-in-out infinite; }
.loader-word, .loader-exclamation { opacity: 0; animation: loader-type-in 2.4s infinite; }
.loader-delay-1 { animation-delay: .16s; }
.loader-delay-2 { animation-delay: .32s; }
.loader-delay-3 { animation-delay: .48s; }
.loader-delay-4 { animation-delay: .64s; }
.loader-exclamation { color: #e06f0a; }
.loader-heartbeat { position: absolute; top: 0; width: 144px; height: 42px; overflow: visible; }
.loader-heartbeat path { fill: none; stroke: #e06f0a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 240; stroke-dashoffset: 240; animation: loader-ecg 1.08s ease-in-out infinite; }
.loader-copy { margin-top: -4px; color: var(--mut); font-size: 14px; letter-spacing: .02em; }
@keyframes loader-type-in {
    0%, 8% { opacity: 0; transform: translateY(5px); }
    14%, 76% { opacity: 1; transform: translateY(0); }
    84%, 100% { opacity: 0; transform: translateY(-2px); }
}
@keyframes loader-heart-pulse {
    0%, 11%, 22%, 100% { transform: scale(1); }
    6%, 17% { transform: scale(1.07); }
}
@keyframes loader-ecg {
    0%, 6% { stroke-dashoffset: 240; opacity: .25; }
    18%, 58% { stroke-dashoffset: 0; opacity: 1; }
    80%, 100% { stroke-dashoffset: -240; opacity: .35; }
}

@media(prefers-reduced-motion:reduce) {
    .loader-word, .loader-exclamation { opacity: 1; animation: none !important; }
    .loader-typing { animation: none !important; }
    .loader-heartbeat path { stroke-dashoffset: 0; animation: none !important; }

    * {
        transition: none !important;
        scroll-behavior: auto !important
    }
}