/*
 * STOP Wallet Dashboard — Final Clean Premium UI
 * Matches the STOP Wallet Login/Register visual system.
 * VISUAL ONLY — no route, AJAX, transaction, balance or security logic.
 */

:root{
  --sw-final-red:#e31837;
  --sw-final-red-dark:#c8102e;
  --sw-final-green:#079b63;
  --sw-final-green-dark:#057a4f;
  --sw-final-ink:#172033;
  --sw-final-text:#334155;
  --sw-final-muted:#718096;
  --sw-final-line:#e2e8ee;
  --sw-final-soft:#f4faf7;
  --sw-final-white:#fff;
  --sw-final-shadow:0 16px 42px rgba(23,32,51,.075);
  --sw-final-radius:20px;
}

/* =========================================================
   APPLICATION CANVAS
   ========================================================= */

#sw-dashboard.sw-dashboard-shell{
  position:relative;
  min-height:100vh;
  background:
    radial-gradient(circle at 7% 12%,rgba(7,155,99,.07),transparent 25%),
    radial-gradient(circle at 94% 82%,rgba(227,24,55,.06),transparent 27%),
    #f7faf9;
  color:var(--sw-final-ink);
}

#sw-dashboard.sw-dashboard-shell::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,#000,transparent 72%);
}

#sw-dashboard.sw-dashboard-shell *{box-sizing:border-box}
#sw-dashboard.sw-dashboard-shell a{color:inherit;text-decoration:none}
#sw-dashboard.sw-dashboard-shell button{font:inherit}

.sw-content{
  padding:24px clamp(14px,2.6vw,34px) 34px !important;
}

