/* =========================================================
   STOP WALLET
   FAMILY MODULE — PREMIUM CLEAN UI
   Red + Green / Compact / Responsive
   ========================================================= */

.sw-family-page {
    --sw-red: #e31837;
    --sw-red-dark: #c8102e;
    --sw-green: #079b63;
    --sw-green-dark: #057a4f;

    --sw-text: #18202a;
    --sw-muted: #697586;
    --sw-border: #e8edf2;
    --sw-bg: #f5f7fa;
    --sw-white: #ffffff;

    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px;
    box-sizing: border-box;

    color: var(--sw-text);
    font-family:
        Inter,
        "Noto Sans Bengali",
        "Noto Sans",
        Arial,
        sans-serif;
}


/* =========================================================
   HEADER
   ========================================================= */

.sw-family-heading {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 17px 18px;
    margin-bottom: 14px;

    background: #fff;
    border: 1px solid var(--sw-border);
    border-radius: 16px;

    box-shadow: 0 7px 24px rgba(20, 30, 40, .055);

    position: relative;
    overflow: hidden;
}

.sw-family-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;

    background:
        linear-gradient(
            180deg,
            var(--sw-red),
            var(--sw-green)
        );
}

.sw-family-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 21px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--sw-red),
            var(--sw-green)
        );

    box-shadow:
        0 7px 18px rgba(227, 24, 55, .17);
}

.sw-family-heading-content {
    min-width: 0;
}

.sw-family-kicker {
    display: block;

    margin-bottom: 2px;

    color: var(--sw-red);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.sw-family-heading h1 {
    margin: 0;

    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;

    color: var(--sw-text);
}

.sw-family-heading p {
    margin: 5px 0 0;

    color: var(--sw-muted);
    font-size: 12px;
    line-height: 1.55;
}


/* =========================================================
   PROFILE ALERT
   ========================================================= */

.sw-family-profile-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 13px 14px;
    margin-bottom: 14px;

    background: #fff8f0;
    border: 1px solid #ffd9b5;
    border-left: 4px solid #f59e0b;
    border-radius: 13px;
}

.sw-alert-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #b45309;
    background: #fff0d9;
    border-radius: 10px;
}

.sw-alert-content {
    min-width: 0;
}

.sw-alert-content b {
    display: block;

    margin-bottom: 3px;

    color: #92400e;
    font-size: 13px;
}

.sw-alert-content p {
    margin: 0 0 4px;

    color: #795548;
    font-size: 11px;
    line-height: 1.55;
}

.sw-alert-content small {
    display: block;

    color: #a16207;
    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   GRID
   ========================================================= */

.sw-family-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 14px;

    margin-bottom: 14px;
}


/* =========================================================
   CARD
   ========================================================= */

.sw-family-card {
    position: relative;

    background: var(--sw-white);
    border: 1px solid var(--sw-border);
    border-radius: 16px;

    box-shadow: 0 7px 24px rgba(20, 30, 40, .055);

    overflow: hidden;
}

.sw-card-title {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 14px 16px;

    border-bottom: 1px solid var(--sw-border);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfd 100%
        );
}

.sw-card-title-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    font-size: 13px;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--sw-red),
            var(--sw-green)
        );
}

.sw-card-title > div:last-child {
    min-width: 0;
}

.sw-card-title b {
    display: block;

    color: var(--sw-text);
    font-size: 13px;
    font-weight: 800;
}

.sw-card-title small {
    display: block;

    margin-top: 2px;

    color: var(--sw-muted);
    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   FORM
   ========================================================= */

#sw-family-form {
    padding: 16px;
}

.sw-family-field {
    margin-bottom: 12px;
}

.sw-family-field label {
    display: block;

    margin-bottom: 5px;

    color: #374151;
    font-size: 11px;
    font-weight: 700;
}

