/*
JCSPAY V73.2 — SLIDER / HORIZONTAL OVERFLOW HOTFIX
Purpose:
- Stop the publicity slide from appearing beside the dashboard.
- Match the current 4-slide JCSPAY publicity HTML.
- Keep the wallet, Add Balance card, Savings, Security and APIs untouched.
*/

html,
body{
    max-width:100%;
    overflow-x:hidden!important;
}

.app-shell,
.main,
.view,
#view-home{
    min-width:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
}

/* The live JCSPAY markup contains FOUR publicity slides. */
.jcs-message-slider{
    position:relative!important;
    display:block!important;
    clear:both!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
}

/* Four slides = 400% track, each slide = 25% of the track. */
.jcs-slider-track{
    display:flex!important;
    width:400%!important;
    max-width:none!important;
    min-width:400%!important;
    animation:jcspaySlider4 24s infinite ease-in-out!important;
    will-change:transform;
}

.jcs-slide{
    flex:0 0 25%!important;
    width:25%!important;
    max-width:25%!important;
    min-width:0!important;
    overflow:hidden!important;
}

.jcs-slide-picture,
.jcs-slide-copy{
    min-width:0!important;
    max-width:100%!important;
}

.jcs-slide-picture img{
    display:block!important;
    max-width:100%!important;
}

@keyframes jcspaySlider4{
    0%,20%{
        transform:translateX(0);
    }
    25%,45%{
        transform:translateX(-25%);
    }
    50%,70%{
        transform:translateX(-50%);
    }
    75%,95%{
        transform:translateX(-75%);
    }
    100%{
        transform:translateX(0);
    }
}

@media (prefers-reduced-motion:reduce){
    .jcs-slider-track{
        animation:none!important;
        transform:translateX(0)!important;
    }
}
/* Hide old JCSPAY publicity slider — V73 uses the new premium slider */
.jcs-message-slider{
    display:none !important;
}
/* JCSPAY V73 — LOCK PROFILE PHOTO INSIDE AVATAR */
#customerAvatar{
    position:relative !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    border-radius:50% !important;
    overflow:hidden !important;
}

#customerAvatar img{
    position:absolute !important;
    inset:0 !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    object-fit:cover !important;
    border-radius:50% !important;
    display:block !important;
    transform:none !important;
}

.profile-btn{
    width:42px !important;
    height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
    overflow:hidden !important;
}
/* =========================================================
   JCSPAY V73 DARK THEME OVERRIDE
   ========================================================= */

body.dark-theme,
body.theme-dark,
body[data-theme="dark"],
html.dark-theme body,
html[data-theme="dark"] body{
    background:#05070b !important;
    color:#f4f7fb !important;
}

/* main page background */
body.dark-theme .app-shell,
body.theme-dark .app-shell,
body[data-theme="dark"] .app-shell,
body.dark-theme .page-shell,
body.theme-dark .page-shell,
body[data-theme="dark"] .page-shell,
body.dark-theme main,
body.theme-dark main,
body[data-theme="dark"] main{
    background:#0a0f14 !important;
}

/* desktop / side menu */
body.dark-theme .sidebar,
body.theme-dark .sidebar,
body[data-theme="dark"] .sidebar,
body.dark-theme .desktop-sidebar,
body.theme-dark .desktop-sidebar,
body[data-theme="dark"] .desktop-sidebar,
body.dark-theme aside,
body.theme-dark aside,
body[data-theme="dark"] aside{
    background:#071a47 !important;
    color:#ffffff !important;
}

/* cards / white sections */
body.dark-theme .card,
body.theme-dark .card,
body[data-theme="dark"] .card,
body.dark-theme .panel,
body.theme-dark .panel,
body[data-theme="dark"] .panel,
body.dark-theme .section-card,
body.theme-dark .section-card,
body[data-theme="dark"] .section-card,
body.dark-theme .service-card,
body.theme-dark .service-card,
body[data-theme="dark"] .service-card,
body.dark-theme .quick-service-card,
body.theme-dark .quick-service-card,
body[data-theme="dark"] .quick-service-card,
body.dark-theme .wallet-side-card,
body.theme-dark .wallet-side-card,
body[data-theme="dark"] .wallet-side-card,
body.dark-theme .savings-card,
body.theme-dark .savings-card,
body[data-theme="dark"] .savings-card,
body.dark-theme .target-card,
body.theme-dark .target-card,
body[data-theme="dark"] .target-card,
body.dark-theme .group-card,
body.theme-dark .group-card,
body[data-theme="dark"] .group-card{
    background:#111827 !important;
    border:1px solid #1f2937 !important;
    color:#f4f7fb !important;
    box-shadow:0 10px 25px rgba(0,0,0,.35) !important;
}

/* headings and text */
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6,
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6{
    color:#f8fafc !important;
}

