/* ============================================================
   SURE VERIFY — PREMIUM NEUMORPHISM LAYER (Soft UI)
   Shared soft-UI system for every service page.
   Load AFTER theme.css and the page's own stylesheet (last link).
   Every selector is [data-theme]-prefixed so it ties the
   theme-scoped rules in page CSS and wins by source order.
   Light : classic soft-UI embossing on cool matte grey
   Dark  : obsidian soft-UI embossing on matte forest green
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --neu-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --neu-dur: 0.32s;
}

/* Dark (default) */
:root,
[data-theme="dark"] {
  --neu-page: #0A1710;
  --neu-panel: #10241A;
  --neu-panel-2: #0C1D14;
  --neu-bar: rgba(12, 30, 21, 0.82);
  --neu-aura: rgba(22, 199, 90, 0.07);

  --neu-out: 10px 10px 22px rgba(0, 0, 0, 0.6), -8px -8px 20px rgba(180, 255, 210, 0.035);
  --neu-out-sm: 6px 6px 14px rgba(0, 0, 0, 0.5), -5px -5px 12px rgba(180, 255, 210, 0.03);
  --neu-out-lg: 16px 16px 40px rgba(0, 0, 0, 0.66), -11px -11px 30px rgba(180, 255, 210, 0.04);
  --neu-in: inset 6px 6px 13px rgba(0, 0, 0, 0.64), inset -5px -5px 13px rgba(180, 255, 210, 0.04);
  --neu-in-sm: inset 4px 4px 9px rgba(0, 0, 0, 0.58), inset -3px -3px 9px rgba(180, 255, 210, 0.035);

  --neu-hl: rgba(255, 255, 255, 0.06);
  --neu-ring: rgba(255, 255, 255, 0.08);
  --neu-bar-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.9);
  --neu-side-shadow: 18px 0 44px -10px rgba(0, 0, 0, 0.7);
  --neu-glow-accent: 0 26px 60px -32px rgba(34, 197, 94, 0.55);
  --neu-wave: 0.14;
}

/* Light */
[data-theme="light"] {
  --neu-page: #ECEFF5;
  --neu-panel: #F0F3F8;
  --neu-panel-2: #E4E9F1;
  --neu-bar: rgba(238, 241, 247, 0.85);
  --neu-aura: rgba(22, 163, 74, 0.06);

  --neu-out: 9px 9px 18px rgba(157, 174, 199, 0.55), -9px -9px 18px rgba(255, 255, 255, 0.95);
  --neu-out-sm: 5px 5px 10px rgba(157, 174, 199, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.92);
  --neu-out-lg: 15px 15px 30px rgba(157, 174, 199, 0.55), -13px -13px 26px rgba(255, 255, 255, 0.95);
  --neu-in: inset 6px 6px 12px rgba(157, 174, 199, 0.55), inset -6px -6px 12px rgba(255, 255, 255, 0.95);
  --neu-in-sm: inset 4px 4px 8px rgba(157, 174, 199, 0.5), inset -4px -4px 8px rgba(255, 255, 255, 0.92);

  --neu-hl: rgba(255, 255, 255, 0.95);
  --neu-ring: rgba(255, 255, 255, 0.9);
  --neu-bar-shadow: 0 16px 32px -20px rgba(120, 140, 175, 0.55);
  --neu-side-shadow: 18px 0 40px -12px rgba(130, 148, 178, 0.5);
  --neu-glow-accent: 0 26px 55px -32px rgba(22, 163, 74, 0.5);
  --neu-wave: 0.22;
}


/* ============================================================
   2. PAGE SURFACE & AMBIENCE
   ============================================================ */
[data-theme] body {
  background:
    radial-gradient(1000px 620px at 88% -12%, var(--neu-aura), transparent 62%),
    radial-gradient(900px 540px at -12% 102%, var(--neu-aura), transparent 62%),
    var(--neu-page);
}

[data-theme] body::before {
  opacity: 0.6;
}

[data-theme] body::after {
  opacity: 0.5;
}

[data-theme] .watermark-waves {
  opacity: var(--neu-wave);
}

[data-theme] .page {
  background: transparent;
}

[data-theme] .top-navigation {
  background: var(--neu-page);
}

