/* ============================================================
   SocialBoost Dark Theme – Instagram × TikTok
   ============================================================ */

/* ---- CSS Variables ---- */
:root {
  --sb-bg: #0A0A0F;
  --sb-surface: rgba(255,255,255,0.04);
  --sb-surface-2: rgba(255,255,255,0.07);
  --sb-border: rgba(255,255,255,0.1);
  --sb-border-strong: rgba(255,255,255,0.2);
  --sb-text: #F5F5F7;
  --sb-text-muted: rgba(245,245,247,0.62);
  --sb-text-subtle: rgba(245,245,247,0.38);
  --sb-primary: #E91E8C;
  --sb-primary-dark: #C4146E;
  --sb-gradient: linear-gradient(135deg, #833AB4 0%, #FD1D1D 52%, #F56040 100%);
  --sb-gradient-soft: linear-gradient(135deg, rgba(131,58,180,0.7) 0%, rgba(253,29,29,0.7) 52%, rgba(245,96,64,0.7) 100%);
  --sb-teal: #69C9D0;
  --sb-teal-dark: #4AB8C0;
  --sb-glow: rgba(233,30,140,0.3);
  --sb-glass: rgba(12,12,20,0.82);
  --quickbuy-primary: #E91E8C;
}

/* ---- Global Reset for Dark Theme ---- */
html, body {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  background: var(--sb-bg) !important;
  color: var(--sb-text) !important;
}

body {
  background-color: var(--sb-bg) !important;
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -5%, rgba(131,58,180,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 55% 40% at 90% 90%, rgba(238,29,82,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 10% 85%, rgba(105,201,208,0.06) 0%, transparent 50%) !important;
  background-size: auto !important;
  background-attachment: fixed !important;
}

body, body * { text-shadow: none !important; }

.bg-mesh {
  background-color: transparent !important;
  background-image: none !important;
}

/* ---- Animations (kept from quickbuy) ---- */
@keyframes sb-fade-up {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.995); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.996); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes floatA { 0%,100% { transform: translateY(0) rotate(var(--tilt,-8deg)); } 50% { transform: translateY(-8px) rotate(var(--tilt,-8deg)); } }
@keyframes floatB { 0%,100% { transform: translateY(0) rotate(var(--tilt,8deg)); } 50% { transform: translateY(-10px) rotate(var(--tilt,8deg)); } }
@keyframes floatC { 0%,100% { transform: translateY(0) rotate(var(--tilt,9deg)); } 50% { transform: translateY(-7px) rotate(var(--tilt,9deg)); } }
@keyframes floatD { 0%,100% { transform: translateY(0) rotate(var(--tilt,-7deg)); } 50% { transform: translateY(-9px) rotate(var(--tilt,-7deg)); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sb-glow-pulse { 0%,100% { box-shadow: 0 0 0 0 var(--sb-glow); } 50% { box-shadow: 0 0 20px 4px var(--sb-glow); } }

.quickbuy-step-fade-up-in {
  animation: sb-fade-up 0.56s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform;
}
.step-fade {
  animation: sb-fade-up 0.56s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform;
}
.quickbuy-card-enter {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.996);
  animation: fadeIn 0.62s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--enter-delay, 0s);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
[data-step-section].hidden .quickbuy-card-enter {
  animation: none;
  opacity: 0;
}
.spin { animation: spin 0.9s linear infinite; }

/* ---- Layout ---- */
.quickbuy-flow-main, .quickbuy-page-main,
.quickbuy-network-main, .quickbuy-network-step,
.quickbuy-category-step, .quickbuy-service-step,
.quickbuy-target-step, .quickbuy-package-step {
  min-height: auto;
}
.quickbuy-flow-main, .quickbuy-page-main { padding-bottom: 2rem; }
.quickbuy-flow-main:has(#mobileCheckoutBar:not(.hidden)) { padding-bottom: 7.25rem; }
.quickbuy-network-step, .quickbuy-category-step,
.quickbuy-service-step, .quickbuy-target-step,
.quickbuy-package-step { padding-bottom: 0; }
.quickbuy-network-shell, .quickbuy-category-shell { max-width: 600px; }

#onboarding-app[data-shared-layout="1"] [data-step-section] .quickbuy-network-step,
#onboarding-app[data-shared-layout="1"] [data-step-section] .quickbuy-category-step,
#onboarding-app[data-shared-layout="1"] [data-step-section] .quickbuy-service-step,
#onboarding-app[data-shared-layout="1"] [data-step-section] .quickbuy-target-step,
#onboarding-app[data-shared-layout="1"] [data-step-section] .quickbuy-package-step {
  min-height: auto;
  padding: 0;
}

/* ---- Header ---- */
.quickbuy-global-header {
  margin: var(--site-top-banner-offset, 0px) auto 1.75rem;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 6px;
  overflow: visible;
}

.quickbuy-network-orders-link {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 0.375rem;
  border-radius: 999px;
  border: 1px solid var(--sb-border);
  background: var(--sb-surface);
  padding: 0.5rem 0.875rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--sb-text-muted);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  backdrop-filter: blur(8px);
}
.quickbuy-network-orders-link:hover {
  border-color: var(--sb-primary);
  color: var(--sb-primary);
  background: rgba(233,30,140,0.08);
}

.quickbuy-header-cart-link {
  min-height: 38px;
  height: 38px;
  padding: 0.5rem 0.875rem;
  line-height: 1;
  overflow: visible;
  -webkit-appearance: none;
  appearance: none;
}

/* ---- Footer ---- */
.quickbuy-global-footer {
  margin-top: 1.5rem;
  text-align: center;
  color: var(--sb-text-subtle);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ---- Tailwind Color Overrides for Dark Mode ---- */
/* Text */
.text-\[\#0a0a0f\] { color: var(--sb-text) !important; }
.text-\[\#3a3a45\] { color: rgba(245,245,247,0.75) !important; }
.text-\[\#5a5a6a\] { color: var(--sb-text-muted) !important; }
.text-\[\#8a8a99\] { color: var(--sb-text-subtle) !important; }
.text-\[\#b8b8c4\] { color: rgba(245,245,247,0.28) !important; }
.text-\[\#c7c7d2\] { color: rgba(245,245,247,0.2) !important; }
.text-\[\#d0d0dc\] { color: rgba(245,245,247,0.18) !important; }
/* Backgrounds */
.bg-white { background-color: var(--sb-glass) !important; }
.bg-\[\#fafafa\] { background-color: var(--sb-surface) !important; }
.bg-\[\#f3f3f6\] { background-color: var(--sb-surface-2) !important; }
.bg-\[\#FFF0F6\] { background-color: rgba(233,30,140,0.12) !important; }
.bg-\[\#FFF7FB\] { background-color: rgba(233,30,140,0.08) !important; }
.bg-\[\#FFD6E7\] { background-color: rgba(233,30,140,0.2) !important; }
.bg-\[\#FFF8FB\] { background-color: rgba(233,30,140,0.08) !important; }
.bg-\[\#fff3f9\] { background-color: rgba(233,30,140,0.1) !important; }
/* Borders */
.border-\[\#ececf0\] { border-color: var(--sb-border) !important; }
.border-\[\#f3f3f6\] { border-color: rgba(255,255,255,0.07) !important; }
.border-\[\#FFD6E7\] { border-color: rgba(233,30,140,0.35) !important; }
.border-\[\#ffb6d7\] { border-color: rgba(233,30,140,0.5) !important; }
/* Status: amber */
.bg-amber-50 { background-color: rgba(251,191,36,0.1) !important; }
.text-amber-700, .text-amber-800 { color: #FBB724 !important; }
.border-amber-200, .border-amber-300\/70 { border-color: rgba(251,191,36,0.28) !important; }
.bg-amber-300\/70 { background-color: rgba(251,191,36,0.2) !important; }
/* Status: emerald/green */
.bg-emerald-50 { background-color: rgba(16,185,129,0.1) !important; }
.text-emerald-700 { color: #34D399 !important; }
.text-emerald-600, .text-emerald-500 { color: #34D399 !important; }
.border-emerald-200 { border-color: rgba(16,185,129,0.28) !important; }
/* Status: blue/sky */
.bg-blue-50 { background-color: rgba(59,130,246,0.1) !important; }
.text-blue-700 { color: #60A5FA !important; }
.border-blue-200 { border-color: rgba(59,130,246,0.28) !important; }
.bg-sky-50 { background-color: rgba(14,165,233,0.1) !important; }
.text-sky-700 { color: #38BDF8 !important; }
.border-sky-200 { border-color: rgba(14,165,233,0.28) !important; }
/* Status: pink */
.bg-pink-50 { background-color: rgba(236,72,153,0.1) !important; }
.text-pink-700 { color: #F472B6 !important; }
.border-pink-200 { border-color: rgba(236,72,153,0.28) !important; }
/* Status: red */
.bg-red-50 { background-color: rgba(239,68,68,0.1) !important; }
.text-red-700 { color: #F87171 !important; }
.border-red-200 { border-color: rgba(239,68,68,0.28) !important; }
/* Status: yellow */
.bg-yellow-50 { background-color: rgba(234,179,8,0.1) !important; }
.text-yellow-700 { color: #EAB308 !important; }
.border-yellow-200 { border-color: rgba(234,179,8,0.28) !important; }
/* Ring */
.ring-white { --tw-ring-color: rgba(255,255,255,0.15) !important; }
.ring-\[#ececf0\] { --tw-ring-color: rgba(255,255,255,0.1) !important; }

/* ---- Hero Section ---- */
.quickbuy-hero-metrics {
  position: relative;
  height: 240px;
}
.metric-card {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  background: var(--sb-glass);
  backdrop-filter: blur(16px);
  padding: 10px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.metric-card .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--sb-gradient);
  color: #fff;
  flex-shrink: 0;
}
.metric-card .lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sb-text-subtle);
}
.metric-card .val {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--sb-text);
}
.metric-card .up {
  font-size: 10px;
  font-weight: 700;
  color: #34D399;
  background: rgba(52,211,153,0.12);
  border-radius: 5px;
  padding: 1px 5px;
}
.quickbuy-hero-center {
  text-align: center;
}
.quickbuy-hero-title {
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--sb-text);
}
.hero-word-mark {
  position: relative;
  display: inline-block;
}
.hero-word-rotate {
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  height: 1.1em;
  vertical-align: bottom;
}
.hero-word-rotate span {
  animation: sb-word-rotate 3.2s cubic-bezier(0.4,0,0.2,1) infinite;
  background: var(--sb-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}
@keyframes sb-word-rotate {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(0); }
  25%  { transform: translateY(-100%); }
  45%  { transform: translateY(-100%); }
  50%  { transform: translateY(-200%); }
  70%  { transform: translateY(-200%); }
  75%  { transform: translateY(-300%); }
  95%  { transform: translateY(-300%); }
  100% { transform: translateY(-400%); }
}
.quickbuy-hero-word-scribble-svg {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}
.quickbuy-hero-word-scribble-svg .risco {
  fill: none;
  stroke: var(--sb-primary);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: sb-draw-line 0.8s 0.3s ease forwards;
}
@keyframes sb-draw-line {
  to { stroke-dashoffset: 0; }
}
.quickbuy-hero-subtitle {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sb-text-muted);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ---- Network Cards ---- */
.net-card {
  background: var(--sb-glass) !important;
  border: 1px solid var(--sb-border) !important;
  border-radius: 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
  backdrop-filter: blur(8px);
}
.net-card:hover, .net-card[data-selected="true"] {
  border-color: var(--sb-primary) !important;
  box-shadow: 0 0 0 1px var(--sb-primary), 0 8px 24px rgba(233,30,140,0.18) !important;
  transform: translateY(-1px) !important;
}
.net-card[data-selected="true"] .arrow-pill {
  background: var(--sb-primary) !important;
  border-color: var(--sb-primary) !important;
  color: #fff !important;
}
.icon-tile {
  background: var(--sb-gradient) !important;
  box-shadow: 0 4px 12px rgba(233,30,140,0.3) !important;
}
.arrow-pill {
  background: var(--sb-surface) !important;
  border: 1px solid var(--sb-border) !important;
  color: var(--sb-text-muted) !important;
}
.quickbuy-network-price { color: var(--sb-text) !important; }

/* ---- Trust Cards ---- */
.quickbuy-network-trust-card {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid var(--sb-border);
  background: var(--sb-surface);
  padding: 12px;
  backdrop-filter: blur(6px);
}
.quickbuy-network-trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(233,30,140,0.15);
  color: var(--sb-primary);
  flex-shrink: 0;
}
.quickbuy-network-trust-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--sb-text);
}
.quickbuy-network-trust-subtitle {
  font-size: 10px;
  font-weight: 500;
  color: var(--sb-text-subtle);
  margin-top: 1px;
}

/* ---- Category Trust Grid ---- */
.quickbuy-category-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.quickbuy-category-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  border: 1px solid var(--sb-border);
  background: var(--sb-surface);
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--sb-text-muted);
}
.quickbuy-category-trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sb-primary);
  flex-shrink: 0;
}

/* ---- Step Cards (shared container) ---- */
.quickbuy-category-card {
  border-radius: 20px;
  border: 1px solid var(--sb-border);
  background: var(--sb-glass);
  padding: 20px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important;
}
.quickbuy-category-selected-network {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid var(--sb-border);
  background: var(--sb-surface);
  padding: 10px 14px;
  backdrop-filter: blur(6px);
}
.quickbuy-category-selected-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--sb-gradient);
}
.quickbuy-category-selected-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sb-text-subtle);
}
.quickbuy-category-selected-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--sb-text);
  margin-top: 1px;
}
.quickbuy-category-change-link {
  font-size: 11px;
  font-weight: 700;
  color: var(--sb-primary);
  text-decoration: none;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.quickbuy-category-change-link:hover { opacity: 0.75; }

/* ---- Eyebrow / Step Labels ---- */
.quickbuy-category-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(233,30,140,0.12);
  border: 1px solid rgba(233,30,140,0.25);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sb-primary);
}
.quickbuy-category-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sb-text);
  line-height: 1.15;
  margin: 0;
}
.quickbuy-category-subtitle {
  font-size: 13px;
  font-weight: 500;
  color: var(--sb-text-muted);
  margin-top: 4px;
}

/* ---- Category Options ---- */
.quickbuy-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.quickbuy-category-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  overflow: hidden;
  border-radius: 14px;
  border: 2px solid var(--sb-border);
  background: var(--sb-surface);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(8px);
}
.quickbuy-category-option:hover,
.quickbuy-category-option[data-selected="true"] {
  border-color: var(--sb-primary);
  background: rgba(233,30,140,0.08);
  box-shadow: 0 0 0 1px var(--sb-primary), 0 4px 16px rgba(233,30,140,0.18) !important;
}
.quickbuy-category-bg-icon {
  position: absolute;
  top: -16px;
  right: -16px;
  opacity: 0.04;
  pointer-events: none;
  color: var(--sb-primary);
  transform: rotate(10deg);
}
.quickbuy-category-option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(233,30,140,0.15);
  color: var(--sb-primary);
  margin-bottom: 6px;
}
.quickbuy-category-option-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--sb-text);
}
.quickbuy-category-option-hint {
  font-size: 10px;
  color: var(--sb-text-subtle);
  font-weight: 500;
}
.quickbuy-category-option-badge {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  background: rgba(233,30,140,0.12);
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sb-primary);
}
.quickbuy-category-check-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sb-primary);
  color: #fff;
}
.quickbuy-category-option[data-selected="true"] .quickbuy-category-check-dot { display: flex; }
.quickbuy-category-empty {
  border-radius: 12px;
  border: 1px dashed var(--sb-border);
  background: var(--sb-surface);
  padding: 24px;
  font-size: 13px;
  color: var(--sb-text-muted);
  grid-column: span 2;
}

/* ---- Category Actions ---- */
.quickbuy-category-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.quickbuy-category-back-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--sb-border);
  background: var(--sb-surface);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sb-text-muted);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  backdrop-filter: blur(6px);
}
.quickbuy-category-back-button:hover { border-color: var(--sb-border-strong); color: var(--sb-text); }
.quickbuy-category-continue-button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: 999px;
  border: 0;
  background: var(--sb-gradient);
  padding: 0 24px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  transition: filter 0.2s, transform 0.15s;
  box-shadow: 0 4px 20px rgba(233,30,140,0.35) !important;
}
.quickbuy-category-continue-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.quickbuy-category-continue-button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---- Service Cards ---- */
.quickbuy-service-list { display: flex; flex-direction: column; gap: 10px; }
.quickbuy-service-option {
  position: relative;
  display: block;
  border-radius: 14px;
  border: 2px solid var(--sb-border);
  background: var(--sb-surface);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: blur(8px);
}
.quickbuy-service-option:hover,
.quickbuy-service-option[data-selected="true"] {
  border-color: var(--sb-primary);
  background: rgba(233,30,140,0.07);
  box-shadow: 0 0 0 1px var(--sb-primary), 0 4px 16px rgba(233,30,140,0.15) !important;
}
.quickbuy-service-option.is-special {
  border-style: solid;
  border-color: rgba(131,58,180,0.5);
  background: rgba(131,58,180,0.06);
}
.quickbuy-service-option.is-special:hover,
.quickbuy-service-option.is-special[data-selected="true"] {
  border-color: #833AB4;
  background: rgba(131,58,180,0.12);
  box-shadow: 0 0 0 1px #833AB4, 0 4px 16px rgba(131,58,180,0.25) !important;
}
.quickbuy-service-inner {
  border-radius: 8px;
  padding: 2px;
  background: var(--sb-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  padding: 1px;
}
.quickbuy-service-check-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  display: none;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sb-primary);
  color: #fff;
}
.quickbuy-service-option[data-selected="true"] .quickbuy-service-check-dot { display: flex; }
.quickbuy-service-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.quickbuy-service-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--sb-text);
  line-height: 1.2;
}
.quickbuy-service-summary {
  margin-top: 3px;
  font-size: 11px;
  color: var(--sb-text-muted);
}
.quickbuy-service-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid rgba(233,30,140,0.3);
  background: rgba(233,30,140,0.1);
  padding: 3px 8px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--sb-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.is-special .quickbuy-service-badge {
  border-color: rgba(131,58,180,0.4);
  background: rgba(131,58,180,0.12);
  color: #C084FC;
}
.quickbuy-service-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border-top: 1px solid var(--sb-border);
  padding-top: 10px;
}
.quickbuy-service-meta-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sb-text-subtle);
  margin-bottom: 2px;
}
.quickbuy-service-meta-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--sb-text);
}
.quickbuy-service-meta-value.is-price {
  color: var(--sb-primary);
}

