/* =========================================================================
   SEAFOOD UI — Premium dark marine design system
   ========================================================================= */

:root {
  /* surface */
  --sf-bg-1: #03101b;
  --sf-bg-2: #061a2a;
  --sf-bg-3: #0a2436;
  --sf-surface: rgba(255, 255, 255, 0.045);
  --sf-surface-2: rgba(255, 255, 255, 0.075);
  --sf-surface-3: rgba(255, 255, 255, 0.11);
  --sf-glass: rgba(10, 28, 42, 0.55);
  --sf-glass-strong: rgba(8, 22, 34, 0.78);

  /* lines */
  --sf-line: rgba(151, 211, 218, 0.14);
  --sf-line-strong: rgba(151, 211, 218, 0.28);

  /* text */
  --sf-text: #eaf6fb;
  --sf-text-soft: #b9d2dc;
  --sf-muted: #7e98a6;
  --sf-faint: #4f6878;

  /* brand */
  --sf-primary: #1ec8b7;
  --sf-primary-2: #0e8fa3;
  --sf-primary-3: #066b86;
  --sf-accent: #ffb84d;
  --sf-accent-2: #ff8a3d;
  --sf-cyan: #54e0ff;
  --sf-purple: #8b6cff;
  --sf-pink: #ff6f9c;

  /* status */
  --sf-danger: #ff6b7a;
  --sf-warning: #ffc04d;
  --sf-success: #45d483;
  --sf-info: #54d6ff;

  /* gradients */
  --sf-grad-primary: linear-gradient(135deg, #1ec8b7 0%, #0e8fa3 60%, #086a85 100%);
  --sf-grad-accent: linear-gradient(135deg, #ffd36a 0%, #ff9d3d 100%);
  --sf-grad-danger: linear-gradient(135deg, #ff8090 0%, #ff5063 100%);
  --sf-grad-info:   linear-gradient(135deg, #6ee0ff 0%, #1fa4cf 100%);
  --sf-grad-card:   linear-gradient(180deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.025) 100%);
  --sf-grad-hero:   radial-gradient(circle at 20% 0%, rgba(30,200,183,0.35), transparent 50%),
                    radial-gradient(circle at 90% 20%, rgba(255,184,77,0.18), transparent 45%),
                    linear-gradient(135deg, #062235 0%, #0a3349 100%);

  /* radius */
  --sf-r-sm: 12px;
  --sf-r:    18px;
  --sf-r-lg: 26px;
  --sf-r-xl: 34px;
  --sf-r-pill: 999px;

  /* shadows */
  --sf-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.28);
  --sf-shadow:    0 18px 48px rgba(0, 0, 0, 0.4);
  --sf-shadow-lg: 0 32px 80px rgba(0, 0, 0, 0.5);
  --sf-glow:      0 0 0 1px rgba(30, 200, 183, 0.4), 0 18px 50px rgba(30, 200, 183, 0.18);
  --sf-glow-soft: 0 0 0 1px rgba(30, 200, 183, 0.22), 0 12px 30px rgba(30, 200, 183, 0.12);

  /* timing */
  --sf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sf-fast: 0.18s var(--sf-ease);
  --sf-mid:  0.28s var(--sf-ease);
  --sf-slow: 0.5s var(--sf-ease);
}

/* ---------- base reset + page ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

::selection { background: rgba(30, 200, 183, 0.42); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(30, 200, 183, 0.45), rgba(14, 143, 163, 0.45));
  border-radius: var(--sf-r-pill);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--sf-primary), var(--sf-primary-2)); }

body,
body[data-layout="horizontal"] {
  min-height: 100vh;
  margin: 0;
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sf-text) !important;
  background:
    radial-gradient(circle at 8% 6%, rgba(30, 200, 183, 0.20), transparent 38%),
    radial-gradient(circle at 92% 4%, rgba(255, 184, 77, 0.13), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(84, 224, 255, 0.10), transparent 50%),
    linear-gradient(160deg, #03101b 0%, #062235 50%, #03101b 100%) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* subtle animated grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    radial-gradient(rgba(30, 200, 183, 0.05) 1px, transparent 1px);
  background-size: 32px 32px, 96px 96px;
  background-position: 0 0, 16px 16px;
  opacity: 0.7;
}

/* keep content above grain (do NOT include .modal — it's fixed by Bootstrap) */
.main, footer, .section, #page-topbar { position: relative; z-index: 1; }

/* modal must stay above everything; clear any ancestor transform/filter clipping */
.modal { z-index: 1080 !important; }
.modal-backdrop { z-index: 1070 !important; }
.modal-open .main,
.modal-open .section,
.modal-open .card { transform: none !important; filter: none !important; overflow: visible !important; }

/* typography */
h1, h2, h3, h4, h5, h6,
.card-title,
.page-title,
.page-title-box h4,
.navbar-brand {
  font-family: "Space Grotesk", "Manrope", sans-serif !important;
  color: var(--sf-text) !important;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-top: 0;
}

h1 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; font-weight: 800; }
h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; font-weight: 800; }
h3 { font-size: clamp(20px, 2vw, 26px); }
h4 { font-size: clamp(17px, 1.4vw, 20px); }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p { color: var(--sf-text-soft); }
strong, b { color: var(--sf-text); font-weight: 700; }
small { color: var(--sf-muted); }
hr { border-color: var(--sf-line); opacity: 1; }

a {
  color: var(--sf-cyan);
  text-decoration: none;
  transition: color var(--sf-fast);
}
a:hover { color: #b6f1ff; text-decoration: none; }

.text-dark, .text-body { color: var(--sf-text) !important; }
.text-muted, .text-secondary { color: var(--sf-muted) !important; }
.text-white { color: var(--sf-text) !important; }
.text-primary { color: #66ecdc !important; }
.text-success { color: #7df0aa !important; }
.text-danger { color: #ff96a3 !important; }
.text-info { color: #91e3ff !important; }
.text-warning { color: #ffd28a !important; }

/* ---------- layout ---------- */
.main { min-height: 100vh; background: transparent !important; }
#layout-wrapper { background: transparent !important; }
.main-content { min-height: calc(100vh - 160px); background: transparent !important; }
.page-content {
  padding: 36px 0 72px !important;
  background: transparent !important;
}

.container, .container-fluid {
  max-width: 1340px;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

/* page title */
.page-title-box {
  position: relative;
  margin-bottom: 28px;
  padding: 22px 26px;
  background: var(--sf-grad-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r-lg);
  box-shadow: var(--sf-shadow-sm);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.page-title-box::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--sf-grad-primary);
  border-radius: var(--sf-r-pill);
}
.page-title-box h4 {
  margin: 0;
  font-size: 22px !important;
  font-weight: 800 !important;
}

.breadcrumb {
  margin: 0; padding: 0;
  background: transparent !important;
}
.breadcrumb-item, .breadcrumb-item.active {
  color: var(--sf-muted) !important;
  font-size: 13px;
  font-weight: 600;
}
.breadcrumb-item.active { color: var(--sf-text-soft) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--sf-faint); }

/* ---------- header / topbar ---------- */
#page-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: linear-gradient(180deg, rgba(3, 16, 27, 0.85), rgba(3, 16, 27, 0.65)) !important;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid var(--sf-line) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.navbar-header {
  height: 72px;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 22px !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.navbar-header > .d-flex {
  align-items: center;
  gap: 10px;
}

.navbar-brand-box {
  background: transparent !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 14px 0 0 !important;
}
/* logo: show large on desktop, compact on mobile (don't force both visible) */
.logo-lg { display: flex; align-items: center; }
.logo-sm { display: none; align-items: center; }
@media (max-width: 575.98px) {
  .logo-lg { display: none; }
  .logo-sm { display: inline-flex; }
}
.logo img,
.header-brand-img {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(30, 200, 183, 0.18), rgba(14, 143, 163, 0.08));
  padding: 6px;
  box-shadow: 0 10px 30px rgba(30, 200, 183, 0.25), inset 0 0 0 1px rgba(30, 200, 183, 0.3);
  transition: transform var(--sf-mid);
}
.logo:hover img { transform: rotate(-6deg) scale(1.05); }

/* topnav */
.topnav {
  background: linear-gradient(180deg, rgba(7, 25, 40, 0.55), rgba(7, 25, 40, 0.32)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 0;
  padding: 6px 0;
}
.topnav .container-fluid { max-width: 1340px; }

.topnav .navbar-nav {
  gap: 6px;
  align-items: center;
}
.topnav .navbar-nav .nav-link {
  position: relative;
  color: var(--sf-text-soft) !important;
  border-radius: var(--sf-r-pill);
  padding: 11px 18px !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.005em;
  transition: color var(--sf-fast), background var(--sf-fast), transform var(--sf-fast);
}
.topnav .navbar-nav .nav-link i { opacity: 0.85; }
.topnav .navbar-nav .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
.topnav .navbar-nav .nav-link.active,
.topnav .navbar-nav .nav-item.active > .nav-link,
.topnav .navbar-nav .nav-item.show > .nav-link {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(30, 200, 183, 0.28), rgba(14, 143, 163, 0.18));
  box-shadow: inset 0 0 0 1px rgba(30, 200, 183, 0.4), 0 8px 22px rgba(30, 200, 183, 0.18);
}

.topnav .arrow-down::after {
  border-color: currentColor;
  opacity: 0.7;
}

/* dropdowns */
.dropdown-menu {
  background: var(--sf-glass-strong) !important;
  border: 1px solid var(--sf-line-strong) !important;
  border-radius: var(--sf-r) !important;
  padding: 10px !important;
  box-shadow: var(--sf-shadow-lg) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  min-width: 230px;
  margin-top: 2px !important;
}
/* invisible bridge so the cursor doesn't fall into a dead zone between trigger and menu */
.topnav .nav-item.dropdown,
.dropdown { position: relative; }
.topnav .nav-item.dropdown > .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0; height: 12px;
  background: transparent;
}
/* allow CSS hover-open on desktop topnav (keep click-toggle working too) */
@media (min-width: 992px) {
  .topnav .nav-item.dropdown:hover > .dropdown-menu,
  .topnav .nav-item.dropdown:focus-within > .dropdown-menu {
    display: block;
  }
}
.dropdown-item {
  border-radius: var(--sf-r-sm) !important;
  color: var(--sf-text-soft) !important;
  padding: 10px 14px !important;
  font-weight: 600;
  font-size: 14px;
  transition: background var(--sf-fast), color var(--sf-fast), transform var(--sf-fast);
}
.dropdown-item i { color: var(--sf-primary); }
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  background: linear-gradient(135deg, rgba(30, 200, 183, 0.22), rgba(30, 200, 183, 0.08)) !important;
  color: #fff !important;
  transform: translateX(2px);
}
.dropdown-divider {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  margin: 6px 4px;
}

/* header right buttons */
.header-item {
  color: var(--sf-text) !important;
  border-radius: 14px !important;
  height: 44px;
  min-width: 44px;
  padding: 0 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  transition: background var(--sf-fast), border-color var(--sf-fast), transform var(--sf-fast);
}
/* respect Bootstrap responsive display utilities — burger only on mobile */
.header-item.d-lg-none { display: none; }
@media (max-width: 991.98px) {
  .header-item.d-lg-none { display: inline-flex; }
}
.d-none { display: none !important; }
.header-item:hover {
  background: linear-gradient(135deg, rgba(30, 200, 183, 0.20), rgba(30, 200, 183, 0.06)) !important;
  border-color: rgba(30, 200, 183, 0.4) !important;
  transform: translateY(-1px);
}
.noti-icon i { font-size: 18px; }

/* cart counter badge */
#DHsLaeGImvH:not(:empty) {
  padding: 0 6px;
}

/* ---------- cards ---------- */
.card,
.modal-content,
.plan-box,
.mini-stats-wid {
  position: relative;
  background: var(--sf-grad-card) !important;
  border: 1px solid var(--sf-line) !important;
  border-radius: var(--sf-r-lg) !important;
  box-shadow: var(--sf-shadow-sm) !important;
  color: var(--sf-text) !important;
  overflow: hidden;
  transition: transform var(--sf-mid), box-shadow var(--sf-mid), border-color var(--sf-mid);
  backdrop-filter: blur(8px);
}
.card:hover,
.plan-box:hover {
  border-color: var(--sf-line-strong) !important;
  box-shadow: var(--sf-shadow) !important;
}

.card-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent) !important;
  border-bottom: 1px solid var(--sf-line) !important;
  padding: 18px 24px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.card-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.005em;
}
.card-body { padding: 24px !important; }
.card-footer {
  background: rgba(255, 255, 255, 0.025) !important;
  border-top: 1px solid var(--sf-line) !important;
  padding: 16px 24px !important;
}