[data-theme] .topbar {
  background: var(--neu-bar);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

[data-theme] .sticky-progress {
  background: var(--neu-bar);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: var(--neu-bar-shadow);
}

[data-theme] .back-btn {
  background: var(--neu-panel);
  border: none;
  box-shadow: var(--neu-out-sm);
}

[data-theme] .back-btn:active {
  box-shadow: var(--neu-in-sm);
}


/* ============================================================
   3. HEADER BAR
   ============================================================ */
[data-theme] .header {
  background: var(--neu-bar);
  border-bottom: none;
  box-shadow: var(--neu-bar-shadow);
}

[data-theme] .menu-btn {
  background: var(--neu-panel);
  border: none;
  color: var(--accent);
  box-shadow: var(--neu-out-sm);
}

[data-theme] .menu-btn:hover {
  background: var(--neu-panel);
  box-shadow: var(--neu-out);
}

[data-theme] .menu-btn:active {
  box-shadow: var(--neu-in-sm);
  transform: none;
}

[data-theme] .theme-toggle {
  background: var(--neu-panel);
  border: none;
  color: var(--accent);
  box-shadow: var(--neu-out-sm);
}

[data-theme] .theme-toggle:hover {
  background: var(--neu-panel);
  box-shadow: var(--neu-out);
  transform: none;
}

[data-theme] .theme-toggle:active {
  box-shadow: var(--neu-in-sm);
  transform: none;
}

[data-theme] .avatar {
  box-shadow: var(--neu-out-sm), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

[data-theme] .avatar:hover {
  transform: none;
  box-shadow: var(--neu-out), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}


/* ============================================================
   4. SIDEBAR
   ============================================================ */
[data-theme] .sidebar {
  background: var(--neu-bar);
  border-right: none;
  box-shadow: var(--neu-side-shadow);
}

[data-theme] .sidebar h4 {
  letter-spacing: 1.8px;
}

[data-theme] .sidebar a {
  color: var(--text-secondary);
  margin-bottom: 6px;
  transition: box-shadow var(--neu-dur) var(--neu-ease),
    background-color var(--neu-dur) var(--neu-ease),
    color var(--neu-dur) var(--neu-ease);
}

[data-theme] .sidebar a:hover {
  background: var(--neu-panel);
  color: var(--text-primary);
  box-shadow: var(--neu-out-sm);
}

[data-theme] .sidebar a:hover i {
  color: var(--accent);
}

[data-theme] .sidebar a.active {
  background: var(--neu-panel-2);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--neu-in-sm);
}

[data-theme] .sidebar a.active i {
  color: var(--accent);
}

[data-theme] .sidebar hr {
  background: linear-gradient(90deg, transparent, var(--neu-ring), transparent);
  height: 2px;
  margin: 14px 0;
}


/* ============================================================
   5. WELCOME MESSAGE
   ============================================================ */
[data-theme] .welcome-msg span {
  text-shadow: 0 2px 16px var(--accent-glow);
}


/* ============================================================
   6. SECTION TITLES
   ============================================================ */
[data-theme] .section-title {
  font-weight: 700;
  letter-spacing: -0.4px;
}

[data-theme] .section-title .required {
  background: var(--accent-dim);
  border: 1px solid transparent;
  box-shadow: var(--neu-in-sm);
}

[data-theme] .airtime-section-badge,
[data-theme] .elec-section-badge {
  box-shadow: var(--neu-in-sm);
}


/* ============================================================
   7. HERO BANNERS — gradient plates, embossed rim
   ============================================================ */
[data-theme] .hero-card,
[data-theme] .airtime-hero,
[data-theme] .data-hero,
[data-theme] .elec-hero,
[data-theme] .disco-hero {
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--neu-out-lg), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

[data-theme] .hero-icon {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

[data-theme] .hero-tags span {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
}


/* ============================================================
   8. SECTION / FORM CARDS — raised panels
   ============================================================ */
[data-theme] .section,
[data-theme] .airtime-section,
[data-theme] .data-section,
[data-theme] .elec-section {
  background: var(--neu-panel);
  border-color: transparent;
  box-shadow: var(--neu-out);
}

[data-theme] .slip-type-card,
[data-theme] .summary-box,
[data-theme] .loading,
[data-theme] .stepper-container,
[data-theme] .customer-info-box,
[data-theme] .data-summary,
[data-theme] .elec-summary {
  background: var(--neu-panel);
  border-color: transparent;
  box-shadow: var(--neu-out-sm);
}

[data-theme] .preview-box {
  background: var(--neu-panel-2);
  border: 1px dashed var(--border-strong);
  box-shadow: var(--neu-in-sm);
}

[data-theme] .result-box,
[data-theme] .result,
[data-theme] .data-result-box,
[data-theme] .elec-result-box {
  background: var(--neu-panel);
  border-color: transparent;
  box-shadow: var(--neu-out);
}

[data-theme] .summary-row,
[data-theme] .result-row {
  border-bottom-color: var(--neu-ring);
}

[data-theme] .summary-row:last-child,
[data-theme] .result-row:last-child {
  border-bottom: none;
}

[data-theme] .consent-box,
[data-theme] .consent {
  background: var(--neu-panel-2);
  border: 2px solid transparent;
  box-shadow: var(--neu-in-sm);
}

[data-theme] .consent-box:has(input:checked),
[data-theme] .consent:has(input:checked) {
  background: var(--bg-active);
  border-color: var(--accent);
  box-shadow: var(--neu-in-sm);
}

[data-theme] .privacy {
  border-color: transparent;
  box-shadow: var(--neu-in-sm);
}


/* ============================================================
   9. INPUTS — recessed wells
   ============================================================ */
[data-theme] input[type="text"] {
  background-color: var(--neu-panel-2);
  border-color: transparent;
  box-shadow: var(--neu-in);
}

[data-theme] input[type="text"]:focus {
  background-color: var(--neu-panel-2);
  border-color: var(--accent);
  box-shadow: var(--neu-in), 0 0 0 3px var(--accent-dim);
}

[data-theme] .input-group input,
[data-theme] .input-group select {
  background-color: var(--neu-panel-2);
  border-color: transparent;
  box-shadow: var(--neu-in);
}

[data-theme] .input-group input:focus,
[data-theme] .input-group select:focus {
  background-color: var(--neu-panel-2);
  border-color: var(--accent);
  box-shadow: var(--neu-in), 0 0 0 3px var(--accent-dim);
}

[data-theme] .airtime-input,
[data-theme] .airtime-select,
[data-theme] .data-input,
[data-theme] .data-select,
[data-theme] .data-select-plan,
[data-theme] .elec-input,
[data-theme] .elec-select {
  background-color: var(--neu-panel-2);
  border-color: transparent;
  box-shadow: var(--neu-in);
}

[data-theme] .airtime-input:focus,
[data-theme] .airtime-select:focus,
[data-theme] .data-input:focus,
[data-theme] .data-select:focus,
[data-theme] .data-select-plan:focus,
[data-theme] .elec-input:focus,
[data-theme] .elec-select:focus {
  background-color: var(--neu-panel-2);
  border-color: var(--accent);
  box-shadow: var(--neu-in), 0 0 0 3px var(--accent-dim);
}

[data-theme] .airtime-input.error,
[data-theme] .data-input.error,
[data-theme] .elec-input.error {
  border-color: var(--red, #EF4444);
  box-shadow: var(--neu-in), 0 0 0 3px rgba(239, 68, 68, 0.18);
}


/* ============================================================
   10. BUTTONS — floating gradients, pressed wells
   ============================================================ */
[data-theme] .nav-btn,
[data-theme] #verifyBtn,
[data-theme] #searchBtn {
  box-shadow: 0 14px 28px -12px rgba(11, 95, 56, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

[data-theme] .nav-btn:active,
[data-theme] #verifyBtn:active,
[data-theme] #searchBtn:active {
  box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.4);
  transform: translateY(0) scale(0.985);
}

[data-theme] .nav-btn:disabled,
[data-theme] #verifyBtn:disabled,
[data-theme] #searchBtn:disabled {
  background: var(--neu-panel-2);
  color: var(--text-muted);
  box-shadow: var(--neu-in);
}

[data-theme] .nav-btn.secondary {
  background: var(--neu-panel);
  border: 1px solid transparent;
  box-shadow: var(--neu-out-sm);
}

[data-theme] .nav-btn.secondary:active {
  box-shadow: var(--neu-in-sm);
  transform: none;
}

[data-theme] .slip-btn {
  box-shadow: 0 12px 26px -12px rgba(11, 95, 56, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

[data-theme] .slip-btn:hover {
  box-shadow: 0 16px 32px -12px rgba(11, 95, 56, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

[data-theme] .slip-btn:active {
  box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.4);
}

[data-theme] .airtime-btn-buy {
  box-shadow: 0 14px 30px -12px rgba(22, 199, 90, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

[data-theme] .airtime-btn-buy:hover:not(:disabled) {
  box-shadow: 0 18px 36px -12px rgba(22, 199, 90, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

[data-theme] .data-btn-buy {
  box-shadow: 0 14px 30px -12px rgba(37, 99, 235, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

[data-theme] .data-btn-buy:hover:not(:disabled) {
  box-shadow: 0 18px 36px -12px rgba(37, 99, 235, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

[data-theme] .elec-btn-primary {
  box-shadow: 0 14px 30px -12px rgba(16, 185, 129, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

[data-theme] .elec-btn-primary:hover:not(:disabled) {
  box-shadow: 0 18px 36px -12px rgba(16, 185, 129, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

[data-theme] .elec-btn-pay {
  box-shadow: 0 14px 30px -12px rgba(22, 199, 90, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

[data-theme] .elec-btn-pay:hover:not(:disabled) {
  box-shadow: 0 18px 36px -12px rgba(22, 199, 90, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

[data-theme] .nav-btn:active,
[data-theme] .slip-btn:active,
[data-theme] .airtime-btn-buy:active,
[data-theme] .data-btn-buy:active,
[data-theme] .elec-btn-primary:active,
[data-theme] .elec-btn-pay:active {
  box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.4);
}

/* Disabled states use !important in page CSS — mirror it */
[data-theme] .airtime-btn:disabled,
[data-theme] .data-btn:disabled,
[data-theme] .elec-btn:disabled {
  background: var(--neu-panel-2) !important;
  box-shadow: var(--neu-in) !important;
}


/* ============================================================
   11. BADGES & CHIPS — recessed readouts
   ============================================================ */
[data-theme] .badges div,
[data-theme] .airtime-badges div,
[data-theme] .data-badges div,
[data-theme] .elec-badges div {
  background: var(--neu-panel-2);
  border-color: transparent;
  box-shadow: var(--neu-in);
}

[data-theme] .slip-type-icon,
[data-theme] .slip-type-price {
  border-color: transparent;
  box-shadow: var(--neu-in-sm);
}

[data-theme] .plan-details-card,
[data-theme] .airtime-info-box,
[data-theme] .data-info-box,
[data-theme] .elec-info-box,
[data-theme] .elec-verification-result,
[data-theme] .elec-customer-name,
[data-theme] .elec-detail-row {
  box-shadow: var(--neu-in);
}

[data-theme] .airtime-result-message,
[data-theme] .data-result-message,
[data-theme] .elec-result-message {
  box-shadow: var(--neu-in-sm);
}

[data-theme] .airtime-result-message.success,
[data-theme] .airtime-result-message.error,
[data-theme] .airtime-result-message.info,
[data-theme] .data-result-message.success,
[data-theme] .data-result-message.error,
[data-theme] .data-result-message.info,
[data-theme] .elec-result-message.success,
[data-theme] .elec-result-message.error,
[data-theme] .elec-result-message.info {
  box-shadow: var(--neu-in-sm);
}


/* ============================================================
   12. STEPPER — raised track, recessed nodes
   ============================================================ */
[data-theme] .steps {
  background: var(--neu-panel);
  border-color: transparent;
  box-shadow: var(--neu-out-sm);
}

[data-theme] .step span {
  background: var(--neu-panel-2);
  border: none;
  box-shadow: var(--neu-in-sm);
}

[data-theme] .step.active span,
[data-theme] .step.completed span {
  background: var(--accent);
  border: none;
  box-shadow: 0 0 14px rgba(24, 165, 88, 0.55);
}


/* ============================================================
   13. OPTION / PICKER CARDS
   ============================================================ */
[data-theme] .service-grid .service-card {
  background: var(--neu-panel-2);
  border: 2px solid transparent;
  box-shadow: var(--neu-out-sm);
}

[data-theme] .service-grid .service-card:hover {
  border-color: var(--accent);
  box-shadow: var(--neu-out);
}

[data-theme] .service-grid .service-card.active {
  background: var(--bg-active);
  border-color: var(--accent);
  box-shadow: var(--neu-in-sm);
}

[data-theme] .slip-option-card {
  background: var(--neu-panel);
  border-color: transparent;
  box-shadow: var(--neu-out-sm);
}

[data-theme] .slip-option-card.selected {
  background: var(--bg-active);
  border-color: var(--accent);
  box-shadow: var(--neu-in-sm);
}

[data-theme] .network-card,
[data-theme] .data-plan-card,
[data-theme] .data-option-card {
  background: var(--neu-panel-2);
  border-color: transparent;
  box-shadow: var(--neu-out-sm);
}

[data-theme] .network-card:hover,
[data-theme] .data-plan-card:hover {
  background: var(--neu-panel-2);
  border-color: var(--blue);
  box-shadow: var(--neu-out);
}

[data-theme] .network-card.selected,
[data-theme] .network-card.active,
[data-theme] .data-plan-card.selected,
[data-theme] .data-plan-card.active,
[data-theme] .data-option-card.active {
  background: rgba(59, 130, 246, 0.12);
  border-color: var(--blue);
  box-shadow: var(--neu-in-sm);
}


/* ============================================================
   14. FLOATING BOTTOM DOCK
   ============================================================ */
[data-theme] .bottom-nav {
  background: var(--neu-bar);
  border: none;
  box-shadow: var(--neu-out-lg);
}

[data-theme] .bottom-nav a {
  color: var(--text-muted);
}

[data-theme] .bottom-nav a:hover:not(.active) {
  color: var(--text-secondary);
  background: var(--neu-panel);
  box-shadow: var(--neu-out-sm);
}

[data-theme] .bottom-nav a.active {
  background: var(--neu-panel-2);
  color: var(--accent);
  box-shadow: var(--neu-in-sm);
}

[data-theme] .bottom-nav a.active i {
  color: var(--accent);
}


/* ============================================================
   15. MICRO — scrollbar
   ============================================================ */
[data-theme] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme] ::-webkit-scrollbar-track {
  background: var(--neu-panel-2);
}

[data-theme] ::-webkit-scrollbar-thumb {
  background: var(--neu-panel);
  border: 1px solid var(--neu-ring);
  border-radius: 8px;
  box-shadow: var(--neu-in-sm);
}

[data-theme] ::-webkit-scrollbar-thumb:hover {
  background: var(--neu-panel-2);
}


/* ============================================================
   16. RESPONSIVE — scale shadows down on small screens
   ============================================================ */
@media (max-width: 480px) {

  :root,
  [data-theme="dark"] {
    --neu-out: 7px 7px 16px rgba(0, 0, 0, 0.58), -6px -6px 14px rgba(180, 255, 210, 0.03);
    --neu-out-sm: 4px 4px 10px rgba(0, 0, 0, 0.5), -4px -4px 9px rgba(180, 255, 210, 0.025);
    --neu-out-lg: 11px 11px 26px rgba(0, 0, 0, 0.64), -8px -8px 20px rgba(180, 255, 210, 0.035);
    --neu-in: inset 5px 5px 11px rgba(0, 0, 0, 0.62), inset -4px -4px 11px rgba(180, 255, 210, 0.035);
    --neu-in-sm: inset 3px 3px 7px rgba(0, 0, 0, 0.56), inset -2px -2px 7px rgba(180, 255, 210, 0.03);
  }

  [data-theme="light"] {
    --neu-out: 6px 6px 13px rgba(157, 174, 199, 0.52), -6px -6px 13px rgba(255, 255, 255, 0.94);
    --neu-out-sm: 4px 4px 8px rgba(157, 174, 199, 0.48), -4px -4px 8px rgba(255, 255, 255, 0.92);
    --neu-out-lg: 10px 10px 22px rgba(157, 174, 199, 0.52), -9px -9px 19px rgba(255, 255, 255, 0.94);
    --neu-in: inset 5px 5px 10px rgba(157, 174, 199, 0.52), inset -5px -5px 10px rgba(255, 255, 255, 0.94);
    --neu-in-sm: inset 3px 3px 7px rgba(157, 174, 199, 0.48), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
  }
}