/* ============================================================================
   MySubShare — Soft Vault
   Global theme for every member-facing portal page.
   ----------------------------------------------------------------------------
   Loaded only on portal pages, scoped to body.ms-sv so nothing else on the
   site is touched. Restyling each page's markup separately had already started
   to drift — one dark card set against a white shell — so the theme lives in
   one file instead, and every page inherits it.

   Order matters: this is enqueued last so it wins without needing !important
   on everything. Where !important does appear it is because the original rule
   is inline or itself !important.
   ============================================================================ */

body.ms-sv{
  --sv-bg:#0a0a0f;
  --sv-panel:#12121a;
  --sv-card:#181824;
  --sv-raise:#1f1f2e;
  --sv-line:#242433;
  --sv-line-2:#2c2c3d;

  --sv-orange:#fe6401;
  --sv-violet:#7c5cfc;
  --sv-mint:#22c58b;
  --sv-coral:#ff4d5e;
  --sv-amber:#ffb020;

  --sv-ink:#f5f5f8;
  --sv-ink-2:#a2a2b4;
  --sv-ink-3:#6b6b80;

  --sv-r:16px;
  --sv-r-lg:22px;

  --sv-display:'Fredoka',system-ui,-apple-system,sans-serif;
  --sv-body:'Plus Jakarta Sans','DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;

  background:var(--sv-bg) !important;
  color:var(--sv-ink) !important;
  font-family:var(--sv-body);
}

/* Theme wrappers too — page builders often paint their own background */
body.ms-sv #page,
body.ms-sv .site,
body.ms-sv .site-content,
body.ms-sv main,
body.ms-sv .entry-content,
body.ms-sv article,
body.ms-sv .wp-block-post-content{
  background:transparent !important;
  color:var(--sv-ink);
}

/* ---------------------------------------------------------------- Type ---- */
body.ms-sv h1, body.ms-sv h2, body.ms-sv h3,
body.ms-sv h4, body.ms-sv h5{
  color:var(--sv-ink) !important;
  font-family:var(--sv-display);
  font-weight:600 !important;
  letter-spacing:-.005em;
}
body.ms-sv h1{ font-size:26px !important; line-height:1.2 !important; }
body.ms-sv h2{ font-size:20px !important; line-height:1.25 !important; }
body.ms-sv h3{ font-size:17px !important; line-height:1.3 !important; }
body.ms-sv p,
body.ms-sv li,
body.ms-sv span,
body.ms-sv label,
body.ms-sv td{ color:var(--sv-ink-2); }
body.ms-sv strong,
body.ms-sv b{ color:var(--sv-ink); }
body.ms-sv a{ color:var(--sv-orange); }
body.ms-sv small{ color:var(--sv-ink-3); }
body.ms-sv hr{ border-color:var(--sv-line) !important; }

/* ------------------------------------------------------------- Surfaces --- */
body.ms-sv .credentials-container,
body.ms-sv .totp-credentials-page,
body.ms-sv .ks-pay-wrap,
body.ms-sv .ks-panel,
body.ms-sv .service-block,
body.ms-sv .dashboard-notifications,
/* v13.8.9: the wallet page's wrapper is .kw-wallet, not .kw-wrap. The old
   selector matched nothing anywhere in the plugin, which is why the Wallet page
   kept its light shell while every other portal page went dark. */
body.ms-sv .kw-wallet,
body.ms-sv .kr-wrap{
  background:transparent !important;
  color:var(--sv-ink) !important;
}

body.ms-sv .credential-card,
body.ms-sv .plan-card-new,
body.ms-sv .ks-account-card,
body.ms-sv .bank-details-card,
body.ms-sv .empty-state,
body.ms-sv .duplicate-warning,
body.ms-sv .info-steps,
body.ms-sv .ks-success-screen,
body.ms-sv .kw-card,
body.ms-sv .kr-card,
body.ms-sv .wallet-balance-widget{
  background:var(--sv-card) !important;
  border:1px solid var(--sv-line) !important;
  border-radius:var(--sv-r-lg) !important;
  box-shadow:none !important;
  color:var(--sv-ink) !important;
}