/* hero card top stripe (auth pages, profile, home about) */
.bg-circle-shape {
  position: relative;
  background: var(--sf-grad-primary) !important;
  border-radius: 0 !important;
  padding: 28px 22px !important;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(30, 200, 183, 0.22);
}
.bg-circle-shape::before {
  content: "";
  position: absolute;
  inset: -50% -25%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.12), transparent 45%);
  pointer-events: none;
}
.bg-circle-shape h1 {
  position: relative;
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  margin: 0;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* mini-stats-wid — stat cards */
.mini-stats-wid .card-body { padding: 22px 24px !important; }
.mini-stats-wid .media,
.mini-stats-wid .d-flex {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mini-stats-wid .media-body,
.mini-stats-wid .flex-grow-1 { flex: 1; }
.mini-stats-wid p {
  margin: 0 0 8px;
  color: var(--sf-muted) !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mini-stats-wid h4 {
  margin: 0;
  font-size: 28px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #fff, #b9f1ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mini-stat-icon,
.avatar-sm {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  background: var(--sf-grad-primary) !important;
  box-shadow: 0 14px 32px rgba(30, 200, 183, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mini-stat-icon .avatar-title,
.avatar-sm .avatar-title {
  background: transparent !important;
  border-radius: inherit !important;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-stat-icon i,
.avatar-sm i {
  color: #052028 !important;
  font-size: 24px !important;
  text-shadow: none;
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px !important;
  font-family: "Manrope", sans-serif;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em;
  padding: 11px 20px !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform var(--sf-fast), background var(--sf-fast),
              border-color var(--sf-fast), color var(--sf-fast), box-shadow var(--sf-fast);
  white-space: nowrap;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--sf-ease);
  pointer-events: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::before { transform: translateX(100%); }
.btn:active { transform: translateY(0); }
.btn i { font-size: 14px; }
.btn-sm { padding: 7px 14px !important; font-size: 12.5px !important; border-radius: 11px !important; }
.btn-lg { padding: 14px 26px !important; font-size: 16px !important; border-radius: 16px !important; }

.btn-primary {
  background: var(--sf-grad-primary) !important;
  border-color: rgba(30, 200, 183, 0.55) !important;
  color: #03222b !important;
  box-shadow: 0 10px 26px rgba(30, 200, 183, 0.28) !important;
}
.btn-primary:hover {
  box-shadow: 0 14px 36px rgba(30, 200, 183, 0.42) !important;
  color: #03222b !important;
}

.btn-success {
  background: linear-gradient(135deg, #4ee18b, #1fa769) !important;
  border-color: rgba(78, 225, 139, 0.55) !important;
  color: #052816 !important;
  box-shadow: 0 10px 26px rgba(69, 212, 131, 0.25) !important;
}
.btn-info {
  background: var(--sf-grad-info) !important;
  border-color: rgba(110, 224, 255, 0.55) !important;
  color: #032030 !important;
  box-shadow: 0 10px 26px rgba(84, 224, 255, 0.25) !important;
}
.btn-warning {
  background: var(--sf-grad-accent) !important;
  border-color: rgba(255, 184, 77, 0.55) !important;
  color: #2a1500 !important;
  box-shadow: 0 10px 26px rgba(255, 184, 77, 0.28) !important;
}
.btn-danger {
  background: var(--sf-grad-danger) !important;
  border-color: rgba(255, 128, 144, 0.55) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(255, 80, 99, 0.28) !important;
}

.btn-secondary,
.btn-light,
.btn-outline-light {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: var(--sf-text) !important;
}
.btn-secondary:hover,
.btn-light:hover,
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.13) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

.btn-outline-primary {
  background: rgba(30, 200, 183, 0.06) !important;
  border-color: rgba(30, 200, 183, 0.45) !important;
  color: #7ff5ed !important;
}
.btn-outline-primary:hover {
  background: var(--sf-grad-primary) !important;
  border-color: transparent !important;
  color: #03222b !important;
  box-shadow: 0 10px 26px rgba(30, 200, 183, 0.32) !important;
}

.btn-outline-secondary {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--sf-text-soft) !important;
}
.btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.btn-outline-danger {
  background: rgba(255, 107, 122, 0.08) !important;
  border-color: rgba(255, 107, 122, 0.45) !important;
  color: #ff96a3 !important;
}
.btn-outline-danger:hover {
  background: var(--sf-grad-danger) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn[disabled],
.btn:disabled,
.disabled {
  opacity: 0.55 !important;
  pointer-events: none;
  transform: none !important;
}

.btn-close {
  filter: invert(1) brightness(2);
  opacity: 0.7;
}
.btn-close:hover { opacity: 1; }

/* ---------- forms ---------- */
.form-group, .mb-3 { margin-bottom: 18px; }

.form-control,
.form-select,
select.form-control,
textarea.form-control {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--sf-line-strong) !important;
  color: var(--sf-text) !important;
  border-radius: 14px !important;
  min-height: 48px;
  padding: 12px 16px !important;
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: none !important;
  transition: border-color var(--sf-fast), background var(--sf-fast), box-shadow var(--sf-fast);
}
textarea.form-control { min-height: 110px; resize: vertical; }
.form-control:hover,
.form-select:hover { border-color: rgba(151, 211, 218, 0.42) !important; }
.form-control:focus,
.form-select:focus {
  border-color: var(--sf-primary) !important;
  background: rgba(255, 255, 255, 0.085) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(30, 200, 183, 0.15) !important;
}
.form-control::placeholder { color: var(--sf-faint) !important; }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2366ecdc'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px !important;
}
.form-select option { background: #07212f; color: var(--sf-text); }

label,
.form-label,
.col-form-label {
  color: var(--sf-text-soft) !important;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.input-group {
  border-radius: 14px;
  overflow: visible;
}
.input-group > .form-control {
  border-radius: 11px 14px !important;
}
.input-group > .btn {
  border-radius: 0 14px 14px 0 !important;
}
.input-group > .btn + .btn { border-left: 1px solid rgba(255, 255, 255, 0.1) !important; }

.form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 0.25em;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(151, 211, 218, 0.45);
  border-radius: 6px;
  cursor: pointer;
}
.form-check-input:checked {
  background-color: var(--sf-primary);
  border-color: var(--sf-primary);
}
.form-check-input:focus {
  box-shadow: 0 0 0 4px rgba(30, 200, 183, 0.18);
  border-color: var(--sf-primary);
}
.form-check-label { color: var(--sf-text-soft); font-weight: 600; font-size: 14px; cursor: pointer; }

/* alerts */
.alert {
  border-radius: var(--sf-r) !important;
  border: 1px solid transparent !important;
  padding: 14px 18px !important;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.alert-success {
  background: rgba(69, 212, 131, 0.10) !important;
  border-color: rgba(69, 212, 131, 0.35) !important;
  color: #b8f7d4 !important;
}
.alert-danger {
  background: rgba(255, 107, 122, 0.10) !important;
  border-color: rgba(255, 107, 122, 0.35) !important;
  color: #ffc4cc !important;
}
.alert-warning {
  background: rgba(255, 192, 77, 0.10) !important;
  border-color: rgba(255, 192, 77, 0.35) !important;
  color: #ffe1a8 !important;
}
.alert-info {
  background: rgba(84, 214, 255, 0.10) !important;
  border-color: rgba(84, 214, 255, 0.35) !important;
  color: #b9eeff !important;
}

/* ---------- tables ---------- */
.table {
  color: var(--sf-text) !important;
  border-color: var(--sf-line) !important;
  margin-bottom: 0;
}
.table > :not(caption) > * > * {
  background: transparent !important;
  color: var(--sf-text) !important;
  border-bottom-color: var(--sf-line) !important;
  padding: 14px 16px !important;
}
.table thead th,
.table > thead {
  background: rgba(30, 200, 183, 0.08) !important;
  color: #d4fffa !important;
  font-weight: 800;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--sf-line-strong) !important;
}
.table tbody tr {
  transition: background var(--sf-fast);
}
.table tbody tr:hover > * {
  background: rgba(30, 200, 183, 0.05) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: rgba(255, 255, 255, 0.018) !important;
}
.table-bordered, .table-bordered td, .table-bordered th {
  border-color: var(--sf-line) !important;
}
.table-responsive {
  border-radius: var(--sf-r);
  border: 1px solid var(--sf-line);
  background: rgba(255, 255, 255, 0.02);
}
.table-responsive > .table { margin-bottom: 0; }

/* badges */
.badge {
  border-radius: var(--sf-r-pill) !important;
  padding: 5px 11px !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.04em;
}
.bg-primary   { background: rgba(30, 200, 183, 0.18) !important; color: #aff7ee !important; border: 1px solid rgba(30, 200, 183, 0.3); }
.bg-success   { background: rgba(69, 212, 131, 0.16) !important; color: #c0fad6 !important; border: 1px solid rgba(69, 212, 131, 0.3); }
.bg-danger    { background: rgba(255, 107, 122, 0.18) !important; color: #ffd2d8 !important; border: 1px solid rgba(255, 107, 122, 0.3); }
.bg-info      { background: rgba(84, 214, 255, 0.16) !important; color: #b9eeff !important; border: 1px solid rgba(84, 214, 255, 0.3); }
.bg-warning   { background: rgba(255, 184, 77, 0.18) !important; color: #ffe2a8 !important; border: 1px solid rgba(255, 184, 77, 0.3); }
.bg-secondary { background: rgba(255, 255, 255, 0.10) !important; color: var(--sf-text-soft) !important; border: 1px solid rgba(255, 255, 255, 0.15); }

/* soft badge variants used in orders */
.badge-pill { border-radius: var(--sf-r-pill) !important; }
.badge-soft-primary { background: rgba(30, 200, 183, 0.15) !important; color: #aff7ee !important; }
.badge-soft-success { background: rgba(69, 212, 131, 0.15) !important; color: #c0fad6 !important; }
.badge-soft-info    { background: rgba(84, 214, 255, 0.15) !important; color: #b9eeff !important; }
.badge-soft-warning { background: rgba(255, 184, 77, 0.15) !important; color: #ffe2a8 !important; }
.badge-soft-danger  { background: rgba(255, 107, 122, 0.15) !important; color: #ffd2d8 !important; }
.badge-soft-secondary { background: rgba(255, 255, 255, 0.08) !important; color: var(--sf-text-soft) !important; }
.font-size-12 { font-size: 11.5px !important; }
.font-size-14 { font-size: 13.5px !important; }
.font-size-16 { font-size: 15px !important; }
.font-size-18 { font-size: 17px !important; }
.font-size-24 { font-size: 22px !important; }
.font-size-20 { font-size: 19px !important; }

/* FAQ boxes */
.faq-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r);
  margin-bottom: 14px !important;
  transition: background var(--sf-fast), border-color var(--sf-fast), transform var(--sf-fast);
}
.faq-box:hover {
  background: rgba(30, 200, 183, 0.06);
  border-color: rgba(30, 200, 183, 0.3);
  transform: translateX(2px);
}
.faq-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(69, 212, 131, 0.2), rgba(30, 200, 183, 0.12));
  display: flex; align-items: center; justify-content: center;
}
.faq-icon i { color: var(--sf-success) !important; font-size: 22px; }
.faq-box .media-body { flex: 1; }
.faq-box h5 { color: var(--sf-text); margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.faq-box p { margin: 0; color: var(--sf-muted); font-size: 14px; line-height: 1.6; }

.check-nav-icon {
  font-size: 28px;
  color: var(--sf-primary);
  display: block;
  margin-bottom: 6px;
}

/* progress + spinner (loading states) */
.progress {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--sf-r-pill);
  height: 8px;
  overflow: hidden;
}
.progress-bar {
  background: var(--sf-grad-primary) !important;
  border-radius: var(--sf-r-pill);
}
.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%, transparent) !important;
  background-size: 1rem 1rem !important;
}
.spinner-grow, .spinner-border {
  color: var(--sf-primary) !important;
}

/* table-light header (used in orders) */
.table-light, .table > thead.table-light {
  background: rgba(30, 200, 183, 0.10) !important;
  color: #d4fffa !important;
}
.table-light th { color: #d4fffa !important; background: transparent !important; }

/* media helpers (legacy bootstrap 4) */
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1; }

/* fw helpers */
.fw-bold { font-weight: 800 !important; }
.fw-semibold { font-weight: 700 !important; }
.fw-medium { font-weight: 600 !important; }

/* bg-* + bg-soft (translucent info panels in checkout) */
.bg-soft {
  border-radius: var(--sf-r) !important;
  border: 1px solid transparent;
}
.bg-primary.bg-soft {
  background: rgba(30, 200, 183, 0.10) !important;
  border-color: rgba(30, 200, 183, 0.28) !important;
  color: #aff7ee !important;
}
.bg-info.bg-soft {
  background: rgba(84, 214, 255, 0.10) !important;
  border-color: rgba(84, 214, 255, 0.28) !important;
  color: #b9eeff !important;
}
.bg-success.bg-soft {
  background: rgba(69, 212, 131, 0.10) !important;
  border-color: rgba(69, 212, 131, 0.28) !important;
  color: #c0fad6 !important;
}
.bg-warning.bg-soft {
  background: rgba(255, 184, 77, 0.10) !important;
  border-color: rgba(255, 184, 77, 0.30) !important;
  color: #ffe2a8 !important;
}
.bg-danger.bg-soft {
  background: rgba(255, 107, 122, 0.10) !important;
  border-color: rgba(255, 107, 122, 0.28) !important;
  color: #ffd2d8 !important;
}
.bg-soft h5 { color: inherit !important; font-weight: 700; }
.float-end { float: right; }

/* radio inline (used in checkout) */
.form-check-inline {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-right: 16px;
}
.form-check-input[type="radio"] { border-radius: 50%; }

/* ---------- product cards (plan-box) ---------- */
.row-sm > [class*="col-"] { margin-bottom: 22px; }

.plan-box {
  display: flex;
  flex-direction: column;
}
.plan-box .card-body {
  display: flex;
  flex-direction: column;
}
.plan-features {
  position: relative;
  border-radius: var(--sf-r);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.05));
  border: 1px solid var(--sf-line);
  padding: 0;
  margin-bottom: 16px !important;
  isolation: isolate;
}
.plan-features::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
  z-index: 1;
}
.plan-features img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block;
  transition: transform var(--sf-slow);
}
.plan-box:hover .plan-features img {
  transform: scale(1.07);
}

/* product price highlight */
.plan-box h5,
.plan-box .price {
  font-size: 22px !important;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

/* ---------- modals ---------- */
.modal { z-index: 1080 !important; }
.modal-dialog {
  margin: 1.75rem auto;
  max-width: 600px;
}
.modal-dialog.modal-lg { max-width: 820px; }
.modal-content {
  background: linear-gradient(180deg, #0a2436 0%, #062235 100%) !important;
  border: 1px solid var(--sf-line-strong) !important;
  border-radius: var(--sf-r-lg) !important;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(30, 200, 183, 0.18) !important;
  color: var(--sf-text) !important;
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--sf-line) !important;
  padding: 18px 24px !important;
  background: linear-gradient(180deg, rgba(30, 200, 183, 0.08), transparent);
}
.modal-title { color: var(--sf-text) !important; font-weight: 700; }
.modal-body { padding: 22px 24px !important; color: var(--sf-text-soft); }
.modal-body h5 { color: var(--sf-text); font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.modal-body p { color: var(--sf-muted); }
.modal-body hr { margin: 14px 0; opacity: 0.5; }
.modal-footer {
  border-top: 1px solid var(--sf-line) !important;
  padding: 16px 24px !important;
  background: rgba(255, 255, 255, 0.02);
}
.modal-backdrop {
  z-index: 1070 !important;
  background: #03101b !important;
}
.modal-backdrop.show { opacity: 0.78 !important; }

/* ---------- chat / messages ---------- */
.chat-conversation {
  background: rgba(0, 0, 0, 0.22) !important;
  border-radius: var(--sf-r) !important;
  border: 1px solid var(--sf-line) !important;
  padding: 18px !important;
}
.chat-conversation ul {
  max-height: 540px !important;
  overflow-y: auto !important;
  padding-right: 6px;
  margin: 0;
  list-style: none;
}
.chat-conversation li { margin-bottom: 14px; }
.chat-conversation li.right { text-align: right; }
.conversation-list { display: inline-block; max-width: 80%; }
.chat-conversation li.right .conversation-list { text-align: left; }

.ctext-wrap {
  display: inline-block;
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--sf-line) !important;
  border-radius: 16px 16px 16px 4px !important;
  padding: 12px 16px !important;
  text-align: left;
  max-width: 100%;
}
li.right .ctext-wrap {
  background: linear-gradient(135deg, rgba(30, 200, 183, 0.22), rgba(14, 143, 163, 0.16)) !important;
  border-color: rgba(30, 200, 183, 0.32) !important;
  border-radius: 16px 16px 4px 16px !important;
}
.conversation-name {
  color: var(--sf-cyan) !important;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 4px;
}
li.right .conversation-name { color: #9ff6e9 !important; }
.ctext-wrap p {
  margin: 0 0 6px;
  color: var(--sf-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-time {
  color: var(--sf-muted) !important;
  font-size: 11.5px !important;
  margin: 0 !important;
}

/* tickets list */
.ticket-grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: 24px;
}
.ticket-card {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--sf-line);
  background: rgba(255, 255, 255, 0.035);
  border-radius: var(--sf-r);
  margin-bottom: 12px;
  text-decoration: none;
  color: var(--sf-text);
  transition: transform var(--sf-fast), background var(--sf-fast), border-color var(--sf-fast);
}
.ticket-card:hover {
  background: rgba(30, 200, 183, 0.08);
  border-color: rgba(30, 200, 183, 0.35);
  transform: translateX(2px);
  color: var(--sf-text);
}
.ticket-card.active {
  background: linear-gradient(135deg, rgba(30, 200, 183, 0.18), rgba(30, 200, 183, 0.05));
  border-color: rgba(30, 200, 183, 0.55);
  box-shadow: var(--sf-glow-soft);
}
.ticket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--sf-muted);
  font-size: 12.5px;
}
.ticket-title {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 8px;
}
.support-empty {
  padding: 38px 22px;
  border: 1px dashed var(--sf-line-strong);
  border-radius: var(--sf-r);
  text-align: center;
  color: var(--sf-muted);
}

/* ---------- footer ---------- */
.footer {
  background: rgba(3, 16, 27, 0.7) !important;
  border-top: 1px solid var(--sf-line) !important;
  color: var(--sf-muted) !important;
  padding: 18px 0 !important;
  position: relative;
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  font-size: 13px;
  backdrop-filter: blur(12px);
}
.footer a { color: var(--sf-text-soft); font-weight: 700; }
.footer a:hover { color: var(--sf-primary); }

/* hide unused right bar */
.right-bar, .rightbar-overlay { display: none !important; }

/* ---------- pagination + datatables ---------- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--sf-text) !important;
  border: 1px solid var(--sf-line-strong) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin-left: 8px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--sf-muted) !important; padding: 10px 0; }

.pagination { gap: 4px; }
.pagination .page-link {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--sf-line) !important;
  color: var(--sf-text-soft) !important;
  border-radius: 10px !important;
  padding: 8px 14px;
  font-weight: 700;
  transition: all var(--sf-fast);
}
.pagination .page-link:hover {
  background: rgba(30, 200, 183, 0.12) !important;
  color: #fff !important;
  border-color: rgba(30, 200, 183, 0.4) !important;
}
.page-item.active .page-link {
  background: var(--sf-grad-primary) !important;
  border-color: transparent !important;
  color: #03222b !important;
  box-shadow: 0 8px 18px rgba(30, 200, 183, 0.28);
}
.page-item.disabled .page-link {
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--sf-faint) !important;
  border-color: var(--sf-line) !important;
}

/* ---------- tabs / nav-pills (FAQ etc.) ---------- */
.nav-pills .nav-link {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sf-line);
  color: var(--sf-text-soft) !important;
  border-radius: var(--sf-r) !important;
  padding: 14px 18px;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 13.5px;
  transition: all var(--sf-fast);
}
.nav-pills .nav-link:hover {
  background: rgba(30, 200, 183, 0.08);
  color: #fff !important;
  border-color: rgba(30, 200, 183, 0.3);
}
.nav-pills .nav-link.active {
  background: linear-gradient(135deg, rgba(30, 200, 183, 0.22), rgba(30, 200, 183, 0.08)) !important;
  border-color: rgba(30, 200, 183, 0.5);
  color: #fff !important;
  box-shadow: var(--sf-glow-soft);
}
.nav-pills .nav-link .nav-icon { font-size: 22px; color: var(--sf-primary); margin-bottom: 6px; }

.nav-tabs {
  border-bottom: 1px solid var(--sf-line);
  gap: 6px;
}
.nav-tabs .nav-link {
  background: transparent;
  border: 0;
  color: var(--sf-muted) !important;
  padding: 10px 16px;
  font-weight: 700;
  border-radius: 10px 10px 0 0;
}
.nav-tabs .nav-link.active {
  background: var(--sf-grad-card);
  color: #fff !important;
  border-bottom: 2px solid var(--sf-primary) !important;
}

/* ---------- accordion (custom-accordion in FAQ) ---------- */
.accordion-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r);
  color: var(--sf-text) !important;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  transition: all var(--sf-fast);
}
.accordion-list:hover {
  background: rgba(30, 200, 183, 0.08);
  border-color: rgba(30, 200, 183, 0.35);
  color: #fff !important;
}
.accordion-list:not(.collapsed) {
  background: linear-gradient(135deg, rgba(30, 200, 183, 0.18), rgba(30, 200, 183, 0.05));
  border-color: rgba(30, 200, 183, 0.5);
  color: #fff !important;
}
.accor-plus-icon {
  background: var(--sf-grad-primary);
  color: #03222b;
  width: 32px; height: 32px;
  border-radius: var(--sf-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform var(--sf-fast);
}
.accordion-list.collapsed .accor-plus-icon { transform: rotate(-90deg); }

.custom-accordion .card-body {
  padding: 16px 20px !important;
  color: var(--sf-text-soft);
}

/* ---------- timeline (home news) — modern card list, no animations ---------- */
.verti-timeline {
  position: relative;
  padding: 4px 0 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.verti-timeline::before { content: none; }

.event-list {
  position: relative;
  padding: 16px 18px 16px 56px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r);
  transition: background var(--sf-fast), border-color var(--sf-fast), transform var(--sf-fast);
}
.event-list:hover {
  background: linear-gradient(135deg, rgba(30,200,183,0.10), rgba(30,200,183,0.02));
  border-color: rgba(30, 200, 183, 0.35);
  transform: translateX(2px);
}
.event-list .event-timeline-dot {
  position: absolute;
  left: 14px;
  top: 18px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(30,200,183,0.25), rgba(14,143,163,0.15));
  border: 1px solid rgba(30, 200, 183, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-primary);
  padding: 0;
}
.event-list .event-timeline-dot i {
  font-size: 14px !important;
  animation: none !important;
  transform: none !important;
}
.event-list h5 {
  font-size: 15px;
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--sf-text);
}
.event-list p {
  color: var(--sf-muted);
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
}
.event-list .ml-auto,
.event-list .text-muted.fs-11 {
  color: var(--sf-faint) !important;
  font-size: 12px !important;
  margin-left: auto;
}

/* kill any boxicons fade/flash animations globally on home news */
.verti-timeline .bx-fade-right,
.verti-timeline .bx-flashing,
.verti-timeline .bx-tada,
.verti-timeline .bx-spin {
  animation: none !important;
}

/* simplebar tweaks (home news scroll) */
.simplebar-scrollbar::before { background: var(--sf-primary) !important; opacity: 0.4 !important; }
.simplebar-track.simplebar-vertical { width: 7px !important; }

/* ---------- toastr ---------- */
#toast-container > div {
  border-radius: var(--sf-r) !important;
  padding: 14px 18px 14px 50px !important;
  background-color: var(--sf-glass-strong) !important;
  backdrop-filter: blur(16px);
  border: 1px solid var(--sf-line-strong);
  box-shadow: var(--sf-shadow) !important;
  opacity: 1 !important;
  background-position: 16px center !important;
}
#toast-container > .toast-success { border-left: 4px solid var(--sf-success) !important; }
#toast-container > .toast-error   { border-left: 4px solid var(--sf-danger) !important; }
#toast-container > .toast-info    { border-left: 4px solid var(--sf-info) !important; }
#toast-container > .toast-warning { border-left: 4px solid var(--sf-warning) !important; }
.toast-message { color: var(--sf-text) !important; font-weight: 600; }

/* ---------- account / auth pages ---------- */
.account-pages {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 36px 0 !important;
  position: relative;
}
.account-pages::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(30, 200, 183, 0.18), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(255, 184, 77, 0.10), transparent 32%);
  pointer-events: none;
  z-index: 0;
}
.account-pages > * { position: relative; z-index: 1; }
.account-pages .card { box-shadow: var(--sf-shadow-lg) !important; }
.account-pages .auth-logo .p-2 { padding: 6px 0 0 !important; }
.auth-pass-inputgroup .btn-light { border-radius: 0 14px 14px 0 !important; }

