/* LUDOPANDA_WEBVIEW_FEEL_V2_PANDAPAY */

body{
  background:#050505!important;
}

/* Balance hero */
.home-balance-card{
  border:1px solid rgba(255,212,0,.20)!important;

  background:
    linear-gradient(
      135deg,
      rgba(255,212,0,.085),
      rgba(255,212,0,.018) 30%,
      #171719 52%,
      #111113
    )!important;

  border-radius:22px!important;

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

/* KEEP ORIGINAL 2x2 GRID */
.service-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* Cards keep original internal structure */
.service-card{
  --card-rgb:255,212,0;
  --card-accent:#FFD400;

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

  background:
    linear-gradient(
      145deg,
      rgba(var(--card-rgb),.085),
      rgba(var(--card-rgb),.018) 32%,
      #171719 55%,
      #111113
    )!important;

  border-radius:20px!important;

  box-shadow:
    0 4px 0 #070707,
    0 10px 22px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04)!important;
}

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

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

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

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

.service-icon{
  background:
    linear-gradient(
      160deg,
      rgba(var(--card-rgb),.17),
      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,.04)!important;
}

.service-icon svg{
  stroke:currentColor!important;
}

.service-card strong{
  color:#FFFDF8!important;
  font-weight:950!important;
}

.service-card small{
  color:#AAA5AE!important;
}

/* Preserve current chevron behavior */
.service-card > b{
  color:var(--card-accent)!important;
}

/* Security strip */
.info-strip{
  background:#121214!important;
  border-color:rgba(255,212,0,.12)!important;

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

/* Forms */
.form-card{
  border-color: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,.23),
    inset 0 1px 0 rgba(255,255,255,.025)!important;
}

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

/* CTA */
.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,.28)!important;
}

