/* =========================================================
   ASO Web – Custom styles (Bootstrap 5.2 supplement)
   Bootstrap CDN loaded in header.php / admin head.php
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Bootstrap variable overrides ─────────────────────────── */
:root {
  --bs-primary:          #8A2AE9;
  --bs-primary-rgb:      138, 42, 233;
  --bs-font-sans-serif:  'Inter', system-ui, -apple-system, sans-serif;
  --bs-body-font-size:   1.25rem;   /* 20px minimum */
  --bs-body-color:       #212529;
  --bs-border-radius:    0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-card-border-color: #e2e8f0;
  --brand-navy: #1a3a6b;
  --brand-blue: #8A2AE9;
}

body {
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-wrapper   { flex: 1 0 auto; }
.ids-page       { flex: 1 0 auto; }
footer          { flex-shrink: 0; }

/* ── Primary color overrides ──────────────────────────────── */
.btn-primary { --bs-btn-bg: var(--brand-blue); --bs-btn-border-color: var(--brand-blue); --bs-btn-hover-bg: #6e1fc0; --bs-btn-hover-border-color: #6e1fc0; --bs-btn-active-bg: #6e1fc0; }
.btn-outline-primary { --bs-btn-color: var(--brand-blue); --bs-btn-border-color: var(--brand-blue); --bs-btn-hover-bg: var(--brand-blue); }
a { color: var(--brand-blue); }
a:hover { color: #1557b0; }

/* ── Logo ─────────────────────────────────────────────────── */
.logo-mark {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-navy));
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.25rem; color: #fff; flex-shrink: 0;
}
.logo-brand { font-weight: 800; font-size: 1.25rem; color: var(--brand-navy); }
.logo-sub   { font-weight: 400; font-size: 1.25rem; color: #64748b; margin-left: 1px; }
.navbar-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }

/* ── Navbar ───────────────────────────────────────────────── */
.site-navbar { box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.site-navbar .nav-link { font-size: 1.125rem; font-weight: 500; color: #374151; padding: .5rem .75rem !important; }
.site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: var(--brand-blue); }
.site-navbar .nav-link.active { font-weight: 600; }
.nav-badge {
  display: inline-block; background: #ef4444; color: #fff;
  font-size: .875rem; font-weight: 700; border-radius: 99px;
  padding: 1px 6px; margin-left: 4px; vertical-align: middle;
}
.cart-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; color: #374151; text-decoration: none;
}
.cart-btn:hover { background: #f1f5f9; color: var(--brand-blue); }
.cart-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: #fff; font-size: .8rem; font-weight: 700;
  border-radius: 99px; min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.user-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 6px 12px; cursor: pointer; font-size: 1.125rem; font-weight: 500; color: #374151;
}
.user-btn:hover { border-color: var(--brand-blue); background: #f8faff; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand-blue); color: #fff;
  font-size: .875rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 180px;
  padding: 6px; display: none; z-index: 1000;
}
.user-dropdown.open { display: block; }
.user-dropdown a { display: block; padding: 9px 14px; border-radius: 6px; font-size: 1.125rem; color: #374151; text-decoration: none; }
.user-dropdown a:hover { background: #f1f5f9; color: var(--brand-blue); }
.user-menu { position: relative; }

/* ── Top strip ────────────────────────────────────────────── */
.topbar-strip { background: var(--brand-navy); color: rgba(255,255,255,.8); font-size: 1rem; padding: 7px 0; }
.topbar-strip a { color: rgba(255,255,255,.8); text-decoration: none; }
.topbar-strip a:hover { color: #fff; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero-dark {
  position: relative; overflow: hidden; min-height: 88vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
  padding: 80px 0 100px;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(26,115,232,.15), transparent),
              radial-gradient(ellipse 60% 40% at 80% 80%, rgba(99,102,241,.12), transparent);
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-content { position: relative; z-index: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 0 24px; text-align: center; }
.hero-text h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.15; color: #fff; margin-bottom: 16px; letter-spacing: -.5px; }
.hero-rotating { color: #60a5fa; }
.hero-sub { font-size: 1.25rem; color: rgba(255,255,255,.65); margin-bottom: 40px; }

/* ── Search ───────────────────────────────────────────────── */
.search-tabs { display: flex; gap: 4px; margin-bottom: 16px; justify-content: center; }
.search-tab {
  padding: 9px 26px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.6);
  font-size: 1.125rem; font-weight: 600; cursor: pointer; transition: all .2s;
}
.search-tab.active, .search-tab:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
.dark-search-box {
  display: flex; align-items: center;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 12px; overflow: hidden; transition: border-color .2s;
}
.dark-search-box:focus-within { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); }
.dark-search-box input { flex: 1; background: transparent; border: none; outline: none; padding: 16px 18px; font-size: 1.25rem; color: #fff; }
.dark-search-box input::placeholder { color: rgba(255,255,255,.4); }
.search-icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--brand-navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; margin: 6px; flex-shrink: 0; transition: transform .15s, background .15s;
}
.search-icon-btn:hover { background: var(--brand-blue); transform: scale(1.05); }
.search-icon-btn svg { width: 18px; height: 18px; }
.search-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; border-radius: 12px; border: none;
  background: var(--brand-blue); color: #fff;
  font-size: 1.25rem; font-weight: 600; cursor: pointer; transition: background .2s; margin-top: 12px;
}
.search-btn:hover { background: #1557b0; }
.transfer-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 560px) { .transfer-inputs { grid-template-columns: 1fr; } }

/* ── TLD chips ────────────────────────────────────────────── */
.tld-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; justify-content: center; }
.tld-chip {
  padding: 6px 16px; border-radius: 99px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.7);
  font-size: 1rem; font-weight: 500; cursor: pointer; transition: all .15s;
}
.tld-chip:hover { border-color: rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.12); }