/* ---------- landing (index.php) ---------- */
.navigation,
.navigation.sticky {
  background: linear-gradient(180deg, rgba(3, 16, 27, 0.85), rgba(3, 16, 27, 0.55)) !important;
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--sf-line) !important;
  padding: 6px 0 !important;
  min-height: 60px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.navigation .container { display: flex; align-items: center; }
.navigation .navbar-nav .nav-link {
  color: var(--sf-text-soft) !important;
  font-weight: 700;
  font-size: 13.5px;
  border-radius: var(--sf-r-pill);
  padding: 7px 14px !important;
  margin: 0 1px;
  transition: all var(--sf-fast);
}
.navigation .navbar-nav .nav-link:hover,
.navigation .navbar-nav .nav-link.active {
  color: #fff !important;
  background: rgba(30, 200, 183, 0.18);
}
.navigation .btn { padding: 7px 16px !important; font-size: 13px !important; border-radius: 12px !important; }
.navbar-logo img {
  border-radius: 10px;
  height: 38px !important;
  width: 38px !important;
  object-fit: contain;
}

/* hero */
.hero-section,
.bg-ico-hero {
  position: relative;
  background: var(--sf-grad-hero) !important;
  padding: 220px 0 120px !important;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .hero-section,
  .bg-ico-hero { padding: 160px 0 80px !important; }
}
.hero-section::before,
.bg-ico-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 30%, rgba(30, 200, 183, 0.22), transparent 40%),
    radial-gradient(circle at 15% 85%, rgba(255, 184, 77, 0.16), transparent 40%);
  pointer-events: none;
}
.hero-section::after,
.bg-ico-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.5;
}
.hero-section .container,
.bg-ico-hero .container { position: relative; z-index: 1; }

.bg-overlay { display: none; }

.hero-title {
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
  color: #fff !important;
  margin-bottom: 22px !important;
  background: linear-gradient(135deg, #fff 0%, #b9f1ea 60%, #6ee0ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-section p,
.bg-ico-hero .text-white-50 p {
  color: var(--sf-text-soft) !important;
  font-size: 16px !important;
  line-height: 1.7;
  max-width: 580px;
}

.hero-section img,
.bg-ico-hero img {
  border-radius: var(--sf-r-xl) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(30, 200, 183, 0.2);
  transition: transform var(--sf-slow);
}
.hero-section img:hover,
.bg-ico-hero img:hover { transform: translateY(-6px); }

.section {
  padding: 80px 0 !important;
  position: relative;
}
.section.bg-white {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent) !important;
}
.section .small-title {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 800;
  color: var(--sf-primary);
  margin-bottom: 12px;
  padding: 6px 14px;
  border: 1px solid rgba(30, 200, 183, 0.35);
  border-radius: var(--sf-r-pill);
  background: rgba(30, 200, 183, 0.08);
}

.button-items .btn { margin-right: 10px; margin-bottom: 8px; }

/* owl carousel pricing */
.hori-pricing .item { padding: 0 8px; }
.hori-pricing .event-list {
  background: var(--sf-grad-card);
  border: 1px solid var(--sf-line);
  border-radius: var(--sf-r-lg);
  padding: 24px;
  text-align: center;
  transition: transform var(--sf-mid), border-color var(--sf-mid), box-shadow var(--sf-mid);
}
.hori-pricing .event-list:hover {
  transform: translateY(-6px);
  border-color: rgba(30, 200, 183, 0.5);
  box-shadow: var(--sf-glow-soft);
}
.hori-pricing .event-down-icon img {
  width: 100px !important;
  height: 100px !important;
  object-fit: cover;
  border-radius: 50%;
  margin: 12px auto;
  border: 3px solid rgba(30, 200, 183, 0.3);
}
.owl-nav button {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: var(--sf-glass) !important;
  border: 1px solid var(--sf-line-strong) !important;
  color: var(--sf-text) !important;
}

/* ---------- admin specific ---------- */
.admin-quick-nav { margin-bottom: 16px; }
.admin-quick-nav .btn { margin: 0; }

/* logs / code listings */
pre, code {
  background: rgba(0, 0, 0, 0.35) !important;
  color: #b9f1ea !important;
  border: 1px solid var(--sf-line);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- loader (full reset of loader.css quirks) ---------- */
/* neutralize broken loader.css that forces body { display:flex } and hides .main */
body { display: block !important; }
.main { opacity: 1 !important; display: block !important; }

.loader {
  position: fixed !important;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(circle at center, rgba(30, 200, 183, 0.10), transparent 60%),
    rgba(3, 16, 27, 0.92) !important;
  backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  margin: 0 !important;
}
.loader > span {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50%;
  background: var(--sf-primary) !important;
  box-shadow: 0 0 18px rgba(30, 200, 183, 0.6) !important;
  animation: sfLoaderBounce 0.9s infinite ease-in-out both;
  margin: 0 !important;
  transform: none !important;
}
.loader > span:nth-child(2) { animation-delay: 0.15s; background: var(--sf-cyan) !important; }
.loader > span:nth-child(3) { animation-delay: 0.30s; background: var(--sf-accent) !important; box-shadow: 0 0 18px rgba(255,184,77,0.6) !important; }
@keyframes sfLoaderBounce {
  0%, 80%, 100% { transform: translateY(0) scale(0.8); opacity: 0.6; }
  40% { transform: translateY(-14px) scale(1); opacity: 1; }
}

/* ---------- helpers / utilities ---------- */
.shadow-sm  { box-shadow: var(--sf-shadow-sm) !important; }
.shadow,
.shadow-md  { box-shadow: var(--sf-shadow) !important; }
.shadow-lg  { box-shadow: var(--sf-shadow-lg) !important; }
.rounded    { border-radius: var(--sf-r) !important; }
.rounded-lg { border-radius: var(--sf-r-lg) !important; }
.gap-2 { gap: 0.5rem !important; }

/* ============================================================
   ADAPTIVE / SPACING / MOBILE-MENU FIXES
   ============================================================ */

/* ---------- header (logged-in) responsive ---------- */
@media (max-width: 991.98px) {
  .navbar-header { height: 64px; padding: 0 16px !important; }
  .logo img, .header-brand-img { width: 44px !important; height: 44px !important; }
  .header-item { height: 40px; min-width: 40px; padding: 0 10px !important; }

  /* mobile collapsed: hide the topnav strip background entirely until burger is opened */
  .topnav { padding: 0 !important; background: transparent !important; border: 0 !important; }
  .topnav .navbar-collapse {
    background: linear-gradient(180deg, rgba(7,25,40,0.96), rgba(3,16,27,0.96));
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-lg);
    margin: 8px 12px 14px;
    padding: 14px 12px;
    box-shadow: var(--sf-shadow-lg);
    backdrop-filter: blur(20px) saturate(140%);
  }
  .topnav .navbar-nav { gap: 4px; align-items: stretch; width: 100%; }
  .topnav .navbar-nav .nav-link { padding: 12px 16px !important; }
  .topnav .navbar-nav .nav-item { width: 100%; }
  .topnav .dropdown-menu {
    margin: 6px 0 0 !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid var(--sf-line) !important;
    box-shadow: none !important;
  }
}

/* ---------- landing (index.php) mobile menu ---------- */
@media (max-width: 991.98px) {
  .navigation { padding: 8px 0 !important; min-height: 56px; }
  .navigation .container { flex-wrap: wrap; }
  .navbar-logo img { height: 34px !important; width: 34px !important; }
  .navigation .header-item { margin-left: auto; }

  .navigation .navbar-collapse {
    width: 100%;
    margin-top: 10px;
    background: linear-gradient(180deg, rgba(7,25,40,0.96), rgba(3,16,27,0.96));
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-r-lg);
    padding: 14px 12px !important;
    box-shadow: var(--sf-shadow-lg);
  }
  .navigation .navbar-nav { width: 100%; gap: 4px; }
  .navigation .navbar-nav .nav-link {
    padding: 12px 16px !important;
    font-size: 15px !important;
    width: 100%;
  }
  .navigation .my-2 { width: 100%; margin: 4px 0 !important; }
  .navigation .my-2 .btn { width: 100%; }
}

/* ---------- general padding / spacing polish ---------- */
.card { margin-bottom: 22px; }
.card-body { padding: 22px !important; }
@media (max-width: 575.98px) {
  .card-body { padding: 16px !important; }
  .container, .container-fluid { padding-left: 14px !important; padding-right: 14px !important; }
  .page-content { padding: 22px 0 56px !important; }
  .page-title-box { padding: 16px 18px; margin-bottom: 18px; }
  .page-title-box h4 { font-size: 18px !important; }
  h1 { font-size: 26px !important; }
  h2 { font-size: 22px !important; }
  .modal-dialog { margin: 0.6rem; }
  .modal-header, .modal-body, .modal-footer { padding: 16px 18px !important; }
  .btn { padding: 10px 16px !important; }
}

/* row gutters consistency */
.row { --bs-gutter-x: 1.4rem; }
@media (max-width: 575.98px) { .row { --bs-gutter-x: 0.9rem; } }

/* footer tighter on mobile */
@media (max-width: 575.98px) {
  footer { padding: 18px 0 !important; font-size: 13px; }
}

/* prevent double scrollbar from body fixed background on iOS */
html { overflow-x: hidden; }

/* form spacing tweaks */
.form-control, .form-select { padding: 11px 14px !important; }
.mb-3 { margin-bottom: 1rem !important; }

/* table cell padding tighter on mobile */
@media (max-width: 575.98px) {
  .table > :not(caption) > * > * { padding: 10px 8px !important; font-size: 13px; }
}

/* override loader.css inline rules that leak globally */
body > .loader ~ * { opacity: 1 !important; }

.gap-3 { gap: 0.75rem !important; }
.w100 { width: 100%; }
.w200 { width: 100%; }
.font-weight-extra-bold { font-weight: 800 !important; }
.font-weight-semibold { font-weight: 600 !important; }
.text-sans-serif { font-family: "Space Grotesk", sans-serif; }
.menu__item-tel { color: var(--sf-cyan); font-weight: 700; }

/* hide stuff that should be hidden */
.simplebar-track.simplebar-horizontal { display: none !important; }
.simplebar-placeholder { display: none !important; }

/* fade-in for cards (subtle entrance) */
@keyframes sfFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card, .plan-box, .mini-stats-wid {
  animation: sfFadeIn 0.5s var(--sf-ease) both;
}

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
  .ticket-grid { grid-template-columns: 1fr; }
  .plan-features img { height: 200px !important; }
}

@media (max-width: 991.98px) {
  .navbar-header {
    height: auto;
    min-height: 70px;
    padding: 12px 16px !important;
  }
  .topnav { padding: 0; }
  .topnav .navbar-collapse {
    padding: 14px 16px;
    background: var(--sf-glass-strong);
    border-radius: var(--sf-r-lg);
    margin: 12px;
    border: 1px solid var(--sf-line);
    backdrop-filter: blur(20px);
  }
  .topnav .navbar-nav {
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }
  .topnav .navbar-nav .nav-link {
    border-radius: var(--sf-r);
    padding: 12px 16px !important;
    width: 100%;
  }
  .topnav .dropdown-menu {
    position: static !important;
    transform: none !important;
    width: 100%;
    box-shadow: none !important;
    margin: 6px 0 !important;
    background: rgba(0, 0, 0, 0.2) !important;
  }
  .page-content { padding: 24px 0 56px !important; }
  .card-body { padding: 20px !important; }
  .card-header { padding: 16px 20px !important; }
  .page-title-box { padding: 18px 20px; }
  .page-title-box h4 { font-size: 19px !important; }
  .table-responsive table { min-width: 720px; }
  .hero-section, .bg-ico-hero { padding: 100px 0 70px !important; }
  .hero-section img, .bg-ico-hero img { margin-top: 36px; max-width: 100%; }
  .section { padding: 60px 0 !important; }
}