/* ---- Target / Profile Input ---- */
.quickbuy-target-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sb-text-subtle);
  margin-bottom: 8px;
}
.quickbuy-target-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 2px solid var(--sb-border);
  background: var(--sb-surface);
  transition: border-color 0.2s;
  backdrop-filter: blur(6px);
}
.quickbuy-target-input-wrapper:focus-within {
  border-color: var(--sb-primary);
  box-shadow: 0 0 0 2px rgba(233,30,140,0.15) !important;
}
.quickbuy-target-input-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: var(--sb-text-subtle);
}
.quickbuy-target-input {
  flex: 1;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  padding: 13px 14px 13px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--sb-text) !important;
}
.quickbuy-target-input::placeholder { color: var(--sb-text-subtle) !important; }
.quickbuy-target-helper {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid rgba(105,201,208,0.25);
  background: rgba(105,201,208,0.06);
  padding: 10px 12px;
  margin-top: 10px;
}
.quickbuy-target-helper-icon { color: var(--sb-teal); flex-shrink: 0; }
.quickbuy-target-helper-text {
  font-size: 11px;
  font-weight: 500;
  color: var(--sb-text-muted);
  line-height: 1.5;
}
.quickbuy-target-helper-text strong { color: var(--sb-text); }

/* ---- Target Profile Card ---- */
.quickbuy-target-profile-card {
  border-radius: 16px;
  border: 1px solid var(--sb-border);
  background: var(--sb-glass);
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.quickbuy-target-profile-cover {
  height: 56px;
  background: var(--sb-gradient);
  opacity: 0.6;
}
.quickbuy-target-profile-content { padding: 12px 14px 14px; }
.quickbuy-target-profile-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -28px;
  margin-bottom: 8px;
}
.quickbuy-target-profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--sb-bg);
  object-fit: cover;
  background: var(--sb-surface);
}
.quickbuy-target-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: rgba(233,30,140,0.12);
  border: 1px solid rgba(233,30,140,0.3);
  padding: 3px 9px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--sb-primary);
}
.quickbuy-target-profile-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--sb-text);
}
.quickbuy-target-profile-username {
  font-size: 11px;
  color: var(--sb-text-muted);
  margin-top: 1px;
}
.quickbuy-target-profile-bio {
  font-size: 11px;
  color: var(--sb-text-muted);
  line-height: 1.5;
  margin: 6px 0;
}
.quickbuy-target-profile-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  border-top: 1px solid var(--sb-border);
  padding-top: 10px;
  margin-top: 6px;
}
.quickbuy-target-profile-stat { text-align: center; }
.quickbuy-target-profile-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--sb-text-subtle);
}
.quickbuy-target-profile-stat-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--sb-text);
  margin-top: 2px;
}
.quickbuy-target-profile-stat-value.is-highlight { color: var(--sb-primary); }
.quickbuy-target-change-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--sb-border);
  background: var(--sb-surface);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sb-text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.quickbuy-target-change-button:hover { border-color: var(--sb-primary); color: var(--sb-primary); }