.sw-page{
  width:min(100%,1180px) !important;
  margin:0 auto !important;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sw-sidebar{
  width:268px !important;
  background:#fff !important;
  border-right:1px solid #e7eee9 !important;
  box-shadow:8px 0 28px rgba(23,32,51,.045) !important;
}

.sw-sidebar-head{
  min-height:78px !important;
  padding:16px 18px !important;
  border-bottom:1px solid #edf2ef !important;
}

.sw-sidebar-brand-mark,
.sw-sidebar-logo-mark{
  background:linear-gradient(135deg,var(--sw-final-red),var(--sw-final-green)) !important;
  box-shadow:0 8px 18px rgba(7,155,99,.15) !important;
}

.sw-sidebar-brand-copy strong{
  color:var(--sw-final-ink) !important;
}

.sw-sidebar-brand-copy small{
  color:var(--sw-final-muted) !important;
}

.sw-sidebar-user{
  margin:13px 12px !important;
  padding:11px !important;
  border:1px solid #e2eee8 !important;
  border-radius:15px !important;
  background:linear-gradient(145deg,#fff,#f5fbf8) !important;
  box-shadow:0 7px 18px rgba(23,32,51,.045) !important;
}

.sw-sidebar-avatar{
  border-color:#fff !important;
  box-shadow:0 0 0 2px rgba(7,155,99,.12) !important;
}

.sw-sidebar-avatar i,
.sw-sidebar-user-copy>small i{
  background:var(--sw-final-green) !important;
}

.sw-sidebar-section-label{
  color:#9aa6b6 !important;
}

.sw-sidebar-section-label span{
  background:#dce8e2 !important;
}

.sw-sidebar-item{
  margin:3px 10px !important;
  min-height:43px !important;
  border-radius:12px !important;
  color:#526078 !important;
  transition:.18s ease !important;
}

.sw-sidebar-item:hover{
  color:var(--sw-final-green-dark) !important;
  background:#f1faf6 !important;
  transform:translateX(2px);
}

.sw-sidebar-item.is-active{
  color:var(--sw-final-green-dark) !important;
  background:linear-gradient(135deg,#effcf6,#e7f8f0) !important;
  border:1px solid #cdeee0 !important;
  box-shadow:0 7px 18px rgba(7,155,99,.07) !important;
}

.sw-sidebar-item.is-active .sw-sidebar-icon{
  color:var(--sw-final-red) !important;
  background:#fff0f3 !important;
}

.sw-sidebar-icon{
  color:#718096 !important;
}

.sw-sidebar-admin-section{
  border-top-color:#e8efeb !important;
}

.sw-sidebar-logout{
  margin:10px 12px !important;
  min-height:42px !important;
  border:1px solid #ffd5dc !important;
  border-radius:12px !important;
  color:var(--sw-final-red-dark) !important;
  background:#fff6f7 !important;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.sw-header,
.sw-topbar{
  background:rgba(255,255,255,.94) !important;
  border-bottom:1px solid #e7eee9 !important;
}

.sw-header{
  box-shadow:0 4px 20px rgba(23,32,51,.025) !important;
}

.sw-header-shell{
  padding:0 clamp(16px,3vw,30px) !important;
}

.sw-header-center strong,
.sw-breadcrumb strong{
  color:var(--sw-final-ink) !important;
}

.sw-header-eyebrow,
.sw-breadcrumb span{
  color:#9aa6b6 !important;
}

.sw-live-dot{
  background:var(--sw-final-green) !important;
  box-shadow:0 0 0 4px rgba(7,155,99,.10) !important;
}

/* =========================================================
   PAGE HEADING
   ========================================================= */

.sw-page-heading{
  margin-bottom:17px !important;
  align-items:center !important;
}

.sw-page-heading h1{
  color:var(--sw-final-ink) !important;
  font-size:clamp(24px,2.5vw,31px) !important;
  font-weight:850 !important;
  letter-spacing:-.45px !important;
}

.sw-page-heading p{
  color:var(--sw-final-text) !important;
}

.sw-page-kicker{
  color:var(--sw-final-green-dark) !important;
  letter-spacing:1.5px !important;
}

.sw-outline-button{
  min-height:42px !important;
  border:1px solid #cfe7dc !important;
  border-radius:11px !important;
  color:var(--sw-final-green-dark) !important;
  background:#fff !important;
  box-shadow:0 6px 18px rgba(23,32,51,.045) !important;
}

.sw-outline-button:hover{
  border-color:#a9dac6 !important;
  background:#f5fcf9 !important;
}

/* =========================================================
   OVERVIEW HERO / BALANCE
   ========================================================= */

.sw-hero-balance{
  position:relative !important;
  min-height:215px !important;
  padding:27px 31px !important;
  border:1px solid rgba(255,255,255,.24) !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 85% 30%,rgba(255,255,255,.14),transparent 23%),
    radial-gradient(circle at 18% 110%,rgba(255,255,255,.09),transparent 28%),
    linear-gradient(112deg,var(--sw-final-red) 0%,#c91f3f 30%,#138b68 68%,var(--sw-final-green-dark) 100%) !important;
  box-shadow:0 20px 45px rgba(7,155,99,.16),0 8px 22px rgba(227,24,55,.08) !important;
  overflow:hidden !important;
}

.sw-hero-balance::after{
  width:330px !important;
  height:330px !important;
  right:-40px !important;
  top:-190px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

.sw-hero-label-row{
  color:#fff !important;
  font-size:14px !important;
  font-weight:800 !important;
}

.sw-hero-label-row button{
  color:#fff !important;
}

.sw-hero-amount strong,
.sw-hero-amount>span{
  color:#fff !important;
}

.sw-hero-amount strong{
  font-size:43px !important;
  font-weight:850 !important;
}

.sw-hero-meta{
  color:rgba(255,255,255,.82) !important;
}

.sw-status-dot{
  background:#72f1bc !important;
}

.sw-hero-reveal{
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
}

.sw-art-wallet{
  background:linear-gradient(145deg,#083d32,#0b6650) !important;
  border-color:rgba(255,255,255,.20) !important;
}

/* =========================================================
   SECTIONS
   ========================================================= */

.sw-section{
  margin-top:23px !important;
}

.sw-section-head,
.sw-panel-head{
  margin-bottom:11px !important;
}

.sw-section-head span,
.sw-panel-head span{
  color:#91a097 !important;
}

.sw-section-head h2,
.sw-panel-head h2{
  color:var(--sw-final-ink) !important;
  font-size:18px !important;
  font-weight:850 !important;
}

.sw-section-head a,
.sw-section-link,
.sw-panel-head>a,
.sw-services-toggle{
  color:var(--sw-final-green-dark) !important;
}

/* =========================================================
   QUICK ACTIONS
   ========================================================= */

.sw-quick-section,
.sw-page-overview #services{
  padding:17px 18px 18px !important;
  border:1px solid #e1ebe6 !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:var(--sw-final-shadow) !important;
}

.sw-quick-grid{
  gap:10px !important;
}

.sw-quick-card{
  min-height:104px !important;
  padding:14px 10px !important;
  border:1px solid #e1e9e5 !important;
  border-radius:15px !important;
  background:#fff !important;
  box-shadow:0 7px 20px rgba(23,32,51,.045) !important;
}

.sw-quick-card:hover{
  border-color:#c8e6d9 !important;
  box-shadow:0 13px 27px rgba(7,155,99,.08) !important;
}

.sw-quick-icon,
.sw-service-icon{
  color:var(--tone) !important;
}

.sw-quick-card strong{
  color:var(--sw-final-ink) !important;
  font-weight:850 !important;
}

.sw-quick-card small{
  color:var(--sw-final-muted) !important;
}

/* Keep tone colors but harmonize the palette. */
.sw-tone-green{--tone:var(--sw-final-green);--tone-bg:#eafaf4}
.sw-tone-purple,.sw-tone-violet{--tone:#b52b4a;--tone-bg:#fff0f3}
.sw-tone-orange{--tone:#d98218;--tone-bg:#fff5e7}
.sw-tone-blue,.sw-tone-indigo{--tone:#137d68;--tone-bg:#eaf8f4}
.sw-tone-pink{--tone:var(--sw-final-red);--tone-bg:#fff0f3}
.sw-tone-teal{--tone:var(--sw-final-green);--tone-bg:#eafaf4}

/* =========================================================
   ALL SERVICES
   ========================================================= */

.sw-service-grid{
  gap:9px !important;
}

.sw-service-card{
  min-height:98px !important;
  border:1px solid #e1e9e5 !important;
  border-radius:15px !important;
  background:#fff !important;
  box-shadow:0 6px 18px rgba(23,32,51,.035) !important;
}

.sw-service-card:hover{
  border-color:#c8e6d9 !important;
  box-shadow:0 12px 26px rgba(7,155,99,.07) !important;
}

.sw-service-card strong{
  color:var(--sw-final-text) !important;
  font-weight:800 !important;
}

.sw-service-arrow{
  color:#b1bdb7 !important;
}

/* =========================================================
   PANELS / TRANSACTIONS / SECURITY
   ========================================================= */

.sw-panel,
.sw-transaction-panel,
.sw-security-panel{
  border:1px solid #e1ebe6 !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:var(--sw-final-shadow) !important;
}

.sw-transaction-row{
  border-bottom-color:#edf2ef !important;
}

.sw-tx-info strong{
  color:var(--sw-final-ink) !important;
}

.sw-tx-info small{
  color:#8a9891 !important;
}

.sw-tx-value.is-credit{
  color:var(--sw-final-green-dark) !important;
}

.sw-tx-value.is-debit{
  color:#9b3048 !important;
}

.sw-tx-status{
  background:#eafaf4 !important;
  color:var(--sw-final-green-dark) !important;
}

.sw-tx-icon.is-credit{
  background:#eafaf4 !important;
  color:var(--sw-final-green) !important;
}

.sw-tx-icon.is-debit{
  background:#fff0f3 !important;
  color:var(--sw-final-red) !important;
}

.sw-security-card{
  border-color:#e1ebe6 !important;
  background:#f8fcfa !important;
}

.sw-security-icon{
  background:#eafaf4 !important;
  color:var(--sw-final-green-dark) !important;
}

.sw-security-check{
  background:var(--sw-final-green) !important;
}

/* =========================================================
   REFERRAL / STATS
   ========================================================= */

.sw-referral-hero{
  border:1px solid #dcebe4 !important;
  border-radius:18px !important;
  background:linear-gradient(135deg,#effcf6,#fff8f9) !important;
  box-shadow:var(--sw-final-shadow) !important;
}

.sw-referral-hero strong{
  color:var(--sw-final-green-dark) !important;
}

.sw-referral-copy{
  background:linear-gradient(135deg,var(--sw-final-red),var(--sw-final-green)) !important;
  color:#fff !important;
}

.sw-referral-account-row{
  border-color:#e1ebe6 !important;
  border-radius:13px !important;
}

/* =========================================================
   GENERIC DASHBOARD CARDS / MODULE CARDS
   ========================================================= */

.sw-module-card,
.sw-sb-card,
.sw-checkout,
.sw-notification-head,
.sw-notification-item,
.sw-wallet-card,
.sw-pin-card,
.sw-card{
  border-color:#e1ebe6 !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,#fff,#f9fcfb) !important;
  box-shadow:var(--sw-final-shadow) !important;
}

.sw-module-action,
.sw-primary-btn,
.sw-checkout-submit,
.sw-pin-card form .sw-primary-btn{
  border:0 !important;
  border-radius:12px !important;
  background:linear-gradient(105deg,var(--sw-final-red),#b64b58,var(--sw-final-green),var(--sw-final-green-dark)) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 10px 23px rgba(7,155,99,.14) !important;
}

.sw-module-action:hover,
.sw-primary-btn:hover,
.sw-checkout-submit:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
}

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

#sw-dashboard.sw-dashboard-shell input:not([type=radio]):not([type=checkbox]),
#sw-dashboard.sw-dashboard-shell select,
#sw-dashboard.sw-dashboard-shell textarea{
  border-color:#dce6e1 !important;
  border-radius:11px !important;
  background:#fff !important;
  color:var(--sw-final-ink) !important;
}

#sw-dashboard.sw-dashboard-shell input:focus,
#sw-dashboard.sw-dashboard-shell select:focus,
#sw-dashboard.sw-dashboard-shell textarea:focus{
  border-color:var(--sw-final-green) !important;
  box-shadow:0 0 0 4px rgba(7,155,99,.08) !important;
  outline:none !important;
}

/* =========================================================
   MOBILE NAV
   ========================================================= */

.sw-mobile-nav{
  background:rgba(255,255,255,.97) !important;
  border:1px solid #dfeae5 !important;
  box-shadow:0 12px 35px rgba(23,32,51,.14) !important;
}

.sw-mobile-nav>a{
  color:#7b8a86 !important;
}

.sw-mobile-nav>a.is-active{
  color:var(--sw-final-green-dark) !important;
}

.sw-mobile-nav>a.is-active .sw-mobile-icon{
  background:#effcf6 !important;
}

.sw-mobile-qr>span{
  background:linear-gradient(135deg,var(--sw-final-red),var(--sw-final-green)) !important;
  box-shadow:0 9px 22px rgba(7,155,99,.20) !important;
}

.sw-mobile-qr small{
  color:var(--sw-final-ink) !important;
}

/* =========================================================
   BUTTON / TEXT VISIBILITY PROTECTION
   ========================================================= */

#sw-dashboard.sw-dashboard-shell .sw-primary-btn,
#sw-dashboard.sw-dashboard-shell .sw-checkout-submit,
#sw-dashboard.sw-dashboard-shell .sw-module-action,
#sw-dashboard.sw-dashboard-shell .sw-btn,
#sw-dashboard.sw-dashboard-shell .sw-button{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
}

#sw-dashboard.sw-dashboard-shell .sw-primary-btn span,
#sw-dashboard.sw-dashboard-shell .sw-primary-btn i,
#sw-dashboard.sw-dashboard-shell .sw-checkout-submit span,
#sw-dashboard.sw-dashboard-shell .sw-checkout-submit i,
#sw-dashboard.sw-dashboard-shell .sw-module-action span,
#sw-dashboard.sw-dashboard-shell .sw-module-action i{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
}

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

@media(max-width:992px){
  .sw-content{
    padding:18px 13px 88px !important;
  }

  .sw-page{
    width:100% !important;
  }

  .sw-sidebar{
    width:280px !important;
  }

  .sw-hero-balance{
    min-height:205px !important;
    padding:24px 22px !important;
    border-radius:19px !important;
  }

  .sw-hero-amount strong{
    font-size:38px !important;
  }

  .sw-quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .sw-service-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

@media(max-width:720px){
  .sw-content{
    padding:15px 9px 88px !important;
  }

  .sw-page-heading h1{
    font-size:23px !important;
  }

  .sw-page-heading p{
    display:none !important;
  }

  .sw-hero-balance{
    min-height:190px !important;
    padding:22px 18px !important;
    border-radius:18px !important;
  }

  .sw-hero-amount strong{
    font-size:32px !important;
  }

  .sw-hero-art{
    right:-80px !important;
    opacity:.34 !important;
    transform:scale(.70) !important;
  }

  .sw-quick-section,
  .sw-page-overview #services{
    padding:14px 11px 15px !important;
    border-radius:16px !important;
  }

  .sw-quick-card{
    min-height:91px !important;
    border-radius:13px !important;
  }

  .sw-service-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .sw-service-card{
    min-height:86px !important;
    border-radius:13px !important;
  }

  .sw-service-icon{
    width:37px !important;
    height:37px !important;
    flex-basis:37px !important;
    border-radius:11px !important;
  }

  .sw-service-card strong{
    font-size:9px !important;
  }

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

@media(max-width:390px){
  .sw-content{
    padding-left:6px !important;
    padding-right:6px !important;
  }

  .sw-hero-balance{
    min-height:180px !important;
    padding:19px 15px !important;
    border-radius:16px !important;
  }

  .sw-hero-label-row{
    font-size:12px !important;
  }

  .sw-hero-amount strong{
    font-size:28px !important;
  }

  .sw-quick-grid{
    gap:7px !important;
  }

  .sw-quick-card{
    min-height:84px !important;
    padding:9px 5px !important;
  }

  .sw-quick-icon{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
  }

  .sw-quick-card strong{
    font-size:10px !important;
  }

  .sw-service-card{
    min-height:81px !important;
  }

  .sw-service-card strong{
    font-size:8.5px !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;
    }
}