@media (max-width: 575.98px) {
  .container, .container-fluid {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .page-title-box {
    display: block !important;
    padding: 16px 18px;
  }
  .page-title-box h4 { margin-bottom: 10px; font-size: 18px !important; }
  .card-body { padding: 18px !important; }
  .card-header { padding: 14px 18px !important; }
  .btn { padding: 11px 16px !important; font-size: 13.5px !important; }
  .d-grid .btn { width: 100%; }
  .navbar-brand-box .logo-lg img,
  .navbar-brand-box .header-brand-img,
  .logo img {
    width: 44px !important;
    height: 44px !important;
  }
  .header-item { padding: 0 10px !important; height: 40px; min-width: 40px; }
  .ctext-wrap { max-width: 100%; }
  .conversation-list { max-width: 100%; }
  .mini-stats-wid h4 { font-size: 24px !important; }
  .plan-features img { height: 180px !important; }
  .footer .row > * { text-align: center !important; margin-bottom: 4px; }
  .footer .text-sm-end { text-align: center !important; }
  .nav-pills .nav-link { padding: 12px 14px; }
}


/* === Patch 2026-05: unified frontend fixes === */
html, body { min-height: 100%; }
body { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; }
.loader { display: none !important; }
.main { display: flex !important; flex-direction: column !important; min-height: 100vh !important; opacity: 1 !important; width: 100% !important; }
#layout-wrapper { min-height: 100vh !important; display: flex !important; flex-direction: column !important; width: 100% !important; }
.main-content { flex: 1 0 auto !important; min-height: auto !important; }
.footer { flex-shrink: 0 !important; position: static !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; margin-top: auto !important; }

.navbar-brand-box, .navbar-brand-box .logo, .logo-lg, .logo-sm { display: flex !important; align-items: center !important; justify-content: center !important; }
.navbar-brand-box .logo { height: 100% !important; }
.logo-lg { position: static !important; transform: none !important; }
.header-brand-img { object-fit: contain !important; display: block !important; }

.noti-icon { position: relative !important; overflow: visible !important; }
.cart-indicator-wrap { position: absolute !important; top: 10px !important; right: 10px !important; width: 10px !important; height: 10px !important; display: block !important; }
.cart-dot { width: 10px !important; height: 10px !important; border-radius: 999px !important; display: block !important; background: #2dd4bf !important; box-shadow: 0 0 0 3px rgba(45,212,191,.18) !important; }
.empty-cart-icon { font-size: 86px !important; color: rgba(45,212,191,.75) !important; }

.form-control, .form-select, select, textarea, input[type="text"], input[type="password"], input[type="email"], input[type="number"] { box-sizing: border-box !important; border: 1px solid rgba(148,163,184,.34) !important; background-color: rgba(15,23,42,.74) !important; color: #e5eefb !important; }
.form-control:focus, .form-select:focus, select:focus, textarea:focus { border-color: rgba(45,212,191,.9) !important; box-shadow: 0 0 0 .2rem rgba(45,212,191,.14) !important; }
select option { color: #0f172a !important; background: #ffffff !important; }
.form-check { display: flex !important; align-items: center !important; gap: 9px !important; min-height: 24px !important; padding-left: 0 !important; }
.form-check-input { position: static !important; float: none !important; margin: 0 !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; border: 1px solid rgba(148,163,184,.75) !important; background-color: rgba(15,23,42,.8) !important; }
.form-check-input:checked { background-color: #2dd4bf !important; border-color: #2dd4bf !important; }
.form-check-label { margin: 0 !important; line-height: 1.35 !important; }

.auth-page .btn[type="submit"], form .btn-login, #loginBtn { display: inline-flex !important; justify-content: center !important; align-items: center !important; margin-left: auto !important; margin-right: auto !important; }
.login-card form .btn, .account-pages form button[type="submit"] { display: flex !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; }

.news-item, .news-card { border-left: 0 !important; background: linear-gradient(135deg, rgba(14,165,233,.13), rgba(45,212,191,.08)) !important; border: 1px solid rgba(45,212,191,.16) !important; border-radius: 20px !important; }
.news-item:hover, .news-card:hover { transform: translateY(-2px); border-color: rgba(45,212,191,.35) !important; }

.cart-summary, .cart-order-summary, #dYPoBz { margin-top: 16px !important; }
#dYPoBz tr td, #dYPoBz tr th { padding: 12px 10px !important; }
.cartList .col-xl-4, .cart-summary-col { padding-left: 18px !important; }
@media (max-width: 1199.98px) { .cartList .col-xl-4, .cart-summary-col { padding-left: 12px !important; margin-top: 18px !important; } }

.ticket-header-row { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: 16px !important; }
.ticket-meta-row { margin-top: 12px !important; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.ticket-close-action { margin-left: auto !important; }
.qr-code, .authenticator-qr, img[src*="quickchart.io/qr"] { margin-top: 18px !important; margin-bottom: 18px !important; display: block !important; }

.table-responsive { width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 18px !important; }
.table { width: 100% !important; max-width: 100% !important; }
.dataTables_wrapper { width: 100% !important; overflow: hidden !important; }
.dataTables_wrapper .row { align-items: center !important; row-gap: 12px !important; }
.dataTables_filter { text-align: right !important; max-width: 100% !important; }
.dataTables_filter label { width: 100% !important; max-width: 360px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
.dataTables_filter input { max-width: 240px !important; width: 100% !important; margin-left: 0 !important; }
.dataTables_length label { display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.dataTables_length select { min-width: 72px !important; }
@media (max-width: 767.98px) { .dataTables_filter, .dataTables_length { text-align: left !important; } .dataTables_filter label { max-width: 100% !important; } .dataTables_filter input { max-width: none !important; } .table-responsive table { min-width: 680px !important; } }

.admin-main #layout-wrapper { min-height: 100vh !important; }
.admin-main .main-content, .admin-main .page-content { flex: 1 0 auto !important; }
.admin-main .footer { margin-top: auto !important; }

.bootstrap-touchspin-up, .btn-plus, .btn-minus { min-width: 42px !important; }
.input-group { flex-wrap: nowrap !important; }

@media (max-width: 575.98px) {
  .navbar-header { min-height: 62px !important; }
  .cart-indicator-wrap { top: 7px !important; right: 7px !important; }
  .ticket-header-row { flex-direction: column !important; }
  .ticket-close-action { margin-left: 0 !important; width: 100% !important; }
}


/* === Patch 2026-05-12: hard layout cleanup after visual QA === */
/* Remove broken decorative/ripple layers in the header. */
body::before,
.waves-ripple,
.waves-effect .waves-ripple {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

html,
body {
  min-height: 100% !important;
}
body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}
.main {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  opacity: 1 !important;
  width: 100% !important;
}
#layout-wrapper {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  width: 100% !important;
}
.main-content {
  flex: 1 0 auto !important;
  min-height: auto !important;
}
.footer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: auto !important;
  flex-shrink: 0 !important;
}
.footer .container-fluid {
  max-width: 1340px !important;
  width: 100% !important;
}
.admin-main,
.admin-main #layout-wrapper {
  min-height: 100vh !important;
}
.admin-main .footer {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Header/logo: desktop and mobile logo must never be visible at the same time. */
.navbar-brand-box {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 72px !important;
  padding: 0 14px 0 0 !important;
}
.navbar-brand-box .logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  line-height: 1 !important;
}
.navbar-brand-box .logo-lg {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  transform: none !important;
}
.navbar-brand-box .logo-sm {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
}
.navbar-brand-box img,
.header-brand-img {
  display: block !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}
.logo:hover img {
  transform: none !important;
}
@media (max-width: 575.98px) {
  .navbar-brand-box {
    height: 62px !important;
    padding-right: 8px !important;
  }
  .navbar-brand-box .logo-lg {
    display: none !important;
  }
  .navbar-brand-box .logo-sm {
    display: flex !important;
  }
}

/* Dropdown arrows: keep them visible and stable. */
.topnav .arrow-down {
  display: inline-flex !important;
  width: 10px !important;
  height: 10px !important;
  margin-left: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}
.topnav .arrow-down::after {
  content: "" !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border: solid currentColor !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) translateY(-2px) !important;
  opacity: .8 !important;
}
.topnav .nav-item.dropdown.active .arrow-down::after,
.topnav .nav-item.dropdown.show .arrow-down::after {
  transform: rotate(-135deg) translateY(-1px) !important;
}

/* Cart indicator and cart page. */
.noti-icon {
  position: relative !important;
  overflow: visible !important;
}
.cart-indicator-wrap {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 10px !important;
  height: 10px !important;
  display: block !important;
  pointer-events: none !important;
}
.cart-dot {
  width: 10px !important;
  height: 10px !important;
  display: block !important;
  border-radius: 999px !important;
  background: #34f5cf !important;
  box-shadow: 0 0 0 3px rgba(52,245,207,.18), 0 0 18px rgba(52,245,207,.55) !important;
}
.cart-page-layout {
  row-gap: 24px !important;
}
.cart-page-layout .cart-summary-card {
  margin-left: 18px !important;
}
.cart-summary-card .card-body {
  padding: 24px !important;
}
.cart-summary-table {
  margin-top: 2px !important;
}
.cart-summary-table td,
.cart-summary-table th,
#dYPoBz td,
#dYPoBz th {
  padding: 14px 12px !important;
}
.cart-product-image,
.cart-table .avatar-md {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  padding: 3px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  box-shadow: none !important;
}
.cart-qty-control {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 130px !important;
}
.cart-qty-control .form-control {
  width: 52px !important;
  min-width: 52px !important;
  text-align: center !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.empty-cart-box {
  padding: 34px 16px !important;
  text-align: center !important;
}
.empty-cart-icon {
  font-size: 68px !important;
  color: rgba(52,245,207,.72) !important;
}
@media (max-width: 1199.98px) {
  .cart-page-layout .cart-summary-card {
    margin-left: 0 !important;
  }
}
@media (max-width: 575.98px) {
  .cart-product-image,
  .cart-table .avatar-md {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 12px !important;
  }
  .cart-qty-control {
    min-width: 118px !important;
  }
  .cart-actions-row .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Forms/selects/checkboxes: readable, stable, no repeated select arrows. */
.form-control,
.form-select,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
  box-sizing: border-box !important;
  border: 1px solid rgba(148,163,184,.38) !important;
  background-color: rgba(15,23,42,.78) !important;
  color: #e5eefb !important;
  min-height: 44px !important;
}
.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus {
  border-color: rgba(45,212,191,.92) !important;
  box-shadow: 0 0 0 .2rem rgba(45,212,191,.14) !important;
}
.form-select,
select.form-control,
select {
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  padding-right: 36px !important;
}
select option,
.form-select option {
  color: #0f172a !important;
  background-color: #ffffff !important;
}
.form-check,
.form-checkbox-outline {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 24px !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.form-check .form-check-input,
.form-check-input {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(148,163,184,.75) !important;
  background-color: rgba(15,23,42,.85) !important;
  vertical-align: middle !important;
}
.form-check-input:checked {
  background-color: #2dd4bf !important;
  border-color: #2dd4bf !important;
}
.form-check-label,
.form-check label {
  margin: 0 !important;
  line-height: 1.35 !important;
  color: var(--sf-text-soft) !important;
}

/* Auth pages. */
.account-pages .card {
  max-width: 100% !important;
}
.account-pages form .btn[type="submit"] {
  width: 100% !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.auth-actions,
.register-actions {
  width: 100% !important;
}
.auth-tos {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
}
.auth-pass-inputgroup .form-control {
  border-right-width: 1px !important;
  border-top-right-radius: 14px !important;
  border-bottom-right-radius: 14px !important;
}
.auth-pass-inputgroup .btn-light + .form-control,
.auth-pass-inputgroup .form-control + .btn-light {
  border-left: 0 !important;
}

/* Tickets. */
.ticket-header-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin-bottom: 0 !important;
}
.ticket-title-block {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.ticket-meta-row {
  margin-top: 14px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.ticket-close-action {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  text-align: right !important;
}
@media (max-width: 575.98px) {
  .ticket-header-row {
    flex-direction: column !important;
  }
  .ticket-close-action {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }
}

/* Profile cards. */
.profile-2fa-card .card-body {
  padding: 28px !important;
}
.profile-2fa-grid {
  align-items: center !important;
  row-gap: 24px !important;
}
.profile-2fa-qr {
  display: block !important;
  max-width: 190px !important;
  margin: 0 auto 18px auto !important;
}
.profile-settings-card .card-body {
  padding-bottom: 14px !important;
}
.profile-settings-card .card-footer {
  margin-top: 0 !important;
  padding-top: 16px !important;
}
.profile-settings-card .btn[type="submit"] {
  min-width: 180px !important;
}
@media (max-width: 575.98px) {
  .profile-settings-card .btn[type="submit"] {
    width: 100% !important;
  }
}

/* DataTables and admin tables. */
.dataTables_wrapper {
  width: 100% !important;
  overflow: visible !important;
}
.dataTables_wrapper > .row:first-child,
.dataTables_wrapper > .row:last-child {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  row-gap: 14px !important;
  align-items: center !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  padding-top: 8px !important;
  padding-bottom: 12px !important;
}
.dataTables_wrapper .dataTables_length {
  padding-left: 8px !important;
}
.dataTables_wrapper .dataTables_filter {
  padding-right: 8px !important;
  text-align: right !important;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
}
.dataTables_wrapper .dataTables_filter input {
  width: min(260px, 100%) !important;
  margin-left: 0 !important;
}
.dataTables_wrapper .dataTables_length select {
  min-width: 76px !important;
}
.table-responsive {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.table-responsive > .table,
.table-responsive table {
  margin-bottom: 0 !important;
}
.admin-table-card,
.admin-products-page .card,
.orders-page .card {
  width: 100% !important;
}
.admin-products-page .container-fluid,
.orders-page .container-fluid {
  max-width: 100% !important;
}
.orders-table th,
.orders-table td {
  vertical-align: middle !important;
  white-space: nowrap !important;
}
.orders-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}
.orders-actions .btn {
  margin: 0 !important;
}
@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length {
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
  }
  .table-responsive table:not(.cart-summary-table) {
    min-width: 720px !important;
  }
}

/* Tab buttons: always show readable text, not empty icon-only tabs. */
.nav-tabs .nav-link .d-none.d-sm-block,
.nav-pills .nav-link .d-none.d-sm-block {
  display: inline-block !important;
}
.nav-tabs .nav-link .d-block.d-sm-none,
.nav-pills .nav-link .d-block.d-sm-none {
  display: none !important;
}
.nav-tabs .nav-link,
.nav-pills .nav-link {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Admin product creation page should use full width. */
.admin-products-page .product-form-col {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Final sticky-footer correction: footer is outside #layout-wrapper in templates. */
.main > #layout-wrapper,
#layout-wrapper {
  flex: 1 0 auto !important;
  min-height: 0 !important;
}

/* === Header cart button: isolated style without Bootstrap .btn / Waves === */
.header-cart-button {
  position: relative !important;
  width: 64px !important;
  height: 48px !important;
  min-width: 64px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(45, 212, 191, 0.42) !important;
  border-radius: 18px !important;
  background: rgba(8, 37, 48, 0.92) !important;
  color: #e8fbff !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease !important;
}
.header-cart-button::before,
.header-cart-button::after {
  content: none !important;
  display: none !important;
}
.header-cart-button:hover,
.header-cart-button:focus {
  background: rgba(10, 55, 68, 0.96) !important;
  border-color: rgba(45, 212, 191, 0.78) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}
.header-cart-button:active {
  transform: translateY(0) !important;
}
.header-cart-button i {
  position: static !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}
.header-cart-button .cart-indicator-wrap {
  position: absolute !important;
  top: 6px !important;
  right: 7px !important;
  width: 14px !important;
  height: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
.header-cart-button .cart-indicator-wrap:empty {
  display: none !important;
}
.header-cart-button .cart-dot {
  position: relative !important;
  width: 10px !important;
  height: 10px !important;
  display: block !important;
  border-radius: 999px !important;
  background: #34f5cf !important;
  border: 2px solid rgba(6, 28, 38, .98) !important;
  box-shadow: 0 0 0 0 rgba(52, 245, 207, .55), 0 0 10px rgba(52, 245, 207, .75) !important;
  animation: cartDotPulse 1.15s ease-in-out infinite !important;
}
@keyframes cartDotPulse {
  0% {
    opacity: .55;
    transform: scale(.82);
    box-shadow: 0 0 0 0 rgba(52, 245, 207, .55), 0 0 6px rgba(52, 245, 207, .45);
  }
  45% {
    opacity: 1;
    transform: scale(1.08);
    box-shadow: 0 0 0 5px rgba(52, 245, 207, .16), 0 0 14px rgba(52, 245, 207, .95);
  }
  100% {
    opacity: .65;
    transform: scale(.9);
    box-shadow: 0 0 0 8px rgba(52, 245, 207, 0), 0 0 8px rgba(52, 245, 207, .55);
  }
}
@media (max-width: 575.98px) {
  .header-cart-button {
    width: 52px !important;
    min-width: 52px !important;
    height: 42px !important;
    border-radius: 15px !important;
  }
  .header-cart-button i {
    font-size: 18px !important;
  }
  .header-cart-button .cart-indicator-wrap {
    top: 5px !important;
    right: 6px !important;
    width: 13px !important;
    height: 13px !important;
  }
  .header-cart-button .cart-dot {
    width: 9px !important;
    height: 9px !important;
  }
}

/* === FINAL FIX: clean cart indicator, no stretched oval / no ugly blob === */
.header-cart-button > .cart-indicator-wrap {
  position: absolute !important;
  top: 7px !important;
  right: 8px !important;
  width: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  height: 12px !important;
  min-height: 12px !important;
  max-height: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  line-height: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 20 !important;
}

.header-cart-button > .cart-indicator-wrap:empty {
  display: none !important;
}

.header-cart-button > .cart-indicator-wrap > .cart-dot {
  position: absolute !important;
  inset: 0 !important;
  width: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  height: 12px !important;
  min-height: 12px !important;
  max-height: 12px !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 999px !important;
  background: #37f3d0 !important;
  border: 2px solid #06202b !important;
  outline: 1px solid rgba(55, 243, 208, .25) !important;
  box-shadow: 0 0 8px rgba(55, 243, 208, .55) !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: cartDotBlinkClean 1.25s ease-in-out infinite !important;
}

.header-cart-button > .cart-indicator-wrap > .cart-dot::before,
.header-cart-button > .cart-indicator-wrap > .cart-dot::after {
  content: "" !important;
  position: absolute !important;
  inset: -5px !important;
  display: block !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1px solid rgba(55, 243, 208, .38) !important;
  box-shadow: none !important;
  opacity: 0 !important;
  transform: scale(.65) !important;
  pointer-events: none !important;
}

.header-cart-button > .cart-indicator-wrap > .cart-dot::after {
  animation: cartDotRingClean 1.25s ease-out infinite !important;
}

@keyframes cartDotBlinkClean {
  0%, 100% {
    opacity: .72;
    box-shadow: 0 0 5px rgba(55, 243, 208, .35) !important;
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 11px rgba(55, 243, 208, .85) !important;
  }
}

@keyframes cartDotRingClean {
  0% {
    opacity: .5;
    transform: scale(.55) !important;
  }
  70% {
    opacity: 0;
    transform: scale(1.35) !important;
  }
  100% {
    opacity: 0;
    transform: scale(1.35) !important;
  }
}

@media (max-width: 575.98px) {
  .header-cart-button > .cart-indicator-wrap {
    top: 6px !important;
    right: 7px !important;
    width: 11px !important;
    min-width: 11px !important;
    max-width: 11px !important;
    height: 11px !important;
    min-height: 11px !important;
    max-height: 11px !important;
  }
  .header-cart-button > .cart-indicator-wrap > .cart-dot {
    width: 11px !important;
    min-width: 11px !important;
    max-width: 11px !important;
    height: 11px !important;
    min-height: 11px !important;
    max-height: 11px !important;
  }
}

/* =========================================================
   FAQ / ЧаВО section alignment
   Работает только для блока <section id="faq">
   ========================================================= */

#faq {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}

#faq .container {
    max-width: 1180px;
}

/* Верхний заголовок ЧаВО / Вопросы и ответы */
#faq .text-center.mb-5 {
    margin-bottom: 34px !important;
}

#faq .small-title {
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
}

#faq h4 {
    line-height: 1.35 !important;
}

/* Левая колонка с кнопками */
#faq .vertical-nav {
    width: 100%;
}

#faq .vertical-nav > .row {
    align-items: flex-start !important;
}

#faq .vertical-nav .nav.flex-column {
    gap: 12px;
}

/* Кнопки слева */
#faq .vertical-nav .nav-pills .nav-link {
    min-height: 118px;
    padding: 22px 14px !important;
    border-radius: 22px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    line-height: 1.25 !important;
}