/* ---- Package Cards ---- */
.quickbuy-package-bg-icon {
  position: absolute;
  top: -16px;
  right: -12px;
  opacity: 0.04;
  pointer-events: none;
  color: var(--sb-primary);
  transform: rotate(10deg);
}
button[data-package-option] {
  background: var(--sb-glass) !important;
  border: 2px solid var(--sb-border) !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s !important;
  backdrop-filter: blur(8px);
}
button[data-package-option]:hover,
button[data-package-option][data-selected="true"] {
  border-color: var(--sb-primary) !important;
  background: rgba(233,30,140,0.07) !important;
  box-shadow: 0 0 0 1px var(--sb-primary), 0 6px 20px rgba(233,30,140,0.2) !important;
  transform: translateY(-2px) !important;
}
.check-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sb-primary);
  color: #fff;
}
button[data-package-option][data-selected="true"] .check-dot { display: flex; }
.ribbon {
  display: inline-flex;
  align-items: center;
  margin-bottom: 4px;
  border-radius: 6px;
  background: var(--sb-gradient);
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.border-t { border-top: 1px solid var(--sb-border) !important; }

/* ---- Order Bumps ---- */
.quickbuy-order-bump-card {
  border-radius: 14px !important;
  border: 2px dashed rgba(233,30,140,0.3) !important;
  background: rgba(233,30,140,0.04) !important;
  transition: background 0.22s ease, border-color 0.22s ease;
  backdrop-filter: blur(6px);
}
.quickbuy-order-bump-card[data-selected="true"] {
  background: rgba(233,30,140,0.1) !important;
  border-color: var(--sb-primary) !important;
  box-shadow: 0 0 0 1px rgba(233,30,140,0.3) !important;
}

/* ---- FAQ Section ---- */
.quickbuy-home-faq {
  margin-top: 28px;
  border-radius: 20px;
  border: 1px solid var(--sb-border);
  background: var(--sb-glass);
  overflow: hidden;
  backdrop-filter: blur(12px);
}
.quickbuy-home-faq__header {
  padding: 20px 20px 12px;
}
.quickbuy-home-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(233,30,140,0.12);
  border: 1px solid rgba(233,30,140,0.25);
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sb-primary);
}
.quickbuy-home-faq__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--sb-text);
  letter-spacing: -0.02em;
}
.quickbuy-home-faq__subtitle {
  font-size: 12px;
  color: var(--sb-text-muted);
  margin-top: 4px;
}
.quickbuy-home-faq__list {}
.quickbuy-home-faq__item {
  border-top: 1px solid var(--sb-border);
}
.quickbuy-home-faq__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--sb-text);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.15s;
  gap: 12px;
}
.quickbuy-home-faq__button:hover { color: var(--sb-primary); }
.quickbuy-home-faq__answer {
  padding: 0 20px 14px;
  font-size: 13px;
  color: var(--sb-text-muted);
  line-height: 1.6;
}