body.ms-sv .cred-card-header,
body.ms-sv .ks-account-card-header,
body.ms-sv .ks-pay-header{
  background:var(--sv-panel) !important;
  border-bottom:1px solid var(--sv-line) !important;
  color:var(--sv-ink) !important;
}

body.ms-sv .cred-card-body,
body.ms-sv .ks-success-body{ background:transparent !important; }

/* --------------------------------------------------------------- Fields --- */
body.ms-sv .cred-field,
body.ms-sv .ks-field,
body.ms-sv .form-group{ background:transparent !important; }

body.ms-sv .cred-value,
body.ms-sv .cred-text,
body.ms-sv .code-box,
body.ms-sv .code-display,
body.ms-sv .ks-account-value,
body.ms-sv .account-number{
  background:var(--sv-raise) !important;
  border:1px solid var(--sv-line-2) !important;
  border-radius:12px !important;
  color:var(--sv-ink) !important;
}

body.ms-sv .cred-field label,
body.ms-sv .ks-label,
body.ms-sv .ks-account-label,
body.ms-sv .code-label,
body.ms-sv .section-title{
  color:var(--sv-ink-3) !important;
  font-weight:700 !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:11.5px !important;
}

body.ms-sv input[type="text"],
body.ms-sv input[type="email"],
body.ms-sv input[type="tel"],
body.ms-sv input[type="password"],
body.ms-sv input[type="number"],
body.ms-sv input[type="date"],
body.ms-sv select,
body.ms-sv textarea,
body.ms-sv .ks-input,
body.ms-sv .ks-coupon-input{
  background:var(--sv-raise) !important;
  border:1.5px solid var(--sv-line-2) !important;
  border-radius:12px !important;
  color:var(--sv-ink) !important;
  font-family:var(--sv-body) !important;
  font-size:15px !important;
  min-height:46px;
  padding:12px 14px !important;
}
body.ms-sv input::placeholder,
body.ms-sv textarea::placeholder{ color:var(--sv-ink-3) !important; }
body.ms-sv input:focus,
body.ms-sv select:focus,
body.ms-sv textarea:focus{
  outline:none !important;
  border-color:var(--sv-orange) !important;
}
body.ms-sv select option{ background:var(--sv-raise); color:var(--sv-ink); }

/* -------------------------------------------------------------- Buttons --- */
body.ms-sv .btn-primary,
body.ms-sv .btn-subscribe,
body.ms-sv .btn-subscribe-now,
body.ms-sv .btn-subscribe-enhanced,
body.ms-sv .btn-plan-action.subscribe,
body.ms-sv .ks-submit-btn,
body.ms-sv .btn-complete-payment,
body.ms-sv .browse-plans-btn,
body.ms-sv .btn-confirm,
body.ms-sv .btn-get-credentials,
body.ms-sv .btn-view-login,
body.ms-sv .anike-banner-cta{
  background:var(--sv-orange) !important;
  background-image:none !important;
  color:#170a01 !important;
  border:none !important;
  border-radius:13px !important;
  font-family:var(--sv-body) !important;
  font-weight:700 !important;
  font-size:15px !important;
  min-height:48px;
  padding:14px 22px !important;
  box-shadow:none !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

body.ms-sv .btn-secondary,
body.ms-sv .copy-btn,
body.ms-sv .ks-copy-btn,
body.ms-sv .btn-copy,
body.ms-sv .show-password-btn,
body.ms-sv .desc-btn,
body.ms-sv .back-btn,
body.ms-sv .ks-back-btn,
body.ms-sv .btn-back-services,
body.ms-sv .ks-coupon-apply-btn{
  background:var(--sv-raise) !important;
  color:var(--sv-ink) !important;
  border:1px solid var(--sv-line-2) !important;
  border-radius:12px !important;
  font-family:var(--sv-body) !important;
  font-weight:600 !important;
  min-height:44px;
  box-shadow:none !important;
}

body.ms-sv .btn-cancel,
body.ms-sv .btn-delete-pending,
body.ms-sv .btn-confirm-removal{
  background:transparent !important;
  color:var(--sv-ink-3) !important;
  border:1px solid transparent !important;
  font-weight:600 !important;
}

body.ms-sv .btn-disabled,
body.ms-sv .btn-subscribed,
body.ms-sv button:disabled{
  background:var(--sv-line) !important;
  color:var(--sv-ink-3) !important;
  border-color:transparent !important;
  cursor:not-allowed;
}

/* ------------------------------------------------- Plans / add subscription */
body.ms-sv .service-block > h3,
body.ms-sv .service-block > h2{
  margin:26px 0 12px !important;
  font-size:18px !important;
}

body.ms-sv .plan-card-new{
  position:relative;
  overflow:hidden;
  padding:20px !important;
  margin-bottom:14px !important;
}
body.ms-sv .plan-card-new::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--sv-orange);
}
body.ms-sv .plan-card-new.popular::before{ background:var(--sv-violet); }
body.ms-sv .plan-card-new.is-subscribed::before{ background:var(--sv-mint); }

