/* =========================================================
   eBILLER — MODULE-SPECIFIC STYLES
========================================================= */
#ebillerPage{
    --eb-red:#9f1d1f;
    --eb-red-dark:#861416;
    --eb-red-border:#b51f21;
    --eb-panel:#303030;
    --eb-white:#ffffff;
    --eb-text:#ffffff;
    --eb-muted:#8b8b8b;
    --eb-yellow:#f2db23;
    color:var(--eb-text);
}
/* =========================================================
   HEADER
========================================================= */
.eb-header{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:58px;
}
.eb-header h1{
    margin:0;
    color:#fff;
    font-size:24px;
    font-weight:800;
    line-height:1;
    text-shadow:
        0 3px 8px
        rgba(0,0,0,.4);
}
/* =========================================================
   SCROLLABLE PAGE CONTENT
========================================================= */
.eb-page-content{
    /*
     * Horizontal spacing matches the OneBuy dashboard.
     */
    padding-right:26px;
    padding-left:26px;
}
/*
 * JavaScript adds this class when navigation is hidden.
 */
.eb-page-content.no-bottom-nav{
    padding-bottom:
        max(
            24px,
            env(safe-area-inset-bottom)
        );
}
/* =========================================================
   PERSONAL / BUSINESS TABS
========================================================= */
.eb-mode-tabs{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    width:100%;
    margin-top:8px;
}
.eb-mode-tab{
    width:100%;
    min-width:0;
    min-height:50px;
    margin:0;
    padding:0 8px;
    border:2px solid #fff;
    border-radius:0;
    background:var(--eb-red);
    color:#fff;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
}
.eb-mode-tab:first-child{
    border-radius:
        11px
        0
        0
        11px;
}
.eb-mode-tab:last-child{
    border-radius:
        0
        11px
        11px
        0;
}
.eb-mode-tab.active{
    background:#fff;
    color:var(--eb-red);
}
/* =========================================================
   INTERNAL SCREENS
========================================================= */
.eb-screen{
    margin-top:20px;
}
.eb-screen[hidden]{
    display:none !important;
}
/* =========================================================
   SEARCH
========================================================= */
.eb-search-row{
    width:100%;
}
.eb-search-box{
    display:flex;
    align-items:center;
    width:100%;
    height:46px;
    overflow:hidden;
    border:
        1px solid
        var(--eb-red-border);
    border-radius:11px;
    background:#fff;
}
.eb-search-box input{
    flex:1;
    min-width:0;
    height:100%;
    margin:0;
    padding:0 10px;
    border:0 !important;
    border-radius:0 !important;
    outline:0;
    background:transparent;
    box-shadow:none !important;
    color:#222;
    font-size:14px;
    font-style:italic;
}
.eb-search-box input:focus{
    border:0 !important;
    outline:0;
    box-shadow:none !important;
}
.eb-search-qr{
    display:flex;
    flex:
        0
        0
        47px;
    align-items:center;
    justify-content:center;
    width:47px;
    height:100%;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:#fff;
    color:#111;
    cursor:pointer;
}
.eb-search-qr img{
    display:block;
    width:25px;
    height:25px;
    object-fit:contain;
}
/* =========================================================
   PANELS
========================================================= */
.eb-panel,
.eb-info-panel,
.eb-form-panel{
    margin-top:14px;
    padding:11px;
    border:
        1px solid
        var(--eb-red-border);
    border-radius:13px;
    background:var(--eb-panel);
}
.eb-panel h2,
.eb-info-panel h2{
    margin:
        0
        0
        10px;
    font-size:17px;
    font-weight:800;
}
.eb-white-content{
    min-height:165px;
    padding:10px;
    border:
        1px solid
        var(--eb-red-border);
    border-radius:13px;
    background:#fff;
    color:#222;
}
/* =========================================================
   BUSINESS INTRO
========================================================= */
.eb-info-panel{
    padding:22px 20px;
    font-size:16px;
    line-height:1.55;
    margin-bottom:30px;
}
.eb-info-panel h2{
    margin-bottom:42px;
    line-height:1.5;
}
.eb-info-panel h3{
    margin:
        0
        0
        4px;
    text-decoration:underline;
}
.eb-info-panel p{
    margin:
        0
        0
        6px;
}
.eb-info-panel strong{
    color:var(--eb-yellow);
}
/* =========================================================
   PERSONAL ACTIVE STORES
========================================================= */
.eb-store-list{
    display:flex;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}