/* ---- Toast ---- */
.toast-viewport {
  position: fixed;
  top: 20px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 380px;
  width: calc(100vw - 32px);
}

/* ---- Checkout Modal (theme vars) ---- */
#onboardingCheckoutModal {
  --quickbuy-primary: #E91E8C;
}
#onboardingCheckoutModal .btn-submit,
#onboardingCheckoutModal button[type="submit"] {
  background: var(--sb-gradient) !important;
  background-image: none !important;
}
#onboardingCheckoutModal .bg-primary {
  background: var(--sb-primary) !important;
}

/* ---- Progress Bar ---- */
.progress-bar {
  background: var(--sb-gradient) !important;
  border-radius: 999px;
  transition: width 0.5s ease;
}
.h-2 { border-radius: 999px; }
.bg-\[\#f3f3f6\] { background-color: rgba(255,255,255,0.08) !important; }

/* ---- Ticket (Success Page) ---- */
.ticket {
  border-radius: 20px;
  border: 1px solid var(--sb-border);
  background: var(--sb-glass);
  backdrop-filter: blur(16px);
  overflow: visible;
  position: relative;
  box-shadow: 0 16px 48px rgba(0,0,0,0.3) !important;
}
.ticket-notch {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sb-bg);
  transform: translateY(-50%);
}
.ticket-notch-l { left: -10px; }
.ticket-notch-r { right: -10px; }
.perforation {
  height: 1px;
  background: repeating-linear-gradient(to right, var(--sb-border) 0, var(--sb-border) 6px, transparent 6px, transparent 12px);
  margin: 0 16px;
}

