/* ============================================================
   LUDOPANDA WEBVIEW MASTER V1 — PANDAPAY
   ============================================================ */

:root{
    --lp-gold:#FFD400;
    --lp-text:#FFFDF8;
    --lp-muted:#AAA5AE;
}

body{
    background:#050505!important;
}


/* ------------------------------------------------------------
   Dashboard heading
   ------------------------------------------------------------ */

[data-page-panel="dashboard"] .section-head h2{
    color:#FFFDF8!important;

    font-size:27px!important;
    font-weight:950!important;

    line-height:1.04!important;
    letter-spacing:-.035em!important;
}

[data-page-panel="dashboard"] .eyebrow,
.page-title .eyebrow{
    color:#FFD400!important;
}


/* ------------------------------------------------------------
   Balance hero
   ------------------------------------------------------------ */

.home-balance-card{
    position:relative!important;
    overflow:hidden!important;

    padding:18px!important;

    border-radius:22px!important;

    border:1px solid rgba(255,212,0,.20)!important;

    background:
        linear-gradient(
            135deg,
            rgba(255,212,0,.09),
            rgba(255,212,0,.02) 28%,
            #171719 50%,
            #111113
        )!important;

    box-shadow:
        0 4px 0 #070707,
        0 11px 23px rgba(0,0,0,.31),
        inset 0 1px 0 rgba(255,255,255,.045)!important;
}

.home-balance-copy > strong{
    color:#FFFDF8!important;
    font-weight:950!important;
}

.home-balance-copy > span{
    color:#FFD400!important;
}


/* ------------------------------------------------------------
   Services — same Legal Center structure
   ------------------------------------------------------------ */

.service-grid{
    display:grid!important;
    grid-template-columns:1fr!important;

    gap:13px!important;

    margin-top:14px!important;
}

.service-card{
    --card-accent:#FFD400;
    --card-rgb:255,212,0;

    position:relative!important;
    overflow:hidden!important;

    display:grid!important;

    grid-template-columns:50px minmax(0,1fr) 24px!important;

    column-gap:13px!important;

    align-items:center!important;

    width:100%!important;
    min-height:108px!important;

    padding:14px!important;

    border-radius:21px!important;

    border:1px solid rgba(var(--card-rgb),.20)!important;

    background:
        linear-gradient(
            135deg,
            rgba(var(--card-rgb),.09),
            rgba(var(--card-rgb),.02) 28%,
            #171719 50%,
            #111113
        )!important;

    box-shadow:
        0 4px 0 #070707,
        0 11px 23px rgba(0,0,0,.29),
        inset 0 1px 0 rgba(255,255,255,.045)!important;

    transform:none!important;
}


/* Airtime */
.service-card:nth-child(1){
    --card-accent:#FFD400;
    --card-rgb:255,212,0;
}

/* Mobile Data */
.service-card:nth-child(2){
    --card-accent:#19CDD2;
    --card-rgb:25,205,210;
}

/* Gift Cards */
.service-card:nth-child(3){
    --card-accent:#C94CFF;
    --card-rgb:201,76,255;
}

/* Orders */
.service-card:nth-child(4){
    --card-accent:#FF9200;
    --card-rgb:255,146,0;
}


/* Icon */
.service-icon{
    grid-column:1!important;

    width:48px!important;
    height:48px!important;

    min-width:48px!important;
    min-height:48px!important;

    margin:0!important;

    border-radius:16px!important;

    background:
        linear-gradient(
            160deg,
            rgba(var(--card-rgb),.16),
            rgba(var(--card-rgb),.045)
        )!important;

    border:1px solid rgba(var(--card-rgb),.34)!important;

    color:var(--card-accent)!important;

    box-shadow:
        0 3px 0 rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.05)!important;
}

.service-icon svg{
    width:22px!important;
    height:22px!important;

    stroke:currentColor!important;
}


/* Copy */
.service-card > span:nth-child(2){
    grid-column:2!important;

    min-width:0!important;

    margin:0!important;
}

.service-card strong{
    display:block!important;

    margin:0 0 5px!important;

    color:#FFFDF8!important;

    font-size:13px!important;
    font-weight:950!important;
    line-height:1.18!important;
}

.service-card small{
    display:block!important;

    margin:0!important;

    color:#AAA5AE!important;

    font-size:10px!important;
    line-height:1.44!important;

    white-space:normal!important;
}


/* Chevron */
.service-card > b{
    grid-column:3!important;

    display:grid!important;
    place-items:center!important;

    width:24px!important;
    height:24px!important;

    margin:0!important;

    border-radius:50%!important;

    background:rgba(var(--card-rgb),.07)!important;

    color:var(--card-accent)!important;

    font-size:17px!important;
    font-weight:700!important;
}


/* ------------------------------------------------------------
   Security strip
   ------------------------------------------------------------ */

.info-strip{
    margin-top:14px!important;

    border-radius:17px!important;

    border:1px solid rgba(255,212,0,.12)!important;

    background:#121214!important;

    box-shadow:
        0 2px 0 #080808,
        inset 0 1px 0 rgba(255,255,255,.02)!important;
}


/* ------------------------------------------------------------
   Tabs
   ------------------------------------------------------------ */

.service-nav{
    gap:6px!important;
}

.service-nav .nav-btn{
    border-radius:12px!important;

    background:#111113!important;

    border:1px solid rgba(255,255,255,.09)!important;
}

.service-nav .nav-btn.active{
    color:#FFD400!important;

    border-color:rgba(255,212,0,.35)!important;

    background:rgba(255,212,0,.065)!important;
}


/* ------------------------------------------------------------
   Forms
   ------------------------------------------------------------ */

.form-card{
    border-radius:21px!important;

    border:1px solid rgba(255,255,255,.085)!important;

    background:
        linear-gradient(145deg,#151517,#111113)!important;

    box-shadow:
        0 3px 0 #080808,
        0 10px 22px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.025)!important;
}

.form-card input,
.form-card select{
    background:#0F0F11!important;

    border-color:rgba(255,255,255,.105)!important;
}


/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */

.primary-btn{
    background:
        linear-gradient(180deg,#FFE13A,#D9A900)!important;

    color:#090909!important;

    box-shadow:
        0 3px 0 #785D00,
        inset 0 1px 0 rgba(255,255,255,.30)!important;
}


/* ------------------------------------------------------------
   Orders
   ------------------------------------------------------------ */

.order-card,
.empty-card{
    border-radius:18px!important;

    border:1px solid rgba(255,255,255,.085)!important;

    background:
        linear-gradient(145deg,#151517,#111113)!important;

    box-shadow:
        0 3px 0 #080808,
        0 9px 20px rgba(0,0,0,.22)!important;
}


/* ------------------------------------------------------------
   Modal
   ------------------------------------------------------------ */

.modal{
    background:#121214!important;

    box-shadow:
        0 4px 0 #070707,
        0 22px 50px rgba(0,0,0,.48)!important;
}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media(max-width:620px){

    .service-grid{
        grid-template-columns:1fr!important;
        gap:12px!important;
    }

    .service-card{
        min-height:106px!important;
    }

    .home-balance-card{
        padding:16px!important;
    }
}