/* ==========================================================================
   PMMY Portal account page.
   Palette matches the site: maroon #b1322c / #bb2c30, gold #fbc805 / #ffd102
   ========================================================================== */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #3a3a3a;
    background: #f2efe8;
}

a { color: #b1322c; }

/* ---------- top bar ---------- */

.pf-bar {
    background: #b1322c;
    color: #fff;
    padding: 12px 0;
    border-bottom: 4px solid #fbc805;
}

.pf-wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 18px;
}

.pf-bar .pf-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pf-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    margin-right: auto;
}

/* images/logo.png is 260x85 and already sits on white, so the plate just
   gives it breathing room against the maroon bar. */
.pf-brand img { height: 38px; width: auto; max-width: 100%; display: block;
                background: #fff; padding: 4px 9px; border-radius: 4px; }

.pf-brand span { font-size: 17px; font-weight: bold; letter-spacing: .3px; }
.pf-brand small { display: block; font-size: 11px; color: #f6d9d7; font-weight: normal; }

.pf-bar a.pf-link { color: #ffe9a8; text-decoration: none; font-size: 13px; }
.pf-bar a.pf-link:hover { color: #fff; text-decoration: underline; }

.pf-logout {
    background: #fbc805;
    color: #6d1f1b;
    border: 0;
    font-weight: bold;
    font-size: 13px;
    padding: 8px 18px;
    border-radius: 3px;
    cursor: pointer;
}

.pf-logout:hover { background: #ffd102; }
.pf-logout:disabled { opacity: .6; cursor: default; }

/* ---------- page ---------- */

.pf-page { padding: 26px 0 60px; }

.pf-hello { margin: 0 0 4px; font-size: 24px; color: #8a2b26; }
.pf-sub   { margin: 0 0 24px; color: #7b7b7b; font-size: 13px; }

.pf-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    gap: 22px;
    align-items: start;
}

@media (max-width: 820px) {
    .pf-grid { grid-template-columns: minmax(0, 1fr); }
}

.pf-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.pf-card > h2 {
    margin: 0;
    background: #faf7f1;
    border-bottom: 1px solid #ece6da;
    padding: 13px 20px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #8a2b26;
}

.pf-card-body { padding: 18px 20px 22px; }

/* ---------- account summary ---------- */

.pf-avatar-wrap {
    position: relative;
    width: 96px;
    margin: 0 auto 10px;
}

.pf-avatar {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #b1322c;
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #e4dccc;
}

/* The stored picture is already circular; the radius keeps older or
   hand-placed files tidy too. */
.pf-avatar-img {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.pf-avatar.has-photo .pf-avatar-img     { display: block; }
.pf-avatar.has-photo .pf-avatar-initial { display: none; }

.pf-avatar-btn {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #fbc805;
    color: #6d1f1b;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

.pf-avatar-btn:hover { background: #ffd102; }

.pf-avatar-actions {
    text-align: center;
    margin: 0 0 16px;
    font-size: 12px;
}

.pf-linkbtn {
    background: none;
    border: 0;
    color: #b1322c;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    text-decoration: underline;
}

.pf-linkbtn:hover  { color: #bb2c30; }
.pf-linkbtn.pf-danger { color: #98918a; }
.pf-linkbtn.pf-danger:hover { color: #c0392b; }
.pf-linkbtn[hidden] { display: none; }

.pf-name  { text-align: center; font-size: 17px; font-weight: bold; margin: 0 0 2px; }
.pf-email { text-align: center; color: #8b8b8b; font-size: 12.5px; margin: 0 0 18px;
            word-break: break-all; }

.pf-facts { list-style: none; margin: 0; padding: 0; }

.pf-facts li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-top: 1px dashed #ece6da;
    font-size: 13px;
}

.pf-facts li:first-child { border-top: 0; }
.pf-facts .k { color: #8b8b8b; flex: 0 0 auto; }
.pf-facts .v { font-weight: bold; text-align: right; word-break: break-word; }

.pf-badge {
    display: inline-block;
    background: #eaf6ec;
    color: #2e7d32;
    border-radius: 10px;
    padding: 1px 10px;
    font-size: 11.5px;
    font-weight: bold;
    text-transform: capitalize;
}

/* A blocked or expired card must not wear the same green as a working one. */
.pf-badge.is-off { background: #fdecea; color: #a3271c; }

/* ---------- form ---------- */

.pf-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

@media (max-width: 560px) {
    .pf-row { grid-template-columns: minmax(0, 1fr); }
}

.pf-field { margin-bottom: 14px; }
.pf-field.pf-full { grid-column: 1 / -1; }

.pf-field label {
    display: block;
    font-size: 12.5px;
    font-weight: bold;
    color: #55504a;
    margin-bottom: 5px;
}

.pf-field label .req { color: #b1322c; }

.pf-field input,
.pf-field select,
.pf-field textarea {
    width: 100%;
    border: 1px solid #d6cfc2;
    border-radius: 3px;
    padding: 8px 10px;
    font-size: 13.5px;
    font-family: inherit;
    color: #3a3a3a;
    background: #fff;
}

.pf-field textarea { resize: vertical; min-height: 62px; }

.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus {
    outline: 0;
    border-color: #b1322c;
    box-shadow: 0 0 0 2px rgba(177, 50, 44, .13);
}

.pf-field input[readonly] { background: #f4f1ea; color: #8b8b8b; }
.pf-field input.has-error,
.pf-field select.has-error { border-color: #c0392b; background: #fdf4f3; }

.pf-err { display: none; color: #c0392b; font-size: 11.5px; margin-top: 4px; }
.pf-err.is-shown { display: block; }

.pf-hint { color: #9a9a9a; font-size: 11.5px; margin: -8px 0 14px; }

.pf-save {
    background: #b1322c;
    color: #fff;
    border: 0;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: .5px;
    padding: 11px 30px;
    border-radius: 3px;
    cursor: pointer;
}

.pf-save:hover  { background: #bb2c30; }
.pf-save:disabled { opacity: .6; cursor: default; }

/* ---------- messages ---------- */

.pf-msg {
    display: none;
    padding: 10px 14px;
    border-radius: 3px;
    font-size: 13px;
    margin-bottom: 16px;
}

.pf-msg.is-shown  { display: block; }
.pf-msg.is-success { background: #eaf6ec; border-left: 4px solid #2e7d32; color: #24632a; }
.pf-msg.is-error   { background: #fdecea; border-left: 4px solid #c0392b; color: #a3271c; }
.pf-msg.is-note    { background: #fdf6e3; border-left: 4px solid #d8a800; color: #7a5c00; }

.pf-loading { text-align: center; padding: 70px 20px; color: #8b8b8b; }

/* The profile-picture cropper styles now live in Content/avatar-cropper.css,
   shared with the admin console. */

/* ==========================================================================
   Wallet
   ========================================================================== */

.pf-wallet { position: relative; flex: 0 0 auto; }

.pf-wallet-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 233, 168, .45);
    color: #fff;
    padding: 7px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

.pf-wallet-btn:hover      { background: rgba(255, 255, 255, .22); }
.pf-wallet-btn svg        { color: #fbc805; flex: 0 0 auto; }
.pf-wallet-amt            { font-weight: bold; letter-spacing: .2px; white-space: nowrap; }
.pf-wallet-amt .rs        { margin-right: 1px; }

.pf-wallet-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 290px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    z-index: 200;
    overflow: hidden;
    color: #3a3a3a;
}

.pf-wallet-panel[hidden] { display: none; }

/* little arrow pointing back at the button */
.pf-wallet-panel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 24px;
    width: 12px;
    height: 12px;
    background: #faf7f1;
    transform: rotate(45deg);
}

.pf-wallet-head {
    position: relative;
    background: #faf7f1;
    border-bottom: 1px solid #ece6da;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    color: #8b8b8b;
}

.pf-wallet-head strong { font-size: 19px; color: #8a2b26; }

.pf-wallet-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }

.pf-wallet-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #f3efe7;
    font-size: 12.5px;
}

.pf-wallet-list li:last-child { border-bottom: 0; }
.pf-wallet-list .desc  { color: #55504a; }
.pf-wallet-list .when  { display: block; color: #a5a098; font-size: 11px; margin-top: 2px; }
.pf-wallet-list .amt   { font-weight: bold; white-space: nowrap; }
.pf-wallet-list .credit { color: #2e7d32; }
.pf-wallet-list .debit  { color: #c0392b; }

.pf-wallet-empty { margin: 0; padding: 22px 16px; text-align: center;
                   color: #a5a098; font-size: 12.5px; }
.pf-wallet-empty[hidden] { display: none; }

@media (max-width: 560px) {
    .pf-wallet-panel { width: 260px; right: -40px; }
}

/* ==========================================================================
   KYC
   ========================================================================== */

.pf-card-wide { grid-column: 1 / -1; }

/* The badge inside carries its own colour and icon - see kyc-status.css.
   This only positions it. */
.pf-card > h2 .kyc-status {
    float: right;
    margin-top: -2px;
}

.kyc-intro { margin: 0 0 18px; font-size: 12.5px; color: #7b7b7b; }

/* ---------- number fields ---------- */

.kyc-field { position: relative; }

.kyc-field input {
    font-family: "Consolas", "Courier New", monospace;
    letter-spacing: 1.5px;
    font-size: 15px;
    padding-right: 34px;
}

.kyc-field input.is-valid { border-color: #2e7d32; background: #f7fdf8; }

.kyc-tick {
    position: absolute;
    right: 11px;
    top: 31px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    color: #fff;
    display: none;
}

.kyc-tick.is-ok  { display: block; background: #2e7d32; }
.kyc-tick.is-bad { display: block; background: #c0392b; }

.kyc-hint { display: block; color: #a5a098; font-size: 11.5px; margin-top: 4px; }
.kyc-hint.is-good { color: #2e7d32; }

/* ---------- document tiles ---------- */

.kyc-docs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 6px 0 20px;
}

@media (max-width: 620px) {
    .kyc-docs { grid-template-columns: minmax(0, 1fr); }
}

.kyc-doc {
    border: 1px solid #ece6da;
    border-radius: 5px;
    padding: 12px 14px 8px;
    background: #fcfaf6;
}

.kyc-doc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
}

.kyc-doc-title { font-size: 13px; font-weight: bold; color: #55504a; }

/* Holds a .ksd badge, which brings its own colour and icon. */
.kyc-doc-state { line-height: 1; }

.kyc-drop {
    position: relative;
    height: 132px;
    border: 2px dashed #d6cfc2;
    border-radius: 4px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
}

.kyc-drop:hover,
.kyc-drop:focus,
.kyc-drop.is-over {
    border-color: #b1322c;
    background: #fdf8f7;
    outline: none;
}

.kyc-drop.is-busy { opacity: .55; pointer-events: none; }

.kyc-drop-inner        { color: #a5a098; padding: 8px; }
.kyc-drop-inner svg    { color: #c9beab; display: block; margin: 0 auto 6px; }
.kyc-drop-inner strong { display: block; font-size: 12.5px; color: #8a8377; }
.kyc-drop-inner small  { display: block; font-size: 11px; margin-top: 3px; }
.kyc-drop-inner[hidden] { display: none; }

.kyc-preview { position: absolute; inset: 0; }
.kyc-preview[hidden] { display: none; }
.kyc-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kyc-pdf {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f1ea;
    color: #b1322c;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
}

.kyc-pdf[hidden] { display: none; }

.kyc-doc-actions { margin: 8px 0 0; text-align: center; font-size: 12px; }
.kyc-doc-actions a.pf-linkbtn { text-decoration: underline; cursor: pointer; }
.kyc-doc-actions [hidden] { display: none; }

/* ---------- KYC locked / rejected states ---------- */

.kyc-lock {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f4f6fa;
    border-left: 4px solid #5a6b8c;
    color: #46536b;
    padding: 11px 15px;
    border-radius: 3px;
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 18px;
}

.kyc-lock[hidden] { display: none; }
.kyc-lock svg     { flex: 0 0 auto; margin-top: 1px; color: #5a6b8c; }

.kyc-rejected {
    background: #fdecea;
    border-left: 4px solid #c0392b;
    color: #a3271c;
    padding: 11px 15px;
    border-radius: 3px;
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 18px;
}

.kyc-rejected[hidden] { display: none; }
.kyc-rejected strong  { display: block; margin-bottom: 2px; }

/* A locked record is read-only: the values still show, but nothing about
   them invites interaction. */
.kyc-locked .kyc-field input {
    background: #f4f1ea;
    color: #55504a;
    border-color: #e2dbcd;
    cursor: default;
}

.kyc-locked .kyc-field input:focus { box-shadow: none; border-color: #e2dbcd; }
.kyc-locked .kyc-tick.is-ok        { background: #8d9ab3; }
.kyc-locked .kyc-hint              { color: #a5a098; }

.kyc-locked .kyc-drop {
    cursor: default;
    border-style: solid;
    border-color: #e2dbcd;
    background: #faf8f4;
}

.kyc-locked .kyc-drop:hover,
.kyc-locked .kyc-drop:focus { border-color: #e2dbcd; background: #faf8f4; }

.kyc-locked .kyc-drop-inner strong { color: #a5a098; }

/* only "View" survives while locked */
.kyc-locked .kyc-doc-actions button { display: none; }

.kyc-locked #kycSave { display: none; }

/* ---------- submit note ---------- */

.kyc-submit-note {
    display: inline-block;
    margin: 0 0 0 14px;
    font-size: 11.5px;
    color: #a5a098;
}

.kyc-submit-note[hidden] { display: none; }

/* ==========================================================================
   Confirm dialog
   ========================================================================== */

.cf-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 12, 12, .68);
    z-index: 100000;
    display: none;
    overflow-y: auto;
}

.cf-overlay.is-open { display: block; }

.cf-dialog {
    background: #fff;
    width: 100%;
    max-width: 420px;
    margin: 12vh auto 40px;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    padding: 26px 26px 20px;
    text-align: center;
}

.cf-icon {
    width: 46px;
    height: 46px;
    line-height: 46px;
    border-radius: 50%;
    background: #fff4d6;
    color: #b1322c;
    font-size: 26px;
    font-weight: bold;
    margin: 0 auto 14px;
}

.cf-dialog h3 {
    margin: 0 0 10px;
    font-size: 17px;
    color: #8a2b26;
}

.cf-body {
    font-size: 13px;
    line-height: 1.6;
    color: #55504a;
    margin-bottom: 20px;
}

.cf-body .cf-values {
    list-style: none;
    margin: 14px 0 0;
    padding: 12px 14px;
    background: #faf7f1;
    border-radius: 4px;
    text-align: left;
}

.cf-body .cf-values li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 12.5px;
}

.cf-body .cf-values .k { color: #8b8b8b; }
.cf-body .cf-values .v { font-weight: bold; font-family: "Consolas", "Courier New", monospace; }

.cf-warn {
    display: block;
    margin-top: 12px;
    color: #a3271c;
    font-size: 12.5px;
}

.cf-foot {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.cf-no, .cf-yes {
    flex: 1 1 0;
    padding: 11px 10px;
    border-radius: 3px;
    font-size: 13px;
    cursor: pointer;
    font-weight: bold;
}

.cf-no {
    background: #f2f0eb;
    border: 1px solid #d6cfc2;
    color: #55504a;
}

.cf-no:hover { background: #e9e5dc; }

.cf-yes {
    background: #b1322c;
    border: 0;
    color: #fff;
}

.cf-yes:hover { background: #bb2c30; }
.cf-yes:disabled, .cf-no:disabled { opacity: .6; cursor: default; }

/* ==========================================================================
   Notification bell
   ========================================================================== */

.pf-bell { position: relative; flex: 0 0 auto; }

.pf-bell-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 233, 168, .45);
    color: #fff;
    cursor: pointer;
    padding: 0;
}

.pf-bell-btn:hover { background: rgba(255, 255, 255, .22); }

.pf-bell-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    background: #fbc805;
    color: #6d1f1b;
    font-size: 9.5px;
    font-weight: bold;
    line-height: 15px;
    text-align: center;
    border: 1.5px solid #b1322c;
}

.pf-bell-dot[hidden] { display: none; }

.pf-bell-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    z-index: 200;
    overflow: hidden;
    color: #3a3a3a;
}

.pf-bell-panel[hidden] { display: none; }

.pf-bell-panel::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 12px;
    width: 12px;
    height: 12px;
    background: #faf7f1;
    transform: rotate(45deg);
}

.pf-bell-head {
    position: relative;
    background: #faf7f1;
    border-bottom: 1px solid #ece6da;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    color: #8a2b26;
}

.pf-bell-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }

.pf-bell-list li {
    padding: 10px 14px;
    border-bottom: 1px solid #f3efe7;
    font-size: 12.5px;
    cursor: default;
}

.pf-bell-list li:last-child { border-bottom: 0; }
.pf-bell-list li.is-unread  { background: #fffaf0; }

.pf-bell-list .t { display: block; font-weight: bold; color: #55504a; margin-bottom: 2px; }
.pf-bell-list .b { display: block; color: #7b7b7b; line-height: 1.45; }
.pf-bell-list .w { display: block; color: #a5a098; font-size: 11px; margin-top: 3px; }

.pf-bell-empty { margin: 0; padding: 24px 14px; text-align: center;
                 color: #a5a098; font-size: 12.5px; }
.pf-bell-empty[hidden] { display: none; }

@media (max-width: 560px) {
    .pf-bell-panel { width: 280px; right: -60px; }
}

/* ==========================================================================
   Loan application
   ========================================================================== */

.pf-card > h2 .loan-status { float: right; margin-top: -2px; }

.loan-gate {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f4f6fa;
    border-left: 4px solid #5a6b8c;
    color: #46536b;
    padding: 11px 15px;
    border-radius: 3px;
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 18px;
}

.loan-gate[hidden] { display: none; }
.loan-gate svg { flex: 0 0 auto; margin-top: 1px; }

.loan-lock {
    background: #f4f6fa;
    border-left: 4px solid #5a6b8c;
    color: #46536b;
    padding: 11px 15px;
    border-radius: 3px;
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 18px;
}

.loan-lock[hidden] { display: none; }

.loan-ref {
    margin: 0 0 16px;
    font-size: 12.5px;
    color: #7b7b7b;
}

.loan-ref[hidden] { display: none; }
.loan-ref strong { font-family: "Consolas", "Courier New", monospace;
                   font-size: 14px; color: #8a2b26; letter-spacing: .5px; }

.loan-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.loan-actions [hidden] { display: none; }
.loan-submit { background: #2e7d32; }
.loan-submit:hover { background: #256628; }

/* a locked application is read-only */
.loan-locked .pf-field input,
.loan-locked .pf-field select,
.loan-locked .pf-field textarea {
    background: #f4f1ea;
    color: #55504a;
    border-color: #e2dbcd;
    cursor: default;
}

.loan-locked .pf-field input:focus,
.loan-locked .pf-field select:focus,
.loan-locked .pf-field textarea:focus { box-shadow: none; border-color: #e2dbcd; }

.loan-locked .loan-actions { display: none; }

/* ---------- progress trail ---------- */

.loan-history, .loan-past { margin-top: 24px; border-top: 1px solid #ece6da; padding-top: 16px; }
.loan-history[hidden], .loan-past[hidden] { display: none; }

.loan-history h3, .loan-past h3 {
    margin: 0 0 12px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #a5a098;
}

.loan-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; }

.loan-timeline::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background: #ece6da;
}

.loan-timeline li { position: relative; padding: 0 0 14px 4px; font-size: 12.5px; }

.loan-timeline li::before {
    content: "";
    position: absolute;
    left: -18px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d6cfc2;
    border: 2px solid #fff;
}

.loan-timeline li:last-child::before { background: #b1322c; }
.loan-timeline .step { font-weight: bold; color: #55504a; }
.loan-timeline .when { color: #a5a098; font-size: 11.5px; }
.loan-timeline .note { display: block; color: #7b7b7b; margin-top: 2px; }

.loan-past-list { list-style: none; margin: 0; padding: 0; }

.loan-past-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed #ece6da;
    font-size: 12.5px;
    flex-wrap: wrap;
}

.loan-past-list li:last-child { border-bottom: 0; }
.loan-past-list .ref { font-family: "Consolas", "Courier New", monospace; color: #8a2b26; }
.loan-past-list .amt { font-weight: bold; }

/* ==========================================================================
   MUDRA debit-cum-ATM card
   --------------------------------------------------------------------------
   The plate is the scheme's own blank artwork with the details laid over it,
   positioned as percentages of the image so the whole thing scales with the
   column. Font sizes are given in cqw against the plate's own width, with a
   px value first for anything that does not do container queries.
   ========================================================================== */

.pf-plate {
    position: relative;
    width: 100%;
    max-width: 478px;               /* the artwork's own width */
    margin: 0 auto 18px;
    container-type: inline-size;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(120, 60, 20, .28);
    overflow: hidden;
}

.pf-plate img { display: block; width: 100%; height: auto; }

/* Embossed print: a dark face with a light edge below it, the way raised
   digits catch the light on a real card. */
.pf-plate span {
    position: absolute;
    color: #4a3520;
    font-family: "OCR A Extended", "Consolas", "Courier New", monospace;
    font-weight: bold;
    letter-spacing: .04em;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

.pf-plate .num {
    left: 11.3%;
    top: 55.5%;
    font-size: 26px;
    font-size: 5.4cqw;
    letter-spacing: .06em;
}

.pf-plate .from { left: 21.5%; top: 71.5%; font-size: 15px; font-size: 3.1cqw; }
.pf-plate .upto { left: 47.5%; top: 71.5%; font-size: 15px; font-size: 3.1cqw; }
.pf-plate .name { left: 11.3%; top: 85.5%; font-size: 15px; font-size: 3.1cqw; }

/* A card that cannot be used says so across the plate rather than looking
   exactly like one that can. */
.pf-plate.is-dead img { filter: grayscale(.65) brightness(.92); }

.pf-plate .stamp {
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%) rotate(-8deg);
    font-family: inherit;
    letter-spacing: .18em;
    font-size: 22px;
    font-size: 4.6cqw;
    color: #b3271b;
    border: 3px solid #b3271b;
    border-radius: 6px;
    padding: 4px 14px;
    background: rgba(255, 255, 255, .72);
    text-shadow: none;
}

.pf-card-none {
    margin: 0;
    padding: 26px 16px;
    text-align: center;
    color: #8b8b8b;
    font-size: 13px;
    background: #faf8f3;
    border: 1px dashed #e3ddd0;
    border-radius: 6px;
}

/* ---------- card balance and controls ---------- */

.pf-card-balance {
    max-width: 478px;
    margin: 0 auto 16px;
    padding: 12px 16px;
    background: #faf7f1;
    border: 1px solid #ece6da;
    border-radius: 6px;
    text-align: center;
}

.pf-card-balance .k { display: block; color: #8b8b8b; font-size: 12px; }
.pf-card-balance strong { display: block; font-size: 26px; color: #8a2b26; line-height: 1.25; }
.pf-card-balance small { color: #a5a098; font-size: 11.5px; }

.pf-card-controls {
    max-width: 478px;
    margin: 0 auto 18px;
    padding: 12px 16px;
    border: 1px solid #ece6da;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pf-card-controls .t { flex: 1 1 220px; font-weight: bold; font-size: 13px; color: #55504a; }
.pf-card-controls .t small { display: block; font-weight: normal; color: #8b8b8b;
                             font-size: 11.5px; line-height: 1.45; margin-top: 2px; }
.pf-card-controls .pf-err { flex: 1 1 100%; margin: 0; }

/* An on/off switch rather than a button: the state is the point, not the verb. */
.pf-switch {
    flex: 0 0 auto;
    width: 54px;
    height: 30px;
    border: 0;
    border-radius: 15px;
    background: #c9c2b6;
    padding: 3px;
    cursor: pointer;
    transition: background .15s ease-in;
}

.pf-switch.is-on { background: #2e7d32; }
.pf-switch:disabled { opacity: .6; cursor: default; }

.pf-switch .knob {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .15s ease-in;
}

.pf-switch.is-on .knob { transform: translateX(24px); }

.pf-card-note {
    max-width: 478px;
    margin: 0 auto 18px;
    padding: 10px 14px;
    background: #fdecea;
    border-left: 4px solid #c0392b;
    border-radius: 3px;
    color: #a3271c;
    font-size: 12.5px;
}

/* ==========================================================================
   App shell: side panel + one view at a time
   --------------------------------------------------------------------------
   Wide screens get a rail down the left. Narrow ones get the same list as a
   scrolling tab strip along the top, which is how a phone app would carry
   it - no second markup, only a different flex direction.
   ========================================================================== */

.pf-app {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.pf-side {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .08);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: 14px;
}

.pf-side button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: 0;
    border-radius: 4px;
    padding: 10px 12px;
    font: inherit;
    font-size: 13.5px;
    color: #55504a;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.pf-side button:hover { background: #faf7f1; color: #8a2b26; }

.pf-side button.is-current {
    background: #b1322c;
    color: #fff;
    font-weight: bold;
}

.pf-side button svg { flex: 0 0 auto; width: 18px; height: 18px; }

/* A count or a warning dot riding on a tab, e.g. an unverified bank account. */
.pf-side .tag {
    margin-left: auto;
    background: #fbc805;
    color: #6d1f1b;
    border-radius: 9px;
    padding: 0 7px;
    font-size: 10.5px;
    font-weight: bold;
    line-height: 17px;
}

.pf-side button.is-current .tag { background: #ffd102; }

.pf-view { min-width: 0; }

/* The view stacks whatever cards the section is made of. */
.pf-view .pf-card { margin-bottom: 18px; }

/* The three-line button that opens the panel. Only ever seen on a phone -
   on a desktop the rail is simply there. */
.pf-burger {
    display: none;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    padding: 11px 9px;
}

.pf-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.pf-burger span + span { margin-top: 5px; }

/* Behind the panel, dimming the page it is covering. */
.pf-scrim {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(20, 12, 8, .45);
    z-index: 300;
}

.pf-scrim.is-open { display: block; }

@media (max-width: 780px) {
    .pf-app { grid-template-columns: minmax(0, 1fr); gap: 14px; }

    .pf-burger { display: block; }

    /*  Off-canvas, the way a phone app carries its menu: the sections stay
        out of the way until asked for, instead of eating the top of every
        screen as a strip.  */
    .pf-side {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 268px;
        max-width: 82vw;
        z-index: 310;
        border-radius: 0;
        padding: 14px 10px;
        overflow-y: auto;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .3);
        transform: translateX(-100%);
        transition: transform .2s ease-out;
    }

    .pf-side.is-open { transform: none; }

    .pf-side button { padding: 13px 14px; font-size: 14px; }
}

/* Someone who prefers less movement gets the panel without the slide. */
@media (prefers-reduced-motion: reduce) {
    .pf-side { transition: none; }
}

/* ---------- fund transfer ---------- */

/* The three steps, so it is obvious which one is being asked for. */
.pf-steps {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    flex-wrap: wrap;
}

.pf-steps li {
    flex: 1 1 150px;
    padding: 10px 12px;
    border: 1px solid #ece6da;
    border-radius: 6px;
    font-size: 12px;
    color: #8b8b8b;
    line-height: 1.4;
}

.pf-steps li strong { display: block; color: #55504a; font-size: 13px; }
.pf-steps li.is-now  { border-color: #b1322c; background: #fdf6f5; }
.pf-steps li.is-now strong { color: #8a2b26; }
.pf-steps li.is-done { border-color: #bcdcc0; background: #f2faf3; }
.pf-steps li.is-done strong { color: #2e7d32; }
.pf-steps li.is-done strong::after { content: " ✓"; }

.pf-penny {
    background: #fffaf0;
    border: 1px dashed #e8cf8c;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 18px;
    text-align: center;
}

.pf-penny .amt { display: block; font-size: 30px; font-weight: bold; color: #8a2b26; }
.pf-penny p { margin: 4px 0 14px; font-size: 12.5px; color: #7b7b7b; line-height: 1.5; }

/* ---------- IFSC lookup ---------- */

.pf-ifsc {
    margin: -8px 0 14px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 12.5px;
    line-height: 1.5;
}

.pf-ifsc.is-idle:empty { display: none; }
.pf-ifsc.is-idle  { background: #f7f5f0; color: #7b7b7b; }
.pf-ifsc.is-busy  { background: #f7f5f0; color: #8b8b8b; }
.pf-ifsc.is-bad   { background: #fdecea; color: #a3271c; }
.pf-ifsc.is-found { background: #eaf6ec; color: #24632a; }

.pf-ifsc strong { display: block; font-size: 13.5px; }
.pf-ifsc span   { display: block; }
.pf-ifsc .rails { margin-top: 3px; font-size: 11.5px; opacity: .8; }

/* ---------- balance in the top bar ---------- */

/* Where the logout button used to sit. Logging out moved into the side
   panel, and the balance is the thing worth having on every screen. */
.pf-topbal {
    flex: 0 0 auto;
    /* Anchored to the far right of the bar, whatever else sits to its left. */
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .16);
    border-radius: 16px;
    padding: 6px 15px 6px 12px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    letter-spacing: .2px;
    white-space: nowrap;
}

.pf-topbal:empty { display: none; }
.pf-topbal svg { width: 18px; height: 18px; color: #fbc805; flex: 0 0 auto; }

/* ---------- logout, last in the side panel ---------- */

.pf-side .is-logout {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid #ece6da;
    color: #98918a;
}

.pf-side .is-logout:hover { background: #fdecea; color: #c0392b; }
.pf-side .is-logout:disabled { opacity: .6; cursor: default; }

@media (max-width: 780px) {
    /* In the drawer it is a column again, so the divider goes back on top -
       and it sits at the foot of the panel where a phone app puts it. */
    .pf-side .is-logout { margin-top: auto; }
}

/* Net Banking entry in the side panel, below the tabs. It leaves for the
   portal rather than switching a section, so it wears a gold accent to set
   it apart from the read-only tabs above. */
.pf-side .pf-nav-out {
    margin-top: 4px;
    color: #8a6d00;
    font-weight: bold;
}

.pf-side .pf-nav-out svg   { color: #d8a800; }
.pf-side .pf-nav-out:hover { background: #fff7e0; color: #6d1f1b; }