/* SMMPANELIX shared theme — consistent indigo/violet UI across every page.
   Drop this into the panel's global/custom CSS field. */
:root {
  --brand-primary: #6366f1;
  --brand-primary-dark: #4f46e5;
  --brand-secondary: #8b5cf6;
  --brand-soft: #eef2ff;
  --brand-border: #c7d2fe;
  --brand-text: #0f172a;
  --brand-muted: #64748b;
}

html {
  color-scheme: light;
  min-height: 100%;
  /* Put the branded canvas on the root so opaque body/theme defaults cannot cover it. */
  background-color: #f3f4ff !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='140' viewBox='0 0 240 140'%3E%3Ctext x='24' y='78' fill='%236366f1' fill-opacity='.075' font-size='14' font-weight='800' font-family='Arial,sans-serif' letter-spacing='2' transform='rotate(-24 120 70)'%3ESMMPANELIX%3C/text%3E%3C/svg%3E"),
    radial-gradient(ellipse 55% 42% at 8% 2%, rgba(139,92,246,.10), transparent 65%),
    radial-gradient(ellipse 55% 45% at 92% 8%, rgba(99,102,241,.11), transparent 66%),
    radial-gradient(ellipse 58% 45% at 55% 100%, rgba(6,182,212,.07), transparent 68%),
    linear-gradient(150deg, #f5f3ff 0%, #f3f5ff 48%, #eff6ff 100%) !important;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-size: 240px 140px, 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-attachment: fixed !important;
}
body {
  min-height: 100vh;
  background: transparent !important;
  color: var(--brand-text);
}
/* Older page snippets used a negative-z pseudo background; disable it so the
   SMMPANELIX root canvas remains visible consistently on every route. */
body::before { display: none !important; }
.smm-content, .app-content, .landing-page-container, .afx-root,
.page-wrapper, .content-wrapper, #app, #app-root,
main#panelYield, #panelYield.smm-content, #panelYield.app-content {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* The layout's main content area is a canvas, not another card around the page. */
main#panelYield, #panelYield.smm-content, #panelYield.app-content {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* Shared indigo components */
.btn-success, .btn-action-primary,
.landing-cta, .service-order-btn,
.afx-cta, .btn-primary, .btn-info,
#landingBackTop, .landing-filter-btn:hover, .landing-filter-btn.active,
.review-tab-btn:hover, .review-tab-btn.active,
.faq-filter-btn:hover, .faq-filter-btn.active {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(99,102,241,.20) !important;
}
.btn-success:hover, .btn-action-primary:hover,
.landing-cta:hover, .service-order-btn:hover, .afx-cta:hover {
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary)) !important;
  border-color: var(--brand-primary-dark) !important;
}
.sidebar-nav-item.active {
  background: var(--brand-soft) !important;
  border-color: var(--brand-border) !important;
  color: var(--brand-primary-dark) !important;
}
.sidebar-nav-item.active i { color: var(--brand-primary) !important; }
input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.16) !important;
}

/* Landing page: replace green accents with the shared brand color.
   Keep semantic success/error badges untouched. */
.landing-filter-btn:hover, .landing-filter-btn.active,
.review-tab-btn:hover, .review-tab-btn.active,
.faq-filter-btn:hover, .faq-filter-btn.active,
.landing-page-container .faq-arrow,
.landing-page-container .platform-from,
.landing-page-container .payment-eta,
.landing-page-container .sp-toast-time,
.landing-page-container .prose-block b {
  color: var(--brand-primary-dark) !important;
}
.landing-page-container .service-showcase-card:hover,
.landing-page-container .review-card:hover,
.landing-page-container .faq-card:hover,
.landing-page-container .faq-card[open] {
  border-color: var(--brand-border) !important;
}
.landing-page-container .faq-card[open] { background: #fafaff !important; }
.landing-page-container .faq-summary:focus-visible,
.landing-page-container .calc-range:focus-visible,
.landing-page-container button:focus-visible,
.landing-page-container a:focus-visible {
  outline-color: var(--brand-primary) !important;
}
.landing-page-container .faq-card[open] .faq-arrow { color: var(--brand-primary) !important; }
.landing-page-container .calc-result-primary {
  background: var(--brand-soft) !important;
  border-color: var(--brand-border) !important;
}
.landing-page-container .calc-result-primary .calc-result-value { color: var(--brand-primary-dark) !important; }

/* Order history page accent harmonization (status colors stay meaningful). */
.afx-blob.b1 { background: rgba(99,102,241,.12) !important; }
.afx-blob.b2 { background: rgba(139,92,246,.10) !important; }
.afx-blob.b3 { background: rgba(6,182,212,.08) !important; }
.afx-blob { filter: none !important; animation: none !important; }
.afx-gridbg { display: none !important; }
.afx-title-ico {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
  box-shadow: 0 6px 16px rgba(99,102,241,.22) !important;
}
.afx-grad-text {
  background-image: linear-gradient(92deg, #0f172a 10%, var(--brand-primary-dark) 60%, var(--brand-secondary) 100%) !important;
}
.afx-cta { background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important; }
#orderStatusTabs .modern-tab-btn:hover {
  border-color: var(--brand-border) !important;
  color: var(--brand-primary-dark) !important;
  transform: none !important;
}
#orderStatusTabs .modern-tab-btn:hover i { color: var(--brand-primary) !important; }
#orderStatusTabs .modern-tab-btn.active {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 6px 14px rgba(99,102,241,.22) !important;
}

