/* ============================================================
   CashPlay wallet flow — deposit.php + withdrawal.php.

   Sub-page layout: dark title bar, white cards separated by a pale
   ground, sticky action button seated above the shared bottom nav.

   Every highlight in the flow reads from --dp-accent, so the whole
   flow restyles from that one line.
   ============================================================ */

:root{
    --dp-accent:#1DA750;          /* CashPlay green */
    --dp-accent-dark:#12793A;
    --dp-accent-soft:#E8F8EE;
    --dp-danger:#E8455F;
    --dp-head:#12181C;
    --dp-ground:#F4F7F5;
    --dp-card:#FFFFFF;
    --dp-line:#E6EBE8;
    --dp-text:#15201A;
    --dp-text2:#6B7A72;
    --dp-muted:#AAB4AE;
    --dp-head-h:52px;
    --dp-bar-h:76px;
}

*{-webkit-tap-highlight-color:transparent}

/* Peso figures sit in columns and swap on refresh, so they get fixed-width
   digits — amounts stop shifting sideways as the numbers change. */
.dp-balance-value,.dp-chip,.dp-amount input,.dp-balance-right .value{font-variant-numeric:tabular-nums}
body{background:var(--dp-ground);color:var(--dp-text);font-family:'Archivo',sans-serif;
     user-select:none;overscroll-behavior-y:contain;margin:0;min-height:100vh}

/* The shared chrome injects both the top bar and the bottom nav together.
   This flow draws its own title bar, so only the injected top bar is hidden;
   the nav stays so the player is never stranded on the page. */
.site-topbar{display:none !important}

/* ── title bar ─────────────────────────────────────────────── */
.dp-head{position:fixed;top:0;left:0;right:0;height:var(--dp-head-h);z-index:1001;
    background:var(--dp-head);display:flex;align-items:center;justify-content:center;padding:0 8px}
