/**
 * ==============================================================================
 * i-Activator — Global Theme System (Off-White Professional Edition)
 * File: /css/theme.css
 * Unified theme tokens & component styles for Frontend and Backend Admin
 * ==============================================================================
 */

:root {
  /* --- Global Off-White Base Colors --- */
  --bg-primary: #f8fafc;        /* Slate-50: Crisp, clean, soft off-white */
  --bg-secondary: #f1f5f9;      /* Slate-100: Elegant section contrast */
  --bg-tertiary: #e2e8f0;       /* Slate-200 */
  --bg-card: #ffffff;           /* Pure white surface for cards & panels */
  --glass-bg: rgba(255, 255, 255, 0.92);
  --glass-border: #e2e8f0;
  --border: #e2e8f0;

  /* --- Professional Brand & Accent Palette --- */
  --primary: #2563eb;           /* Vibrant Royal Blue */
  --primary-hover: #1d4ed8;     /* Deep Blue */
  --primary-light: #3b82f6;     /* Electric Blue */
  --primary-subtle: #eff6ff;    /* Soft Ice Blue */
  --accent: #0ea5e9;            /* Sky/Cyan Accent */
  --accent-light: #38bdf8;
  --accent-subtle: #f0fdfa;

  /* Semantic State Colors */
  --success: #059669;           /* Emerald 600 */
  --success-subtle: #ecfdf5;
  --success-border: #a7f3d0;
  --warning: #d97706;           /* Amber 600 */
  --warning-subtle: #fffbeb;
  --warning-border: #fde68a;
  --danger: #dc2626;            /* Crimson 600 */
  --danger-subtle: #fef2f2;
  --danger-border: #fecaca;
  --info: #0284c7;              /* Sky 600 */
  --info-subtle: #f0f9ff;
  --info-border: #bae6fd;

  /* --- Text & Typography Palette --- */
  --text-primary: #0f172a;      /* Slate-900: High-contrast, crystal clear */
  --text-secondary: #334155;    /* Slate-700: Subtitles, prominent descriptions */
  --text-muted: #64748b;        /* Slate-500: Helper text, timestamps, labels */
  --text-subtle: #94a3b8;       /* Slate-400: Placeholders, icons */

  /* --- Gradients --- */
  --gradient-main: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  --gradient-hero: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  --gradient-subtle: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(14, 165, 233, 0.03));
  --gradient-card: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);

  /* --- Shadows (Tailwind/Stripe Inspired Soft Off-White Lighting) --- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.03);
  --shadow-modal: 0 25px 65px -12px rgba(15, 23, 42, 0.22);
  --glow-indigo: 0 8px 24px -2px rgba(37, 99, 235, 0.25);
  --glow-cyan: 0 8px 24px -2px rgba(14, 165, 233, 0.25);

  /* --- Layout & Radius Tokens --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Backend Admin Theme Variables Mapping --- */
  --adm-bg: #f8fafc;
  --adm-surface: #ffffff;
  --adm-card: #ffffff;
  --adm-card-hover: #fbfcfe;
  --adm-border: #e2e8f0;
  --adm-primary: #2563eb;
  --adm-primary-hover: #1d4ed8;
  --adm-accent: #0ea5e9;
  --adm-success: #059669;
  --adm-warning: #d97706;
  --adm-danger: #dc2626;
  --adm-text: #0f172a;
  --adm-text-muted: #64748b;

  /* --- Checkout Modal Theme Variables Mapping --- */
  --chk-bg: #ffffff;
  --chk-surface: #f8fafc;
  --chk-border: #e2e8f0;
  --chk-text: #0f172a;
  --chk-muted: #64748b;
  --chk-primary: #2563eb;

  /* Legacy variable alias bridges */
  --indigo: var(--primary);
  --indigo-light: var(--primary-light);
  --cyan: var(--accent);
  --cyan-light: var(--accent-light);
  --green: var(--success);
  --amber: var(--warning);
  --red: var(--danger);
}