/* ---- Legal Content ---- */
.quickbuy-legal-content {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--sb-text-muted);
}
.quickbuy-legal-content h1, .quickbuy-legal-content h2, .quickbuy-legal-content h3 {
  color: var(--sb-text);
  font-weight: 700;
  margin: 16px 0 6px;
}
.quickbuy-legal-content p { margin: 8px 0; }
.quickbuy-legal-content a { color: var(--sb-primary); }

/* ---- Mobile Checkout Bar ---- */
#mobileCheckoutBar {
  background: var(--sb-glass);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--sb-border);
}

/* ---- Loader animation (target step button) ---- */
.loader {
  display: none;
  width: 20px;
  height: 20px;
  position: relative;
}
.loader .bar1, .loader .bar2, .loader .bar3, .loader .bar4,
.loader .bar5, .loader .bar6, .loader .bar7, .loader .bar8,
.loader .bar9, .loader .bar10, .loader .bar11, .loader .bar12 {
  width: 2px;
  height: 6px;
  background: rgba(255,255,255,0.8);
  position: absolute;
  left: 9px;
  top: 0;
  transform-origin: 1px 10px;
  border-radius: 1px;
  animation: sb-loader 1.2s linear infinite;
}
.loader .bar1  { transform: rotate(0deg);   animation-delay: -1.1s; }
.loader .bar2  { transform: rotate(30deg);  animation-delay: -1.0s; }
.loader .bar3  { transform: rotate(60deg);  animation-delay: -0.9s; }
.loader .bar4  { transform: rotate(90deg);  animation-delay: -0.8s; }
.loader .bar5  { transform: rotate(120deg); animation-delay: -0.7s; }
.loader .bar6  { transform: rotate(150deg); animation-delay: -0.6s; }
.loader .bar7  { transform: rotate(180deg); animation-delay: -0.5s; }
.loader .bar8  { transform: rotate(210deg); animation-delay: -0.4s; }
.loader .bar9  { transform: rotate(240deg); animation-delay: -0.3s; }
.loader .bar10 { transform: rotate(270deg); animation-delay: -0.2s; }
.loader .bar11 { transform: rotate(300deg); animation-delay: -0.1s; }
.loader .bar12 { transform: rotate(330deg); animation-delay: 0s; }
@keyframes sb-loader {
  0%   { opacity: 1; }
  100% { opacity: 0.15; }
}

