/* =============================================================================
   app_payments.css - Rents & Payments  (pages/kprocess_855.php)
   -----------------------------------------------------------------------------
   Pages: #pn_payments, #pn_pay_contract, #pn_pay_item, #pn_pay_receipts,
          #pn_pay_receipt, #pn_pay_now - every one carries the .kpay class, and
          every rule here is scoped under it, so nothing leaks into the rest
          of the app and nothing in app_home_modern.css is touched.

   Loaded by index.php right after app_home_modern.css, cache-busted on this
   file's mtime like the others. The page chrome (header band, scrolling body,
   bottom-bar clearance) comes from the generic .tt_page > .bd_container rules
   in app_home_modern.css and needs nothing from here.

   Same language as Agreements / Maintenance: gold disc + glyph, a card per
   row, a section band, a status pill. Palette:
     gold #c0a76d / dark gold #8a6c2a / ink #3f341a / muted #8a8170 / navy #1c2748
     ok  green   #0f7a45      warn amber #9a6a12
     info blue   #1d4f91      bad  red   #a32d2d
   ========================================================================= */

.kpay .bd_container { padding: 14px 12px 90px; }

/* ---------- Section band --------------------------------------------------- */
.kpay .kpay_section {
    display: flex; align-items: center; gap: 8px; margin: 18px 2px 10px; }