.sw-family-field input,
.sw-family-field select {
    width: 100%;
    height: 42px;

    padding: 0 11px;

    box-sizing: border-box;

    color: var(--sw-text);
    background: #fff;

    border: 1px solid #dfe5eb;
    border-radius: 9px;

    outline: none;

    font-size: 12px;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.sw-family-field input:focus,
.sw-family-field select:focus {
    border-color: var(--sw-green);

    box-shadow:
        0 0 0 3px rgba(7, 155, 99, .09);

    background: #fcfffd;
}

.sw-family-field input::placeholder {
    color: #a0a8b2;
}


/* =========================================================
   MOBILE INPUT
   ========================================================= */

.sw-family-input {
    display: flex;
    align-items: center;

    height: 42px;

    border: 1px solid #dfe5eb;
    border-radius: 9px;

    background: #fff;

    overflow: hidden;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.sw-family-input:focus-within {
    border-color: var(--sw-green);

    box-shadow:
        0 0 0 3px rgba(7, 155, 99, .09);
}

.sw-family-input > span {
    width: 40px;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--sw-red);

    background: #fff7f8;

    border-right: 1px solid #f1dce0;

    font-size: 13px;
}

.sw-family-input input {
    flex: 1;

    width: auto;
    height: 40px;

    border: 0;
    box-shadow: none;

    padding-left: 10px;
}

.sw-family-input input:focus {
    border: 0;
    box-shadow: none;
}


/* =========================================================
   TWO COLUMN FORM
   ========================================================= */

.sw-family-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}


/* =========================================================
   LOOKUP RESULT
   ========================================================= */

.sw-family-result {
    margin-top: 5px;

    font-size: 11px;
    line-height: 1.45;
}


/* =========================================================
   NOTICE
   ========================================================= */

.sw-family-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    padding: 11px 12px;
    margin: 4px 0 13px;

    background: #f0fbf6;

    border: 1px solid #ccefe0;
    border-left: 3px solid var(--sw-green);

    border-radius: 10px;
}

.sw-notice-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--sw-green);

    background: #dcf8ec;
    border-radius: 8px;

    font-size: 12px;
}

.sw-family-notice strong {
    display: block;

    margin-bottom: 2px;

    color: var(--sw-green-dark);
    font-size: 11px;
}

.sw-family-notice p {
    margin: 0;

    color: #557466;
    font-size: 10px;
    line-height: 1.55;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.sw-family-btn {
    width: 100%;
    min-height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 15px;

    border: 0;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--sw-red) 0%,
            #df1837 45%,
            var(--sw-green) 100%
        );

    color: #fff !important;
    -webkit-text-fill-color: #fff !important;

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 7px 17px rgba(227, 24, 55, .17);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.sw-family-btn span,
.sw-family-btn i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.sw-family-btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 21px rgba(7, 155, 99, .20);

    filter: brightness(1.02);
}

.sw-family-btn:active {
    transform: translateY(0);
}


/* =========================================================
   SIDE RULES
   ========================================================= */

.sw-family-side {
    height: fit-content;
}

.sw-family-rules {
    padding: 12px 14px;
}

.sw-family-rule {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 10px 0;

    border-bottom: 1px solid #edf0f3;
}

.sw-family-rule:last-child {
    border-bottom: 0;
}

.sw-family-rule > span {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 1px;

    color: var(--sw-green);
    background: #eaf9f3;

    border-radius: 50%;

    font-size: 9px;
}

.sw-family-rule p {
    flex: 1;

    margin: 0;

    color: #586474;

    font-size: 11px;
    line-height: 1.5;
}

.sw-family-rule.sw-rule-highlight {
    margin: 5px 0 0;
    padding: 10px;

    background:
        linear-gradient(
            135deg,
            #fff7f8,
            #f0fbf6
        );

    border: 1px solid #e5eee9;
    border-radius: 10px;
}

.sw-family-rule.sw-rule-highlight > span {
    color: var(--sw-red);
    background: #ffe8ed;
}


/* =========================================================
   FAMILY LIST
   ========================================================= */

.sw-family-list {
    margin-top: 0;
}

#sw-family-list {
    padding: 3px 15px;
}

.sw-family-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 11px 0;

    border-bottom: 1px solid #edf0f3;
}

.sw-family-row:last-child {
    border-bottom: 0;
}

.sw-family-member {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 9px;
}

.sw-member-avatar {
    flex: 0 0 35px;
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--sw-red);

    background:
        linear-gradient(
            135deg,
            #fff0f3,
            #eefaf5
        );

    border-radius: 10px;

    font-size: 12px;
}

.sw-family-member strong {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--sw-text);
    font-size: 12px;
}

.sw-family-member small {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 2px;

    color: var(--sw-muted);
    font-size: 10px;
}

.sw-family-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
}


/* =========================================================
   STATUS
   ========================================================= */

.sw-status {
    display: inline-flex;
    align-items: center;

    min-height: 25px;

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;

    white-space: nowrap;
}

.sw-status::before {
    content: "";
    width: 5px;
    height: 5px;

    margin-right: 5px;

    border-radius: 50%;
    background: currentColor;
}