/* ==============================================================================
   1. GLOBAL DOCUMENT & TYPOGRAPHY
   ============================================================================== */
html {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Clear all headings to high-contrast Slate-900 */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

p, span, li, label {
  color: inherit;
}

.text-muted, .adm-text-muted, small {
  color: var(--text-muted) !important;
}

/* Links */
a {
  color: var(--primary);
  transition: var(--transition);
}
a:hover {
  color: var(--primary-hover);
}

/* Custom modern scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ==============================================================================
   2. NAVBAR & TOP ANNOUNCEMENT BAR
   ============================================================================== */
.announcement-bar {
  background: linear-gradient(90deg, #eff6ff 0%, #f0fdfa 50%, #eff6ff 100%) !important;
  color: #1e40af !important;
  border-bottom: 1px solid #dbeafe !important;
  font-weight: 600 !important;
}
.announcement-bar a {
  color: var(--primary) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

.navbar {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border) !important;
  transition: var(--transition);
}
.navbar.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: var(--shadow-sm) !important;
}

.nav-brand {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: initial !important;
  background: none !important;
}
.nav-brand span {
  color: var(--primary) !important;
}

.nav-links a {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--primary) !important;
  background: var(--primary-subtle) !important;
}

.nav-toggle span {
  background: var(--text-primary) !important;
}

.btn-login {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--text-secondary) !important;
}
.btn-login:hover {
  background: var(--primary-subtle) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* ==============================================================================
   3. HERO & SECTION CONTAINERS
   ============================================================================== */
.page-hero,
.hero-section {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-bottom: 1px solid var(--border) !important;
}

.page-hero-bg {
  background-image: linear-gradient(rgba(37, 99, 235, 0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(37, 99, 235, 0.04) 1px, transparent 1px) !important;
}

.page-eyebrow,
.section-eyebrow,
.hero-badge {
  background: var(--primary-subtle) !important;
  border: 1px solid #bfdbfe !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
}

.page-subtitle,
.section-subtitle {
  color: var(--text-secondary) !important;
}

/* ==============================================================================
   4. CARDS & SURFACES (FRONTEND & BACKEND)
   ============================================================================== */
.card,
.pricing-card,
.partner-card,
.tool-card,
.service-card,
.metric-card,
.data-card,
.feature-card,
.stat-card,
.step-card,
.faq-item,
.contact-link,
.login-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius-md);
  transition: all 0.25s ease;
}

.card:hover,
.pricing-card:hover,
.partner-card:hover,
.tool-card:hover,
.service-card:hover,
.metric-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-3px);
}

/* Partner card specific elements */
.partner-logo-box,
.tool-card-icon,
.pricing-icon-wrap {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

.partner-location {
  color: var(--text-muted) !important;
}

.partner-name,
.pricing-name,
.tool-title {
  color: var(--text-primary) !important;
}

/* ==============================================================================
   5. BUTTONS (UNIFIED BRAND PALETTE)
   ============================================================================== */
.btn-primary,
.btn-adm.btn-primary,
.btn-nav-primary {
  background: var(--gradient-main) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25) !important;
  transition: all 0.2s ease !important;
}
.btn-primary:hover,
.btn-adm.btn-primary:hover,
.btn-nav-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35) !important;
  opacity: 0.95 !important;
}

.btn-secondary,
.btn-outline,
.btn-adm.btn-outline {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-xs) !important;
}
.btn-secondary:hover,
.btn-outline:hover,
.btn-adm.btn-outline:hover {
  background: var(--primary-subtle) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  transform: translateY(-1px) !important;
}

.btn-danger,
.btn-adm.btn-danger {
  background: var(--danger-subtle) !important;
  border: 1px solid var(--danger-border) !important;
  color: var(--danger) !important;
}
.btn-danger:hover,
.btn-adm.btn-danger:hover {
  background: var(--danger) !important;
  color: #ffffff !important;
}