.kpay .kpay_section:first-of-type { margin-top: 4px; }
.kpay .kpay_section__title {
    font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
    text-transform: uppercase; color: #8a6c2a; }
.kpay .kpay_section__count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #7a5f1f;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }
.kpay .kpay_section__extra { margin-left: auto; font-size: 11.5px; color: #8a8170; }

/* ---------- Status pills ----------------------------------------------------- */
.kpay .kpay_badge {
    font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
    border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.kpay .kpay_badge--ok {
    color: #0f7a45; background: linear-gradient(135deg, #d8f5e6 0%, #b8ecce 100%);
    box-shadow: inset 0 0 0 1px rgba(4,120,87,.20); }
.kpay .kpay_badge--warn {
    color: #9a6a12; background: linear-gradient(135deg, #fff1cf 0%, #ffe0a0 100%);
    box-shadow: inset 0 0 0 1px rgba(180,120,20,.22); }
.kpay .kpay_badge--info {
    color: #1d4f91; background: linear-gradient(135deg, #e3eefc 0%, #c9dcf7 100%);
    box-shadow: inset 0 0 0 1px rgba(29,79,145,.20); }
.kpay .kpay_badge--bad {
    color: #a32d2d; background: linear-gradient(135deg, #fde6e6 0%, #f8cbcb 100%);
    box-shadow: inset 0 0 0 1px rgba(163,45,45,.22); }
.kpay .kpay_badge--muted {
    color: #8a7a4e; background: linear-gradient(135deg, #f1ece0 0%, #e6dcc6 100%);
    box-shadow: inset 0 0 0 1px rgba(150,120,60,.18); }

/* ---------- Chips ------------------------------------------------------------ */
.kpay .kpay_chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; color: #6b5e3a; background: rgba(192,167,109,.12);
    border: 1px solid rgba(192,167,109,.26); border-radius: 999px; padding: 2px 8px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpay .kpay_chip i { font-size: 10px; color: #a98842; flex: 0 0 auto; }

/* ---------- Hero (overview + pay now) ---------------------------------------- */
.kpay .kpay_hero {
    position: relative; overflow: hidden;
    padding: 20px 18px 16px; margin: 0 0 14px; border-radius: 18px; color: #fff;
    background: linear-gradient(150deg, #1c2748 0%, #2b3a66 60%, #34457a 100%);
    box-shadow: 0 10px 26px rgba(28,39,72,.22); }
.kpay .kpay_hero::after {
    content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px;
    border-radius: 50%; background: radial-gradient(circle, rgba(192,167,109,.28), transparent 70%); }
.kpay .kpay_hero--due { background: linear-gradient(150deg, #5a1d1d 0%, #8a2a2a 55%, #a33a2f 100%); box-shadow: 0 10px 26px rgba(138,42,42,.25); }
.kpay .kpay_hero--clear { background: linear-gradient(150deg, #1c2748 0%, #24466b 55%, #1f6b3f 130%); }
.kpay .kpay_hero__lbl { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; opacity: .82; }
.kpay .kpay_hero__amt { font-size: 32px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; margin: 4px 0 6px; }
.kpay .kpay_hero__sub { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.45; opacity: .95; }
.kpay .kpay_hero__sub i { margin-top: 2px; color: #f0dfae; }
.kpay .kpay_hero__stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0;
    padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16); }
.kpay .kpay_hero__stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kpay .kpay_hero__stat-l { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; opacity: .75; }
.kpay .kpay_hero__stat-v { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpay .kpay_hero__stat-s { font-size: 11px; opacity: .78; }
.kpay .kpay_hero__actions { display: flex; gap: 8px; margin-top: 14px; }

/* ---------- Buttons ------------------------------------------------------------ */
.kpay .kpay_btn {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; border-radius: 12px; font-size: 13px; font-weight: 800; letter-spacing: .3px;
    cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease; }
.kpay .kpay_btn:active { transform: translateY(1px); }
.kpay .kpay_btn--primary {
    color: #2a2515; background: linear-gradient(135deg, #f0dfae 0%, #c0a76d 100%);
    box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.kpay .kpay_btn--ghost {
    color: #fff; background: rgba(255,255,255,.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
/* Disabled 'Soon' button: still reads as the action it will become, just
   not lit and not tappable. */
.kpay .kpay_btn--soon {
    color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); cursor: default;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); pointer-events: none; }
.kpay .kpay_btn--block { flex: none; width: 100%; margin-top: 8px; box-sizing: border-box; }
.kpay .kpay_btn__n {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10.5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.22); }

/* ---------- Installment row ------------------------------------------------------ */
.kpay .kpay_row {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid rgba(192,167,109,.28);
    border-left: 4px solid #c0a76d; border-radius: 14px;
    padding: 12px 13px; margin: 0 0 10px;
    box-shadow: 0 4px 14px rgba(60,40,0,.05);
    cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.kpay .kpay_row:active { transform: translateY(1px); }
.kpay .kpay_row--ok    { border-left-color: #2e8b57; }
.kpay .kpay_row--info  { border-left-color: #4a7bc8; }
.kpay .kpay_row--warn  { border-left-color: #e6b34d; }
.kpay .kpay_row--bad   { border-left-color: #c8332a; }
.kpay .kpay_row--muted { border-left-color: #cbb98b; }
.kpay .kpay_row__icon {
    flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); color: #8a6c2a; }
.kpay .kpay_row__icon i { font-size: 17px; line-height: 1; }
.kpay .kpay_row--ok .kpay_row__icon  { background: linear-gradient(135deg, #e6f7ed 0%, #c6ecd6 100%); color: #1f6b3f; }
.kpay .kpay_row--bad .kpay_row__icon { background: linear-gradient(135deg, #fde6e6 0%, #f8cbcb 100%); color: #a32d2d; }
.kpay .kpay_row__body { flex: 1 1 auto; min-width: 0; }
/* Line 1: title left, amount right. Line 2: status pill, then the chips. */
.kpay .kpay_row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.kpay .kpay_row__title { font-size: 13.5px; font-weight: 700; color: #3f341a; min-width: 0; }
.kpay .kpay_row__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpay .kpay_row__amt {
    flex: 0 0 auto; font-size: 14px; font-weight: 800; color: #1c2748;
    text-align: right; white-space: nowrap; }
.kpay .kpay_row__amt--muted { color: #a99e82; font-weight: 600; font-size: 12px; }

/* ---------- Contract card ---------------------------------------------------------- */
.kpay .kpay_ct {
    background: #fff; border: 1px solid rgba(192,167,109,.30); border-radius: 16px;
    padding: 12px 12px 6px; margin: 0 0 12px; box-shadow: 0 6px 18px rgba(60,40,0,.06); }
.kpay .kpay_ct--history { padding-bottom: 12px; }
.kpay .kpay_ct--hero { background: linear-gradient(160deg, #fffdf7 0%, #fbf4e4 100%); }
.kpay .kpay_ct__head { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.kpay .kpay_ct--hero .kpay_ct__head { cursor: default; }
.kpay .kpay_ct__icon {
    flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; color: #8a6c2a;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }
.kpay .kpay_ct__icon i { font-size: 19px; }
.kpay .kpay_ct__id { flex: 1 1 auto; min-width: 0; }
.kpay .kpay_ct__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.kpay .kpay_ct__no {
    font-size: 13.5px; font-weight: 700; color: #3f341a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kpay .kpay_ct__unit, .kpay .kpay_ct__term { font-size: 12px; color: #8a8170; margin-top: 2px; }
.kpay .kpay_ct__unit i, .kpay .kpay_ct__term i { color: #a98842; font-size: 11px; }
.kpay .kpay_ct__chev { flex: 0 0 auto; color: #c0a76d; font-size: 15px; }
.kpay .kpay_ct__sub {
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    color: #a99e82; margin: 12px 2px 8px; }
.kpay .kpay_ct__note {
    display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #6b5e3a;
    line-height: 1.45; padding: 10px 2px 8px; }
.kpay .kpay_ct__note i { color: #2e8b57; margin-top: 2px; }
.kpay .kpay_ct__foot {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 2px -12px 0; padding: 11px 12px 12px; border-top: 1px dashed rgba(192,167,109,.35);
    font-size: 12.5px; font-weight: 700; color: #8a6c2a; cursor: pointer; }
.kpay .kpay_ct__foot i { font-size: 11px; }
.kpay .kpay_ct__foot-n {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 10.5px;
    display: inline-flex; align-items: center; justify-content: center; color: #7a5f1f;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }
.kpay .kpay_ct__hist { font-size: 12.5px; color: #6b5e3a; margin: 10px 2px 0; }

/* ---------- Progress bar ------------------------------------------------------------- */
.kpay .kpay_prog { margin: 12px 2px 4px; }
.kpay .kpay_prog__bar {
    display: flex; height: 8px; border-radius: 4px; overflow: hidden;
    background: rgba(192,167,109,.16); }
.kpay .kpay_prog__paid { display: block; height: 100%; background: linear-gradient(90deg, #2e8b57, #1f6b3f); }
.kpay .kpay_prog__pend { display: block; height: 100%; background: linear-gradient(90deg, #6f9be0, #4a7bc8); }
.kpay .kpay_prog__line { font-size: 11.5px; color: #8a8170; margin-top: 6px; }
.kpay .kpay_prog__due { color: #a32d2d; font-weight: 700; }

/* ---------- Stats strip (contract page) ------------------------------------------------ */
.kpay .kpay_stats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px -2px 6px; }
.kpay .kpay_stat {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 8px;
    border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(192,167,109,.26); }
.kpay .kpay_stat__l { font-size: 9.5px; letter-spacing: .8px; text-transform: uppercase; color: #a99e82; }
.kpay .kpay_stat__v { font-size: 13px; font-weight: 800; color: #1c2748; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpay .kpay_stat--ok .kpay_stat__v   { color: #1f6b3f; }
.kpay .kpay_stat--info .kpay_stat__v { color: #1d4f91; }
.kpay .kpay_stat--bad .kpay_stat__v  { color: #a32d2d; }

/* ---------- Filter chips + year bands ---------------------------------------------------- */
.kpay .kpay_chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 2px 12px; }
.kpay .kpay_filter {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 700; color: #6b5e3a; background: #fff; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.34); }
.kpay .kpay_filter--on {
    color: #2a2515; background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.6); }
.kpay .kpay_filter__n {
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(192,167,109,.22); }
.kpay .kpay_year {
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    color: #a99e82; margin: 12px 2px 8px; display: flex; align-items: center; gap: 8px; }
.kpay .kpay_year::after { content: ''; flex: 1 1 auto; height: 1px; background: rgba(192,167,109,.3); }

/* ---------- Empty state + notices + footer --------------------------------------------------- */
.kpay .kpay_empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px; padding: 26px 18px; color: #8a8170;
    background: #fff; border: 1px dashed rgba(192,167,109,.4); border-radius: 14px; margin-bottom: 12px; }
.kpay .kpay_empty i { font-size: 26px; color: #c0a76d; }
.kpay .kpay_empty__text { font-size: 13px; line-height: 1.5; }
.kpay .kpay_notice {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; margin: 0 0 12px;
    background: #fffdf7; border: 1px solid rgba(192,167,109,.34); border-radius: 14px;
    font-size: 12.5px; line-height: 1.5; color: #6b5e3a; }
.kpay .kpay_notice > i { color: #a98842; margin-top: 2px; font-size: 15px; }
.kpay .kpay_notice--warn { background: #fff4f2; border-color: rgba(200,51,42,.28); }
.kpay .kpay_notice--warn > i { color: #b62a2a; }
.kpay .kpay_notice__body { flex: 1 1 auto; min-width: 0; }
.kpay .kpay_notice__t { font-weight: 800; color: #3f341a; margin-bottom: 2px; }
.kpay .kpay_notice__btn {
    flex: 0 0 auto; align-self: center; padding: 7px 12px; border-radius: 9px; cursor: pointer;
    font-size: 12px; font-weight: 800; color: #7a5f1f;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }
.kpay .kpay_foot { font-size: 11.5px; line-height: 1.5; color: #a99e82; text-align: center; padding: 8px 14px 4px; }

/* ---------- Detail pages (item / receipt) ---------------------------------------------------------- */
.kpay .kpay_dt__hero {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 6px; padding: 20px 16px 18px; margin: 4px 0 14px;
    background: linear-gradient(160deg, #fffdf7 0%, #fbf4e4 100%);
    border: 1px solid rgba(192,167,109,.30); border-radius: 16px;
    box-shadow: 0 6px 18px rgba(60,40,0,.06); }
.kpay .kpay_dt__hero--ok   { background: linear-gradient(160deg, #fbfdf9 0%, #eef8f1 100%); border-color: rgba(4,120,87,.18); }
.kpay .kpay_dt__hero--bad  { background: linear-gradient(160deg, #fffafa 0%, #fdecec 100%); border-color: rgba(163,45,45,.22); }
.kpay .kpay_dt__hero--info { background: linear-gradient(160deg, #fbfcff 0%, #edf3fc 100%); border-color: rgba(29,79,145,.18); }
.kpay .kpay_dt__hero-icon {
    width: 54px; height: 54px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: 22px; color: #8a6c2a;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.34); }
.kpay .kpay_dt__hero-title { font-size: 14px; font-weight: 700; color: #3f341a; }
.kpay .kpay_dt__hero-amt { font-size: 28px; font-weight: 800; letter-spacing: -.4px; color: #1c2748; line-height: 1.15; }
.kpay .kpay_dt__hero-sub { font-size: 12px; color: #8a8170; }
.kpay .kpay_dt__card {
    background: #fff; border: 1px solid rgba(192,167,109,.30); border-radius: 16px;
    padding: 12px 14px 8px; margin: 0 0 12px; box-shadow: 0 6px 18px rgba(60,40,0,.06); }
.kpay .kpay_dt__card-head {
    display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase; color: #8a6c2a; margin-bottom: 4px; }
.kpay .kpay_dt__card-head i { color: #c0a76d; }
.kpay .kpay_dt__row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(192,167,109,.14); }
.kpay .kpay_dt__row:last-child { border-bottom: 0; padding-bottom: 6px; }
.kpay .kpay_dt__label { font-size: 12px; color: #8a8170; flex: 0 0 auto; }
.kpay .kpay_dt__val { font-size: 13px; font-weight: 600; color: #3f341a; text-align: right; word-break: break-word; }
.kpay .kpay_link { color: #1d4f91; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.kpay .kpay_link small { font-weight: 500; color: #8a8170; }
.kpay .kpay_link i { font-size: 10px; }

/* ---------- Progress rail (item page) ---------------------------------------------------------- */
.kpay .kpay_rail { padding: 6px 2px 4px; }
.kpay .kpay_rail__step { display: flex; align-items: flex-start; gap: 12px; position: relative; padding: 0 0 16px; }
.kpay .kpay_rail__step::before {
    content: ''; position: absolute; left: 12px; top: 26px; bottom: -2px; width: 2px;
    background: rgba(192,167,109,.28); }
.kpay .kpay_rail__step:last-child { padding-bottom: 4px; }
.kpay .kpay_rail__step:last-child::before { display: none; }
.kpay .kpay_rail__dot {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #a99e82; background: #fff;
    box-shadow: inset 0 0 0 2px rgba(192,167,109,.35); }
.kpay .kpay_rail__step--done .kpay_rail__dot { color: #fff; background: linear-gradient(135deg, #2e8b57, #1f6b3f); box-shadow: none; }
.kpay .kpay_rail__step--done::before { background: #2e8b57; }
.kpay .kpay_rail__step--bad .kpay_rail__dot { background: linear-gradient(135deg, #c8332a, #8a2a2a); }
.kpay .kpay_rail__tx { padding-top: 4px; }
.kpay .kpay_rail__t { font-size: 13px; font-weight: 700; color: #3f341a; }
.kpay .kpay_rail__step:not(.kpay_rail__step--done) .kpay_rail__t { color: #a99e82; font-weight: 600; }
.kpay .kpay_rail__d { font-size: 11.5px; color: #8a8170; margin-top: 1px; }

/* ---------- Call to action (item page) ----------------------------------------------------------- */
.kpay .kpay_cta {
    display: flex; align-items: center; gap: 12px; padding: 12px 13px; margin: 0 0 12px;
    border-radius: 14px; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, #8a2a2a 0%, #a33a2f 100%);
    box-shadow: 0 8px 20px rgba(138,42,42,.25); }
.kpay .kpay_cta__ic {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; font-size: 16px;
    display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); }
.kpay .kpay_cta__tx { flex: 1 1 auto; min-width: 0; }
.kpay .kpay_cta__t { font-size: 13.5px; font-weight: 800; }
.kpay .kpay_cta__s { font-size: 12px; opacity: .92; line-height: 1.4; margin-top: 2px; }
.kpay .kpay_cta__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .6px; }
.kpay .kpay_cta__btn i { font-size: 10px; }

/* ---------- Ways to pay (pay now) ------------------------------------------------------------------ */
.kpay .kpay_way {
    background: #fff; border: 1px solid rgba(192,167,109,.30); border-radius: 16px;
    padding: 12px 14px; margin: 0 0 12px; box-shadow: 0 6px 18px rgba(60,40,0,.06); }
.kpay .kpay_way__head { display: flex; align-items: center; gap: 10px; }
.kpay .kpay_way__ic {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; color: #8a6c2a; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }
.kpay .kpay_way__t { font-size: 14px; font-weight: 800; color: #3f341a; }
.kpay .kpay_way__body { margin-top: 8px; }
.kpay .kpay_way__p { font-size: 12.5px; line-height: 1.55; color: #6b5e3a; padding: 4px 0; }
.kpay .kpay_way__p b { color: #3f341a; }
/* 'Coming soon' tag - same shape as the Settings page's kset__soon. */
.kpay .kpay_soon {
    display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: #8a7a4e; border-radius: 999px; padding: 2px 7px;
    vertical-align: middle; margin-left: 6px;
    background: linear-gradient(135deg, #f1ece0 0%, #e6dcc6 100%); }
.kpay .kpay_soon--dark { color: #fff; background: rgba(255,255,255,.18); margin-left: 4px; }
.kpay .kpay_way--soon { opacity: .72; }
.kpay .kpay_way--soon .kpay_way__ic { background: linear-gradient(135deg, #f1ece0 0%, #e6dcc6 100%); color: #8a7a4e; }
.kpay .kpay_way--online { border-color: rgba(192,167,109,.6); box-shadow: 0 8px 22px rgba(138,108,42,.14); }
.kpay .kpay_bank {
    margin: 6px 0 10px; padding: 8px 12px 2px; border-radius: 12px;
    background: #fffdf7; box-shadow: inset 0 0 0 1px rgba(192,167,109,.26); }
.kpay .kpay_bank__name { font-size: 12.5px; font-weight: 800; color: #1c2748; padding: 2px 0 4px; }

/* ---------- Help buttons (pay now) ------------------------------------------------------------------- */
.kpay .kpay_help { display: grid; grid-template-columns: 1fr; gap: 8px; }
.kpay .kpay_help__btn {
    display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 12px;
    align-items: center; padding: 11px 13px; border-radius: 14px; text-decoration: none; cursor: pointer;
    background: #fff; border: 1px solid rgba(192,167,109,.30); box-shadow: 0 4px 14px rgba(60,40,0,.05); }
.kpay .kpay_help__btn:active { transform: translateY(1px); }
.kpay .kpay_help__btn i {
    grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 50%; color: #8a6c2a; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #fff5dd 0%, #f0dfae 100%);
    box-shadow: inset 0 0 0 1px rgba(192,167,109,.30); }
.kpay .kpay_help__btn span { font-size: 13.5px; font-weight: 700; color: #3f341a; }
.kpay .kpay_help__btn small { font-size: 11.5px; color: #8a8170; }

/* ---------- Narrow phones ------------------------------------------------------------------------------ */
@media (max-width: 360px) {
    .kpay .kpay_hero__amt { font-size: 27px; }
    .kpay .kpay_row__amt { font-size: 13px; }
}