.sw-status.sw-verified {
    color: #087f52;
    background: #e5f8ef;
}

.sw-status.sw-pending {
    color: #a16207;
    background: #fff6db;
}

.sw-status.sw-rejected {
    color: #b42318;
    background: #ffeded;
}


/* =========================================================
   MINI ACTION BUTTONS
   ========================================================= */

.sw-mini {
    min-height: 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    padding: 4px 9px;

    border-radius: 7px;

    border: 1px solid transparent;

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .15s ease,
        background .15s ease;
}

.sw-mini:hover {
    transform: translateY(-1px);
}

.sw-mini.accept {
    color: #087f52;
    background: #e5f8ef;
    border-color: #c7ecdc;
}

.sw-mini.reject {
    color: #b42318;
    background: #ffeded;
    border-color: #f5d0d0;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.sw-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 150px;

    padding: 25px 15px;

    text-align: center;
}

.sw-empty-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 9px;

    color: var(--sw-green);

    background: #eaf9f3;

    border-radius: 13px;

    font-size: 17px;
}

.sw-empty strong {
    color: var(--sw-text);
    font-size: 12px;
}

.sw-empty small {
    margin-top: 4px;

    color: var(--sw-muted);
    font-size: 10px;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .sw-family-grid {
        grid-template-columns: 1fr;
    }

    .sw-family-side {
        order: 2;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .sw-family-page {
        padding: 10px;
    }

    .sw-family-heading {
        padding: 13px;
        border-radius: 13px;
        gap: 10px;
    }

    .sw-family-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;

        border-radius: 11px;

        font-size: 17px;
    }

    .sw-family-heading h1 {
        font-size: 17px;
    }

    .sw-family-heading p {
        font-size: 10px;
    }

    .sw-family-grid {
        gap: 10px;
        margin-bottom: 10px;
    }

    .sw-family-card {
        border-radius: 13px;
    }

    .sw-card-title {
        padding: 12px;
    }

    .sw-card-title-icon {
        flex-basis: 31px;
        width: 31px;
        height: 31px;

        border-radius: 9px;
    }

    #sw-family-form {
        padding: 13px;
    }

    .sw-family-two {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .sw-family-field {
        margin-bottom: 10px;
    }

    .sw-family-field input,
    .sw-family-field select,
    .sw-family-input {
        height: 40px;
    }

    .sw-family-btn {
        min-height: 42px;
    }

    .sw-family-profile-alert {
        padding: 11px;
    }

    .sw-family-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .sw-family-actions {
        width: 100%;
        justify-content: flex-start;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .sw-family-page {
        padding: 7px;
    }

    .sw-family-heading {
        padding: 11px;
    }

    .sw-family-heading h1 {
        font-size: 15px;
    }

    .sw-family-heading p {
        font-size: 9px;
    }

    .sw-card-title b {
        font-size: 12px;
    }

    .sw-card-title small {
        font-size: 9px;
    }

    .sw-family-rule p {
        font-size: 10px;
    }

    .sw-family-member strong {
        font-size: 11px;
    }

}


/* =========================================================
   ACCESSIBILITY / DISABLED
   ========================================================= */

.sw-family-btn:disabled,
.sw-mini:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none !important;
}


/* =========================================================
   HARD TEXT VISIBILITY FIX
   Prevent theme/plugin CSS from hiding button text
   ========================================================= */

.sw-family-page .sw-family-btn,
.sw-family-page .sw-family-btn span,
.sw-family-page .sw-family-btn i {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* ============================================================
   STOP WALLET — FINAL PREMIUM VISUAL SYSTEM
   RED + GREEN / CENTERED / BORDER / RADIUS / PADDING
   DESIGN + COLOR ONLY
   ============================================================ */

:root{
    --sw-premium-red:#e31837;
    --sw-premium-red-dark:#c8102e;
    --sw-premium-green:#079b63;
    --sw-premium-green-dark:#057a4f;

    --sw-premium-text:#172033;
    --sw-premium-soft:#526078;
    --sw-premium-muted:#718096;
    --sw-premium-border:#dce3ea;
    --sw-premium-border-strong:#c7d1db;

    --sw-premium-bg:#f6fbf9;
    --sw-premium-white:#fff;

    --sw-premium-shadow:
        0 16px 42px rgba(23,32,51,.075);
    --sw-premium-shadow-soft:
        0 8px 24px rgba(23,32,51,.05);
}

/* -----------------------------
   Centered page canvases
   ----------------------------- */

.sw-wallet-page,
.sw-family-page,
.sw-notification-page,
.sw-myqr-page,
.sw-checkout,
.sw-pm,
.sw-pm-settings,
.sw-payment-method,
.sw-transaction-history,
.sw-sb,
.sw-module-card,
.sw-auth-wrapper,
.sw-login-wrapper,
.sw-register-wrapper,
.sw-profile-wrapper{
    box-sizing:border-box;
}

/* -----------------------------
   Generic premium module card
   ----------------------------- */

.sw-module-card{
    position:relative;

    width:calc(100% - 20px);
    max-width:720px;

    margin:16px auto !important;
    padding:18px !important;

    border:1px solid var(--sw-premium-border) !important;
    border-radius:18px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fffafb 48%,
            #f3fbf7 100%
        ) !important;

    box-shadow:var(--sw-premium-shadow) !important;

    color:var(--sw-premium-text);

    overflow:hidden;
}