.btn-success,
.btn-adm.btn-success {
  background: var(--success-subtle) !important;
  border: 1px solid var(--success-border) !important;
  color: var(--success) !important;
}
.btn-success:hover,
.btn-adm.btn-success:hover {
  background: var(--success) !important;
  color: #ffffff !important;
}

/* Partner card action buttons */
.partner-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--text-secondary) !important;
}
.partner-btn:hover {
  transform: translateY(-2px);
}
.partner-btn.btn-web:hover {
  background: var(--primary-subtle) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.partner-btn.btn-wa {
  background: var(--success-subtle) !important;
  border-color: var(--success-border) !important;
  color: var(--success) !important;
}
.partner-btn.btn-wa:hover {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #ffffff !important;
}
.partner-btn.btn-tg {
  background: var(--info-subtle) !important;
  border-color: var(--info-border) !important;
  color: var(--info) !important;
}
.partner-btn.btn-tg:hover {
  background: var(--info) !important;
  border-color: var(--info) !important;
  color: #ffffff !important;
}
.partner-btn.btn-mail {
  background: var(--warning-subtle) !important;
  border-color: var(--warning-border) !important;
  color: var(--warning) !important;
}
.partner-btn.btn-mail:hover {
  background: var(--warning) !important;
  border-color: var(--warning) !important;
  color: #ffffff !important;
}

/* ==============================================================================
   6. FILTER PILLS & TABS
   ============================================================================== */
.pill-tab,
.filter-tab,
.tab-link {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}
.pill-tab:hover,
.filter-tab:hover,
.tab-link:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: var(--text-primary) !important;
}
.pill-tab.active,
.filter-tab.active,
.tab-link.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

/* ==============================================================================
   7. FORM INPUTS & SEARCH BARS
   ============================================================================== */
.form-input,
.form-select,
.form-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
select,
textarea {
  background-color: #ffffff !important;
  color: var(--text-primary) !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: var(--radius-sm) !important;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  outline: none !important;
  background-color: #ffffff !important;
}

/* Specific Search inputs on Resellers, Pricing, Orders */
#partnerSearch,
#pricingSearch,
.search-input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ==============================================================================
   8. TABLES & DATA LISTS (ADMIN & FRONTEND)
   ============================================================================== */
.table-responsive,
.adm-table-wrap {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

.adm-table,
.data-table {
  background: #ffffff !important;
  border-collapse: collapse;
}

.adm-table th,
.data-table th {
  background: #f8fafc !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.5px !important;
}

.adm-table td,
.data-table td {
  background: transparent !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: var(--text-primary) !important;
}

.adm-table tr:hover td,
.data-table tr:hover td {
  background: #f8fafc !important;
}

.data-header,
.data-card-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--border) !important;
}

.data-header h3,
.data-card-header h3 {
  color: var(--text-primary) !important;
}

/* Code pills in tables */
.code-text {
  background: #f1f5f9 !important;
  color: var(--primary) !important;
  border: 1px solid #e2e8f0 !important;
}

/* ==============================================================================
   9. BADGES & STATUS PILLS
   ============================================================================== */
.badge-status {
  font-weight: 700;
  border-radius: 9999px;
}
.badge-completed,
.badge-success {
  background: var(--success-subtle) !important;
  color: var(--success) !important;
  border: 1px solid var(--success-border) !important;
}
.badge-active,
.badge-distributor,
.partner-type-badge.distributor {
  background: var(--primary-subtle) !important;
  color: var(--primary) !important;
  border: 1px solid #bfdbfe !important;
}
.partner-type-badge.reseller {
  background: var(--success-subtle) !important;
  color: var(--success) !important;
  border: 1px solid var(--success-border) !important;
}
.badge-pending,
.badge-warning {
  background: var(--warning-subtle) !important;
  color: var(--warning) !important;
  border: 1px solid var(--warning-border) !important;
}
.badge-danger,
.badge-cancelled,
.badge-rejected {
  background: var(--danger-subtle) !important;
  color: var(--danger) !important;
  border: 1px solid var(--danger-border) !important;
}
.badge-disabled,
.badge-inactive {
  background: #f1f5f9 !important;
  color: var(--text-muted) !important;
  border: 1px solid #cbd5e1 !important;
}