/* Orders */
.order-card,
.empty-card{
  background:
    linear-gradient(145deg,#151517,#111113)!important;

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

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

/* ============================================================
   PANDAPAY_GRID_HEIGHT_V4
   More breathing room for 2x2 service cards
   ============================================================ */

[data-page-panel="dashboard"] .service-card{
    min-height:178px!important;
    padding:16px!important;
    row-gap:17px!important;
}

[data-page-panel="dashboard"] .service-icon{
    width:50px!important;
    height:50px!important;

    min-width:50px!important;
    min-height:50px!important;
}

[data-page-panel="dashboard"] .service-card strong{
    margin-bottom:8px!important;
}

@media(max-width:620px){

    [data-page-panel="dashboard"] .service-card{
        min-height:172px!important;
        padding:15px!important;
        row-gap:16px!important;
    }

}

@media(max-width:380px){

    [data-page-panel="dashboard"] .service-card{
        min-height:166px!important;
        padding:14px!important;
        row-gap:15px!important;
    }

}


/* ============================================================
   PANDAPAY_CARD_LAYOUT_V6

   [ ICON ]                         >
   
   Airtime
   Recharge a mobile
   number
   ============================================================ */


/* KEEP 2 x 2 OUTER GRID */
[data-page-panel="dashboard"] .service-grid{
    display:grid!important;

    grid-template-columns:
        repeat(2,minmax(0,1fr))!important;

    column-gap:12px!important;
    row-gap:13px!important;
}


/* CARD */
[data-page-panel="dashboard"] .service-card{
    position:relative!important;
    overflow:hidden!important;

    display:grid!important;

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

    grid-template-rows:
        52px auto!important;

    column-gap:10px!important;
    row-gap:18px!important;

    align-items:start!important;

    min-width:0!important;
    min-height:184px!important;

    padding:16px!important;

    text-align:left!important;
}


/* ICON — TOP LEFT */
[data-page-panel="dashboard"] .service-icon{
    grid-column:1!important;
    grid-row:1!important;

    justify-self:start!important;
    align-self:start!important;

    width:50px!important;
    height:50px!important;

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

    margin:0!important;

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

    border-radius:16px!important;
}


[data-page-panel="dashboard"] .service-icon svg{
    width:21px!important;
    height:21px!important;
}


/* ARROW — TOP RIGHT */
[data-page-panel="dashboard"] .service-card > b{
    grid-column:2!important;
    grid-row:1!important;

    justify-self:end!important;
    align-self:center!important;

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

    width:26px!important;
    height:26px!important;

    margin:0!important;

    border-radius:50%!important;

    font-size:17px!important;
    line-height:1!important;
}


/* COPY — FULL WIDTH BELOW */
[data-page-panel="dashboard"]
.service-card > span:nth-child(2){
    grid-column:1 / -1!important;
    grid-row:2!important;

    width:100%!important;
    min-width:0!important;

    margin:0!important;
    padding:0!important;

    display:block!important;

    align-self:start!important;

    transform:none!important;
}


/* TITLE */
[data-page-panel="dashboard"] .service-card strong{
    display:block!important;

    width:100%!important;

    margin:0 0 8px!important;
    padding:0!important;

    color:#FFFDF8!important;

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

    line-height:1.10!important;
    letter-spacing:-.025em!important;

    white-space:normal!important;
    overflow:visible!important;
}


/* DESCRIPTION */
[data-page-panel="dashboard"] .service-card small{
    display:block!important;

    width:100%!important;

    margin:0!important;
    padding:0!important;

    color:#B3AEB6!important;

    font-size:11px!important;
    font-weight:500!important;

    line-height:1.48!important;

    white-space:normal!important;
    overflow:visible!important;

    word-break:normal!important;
    overflow-wrap:normal!important;
}


/* MOBILE */
@media(max-width:620px){

    [data-page-panel="dashboard"] .service-card{
        grid-template-columns:
            minmax(0,1fr) 26px!important;

        grid-template-rows:
            50px auto!important;

        row-gap:17px!important;

        min-height:180px!important;

        padding:15px!important;
    }


    [data-page-panel="dashboard"] .service-icon{
        width:48px!important;
        height:48px!important;

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


    [data-page-panel="dashboard"] .service-card strong{
        font-size:15px!important;
    }


    [data-page-panel="dashboard"] .service-card small{
        font-size:10.8px!important;
        line-height:1.47!important;
    }
}


/* SMALL PHONE */
@media(max-width:380px){

    [data-page-panel="dashboard"] .service-card{
        grid-template-rows:
            48px auto!important;

        row-gap:15px!important;

        min-height:174px!important;

        padding:14px!important;
    }


    [data-page-panel="dashboard"] .service-icon{
        width:46px!important;
        height:46px!important;

        min-width:46px!important;
        min-height:46px!important;
    }


    [data-page-panel="dashboard"] .service-card strong{
        font-size:14.5px!important;
    }


    [data-page-panel="dashboard"] .service-card small{
        font-size:10.3px!important;
    }
}


/* ============================================================
   PANDAPAY_GRID_HEIGHT_BALANCE_V7
   Slightly reduce card height while preserving V6 structure
   ============================================================ */

[data-page-panel="dashboard"] .service-card{
    min-height:172px!important;
    padding:15px!important;
    row-gap:15px!important;
}

@media(max-width:620px){

    [data-page-panel="dashboard"] .service-card{
        min-height:166px!important;
        padding:14px!important;
        row-gap:14px!important;
    }

}

@media(max-width:380px){

    [data-page-panel="dashboard"] .service-card{
        min-height:162px!important;
        padding:13px!important;
        row-gap:13px!important;
    }

}


/* ============================================================
   PANDAPAY_GRID_FONT_SIZE_V8
   Slightly increase title and subtitle font sizes
   ============================================================ */

[data-page-panel="dashboard"] .service-card strong{
    font-size:16px!important;
    line-height:1.10!important;
    margin-bottom:8px!important;
}

[data-page-panel="dashboard"] .service-card small{
    font-size:11.5px!important;
    line-height:1.46!important;
    color:#B8B2BA!important;
}

@media(max-width:620px){

    [data-page-panel="dashboard"] .service-card strong{
        font-size:15.5px!important;
    }

    [data-page-panel="dashboard"] .service-card small{
        font-size:11px!important;
        line-height:1.45!important;
    }
}

@media(max-width:380px){

    [data-page-panel="dashboard"] .service-card strong{
        font-size:15px!important;
    }

    [data-page-panel="dashboard"] .service-card small{
        font-size:10.6px!important;
        line-height:1.44!important;
    }
}


/* ============================================================
   PANDAPAY_GRID_FONT_SIZE_V9
   Slightly larger than V8
   ============================================================ */

[data-page-panel="dashboard"] .service-card strong{
    font-size:16.8px!important;
    line-height:1.10!important;
    margin-bottom:8px!important;
}

[data-page-panel="dashboard"] .service-card small{
    font-size:12px!important;
    line-height:1.46!important;
    color:#BBB5BD!important;
}

@media(max-width:620px){

    [data-page-panel="dashboard"] .service-card strong{
        font-size:16.2px!important;
    }

    [data-page-panel="dashboard"] .service-card small{
        font-size:11.4px!important;
        line-height:1.45!important;
    }
}

@media(max-width:380px){

    [data-page-panel="dashboard"] .service-card strong{
        font-size:15.6px!important;
    }

    [data-page-panel="dashboard"] .service-card small{
        font-size:10.9px!important;
        line-height:1.44!important;
    }
}