.sw-module-card::before{
    content:"";

    position:absolute;
    top:0;
    left:0;
    right:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--sw-premium-red),
            #c94b58 50%,
            var(--sw-premium-green)
        );
}

.sw-module-icon{
    border-radius:12px !important;

    color:#fff !important;
    -webkit-text-fill-color:#fff !important;

    background:
        linear-gradient(
            135deg,
            var(--sw-premium-red),
            #c84b58 48%,
            var(--sw-premium-green)
        ) !important;

    box-shadow:
        0 8px 18px rgba(227,24,55,.13);
}

.sw-module-card h2{
    color:var(--sw-premium-text) !important;
    -webkit-text-fill-color:var(--sw-premium-text) !important;
}

.sw-module-card p{
    color:var(--sw-premium-soft) !important;
    -webkit-text-fill-color:var(--sw-premium-soft) !important;
}

/* -----------------------------
   Shared module buttons
   ----------------------------- */

.sw-module-action,
.sw-primary-btn,
.sw-sb button.primary,
.sw-sb button.dark{
    border:0 !important;
    border-radius:11px !important;

    color:#fff !important;
    -webkit-text-fill-color:#fff !important;

    background:
        linear-gradient(
            105deg,
            var(--sw-premium-red) 0%,
            #df2a48 34%,
            #b64d58 50%,
            var(--sw-premium-green) 73%,
            var(--sw-premium-green-dark) 100%
        ) !important;

    box-shadow:
        0 9px 21px rgba(7,155,99,.13),
        0 5px 13px rgba(227,24,55,.08) !important;

    font:inherit;
    font-weight:850;

    cursor:pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.sw-module-action:hover,
.sw-primary-btn:hover,
.sw-sb button.primary:hover,
.sw-sb button.dark:hover{
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;

    transform:translateY(-1px);

    box-shadow:
        0 13px 27px rgba(7,155,99,.17) !important;

    filter:brightness(1.02);
}

/* -----------------------------
   Shared fields
   ----------------------------- */

.sw-wallet-page input,
.sw-wallet-page select,
.sw-wallet-page textarea,
.sw-family-page input,
.sw-family-page select,
.sw-family-page textarea,
.sw-sb input,
.sw-sb select,
.sw-sb textarea,
.sw-module-card input,
.sw-module-card select,
.sw-module-card textarea,
.sw-myqr-page input,
.sw-myqr-page select,
.sw-myqr-page textarea{
    border:1px solid var(--sw-premium-border-strong) !important;
    border-radius:11px !important;

    background:#fff !important;

    color:var(--sw-premium-text) !important;
    -webkit-text-fill-color:var(--sw-premium-text) !important;

    outline:0 !important;

    box-shadow:
        inset 0 1px 2px rgba(23,32,51,.018) !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.sw-wallet-page input:hover,
.sw-wallet-page select:hover,
.sw-wallet-page textarea:hover,
.sw-family-page input:hover,
.sw-family-page select:hover,
.sw-family-page textarea:hover,
.sw-sb input:hover,
.sw-sb select:hover,
.sw-sb textarea:hover,
.sw-module-card input:hover,
.sw-module-card select:hover,
.sw-module-card textarea:hover{
    border-color:#aebbc7 !important;
}

.sw-wallet-page input:focus,
.sw-wallet-page select:focus,
.sw-wallet-page textarea:focus,
.sw-family-page input:focus,
.sw-family-page select:focus,
.sw-family-page textarea:focus,
.sw-sb input:focus,
.sw-sb select:focus,
.sw-sb textarea:focus,
.sw-module-card input:focus,
.sw-module-card select:focus,
.sw-module-card textarea:focus{
    border-color:var(--sw-premium-green) !important;

    box-shadow:
        0 0 0 3px rgba(7,155,99,.09),
        0 7px 18px rgba(7,155,99,.04) !important;
}

.sw-wallet-page input::placeholder,
.sw-family-page input::placeholder,
.sw-sb input::placeholder,
.sw-module-card input::placeholder{
    color:#98a4b1 !important;
    -webkit-text-fill-color:#98a4b1 !important;
    opacity:1;
}

/* -----------------------------
   Savings / Qorjian / Welfare /
   Donation shared card
   ----------------------------- */

.sw-sb{
    width:calc(100% - 20px) !important;
    max-width:900px !important;

    margin:16px auto !important;
    padding:0 0 24px !important;

    box-sizing:border-box;

    color:var(--sw-premium-text);
}

.sw-sb-head{
    padding:17px 18px !important;

    margin-bottom:12px !important;

    border:1px solid var(--sw-premium-border) !important;
    border-radius:16px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff9fa 52%,
            #f2fbf7
        ) !important;

    box-shadow:var(--sw-premium-shadow-soft) !important;
}

.sw-sb-head h2{
    margin:0 0 4px !important;

    color:var(--sw-premium-text) !important;
    -webkit-text-fill-color:var(--sw-premium-text) !important;

    font-size:22px !important;
    font-weight:900 !important;
}

.sw-sb-head p{
    margin:0 !important;

    color:var(--sw-premium-soft) !important;
    -webkit-text-fill-color:var(--sw-premium-soft) !important;

    font-size:11px !important;
    line-height:1.55 !important;
}

.sw-sb-card{
    position:relative !important;

    padding:18px !important;

    border:1px solid var(--sw-premium-border) !important;
    border-radius:18px !important;

    background:#fff !important;

    box-shadow:var(--sw-premium-shadow) !important;

    overflow:hidden;
}

.sw-sb-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--sw-premium-red),
            var(--sw-premium-green)
        );
}