/* Иконки в левых кнопках */
#faq .vertical-nav .nav-pills .nav-link .nav-icon,
#faq .vertical-nav .nav-pills .nav-link i {
    margin-bottom: 10px !important;
    font-size: 28px !important;
    line-height: 1 !important;
}

/* Текст в левых кнопках */
#faq .vertical-nav .nav-pills .nav-link p {
    margin: 0 !important;
    line-height: 1.25 !important;
    font-size: 14px !important;
}

/* Правая карточка */
#faq .card {
    margin: 0 !important;
    border-radius: 26px !important;
    overflow: hidden;
}

/* Внутренний отступ карточки справа */
#faq .card > .card-body {
    padding: 30px 32px 34px 32px !important;
}

/* Заголовки внутри вкладок: Как оформить заказ / Условия доставки / Возврат товара */
#faq .tab-pane > .card-title,
#faq .tab-pane > h4.card-title {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    padding-top: 0 !important;

    line-height: 1.35 !important;
    font-size: 22px !important;
}

/* Аккордеон */
#faq .custom-accordion {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Убираем bootstrap mb-3, чтобы gap управлял расстоянием */
#faq .custom-accordion > .mb-3 {
    margin-bottom: 0 !important;
}

/* Кнопка аккордеона */
#faq .accordion-list {
    min-height: 74px;
    padding: 22px 28px !important;
    border-radius: 22px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px;

    text-decoration: none !important;
    line-height: 1.35 !important;
}

/* Текст внутри кнопки аккордеона */
#faq .accordion-list > div {
    line-height: 1.35 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

/* Иконка плюс/минус справа */
#faq .accordion-list .accor-plus-icon {
    flex: 0 0 auto;
    margin-left: 16px !important;
    line-height: 1 !important;
    font-size: 20px !important;
}

/* Раскрытый текст */
#faq .collapse .card-body,
#faq .collapsing .card-body {
    padding: 18px 28px 24px 28px !important;
}

/* Абзацы внутри раскрытого текста */
#faq .collapse .card-body p,
#faq .collapsing .card-body p {
    margin-bottom: 12px !important;
    line-height: 1.65 !important;
    font-size: 15px !important;
}

#faq .collapse .card-body p:last-child,
#faq .collapsing .card-body p:last-child {
    margin-bottom: 0 !important;
}

/* =========================================================
   Планшеты
   ========================================================= */

@media (max-width: 991.98px) {
    #faq {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    #faq .text-center.mb-5 {
        margin-bottom: 28px !important;
    }

    #faq .vertical-nav > .row {
        row-gap: 20px;
    }

    #faq .vertical-nav .nav.flex-column {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 18px !important;
    }

    #faq .vertical-nav .nav-pills .nav-link {
        min-height: 104px;
        padding: 18px 10px !important;
    }

    #faq .card > .card-body {
        padding: 26px 24px 30px 24px !important;
    }

    #faq .tab-pane > .card-title,
    #faq .tab-pane > h4.card-title {
        margin-bottom: 22px !important;
        font-size: 21px !important;
    }
}

/* =========================================================
   Телефон
   ========================================================= */

@media (max-width: 575.98px) {
    #faq {
        padding-top: 42px !important;
        padding-bottom: 42px !important;
    }

    #faq .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #faq .text-center.mb-5 {
        margin-bottom: 22px !important;
    }

    #faq .small-title {
        margin-bottom: 6px !important;
    }

    #faq .text-center h4 {
        font-size: 21px !important;
        line-height: 1.3 !important;
    }

    #faq .vertical-nav .nav.flex-column {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 16px !important;
    }

    #faq .vertical-nav .nav-pills .nav-link {
        min-height: auto;
        padding: 16px 18px !important;
        border-radius: 18px !important;

        flex-direction: row !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    #faq .vertical-nav .nav-pills .nav-link .nav-icon,
    #faq .vertical-nav .nav-pills .nav-link i {
        margin-bottom: 0 !important;
        margin-right: 12px !important;
        font-size: 24px !important;
    }

    #faq .vertical-nav .nav-pills .nav-link p {
        font-size: 15px !important;
    }

    #faq .card {
        border-radius: 22px !important;
    }

    #faq .card > .card-body {
        padding: 22px 18px 24px 18px !important;
    }

    #faq .tab-pane > .card-title,
    #faq .tab-pane > h4.card-title {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
        font-size: 20px !important;
    }

    #faq .custom-accordion {
        gap: 12px;
    }

    #faq .accordion-list {
        min-height: auto;
        padding: 18px 18px !important;
        border-radius: 18px !important;
        gap: 12px;
    }

    #faq .accordion-list > div {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    #faq .accordion-list .accor-plus-icon {
        margin-left: 8px !important;
        font-size: 18px !important;
    }

    #faq .collapse .card-body,
    #faq .collapsing .card-body {
        padding: 14px 18px 20px 18px !important;
    }

    #faq .collapse .card-body p,
    #faq .collapsing .card-body p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* =========================================================
   Landing navbar redesign
   ========================================================= */

.landing-navbar {
    min-height: 82px !important;
    padding: 10px 0 !important;
    background: rgba(5, 22, 32, 0.88) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(125, 249, 255, 0.14);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
    z-index: 1050;
}

.landing-navbar-container {
    display: flex;
    align-items: center;
    min-height: 62px;
}

.landing-navbar-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    text-decoration: none !important;
}

.landing-logo {
    display: block;
    width: auto;
    height: 58px;
    object-fit: contain;
}

.landing-navbar-collapse {
    align-items: center;
    justify-content: flex-end !important;
}

.landing-navbar-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 18px;
}

.landing-navbar-menu .nav-item {
    display: flex;
    align-items: center;
}

.landing-nav-link {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 10px 17px !important;
    border-radius: 999px;

    color: rgba(232, 247, 255, 0.78) !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.landing-nav-link:hover {
    color: #ffffff !important;
    background: rgba(44, 214, 226, 0.10);
    box-shadow: inset 0 0 0 1px rgba(116, 255, 248, 0.18);
}

.landing-nav-link.active {
    color: #031923 !important;
    background: linear-gradient(135deg, #70fff1 0%, #22c8d7 100%) !important;
    box-shadow:
        0 12px 26px rgba(34, 200, 215, 0.26),
        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.landing-nav-link.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #70fff1;
    transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(112, 255, 241, 0.9);
}

.landing-navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.landing-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 10px 18px;
    border-radius: 999px;

    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.landing-auth-login {
    color: #dffaff !important;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(143, 238, 255, 0.22);
}

.landing-auth-login:hover {
    color: #ffffff !important;
    background: rgba(143, 238, 255, 0.10);
    border-color: rgba(143, 238, 255, 0.42);
}

.landing-auth-register {
    color: #031923 !important;
    background: linear-gradient(135deg, #70fff1 0%, #21c4d6 100%);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow: 0 12px 26px rgba(34, 200, 215, 0.22);
}

.landing-auth-register:hover {
    color: #031923 !important;
    box-shadow: 0 16px 32px rgba(34, 200, 215, 0.32);
    transform: translateY(-1px);
}

/* Бургер */
.landing-navbar-burger {
    width: 44px;
    height: 44px;
    margin-left: auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(143, 238, 255, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    color: #e8f7ff;
    font-size: 18px;
    line-height: 1;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.landing-navbar-burger:hover {
    background: rgba(143, 238, 255, 0.10);
    border-color: rgba(143, 238, 255, 0.42);
    color: #ffffff;
}

/* Чтобы якорь не прятался под fixed navbar */
#home,
#features,
#pricing,
#faq {
    scroll-margin-top: 96px;
}

/* =========================================================
   Mobile navbar
   ========================================================= */

@media (max-width: 991.98px) {
    .landing-navbar {
        min-height: 76px !important;
        padding: 8px 0 !important;
    }

    .landing-logo {
        height: 52px;
    }

    .landing-navbar-collapse {
        width: 100%;
        margin-top: 12px;
        padding: 14px;

        background: rgba(6, 25, 36, 0.96);
        border: 1px solid rgba(143, 238, 255, 0.16);
        border-radius: 22px;
        box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32);
    }

    .landing-navbar-menu {
        width: 100%;
        margin: 0 0 12px 0 !important;
        gap: 8px;
    }

    .landing-navbar-menu .nav-item {
        width: 100%;
    }

    .landing-nav-link {
        width: 100%;
        min-height: 46px;
        justify-content: flex-start;
        padding: 14px 16px !important;
        border-radius: 16px;
        font-size: 15px;
    }

    .landing-nav-link.active::after {
        left: auto;
        right: 16px;
        bottom: 50%;
        transform: translateY(50%);
    }

    .landing-navbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .landing-auth-btn {
        width: 100%;
        min-height: 46px;
        border-radius: 16px;
    }
}

@media (max-width: 575.98px) {
    .landing-navbar-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .landing-logo {
        height: 48px;
    }

    .landing-navbar-burger {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .landing-navbar-actions {
        grid-template-columns: 1fr;
    }
}

/* ===== Landing navbar active state FORCE ===== */

.landing-navbar .landing-nav-link {
    color: rgba(232, 247, 255, 0.75) !important;
    background: transparent !important;
    border-radius: 999px !important;
}

.landing-navbar .landing-nav-link.is-active,
.landing-navbar .landing-nav-link.active {
    color: #031923 !important;
    background: linear-gradient(135deg, #70fff1 0%, #22c8d7 100%) !important;
    box-shadow:
        0 12px 26px rgba(34, 200, 215, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.35) !important;
}

.landing-navbar .landing-nav-link.is-active::after,
.landing-navbar .landing-nav-link.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #70fff1;
    transform: translateX(-50%);
    box-shadow: 0 0 14px rgba(112, 255, 241, 0.95);
}

/* Hero section spacing */
#home.hero-section {
    padding-top: 160px !important;
    padding-bottom: 90px !important;
}

@media (max-width: 991.98px) {
    #home.hero-section {
        padding-top: 130px !important;
        padding-bottom: 70px !important;
    }
}

@media (max-width: 575.98px) {
    #home.hero-section {
        padding-top: 115px !important;
        padding-bottom: 55px !important;
    }
}

/* =========================================================
   Products / pricing carousel fixes
   ========================================================= */

#pricing {
    padding-top: 76px !important;
    padding-bottom: 88px !important;
    overflow: hidden;
}

#pricing .container {
    max-width: 1180px;
}

#pricing .text-center.mb-5 {
    margin-bottom: 36px !important;
}

#pricing .row.mt-4 {
    margin-top: 0 !important;
}

/* Даём место сверху, чтобы hover-карточка не обрезалась */
#pricing .hori-pricing {
    padding-top: 28px !important;
    padding-bottom: 16px !important;
    overflow: visible !important;
}

/* Owl по умолчанию режет hover. Разрешаем показывать поднятую карточку */
#pricing .owl-carousel,
#pricing .owl-stage-outer,
#pricing .owl-stage,
#pricing .owl-item {
    overflow: visible !important;
}

/* Отступы между карточками */
#pricing .owl-item {
    padding: 8px 12px 18px 12px !important;
}

/* Сама карточка товара */
#pricing .event-list {
    position: relative;
    min-height: 360px;
    padding: 28px 22px 26px 22px !important;
    border-radius: 28px !important;
    background: rgba(13, 45, 58, 0.92) !important;
    border: 1px solid rgba(129, 245, 255, 0.18) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
    overflow: visible !important;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

/* Верхняя подсветка карточки */
#pricing .event-list::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #6ffff0, transparent);
    opacity: 0;
    transform: translateY(-1px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Hover теперь не обрезает рамку */
#pricing .event-list:hover {
    transform: translateY(-8px);
    border-color: rgba(111, 255, 240, 0.46) !important;
    box-shadow:
        0 26px 60px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(111, 255, 240, 0.12);
}