body.dark-theme p,
body.dark-theme span,
body.dark-theme small,
body.dark-theme label,
body.theme-dark p,
body.theme-dark span,
body.theme-dark small,
body.theme-dark label,
body[data-theme="dark"] p,
body[data-theme="dark"] span,
body[data-theme="dark"] small,
body[data-theme="dark"] label{
    color:#cbd5e1 !important;
}

/* keep balance card beautiful */
body.dark-theme .balance-card,
body.theme-dark .balance-card,
body[data-theme="dark"] .balance-card{
    background:linear-gradient(135deg,#0f8f53 0%, #0c6f42 55%, #0a4f31 100%) !important;
    color:#ffffff !important;
}

/* right add-balance card */
body.dark-theme .wallet-fund-card,
body.theme-dark .wallet-fund-card,
body[data-theme="dark"] .wallet-fund-card{
    background:linear-gradient(180deg,#0f1720 0%, #0b1220 100%) !important;
    border:1px solid #1f2937 !important;
    color:#f8fafc !important;
}

/* quick action buttons */
body.dark-theme .action-card,
body.theme-dark .action-card,
body[data-theme="dark"] .action-card{
    box-shadow:0 8px 18px rgba(0,0,0,.35) !important;
}

/* Savings Hub whole background */
body.dark-theme .savings-hub,
body.theme-dark .savings-hub,
body[data-theme="dark"] .savings-hub,
body.dark-theme .money-plans-section,
body.theme-dark .money-plans-section,
body[data-theme="dark"] .money-plans-section,
body.dark-theme .money-plans-wrap,
body.theme-dark .money-plans-wrap,
body[data-theme="dark"] .money-plans-wrap{
    background:#050505 !important;
    border:1px solid #171717 !important;
    color:#f8fafc !important;
}

/* savings / target / group inner cards */
body.dark-theme .money-plan-card,
body.theme-dark .money-plan-card,
body[data-theme="dark"] .money-plan-card,
body.dark-theme .savings-plan-card,
body.theme-dark .savings-plan-card,
body[data-theme="dark"] .savings-plan-card,
body.dark-theme .target-savings-card,
body.theme-dark .target-savings-card,
body[data-theme="dark"] .target-savings-card,
body.dark-theme .group-meeting-card,
body.theme-dark .group-meeting-card,
body[data-theme="dark"] .group-meeting-card{
    background:#101418 !important;
    border:1px solid #1e242c !important;
    color:#ffffff !important;
}

/* protected badge */
body.dark-theme .protected-badge,
body.theme-dark .protected-badge,
body[data-theme="dark"] .protected-badge{
    background:rgba(32,197,94,.14) !important;
    color:#3ddc84 !important;
}

/* form fields */
body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea,
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea{
    background:#0b1220 !important;
    color:#f8fafc !important;
    border:1px solid #253041 !important;
}

/* bottom nav */
body.dark-theme .bottom-nav,
body.theme-dark .bottom-nav,
body[data-theme="dark"] .bottom-nav,
body.dark-theme .mobile-bottom-nav,
body.theme-dark .mobile-bottom-nav,
body[data-theme="dark"] .mobile-bottom-nav{
    background:#08111c !important;
    border-top:1px solid #1f2937 !important;
}

/* support banner stays visible */
body.dark-theme .jcspay-live-announcement,
body.theme-dark .jcspay-live-announcement,
body[data-theme="dark"] .jcspay-live-announcement{
    background:#c41230 !important;
    color:#ffffff !important;
}
/* =========================================================
   JCSPAY V73 — SOFT DARK SAVINGS HUB
   Not pure black, not white
   ========================================================= */

.jp73-savings-hub{
    background:linear-gradient(145deg,#1b2229,#202932) !important;
    border:1px solid #394550 !important;
    color:#ffffff !important;
}

.jp73-hub-head h3{
    color:#ffffff !important;
}

.jp73-hub-lock{
    background:#223a2e !important;
    color:#43df86 !important;
}

/* Savings */
.jp73-hub-general{
    background:linear-gradient(145deg,#1b3027,#202932) !important;
    border-color:#335b49 !important;
}

/* Target Savings */
.jp73-hub-target{
    background:linear-gradient(145deg,#1d2d43,#202932) !important;
    border-color:#3d5574 !important;
}

/* Group Meetings */
.jp73-hub-group{
    background:linear-gradient(145deg,#39291f,#202932) !important;
    border-color:#68503d !important;
}

.jp73-hub-copy small{
    color:#aeb9c3 !important;
}

.jp73-hub-copy strong,
.jp73-hub-copy b{
    color:#ffffff !important;
}

.jp73-hub-copy em{
    color:#48df86 !important;
}

.jp73-hub-icon{
    background:#26323b !important;
    border:1px solid #3b4852 !important;
}

.jp73-mini-progress{
    background:#35414b !important;
}