/* Smooth, light surfaces: avoid expensive blur on low-power/mobile devices. */
.afx-glass, .order-picker-menu, .modal-content {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.afx-glass { background: rgba(255,255,255,.94) !important; }
button, .btn, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Dark mode contrast system — applied across all pages, not a single widget.
   Keep the panel canvas dark and give every card a matching dark surface so
   light text never sits on a white card. */
body.dark-mode,
html.dark body {
  background-color: #0b0b1c !important;
  color: #e2e8f0 !important;
}
html.dark {
  background-color: #0b0b1c !important;
  background-image: none !important;
}
body.dark-mode :is(.bg-white, .card, .panel, .widget, .box,
  .service-showcase-card, .review-card, .faq-card, .platform-card,
  .guarantee-card, .afx-glass, .afx-table-card, .afx-filterbar,
  .afx-card, .sx-card, .sx-side-card, .sx-notice-card, .sx-header-banner,
  .sx-main-panel, .sx-tier-widget, .svc-card, .well, .bubble-user) {
  background-color: #161634 !important;
  background-image: none !important;
  border-color: #303052 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
}
body.dark-mode :is(.service-showcase-card, .review-card, .faq-card,
  .platform-card, .guarantee-card, .afx-glass, .afx-table-card,
  .afx-filterbar, .sx-card, .sx-side-card, .sx-notice-card,
  .sx-header-banner, .sx-main-panel, .sx-tier-widget, .svc-card)
  :is(h1,h2,h3,h4,p,span,li,label,td,th,strong,b,small) {
  color: #e2e8f0 !important;
}
body.dark-mode :is(.service-showcase-card, .review-card, .faq-card,
  .platform-card, .guarantee-card, .afx-glass, .afx-table-card,
  .afx-filterbar, .sx-card, .sx-side-card, .sx-notice-card,
  .sx-header-banner, .sx-main-panel, .sx-tier-widget, .svc-card)
  :is(.text-slate-500, .text-slate-400, .text-gray-500, .text-gray-400,
      .afx-sub, .sx-sub-hint, .sx-label, .sx-sum-lbl, .sx-spec-label) {
  color: #aab4c8 !important;
}
body.dark-mode :is(.service-showcase-card, .review-card, .faq-card,
  .platform-card, .guarantee-card) .service-order-btn,
body.dark-mode :is(.service-showcase-card, .review-card, .faq-card,
  .platform-card, .guarantee-card) .service-order-btn * {
  color: #ffffff !important;
}
body.dark-mode .afx-table thead th,
body.dark-mode table thead th {
  background: #10102b !important;
  border-color: #303052 !important;
  color: #b9c3d8 !important;
}
body.dark-mode .afx-table tbody td,
body.dark-mode table tbody td {
  background: transparent !important;
  border-color: #272744 !important;
  color: #d5dced !important;
}
body.dark-mode .afx-table tbody tr:hover,
body.dark-mode table tbody tr:hover {
  background: #202043 !important;
}
body.dark-mode .sx-main-panel input,
body.dark-mode .sx-main-panel select,
body.dark-mode .sx-main-panel textarea,
body.dark-mode .sx-side-card input,
body.dark-mode .sx-side-card select,
body.dark-mode .sx-side-card textarea {
  background: #0d0d24 !important;
  color: #f1f5f9 !important;
  border-color: #34345d !important;
}
body.dark-mode .sx-main-panel input::placeholder,
body.dark-mode .sx-main-panel textarea::placeholder {
  color: #8b93ad !important;
}
body.dark-mode .sx-modal-dialog,
body.dark-mode .afx-root .modal-content {
  background: #161634 !important;
  color: #e2e8f0 !important;
  border-color: #303052 !important;
}
body.dark-mode .sx-modal-dialog :is(h1,h2,h3,h4,p,span,li,label,td,th,strong,b,small) { color: #e2e8f0; }

/* Sign-in/landing page: unify every light card/surface in night mode, not just
   the featured service tiles. This prevents pale text on white panels. */
body.dark-mode .landing-page-container :is(
  .bg-white, .service-showcase-card, .review-card, .faq-card, .trust-pill,
  .how-step, .speed-chip, .platform-card, .payment-card, .bonus-tier,
  .deposit-step, .calc-result, .reseller-benefit, .guarantee-card,
  .blog-card, .sp-toast, .faq-icon-pill, .fee-low
) {
  background-color: #161634 !important;
  background-image: none !important;
  border-color: #303052 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
}
body.dark-mode .landing-page-container :is(
  .bg-white, .service-showcase-card, .review-card, .faq-card, .trust-pill,
  .how-step, .speed-chip, .platform-card, .payment-card, .bonus-tier,
  .deposit-step, .calc-result, .reseller-benefit, .guarantee-card,
  .blog-card, .sp-toast, .faq-icon-pill, .fee-low
) :is(h1,h2,h3,h4,p,span,li,label,td,th,strong,b,small) {
  color: #e2e8f0 !important;
}
body.dark-mode .landing-page-container :is(
  .bg-white, .service-showcase-card, .review-card, .faq-card, .trust-pill,
  .how-step, .speed-chip, .platform-card, .payment-card, .bonus-tier,
  .deposit-step, .calc-result, .reseller-benefit, .guarantee-card,
  .blog-card, .sp-toast
) :is(.text-slate-500, .text-slate-400, .text-slate-600,
      .text-gray-500, .text-gray-400, .faq-answer, .how-step-text,
      .platform-count, .sp-toast-text, .compare-no, .calc-result-label) {
  color: #aab4c8 !important;
}
body.dark-mode .landing-page-container .faq-card[open],
body.dark-mode .landing-page-container .calc-result-primary,
body.dark-mode .landing-page-container .compare-yes,
body.dark-mode .landing-page-container .fee-zero {
  background: #202043 !important;
  border-color: #41417a !important;
}
body.dark-mode .landing-page-container .blog-tag {
  background: #252552 !important;
  color: #e0e7ff !important;
}
body.dark-mode .landing-page-container input,
body.dark-mode .landing-page-container select,
body.dark-mode .landing-page-container textarea {
  background-color: #0d0d24 !important;
  border-color: #34345d !important;
  color: #f1f5f9 !important;
}
body.dark-mode .landing-page-container input::placeholder,
body.dark-mode .landing-page-container textarea::placeholder {
  color: #8b93ad !important;
}

/* Night-mode icon legibility: preserve explicit brand/status icon colors;
   lift muted slate icons so they remain visible on dark cards. */
body.dark-mode :is(.landing-page-container, .smm-custom-wrapper, .afx-root) i.text-slate-400,
body.dark-mode :is(.landing-page-container, .smm-custom-wrapper, .afx-root) i.text-slate-500,
body.dark-mode :is(.landing-page-container, .smm-custom-wrapper, .afx-root) .bi.text-slate-400,
body.dark-mode :is(.landing-page-container, .smm-custom-wrapper, .afx-root) .bi.text-slate-500 {
  color: #a5b4fc !important;
}

/* Dark-mode utility surface fixes for light-colored icon tiles and badges on
   the sign-in/add-funds landing page. */
body.dark-mode .landing-page-container :is(
  .payment-icon, .how-step-icon, .guarantee-icon, .reseller-benefit-icon,
  .faq-icon-pill
) {
  background-color: #252552 !important;
  background-image: none !important;
  border-color: #41417a !important;
  color: #c7d2fe !important;
}
body.dark-mode .landing-page-container .payment-icon.bg-emerald-50 { color: #34d399 !important; }
body.dark-mode .landing-page-container .payment-icon.bg-indigo-50 { color: #a5b4fc !important; }
body.dark-mode .landing-page-container .payment-icon.bg-amber-50 { color: #fbbf24 !important; }
body.dark-mode .landing-page-container .payment-icon.bg-sky-50 { color: #38bdf8 !important; }
body.dark-mode .landing-page-container .payment-icon.bg-rose-50 { color: #fb7185 !important; }
body.dark-mode .landing-page-container .reseller-benefit-icon { color: #34d399 !important; }
body.dark-mode .landing-page-container .fee-zero {
  background: #123b36 !important;
  color: #6ee7b7 !important;
  border-color: #176b58 !important;
}
body.dark-mode .landing-page-container .fee-low {
  background: #252552 !important;
  color: #c7d2fe !important;
  border-color: #41417a !important;
}
body.dark-mode .landing-page-container [class~="bg-amber-50/70"],
body.dark-mode .landing-page-container [class~="bg-amber-50"] {
  background: #202043 !important;
  border-color: #41417a !important;
}
body.dark-mode .landing-page-container [class~="bg-indigo-50"],
body.dark-mode .landing-page-container [class~="bg-sky-50"],
body.dark-mode .landing-page-container [class~="bg-rose-50"],
body.dark-mode .landing-page-container [class~="bg-violet-50"],
body.dark-mode .landing-page-container [class~="bg-purple-50"],
body.dark-mode .landing-page-container [class~="bg-blue-50"],
body.dark-mode .landing-page-container [class~="bg-teal-50"] {
  background: #252552 !important;
  border-color: #41417a !important;
}
body.dark-mode .landing-page-container [class~="text-amber-900"],
body.dark-mode .landing-page-container [class~="text-amber-800"],
body.dark-mode .landing-page-container [class~="text-indigo-900"],
body.dark-mode .landing-page-container [class~="text-emerald-900"],
body.dark-mode .landing-page-container [class~="text-rose-900"] {
  color: #e2e8f0 !important;
}
body.dark-mode .landing-page-container .payment-icon i {
  color: inherit !important;
}

/* Landing-page final dark-mode block audit: translucent white panels, filter
   chips, pale compare rows and semi-transparent utility backgrounds. */
body.dark-mode .landing-page-container [class~="bg-white/95"],
body.dark-mode .landing-page-container [class~="bg-white/90"],
body.dark-mode .landing-page-container [class~="bg-white/80"],
body.dark-mode .landing-page-container [class~="bg-white/70"] {
  background: #161634 !important;
  background-image: none !important;
  border-color: #303052 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.22) !important;
}
body.dark-mode .landing-page-container :is(.review-tab-btn, .faq-filter-btn, .landing-filter-btn):not(.active) {
  background: #161634 !important;
  border-color: #303052 !important;
  color: #cbd5e1 !important;
}
body.dark-mode .landing-page-container :is(.review-tab-btn, .faq-filter-btn, .landing-filter-btn):not(.active) i {
  color: #a5b4fc !important;
}
body.dark-mode .landing-page-container .compare-row {
  border-color: #303052 !important;
  background: transparent !important;
}
body.dark-mode .landing-page-container .compare-row:hover {
  background: #1b1b3d !important;
}
body.dark-mode .landing-page-container .compare-label,
body.dark-mode .landing-page-container .compare-no {
  color: #cbd5e1 !important;
  border-color: #303052 !important;
}
body.dark-mode .landing-page-container .compare-yes {
  background: #123b36 !important;
  color: #a7f3d0 !important;
}
body.dark-mode .landing-page-container .calc-value {
  background: #123b36 !important;
  color: #a7f3d0 !important;
  border-color: #176b58 !important;
}
body.dark-mode .landing-page-container [class~="bg-emerald-100/70"],
body.dark-mode .landing-page-container [class~="bg-emerald-100/50"],
body.dark-mode .landing-page-container [class~="bg-emerald-100/35"] {
  background: #123b36 !important;
  border-color: #176b58 !important;
}
body.dark-mode .landing-page-container [class~="bg-slate-50/80"],
body.dark-mode .landing-page-container [class~="bg-slate-100/90"] {
  background: #161634 !important;
  border-color: #303052 !important;
}

/* Authenticated New Order page: dark-mode pass for the generated service
   specification rows and platform filters. These were custom white surfaces,
   so the layout's generic .bg-white rules did not reach them. */
body.dark-mode .smm-custom-wrapper #platformPills .modern-tab-btn:not(.active) {
  background: #1b1b3d !important;
  border-color: #34345d !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
}
body.dark-mode .smm-custom-wrapper #platformPills .modern-tab-btn:not(.active):hover {
  background: #252552 !important;
  border-color: #56568a !important;
  color: #ffffff !important;
}
body.dark-mode .smm-custom-wrapper #platformPills .modern-tab-btn[data-net="ig"] i { color: #fb7185 !important; }
body.dark-mode .smm-custom-wrapper #platformPills .modern-tab-btn[data-net="yt"] i { color: #f87171 !important; }
body.dark-mode .smm-custom-wrapper #platformPills .modern-tab-btn[data-net="tg"] i { color: #38bdf8 !important; }
body.dark-mode .smm-custom-wrapper #platformPills .modern-tab-btn[data-net="fb"] i { color: #818cf8 !important; }
body.dark-mode .smm-custom-wrapper #platformPills .modern-tab-btn[data-net="tt"] i,
body.dark-mode .smm-custom-wrapper #platformPills .modern-tab-btn[data-net="tw"] i { color: #e2e8f0 !important; }
body.dark-mode .smm-custom-wrapper .svc-card,
body.dark-mode .smm-custom-wrapper .svc-row,
body.dark-mode .smm-custom-wrapper .svc-notes {
  background: #11112b !important;
  background-image: none !important;
  border-color: #303052 !important;
  color: #e2e8f0 !important;
}
body.dark-mode .smm-custom-wrapper .svc-head { border-bottom-color: #34345d !important; }
body.dark-mode .smm-custom-wrapper .svc-title,
body.dark-mode .smm-custom-wrapper .svc-k,
body.dark-mode .smm-custom-wrapper .svc-v,
body.dark-mode .smm-custom-wrapper .svc-notes-title,
body.dark-mode .smm-custom-wrapper .svc-notes li {
  color: #e2e8f0 !important;
}
body.dark-mode .smm-custom-wrapper .svc-copy {
  background: #252552 !important;
  color: #c7d2fe !important;
  border-color: #41417a !important;
}
body.dark-mode .smm-custom-wrapper .svc-ico {
  background: #252552 !important;
  color: #a5b4fc !important;
  border: 1px solid #41417a !important;
}
body.dark-mode .smm-custom-wrapper .svc-warn {
  background: #202043 !important;
  border-color: #41417a !important;
  color: #c7d2fe !important;
}
body.dark-mode .smm-custom-wrapper :is(
  .control-label, .sx-section-mini-label, .sx-page-title, .sx-label, .sx-val,
  .sx-level-head, .sx-tier-curr-name, .sx-side-head, .sx-sum-service-name,
  .sx-sum-lbl, .sx-sum-val, .sx-spec-label, .sx-spec-val,
  .sx-notice-head, .sx-notice-card, .step-item, .step-label
) {
  color: #e2e8f0 !important;
}
body.dark-mode .smm-custom-wrapper :is(.sx-label, .sx-sub-hint, .sx-sum-lbl, .sx-spec-label) {
  color: #aab4c8 !important;
}

/* Full authenticated New Order dark-mode cleanup: every custom surface, form
   row, chip and icon tile gets dark-theme contrast (not only the spec table). */
body.dark-mode .smm-custom-wrapper :is(
  .sx-header-banner, .sx-card, .sx-main-panel, .sx-side-card, .sx-notice-card,
  .sx-bottom-banner, .sx-tier-widget, .sx-summary-widget, .sx-tier-card,
  .sx-next-unlock-strip, .sx-active-perks-box, .sx-sum-box, .sx-modal-dialog,
  .charge-main-box, .charge-breakdown, .svc-card, .svc-row, .svc-notes,
  .lf-at-wrap, .lf-lowbal-box, .lf-lowbal-card
) {
  background-color: #15152f !important;
  background-image: none !important;
  border-color: #303052 !important;
  color: #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.24) !important;
}
body.dark-mode .smm-custom-wrapper :is(
  .sx-header-banner, .sx-card, .sx-main-panel, .sx-side-card, .sx-notice-card,
  .sx-bottom-banner, .sx-tier-widget, .sx-summary-widget, .sx-tier-card,
  .sx-next-unlock-strip, .sx-active-perks-box, .sx-sum-box, .sx-modal-dialog,
  .charge-main-box, .charge-breakdown, .svc-card, .svc-row, .svc-notes,
  .lf-at-wrap, .lf-lowbal-box, .lf-lowbal-card
) :is(h1,h2,h3,h4,p,span,label,li,td,th,b,strong,small) {
  color: #e2e8f0 !important;
}
body.dark-mode .smm-custom-wrapper :is(
  .sx-label, .sx-sub-hint, .sx-sum-lbl, .sx-spec-label, .lf-at-unit,
  .svc-k, .svc-notes li, .sx-tier-mini-lbl, .sx-status-pill
) { color: #aab4c8 !important; }
body.dark-mode .smm-custom-wrapper :is(
  .svc-head, .sx-side-head, .sx-section-head-row, .sx-modal-header,
  .sx-modal-footer, .sx-perks-box-title, .svc-notes-title
) { border-color: #303052 !important; color: #e2e8f0 !important; }
body.dark-mode .smm-custom-wrapper :is(
  .svc-copy, .sx-id-jump-box, .sx-valid-pill, .sx-id-chip,
  .sx-view-all-tiers-btn, .sx-clear-btn, .sx-paste-btn
) {
  background: #252552 !important; border-color: #41417a !important;
  color: #c7d2fe !important;
}
body.dark-mode .smm-custom-wrapper :is(.sx-icon-wrap, .sx-side-ico, .svc-ico, .lbl-ico) {
  background: #252552 !important; border-color: #41417a !important;
  color: #c7d2fe !important;
}
body.dark-mode .smm-custom-wrapper :is(
  .sx-card, .sx-side-card, .sx-main-panel, .sx-notice-card, .sx-header-banner,
  .sx-tier-widget, .sx-summary-widget, .sx-modal-dialog, .svc-card, .svc-row,
  .svc-notes, .charge-main-box
) i:not(.fa-brands) { color: #a5b4fc !important; }
body.dark-mode .smm-custom-wrapper :is(
  .sx-add-btn, .sx-modal-addfunds-btn, .smm-place-order-btn, .short-add-btn,
  .sx-mode-btn.active
),
body.dark-mode .smm-custom-wrapper :is(
  .sx-add-btn, .sx-modal-addfunds-btn, .smm-place-order-btn, .short-add-btn,
  .sx-mode-btn.active
) * { color: #ffffff !important; }
body.dark-mode .smm-custom-wrapper .svc-warn {
  background: #202043 !important; color: #c7d2fe !important;
  border-color: #41417a !important;
}
body.dark-mode .smm-custom-wrapper form.order-form .control-label,
body.dark-mode .smm-custom-wrapper .sx-section-mini-label,
body.dark-mode .smm-custom-wrapper .sx-page-title,
body.dark-mode .smm-custom-wrapper .sx-val,
body.dark-mode .smm-custom-wrapper .sx-spec-val,
body.dark-mode .smm-custom-wrapper .sx-sum-service-name {
  color: #f1f5f9 !important;
}
body.dark-mode .smm-custom-wrapper input,
body.dark-mode .smm-custom-wrapper select,
body.dark-mode .smm-custom-wrapper textarea {
  background-color: #0d0d24 !important;
  color: #f1f5f9 !important;
  border-color: #34345d !important;
}
body.dark-mode .smm-custom-wrapper input::placeholder,
body.dark-mode .smm-custom-wrapper textarea::placeholder { color: #8b93ad !important; }
/* Small icon buttons and their glyphs stay visible against dark surfaces. */
body.dark-mode .smm-custom-wrapper .sx-icon-wrap i,
body.dark-mode .smm-custom-wrapper .sx-side-ico i,
body.dark-mode .smm-custom-wrapper .svc-ico i,
body.dark-mode .smm-custom-wrapper .lbl-ico i { color: #c7d2fe !important; }

/* Final global pass for dark-mode white controls and icons on authenticated
   pages. Safe to install once as panel-wide custom CSS. */
body.dark-mode .smm-custom-wrapper form.order-form :is(input,textarea,select,.form-control),
body.dark-mode .smm-custom-wrapper :is(input.form-control,textarea.form-control,select.form-control) {
  background: #11112b !important;
  background-image: none !important;
  border-color: #34345d !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  box-shadow: none !important;
}
body.dark-mode .smm-custom-wrapper form.order-form :is(input,textarea,select)::placeholder,
body.dark-mode .smm-custom-wrapper :is(input.form-control,textarea.form-control)::placeholder {
  color: #9ba6bf !important;
  -webkit-text-fill-color: #9ba6bf !important;
  opacity: 1 !important;
}
body.dark-mode .smm-custom-wrapper .order-input-icon > i,
body.dark-mode .smm-custom-wrapper .sx-input-actions i,
body.dark-mode .smm-custom-wrapper .lbl-ico i {
  color: #a5b4fc !important;
}
body.dark-mode .smm-custom-wrapper :is(.qty-pill, .sx-mode-btn:not(.active), .sx-valid-pill,
  .sx-id-chip, .sx-status-pill, .sx-notice-badge, .sx-tier-name-badge) {
  background: #252552 !important;
  border-color: #41417a !important;
  color: #dbeafe !important;
}
body.dark-mode .smm-custom-wrapper .qty-pill:hover,
body.dark-mode .smm-custom-wrapper .sx-mode-btn:not(.active):hover {
  background: #34345f !important;
  color: #ffffff !important;
}
body.dark-mode .smm-custom-wrapper .min-max,
body.dark-mode .smm-custom-wrapper .help-block {
  color: #aab4c8 !important;
}
body.dark-mode .smm-custom-wrapper .sx-prog-track,
body.dark-mode .smm-custom-wrapper .sx-live-speed-track,
body.dark-mode .smm-custom-wrapper .sx-speed-bar {
  background: #29294a !important;
}
body.dark-mode .smm-custom-wrapper .sx-spec-divider { background: #41417a !important; }
body.dark-mode .smm-custom-wrapper .order-picker-selected,
body.dark-mode .smm-custom-wrapper .order-picker-menu,
body.dark-mode .smm-custom-wrapper .order-picker-search {
  -webkit-text-fill-color: #e2e8f0 !important;
}

/* Both screenshot layouts: readable summary widgets, semantic icons and
   mobile navigation, using the same global stylesheet on every route. */
body.dark-mode .smm-custom-wrapper :is(
  .sx-summary-widget, .sx-sum-service-name, .sx-sum-box, .sx-spec-block,
  .sx-dual-specs, .sx-notice-card, .sx-live-speed-card, .sx-live-speed-main,
  .sx-active-perks-box, .sx-next-unlock-strip, .lf-svc-badge, .lf-svc-meta,
  .lf-at-wrap, .sx-tier-widget, .sx-bottom-banner, .charge-main-box
) {
  background-color: #15152f !important;
  background-image: none !important;
  border-color: #303052 !important;
  color: #e2e8f0 !important;
}
body.dark-mode .smm-custom-wrapper :is(
  .sx-sum-lbl, .sx-spec-label, .sx-live-speed-foot, .sx-live-speed-sub,
  .sx-notice-list, .sx-active-perks-list, .sx-side-head, .svc-k,
  .help-block, .min-max, .lf-at-unit
) { color: #c0c8dc !important; }
body.dark-mode .smm-custom-wrapper :is(
  .sx-sum-val, .sx-spec-val, .sx-live-speed-val, .sx-sum-service-name,
  .sx-notice-head, .sx-perks-box-title, .sx-live-speed-foot b
) { color: #f1f5f9 !important; }
body.dark-mode .smm-custom-wrapper :is(
  .sx-side-ico, .sx-notice-badge, .sx-icon-tile, .sx-mini-icon,
  .sx-stat-icon, .lbl-ico, .order-input-icon > i
) {
  color: #c7d2fe !important;
  border-color: #41417a !important;
}
body.dark-mode .smm-custom-wrapper :is(.text-emerald-600, .text-green-600) { color: #6ee7b7 !important; }
body.dark-mode .smm-custom-wrapper :is(.text-amber-600, .text-yellow-600) { color: #fcd34d !important; }
body.dark-mode .smm-custom-wrapper :is(.text-indigo-600, .text-violet-600, .text-purple-600) { color: #c4b5fd !important; }
body.dark-mode .smm-custom-wrapper :is(.text-blue-600, .text-sky-600) { color: #93c5fd !important; }
body.dark-mode .smm-custom-wrapper :is(.sx-side-ico.emerald, .sx-side-ico.amber, .sx-side-ico.indigo) {
  background: #252552 !important;
}

/* Mobile: keep the fixed bottom navigation distinct from page content and
   make its icon/label contrast consistent in dark mode. */
@media (max-width: 767px) {
  body.dark-mode :is(#mobileBottomNav, .mobile-bottom-nav, .bottom-nav, .lfp-bottomnav) {
    background: #111128 !important;
    border-top: 1px solid #303052 !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.3) !important;
  }
  body.dark-mode :is(#mobileBottomNav, .mobile-bottom-nav, .bottom-nav, .lfp-bottomnav) :is(a,button,.nav-item,span) {
    color: #b9c2d8 !important;
  }
  body.dark-mode :is(#mobileBottomNav, .mobile-bottom-nav, .bottom-nav, .lfp-bottomnav) :is(i,svg) {
    color: #c7d2fe !important;
    fill: currentColor;
  }
  body.dark-mode :is(#mobileBottomNav, .mobile-bottom-nav, .bottom-nav, .lfp-bottomnav) .lfp-active,
  body.dark-mode :is(#mobileBottomNav, .mobile-bottom-nav, .bottom-nav, .lfp-bottomnav) .active {
    color: #a78bfa !important;
  }
}

/* Screenshot correction: fully opaque dark category/service picker, with a
   high-contrast active row (prevents page content showing through the menu). */
body.dark-mode .smm-custom-wrapper .order-picker-menu {
  background: #111128 !important;
  background-color: #111128 !important;
  background-image: none !important;
  border-color: #41417a !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  isolation: isolate;
  z-index: 10050 !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu :is(.lf-pk-bar,.order-picker-list) {
  background: #14142e !important;
  background-color: #14142e !important;
  background-image: none !important;
  opacity: 1 !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .lf-pk-bar {
  border-bottom-color: #34345d !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .lf-pk-count {
  background: #252552 !important;
  background-image: none !important;
  border-color: #41417a !important;
  color: #e0e7ff !important;
  box-shadow: none !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .order-picker-search,
body.dark-mode .smm-custom-wrapper .order-picker-menu .lf-pk-search {
  background-color: #0d0d22 !important;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjYzRjYjZmJyBzdHJva2Utd2lkdGg9JzIuNCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJz48Y2lyY2xlIGN4PScxMScgY3k9JzExJyByPSc3Jy8+PHBhdGggZD0nTTIwIDIwbC0zLjYtMy42Jy8+PC9zdmc+) !important;
  border-color: #41417a !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .order-picker-search::placeholder,
body.dark-mode .smm-custom-wrapper .order-picker-menu .lf-pk-search::placeholder {
  color: #aab4c8 !important;
  -webkit-text-fill-color: #aab4c8 !important;
  opacity: 1 !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .order-picker-item {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #e2e8f0 !important;
  opacity: 1 !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .order-picker-item :is(
  .name, .name span, .svc-pick, .svc-pick-name, .svc-pick-top, .svc-tag, .svc-flag
) {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .order-picker-item:hover,
body.dark-mode .smm-custom-wrapper .order-picker-menu .order-picker-item.lf-pk-kb {
  background: #252552 !important;
  background-image: none !important;
  border-color: #53539a !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .order-picker-item.active {
  background: linear-gradient(135deg, #4641a2, #37316f) !important;
  background-color: #403b8e !important;
  border-color: #8277ff !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 #a78bfa !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .order-picker-item.active :is(
  .name, .name span, .svc-pick, .svc-pick-name, .svc-pick-top
) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .order-picker-list .meta {
  color: #aab4c8 !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .order-picker-item + .order-picker-item::before {
  background: #34345d !important;
  opacity: 1 !important;
}

/* High-contrast dark-mode service picker chips, prices and quantity limits. */
body.dark-mode .smm-custom-wrapper .order-picker-menu :is(
  .order-picker-id, .svc-pick-price, .lf-pk-count
),
body.dark-mode .smm-custom-wrapper .order-picker-selected :is(
  .order-picker-id, .svc-pick-price
) {
  background: #252552 !important;
  background-image: none !important;
  border-color: #55558b !important;
  color: #e0e7ff !important;
  -webkit-text-fill-color: #e0e7ff !important;
  box-shadow: none !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .svc-tag {
  background: #252349 !important;
  background-image: none !important;
  border-color: #51467a !important;
  color: #e9ddff !important;
  -webkit-text-fill-color: #e9ddff !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .svc-tag :is(i,svg) {
  color: #c4b5fd !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .svc-tag.svc-time,
body.dark-mode .smm-custom-wrapper .order-picker-menu .svc-tag.lf-pk-time {
  background: #12323c !important;
  border-color: #286074 !important;
  color: #a5f3fc !important;
  -webkit-text-fill-color: #a5f3fc !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .svc-tag.svc-time i,
body.dark-mode .smm-custom-wrapper .order-picker-menu .svc-tag.lf-pk-time i {
  color: #67e8f9 !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .svc-flag.vip {
  background: #49204e !important; border-color: #823b88 !important;
  color: #f5d0fe !important; -webkit-text-fill-color: #f5d0fe !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .svc-flag.recommend {
  background: #252552 !important; border-color: #55558b !important;
  color: #c7d2fe !important; -webkit-text-fill-color: #c7d2fe !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .svc-flag.super {
  background: #143b36 !important; border-color: #28745f !important;
  color: #a7f3d0 !important; -webkit-text-fill-color: #a7f3d0 !important;
}
body.dark-mode .smm-custom-wrapper .order-picker-menu .svc-flag.fast {
  background: #30234d !important; border-color: #67518b !important;
  color: #ddd6fe !important; -webkit-text-fill-color: #ddd6fe !important;
}
body.dark-mode .smm-custom-wrapper form.order-form #small_min_max_div,
body.dark-mode .smm-custom-wrapper #small_min_max_div {
  background: #17172f !important;
  border-color: #3d3d65 !important;
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
}
body.dark-mode .smm-custom-wrapper #small_min_max_div :is(span,b,strong) {
  color: #e2e8f0 !important;
  -webkit-text-fill-color: #e2e8f0 !important;
}
body.dark-mode .smm-custom-wrapper .charge-amount-badge {
  background: #101027 !important;
  border-color: #41417a !important;
  box-shadow: none !important;
}
body.dark-mode .smm-custom-wrapper .charge-amount-badge :is(.charge-curr,.charge-input-field) {
  color: #e0e7ff !important;
  -webkit-text-fill-color: #e0e7ff !important;
}