/* ---- Input/Form Global ---- */
input, select, textarea {
  background: var(--sb-surface) !important;
  color: var(--sb-text) !important;
  border-color: var(--sb-border) !important;
}
input::placeholder, textarea::placeholder { color: var(--sb-text-subtle) !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--sb-primary) !important;
  outline: none !important;
}

/* ---- Checkout Modal global overrides ---- */
#onboardingCheckoutModal,
.quickbuy-checkout-sheet,
.quickbuy-checkout-overlay {
  --qb-modal-bg: var(--sb-glass);
  --qb-modal-border: var(--sb-border);
  --qb-modal-text: var(--sb-text);
  --qb-modal-muted: var(--sb-text-muted);
}

/* ---- Scrollbar styling ---- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sb-border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-primary); }

/* ---- Mobile helper ---- */
@media (max-width: 640px) {
  .quickbuy-category-grid { grid-template-columns: 1fr 1fr; }
  .quickbuy-category-actions { flex-direction: column; }
  .quickbuy-category-back-button { order: 2; width: 100%; justify-content: center; }
  .quickbuy-category-continue-button { order: 1; width: 100%; }
}

/* ---- Network brand icon ---- */
.quickbuy-network-brand-icon {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--sb-border);
  background: var(--sb-surface);
}
.quickbuy-network-brand-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sb-text);
}
.quickbuy-network-brand-subtitle {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sb-text-subtle);
}

