/* _content/AdvEntLotto.Web/Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-so3ijdm1hb] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-so3ijdm1hb] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
 
/* _content/AdvEntLotto.Web/Components/Layout/Sidebar.razor.rz.scp.css */
.brand-logo-name[b-st37t1c0gd] {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

    .brand-logo-name span[b-st37t1c0gd] {
        color: #e3b83a;
    }
 
.nav-section-label[b-st37t1c0gd] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .28);
    padding: 12px 18px 5px;
}

.nav-item[b-st37t1c0gd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    color: #ffffffd4;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms cubic-bezier(.4, 0, .2, 1);
    border-left: 3px solid transparent;
    margin: 1px 0;
    font-family: system-ui;
    width: 100%;
    background: transparent; 
    border-right:none;
    border-top:none;
    border-bottom:none;
}

    .nav-item:hover[b-st37t1c0gd] {
        color: rgba(255, 255, 255, .9);
        background: rgba(255, 255, 255, .05);
    }

    .nav-item.active[b-st37t1c0gd] {
        color: white;
        background: rgba(37, 84, 168, .32);
        border-left: 3px solid #e3b83a;
    }

.logout-btn[b-st37t1c0gd] {
    padding: 9px 10px;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: background 200ms cubic-bezier(.4, 0, .2, 1);
    width: 100%;
    background-color: #e3b83a;
    font-size: 16px;
    /* This block declared no `color`, so the button fell back to the UA
       default for button text. Chrome resolves that to a dark `buttontext`,
       but Safari resolves it to the iOS system accent — the label rendered
       BLUE on gold on iPhone. Always state the colour on a restyled button.
       #1e293b is the existing shell colour (app.css:61).
       appearance:none stops Safari reapplying its other native button
       defaults on top of this styling. */
    color: #1e293b;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    border: none;
}

.sl-user-row[b-st37t1c0gd] {
    display: flex;
    align-items: stretch;
    gap: 11px;
}

.sl-rule[b-st37t1c0gd] {
    width: 3px;
    border-radius: 2px;
    background: #f5c842;
    flex-shrink: 0;
}

.sl-user-details[b-st37t1c0gd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.sl-uname[b-st37t1c0gd] {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
}

.sl-umeta[b-st37t1c0gd] {
    display: flex;
    align-items: center;
    gap: 0;
}

.sl-meta-item[b-st37t1c0gd] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: #ffffffe0;
}

    .sl-meta-item i[b-st37t1c0gd] {
        font-size: 11px;
        color: rgba(245, 200, 66, 0.6);
    }

.sl-meta-sep[b-st37t1c0gd] {
    color: rgba(255, 255, 255, 0.15);
    margin: 0 6px;
    font-size: 10px;
}

@media screen and (max-width: 1024px) and (max-height: 768px) {
    .nav-item[b-st37t1c0gd] {
        font-size: 12px;
        padding: 7px 16px;
    }

    .logout-btn[b-st37t1c0gd] {
        padding: 6px 10px;
        font-size: 14px;
    }

    .nav-section-label[b-st37t1c0gd] { 
        padding: 12px 18px 5px;
    }
}

/* _content/AdvEntLotto.Web/Components/Pages/ChangePasswordModal.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════════════════
   Change Password modal
   ──────────────────────────────────────────────────────────────────────────────
   Scoped to the component on purpose. The field styling this modal needs
   (label.fl, .input-icon, .ferr, the input skin) lives in Registration.razor.css
   and ForgotPassword.razor.css, which are scoped to *those* components - the
   rules never reached this one. Everything the modal renders is therefore
   defined here rather than borrowed.

   Palette matches the rest of the auth surfaces: gold #F5C518 on cream #FFFBF0.
   ══════════════════════════════════════════════════════════════════════════════ */