/* Country Selection Chips */
.country-chip {
  background: var(--primary-subtle) !important;
  border: 1px solid #bfdbfe !important;
  color: var(--primary) !important;
}
.country-chip .chip-remove {
  color: var(--text-muted) !important;
}
.country-chip .chip-remove:hover {
  color: var(--danger) !important;
}

/* ==============================================================================
   10. MODALS & POPUPS (FRONTEND & ADMIN)
   ============================================================================== */
#partnerModal,
#serviceModal,
#downloadModal,
#detailsModal,
#toolModal,
#checkoutModal,
.modal,
[id$="Modal"] {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(8px) !important;
}

#partnerModal > div,
#serviceModal > div,
#downloadModal > div,
#detailsModal > div,
#toolModal > div,
.modal-content,
.modal-box {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-modal) !important;
  border-radius: var(--radius-lg);
}

#modalTitle,
.modal-title,
.modal-header h3 {
  color: var(--text-primary) !important;
}

.modal-header {
  border-bottom: 1px solid #f1f5f9 !important;
}

.modal-footer {
  border-top: 1px solid #f1f5f9 !important;
  background: #f8fafc !important;
}

/* Modal Inner Preview & Containers */
#modalFlagsPreview,
#logoPreviewBox {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Checkout Modal Steps & Method Cards */
.chk-modal-card {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
.payment-option-card,
.chk-method-card {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
.payment-option-card:hover,
.chk-method-card:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
}
.payment-option-card.selected,
.chk-method-card.selected {
  border-color: var(--primary) !important;
  background: var(--primary-subtle) !important;
}

/* ==============================================================================
   11. ADMIN BACKEND DASHBOARD SPECIFICS
   ============================================================================== */
.admin-sidebar {
  background: #ffffff !important;
  border-right: 1px solid var(--border) !important;
}
.admin-brand {
  border-bottom: 1px solid var(--border) !important;
}
.admin-brand h2 {
  color: var(--text-primary) !important;
}
.admin-brand span {
  background: var(--primary-subtle) !important;
  color: var(--primary) !important;
  border: 1px solid #bfdbfe !important;
}
.nav-label {
  color: #94a3b8 !important;
}
.admin-nav a {
  color: var(--text-secondary) !important;
}
.admin-nav a:hover {
  background: #f1f5f9 !important;
  color: var(--text-primary) !important;
}
.admin-nav a.active {
  background: var(--primary-subtle) !important;
  color: var(--primary) !important;
  border: 1px solid #bfdbfe !important;
}

.admin-topbar {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(12px) !important;
}
.topbar-title {
  color: var(--text-primary) !important;
}

.admin-footer {
  background: #ffffff !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}

/* Metric Cards Icons */
.metric-data h4 {
  color: var(--text-muted) !important;
}
.metric-data .val {
  color: var(--text-primary) !important;
}
.icon-blue {
  background: var(--primary-subtle) !important;
  color: var(--primary) !important;
}
.icon-green {
  background: var(--success-subtle) !important;
  color: var(--success) !important;
}
.icon-yellow {
  background: var(--warning-subtle) !important;
  color: var(--warning) !important;
}
.icon-cyan {
  background: var(--info-subtle) !important;
  color: var(--info) !important;
}

/* Flash alerts in admin */
.flash-alert, .alert {
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.flash-success, .alert-success {
  background: var(--success-subtle) !important;
  border: 1px solid var(--success-border) !important;
  color: var(--success) !important;
}
.flash-danger, .alert-danger {
  background: var(--danger-subtle) !important;
  border: 1px solid var(--danger-border) !important;
  color: var(--danger) !important;
}
.flash-info, .alert-info {
  background: var(--primary-subtle) !important;
  border: 1px solid #bfdbfe !important;
  color: var(--primary) !important;
}
.flash-warning, .alert-warning {
  background: var(--warning-subtle) !important;
  border: 1px solid var(--warning-border) !important;
  color: var(--warning) !important;
}

/* ==============================================================================
   12. FOOTER & CONTACT (FRONTEND)
   ============================================================================== */
.footer {
  background: #f1f5f9 !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}
.footer-copy {
  color: var(--text-muted) !important;
}
.footer-copy a {
  color: var(--primary) !important;
}
.footer-copy a:hover {
  color: var(--primary-hover) !important;
}
.social-btn {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}
.social-btn:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
  transform: translateY(-2px);
}

.contact-section {
  background: #f8fafc !important;
  border-top: 1px solid var(--border) !important;
}
.contact-brand p {
  color: var(--text-secondary) !important;
}
.contact-col h4 {
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
}
.quick-link {
  color: var(--text-secondary) !important;
}
.quick-link:hover {
  color: var(--primary) !important;
}

/* ==============================================================================
   13. CODE & TERMINAL SNIPPETS (CRISP DEVELOPER CONSOLE)
   ============================================================================== */
pre, code.terminal-box, .code-snippet {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid #1e293b !important;
  border-radius: var(--radius-sm);
}

/* ==============================================================================
   14. EXTENDED FOOTER & PRELOADER THEME
   ============================================================================== */
.site-footer {
  background: #f1f5f9 !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}
.site-footer .footer-container {
  color: var(--text-secondary) !important;
}
.footer-grid {
  border-bottom: 1px solid var(--border) !important;
}
.footer-col h4 {
  color: var(--text-primary) !important;
}
.footer-link,
.footer-links a {
  color: var(--text-secondary) !important;
}
.footer-link:hover,
.footer-links a:hover {
  color: var(--primary) !important;
}
.footer-bottom {
  border-top: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}
.footer-bottom a {
  color: var(--primary) !important;
}

/* Global High-Performance Preloader */
.app-preloader {
  background: var(--bg-primary) !important;
}
.preloader-brand-title {
  color: var(--text-primary) !important;
}
.preloader-progress-track {
  background: #e2e8f0 !important;
}
.preloader-progress-fill {
  background: linear-gradient(90deg, #2563eb, #0ea5e9, #2563eb) !important;
}
.preloader-status {
  color: var(--text-muted) !important;
}

/* ==============================================================================
   15. EXTENDED ADMIN SERVICE MODAL & COMPACT SERVICES TABLE
   ============================================================================== */
.compact-services-table th {
  background: #f8fafc !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border) !important;
}
.compact-services-table td {
  color: var(--text-primary) !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.compact-services-table tr:hover td {
  background: #f8fafc !important;
}
.col-sticky-action {
  background: #ffffff !important;
  box-shadow: -6px 0 12px rgba(15, 23, 42, 0.06) !important;
}
.compact-services-table tr:hover .col-sticky-action {
  background: #f8fafc !important;
}

/* Tabbed Service Modal (/admin/services.php) */
.svc-modal-overlay {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(8px) !important;
}
.svc-modal-dialog {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-modal) !important;
}
.svc-modal-header {
  background: #f8fafc !important;
  border-bottom: 1px solid var(--border) !important;
}
.svc-modal-title {
  color: var(--text-primary) !important;
}
.svc-modal-close {
  color: var(--text-muted) !important;
}
.svc-modal-close:hover {
  background: #f1f5f9 !important;
  color: var(--text-primary) !important;
}
.svc-sidebar {
  background: #f8fafc !important;
  border-right: 1px solid var(--border) !important;
}
.svc-tab-btn {
  color: var(--text-secondary) !important;
}
.svc-tab-btn:hover {
  background: #f1f5f9 !important;
  color: var(--text-primary) !important;
}
.svc-tab-btn.active {
  background: #ffffff !important;
  color: var(--primary) !important;
  border-left-color: var(--primary) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}
.svc-content {
  background: #ffffff !important;
  color: var(--text-primary) !important;
}
.svc-pane-header {
  border-bottom: 1px solid var(--border) !important;
}
.svc-pane-header h3 {
  color: var(--text-primary) !important;
}
.svc-pane-header p {
  color: var(--text-muted) !important;
}
.svc-label {
  color: var(--text-secondary) !important;
}
.svc-hint {
  color: var(--text-muted) !important;
}
.svc-modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid var(--border) !important;
}

/* ==============================================================================
   16. EXTENDED CHECKOUT MODAL FLOW
   ============================================================================== */
.checkout-modal-overlay {
  background: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(10px) !important;
}
.checkout-modal-box {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-modal) !important;
}
.checkout-header-bar {
  background: #f8fafc !important;
  border-bottom: 1px solid var(--border) !important;
}
.checkout-steps-bar {
  background: #f1f5f9 !important;
  border-bottom: 1px solid var(--border) !important;
}
.checkout-step-item .step-num {
  background: #ffffff !important;
  color: var(--text-muted) !important;
  border: 1.5px solid #cbd5e1 !important;
}
.checkout-step-item.active .step-num {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}
.checkout-step-item.completed .step-num {
  background: var(--success) !important;
  color: #ffffff !important;
  border-color: var(--success) !important;
}
.checkout-step-item .step-text strong {
  color: var(--text-primary) !important;
}
.checkout-step-item .step-text small {
  color: var(--text-muted) !important;
}
.checkout-close-btn {
  background: #f1f5f9 !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}
.checkout-close-btn:hover {
  background: var(--danger-subtle) !important;
  border-color: var(--danger-border) !important;
  color: var(--danger) !important;
}

/* Step 1 Elements */
.step1-svc-title {
  color: var(--text-primary) !important;
}
.step1-top-banner {
  background: var(--primary-subtle) !important;
  border: 1px solid #bfdbfe !important;
}
.checkout-cat-badge {
  color: var(--primary) !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
}
.step1-pricing-card {
  background: var(--primary-subtle) !important;
  border: 1px solid #bfdbfe !important;
}
.step1-price-val {
  color: var(--primary) !important;
}
.step1-instructions-card {
  background: #f8fafc !important;
  border: 1px solid var(--border) !important;
}
.step1-instructions-header {
  color: var(--text-primary) !important;
}
.formatted-instructions-container {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
}
.inst-line-heading {
  color: var(--primary) !important;
}
.inst-line-item, .inst-line-step {
  color: var(--text-secondary) !important;
}
.step1-select-full {
  background-color: #ffffff !important;
  color: var(--text-primary) !important;
  border: 1.5px solid #cbd5e1 !important;
}
.step1-select-full option {
  background: #ffffff !important;
  color: var(--text-primary) !important;
}
.checkout-input {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border: 1.5px solid #cbd5e1 !important;
}

/* Step 2 Elements */
.checkout-pm-tab {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--text-secondary) !important;
}
.checkout-pm-tab:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}
.checkout-pm-tab.active {
  background: var(--primary-subtle) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
.step2-qr-col {
  background: #f8fafc !important;
  border: 1px solid var(--border) !important;
}
.checkout-qr-frame-big {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.step2-inst-col {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
}
.step2-inst-heading {
  color: var(--text-primary) !important;
}
.step2-address-box {
  background: #f8fafc !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}
.checkout-upload-box {
  background: #f8fafc !important;
  border: 2px dashed #cbd5e1 !important;
  color: var(--text-secondary) !important;
}
.checkout-upload-box:hover {
  border-color: var(--primary) !important;
  background: var(--primary-subtle) !important;
}

/* Step 3 Review Elements */
.checkout-review-card {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
}
.review-row {
  border-bottom: 1px solid #f1f5f9 !important;
}
.review-row .label {
  color: var(--text-muted) !important;
}
.review-row .value {
  color: var(--text-primary) !important;
}
.review-row.total-highlight {
  background: var(--primary-subtle) !important;
  border-top: 1px solid #bfdbfe !important;
}
.review-row.total-highlight .value {
  color: var(--primary) !important;
}

/* ==============================================================================
   17. UNIVERSAL POPUP, MODAL, DETAILS & FIELD VISIBILITY SYSTEM
   ============================================================================== */
/* All Popups and Modals (Frontend & Admin) */
.popup-box,
.modal-box,
.details-modal-box,
.order-confirm-box,
.checkout-modal-box,
#announcementPopup .popup-box,
#serviceDetailsModal .details-modal-box,
#manualOrderModal > div,
#bulkRegisterModal > div,
#generateModal > div,
#submitModal > div,
#reportModal > div,
#registerModal > div,
#addMethodModal > div,
#editMethodModal > div,
#editNoteModal > div,
#apiModal > div,
[id$="Modal"] > div {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--text-primary) !important;
  box-shadow: 0 25px 65px -12px rgba(15, 23, 42, 0.25) !important;
}

/* Modal Headers, Titles & Labels */
.popup-title,
.modal-title,
#modalTitle,
#apiModalTitle,
#reportTitle,
.modal-header-section h2,
.modal-header-section h3,
.data-header h3,
.data-card-header h3,
.topbar-title {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}

.popup-subtitle,
.modal-subtitle,
#modalDesc,
.svc-hint,
.text-muted {
  color: var(--text-secondary) !important;
}

/* Modal lists, bullet items, descriptions & details fields */
.popup-list li,
.popup-list-item,
.details-list-item,
.modal-list-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm);
}

.popup-list .highlight,
.popup-list li strong {
  color: var(--primary) !important;
  font-weight: 700;
}

/* Service Details Modal Specific Containers */
#serviceDetailsModal .modal-body-section {
  color: var(--text-primary) !important;
}

#serviceDetailsModal .modal-body-section > div,
#serviceDetailsModal div[style*="background: rgba(11,15,25"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: var(--text-primary) !important;
}