/* ── Results ──────────────────────────────────────────────── */
.dark-results { margin-top: 16px; width: 100%; }
.dark-results.hidden { display: none; }
.dark-result-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-radius: 12px; margin-bottom: 8px; border: 1px solid;
}
.dark-result-item.available { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.dark-result-item.taken     { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06); }
.result-domain { font-size: 1.25rem; font-weight: 600; color: #fff; }
.result-price  { font-size: 1rem; color: rgba(255,255,255,.55); margin-top: 2px; }
.result-right  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.badge-available {
  padding: 5px 14px; border-radius: 99px; font-size: 1rem; font-weight: 700;
  background: rgba(34,197,94,.15); color: #4ade80; border: 1px solid rgba(34,197,94,.3);
}
.badge-taken {
  padding: 5px 14px; border-radius: 99px; font-size: 1rem; font-weight: 700;
  background: rgba(239,68,68,.1); color: #f87171; border: 1px solid rgba(239,68,68,.2);
}
.result-loading { padding: 24px; text-align: center; color: rgba(255,255,255,.5); font-size: 1.125rem; }
.spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.2); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Package option ───────────────────────────────────────── */
.pkg-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: 10px; border: 1.5px solid #e2e8f0;
  cursor: pointer; margin-bottom: 8px; transition: border-color .15s, background .15s;
}
.pkg-option:hover   { border-color: var(--brand-blue); background: #f0f7ff; }
.pkg-option.checked { border-color: var(--brand-blue); background: #eff6ff; }
.pkg-option input   { display: none; }
.pkg-name  { font-size: 1.125rem; font-weight: 500; color: #374151; }
.pkg-price { font-size: 1.25rem; font-weight: 700; color: var(--brand-blue); }
.pkg-price small { font-weight: 400; font-size: 1rem; color: #94a3b8; }

/* ── Bootstrap modal overrides ────────────────────────────── */
.modal-content { border-radius: 14px; border: none; box-shadow: 0 20px 60px rgba(0,0,0,.15); }
.modal-header  { border-bottom: 1px solid #f1f5f9; padding: 20px 24px 16px; }
.modal-body    { padding: 20px 24px; }
.modal-footer  { border-top: 1px solid #f1f5f9; padding: 16px 24px; }

/* ── Page wrapper ─────────────────────────────────────────── */
.page-wrapper { padding: 32px 0 64px; }
.page-header  { margin-bottom: 28px; }
.page-header h1 { font-size: 2rem; font-weight: 800; margin-bottom: 4px; }
.page-header p  { color: #64748b; margin: 0; font-size: 1.25rem; }

/* ── Auth pages ───────────────────────────────────────────── */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0f172a, #1e3a5f); padding: 40px 16px;
}
.auth-card {
  background: #fff; border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25); padding: 40px;
  width: 100%; max-width: 440px;
}
.auth-logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; text-align: center; }
.logo-mark-lg {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-navy));
  border-radius: 14px; font-size: 1.5rem; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.auth-card h2 { font-size: 1.75rem; font-weight: 800; margin-bottom: 4px; color: #0f172a; }
.auth-card p  { color: #64748b; font-size: 1.125rem; margin: 0; }

/* ── Steps bar ────────────────────────────────────────────── */
.steps-bar {
  display: flex; align-items: stretch; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 10px; margin-bottom: 24px; overflow: hidden;
}
.step-item { flex: 1; padding: 14px 16px; border-right: 1px solid #e2e8f0; font-size: 1.125rem; color: #94a3b8; }
.step-item:last-child { border-right: none; }
.step-num { font-weight: 700; font-size: 1.125rem; color: #64748b; }
.step-item.active .step-num { color: var(--brand-blue); }
.step-item.active { color: #1e293b; }
.step-arrow { display: flex; align-items: center; padding: 0 4px; color: #cbd5e1; font-size: 1.25rem; border-right: 1px solid #e2e8f0; }
.step-label { margin-top: 2px; font-size: 1rem; }

/* ── Fieldset titles ──────────────────────────────────────── */
.fieldset-title {
  font-size: 1.25rem; font-weight: 700; color: #1e3a5f;
  border-bottom: 2px solid var(--brand-blue); padding-bottom: 8px; margin: 24px 0 16px;
}

/* ── Price summary ────────────────────────────────────────── */
.price-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; font-size: 1.25rem; border-bottom: 1px solid #f1f5f9;
}
.price-row.total {
  border-top: 2px solid var(--brand-blue); border-bottom: none;
  font-weight: 700; font-size: 1.375rem; padding-top: 12px; margin-top: 4px;
}
.price-row.total .price-val { color: var(--brand-blue); }

/* ── Rotating text ────────────────────────────────────────── */
#rotating-text { display: inline-block; transition: opacity .4s ease, transform .4s ease; }

/* ── Admin sidebar ────────────────────────────────────────── */
.admin-wrap { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 240px; height: 100vh; position: fixed; left: 0; top: 0;
  background: #1e293b; z-index: 100; display: flex; flex-direction: column; overflow-y: auto;
}
.admin-sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.08);
  text-decoration: none; flex-shrink: 0;
}
.admin-sidebar-logo .logo-brand,
.admin-sidebar-logo .logo-sub { color: #fff; }
.admin-sidebar-logo .logo-mark { background: var(--brand-blue); }
.admin-nav { padding: 12px 10px; flex: 1; }
.admin-nav-section {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(255,255,255,.3); padding: 12px 10px 6px;
}
.admin-nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 8px; font-size: 1rem; color: rgba(255,255,255,.65);
  text-decoration: none; transition: all .15s; margin-bottom: 2px;
}
.admin-nav a:hover  { background: rgba(255,255,255,.08); color: #fff; }
.admin-nav a.active { background: var(--brand-blue); color: #fff; }
.nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.admin-sidebar-footer {
  padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 1rem; color: rgba(255,255,255,.3);
}
.admin-main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; background: #f8fafc; min-height: 100vh; }
.admin-topbar {
  background: #fff; border-bottom: 1px solid #e2e8f0;
  padding: 0 24px; height: 58px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 50;
}
.admin-topbar h2, .topbar-title { font-size: 1.25rem; font-weight: 700; color: #1e293b; margin: 0; }
.topbar-right { display: flex; align-items: center; gap: 16px; font-size: 1.125rem; color: #64748b; }
.topbar-right a { color: #64748b; text-decoration: none; }
.topbar-right a:hover { color: var(--brand-blue); }
.admin-content { padding: 24px; flex: 1; }

/* Admin stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 20px; display: flex; align-items: center; gap: 16px;
}
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.stat-icon.blue   { background: #eff6ff; }
.stat-icon.green  { background: #f0fdf4; }
.stat-icon.orange { background: #fff7ed; }
.stat-icon.red    { background: #fef2f2; }
.stat-value { font-size: 1.5rem; font-weight: 800; color: #0f172a; line-height: 1; }
.stat-label { font-size: 1rem; color: #64748b; margin-top: 4px; }

/* Admin table */
.table-wrap { overflow-x: auto; }
thead th {
  background: #f8fafc; font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #64748b;
  padding: 12px 16px; border-bottom: 2px solid #e2e8f0; white-space: nowrap;
}
tbody td { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; font-size: 1.125rem; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #fafbff; }

/* Admin cards */
.card { border: 1px solid #e2e8f0 !important; border-radius: 12px !important; }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #f1f5f9 !important;
  background: #fff !important;
}
.card-header h3, .card-header h2 { font-size: 1.25rem; font-weight: 700; margin: 0; color: #1e293b; }
.card-body { padding: 20px; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer { background: #0f172a; color: rgba(255,255,255,.7); }
.site-footer h5 { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); margin-bottom: 12px; }
.site-footer a  { color: rgba(255,255,255,.6); text-decoration: none; font-size: 1.125rem; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { margin-bottom: 8px; }
.site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.08); }
.footer-social { display: flex; gap: 8px; margin-top: 12px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(255,255,255,.08); display: flex;
  align-items: center; justify-content: center; font-size: .875rem; font-weight: 700;
}
.footer-social a:hover { background: var(--brand-blue); color: #fff; }

/* ── Locale selectors (lang / currency) ──────────────────── */
.locale-select-wrap { position: relative; display: flex; align-items: center; }
.locale-select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 5px 26px 5px 10px; font-size: .9rem; font-weight: 500;
  color: #374151; cursor: pointer; transition: border-color .15s; min-width: 76px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 8px center;
}
.locale-select:focus { outline: none; border-color: var(--brand-blue); }
.locale-select:hover { border-color: #9ca3af; }

/* ── Utilities ────────────────────────────────────────────── */
.hidden { display: none !important; }
.required { color: #ef4444; }
.text-mono { font-family: 'SF Mono', SFMono-Regular, monospace; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }

/* Badge aliases (backward compat) */
.badge-success { background-color: #dcfce7 !important; color: #166534 !important; }
.badge-danger  { background-color: #fee2e2 !important; color: #991b1b !important; }
.badge-warning { background-color: #fef3c7 !important; color: #92400e !important; }
.badge-info    { background-color: #dbeafe !important; color: #1e40af !important; }
.badge-neutral { background-color: #f1f5f9 !important; color: #475569 !important; }
.badge-secondary { background-color: #f1f5f9 !important; color: #475569 !important; }

/* Mobile admin toggle */
#admin-menu-toggle {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 200;
  width: 36px; height: 36px; border: none; border-radius: 8px;
  background: var(--brand-navy); color: #fff;
  align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer;
}
@media (max-width: 768px) {
  .admin-sidebar { transform: translateX(-100%); transition: transform .25s; }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { margin-left: 0; }
  #admin-menu-toggle { display: flex; }
}

/* ── Site footer bar ──────────────────────────────────────── */
.site-footer-bar {
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  padding: 20px 0;
}
.site-footer-inner { font-size: 1rem; color: #6b7280; }
.site-footer-copy  { color: #374151; }
.site-footer-links a { color: #374151; text-decoration: none; }
.site-footer-links a:hover { color: var(--brand-blue); }
.site-footer-sep   { color: #d1d5db; }

/* ══════════════════════════════════════════════════════════
   DARK MODE  (data-theme="dark" on <html>)
   Claude.ai-style gray tones — default on
   ══════════════════════════════════════════════════════════ */

/* Theme toggle button */
.theme-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid #e2e8f0; background: transparent;
  color: #374151; cursor: pointer; transition: all .18s; flex-shrink: 0;
}
.theme-toggle-btn:hover { border-color: #9ca3af; background: #f3f4f6; }
.theme-toggle-btn svg { width: 17px; height: 17px; }

/* ── Dark overrides ─────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
}

/* Body & page bg */
[data-theme="dark"] body {
  background: #1a1a26 !important;
  color: #ececf1 !important;
}

/* Navbar */
[data-theme="dark"] .site-navbar,
[data-theme="dark"] nav.navbar {
  background: #1e1e2c !important;
  border-bottom-color: #2d2d40 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.35) !important;
}
[data-theme="dark"] .site-navbar .nav-link,
[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .navbar-brand .logo-brand,
[data-theme="dark"] .navbar-brand .logo-sub { color: #c2d0e9 !important; }
[data-theme="dark"] .site-navbar .nav-link:hover,
[data-theme="dark"] .site-navbar .nav-link.active { color: #a78bfa !important; }
[data-theme="dark"] .navbar-toggler-icon { filter: invert(1) brightness(.8); }

/* Right controls */
[data-theme="dark"] .cart-btn { color: #c2d0e9 !important; }
[data-theme="dark"] .cart-btn:hover { background: #2a2a3a !important; color: #a78bfa !important; }
[data-theme="dark"] .user-btn {
  color: #c2d0e9 !important; border-color: #2d2d40 !important; background: transparent !important;
}
[data-theme="dark"] .user-btn:hover { border-color: #a78bfa !important; background: #252535 !important; }
[data-theme="dark"] .user-dropdown {
  background: #22222e !important; border-color: #2d2d40 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.45) !important;
}
[data-theme="dark"] .user-dropdown a { color: #c2d0e9 !important; }
[data-theme="dark"] .user-dropdown a:hover { background: #2a2a3c !important; color: #a78bfa !important; }

/* Locale selects */
[data-theme="dark"] .locale-select {
  background-color: #1e1e2c !important;
  color: #c2d0e9 !important;
  border-color: #2d2d40 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8ea0'/%3E%3C/svg%3E") !important;
}

/* Theme toggle btn in dark */
[data-theme="dark"] .theme-toggle-btn {
  border-color: #2d2d40; background: transparent; color: #c2d0e9;
}
[data-theme="dark"] .theme-toggle-btn:hover {
  border-color: #a78bfa; background: #252535; color: #a78bfa;
}

/* Bootstrap modal */
[data-theme="dark"] .modal-content {
  background: #22222e !important; border-color: #2d2d40 !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.6) !important;
}
[data-theme="dark"] .modal-header {
  border-bottom-color: #2d2d40 !important;
  color: #ececf1 !important;
}
[data-theme="dark"] .modal-footer {
  border-top-color: #2d2d40 !important;
}
[data-theme="dark"] .modal-title { color: #ececf1 !important; }
[data-theme="dark"] .text-muted { color: #8e8ea0 !important; }
[data-theme="dark"] .btn-close { filter: invert(1) brightness(.7); }
[data-theme="dark"] .btn-secondary {
  background: #2d2d40 !important; border-color: #3d3d52 !important; color: #c2d0e9 !important;
}
[data-theme="dark"] .btn-secondary:hover {
  background: #38384e !important;
}

/* Index modal inner content (dynamically built) */
[data-theme="dark"] #pkg-modal-body .addon-opt {
  border-color: #2d2d40 !important;
  color: #ececf1 !important;
}
[data-theme="dark"] #pkg-modal-body .addon-opt:hover {
  background: #252535 !important; border-color: #a78bfa !important;
}

/* General cards / page-wrapper */
[data-theme="dark"] .page-wrapper,
[data-theme="dark"] .ids-page { background: #1a1a26 !important; }

/* Auth pages stay dark (gradient bg) — no change needed */

/* Steps bar */
[data-theme="dark"] .steps-bar {
  background: #22222e !important; border-color: #2d2d40 !important;
}
[data-theme="dark"] .step-item { border-right-color: #2d2d40 !important; color: #8e8ea0 !important; }
[data-theme="dark"] .step-arrow { border-right-color: #2d2d40 !important; }
[data-theme="dark"] .step-item.active { color: #ececf1 !important; }

/* Bootstrap forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: #131320 !important; border-color: #2d2d40 !important;
  color: #ececf1 !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  border-color: #8A2AE9 !important;
  box-shadow: 0 0 0 3px rgba(138,42,233,.2) !important;
}
[data-theme="dark"] .form-control::placeholder { color: #5a5a72 !important; }
[data-theme="dark"] .form-label { color: #c2d0e9 !important; }
[data-theme="dark"] .form-text  { color: #8e8ea0 !important; }
[data-theme="dark"] .invalid-feedback { color: #f87171 !important; }

/* Cards (non-admin) */
[data-theme="dark"] .card {
  background: #22222e !important; border-color: #2d2d40 !important;
}
[data-theme="dark"] .card-header {
  background: #1e1e2c !important; border-color: #2d2d40 !important;
}
[data-theme="dark"] .card-header h2,
[data-theme="dark"] .card-header h3 { color: #ececf1 !important; }

/* Price rows */
[data-theme="dark"] .price-row {
  border-bottom-color: #2d2d40 !important; color: #c2d0e9 !important;
}
[data-theme="dark"] .price-row.total { border-top-color: #8A2AE9 !important; }

/* Tables */
[data-theme="dark"] thead th {
  background: #1e1e2c !important; color: #8e8ea0 !important;
  border-bottom-color: #2d2d40 !important;
}
[data-theme="dark"] tbody td {
  border-bottom-color: #2d2d40 !important; color: #c2d0e9 !important;
}
[data-theme="dark"] tbody tr:hover td { background: #222232 !important; }

/* Footer */
[data-theme="dark"] .site-footer {
  background: #13131e !important; border-top: 1px solid #2d2d40 !important;
}

/* ids-* classes (index.php search page) */
[data-theme="dark"] .ids-page-inner { background: #1a1a26 !important; }

/* Login/register btns in header */
[data-theme="dark"] .btn-outline-secondary {
  color: #c2d0e9 !important; border-color: #2d2d40 !important;
}
[data-theme="dark"] .btn-outline-secondary:hover {
  background: #2a2a3c !important; color: #ececf1 !important;
}

/* Footer dark */
[data-theme="dark"] .site-footer-bar  { background: #13131e; border-top-color: #2d2d40; }
[data-theme="dark"] .site-footer-inner { color: #5a5a72; }
[data-theme="dark"] .site-footer-copy  { color: #8e8ea0; }
[data-theme="dark"] .site-footer-links a { color: #8e8ea0; }
[data-theme="dark"] .site-footer-links a:hover { color: #c2d0e9; }
[data-theme="dark"] .site-footer-sep   { color: #2d2d40; }

/* Transfer msg dark */
[data-theme="dark"] #transfer-msg { background: #1e1e2c; border-color: #2d2d40; color: #c2d0e9; }

/* ids-transfer note dark */
[data-theme="dark"] .ids-transfer-note { color: #5a5a72; }