.eb-store-card{
    display:block;
    flex:
        0
        0
        122px;
    align-self:flex-start;
    width:122px;
    height:auto;
    margin:0;
    padding:10px;
    border:0;
    border-radius:11px;
    background:#f7af3f;
    color:#222;
    box-shadow:
        0 11px 18px
        rgba(0,0,0,.3);
    cursor:pointer;
}
.eb-store-card img{
    display:block;
    width:100%;
    height:60px;
    object-fit:contain;
}
.eb-store-fallback{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:60px;
    border-radius:8px;
    background:#fff;
    color:var(--eb-red);
    font-size:24px;
    font-weight:800;
}
.eb-store-card strong{
    display:block;
    margin-top:5px;
    overflow:hidden;
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}
/* =========================================================
   CONNECT COMPANY
========================================================= */
.eb-id-connect-row{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        108px;
    align-items:stretch;
    width:100%;
    gap:8px;
}
.eb-id-connect-row input,
.eb-id-connect-row .eb-small-action{
    height:48px;
    min-height:48px;
    margin:0;
    box-sizing:border-box;
}
.eb-id-connect-row input{
    width:100%;
    min-width:0;
    padding:0 14px;
    border:
        1px solid
        var(--eb-red-border);
    border-radius:10px;
    outline:none;
    background:#fff;
    color:#222;
    font-size:15px;
    font-style:italic;
}
.eb-id-connect-row .eb-small-action{
    display:flex;
    align-items:center;
    justify-content:center;
    width:108px;
    padding:0 10px;
    border:2px solid #fff;
    border-radius:10px;
    background:var(--eb-red);
    color:#fff;
    font-size:14px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
}
.eb-scan-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:292px;
    margin-top:18px;
    border:
        1px solid
        var(--eb-red-border);
    border-radius:13px;
    background:var(--eb-panel);
    color:var(--eb-yellow);
    font-size:17px;
    font-weight:700;
    cursor:pointer;
}
.eb-circle-action{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:76px;
    height:76px;
    margin:
        14px
        auto
        0;
    padding:0;
    border:2px solid #fff;
    border-radius:50%;
    background:var(--eb-red);
    color:#fff;
    box-shadow:
        0 8px 14px
        rgba(0,0,0,.35);
    cursor:pointer;
}
.eb-circle-action img{
    width:28px;
    height:28px;
    object-fit:contain;
    filter:
        brightness(0)
        invert(1);
}
.eb-circle-action span{
    margin-top:5px;
    color:#fff;
    font-size:12px;
    font-weight:800;
    line-height:1;
}
/* =========================================================
   REGISTRATION FORM
========================================================= */
.eb-form-panel{
    padding:11px;
}
.eb-role-selector{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:
        0
        0
        15px;
    padding:0;
    border:0;
}
.eb-role-selector legend{
    width:100%;
    margin-bottom:6px;
    font-weight:700;
}
.eb-role-selector label{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-weight:800;
}
.eb-field{
    margin-top:11px;
}
.eb-field label{
    display:block;
    margin-bottom:5px;
    font-size:16px;
    font-weight:600;
}
.eb-field input,
.eb-field select{
    width:100%;
    height:41px;
    padding:0 11px;
    border:
        1px solid
        var(--eb-red-border);
    border-radius:10px;
    outline:0;
    background:#fff;
    color:#222;
    font-size:15px;
}
.eb-field input:read-only{
    background:#ededed;
    color:#555;
}
.eb-form-actions{
    margin-top:18px;
}
.eb-primary-wide,
.eb-secondary-wide{
    width:100%;
    min-height:42px;
    margin:0;
    border:2px solid #fff;
    border-radius:10px;
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
}
.eb-primary-wide{
    background:var(--eb-red);
}
.eb-secondary-wide{
    margin-top:9px;
    background:var(--eb-red-dark);
}
/* =========================================================
   BUSINESS DASHBOARD CARDS
========================================================= */
.eb-dashboard-card-list{
    display:grid;
    gap:13px;
    margin-top:13px;
}
.eb-dashboard-card{
    padding:10px;
    border:
        1px solid
        var(--eb-red-border);
    border-radius:13px;
    background:var(--eb-panel);
}
.eb-dashboard-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:9px;
}
.eb-dashboard-card-header h2{
    margin:0;
    font-size:16px;
}
.eb-dashboard-card-header span{
    min-width:28px;
    padding:3px 7px;
    border-radius:10px;
    background:var(--eb-red);
    font-size:12px;
    font-weight:800;
    text-align:center;
}
.eb-dashboard-content{
    min-height:74px;
    padding:8px;
    border:
        1px solid
        var(--eb-red-border);
    border-radius:12px;
    background:#fff;
    color:#222;
}
.eb-dashboard-row{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        auto;
    align-items:center;
    gap:8px;
    padding:6px;
    border:
        1px solid
        var(--eb-red-border);
    border-radius:9px;
}
.eb-dashboard-row + .eb-dashboard-row{
    margin-top:7px;
}
.eb-dashboard-row-main{
    min-width:0;
}
.eb-dashboard-row-main strong{
    display:block;
    overflow:hidden;
    font-size:13px;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.eb-dashboard-row-main small{
    display:block;
    margin-top:2px;
    color:#686868;
}
.eb-row-actions{
    display:flex;
    gap:5px;
}
.eb-row-btn{
    min-height:30px;
    margin:0;
    padding:0 13px;
    border:0;
    border-radius:4px;
    background:var(--eb-red);
    color:#fff;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}
.eb-row-btn.danger{
    background:#821012;
}
.eb-row-btn.approve{
    background:#2f7d32;
}
/* =========================================================
   EMPTY STATES
========================================================= */
.eb-empty-state{
    display:grid;
    min-height:120px;
    place-items:center;
    color:#777;
    text-align:center;
}
/* =========================================================
   eBILLER BOTTOM NAVIGATION
========================================================= */
#ebBottomNav{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:30;
    height:70px;
    padding:
        7px
        25px
        max(
            7px,
            env(safe-area-inset-bottom)
        );
    display:grid;
    gap:8px;
    background:
        rgba(141,11,17,.94);
    border-top:
        1px solid
        rgba(255,255,255,.08);
    backdrop-filter:
        blur(10px);
    -webkit-backdrop-filter:
        blur(10px);
    box-sizing:border-box;
}
#ebBottomNav[hidden]{
    display:none !important;
}
#ebBottomNav.nav-4{
    grid-template-columns:
        repeat(4,minmax(0,1fr));
}
#ebBottomNav.nav-5{
    grid-template-columns:
        repeat(5,minmax(0,1fr));
}
#ebBottomNav .eb-nav-item{
    width:100%;
    height:56px;
    min-width:0;
    margin:0;
    padding:
        6px
        3px
        4px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:12px;
    background:
        rgba(174,30,34,.78);
    color:#fff;
    box-shadow:
        0 3px 9px
        rgba(0,0,0,.2);
    cursor:pointer;
    overflow:hidden;
    -webkit-tap-highlight-color:
        transparent;
}
#ebBottomNav .eb-nav-item img{
    width:22px;
    height:22px;
    flex:
        0
        0
        22px;
    object-fit:contain;
    filter:
        brightness(0)
        invert(1);
    opacity:.82;
}
#ebBottomNav .eb-nav-item.active img{
    opacity:1;
}
#ebBottomNav .eb-nav-item span{
    display:block;
    width:100%;
    margin-top:5px;
    overflow:hidden;
    color:#fff;
    font-size:9px;
    font-weight:700;
    line-height:1;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#ebBottomNav .eb-nav-item.active{
    background:#B32024;
}
/*
 * Prevent page content from sitting behind
 * the fixed-height navigation.
 */
#ebillerContent:not(.no-bottom-nav){
    padding-bottom:
        calc(
            86px +
            env(safe-area-inset-bottom)
        );
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media(max-width:370px){
    .eb-page-content{
        padding-right:18px;
        padding-left:18px;
    }
    .eb-mode-tab{
        font-size:14px;
    }
    .eb-info-panel{
        padding:17px 15px;
        font-size:14px;
    }
    .eb-id-connect-row{
        grid-template-columns:
            minmax(0,1fr)
            96px;
        gap:6px;
    }
    .eb-id-connect-row .eb-small-action{
        width:96px;
        font-size:12px;
    }
}