#serviceDetailsModal div[style*="background: rgba(59,130,246,0.05)"] {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: var(--text-primary) !important;
}

#modalDetails {
  color: var(--text-primary) !important;
}

#modalDesc {
  color: var(--text-secondary) !important;
}

#serviceDetailsModal h4 {
  color: var(--text-primary) !important;
}

#serviceDetailsModal .modal-footer-section {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  color: var(--text-muted) !important;
}

.btn-modal-dismiss {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--text-secondary) !important;
}
.btn-modal-dismiss:hover {
  background: #f1f5f9 !important;
  color: var(--text-primary) !important;
  border-color: #94a3b8 !important;
}

/* Order Confirmation Success Popup */
.order-confirm-box {
  background: #ffffff !important;
  border: 2px solid #10b981 !important;
  color: var(--text-primary) !important;
}
.order-confirm-box h2,
.order-confirm-box h3,
.order-confirm-box h4 {
  color: var(--text-primary) !important;
}
.order-confirm-box p {
  color: var(--text-secondary) !important;
}
.order-confirm-box .detail-row {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: var(--text-primary) !important;
}

/* 3-Step Checkout Modal Headers, Footers & Fields */
.checkout-modal-box {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--text-primary) !important;
}
.checkout-header-bar {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.checkout-steps-bar {
  background: #f1f5f9 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.checkout-modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}
.checkout-modal-footer .footer-price-wrap {
  color: var(--text-primary) !important;
}
.checkout-modal-footer .footer-price-val {
  color: var(--primary) !important;
}

/* Universal Form Labels & High-Contrast Inputs */
label,
.form-label,
.svc-label {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

input.form-input,
textarea.form-textarea,
select.form-select,
.form-input,
.form-textarea,
.form-select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
select,
textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  -webkit-text-fill-color: #0f172a !important;
}

input.form-input:focus,
textarea.form-textarea:focus,
select.form-select:focus,
.form-input:focus,
.form-textarea:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Universal Table Data Text Visibility */
.adm-table td,
.data-table td {
  color: var(--text-primary) !important;
}
.adm-table th,
.data-table th {
  background: #f8fafc !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.adm-table tr:hover td,
.data-table tr:hover td {
  background: #f8fafc !important;
}

/* Metric Cards Value Visibility */
.metric-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
.metric-data h4 {
  color: var(--text-muted) !important;
}
.metric-data .val {
  color: var(--text-primary) !important;
  font-weight: 800 !important;
}

/* Pricing Page Details & Cards */
.pricing-page-title,
.card-name,
.dl-name,
.tracker-title,
.hero-title {
  color: var(--text-primary) !important;
}

.pricing-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: var(--text-primary) !important;
}
.pricing-card.featured {
  background: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.12) !important;
}
.pricing-card .price-val {
  color: var(--text-primary) !important;
}
.pricing-card .card-features li {
  color: var(--text-secondary) !important;
}
.btn-details {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: var(--text-secondary) !important;
}
.btn-details:hover {
  background: var(--primary-subtle) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Order Tracker Page */
.tracker-page {
  background: var(--bg-primary) !important;
}
.search-card,
.order-result-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: var(--shadow-sm) !important;
}
.search-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
}
.status-texts h4 {
  color: var(--text-primary) !important;
}
.status-texts p {
  color: var(--text-secondary) !important;
}
.detail-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}
.detail-item-val {
  color: var(--text-primary) !important;
}
.btn-refresh {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--text-secondary) !important;
}
.btn-refresh:hover {
  background: #f1f5f9 !important;
  color: var(--text-primary) !important;
}