.sw-sb-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:9px !important;

    margin-bottom:14px !important;
}

.sw-sb-stat{
    padding:11px 12px !important;

    border:1px solid #e2e9ed !important;
    border-radius:12px !important;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f5faf8
        ) !important;
}

.sw-sb-stat small{
    display:block !important;

    color:var(--sw-muted) !important;
    font-size:9px !important;
}

.sw-sb-stat strong{
    display:block !important;

    margin-top:3px !important;

    color:var(--sw-premium-text) !important;
    -webkit-text-fill-color:var(--sw-premium-text) !important;

    font-size:14px !important;
}

.sw-sb-card > label,
.sw-sb-pin label{
    display:block !important;

    margin:0 0 6px !important;

    color:var(--sw-premium-text) !important;
    -webkit-text-fill-color:var(--sw-premium-text) !important;

    font-size:11px !important;
    font-weight:850 !important;
}

.sw-sb-actions{
    gap:8px !important;
}

.sw-sb-msg{
    margin-top:12px !important;

    padding:10px 11px !important;

    border:1px solid #dce9e2 !important;
    border-radius:10px !important;

    background:#f5fbf8 !important;

    color:var(--sw-premium-soft) !important;
}

.sw-sb-pin{
    margin-top:12px !important;
    padding:12px !important;

    border:1px dashed #c9ded5 !important;
    border-radius:12px !important;

    background:#f8fcfa !important;
}

/* -----------------------------
   Notification
   ----------------------------- */

.sw-notification-page{
    width:calc(100% - 20px) !important;
    max-width:980px !important;

    margin:16px auto !important;
}

.sw-notification-head,
.sw-notification-item,
.sw-notification-toolbar,
.sw-notification-empty{
    border-color:var(--sw-premium-border) !important;
}

.sw-notification-head{
    border-radius:16px !important;

    background:
        linear-gradient(
            145deg,
            #fff,
            #fff9fa 50%,
            #f3fbf7
        ) !important;

    box-shadow:var(--sw-premium-shadow-soft) !important;
}

.sw-notification-head h2,
.sw-notification-title-row strong{
    color:var(--sw-premium-text) !important;
}

.sw-notification-head p,
.sw-notification-toolbar,
.sw-notification-body p,
.sw-notification-body time{
    color:var(--sw-premium-soft) !important;
}