#pricing .event-list:hover::before {
    opacity: 1;
    transform: translateY(-7px);
}

/* Цена */
#pricing .event-date .text-primary {
    margin-bottom: 10px !important;
    color: #70fff1 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

/* Название товара */
#pricing .event-date h5 {
    min-height: 48px;
    margin-bottom: 18px !important;
    color: #f1fbff !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
}

/* Блок картинки */
#pricing .event-down-icon {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 128px;
    margin: 10px 0 18px 0 !important;
}

/* Картинка товара. Старый width="5%" перебиваем */
#pricing .event-down-icon p {
    width: 100%;
    margin: 0 0 12px 0 !important;
    text-align: center;
}

#pricing .event-down-icon img {
    width: 128px !important;
    height: 96px !important;
    object-fit: contain !important;
    display: inline-block !important;
    border-radius: 16px;
}

/* Иконка перехода */
#pricing .down-arrow-icon {
    font-size: 34px !important;
    color: #70fff1 !important;
    transition: transform 0.2s ease, color 0.2s ease;
}

#pricing .event-list:hover .down-arrow-icon {
    transform: translateY(2px);
    color: #ffffff !important;
}

/* Характеристики */
#pricing .event-list .mt-3.px-3 {
    margin-top: 18px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    color: rgba(232, 247, 255, 0.82) !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
}

#pricing .event-list .mdi-check {
    margin-right: 6px;
}

/* На телефоне hover почти не нужен, делаем спокойнее */
@media (max-width: 991.98px) {
    #pricing {
        padding-top: 62px !important;
        padding-bottom: 72px !important;
    }

    #pricing .hori-pricing {
        padding-top: 18px !important;
    }

    #pricing .event-list {
        min-height: 340px;
    }

    #pricing .event-list:hover {
        transform: translateY(-4px);
    }

    #pricing .event-list:hover::before {
        transform: translateY(-4px);
    }
}

@media (max-width: 575.98px) {
    #pricing {
        padding-top: 48px !important;
        padding-bottom: 60px !important;
    }

    #pricing .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #pricing .text-center.mb-5 {
        margin-bottom: 24px !important;
    }

    #pricing .owl-item {
        padding: 6px 6px 14px 6px !important;
    }

    #pricing .event-list {
        min-height: auto;
        padding: 24px 18px 22px 18px !important;
        border-radius: 24px !important;
    }

    #pricing .event-date h5 {
        min-height: auto;
        font-size: 19px !important;
    }

    #pricing .event-down-icon {
        min-height: 116px;
    }

    #pricing .event-down-icon img {
        width: 116px !important;
        height: 88px !important;
    }
}

/* =========================================================
   FAQ bottom spacing before footer
   ========================================================= */

#faq {
    padding-bottom: 110px !important;
}

@media (min-width: 1400px) {
    #faq {
        padding-bottom: 140px !important;
    }
}

@media (max-width: 991.98px) {
    #faq {
        padding-bottom: 82px !important;
    }
}

@media (max-width: 575.98px) {
    #faq {
        padding-bottom: 64px !important;
    }
}

/* =========================================================
   Login password field + show password button
   Только для формы авторизации
   ========================================================= */

.auth-pass-inputgroup {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}

.auth-pass-inputgroup .form-control {
    height: 48px;
    padding-right: 54px !important;

    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;

    border-right: 1px solid rgba(143, 238, 255, 0.22) !important;
    box-shadow: none !important;
}

.auth-pass-inputgroup .form-control:focus {
    border-right-color: rgba(112, 255, 241, 0.55) !important;
    box-shadow: none !important;
}

/* Кнопка внутри поля */
.auth-pass-inputgroup #password-addon {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 5;

    width: 46px;
    height: calc(100% - 2px);

    padding: 0 !important;
    margin: 0 !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0 !important;
    border-left: 1px solid rgba(143, 238, 255, 0.14) !important;

    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 15px !important;
    border-bottom-right-radius: 15px !important;

    background: transparent !important;
    color: rgba(232, 247, 255, 0.72) !important;

    box-shadow: none !important;
    outline: none !important;
}

.auth-pass-inputgroup #password-addon:hover {
    color: #70fff1 !important;
    background: rgba(112, 255, 241, 0.07) !important;
}

.auth-pass-inputgroup #password-addon:focus,
.auth-pass-inputgroup #password-addon:active {
    box-shadow: none !important;
    outline: none !important;
}

/* Иконка */
.auth-pass-inputgroup #password-addon i {
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
}

/* =========================================================
   Cart summary / Калькулятор заказа
   Только правая карточка в корзине
   ========================================================= */

.cart-summary-col {
    padding-left: 18px !important;
}

.cart-summary-card {
    height: auto;
    border-radius: 24px !important;
    overflow: hidden;
}

.cart-summary-card > .card-body {
    padding: 26px 26px 28px 26px !important;
}

.cart-summary-card .card-title {
    margin-bottom: 22px !important;
    line-height: 1.35 !important;
}

/* Форма промокода */
.cart-summary-card form {
    margin-bottom: 24px !important;
}

.cart-summary-card .input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.cart-summary-card #code_df {
    height: 46px;
    padding-left: 16px !important;
    padding-right: 14px !important;

    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.cart-summary-card #uOuHxGz {
    height: 46px;
    padding-left: 18px !important;
    padding-right: 18px !important;

    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;

    white-space: nowrap;
}

/* Отступ над таблицей */
.cart-summary-card .table-responsive {
    margin-top: 8px !important;
    border-radius: 18px !important;
    overflow: hidden;
}

/* Таблица итогов */
.cart-summary-card .cart-summary-table {
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.cart-summary-card .cart-summary-table tbody tr {
    border-bottom: 1px solid rgba(143, 238, 255, 0.10);
}

.cart-summary-card .cart-summary-table tbody tr:last-child {
    border-bottom: 0;
}

.cart-summary-card .cart-summary-table td,
.cart-summary-card .cart-summary-table th {
    padding: 16px 18px !important;
    vertical-align: middle !important;
    line-height: 1.35 !important;
}

.cart-summary-card .cart-summary-table td:first-child,
.cart-summary-card .cart-summary-table th:first-child {
    padding-left: 20px !important;
}

.cart-summary-card .cart-summary-table td:last-child,
.cart-summary-card .cart-summary-table th:last-child {
    padding-right: 20px !important;
}

.cart-summary-card .cart-summary-table tr:last-child th {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    font-size: 16px !important;
}

/* На планшете и телефоне убираем левый сдвиг */
@media (max-width: 1199.98px) {
    .cart-summary-col {
        padding-left: 12px !important;
    }
}

@media (max-width: 991.98px) {
    .cart-summary-col {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-top: 22px !important;
    }

    .cart-summary-card > .card-body {
        padding: 24px 22px 26px 22px !important;
    }
}

@media (max-width: 575.98px) {
    .cart-summary-col {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-top: 18px !important;
    }

    .cart-summary-card {
        border-radius: 22px !important;
    }

    .cart-summary-card > .card-body {
        padding: 22px 18px 24px 18px !important;
    }

    .cart-summary-card .input-group {
        flex-direction: column;
        gap: 10px;
    }

    .cart-summary-card #code_df,
    .cart-summary-card #uOuHxGz {
        width: 100% !important;
        border-radius: 16px !important;
    }

    .cart-summary-card .cart-summary-table td,
    .cart-summary-card .cart-summary-table th {
        padding: 14px 14px !important;
        font-size: 14px !important;
    }

    .cart-summary-card .cart-summary-table td:first-child,
    .cart-summary-card .cart-summary-table th:first-child {
        padding-left: 16px !important;
    }

    .cart-summary-card .cart-summary-table td:last-child,
    .cart-summary-card .cart-summary-table th:last-child {
        padding-right: 16px !important;
    }
}

/* =========================================================
   DataTables — пагинация по центру
   ========================================================= */

/* Нижняя строка DataTables */
.dataTables_wrapper > .row:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin-top: 18px !important;
}

/* Блок с текстом "Показано ..." */
.dataTables_wrapper > .row:last-child > div:first-child {
    width: 100% !important;
    text-align: center !important;
    order: 1 !important;
}

/* Блок с кнопками пагинации */
.dataTables_wrapper > .row:last-child > div:last-child {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    order: 2 !important;
}