/* ---- Live chat (dark) ---- */
.quickbuy-live-chat-launcher {
  background: var(--sb-primary);
  box-shadow: 0 4px 16px rgba(233,30,140,0.4), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.quickbuy-live-chat-panel {
  background: #0E0E18;
  border: 1px solid var(--sb-border);
  box-shadow: 0 24px 70px -20px rgba(0,0,0,0.7), 0 8px 24px -12px rgba(233,30,140,0.3) !important;
}
.quickbuy-whatsapp-popup-content {
  background: var(--sb-glass);
  border-color: var(--sb-border);
  backdrop-filter: blur(12px);
}
.quickbuy-whatsapp-title { color: var(--sb-text); }
.quickbuy-whatsapp-subtitle { color: var(--sb-text-muted); }

/* ---- Post-pay push modal ---- */
.quickbuy-postpay-push-modal .quickbuy-postpay-push-card {
  background: #0E0E18;
  border-color: var(--sb-border);
}

/* ---- Top banner overrides ---- */
.quickbuy-top-banner { background: var(--sb-gradient) !important; }
.quickbuy-top-banner-btn { background: rgba(255,255,255,0.15) !important; color: #fff !important; border-color: rgba(255,255,255,0.3) !important; }
.quickbuy-top-banner-btn:hover { background: rgba(255,255,255,0.25) !important; }

/* ---- Misc utility overrides ---- */
.font-mono { font-family: "Plus Jakarta Sans", monospace !important; }
.bg-\[\#FF2D87\] { background-color: var(--sb-primary) !important; }
.text-\[\#FF2D87\] { color: var(--sb-primary) !important; }
.border-\[\#FF2D87\] { border-color: var(--sb-primary) !important; }
.bg-\[\#E81F77\] { background-color: var(--sb-primary-dark) !important; }
.hover\:bg-\[\#E81F77\]:hover { background-color: var(--sb-primary-dark) !important; }
.bg-\[\#FFF0F6\] .text-\[\#FF2D87\] { color: var(--sb-primary) !important; }

/* Tailwind bg-background / text-foreground for body */
.bg-background { background-color: var(--sb-bg) !important; }
.text-foreground { color: var(--sb-text) !important; }