.sw-notification-readall{
    color:#fff !important;

    background:
        linear-gradient(
            135deg,
            var(--sw-premium-red),
            var(--sw-premium-green)
        ) !important;
}

/* -----------------------------
   Payment Method
   ----------------------------- */

.sw-pm-settings{
    width:calc(100% - 20px) !important;
    max-width:1080px !important;
    margin:16px auto !important;
}

.sw-pm-settings-hero{
    border:1px solid #dce8e2 !important;
    border-radius:17px !important;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fff9fa 48%,
            #eefaf5
        ) !important;

    color:var(--sw-premium-text) !important;
    box-shadow:var(--sw-premium-shadow-soft) !important;
}

.sw-pm-settings h2,
.sw-pm-settings h3{
    color:var(--sw-premium-text) !important;
}

.sw-pm-kicker,
.sw-pm-section-kicker{
    color:var(--sw-premium-green-dark) !important;
}

.sw-pm-card{
    border:1px solid var(--sw-premium-border) !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:var(--sw-premium-shadow-soft) !important;
}

.sw-pm-field input,
.sw-pm-field textarea,
.sw-pm-field select,
.sw-pm-grid input,
.sw-pm-grid textarea,
.sw-pm-grid select,
.sw-pm-bank-row input,
.sw-pm-bank-row textarea{
    border:1px solid var(--sw-premium-border-strong) !important;
}

.sw-pm-field input:focus,
.sw-pm-field textarea:focus,
.sw-pm-field select:focus,
.sw-pm-bank-row input:focus,
.sw-pm-bank-row textarea:focus{
    border-color:var(--sw-premium-green) !important;
    box-shadow:0 0 0 3px rgba(7,155,99,.09) !important;
}

.sw-pm-status.on{
    color:var(--sw-premium-green-dark) !important;
    background:#eaf9f3 !important;
}

/* -----------------------------
   Transaction history
   ----------------------------- */

.sw-transaction-history{
    width:calc(100% - 20px) !important;
    max-width:1000px !important;

    margin:16px auto !important;
    padding:18px !important;

    border:1px solid var(--sw-premium-border) !important;
    border-radius:17px !important;

    background:#fff !important;
    box-shadow:var(--sw-premium-shadow) !important;
}

.sw-payment-balance{
    border:1px solid #dce9e2 !important;
    background:
        linear-gradient(
            105deg,
            #f2fbf6,
            #fffafa
        ) !important;
}

.sw-payment-table-wrap{
    border-color:#dfe7eb !important;
    border-radius:12px !important;
}

.sw-payment-table th{
    background:#f4faf7 !important;
    color:#526078 !important;
}

.sw-payment-table td{
    color:#405267 !important;
}

/* -----------------------------
   My QR
   ----------------------------- */

.sw-myqr-page{
    width:calc(100% - 20px) !important;
    max-width:900px !important;
    margin:16px auto !important;
}

/* -----------------------------
   Shared status colors
   ----------------------------- */

.sw-status,
.sw-payment-status,
.sw-status-pill{
    opacity:1 !important;
}

.sw-status.sw-verified,
.sw-status-pill.is-success,
.sw-payment-status{
    color:var(--sw-premium-green-dark) !important;
    background:#eaf9f3 !important;
}

.sw-status.sw-pending,
.sw-status-pill.is-pending{
    color:#a16207 !important;
    background:#fff7df !important;
}

.sw-status.sw-rejected{
    color:var(--sw-premium-red-dark) !important;
    background:#fff0f3 !important;
}

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

@media(max-width:680px){
    .sw-module-card,
    .sw-wallet-page,
    .sw-family-page,
    .sw-notification-page,
    .sw-checkout,
    .sw-pm-settings,
    .sw-transaction-history,
    .sw-myqr-page,
    .sw-sb{
        width:calc(100% - 10px) !important;
    }

    .sw-sb-grid{
        grid-template-columns:1fr !important;
    }

    .sw-sb-actions{
        display:flex !important;
        flex-direction:column !important;
    }

    .sw-sb-actions button{
        width:100% !important;
    }
}

@media(max-width:390px){
    .sw-module-card,
    .sw-wallet-page,
    .sw-family-page,
    .sw-notification-page,
    .sw-checkout,
    .sw-pm-settings,
    .sw-transaction-history,
    .sw-myqr-page,
    .sw-sb{
        width:calc(100% - 6px) !important;
    }
}


/* STOP Wallet — Shared profile avatar image */
.sw-member-avatar img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border-radius:inherit !important;
}