.modal[b-iu2i1fbk4j] {
    animation: modalPop-b-iu2i1fbk4j .32s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes modalPop-b-iu2i1fbk4j {
    from {
        opacity: 0;
        transform: scale(.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-content[b-iu2i1fbk4j] {
    box-shadow: 0 24px 80px rgba(26, 18, 40, .18), 0 8px 24px rgba(26, 18, 40, .1);
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */

.cp-header[b-iu2i1fbk4j] {
    position: relative;
    background: linear-gradient(135deg, #FFFDF4 0%, #FFF6D9 100%);
    gap: 14px;
}

.cp-header-row[b-iu2i1fbk4j] {
    display: flex;
    align-items: center;
    gap: 13px;
}

.cp-badge[b-iu2i1fbk4j] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #0B0E1A;
    background: linear-gradient(135deg, #FFE066, #F5C518, #C49A0A);
    box-shadow: 0 6px 18px rgba(245, 197, 24, .38);
}

.cp-title[b-iu2i1fbk4j] {
    font-size: 19px;
    font-weight: 700;
    color: #1A1228;
    letter-spacing: .6px;
    margin: 0;
}

.cp-sub[b-iu2i1fbk4j] {
    font-size: 12.5px;
    color: rgba(26, 18, 40, .55);
    letter-spacing: .2px;
    line-height: 1.45;
    margin: 2px 0 0;
}

.modal-close[b-iu2i1fbk4j] {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(26, 18, 40, .1);
    background: #FFFBF0;
    color: rgba(26, 18, 40, .5);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

    .modal-close:hover[b-iu2i1fbk4j] {
        background: rgba(26, 18, 40, .08);
        color: #1A1228;
    }

/* ── Fields ─────────────────────────────────────────────────────────────────── */

.cp-body[b-iu2i1fbk4j] {
    padding: 20px 24px 4px;
}

.cp-section[b-iu2i1fbk4j] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #8A6A00;
    padding-bottom: .45rem;
    border-bottom: 1.5px solid rgba(196, 154, 10, .18);
    margin: 20px 0 12px;
}

label.fl[b-iu2i1fbk4j] {
    display: block;
    font-size: 11.3px;
    font-weight: 600;
    color: #3D3152;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.input-wrap[b-iu2i1fbk4j] {
    position: relative;
}

.input-icon[b-iu2i1fbk4j] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    z-index: 2;
    font-size: 13px;
    color: #C49A0A;
    pointer-events: none;
}

.cp-body input[type=text][b-iu2i1fbk4j],
.cp-body input[type=password][b-iu2i1fbk4j] {
    width: 100%;
    padding: 8px 40px 8px 35px;
    background: #FFFBF0;
    border: 1.5px solid rgba(26, 18, 40, .1);
    border-radius: 8px;
    color: #1A1228;
    font-size: 14px;
    letter-spacing: .5px;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

    .cp-body input[type=text]:focus[b-iu2i1fbk4j],
    .cp-body input[type=password]:focus[b-iu2i1fbk4j] {
        border-color: #F5C518;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(245, 197, 24, .12);
    }

    .cp-body input[b-iu2i1fbk4j]::placeholder {
        color: rgba(26, 18, 40, .28);
        letter-spacing: normal;
    }

    .cp-body input:disabled[b-iu2i1fbk4j] {
        opacity: .6;
        cursor: not-allowed;
    }

/* Invalid only once the field has been touched - no red on a form you have not filled in yet. */
.input-wrap.is-invalid input[b-iu2i1fbk4j] {
    border-color: #e08585;
    background: #fff8f8;
}

.input-wrap.is-valid input[b-iu2i1fbk4j] {
    border-color: rgba(46, 204, 113, .55);
}

.toggle-pw[b-iu2i1fbk4j] {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    color: #7A7D8A;
    font-size: 14px;
    padding: 2px 4px;
    line-height: 1;
}

    .toggle-pw:hover[b-iu2i1fbk4j] {
        color: #C49A0A;
    }

.ferr[b-iu2i1fbk4j] {
    font-size: .72rem;
    color: #c00;
    margin-top: 4px;
    padding-left: 1px;
    line-height: 1.3;
}

.cp-ok[b-iu2i1fbk4j] {
    font-size: .72rem;
    color: #1c8b4b;
    margin-top: 4px;
    padding-left: 1px;
}

/* ── Strength meter ─────────────────────────────────────────────────────────── */

.cp-strength[b-iu2i1fbk4j] {
    margin-top: 10px;
}

.cp-bars[b-iu2i1fbk4j] {
    display: flex;
    gap: 4px;
}

.cp-bar[b-iu2i1fbk4j] {
    flex: 1;
    height: 4px;
    border-radius: 3px;
    background: rgba(26, 18, 40, .1);
    transition: background .25s;
}

    .cp-bar.on-1[b-iu2i1fbk4j] {
        background: #e05252;
    }

    .cp-bar.on-2[b-iu2i1fbk4j] {
        background: #e08b2e;
    }

    .cp-bar.on-3[b-iu2i1fbk4j] {
        background: #d9b310;
    }

    .cp-bar.on-4[b-iu2i1fbk4j] {
        background: #2ecc71;
    }

.cp-strength-label[b-iu2i1fbk4j] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 5px;
    font-size: .7rem;
    color: rgba(26, 18, 40, .5);
}

    .cp-strength-label b[b-iu2i1fbk4j] {
        font-weight: 700;
        letter-spacing: .5px;
    }

.s-1[b-iu2i1fbk4j] {
    color: #e05252;
}

.s-2[b-iu2i1fbk4j] {
    color: #c2761f;
}

.s-3[b-iu2i1fbk4j] {
    color: #a8890b;
}

.s-4[b-iu2i1fbk4j] {
    color: #1c8b4b;
}

/* ── Requirement checklist ──────────────────────────────────────────────────── */

.cp-rules[b-iu2i1fbk4j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2px 12px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(196, 154, 10, .22);
    border-radius: 10px;
    background: #FFFDF4;
}

.cp-rule[b-iu2i1fbk4j] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .72rem;
    color: rgba(26, 18, 40, .55);
    line-height: 1.7;
    transition: color .2s;
}

    .cp-rule i[b-iu2i1fbk4j] {
        font-size: .68rem;
        width: 11px;
        text-align: center;
        flex-shrink: 0;
        color: rgba(26, 18, 40, .25);
        transition: color .2s;
    }

    .cp-rule.met[b-iu2i1fbk4j] {
        color: #1c8b4b;
    }

        .cp-rule.met i[b-iu2i1fbk4j] {
            color: #2ecc71;
        }

/* ── Footer ─────────────────────────────────────────────────────────────────── */

.cp-alert[b-iu2i1fbk4j] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 0;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1.5px solid #f3c2c2;
    background: #fff6f6;
    font-size: .76rem;
    color: #b3261e;
    line-height: 1.4;
}

    .cp-alert i[b-iu2i1fbk4j] {
        margin-top: 1px;
    }

.modal-footer button:disabled[b-iu2i1fbk4j] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

@media screen and (max-width: 1024px) and (max-height: 768px) {
    .cp-title[b-iu2i1fbk4j] {
        font-size: 17px;
    }

    .cp-sub[b-iu2i1fbk4j] {
        font-size: 11.5px;
    }

    .cp-badge[b-iu2i1fbk4j] {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    label.fl[b-iu2i1fbk4j] {
        font-size: 11px;
    }

    .cp-body input[type=text][b-iu2i1fbk4j],
    .cp-body input[type=password][b-iu2i1fbk4j] {
        font-size: 13px;
    }
}
/* _content/AdvEntLotto.Web/Components/Pages/ForgotPassword.razor.rz.scp.css */
.modal[b-ecjf2emhcp] {
    animation: modalPop-b-ecjf2emhcp .32s cubic-bezier(.34, 1.56, .64, 1) both;
    box-shadow: 0 24px 80px rgba(26, 18, 40, .18), 0 8px 24px rgba(26, 18, 40, .1);
}

@keyframes modalPop-b-ecjf2emhcp {
    from {
        opacity: 0;
        transform: scale(.9) translateY(20px)
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

.modal-content[b-ecjf2emhcp] {
    padding: 30px;
}

.commonmodalheader[b-ecjf2emhcp] {
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important;
    padding-bottom: 20px !important;
    border-bottom: 0px !important
}

.modal-close[b-ecjf2emhcp] {
    position: absolute;
    top: 20px;
    right: 30px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(26, 18, 40, 0.1);
    background: #FFFBF0;
    color: rgba(26, 18, 40, 0.5);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s
}

    .modal-close:hover[b-ecjf2emhcp] {
        background: rgba(26, 18, 40, .08);
        color: #1A1228
    }

.modal-title[b-ecjf2emhcp] {
    font-family: 'Playfair Display', serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #1A1228;
    margin-bottom: 0rem
}

.modal-sub[b-ecjf2emhcp] {
    font-size: .875rem;
    color: rgba(26, 18, 40, 0.5);
    margin-bottom: 0rem;
    line-height: 1.5; 
}

/* Progress dots */
.fp-dots[b-ecjf2emhcp] {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items:center;
    margin-bottom: 0rem;
}

.fp-dot[b-ecjf2emhcp] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0000006e;
    transition: all .3s;
}

    .fp-dot.active[b-ecjf2emhcp] {
        background: #F5C518;
        width: 20px;
        border-radius: 4px;
        box-shadow: 0 0 8px rgba(245, 197, 24, .4)
    }

    .fp-dot.done[b-ecjf2emhcp] {
        background: rgba(46, 204, 113, .7)
    }

.forgotheader[b-ecjf2emhcp] {
    display: flex !important;
    padding: 0px !important;
    flex-direction: row !important;
    justify-content: start !important;
    gap: 15px;
    align-items: center !important;
    margin-bottom:20px;
}

.btn-forgot[b-ecjf2emhcp] {
    background: linear-gradient(135deg, #FFE066, #F5C518, #C49A0A);
    color: #0B0E1A;
    box-shadow: 0 8px 32px rgba(245, 197, 24, .35);
    padding: 12px 40px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .25s;
    width: 100%;
    letter-spacing: 1px;
}

    .btn-forgot:hover[b-ecjf2emhcp] {
        box-shadow: 0 12px 42px rgba(245, 197, 24, .5);
        transform: translateY(-2px)
    }

/* Timer ring */
.timer-ring-wrap[b-ecjf2emhcp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.2rem 0 1.5rem;
    gap: .4rem;
}

.timer-ring[b-ecjf2emhcp] {
    position: relative;
    width: 64px;
    height: 64px;
}

    .timer-ring svg[b-ecjf2emhcp] {
        transform: rotate(-90deg);
    }

    .timer-ring .ring-bg[b-ecjf2emhcp] {
        fill: none;
        stroke: rgba(255, 255, 255, .08);
        stroke-width: 4
    }

    .timer-ring .ring-fg[b-ecjf2emhcp] {
        fill: none;
        stroke: #F5C518;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-dasharray: 163;
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 1s linear, stroke .3s
    }

    .timer-ring .ring-num[b-ecjf2emhcp] {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .92rem;
        font-weight: 700;
        color: #F5C518;
    }

.timer-label[b-ecjf2emhcp] {
    font-size: .75rem;
    color: black;
    letter-spacing: .5px
}

/* ─── SUCCESS ─── */
.success-view[b-ecjf2emhcp] {
    text-align: center;
}

.success-icon[b-ecjf2emhcp] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    display: block;
    animation: pop-b-ecjf2emhcp .5s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes pop-b-ecjf2emhcp {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.success-title[b-ecjf2emhcp] {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1A1228;
    margin-bottom: .5rem
}

.success-sub[b-ecjf2emhcp] {
    font-size: .9rem;
    color: #1a1228ed;
    line-height: 1.65;
    margin-bottom: 1.5rem
}

/* Toggle password button */
.toggle-pw[b-ecjf2emhcp] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    color: #7A7D8A;
    font-size: 16px;
    padding: 0;
}

    /* Hover effect */
    .toggle-pw:hover[b-ecjf2emhcp] {
        color: #F5A623;
    }

@media screen and (max-width: 1024px) and (max-height: 768px) {
    .modal-icon[b-ecjf2emhcp] {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin-bottom: 0rem
    }

    .modal-title[b-ecjf2emhcp] {
        font-size: 21px;
    }

    .modal-sub[b-ecjf2emhcp] {
        font-size: 13px;
        color: rgba(26, 18, 40, 0.5);
        margin-bottom: 0rem;
        line-height: 1.5
    }

    label.fl[b-ecjf2emhcp] {
        font-size: 11px;
    }

    input[type=text][b-ecjf2emhcp], input[type=email][b-ecjf2emhcp], input[type=password][b-ecjf2emhcp], input[type=tel][b-ecjf2emhcp], input[type=number][b-ecjf2emhcp], select[b-ecjf2emhcp], textarea[b-ecjf2emhcp] {
        font-size: 13px;
    }

    .btn-forgot[b-ecjf2emhcp] {
        padding: 10px 40px;
        font-size: 14px;
    }
}
/* _content/AdvEntLotto.Web/Components/Pages/Home.razor.rz.scp.css */
.stat-card[b-qu3c45jn2h] {
    background: white;
    border-radius: 14px;
    padding: 20px 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .stat-card:hover[b-qu3c45jn2h] {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.05);
    }

.stat-card-icon[b-qu3c45jn2h] {
    padding: 10px;
    font-size: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card.blue[b-qu3c45jn2h] {
    border-top: 3px solid #1e4080;
}

.stat-card.purple[b-qu3c45jn2h] {
    border-top: 3px solid #8b5cf6;
}

.stat-card.gold[b-qu3c45jn2h] {
    border-top: 3px solid #d97706;
}

.stat-card.green[b-qu3c45jn2h] {
    border-top: 3px solid #16a34a;
}

.stat-card.amber[b-qu3c45jn2h] {
    border-top: 3px solid #f59e0b;
}

.stat-card.rose[b-qu3c45jn2h] {
    border-top: 3px solid #f43f5e;
}

.stat-card.blue .stat-icon[b-qu3c45jn2h] {
    background: #dceeff;
    color: #1e4080;
}

.stat-card.purple .stat-icon[b-qu3c45jn2h] {
    background: #8b5cf62b;
    color: #8b5cf6;
}

.stat-card.gold .stat-icon[b-qu3c45jn2h] {
    background: #fef3c7;
    color: #d97706;
}

.stat-card.green .stat-icon[b-qu3c45jn2h] {
    background: #dcfce7;
    color: #16a34a;
}

.stat-card.amber .stat-icon[b-qu3c45jn2h] {
    background: #fef3c7;
    color: #f59e0b;
}

.stat-card.rose .stat-icon[b-qu3c45jn2h] {
    background: #ffe4e6;
    color: #f43f5e;
}

.card-top[b-qu3c45jn2h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-label[b-qu3c45jn2h] {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-value[b-qu3c45jn2h] {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 0px;
}

.stat-sub[b-qu3c45jn2h] {
    font-size: 14px;
    color: #5c5e61;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .stat-sub .chip[b-qu3c45jn2h] {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        background: #dffff0;
        color: #0aa572;
        font-size: 13px;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 20px;
    }

        .stat-sub .chip.blue[b-qu3c45jn2h] {
            background: #dceeff;
            color: #1e4080;
        }

        .stat-sub .chip.gold[b-qu3c45jn2h] {
            background: #fff7ed;
            color: #f97316;
        }

        .stat-sub .chip.green[b-qu3c45jn2h] {
            background: #dcfce7;
            color: #16a34a;
        }

/*.commonwhitecard {
    height: 100%;
}*/

.quick-links-card[b-qu3c45jn2h] {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.quick-grid[b-qu3c45jn2h] {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px; 
    grid-auto-rows: 1fr;
    min-height: 0;
}

.btnquick[b-qu3c45jn2h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    height: 100%;
    min-height: 90px;
    border-radius: 12px;
    background: #0058ff29;
    border: 1.5px solid #0000000f;
    box-shadow: 1px 1px 15px #0058ff1c;
    transition: all 0.25s ease;
    padding: 12px;
    text-align: center;
}

    .btnquick:hover[b-qu3c45jn2h] {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 8px 25px rgba(0, 88, 255, 0.3);
        border: 1px solid #0058ff87;
    }

    .btnquick p[b-qu3c45jn2h] {
        color: black;
        font-size: 14px;
        letter-spacing:0.7px;
    }

    .btnquick h6[b-qu3c45jn2h] {
        color: #0058ff;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 5px;
    }

.top-games[b-qu3c45jn2h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.game-row[b-qu3c45jn2h] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.game-name[b-qu3c45jn2h] {
    font-size: 12px;
    color: black;
    width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.game-bar-wrap[b-qu3c45jn2h] {
    flex: 1;
    height: 8px;
    background: #eaecef;
    border-radius: 99px;
    overflow: hidden;
}

.game-bar[b-qu3c45jn2h] {
    height: 100%;
    border-radius: 99px;
}

.game-val[b-qu3c45jn2h] {
    font-size: 12px;
    font-weight: 500;
    color: black;
    width: 44px;
    text-align: right;
    flex-shrink: 0;
}
 
.activity-feed[b-qu3c45jn2h] {
    display: flex;
    flex-direction: column;
    gap: 0;
    /*margin-top: 4px;*/
}

.activity-item[b-qu3c45jn2h] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0; 
}

    .activity-item:last-child[b-qu3c45jn2h] {
        border-bottom: none;
    }

.act-dot[b-qu3c45jn2h] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}

.dot-green[b-qu3c45jn2h] {
    background: #639922;
}

.dot-blue[b-qu3c45jn2h] {
    background: #2d6be4;
}

.dot-amber[b-qu3c45jn2h] {
    background: #ba7517;
}

.dot-red[b-qu3c45jn2h] {
    background: #e24b4a;
}

.act-body[b-qu3c45jn2h] {
    flex: 1;
}

.act-title[b-qu3c45jn2h] {
    font-size: 13px;
    color: black;
}

.act-time[b-qu3c45jn2h] {
    font-size: 11px;
    color: black;
    margin-top: 1px;
}

@media screen and (max-width: 1024px) and (max-height: 768px) {
    .stat-card[b-qu3c45jn2h] {
        padding: 12px;
    }

    .stat-card-icon[b-qu3c45jn2h] {
        padding: 8px;
        font-size: 18px;
    }

    .stat-label[b-qu3c45jn2h] {
        font-size: 10.4px;
    }

    .stat-value[b-qu3c45jn2h] {
        font-size: 18px;
    }

    .quick-grid[b-qu3c45jn2h] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .btnquick[b-qu3c45jn2h] {
        height:82px;
    }

    .btnquick p[b-qu3c45jn2h] {
        color: black;
        font-size: 11px;
    }

    .btnquick h6[b-qu3c45jn2h] { 
        font-size: 13px; 
    } 
}
/* _content/AdvEntLotto.Web/Components/Pages/LandingPage.razor.rz.scp.css */
.hero-section[b-2g62t1czcl] {
    position: relative;
    background: url('/images/bg-img.png') no-repeat 78% center;
    background-size: cover;
    min-height: 100vh; /* full screen */
    box-sizing: border-box;
    padding: 96px 0 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

    /* Overlay */
    .hero-section[b-2g62t1czcl]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, rgba(0, 0, 0, .97) 0%, rgba(0, 0, 0, .9) 40%, rgba(0, 0, 0, .5) 68%, rgba(0, 0, 0, .18) 100%);
        z-index: 1;
    }

.brand-logo[b-2g62t1czcl] {
    position: absolute;
    top: 28px;
    left: 36px;
    height: 44px;
    width: auto;
    z-index: 3;
    animation: fadeUp-b-2g62t1czcl 1s ease both;
}

.hero[b-2g62t1czcl] {
    text-align: left;
    max-width: 720px;
    padding: 0 20px;
    margin-left: clamp(24px, 7vw, 110px);
    animation: fadeUp-b-2g62t1czcl 1s ease both;
    z-index: 2;
}

@keyframes fadeUp-b-2g62t1czcl {
    from {
        opacity: 0;
        transform: translateY(32px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.badge[b-2g62t1czcl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    border: 1px solid rgba(245, 197, 24, 0.25);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #F5C518;
    background: rgba(245, 197, 24, .07);
    margin-bottom: 1rem;
    animation: fadeUp-b-2g62t1czcl 1s .1s both
}

    .badge[b-2g62t1czcl]::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #F5C518;
        animation: pulse 1.5s infinite
    } 

.hero h1[b-2g62t1czcl] {
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, min(9vw, 10vh), 100px);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 0rem;
    color: white;
    animation: fadeUp-b-2g62t1czcl 1s .2s both
}

    h1 em[b-2g62t1czcl] {
        font-style: normal;
        color: #F5C518;
        text-shadow: 0 0 55px rgba(245, 197, 24, .4)
    }

/* ─── HERO BUTTONS ─── */
.btn-group[b-2g62t1czcl] {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    animation: fadeUp-b-2g62t1czcl 1s .4s both;
    margin-bottom: 15px;
}

.btn-gold[b-2g62t1czcl] {
    background: linear-gradient(135deg, #FFE066, #F5C518, #C49A0A);
    color: #0B0E1A;
    box-shadow: 0 8px 32px rgba(245, 197, 24, .35);
    padding: 15px 40px;
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .25s;
}

    .btn-gold:hover[b-2g62t1czcl] {
        box-shadow: 0 12px 42px rgba(245, 197, 24, .5);
        transform: translateY(-2px)
    }

.btn-outline[b-2g62t1czcl] {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(10px);
    padding: 15px 40px;
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s;
}

    .btn-outline:hover[b-2g62t1czcl] {
        background: rgba(255, 255, 255, .12);
        border-color: rgba(255, 255, 255, .5);
        transform: translateY(-2px)
    }

.version[b-2g62t1czcl] {
    display: block;
    margin-top: 28px;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    letter-spacing: 1.5px;
    font-weight: 500;
    animation: cardIn 1.2s 0.65s both;
}

.divider[b-2g62t1czcl] {
    width: 160px;
    height: 3px;
    background: linear-gradient(90deg, #F5C518, transparent);
    margin: 32px 0 36px;
    animation: cardIn 1.2s 0.4s both;
}

/* ─── SCRATCH CARD ─── */
.scratch-zone[b-2g62t1czcl] {
    margin-left: auto;
    margin-right: clamp(24px, 6vw, 90px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: fadeUp-b-2g62t1czcl 1s .3s both;
}

.scratch-card[b-2g62t1czcl] {
    width: 320px;
    /* Narrow-viewport guard for the 768-1023px band, where the card is still
       shown. Below 768px .scratch-zone is hidden outright (see the bottom of
       this file), so this no longer has anything to do on a phone — it is kept
       as cheap insurance in case that hide breakpoint ever moves down.
       max-width shrinks the box while leaving width:320px as the layout basis;
       never use width:100%, which would change the canvas sizing model. */
    max-width: calc(100vw - 40px);
    background: linear-gradient(160deg, #2a1e3f, #1A1228 60%);
    border: 2px solid rgba(245, 197, 24, .45);
    border-radius: 18px;
    padding: 16px;
    transform: rotate(3deg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(245, 197, 24, .12);
}

.scratch-head[b-2g62t1czcl] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.scratch-price[b-2g62t1czcl] {
    background: linear-gradient(135deg, #FFE066, #C49A0A);
    color: #1A1228;
    font-weight: 700;
    font-size: .9rem;
    padding: 4px 10px;
    border-radius: 8px;
}

.scratch-name[b-2g62t1czcl] {
    color: #F5C518;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 1rem;
}

.scratch-body[b-2g62t1czcl] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #FFFBF0;
    padding: 18px 14px 12px;
}

.scratch-symbols[b-2g62t1czcl] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

    .scratch-symbols .sym[b-2g62t1czcl] {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 56px;
        font-size: 1.7rem;
        font-weight: 800;
        color: #1A1228;
        background: rgba(245, 197, 24, .15);
        border: 1px solid rgba(196, 154, 10, .35);
        border-radius: 10px;
    }

.scratch-msg[b-2g62t1czcl] {
    height: 24px;
    text-align: center;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: rgba(26, 18, 40, .55);
}

    .scratch-msg.win[b-2g62t1czcl] {
        color: #0a7a2f;
    }

    .scratch-msg.lose[b-2g62t1czcl] {
        color: #c00;
    }

.scratch-canvas[b-2g62t1czcl] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
    border-radius: 12px;
}

.scratch-hint[b-2g62t1czcl] {
    font-size: .8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.scratch-cta[b-2g62t1czcl] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

    .scratch-cta .btn-gold[b-2g62t1czcl],
    .scratch-cta .btn-outline[b-2g62t1czcl] {
        padding: 10px 24px;
        font-size: .9rem;
    }

@media screen and (max-width: 1024px) {
    .hero-section[b-2g62t1czcl] {
        background-position: center;
        flex-direction: column;
        justify-content: center;
        gap: 44px;
        padding: 96px 20px 48px;
    }

    .scratch-zone[b-2g62t1czcl] {
        margin: 0;
    }

    .scratch-card[b-2g62t1czcl] {
        transform: rotate(2deg);
    }

        .hero-section[b-2g62t1czcl]::before {
            background: linear-gradient(180deg, rgba(10, 8, 20, .93) 0%, rgba(10, 8, 20, .88) 60%, rgba(10, 8, 20, .82) 100%);
        }

    .brand-logo[b-2g62t1czcl] {
        left: 24px;
        height: 34px;
    }

    .hero[b-2g62t1czcl] {
        margin-left: 0;
        width: 100%;
    }

    .badge[b-2g62t1czcl] {
        font-size: 12px;
        margin-bottom: 0px;
    }

    .btn-outline[b-2g62t1czcl] {
        font-size: 15px;
        padding: 12px 40px;
    }

    .btn-gold[b-2g62t1czcl] {
        font-size: 15px;
        padding: 12px 40px;
    }
}

/* ── Phone: hide the scratch-card demo entirely ──────────────────────────────
   Requested behaviour: the scratch game is a desktop-only flourish. Hiding the
   whole .scratch-zone (rather than the canvas alone) also drops the card
   chrome, the CTA buttons and the hint line, so no orphaned fragments remain.

   The hero is already `flex-direction: column` below 1024px, so removing this
   child just lets the hero copy centre itself — no layout hole is left behind.

   SAFETY NOTE — read before changing this:
   scratchCard.init (App.razor:299) runs on EVERY render of this page, not only
   the first (LandingPage.razor:189-196 guards on `_revealed`, not on
   `firstRender`). It used to set `canvas._scratchAttached = true` BEFORE its
   own zero-size bail, which meant one paint at display:none would claim the
   canvas permanently and leave a dead card if the viewport later grew past
   768px — a desktop window dragged narrow and back, for instance.
   That ordering has been corrected in App.razor so the flag is only set once
   the canvas actually has a size. Do not reintroduce the old order.

   Deliberately NOT display:none on the <canvas> itself: it carries @ref
   (LandingPage.razor:49), and hiding the container leaves that reference
   valid while keeping the element out of layout. */
@media screen and (max-width: 767.98px) {
    .scratch-zone[b-2g62t1czcl] {
        display: none;
    }
}

/* ── Safe areas ──────────────────────────────────────────────────────────────
   App.razor sets viewport-fit=cover so this full-bleed dark hero paints under
   the iOS status bar and bottom toolbar — otherwise the page background shows
   through there as light bands, which is what it did before.

   The cost is that the layout viewport now starts ABOVE the notch, so anything
   positioned from the top edge needs the inset added back or it hides under the
   status bar. .brand-logo is absolutely positioned at top:28px and would.

   Not wrapped in a media query on purpose: env(safe-area-inset-*) is 0 on every
   device without a notch, so each calc() collapses to the original value and
   desktop is untouched. */
.hero-section[b-2g62t1czcl] {
    padding-top: calc(96px + env(safe-area-inset-top));
    padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

.brand-logo[b-2g62t1czcl] {
    top: calc(28px + env(safe-area-inset-top));
    left: calc(36px + env(safe-area-inset-left));
}
/* _content/AdvEntLotto.Web/Components/Pages/Registration.razor.rz.scp.css */
.modal[b-8m5d9hyujc] {
    animation: modalPop-b-8m5d9hyujc .32s cubic-bezier(.34, 1.56, .64, 1) both;
    box-shadow: 0 24px 80px rgba(26, 18, 40, .18), 0 8px 24px rgba(26, 18, 40, .1);
}

@keyframes modalPop-b-8m5d9hyujc {
    from {
        opacity: 0;
        transform: scale(.9) translateY(20px)
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

.modal-content[b-8m5d9hyujc] {
    padding: 30px;
}

.modal-close[b-8m5d9hyujc] {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(26, 18, 40, 0.1);
    background: #FFFBF0;
    color: rgba(26, 18, 40, 0.5);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s
}

    .modal-close:hover[b-8m5d9hyujc] {
        background: rgba(26, 18, 40, .08);
        color: #1A1228
    }

.commonmodalheader[b-8m5d9hyujc] {
    display: flex !important;
    padding: 0px !important;
    flex-direction: row !important;
    justify-content: start !important;
    gap: 12px;
    align-items: center !important;
    padding-bottom: 20px !important;
    border-bottom: 0px !important
}

.modal-icon[b-8m5d9hyujc] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #FEF0C0, #FFF5D6);
    border: 1.5px solid rgba(196, 154, 10, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0rem;
    color: #956103;
}

.modal-title[b-8m5d9hyujc] {
    font-family: 'Playfair Display', serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #1A1228;
    margin-bottom: 0rem
}

.modal-sub[b-8m5d9hyujc] {
    font-size: 13px;
    color: rgba(26, 18, 40, 0.5);
    margin-bottom: 0rem;
    line-height: 1.5
}

/* ─── STEP PROGRESS ─── */
.steps[b-8m5d9hyujc] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 16px;
}

.step-wrap[b-8m5d9hyujc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px
}

.step-circle[b-8m5d9hyujc] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgb(26 18 40 / 22%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 600;
    color: rgb(26 18 40 / 78%);
    flex-shrink: 0;
    transition: all .3s;
    background: #FFFBF0
}

    .step-circle.active[b-8m5d9hyujc] {
        border-color: #F5C518;
        color: #fff;
        background: linear-gradient(135deg,#F5C518, #E8AE00);
        box-shadow: 0 0 16px rgba(245, 197, 24, .4)
    }

    .step-circle.done[b-8m5d9hyujc] {
        border-color: rgba(196, 154, 10, .4);
        color: #8A6A00;
        background: #FEF0C0
    }

.step-label[b-8m5d9hyujc] {
    font-size: 12px;
    text-align: center;
    color: rgb(26 18 40 / 62%);
    white-space: nowrap;
}

.step-line[b-8m5d9hyujc] {
    flex: 1;
    height: 2px;
    background: rgba(26, 18, 40, 0.1);
    margin: 0 4px;
    margin-top: 17px;
    border-radius: 2px;
    transition: background .35s
}

    .step-line.done[b-8m5d9hyujc] {
        background: rgba(196, 154, 10, .35)
    }


.step-panel[b-8m5d9hyujc] {
    display: none;
}

    .step-panel.active[b-8m5d9hyujc] {
        display: block;
    }

/* Step 1 CSS */
.sec-hd[b-8m5d9hyujc] {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #8A6A00;
    padding: .45rem 0 .55rem;
    border-bottom: 1.5px solid rgba(196, 154, 10, .15);
    margin: 10px 0px;
}


label.fl[b-8m5d9hyujc] {
    display: block;
    font-size: 11.3px;
    font-weight: 600;
    color: #3D3152;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px
}

.input-wrap[b-8m5d9hyujc] {
    position: relative
}

.input-icon[b-8m5d9hyujc] {
    /* position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    opacity: .6;
    pointer-events: none;
    color: orange;*/
    position: absolute;
    left: 12px;
    top: 10px;
    transform: none;
    line-height: 1;
    z-index: 2;
    font-size: 13px;
    color: orange;
}

input[type=text][b-8m5d9hyujc],
input[type=email][b-8m5d9hyujc],
input[type=password][b-8m5d9hyujc],
input[type=tel][b-8m5d9hyujc],
input[type=number][b-8m5d9hyujc],
select[b-8m5d9hyujc],
textarea[b-8m5d9hyujc] {
    width: 100%;
    padding: 6px 8px 6px 35px;
    background: #FFFBF0;
    border: 1.5px solid rgba(26, 18, 40, 0.1);
    border-radius: 8px;
    color: #1A1228;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
    appearance: none;
    -webkit-appearance: none;
    margin-bottom: 2px
}

    input:focus[b-8m5d9hyujc],
    select:focus[b-8m5d9hyujc],
    textarea:focus[b-8m5d9hyujc] {
        border-color: #F5C518;
        background: #FFFFFF;
        box-shadow: 0 0 0 3px rgba(245, 197, 24, .12)
    }

    input[b-8m5d9hyujc]::placeholder,
    textarea[b-8m5d9hyujc]::placeholder {
        color: rgba(26, 18, 40, 0.28)
    }

    select option[b-8m5d9hyujc] {
        background: #fff;
        color: #1A1228
    }

textarea[b-8m5d9hyujc] {
    resize: vertical;
    min-height: 68px;
    padding-top: .7rem
}

.btn-gold[b-8m5d9hyujc] {
    background: linear-gradient(135deg, #FFE066, #F5C518, #C49A0A);
    color: #0B0E1A;
    box-shadow: 0 8px 32px rgba(245, 197, 24, .35);
    padding: 12px 20px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .25s;
    width: 100%;
    letter-spacing: 1px;
}

    .btn-gold:hover[b-8m5d9hyujc] {
        box-shadow: 0 12px 42px rgba(245, 197, 24, .5);
        transform: translateY(-2px)
    }

.btn-rightArrow[b-8m5d9hyujc] {
    background: linear-gradient(135deg, #FFE066, #F5C518, #C49A0A);
    color: #0B0E1A;
    box-shadow: 0 8px 32px rgba(245, 197, 24, .35);
    width: 45px;
    height: 38px;
    border-radius: 50%;
    border: none;
    font-weight: bolder;
}

.btn-ghost[b-8m5d9hyujc] {
    background: #FFFBF0;
    color: rgba(26, 18, 40, 0.5);
    border: 1.5px solid rgba(26, 18, 40, 0.1);
    padding: 12px 40px;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s;
    width: 100%;
    letter-spacing: 1px;
}

    .btn-ghost:hover[b-8m5d9hyujc] {
        box-shadow: rgba(26, 18, 40, .06);
        color: #1A1228;
    }

.info-box[b-8m5d9hyujc] {
    background: #FFF5D6;
    border: 1.5px solid rgba(196, 154, 10, .25);
    border-radius: 12px;
    padding: .9rem 1rem;
    font-size: .82rem;
    color: rgba(26, 18, 40, 0.5);
    line-height: 1.55;
    margin-bottom: 1.2rem
}

    .info-box strong[b-8m5d9hyujc] {
        color: #8A6A00;
    }

/*Store Setup CSS*/
.store-badge[b-8m5d9hyujc] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: #8A6A00
}

.store-num[b-8m5d9hyujc] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FEF0C0;
    border: 1.5px solid rgba(196, 154, 10, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: #8A6A00
}

.store-remove[b-8m5d9hyujc] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(220, 50, 50, .2);
    background: rgba(220, 50, 50, .05);
    color: rgba(220, 50, 50, .5);
    font-size: .82rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s
}

    .store-remove:hover[b-8m5d9hyujc] {
        background: rgba(220, 50, 50, .12);
        color: #dc3232;
        border-color: rgba(220, 50, 50, .4)
    }

.add-store-btn[b-8m5d9hyujc] {
    width: 100%;
    padding: .72rem;
    border-radius: 12px;
    border: 1.5px dashed rgba(196, 154, 10, .4);
    background: rgba(245, 197, 24, .05);
    color: #8A6A00;
    font-family: 'DM Sans', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .25s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 1rem
}

    .add-store-btn:hover[b-8m5d9hyujc] {
        border: 1.5px dashed #F5C518;
        background: rgba(245, 197, 24, .1)
    }

.store-acc-item[b-8m5d9hyujc] {
    border: 1.5px solid #e8d88a;
    border-radius: 12px;
    margin-bottom: 10px;
    background: #fffef5;
    overflow: hidden;
}

.store-acc-header[b-8m5d9hyujc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    cursor: pointer;
    user-select: none;
    background: #fffef5;
    transition: background .15s;
}

    .store-acc-header:hover[b-8m5d9hyujc] {
        background: #fdf8e1;
    }

    .store-acc-header.open[b-8m5d9hyujc] {
        background: #fdf5cc;
    }

.store-acc-left[b-8m5d9hyujc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.store-acc-label[b-8m5d9hyujc] {
    font-size: 14px;
    font-weight: 600;
    color: #7a5c00;
}

.store-acc-right[b-8m5d9hyujc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.store-acc-chevron[b-8m5d9hyujc] {
    font-size: 18px;
    color: #b8860b;
    transition: transform .25s;
    line-height: 1;
}

    .store-acc-chevron.open[b-8m5d9hyujc] {
        transform: rotate(180deg);
    }

.store-acc-body[b-8m5d9hyujc] {
    border-top: 1px solid #e8d88a;
    padding: 8px 20px;
}

.store-tabs[b-8m5d9hyujc] {
    display: flex;
    border-bottom: 1.5px solid #e8d88a;
    background: #fffef5;
}

.store-tab[b-8m5d9hyujc] {
    flex: 1;
    padding: 9px 0;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #c4a000;
    cursor: pointer;
    letter-spacing: .03em;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    transition: all .15s;
}

    .store-tab:hover[b-8m5d9hyujc] {
        background: #fdf8e1;
        color: #7a5c00;
    }

    .store-tab.active[b-8m5d9hyujc] {
        color: #7a5c00;
        border-bottom: 2.5px solid #f5c842;
        /*background: #fdf5cc;*/
    }

.store-tab-panel[b-8m5d9hyujc] {
    padding: 10px 0px;
}

/* Timer ring */
.timer-ring-wrap[b-8m5d9hyujc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.2rem 0 1.5rem;
    gap: .4rem;
}

.timer-ring[b-8m5d9hyujc] {
    position: relative;
    width: 64px;
    height: 64px;
}

    .timer-ring svg[b-8m5d9hyujc] {
        transform: rotate(-90deg);
    }

    .timer-ring .ring-bg[b-8m5d9hyujc] {
        fill: none;
        stroke: rgba(255, 255, 255, .08);
        stroke-width: 4
    }

    .timer-ring .ring-fg[b-8m5d9hyujc] {
        fill: none;
        stroke: #F5C518;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-dasharray: 163;
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 1s linear, stroke .3s
    }

    .timer-ring .ring-num[b-8m5d9hyujc] {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .92rem;
        font-weight: 700;
        color: #F5C518;
    }

.timer-label[b-8m5d9hyujc] {
    font-size: .75rem;
    color: black;
    letter-spacing: .5px
}

.accordion-button[b-8m5d9hyujc] {
    padding: 0px;
    background-color: #FFFBF0;
    border: none;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: rgba(26, 18, 40, 0.5);
}

    .accordion-button:not(.collapsed)[b-8m5d9hyujc] {
        color: rgba(26, 18, 40, 0.5);
        background-color: #FFFBF0;
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
    }

    .accordion-button:focus[b-8m5d9hyujc] {
        border: none;
        outline: 0;
        box-shadow: none;
    }

.accordion-body[b-8m5d9hyujc] {
    padding: 10px 0px 0px 0px;
    background-color: #FFFBF0;
}

.footer[b-8m5d9hyujc] {
    text-align: center;
    margin-top: 1.2rem;
    font-size: .84rem;
    color: #1a1228cc;
}

    .footer a[b-8m5d9hyujc] {
        text-decoration: none;
        font-weight: 600;
        cursor: pointer;
        color: #8A6A00 !important;
    }

.review-block[b-8m5d9hyujc] {
    background: #FFFBF0;
    border: 1.5px solid rgba(26, 18, 40, 0.1);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: .8rem
}

.review-block-title[b-8m5d9hyujc] {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: #8A6A00;
    font-weight: 700;
    margin-bottom: .55rem
}

.review-content[b-8m5d9hyujc] {
    font-size: .88rem;
    color: rgba(26, 18, 40, 0.5);
    line-height: 1.8;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.review-content strong[b-8m5d9hyujc] {
    color: #1A1228
}

.store-config-carousel[b-8m5d9hyujc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.store-config-card[b-8m5d9hyujc] {
    flex: 1;
    min-width: 0;
}

.carousel-nav[b-8m5d9hyujc] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(26, 18, 40, 0.15);
    background: #fff;
    color: #8A6A00;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .carousel-nav:hover:not(:disabled)[b-8m5d9hyujc] {
        background: #f5c84d;
        color: #1A1228;
    }

    .carousel-nav:disabled[b-8m5d9hyujc] {
        opacity: .35;
        cursor: not-allowed;
    }

.carousel-dots[b-8m5d9hyujc] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.carousel-dot[b-8m5d9hyujc] {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(26, 18, 40, 0.18);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

    .carousel-dot.active[b-8m5d9hyujc] {
        background: #8A6A00;
        transform: scale(1.35);
    }

    .carousel-dot:hover[b-8m5d9hyujc] {
        background: rgba(138, 106, 0, 0.55);
    }


.check-row[b-8m5d9hyujc] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: .75rem 0
}

    .check-row input[type=checkbox][b-8m5d9hyujc] {
        width: 16px;
        height: 16px;
        margin-top: 2px;
        accent-color: #F5C518;
        flex-shrink: 0;
        padding: 0
    }

.check-label[b-8m5d9hyujc] {
    font-size: .8rem;
    color: rgba(26, 18, 40, 0.5);
    line-height: 1.5
}

    .check-label a[b-8m5d9hyujc] {
        color: #8A6A00 !important;
        cursor: pointer;
        text-decoration: underline;
    }

.btn-gold:disabled[b-8m5d9hyujc] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Keep original UI appearance even when disabled */
.store-tab:disabled[b-8m5d9hyujc],
.add-store-btn:disabled[b-8m5d9hyujc] {
    opacity: 1 !important;
    filter: none !important;
    cursor: not-allowed;
}

/* ─── SUCCESS ─── */
.success-view[b-8m5d9hyujc] {
    text-align: center;
}

.success-icon[b-8m5d9hyujc] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    display: block;
    animation: pop-b-8m5d9hyujc .5s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes pop-b-8m5d9hyujc {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.success-title[b-8m5d9hyujc] {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1A1228;
    margin-bottom: .5rem
}

.success-sub[b-8m5d9hyujc] {
    font-size: 16px;
    color: rgba(26, 18, 40, 0.5);
    line-height: 1.65;
    margin-bottom: 1.5rem
}

/* Field-level inline error — small red text under the input, no banner */
.ferr[b-8m5d9hyujc] {
    font-size: .72rem;
    color: #c00;
    margin-top: 3px;
    padding-left: 1px;
    line-height: 1.3;
}
/* Default-settings warning banner */
.default-warn[b-8m5d9hyujc] {
    background: #fffbea;
    border: 1.5px solid #f5c518;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: .78rem;
    color: #7a5c00;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.default-warn-btns[b-8m5d9hyujc] {
    display: flex;
    gap: 8px;
}

.dw-yes[b-8m5d9hyujc] {
    background: #f5c518;
    border: none;
    border-radius: 6px;
    padding: 3px 12px;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}

.dw-no[b-8m5d9hyujc] {
    background: #f0f0f0;
    border: none;
    border-radius: 6px;
    padding: 3px 12px;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
}

.loading-hint[b-8m5d9hyujc] {
    font-size: .72rem;
    color: #8A6A00;
    margin-top: 3px;
}


/* Toggle password button */
.toggle-pw[b-8m5d9hyujc] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    color: #7A7D8A;
    font-size: 16px;
    padding: 0;
}

    /* Hover effect */
    .toggle-pw:hover[b-8m5d9hyujc] {
        color: #F5A623;
    }

@media screen and (max-width: 1024px) and (max-height: 768px) {
    .modal-icon[b-8m5d9hyujc] {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin-bottom: 0rem
    }

    .modal-title[b-8m5d9hyujc] {
        font-size: 21px;
    }

    .modal-sub[b-8m5d9hyujc] {
        font-size: 13px;
        color: rgba(26, 18, 40, 0.5);
        margin-bottom: 0rem;
        line-height: 1.5
    }

    label.fl[b-8m5d9hyujc] {
        font-size: 11px;
    }

    input[type=text][b-8m5d9hyujc], input[type=email][b-8m5d9hyujc], input[type=password][b-8m5d9hyujc], input[type=tel][b-8m5d9hyujc], input[type=number][b-8m5d9hyujc], select[b-8m5d9hyujc], textarea[b-8m5d9hyujc] {
        font-size: 13px;
    }

    .btn-gold[b-8m5d9hyujc], .btn-ghost[b-8m5d9hyujc] {
        padding: 10px 40px;
        font-size: 14px;
    }
}
/* _content/AdvEntLotto.Web/Components/Pages/UserManagement.razor.rz.scp.css */
body[b-i4uw2qs839] {
}
/* Users & Roles page shell.

   Scoped to UserManagement.razor. The panels inside it (ManageUsersPanel /
   ManageRolesPanel) are styled by the global .mgmt-* rules in wwwroot/app.css,
   which is why nothing here reaches into them - only the card, the tab strip
   and the scroll box below are this page's own.

   The card is the desktop scroll owner: .content is a 100vh flex column with
   overflow:hidden, so the card takes the remaining height and hands the
   scrolling to .um-body (which also carries .mgmt-tab-scroll, the class the
   console's editors expect as their scroll parent). On mobile that inverts -
   mobile.css hands page scrolling to the document body - so the media query at
   the bottom releases both boxes. */

.um-card[b-i4uw2qs839] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .04);
}

/* ── Tab strip ──────────────────────────────────────────────────────────── */

.um-tabbar[b-i4uw2qs839] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1.5px solid #f0e6c8;
    background: linear-gradient(180deg, #fffef7, #fff);
}

.um-tabs[b-i4uw2qs839] {
    display: flex;
    gap: 2px;
    min-width: 0;
}

/* Underline-on-active, matching the management console's .store-tab - but sized
   for a page rather than a 700px modal, so the tabs hug their labels instead of
   stretching edge to edge. */
.um-tab[b-i4uw2qs839] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px 11px;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(26, 18, 40, .5);
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}

    .um-tab i[b-i4uw2qs839] {
        font-size: .8rem;
        opacity: .75;
    }

    .um-tab:hover[b-i4uw2qs839] {
        color: rgba(26, 18, 40, .8);
        background: #fffdf3;
    }

    .um-tab.active[b-i4uw2qs839] {
        color: #1A1228;
        border-bottom-color: #f5c842;
    }

        .um-tab.active i[b-i4uw2qs839] {
            color: #c49a0a;
            opacity: 1;
        }

.um-count[b-i4uw2qs839] {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

.um-tab.active .um-count[b-i4uw2qs839] {
    background: #fdf5cc;
    color: #7a5c00;
}

/* ── Right-hand actions ─────────────────────────────────────────────────── */

.um-tabbar-actions[b-i4uw2qs839] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.um-readonly[b-i4uw2qs839] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.um-refresh[b-i4uw2qs839] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(26, 18, 40, .1);
    background: #FFFBF0;
    color: rgba(26, 18, 40, .55);
    font-size: .82rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .18s;
}

    .um-refresh:hover:not(:disabled)[b-i4uw2qs839] {
        border-color: #f5c518;
        background: #fff8e0;
        color: #7a5c00;
    }

    .um-refresh:focus-visible[b-i4uw2qs839] {
        outline: 2px solid #f5c842;
        outline-offset: 2px;
    }

    .um-refresh:disabled[b-i4uw2qs839] {
        opacity: .5;
        cursor: not-allowed;
    }

/* ── Panel area ─────────────────────────────────────────────────────────── */

.um-body[b-i4uw2qs839] {
    padding: 14px 16px 6px;
}

.um-loading[b-i4uw2qs839] {
    text-align: center;
    padding: 30px;
    color: #888;
    font-size: .85rem;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

/* mobile.css releases .app/.content to auto height and gives the scroll to the
   document body. A nested scroller here would re-create the double-scroll trap
   it exists to remove, so the card and its body both go static. */
@media screen and (max-width: 767.98px) {
    .um-card[b-i4uw2qs839] {
        display: block;
        height: auto;
        overflow: visible;
    }

    .um-tabbar[b-i4uw2qs839] {
        padding: 0 6px;
        overflow-x: auto;
        gap: 6px;
    }

    .um-tab[b-i4uw2qs839] {
        padding: 12px 10px 10px;
        font-size: .76rem;
        gap: 6px;
    }

    .um-readonly[b-i4uw2qs839] {
        display: none;
    }

    .um-body[b-i4uw2qs839] {
        overflow: visible;
        padding: 12px 12px 4px;
    }
}