/* Сам контейнер пагинации */
.dataTables_paginate {
    float: none !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* Список кнопок */
.dataTables_paginate .pagination {
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
}

/* Кнопки */
.dataTables_paginate .page-item .page-link {
    min-width: 42px;
    height: 42px;
    padding: 8px 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Мобильная версия */
@media (max-width: 767.98px) {
    .dataTables_wrapper > .row:last-child {
        gap: 10px !important;
    }

    .dataTables_paginate .page-item .page-link {
        min-width: 38px;
        height: 38px;
        padding: 8px 12px !important;
        border-radius: 12px !important;
    }
}

/* =========================================================
   DataTables admin/client tables layout
   Управляет всеми таблицами DataTables
   ========================================================= */

.dataTables_wrapper {
    width: 100%;
}

/* Верхняя панель таблицы */
.dataTables_wrapper > .row:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin: 0 0 20px 0 !important;
}

/* Колонки верхней панели */
.dataTables_wrapper > .row:first-child > div {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Поиск слева */
.dataTables_wrapper > .row:first-child > div:nth-child(2) {
    order: 1 !important;
    margin-right: auto !important;
}

/* Выбор количества строк справа */
.dataTables_wrapper > .row:first-child > div:nth-child(1) {
    order: 2 !important;
    margin-left: auto !important;
}

/* Убираем текст вокруг select/search */
.dataTables_filter label,
.dataTables_length label {
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0 !important;
}

/* Поиск */
.dataTables_filter {
    margin: 0 !important;
    text-align: left !important;
}

.dataTables_filter input {
    width: 280px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 10px 15px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
}

/* Select количества строк */
.dataTables_length {
    margin: 0 !important;
    text-align: right !important;
}

.dataTables_length select {
    width: 92px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 8px 34px 8px 14px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
    cursor: pointer;
}

/* Таблица */
.dataTables_wrapper table.dataTable {
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

/* Нижняя панель */
.dataTables_wrapper > .row:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin: 18px 0 0 0 !important;
}

/* Информация "Показано..." */
.dataTables_wrapper > .row:last-child > div:first-child {
    width: 100% !important;
    text-align: center !important;
    order: 1 !important;
}

/* Пагинация */
.dataTables_wrapper > .row:last-child > div:last-child {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    order: 2 !important;
}

.dataTables_info {
    padding-top: 0 !important;
    font-size: 14px !important;
    opacity: 0.75;
}

.dataTables_paginate {
    float: none !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.dataTables_paginate .pagination {
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
}

.dataTables_paginate .page-item .page-link {
    min-width: 42px;
    height: 42px;
    padding: 8px 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

/* Таблица внутри responsive-блока */
.table-responsive {
    overflow-x: auto;
}

/* Мобилка */
@media (max-width: 767.98px) {
    .dataTables_wrapper > .row:first-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .dataTables_wrapper > .row:first-child > div {
        width: 100% !important;
    }

    .dataTables_wrapper > .row:first-child > div:nth-child(1),
    .dataTables_wrapper > .row:first-child > div:nth-child(2) {
        order: initial !important;
        margin: 0 !important;
    }

    .dataTables_filter,
    .dataTables_length {
        width: 100% !important;
        text-align: left !important;
    }

    .dataTables_filter label,
    .dataTables_length label {
        width: 100% !important;
    }

    .dataTables_filter input,
    .dataTables_length select {
        width: 100% !important;
    }

    .dataTables_wrapper > .row:last-child {
        gap: 10px !important;
    }

    .dataTables_paginate .page-item .page-link {
        min-width: 38px;
        height: 38px;
        padding: 8px 12px !important;
        border-radius: 12px !important;
    }
}

.dataTables_info {
    display: none !important;
}

.card-body > h4.card-title {
    margin-bottom: 20px !important;
}

.card-body > h4.card-title + .dataTables_wrapper {
    margin-top: 0 !important;
}

.promo-list-card {
    min-height: auto !important;
}

.promo-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.promo-table-title {
    margin: 0 0 5px 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

.promo-table-subtitle {
    margin: 0;
    font-size: 14px;
    opacity: 0.72;
}

.promo-delete-btn {
    min-height: 42px;
    padding: 10px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff5f6d 0%, #d93448 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 12px 26px rgba(217, 52, 72, 0.22);
}

.promo-delete-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.promo-table-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

.promo-table-checkbox .form-check-input {
    margin: 0 !important;
}

.promo-table th:first-child,
.promo-table td:first-child {
    width: 90px;
    text-align: center;
    vertical-align: middle;
}

.promo-table th,
.promo-table td {
    vertical-align: middle !important;
}

.promo-code-link {
    color: #ffffff !important;
}

@media (max-width: 575.98px) {
    .promo-table-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .promo-delete-btn {
        width: 100%;
    }
}

/* =========================================================
   Admin add product page
   Страница создания товара
   ========================================================= */

.admin-products-page .admin-product-form-row {
    display: flex;
    justify-content: center;
}

.admin-products-page .admin-product-form-card {
    max-width: 980px;
    margin: 0 auto;
    border-radius: 24px !important;
    overflow: hidden;
}

.admin-products-page .admin-product-form-header {
    padding: 22px 26px !important;
}

.admin-products-page .admin-product-form-title {
    margin: 0 0 5px 0 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.admin-products-page .admin-product-form-subtitle {
    font-size: 14px;
    line-height: 1.45;
    opacity: 0.72;
}

.admin-products-page .admin-product-form-body {
    padding: 26px 26px 30px 26px !important;
}

.admin-products-page .admin-product-form .form-label {
    margin-bottom: 8px !important;
    font-weight: 700;
}

.admin-products-page .admin-product-form .form-control,
.admin-products-page .admin-product-form select,
.admin-products-page .admin-product-form textarea {
    min-height: 44px;
}

.admin-products-page .admin-product-form textarea {
    min-height: 118px;
    resize: vertical;
}

/* Кнопки снизу по центру */
.admin-product-form-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(143, 238, 255, 0.12);
}

.admin-product-add-btn,
.admin-product-list-btn {
    min-height: 44px;
    padding: 11px 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: 15px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.admin-product-add-btn {
    border: 0;
    background: linear-gradient(135deg, #70fff1 0%, #22c8d7 100%);
    color: #031923 !important;
    box-shadow: 0 12px 26px rgba(34, 200, 215, 0.22);
}

.admin-product-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(34, 200, 215, 0.32);
}

.admin-product-list-btn {
    border: 1px solid rgba(143, 238, 255, 0.26);
    background: rgba(255, 255, 255, 0.04);
    color: #e8f7ff !important;
}

.admin-product-list-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(143, 238, 255, 0.48);
    background: rgba(143, 238, 255, 0.10);
    color: #ffffff !important;
}

/* Планшет */
@media (max-width: 991.98px) {
    .admin-products-page .admin-product-form-card {
        max-width: 100%;
    }

    .admin-products-page .admin-product-form-header {
        padding: 20px 22px !important;
    }

    .admin-products-page .admin-product-form-body {
        padding: 24px 22px 28px 22px !important;
    }
}

/* Телефон */
@media (max-width: 575.98px) {
    .admin-products-page .admin-product-form-header {
        padding: 18px 18px !important;
    }

    .admin-products-page .admin-product-form-body {
        padding: 20px 18px 24px 18px !important;
    }

    .admin-product-form-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 22px;
        padding-top: 18px;
    }

    .admin-product-add-btn,
    .admin-product-list-btn {
        width: 100%;
        min-height: 46px;
    }
}

/* =========================================================
   Admin orders page
   Страница управления заказами
   ========================================================= */

.orders-page .admin-orders-row {
    row-gap: 24px;
}

.orders-page .admin-orders-list-card,
.orders-page .admin-order-editor-card {
    width: 100%;
    border-radius: 24px !important;
    overflow: hidden;
}

.orders-page .admin-orders-card-header,
.orders-page .admin-order-editor-header {
    padding: 22px 26px !important;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.orders-page .admin-orders-card-title,
.orders-page .admin-order-editor-title {
    margin: 0 0 5px 0 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.orders-page .admin-orders-card-subtitle,
.orders-page .admin-order-editor-subtitle {
    font-size: 14px;
    line-height: 1.45;
    opacity: 0.72;
}

.orders-page .admin-orders-card-body,
.orders-page .admin-order-editor-body {
    padding: 26px 26px 30px 26px !important;
}

.orders-page .admin-orders-count-badge,
.orders-page .admin-order-status-badge {
    min-height: 32px;
    padding: 8px 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    background: rgba(112, 255, 241, 0.12);
    color: #70fff1;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.orders-page .orders-table {
    width: 100% !important;
}

.orders-page .orders-table th,
.orders-page .orders-table td {
    vertical-align: middle !important;
}

.orders-page .order-selected-row td {
    background: rgba(112, 255, 241, 0.08) !important;
}

.orders-page .admin-order-select-btn {
    min-height: 36px;
    padding: 8px 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    background: linear-gradient(135deg, #70fff1 0%, #22c8d7 100%);
    color: #031923 !important;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
}

.orders-page .admin-order-select-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* Редактор заказа */
.orders-page .admin-order-editor-card {
    max-width: 1120px;
    margin: 0 auto;
}

.orders-page .admin-order-editor-form .form-label {
    margin-bottom: 8px !important;
    font-weight: 700;
}

.orders-page .admin-order-editor-form .form-control,
.orders-page .admin-order-editor-form .form-select,
.orders-page .admin-order-editor-form textarea {
    min-height: 44px;
}

.orders-page .admin-order-editor-form textarea {
    min-height: 118px;
    resize: vertical;
}

/* Кнопки редактора заказа по центру */
.orders-page .admin-order-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;

    margin-top: 12px;
    padding-top: 22px;

    border-top: 1px solid rgba(143, 238, 255, 0.12);
}

.orders-page .admin-order-save-btn,
.orders-page .admin-order-secondary-btn {
    min-height: 44px;
    padding: 11px 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: 15px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}

.orders-page .admin-order-save-btn {
    border: 0;
    background: linear-gradient(135deg, #70fff1 0%, #22c8d7 100%);
    color: #031923 !important;
    box-shadow: 0 12px 26px rgba(34, 200, 215, 0.22);
}

.orders-page .admin-order-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(34, 200, 215, 0.32);
}

.orders-page .admin-order-secondary-btn {
    border: 1px solid rgba(143, 238, 255, 0.26);
    background: rgba(255, 255, 255, 0.04);
    color: #e8f7ff !important;
}

.orders-page .admin-order-secondary-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(143, 238, 255, 0.48);
    background: rgba(143, 238, 255, 0.10);
    color: #ffffff !important;
}

/* Состав заказа */
.orders-page .admin-order-items-section {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(143, 238, 255, 0.12);
}

.orders-page .admin-order-items-title {
    margin: 0 0 18px 0 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

.orders-page .admin-order-items-table th,
.orders-page .admin-order-items-table td {
    vertical-align: middle !important;
    padding: 14px 16px !important;
}

/* Планшет */
@media (max-width: 991.98px) {
    .orders-page .admin-orders-card-header,
    .orders-page .admin-order-editor-header {
        padding: 20px 22px !important;
    }

    .orders-page .admin-orders-card-body,
    .orders-page .admin-order-editor-body {
        padding: 24px 22px 28px 22px !important;
    }

    .orders-page .admin-order-editor-card {
        max-width: 100%;
    }
}

/* Телефон */
@media (max-width: 575.98px) {
    .orders-page .admin-orders-card-header,
    .orders-page .admin-order-editor-header {
        padding: 18px 18px !important;
        align-items: flex-start;
    }

    .orders-page .admin-orders-card-body,
    .orders-page .admin-order-editor-body {
        padding: 20px 18px 24px 18px !important;
    }

    .orders-page .admin-orders-card-title,
    .orders-page .admin-order-editor-title {
        font-size: 19px !important;
    }

    .orders-page .admin-order-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding-top: 18px;
    }

    .orders-page .admin-order-save-btn,
    .orders-page .admin-order-secondary-btn {
        width: 100%;
        min-height: 46px;
    }

    .orders-page .admin-order-items-table th,
    .orders-page .admin-order-items-table td {
        padding: 12px 13px !important;
        font-size: 14px;
    }
}

/* =========================================================
   Admin edit products table
   Страница списка товаров
   ========================================================= */

.product-list-card {
    min-height: auto !important;
    border-radius: 24px !important;
    overflow: hidden;
}

.product-list-form {
    margin: 0;
}

.product-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.product-table-title {
    margin: 0 0 5px 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

.product-table-subtitle {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.72;
}

.product-delete-btn {
    min-height: 42px;
    padding: 10px 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 0;
    border-radius: 14px;

    background: linear-gradient(135deg, #ff5f6d 0%, #d93448 100%);
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;

    box-shadow: 0 12px 26px rgba(217, 52, 72, 0.22);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.product-delete-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 16px 32px rgba(217, 52, 72, 0.30);
}

.product-delete-btn:active {
    transform: translateY(0);
}

.product-edit-table th,
.product-edit-table td {
    vertical-align: middle !important;
}

.product-edit-table th:first-child,
.product-edit-table td:first-child {
    width: 90px;
    text-align: center;
    vertical-align: middle;
}

.product-table-checkbox {
    min-height: auto;
    margin: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;
}

.product-table-checkbox .form-check-input {
    margin: 0 !important;
}

.product-edit-link {
    color: #ffffff !important;
    font-weight: 700;
}

.product-edit-link:hover {
    color: #70fff1 !important;
}

/* Мобильная версия */
@media (max-width: 575.98px) {
    .product-table-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 18px;
    }

    .product-delete-btn {
        width: 100%;
        min-height: 44px;
    }

    .product-table-title {
        font-size: 19px;
    }

    .product-table-subtitle {
        font-size: 13px;
    }
}

/* =========================================================
   Admin edit news table
   Страница списка новостей
   ========================================================= */

.news-list-card {
    min-height: auto !important;
    border-radius: 24px !important;
    overflow: hidden;
}

.news-list-form {
    margin: 0;
}

.news-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.news-table-title {
    margin: 0 0 5px 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

.news-table-subtitle {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.72;
}

.news-delete-btn {
    min-height: 42px;
    padding: 10px 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 0;
    border-radius: 14px;

    background: linear-gradient(135deg, #ff5f6d 0%, #d93448 100%);
    color: #ffffff;

    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;

    box-shadow: 0 12px 26px rgba(217, 52, 72, 0.22);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.news-delete-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 16px 32px rgba(217, 52, 72, 0.30);
}

.news-delete-btn:active {
    transform: translateY(0);
}

.news-edit-table th,
.news-edit-table td {
    vertical-align: middle !important;
}

.news-edit-table th:first-child,
.news-edit-table td:first-child {
    width: 90px;
    text-align: center;
    vertical-align: middle;
}

.news-edit-table th:nth-child(2),
.news-edit-table td:nth-child(2) {
    min-width: 180px;
}

.news-detail-cell {
    max-width: 520px;
    white-space: normal;
    line-height: 1.45;
}

.news-table-checkbox {
    min-height: auto;
    margin: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;
}

.news-table-checkbox .form-check-input {
    margin: 0 !important;
}

.news-edit-link {
    color: #ffffff !important;
    font-weight: 700;
}

.news-edit-link:hover {
    color: #70fff1 !important;
}

/* Мобильная версия */
@media (max-width: 575.98px) {
    .news-table-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-bottom: 18px;
    }

    .news-delete-btn {
        width: 100%;
        min-height: 44px;
    }

    .news-table-title {
        font-size: 19px;
    }

    .news-table-subtitle {
        font-size: 13px;
    }

    .news-detail-cell {
        max-width: 280px;
    }
}

.admin-products-page .page-title-box {
    padding: 18px 0 22px 0 !important;
    margin-bottom: 8px !important;
}

.admin-products-page .page-title-box h4 {
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}

.admin-products-page .page-title-box .breadcrumb {
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* =========================================================
   Orders page normal centered width
   /Admin/orders
   ========================================================= */

.orders-page .container-fluid {
    max-width: 1340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Строка с карточками */
.orders-page .admin-orders-row {
    justify-content: center !important;
}

/* Карточка списка заказов */
.orders-page .admin-orders-list-card {
    max-width: 1080px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Карточка редактирования заказа */
.orders-page .admin-order-editor-card {
    max-width: 980px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Нормальные внутренние отступы */
.orders-page .admin-orders-card-body,
.orders-page .admin-order-editor-body {
    padding: 24px 26px 28px 26px !important;
}

/* Заголовки карточек */
.orders-page .admin-orders-card-header,
.orders-page .admin-order-editor-header {
    padding: 20px 26px !important;
}

/* Таблица не должна принудительно становиться шире карточки */
.orders-page .orders-table {
    width: 100% !important;
    min-width: 860px;
}

/* Чтобы при узком экране был горизонтальный скролл, а не разъезд */
.orders-page .table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* Планшет */
@media (max-width: 1199.98px) {
    .orders-page .container-fluid {
        max-width: 100% !important;
    }

    .orders-page .admin-orders-list-card,
    .orders-page .admin-order-editor-card {
        max-width: 100% !important;
    }
}

/* Телефон */
@media (max-width: 575.98px) {
    .orders-page .admin-orders-card-body,
    .orders-page .admin-order-editor-body {
        padding: 20px 18px 24px 18px !important;
    }

    .orders-page .admin-orders-card-header,
    .orders-page .admin-order-editor-header {
        padding: 18px 18px !important;
    }

    .orders-page .orders-table {
        min-width: 780px;
    }
}

.container-fluid > .alert,
.container-fluid > center > .alert {
    display: block;
    width: calc(100% - 24px);
    margin: 0 12px 20px 12px;
    text-align: left;
}
/* =========================================================
   Final footer behavior fix
   Футер НЕ фиксированный и НЕ прижат к низу окна.
   Он находится в обычном потоке документа после контента страницы.
   ========================================================= */
html,
body {
    min-height: 0 !important;
}

body {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
}

.main,
.admin-main,
#layout-wrapper,
.main-content,
.page-content {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    flex: none !important;
}

.main-content,
.page-content {
    overflow: visible !important;
}

.page-content > .container-fluid,
.main-content > .container-fluid,
.admin-main > .container-fluid {
    flex: none !important;
}

.footer,
.page-content > .footer,
.main-content > .footer,
.admin-main .footer,
.main .footer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;

    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 60px !important;

    margin: 32px 0 0 0 !important;
    padding: 18px 0 !important;
    flex: none !important;
    flex-shrink: 0 !important;

    z-index: 1 !important;
}

.admin-main .footer {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.footer .container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding-left: calc(24px / 2) !important;
    padding-right: calc(24px / 2) !important;
}

@media (max-width: 575.98px) {
    .footer,
    .page-content > .footer,
    .main-content > .footer,
    .admin-main .footer,
    .main .footer {
        margin-top: 24px !important;
        padding: 16px 0 !important;
    }
}

/* Admin user order modal without dark overlay */
.admin-user-order-modal .modal-dialog {
    max-width: min(1180px, calc(100vw - 32px));
}
.admin-user-order-modal .modal-content {
    max-height: calc(100vh - 48px);
}
.admin-user-order-modal .modal-body {
    overflow-y: auto;
}
.admin-user-order-modal + .modal-backdrop,
body .modal-backdrop.admin-user-order-backdrop-disabled {
    display: none !important;
}
.table td,
.table th {
    white-space: normal !important;
    word-break: break-word;
    vertical-align: middle;
}
.table-responsive {
    overflow-x: auto;
}

/* =========================================================
   Admin/table compact fix: убираем расширение сайта, сжимаем только таблицы
   ========================================================= */
.table-responsive,
.admin-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.table {
    width: 100%;
    max-width: 100%;
}

.table th,
.table td {
    padding: 0.54rem 0.62rem !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    line-height: 1.32 !important;
    vertical-align: middle !important;
}

.table th {
    font-size: 13px !important;
}

.table td {
    font-size: 13px !important;
}

.dataTables_wrapper {
    width: 100%;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    max-width: 100%;
}

/* Admin/images: компактная таблица без растягивания всей страницы */
.admin-images-page .admin-images-list-card {
    overflow: hidden;
}

.admin-images-table {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
}

.admin-images-table .image-id-col {
    width: 50px;
}

.admin-images-table .image-preview-col {
    width: 74px;
}

.admin-images-table .image-action-col {
    width: 106px;
}

.admin-images-table .image-product-col {
    width: 150px;
}

.admin-image-preview {
    width: 50px;
    height: 38px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.12);
    display: block;
}

.admin-images-table .form-control-sm {
    min-height: 32px;
    padding: 0.3rem 0.48rem !important;
    font-size: 12.5px !important;
}

.admin-image-url-input {
    min-width: 0 !important;
}

.admin-image-save-btn {
    width: 100%;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* Admin/user purchases modal — только для модалки покупок, без влияния на другие модалки */
.admin-user-order-modal {
    overflow-y: auto !important;
    padding-left: 0 !important;
}

.admin-user-order-modal .modal-dialog {
    max-width: min(860px, calc(100vw - 32px)) !important;
    width: auto !important;
    margin: 1.25rem auto !important;
}

.admin-user-order-modal .modal-content {
    max-height: calc(100vh - 48px) !important;
    overflow: hidden !important;
    border-radius: 22px !important;
}

.admin-user-order-modal .modal-header,
.admin-user-order-modal .modal-footer {
    flex-shrink: 0 !important;
}

.admin-user-order-modal .modal-body {
    max-height: calc(100vh - 176px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 16px !important;
}

.admin-user-order-modal .admin-order-details-table {
    table-layout: fixed !important;
    width: 100% !important;
}

.admin-user-order-modal .admin-order-details-table th {
    width: 170px;
}

.admin-user-order-modal .admin-order-details-table td,
.admin-user-order-modal .admin-order-details-table th {
    overflow-wrap: break-word !important;
}

.admin-user-order-modal + .modal-backdrop,
body:has(.admin-user-order-modal.show) .modal-backdrop {
    display: none !important;
}

#datatable-user-logs_wrapper .dt-buttons,
#datatable-user-logs_wrapper .dt-button {
    display: none !important;
}

.admin-user-status-help {
    display: block;
    margin-top: 8px;
}

/* Admin/orders: только сама таблица, без изменения ширины контейнера/страницы */
.orders-page .admin-orders-table,
.orders-page #datatable {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
}

.orders-page .admin-orders-table th:nth-child(1),
.orders-page .admin-orders-table td:nth-child(1),
.orders-page #datatable th:nth-child(1),
.orders-page #datatable td:nth-child(1) { width: 52px; }

.orders-page .admin-orders-table th:nth-child(2),
.orders-page .admin-orders-table td:nth-child(2),
.orders-page #datatable th:nth-child(2),
.orders-page #datatable td:nth-child(2) { width: 150px; }

.orders-page .admin-orders-table th:nth-child(4),
.orders-page .admin-orders-table td:nth-child(4),
.orders-page #datatable th:nth-child(4),
.orders-page #datatable td:nth-child(4) { width: 100px; }

.orders-page .admin-orders-table th:nth-child(5),
.orders-page .admin-orders-table td:nth-child(5),
.orders-page #datatable th:nth-child(5),
.orders-page #datatable td:nth-child(5) { width: 140px; }

.orders-page .admin-orders-table th:nth-child(6),
.orders-page .admin-orders-table td:nth-child(6),
.orders-page #datatable th:nth-child(6),
.orders-page #datatable td:nth-child(6) { width: 130px; }

.orders-page .admin-orders-table th:nth-child(7),
.orders-page .admin-orders-table td:nth-child(7),
.orders-page #datatable th:nth-child(7),
.orders-page #datatable td:nth-child(7) { width: 120px; }

/* =========================================================
   FIX ONLY FOR ORDERS TABLE WIDTH
   Не расширяет сайт/секции. Сжимает именно таблицу заказов,
   чтобы не появлялся горизонтальный скролл.
   ========================================================= */
.orders-page .admin-orders-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.orders-page .admin-orders-table-wrap .dataTables_wrapper,
.orders-page .admin-orders-table-wrap .dataTables_scroll,
.orders-page .admin-orders-table-wrap .dataTables_scrollHead,
.orders-page .admin-orders-table-wrap .dataTables_scrollBody {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.orders-page .admin-orders-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
}

.orders-page .admin-orders-table th,
.orders-page .admin-orders-table td {
    padding: 10px 8px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    vertical-align: middle !important;
}

.orders-page .admin-orders-table th:nth-child(1),
.orders-page .admin-orders-table td:nth-child(1) {
    width: 42px !important;
    max-width: 42px !important;
}

.orders-page .admin-orders-table th:nth-child(2),
.orders-page .admin-orders-table td:nth-child(2) {
    width: 145px !important;
    max-width: 145px !important;
}

.orders-page .admin-orders-table th:nth-child(3),
.orders-page .admin-orders-table td:nth-child(3) {
    width: auto !important;
}

.orders-page .admin-orders-table th:nth-child(4),
.orders-page .admin-orders-table td:nth-child(4) {
    width: 95px !important;
    max-width: 95px !important;
}

.orders-page .admin-orders-table th:nth-child(5),
.orders-page .admin-orders-table td:nth-child(5) {
    width: 118px !important;
    max-width: 118px !important;
}

.orders-page .admin-orders-table th:nth-child(6),
.orders-page .admin-orders-table td:nth-child(6) {
    width: 126px !important;
    max-width: 126px !important;
}

.orders-page .admin-orders-table th:nth-child(7),
.orders-page .admin-orders-table td:nth-child(7) {
    width: 105px !important;
    max-width: 105px !important;
    text-align: center !important;
}

.orders-page .admin-orders-table .order-number-cell span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
    line-height: 1.25 !important;
}

.orders-page .admin-orders-table .badge {
    white-space: normal !important;
    max-width: 75% !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
}

.orders-page .admin-orders-table .btn-sm {
    padding: 6px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

@media (max-width: 1199.98px) {
    .orders-page .admin-orders-table th,
    .orders-page .admin-orders-table td {
        padding: 8px 6px !important;
        font-size: 12px !important;
    }

    .orders-page .admin-orders-table th:nth-child(2),
    .orders-page .admin-orders-table td:nth-child(2) {
        width: 120px !important;
        max-width: 120px !important;
    }

    .orders-page .admin-orders-table th:nth-child(5),
    .orders-page .admin-orders-table td:nth-child(5) {
        width: 100px !important;
        max-width: 100px !important;
    }

    .orders-page .admin-orders-table th:nth-child(6),
    .orders-page .admin-orders-table td:nth-child(6) {
        width: 112px !important;
        max-width: 112px !important;
    }

    .orders-page .admin-orders-table th:nth-child(7),
    .orders-page .admin-orders-table td:nth-child(7) {
        width: 92px !important;
        max-width: 92px !important;
    }
}

/* =========================================================
   ADMIN USER PAGE: order details modal + status controls
   Точечные стили только для Admin/user?id=...
   ========================================================= */
.admin-user-order-modal {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.admin-user-order-modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.admin-user-order-modal .modal-backdrop,
body:has(.admin-user-order-modal.show) .modal-backdrop {
    display: none !important;
}

.admin-user-order-dialog {
    width: min(960px, calc(100vw - 32px)) !important;
    max-width: min(960px, calc(100vw - 32px)) !important;
    margin: 16px auto !important;
    pointer-events: none;
}

.admin-user-order-content {
    width: 100%;
    max-height: calc(100vh - 32px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 24px !important;
    border: 1px solid rgba(92, 178, 194, 0.35) !important;
    background: #092d3d !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42) !important;
    pointer-events: auto;
}

.admin-user-order-header,
.admin-user-order-footer {
    flex: 0 0 auto !important;
    border-color: rgba(92, 178, 194, 0.22) !important;
    background: rgba(7, 37, 51, 0.98) !important;
    padding: 18px 24px !important;
}

.admin-user-order-header .modal-title {
    margin: 2px 0 0;
    color: #e7f8ff;
    font-weight: 800;
    font-size: 22px;
}

.admin-user-order-kicker {
    color: rgba(213, 236, 245, 0.62);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.admin-user-order-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 22px 24px !important;
    scrollbar-width: thin;
}

.admin-user-order-body::-webkit-scrollbar {
    width: 8px;
}

.admin-user-order-body::-webkit-scrollbar-thumb {
    background: rgba(56, 182, 196, 0.42);
    border-radius: 999px;
}

.admin-user-order-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.admin-user-order-summary-item,
.admin-user-order-info-grid > div,
.admin-user-order-text-card {
    border: 1px solid rgba(92, 178, 194, 0.23);
    background: rgba(255, 255, 255, 0.035);
    border-radius: 16px;
    padding: 14px 16px;
    min-width: 0;
}

.admin-user-order-summary-item span,
.admin-user-order-info-grid span,
.admin-user-order-text-card span {
    display: block;
    color: rgba(218, 238, 247, 0.62);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 7px;
}

.admin-user-order-summary-item strong,
.admin-user-order-info-grid strong {
    display: block;
    color: #eaf9ff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.admin-user-order-summary-item.is-total strong {
    color: #35d6df;
    font-size: 18px;
}

.admin-user-order-section {
    margin-top: 18px;
}

.admin-user-order-section h6 {
    margin: 0 0 12px;
    color: #f0fbff;
    font-size: 16px;
    font-weight: 800;
}

.admin-user-order-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.admin-user-order-text-card + .admin-user-order-text-card {
    margin-top: 10px;
}

.admin-user-order-text-card p {
    margin: 0;
    color: #eaf9ff;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.admin-user-order-items-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(92, 178, 194, 0.23);
    border-radius: 16px;
}

.admin-user-order-items-table {
    width: 100% !important;
    margin: 0 !important;
    table-layout: fixed;
    color: #eaf9ff;
}

.admin-user-order-items-table th,
.admin-user-order-items-table td {
    padding: 12px 14px !important;
    vertical-align: middle !important;
    border-color: rgba(92, 178, 194, 0.20) !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.admin-user-order-items-table thead th {
    background: rgba(22, 96, 106, 0.65) !important;
    color: #eaf9ff !important;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-user-order-items-table th:nth-child(2),
.admin-user-order-items-table td:nth-child(2) {
    width: 90px;
    text-align: center;
}

.admin-user-order-items-table th:nth-child(3),
.admin-user-order-items-table td:nth-child(3),
.admin-user-order-items-table th:nth-child(4),
.admin-user-order-items-table td:nth-child(4) {
    width: 130px;
}

.admin-user-order-footer {
    justify-content: flex-end;
}

.admin-user-order-footer .btn {
    min-width: 120px;
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 700;
}

.admin-user-status-control {
    display: flex;
    gap: 12px;
    align-items: center;
}

.admin-user-status-control .form-control {
    max-width: 260px;
}

.admin-user-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
}

.admin-user-status-badge.is-active {
    color: #c8ffe6;
    background: rgba(28, 181, 118, 0.16);
    border: 1px solid rgba(28, 181, 118, 0.34);
}

.admin-user-status-badge.is-blocked {
    color: #ffd3d3;
    background: rgba(220, 53, 69, 0.16);
    border: 1px solid rgba(220, 53, 69, 0.34);
}

.admin-user-disabled-input {
    opacity: 0.72;
    cursor: not-allowed;
}

@media (max-width: 991.98px) {
    .admin-user-order-summary,
    .admin-user-order-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .admin-user-order-dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
    }

    .admin-user-order-content {
        max-height: calc(100vh - 16px) !important;
        border-radius: 18px !important;
    }

    .admin-user-order-header,
    .admin-user-order-footer,
    .admin-user-order-body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .admin-user-order-summary,
    .admin-user-order-info-grid {
        grid-template-columns: 1fr;
    }

    .admin-user-status-control {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-user-status-control .form-control {
        max-width: none;
    }
}

/* =========================================================
   ADMIN USER PAGE: fixed order modal v2
   Только модальное окно покупок на Admin/user?id=...
   ========================================================= */
.admin-user-order-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1060 !important;
    padding: 18px !important;
    overflow: hidden !important;
    background: transparent !important;
}

.admin-user-order-modal.show {
    display: block !important;
}

.admin-user-order-modal ~ .modal-backdrop,
.admin-user-order-modal + .modal-backdrop,
body:has(.admin-user-order-modal.show) > .modal-backdrop,
body:has(.admin-user-order-modal.show) .modal-backdrop {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.admin-user-order-modal .admin-user-order-dialog {
    position: fixed !important;
    top: 0% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(920px, calc(100vw - 36px)) !important;
    max-width: min(920px, calc(100vw - 36px)) !important;
    max-height: calc(100dvh - 36px) !important;
    margin: 0 !important;
    pointer-events: none !important;
}

.admin-user-order-modal .admin-user-order-content {
    width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 36px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    border: 1px solid rgba(92, 178, 194, 0.36) !important;
    background: linear-gradient(180deg, #0b3142 0%, #062838 100%) !important;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45) !important;
    pointer-events: auto !important;
}

.admin-user-order-modal .admin-user-order-header,
.admin-user-order-modal .admin-user-order-footer {
    flex: 0 0 auto !important;
    padding: 16px 20px !important;
    background: rgba(5, 31, 44, 0.96) !important;
    border-color: rgba(92, 178, 194, 0.22) !important;
}

.admin-user-order-modal .admin-user-order-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.admin-user-order-modal .admin-user-order-header .modal-title {
    margin: 0 !important;
    color: #ecfbff !important;
    font-size: 21px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

.admin-user-order-modal .admin-user-order-kicker {
    margin-bottom: 4px !important;
    color: rgba(221, 243, 250, 0.62) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
}

.admin-user-order-modal .btn-close {
    flex: 0 0 auto !important;
    opacity: 0.9 !important;
    filter: invert(1) grayscale(100%) brightness(180%) !important;
}

.admin-user-order-modal .admin-user-order-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 20px !important;
    max-height: none !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(54, 190, 203, 0.55) transparent !important;
}

.admin-user-order-modal .admin-user-order-body::-webkit-scrollbar {
    width: 8px !important;
}

.admin-user-order-modal .admin-user-order-body::-webkit-scrollbar-thumb {
    background: rgba(54, 190, 203, 0.55) !important;
    border-radius: 999px !important;
}

.admin-user-order-modal .admin-user-order-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
}

.admin-user-order-modal .admin-user-order-summary-item,
.admin-user-order-modal .admin-user-order-info-grid > div,
.admin-user-order-modal .admin-user-order-text-card {
    min-width: 0 !important;
    padding: 12px 13px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(92, 178, 194, 0.22) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

.admin-user-order-modal .admin-user-order-summary-item span,
.admin-user-order-modal .admin-user-order-info-grid span,
.admin-user-order-modal .admin-user-order-text-card span {
    display: block !important;
    margin-bottom: 6px !important;
    color: rgba(222, 242, 249, 0.62) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.admin-user-order-modal .admin-user-order-summary-item strong,
.admin-user-order-modal .admin-user-order-info-grid strong,
.admin-user-order-modal .admin-user-order-text-card p {
    display: block !important;
    margin: 0 !important;
    color: #ecfbff !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.admin-user-order-modal .admin-user-order-summary-item.is-total strong {
    color: #35d6df !important;
    font-size: 17px !important;
}

.admin-user-order-modal .admin-user-order-section {
    margin-top: 14px !important;
}

.admin-user-order-modal .admin-user-order-section h6 {
    margin: 0 0 10px !important;
    color: #f2fcff !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

.admin-user-order-modal .admin-user-order-info-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.admin-user-order-modal .admin-user-order-text-card + .admin-user-order-text-card {
    margin-top: 8px !important;
}

.admin-user-order-modal .admin-user-order-items-wrap {
    width: 100% !important;
    overflow-x: visible !important;
    border: 1px solid rgba(92, 178, 194, 0.22) !important;
    border-radius: 14px !important;
}

.admin-user-order-modal .admin-user-order-items-table {
    width: 100% !important;
    table-layout: fixed !important;
    margin: 0 !important;
    color: #ecfbff !important;
}

.admin-user-order-modal .admin-user-order-items-table th,
.admin-user-order-modal .admin-user-order-items-table td {
    padding: 10px 12px !important;
    border-color: rgba(92, 178, 194, 0.18) !important;
    vertical-align: middle !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.admin-user-order-modal .admin-user-order-items-table thead th {
    background: rgba(18, 91, 101, 0.72) !important;
    color: #ecfbff !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

.admin-user-order-modal .admin-user-order-items-table th:nth-child(2),
.admin-user-order-modal .admin-user-order-items-table td:nth-child(2) {
    width: 76px !important;
    text-align: center !important;
}

.admin-user-order-modal .admin-user-order-items-table th:nth-child(3),
.admin-user-order-modal .admin-user-order-items-table td:nth-child(3),
.admin-user-order-modal .admin-user-order-items-table th:nth-child(4),
.admin-user-order-modal .admin-user-order-items-table td:nth-child(4) {
    width: 118px !important;
}

.admin-user-order-modal .admin-user-order-footer {
    justify-content: flex-end !important;
}

.admin-user-order-modal .admin-user-order-footer .btn {
    min-width: 118px !important;
    border-radius: 12px !important;
    padding: 9px 16px !important;
    font-weight: 800 !important;
}

.admin-user-permission-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: rgba(232, 249, 255, 0.78);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(92, 178, 194, 0.18);
    font-size: 13px;
    line-height: 1.45;
}

@media (max-width: 991.98px) {
    .admin-user-order-modal .admin-user-order-summary,
    .admin-user-order-modal .admin-user-order-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    .admin-user-order-modal {
        padding: 8px !important;
    }

    .admin-user-order-modal .admin-user-order-dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    .admin-user-order-modal .admin-user-order-content {
        max-height: calc(100dvh - 16px) !important;
        border-radius: 18px !important;
    }

    .admin-user-order-modal .admin-user-order-header,
    .admin-user-order-modal .admin-user-order-footer,
    .admin-user-order-modal .admin-user-order-body {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .admin-user-order-modal .admin-user-order-summary,
    .admin-user-order-modal .admin-user-order-info-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-user-order-modal .admin-user-order-items-table th:nth-child(2),
    .admin-user-order-modal .admin-user-order-items-table td:nth-child(2) {
        width: 58px !important;
    }

    .admin-user-order-modal .admin-user-order-items-table th:nth-child(3),
    .admin-user-order-modal .admin-user-order-items-table td:nth-child(3),
    .admin-user-order-modal .admin-user-order-items-table th:nth-child(4),
    .admin-user-order-modal .admin-user-order-items-table td:nth-child(4) {
        width: 86px !important;
    }
}

/* Admin/user: явный селектор статуса пользователя */
.admin-user-status-panel {
    width: 100%;
}

.admin-user-status-main {
    display: grid;
    grid-template-columns: minmax(220px, 360px) auto;
    gap: 12px;
    align-items: center;
}

.admin-user-status-select {
    width: 100% !important;
    max-width: 360px !important;
    min-height: 46px;
    font-weight: 700;
}

.admin-user-status-help {
    display: block;
    margin-top: 8px;
    line-height: 1.45;
}

@media (max-width: 767.98px) {
    .admin-user-status-main {
        grid-template-columns: 1fr;
    }

    .admin-user-status-select {
        max-width: 100% !important;
    }
}

/* =========================================================
   Admin/user: нормальный вид селектора статуса пользователя
   ========================================================= */
.admin-user-status-panel {
    width: 100% !important;
    max-width: 520px !important;
}

.admin-user-status-panel .admin-user-status-select,
select.admin-user-status-select {
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 52px 0 18px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(89, 175, 191, 0.52) !important;
    background-color: rgba(12, 31, 50, 0.98) !important;
    color: #eaf8ff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 54px !important;
    cursor: pointer !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
}

.admin-user-status-panel .admin-user-status-select:focus,
select.admin-user-status-select:focus {
    border-color: rgba(35, 213, 221, 0.8) !important;
    box-shadow: 0 0 0 3px rgba(35, 213, 221, 0.12) !important;
    outline: none !important;
}

.admin-user-status-panel .admin-user-status-select option,
select.admin-user-status-select option {
    background: #0c1f32 !important;
    color: #eaf8ff !important;
    font-weight: 700 !important;
}

.admin-user-status-main {
    display: block !important;
}

.admin-user-status-badge#statusPreviewBadge {
    display: none !important;
}

.admin-user-status-help {
    display: block !important;
    margin-top: 8px !important;
    line-height: 1.45 !important;
}

.admin-user-order-modal .admin-order-status-badge,
.admin-user-order-modal .badge {
    display: inline-flex !important;
    align-items: center;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
    text-align: left !important;
    padding: 8px 12px !important;
}

.admin-user-order-modal .admin-order-info-item,
.admin-user-order-modal .admin-order-info-value,
.admin-user-order-modal td {
    min-width: 0 !important;
    max-width: 100% !important;
}