.dp-head h1{font-size:15px;font-weight:800;color:#fff;letter-spacing:.2px;margin:0}
.dp-head-btn{position:absolute;top:0;height:var(--dp-head-h);width:44px;display:flex;align-items:center;
    justify-content:center;background:none;border:none;color:#fff;font-size:16px;cursor:pointer;
    text-decoration:none}
.dp-head-btn.left{left:0}
.dp-head-btn.right{right:0;font-size:15px}

/* ── page body ─────────────────────────────────────────────── */
.dp-main{max-width:520px;margin:0 auto;padding-top:var(--dp-head-h);
    padding-bottom:calc(var(--dp-bar-h) + var(--bottomnav-h) + 8px)}
.dp-sec{background:var(--dp-card);padding:16px 16px 20px;margin-bottom:8px}
.dp-sec-title{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:800;
    color:var(--dp-text);margin:0 0 14px}
.dp-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* ── payment methods ───────────────────────────────────────── */
.dp-methods{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.dp-method{position:relative;background:var(--dp-card);border:1.5px solid var(--dp-line);
    border-radius:12px;padding:12px 4px 9px;display:flex;flex-direction:column;align-items:center;
    gap:8px;cursor:pointer;transition:border-color .15s,box-shadow .15s;overflow:hidden}
.dp-method img{width:40px;height:40px;object-fit:contain;border-radius:9px}
.dp-method span{font-size:10.5px;font-weight:600;color:var(--dp-text2);line-height:1;text-align:center}
.dp-method.sel{border-color:var(--dp-accent);box-shadow:0 2px 10px rgba(29,167,80,.12)}
.dp-method.sel span{color:var(--dp-accent);font-weight:700}
/* selected corner flag with a tick, as on the reference */
.dp-method.sel::after{content:'';position:absolute;right:0;bottom:0;width:0;height:0;
    border:12px solid transparent;border-right-color:var(--dp-accent);border-bottom-color:var(--dp-accent);
    border-bottom-right-radius:10px}
.dp-method.sel::before{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;
    position:absolute;right:2px;bottom:1px;font-size:8px;color:#fff;z-index:2;line-height:1}

/* ── quick amounts ─────────────────────────────────────────── */
.dp-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.dp-chip{background:var(--dp-card);border:1px solid var(--dp-line);border-radius:8px;
    padding:10px 2px;font-size:11.5px;font-weight:700;color:var(--dp-text);cursor:pointer;
    transition:all .15s;font-family:inherit}
.dp-chip.sel{border-color:var(--dp-accent);color:var(--dp-accent);background:var(--dp-accent-soft)}

.dp-amount{margin-top:16px;display:flex;align-items:center;gap:8px;border:1.5px solid var(--dp-accent);
    border-radius:9px;padding:0 14px;height:52px;background:var(--dp-card)}
.dp-amount .peso{font-size:14px;color:var(--dp-muted);font-weight:600}
.dp-amount input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;
    font-size:14px;font-weight:600;color:var(--dp-text);min-width:0}
.dp-amount input::placeholder{color:var(--dp-muted);font-weight:500}
.dp-amount input::-webkit-outer-spin-button,
.dp-amount input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dp-amount input[type=number]{-moz-appearance:textfield}
.dp-hint{text-align:center;font-size:11px;font-weight:700;color:var(--dp-accent);margin:10px 0 0}

/* ── promotions ────────────────────────────────────────────── */
.dp-promo{display:flex;align-items:flex-start;gap:11px;border:1px solid var(--dp-line);
    border-radius:9px;padding:15px 14px;margin-bottom:9px;cursor:pointer;background:var(--dp-card)}
.dp-promo:last-child{margin-bottom:0}
.dp-promo input{display:none}
.dp-radio{width:17px;height:17px;border-radius:50%;border:1.5px solid #CBD4CE;flex-shrink:0;
    margin-top:1px;position:relative;transition:border-color .15s}
.dp-promo input:checked + .dp-radio{border-color:var(--dp-accent);border-width:2px}
.dp-promo input:checked + .dp-radio::after{content:'';position:absolute;inset:2.5px;border-radius:50%;
    background:var(--dp-accent)}
.dp-promo-title{display:block;font-size:12.5px;font-weight:800;color:var(--dp-text);line-height:1.35}
.dp-promo-sub{display:block;font-size:11.5px;color:var(--dp-text2);line-height:1.45;margin-top:4px}
.dp-promo-sub a{color:var(--dp-accent);text-decoration:none;font-weight:700}
.dp-promo.locked{cursor:default}
.dp-promo.locked .dp-promo-title,
.dp-promo.locked .dp-promo-sub{color:var(--dp-muted)}
.dp-promo.locked .dp-promo-sub a{color:var(--dp-muted)}
.dp-promo.locked .dp-radio{border-color:#E0E6E2}

/* ── balance header (withdrawal) ───────────────────────────── */
.dp-balance{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.dp-balance-value{font-size:30px;font-weight:800;color:var(--dp-text);line-height:1.1;margin:0}
.dp-balance-right{text-align:right;flex-shrink:0}
.dp-balance-right .label{font-size:10.5px;color:var(--dp-text2);display:block;margin-bottom:3px}
.dp-balance-right .value{font-size:12.5px;font-weight:800;color:var(--dp-danger)}
.dp-balance-right .value.clear{color:var(--dp-accent)}

/* ── empty / gate state ────────────────────────────────────── */
.dp-gate{background:var(--dp-card);padding:34px 28px 40px;text-align:center;margin-bottom:8px}
.dp-gate h2{font-size:14.5px;font-weight:800;color:var(--dp-text);margin:0 0 8px}
.dp-gate p{font-size:12px;color:var(--dp-text2);line-height:1.6;margin:0 auto 22px;max-width:300px}
.dp-gate-btn{display:inline-block;background:var(--dp-accent);color:#fff;border:none;border-radius:8px;
    padding:13px 26px;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;
    text-decoration:none;box-shadow:0 4px 14px rgba(29,167,80,.28)}
.dp-gate-btn:active{transform:scale(.985)}

/* ── bound-account row (withdrawal) ────────────────────────── */
.dp-bound{display:flex;align-items:center;justify-content:space-between;gap:12px;
    border:1px solid var(--dp-line);border-radius:9px;padding:13px 14px}
.dp-bound-name{font-size:12.5px;font-weight:800;color:var(--dp-text)}
.dp-bound-num{font-size:11.5px;color:var(--dp-text2);margin-top:2px;letter-spacing:.3px}
.dp-bound-change{font-size:11px;font-weight:800;color:var(--dp-accent);background:none;border:none;
    cursor:pointer;font-family:inherit;text-decoration:none;flex-shrink:0}

/* ── notes list ────────────────────────────────────────────── */
.dp-notes{list-style:none;margin:0;padding:0}
.dp-notes li{display:flex;gap:9px;font-size:11.5px;color:var(--dp-text2);line-height:1.55;
    margin-bottom:10px}
.dp-notes li:last-child{margin-bottom:0}
.dp-notes i{color:var(--dp-accent);margin-top:2px;flex-shrink:0;font-size:11px}

/* ── licence strip ─────────────────────────────────────────── */
.dp-legal{text-align:center;padding:20px 20px 24px;font-size:9.5px;color:var(--dp-muted);line-height:1.7}
/* pagcor.png is a 300x168 wordmark, so it is height-locked to keep its ratio
   and given its own line — squashed into the text line it reads as a smudge */
.dp-legal img{display:block;height:26px;width:auto;object-fit:contain;margin:0 auto 8px;opacity:.7}

/* ── sticky action bar, seated above the shared bottom nav ─── */
.dp-actionbar{position:fixed;left:0;right:0;bottom:var(--bottomnav-h);z-index:999;
    background:var(--dp-card);border-top:1px solid var(--dp-line);padding:14px 16px}
.dp-actionbar-inner{max-width:520px;margin:0 auto}
.dp-next{width:100%;height:48px;border:none;border-radius:8px;font-family:inherit;font-size:14px;
    font-weight:800;color:#fff;background:var(--dp-accent);cursor:pointer;transition:all .15s;
    box-shadow:0 4px 14px rgba(29,167,80,.28)}
.dp-next:active{transform:scale(.985)}
.dp-next:disabled{background:#C6CFC9;box-shadow:none;cursor:not-allowed}

/* ── messages ──────────────────────────────────────────────── */
.dp-msg{margin:12px 16px 0;padding:12px 14px;border-radius:9px;font-size:12px;font-weight:600;
    text-align:center;line-height:1.45}
.dp-msg.err{background:#FDECEF;color:#B3243C;border:1px solid #F7CDD5}
.dp-msg.ok{background:var(--dp-accent-soft);color:var(--dp-accent-dark);border:1px solid #C7E9D5}

/* ── overlays ──────────────────────────────────────────────── */
.dp-overlay{position:fixed;inset:0;z-index:1200;background:rgba(255,255,255,.92);
    display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}
.dp-overlay.hidden{display:none}
.dp-overlay-label{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
    color:var(--dp-accent-dark);margin:0}
.dp-spin{width:38px;height:38px;border:3px solid var(--dp-line);border-top-color:var(--dp-accent);
    border-radius:50%;animation:dpspin 1s linear infinite}
@keyframes dpspin{to{transform:rotate(360deg)}}

/* ── modal ─────────────────────────────────────────────────── */
.dp-modal{position:fixed;inset:0;z-index:1210;background:rgba(10,20,14,.45);
    display:flex;align-items:center;justify-content:center;padding:24px}
.dp-modal.hidden{display:none}
.dp-modal-box{background:var(--dp-card);border-radius:16px;padding:30px 26px;max-width:340px;width:100%;
    text-align:center;box-shadow:0 20px 50px rgba(18,60,35,.22)}
.dp-modal-box h3{font-size:16px;font-weight:800;color:var(--dp-text);margin:0 0 10px}
.dp-modal-box p{font-size:12.5px;color:var(--dp-text2);line-height:1.6;margin:0 0 22px}
.dp-modal-icon{width:58px;height:58px;border-radius:50%;background:var(--dp-accent-soft);
    display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
    font-size:22px;color:var(--dp-accent-dark)}
.dp-modal-btn{width:100%;height:46px;border:none;border-radius:8px;font-family:inherit;font-size:13px;
    font-weight:800;cursor:pointer;margin-bottom:9px;background:var(--dp-accent);color:#fff}
.dp-modal-btn.ghost{background:var(--dp-accent-soft);color:var(--dp-accent-dark);margin-bottom:0}

@media (max-width:360px){
    .dp-method img{width:34px;height:34px}
    .dp-method span{font-size:9.5px}
    .dp-chip{font-size:10.5px;padding:9px 1px}
}