/* IMEI Checker Page */
.checker-card,
.result-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}
.checker-card h2,
.result-device-title {
  color: var(--text-primary) !important;
}
.checker-card .sub,
.result-device-imei {
  color: var(--text-secondary) !important;
}
.input-group input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}
.input-group input:focus {
  background: #ffffff !important;
  border-color: var(--primary) !important;
}
.result-row {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: var(--text-primary) !important;
}
.result-label {
  color: var(--text-secondary) !important;
}
.result-value {
  color: var(--text-primary) !important;
}
.sample-pill {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--primary) !important;
}

/* Tutorials Page */
.service-card h2,
.service-card h3 {
  color: var(--text-primary) !important;
}
.service-card strong {
  color: var(--text-primary) !important;
}

/* Service Downloads Page */
.download-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: var(--text-primary) !important;
}
.card-actions {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}
.dl-btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: var(--text-secondary) !important;
}
.dl-btn:hover:not(.disabled) {
  background: #f1f5f9 !important;
  color: var(--text-primary) !important;
}

/* Mobile Nav Menu Dropdown */
.nav-links.open,
.nav-cta.open {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  box-shadow: var(--shadow-md) !important;
}
.nav-links.open a {
  color: var(--text-primary) !important;
}

/* ==============================================================================
   18. ADMIN BACKEND CRISP LIGHT THEME FIXES
   ============================================================================== */
.admin-brand h2 {
  color: var(--text-primary) !important;
}
.admin-topbar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.topbar-title {
  color: var(--text-primary) !important;
}
.admin-footer {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  color: var(--text-secondary) !important;
}
.data-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}
.data-header h3,
.data-card-header h3 {
  color: var(--text-primary) !important;
}
.data-card div[style*="background: rgba(11,15,25"],
.data-card div[style*="background: rgba(0,0,0,0.4)"] {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: var(--text-primary) !important;
}
.data-card div[style*="background: rgba(30,58,138"],
.admin-content div[style*="background: linear-gradient(135deg, rgba(30,58,138"],
.admin-content div[style*="background: linear-gradient(135deg, rgba(59,130,246"],
.admin-content div[style*="background: linear-gradient(135deg, rgba(16,185,129"] {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}
.admin-content div[style*="background: linear-gradient"] h2,
.admin-content div[style*="background: linear-gradient"] h3 {
  color: var(--text-primary) !important;
}
.admin-content div[style*="background: linear-gradient"] p {
  color: var(--text-secondary) !important;
}