body.ms-sv .plan-name,
body.ms-sv .plan-title{
  font-family:var(--sv-display) !important;
  font-size:17px !important;
  color:var(--sv-ink) !important;
}
body.ms-sv .plan-price,
body.ms-sv .price-amount{
  font-family:var(--sv-display) !important;
  font-size:26px !important;
  font-weight:600 !important;
  color:var(--sv-ink) !important;
}
body.ms-sv .plan-period,
body.ms-sv .price-period{ color:var(--sv-ink-3) !important; font-size:13px !important; }

body.ms-sv .plan-description-box,
body.ms-sv .description-content{
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--sv-line) !important;
  border-radius:12px !important;
  color:var(--sv-ink-2) !important;
}
body.ms-sv .feature-item{ color:var(--sv-ink-2) !important; }

body.ms-sv .popular-badge,
body.ms-sv .plan-badge{
  background:rgba(124,92,252,.16) !important;
  color:#c9bdff !important;
  border:none !important;
  border-radius:8px !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* --------------------------------------------------------------- Payment -- */
body.ms-sv .ks-method-tabs{
  background:var(--sv-panel) !important;
  border:1px solid var(--sv-line) !important;
  border-radius:14px !important;
  padding:5px !important;
}
body.ms-sv .ks-method-tab{
  background:transparent !important;
  color:var(--sv-ink-3) !important;
  border:none !important;
  border-radius:10px !important;
  font-weight:700 !important;
  min-height:44px;
}
body.ms-sv .ks-method-tab.active{
  background:var(--sv-orange) !important;
  color:#170a01 !important;
}

body.ms-sv .ks-bank-pill,
body.ms-sv .bank-pill{
  background:var(--sv-raise) !important;
  border:1px solid var(--sv-line-2) !important;
  color:var(--sv-ink) !important;
  border-radius:11px !important;
}
body.ms-sv .ks-bank-pill.active,
body.ms-sv .bank-pill.active{
  border-color:var(--sv-orange) !important;
  background:rgba(254,100,1,.12) !important;
  color:var(--sv-orange) !important;
}

/* v14.1.0: the routing notice was the one element in the payment panel that
   never got a dark rule. It kept subscription-portal.css's light palette
   (#fef3c7 on #92400e), so it rendered as a pale yellow card in the middle of
   a dark page — and because `body.ms-sv strong` above paints every <strong>
   with --sv-ink, a near-white ink meant for dark surfaces, the bank names
   inside it (which are all wrapped in <strong>) came out white-on-cream and
   effectively invisible. Both halves are fixed here: a dark amber surface, and
   an explicit strong colour that beats the global rule on specificity. */
body.ms-sv .ks-routing-notice,
body.ms-sv .kw-routing-notice{
  background:rgba(255,176,32,.10) !important;
  border:1px solid rgba(255,176,32,.32) !important;
  color:var(--sv-ink-2) !important;
  border-radius:12px !important;
}
body.ms-sv .ks-routing-notice strong,
body.ms-sv .ks-routing-notice b,
body.ms-sv .kw-routing-notice strong,
body.ms-sv .kw-routing-notice b{
  color:var(--sv-amber) !important;
  font-weight:800 !important;
}

/* The wallet page's bank tabs are inline-styled white-on-slate, so they need
   !important to be reached at all. Matches the checkout pills above. */
body.ms-sv .kw-bank-tab{
  background:var(--sv-raise) !important;
  border:1px solid var(--sv-line-2) !important;
  color:var(--sv-ink) !important;
  border-radius:11px !important;
}
body.ms-sv .kw-bank-tab.active{
  background:rgba(254,100,1,.12) !important;
  border-color:var(--sv-orange) !important;
  color:var(--sv-orange) !important;
}

/* Same class of problem on the wallet page's own funding banner. */
body.ms-sv .kw-flw-banner{ border-width:1px !important; }
body.ms-sv .kw-flw-ok{
  background:rgba(34,197,139,.12) !important;
  border-color:rgba(34,197,139,.32) !important;
  color:#6ee7b7 !important;
}
body.ms-sv .kw-flw-warn{
  background:rgba(255,176,32,.12) !important;
  border-color:rgba(255,176,32,.32) !important;
  color:var(--sv-amber) !important;
}
body.ms-sv .kw-flw-err{
  background:rgba(255,77,94,.12) !important;
  border-color:rgba(255,77,94,.32) !important;
  color:#ff9aa5 !important;
}
body.ms-sv .kw-flw-banner .kw-flw-title,
body.ms-sv .kw-flw-banner .kw-flw-sub,
body.ms-sv .kw-flw-banner strong{ color:inherit !important; }

body.ms-sv .ks-file-drop{
  background:rgba(255,255,255,.03) !important;
  border:1.5px dashed var(--sv-line-2) !important;
  border-radius:14px !important;
  color:var(--sv-ink-2) !important;
}
body.ms-sv .ks-file-hint{ color:var(--sv-ink-2) !important; }
body.ms-sv .ks-file-hint-sub,
body.ms-sv .file-requirements{ color:var(--sv-ink-3) !important; }

body.ms-sv .ks-amount-highlight,
body.ms-sv .amount-to-pay{
  background:rgba(254,100,1,.1) !important;
  border:1px solid rgba(254,100,1,.26) !important;
  color:var(--sv-orange) !important;
  border-radius:12px !important;
}

body.ms-sv .ks-step-num{
  background:var(--sv-orange) !important;
  color:#170a01 !important;
}
body.ms-sv .ks-step-text,
body.ms-sv .ks-ss-step{ color:var(--sv-ink-2) !important; }

/* --------------------------------------------------------------- States --- */
body.ms-sv .ks-coupon-msg-success,
body.ms-sv .cred-success{
  background:rgba(34,197,139,.12) !important;
  border:1px solid rgba(34,197,139,.3) !important;
  color:#6ee7b7 !important;
  border-radius:12px !important;
}
body.ms-sv .ks-coupon-msg-error,
body.ms-sv .cred-error,
body.ms-sv .ks-form-error-bar,
body.ms-sv .ks-inline-error{
  background:rgba(255,77,94,.11) !important;
  border:1px solid rgba(255,77,94,.28) !important;
  color:#fca5a5 !important;
  border-radius:12px !important;
}
body.ms-sv .duplicate-warning{
  background:rgba(255,176,32,.09) !important;
  border:1px solid rgba(255,176,32,.26) !important;
  color:#ffd89a !important;
}
body.ms-sv .duplicate-help{ color:#ffd89a !important; }

body.ms-sv .expiry-badge,
body.ms-sv .status-badge{
  border-radius:8px !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.09em;
  text-transform:uppercase;
  border:none !important;
}

body.ms-sv .expired-overlay{ background:rgba(10,10,15,.86) !important; }
body.ms-sv .expired-message{
  background:var(--sv-card) !important;
  border:1px solid var(--sv-line) !important;
  color:var(--sv-ink) !important;
  border-radius:var(--sv-r) !important;
}

body.ms-sv .empty-state{ padding:38px 24px !important; text-align:center; }
body.ms-sv .empty-icon{ opacity:.5; }

/* --------------------------------------------------------------- Tables --- */
body.ms-sv table{ border-color:var(--sv-line) !important; }
body.ms-sv th{
  background:var(--sv-panel) !important;
  color:var(--sv-ink-3) !important;
  border-color:var(--sv-line) !important;
  font-size:11.5px !important;
  text-transform:uppercase;
  letter-spacing:.05em;
}
body.ms-sv td{
  background:transparent !important;
  border-color:var(--sv-line) !important;
  color:var(--sv-ink-2) !important;
}
body.ms-sv tr:hover td{ background:rgba(255,255,255,.025) !important; }

/* --------------------------------------------------------------- Modals --- */
body.ms-sv .modal,
body.ms-sv .modal-content,
body.ms-sv .popup-content,
body.ms-sv .totp-modal-content{
  background:var(--sv-card) !important;
  border:1px solid var(--sv-line) !important;
  border-radius:var(--sv-r-lg) !important;
  color:var(--sv-ink) !important;
}
body.ms-sv .modal-overlay,
body.ms-sv .popup-overlay{ background:rgba(4,4,10,.72) !important; }

/* ------------------------------------------------------------ Loading ----- */
body.ms-sv .spinner,
body.ms-sv .loading{ color:var(--sv-ink-3) !important; }
body.ms-sv .ks-skeleton-wrap > *{
  background:linear-gradient(90deg,var(--sv-panel),var(--sv-raise),var(--sv-panel)) !important;
}

/* ============================================================================
   Mobile — the portal is used on phones far more than desktop, so this is
   where the layout decisions get made rather than being an afterthought.
   ============================================================================ */
@media (max-width:820px){

  /* Full-bleed surface: content shouldn't sit in a pale margin */
  body.ms-sv .credentials-container,
  body.ms-sv .ks-pay-wrap,
  body.ms-sv #totp-subscription-portal{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  body.ms-sv h1{ font-size:23px !important; }
  body.ms-sv h2{ font-size:18px !important; }

  /* One column everywhere — two-up grids are unreadable at 380px */
  body.ms-sv .plans-grid,
  body.ms-sv .plan-cards,
  body.ms-sv .service-block .plans,
  body.ms-sv .cred-action-buttons{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  /* Full-width primary actions read better under the thumb */
  body.ms-sv .btn-primary,
  body.ms-sv .btn-subscribe,
  body.ms-sv .btn-subscribe-now,
  body.ms-sv .btn-plan-action,
  body.ms-sv .ks-submit-btn,
  body.ms-sv .btn-complete-payment{
    width:100% !important;
  }

  /* Payment method tabs scroll rather than squash */
  body.ms-sv .ks-method-tabs,
  body.ms-sv .ks-bank-pills{
    display:flex !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:7px;
  }
  body.ms-sv .ks-method-tabs::-webkit-scrollbar,
  body.ms-sv .ks-bank-pills::-webkit-scrollbar{ display:none; }
  body.ms-sv .ks-method-tab,
  body.ms-sv .ks-bank-pill{ flex:0 0 auto; white-space:nowrap; }

  /* Long values (account numbers, emails) must never overflow the card */
  body.ms-sv .cred-value,
  body.ms-sv .cred-text,
  body.ms-sv .ks-account-value,
  body.ms-sv .account-number{
    word-break:break-all;
    font-size:15px !important;
  }

  /* iOS zooms any input under 16px on focus */
  body.ms-sv input,
  body.ms-sv select,
  body.ms-sv textarea{ font-size:16px !important; }

  /* Wide tables scroll instead of breaking the layout */
  body.ms-sv table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ------------------------------------------------------------ A11y -------- */
body.ms-sv :focus-visible{
  outline:2px solid var(--sv-orange) !important;
  outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  body.ms-sv *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}