/* ==========================================================================
   EVSMM MASTER STYLESHEET — PRODUCTION CLEANED & POLISHED
   Brand: Crimson Red (#dc2626) | Surfaces: Crisp White & Slate Light Canvas
   ========================================================================== */

:root {
  /* Brand Red Accents */
  --ev-red: #dc2626;
  --ev-red-hover: #b91c1c;
  --ev-red-glow: rgba(220, 38, 38, 0.28);
  --ev-red-subtle: rgba(220, 38, 38, 0.08);
  --ev-red-border: rgba(220, 38, 38, 0.25);

  /* Light Canvas Surfaces */
  --ev-bg-base: #f6f8fc;
  --ev-bg-surface: #ffffff;
  --ev-bg-elevated: #f8fafc;
  --ev-bg-input: #ffffff;

  /* Sophisticated Micro-Borders */
  --ev-border: #e2e8f0;
  --ev-border-input: #cbd5e1;
  --ev-border-focus: #dc2626;

  /* Typography */
  --ev-text-primary: #0f172a;
  --ev-text-secondary: #334155;
  --ev-text-muted: #64748b;
  --ev-white: #ffffff;

  /* Curves */
  --ev-radius-sm: 10px;
  --ev-radius-md: 16px;
  --ev-radius-lg: 22px;
  --ev-radius-pill: 9999px;

  /* Layered Shadows */
  --ev-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.02), 0 10px 25px -5px rgba(15, 23, 42, 0.05);
  --ev-shadow-hover: 0 20px 35px -10px rgba(15, 23, 42, 0.08), 0 0 20px rgba(220, 38, 38, 0.08);
  --ev-shadow-input: inset 0 2px 4px rgba(15, 23, 42, 0.02);

  --ev-transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   1. GLOBAL RESETS & CANVAS
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: var(--ev-bg-base) !important;
  color: var(--ev-text-primary) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background-image: 
    radial-gradient(circle at 10% 10%, rgba(220, 38, 38, 0.035) 0%, transparent 40%),
    radial-gradient(circle at 90% 90%, rgba(220, 38, 38, 0.025) 0%, transparent 40%);
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--ev-bg-base);
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: var(--ev-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ev-red);
}

/* ==========================================================================
   2. GUEST NAVBAR (LOGGED-OUT PUBLIC BAR)
   ========================================================================== */
.evsmm-guest-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 78px;
  background: #ffffff !important;
  border-bottom: 1px solid var(--ev-border) !important;
  z-index: 1000;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.guest-nav-inner {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.guest-brand-anchor {
  display: flex;
  align-items: center;
  text-decoration: none !important;
}

.guest-nav-logo {
  max-height: 42px !important;
  max-width: 200px !important;
  width: auto !important;
  object-fit: contain !important;
}

.guest-text-logo {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  text-transform: uppercase;
}

.guest-right-cluster {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-lang-toggle {
  background: #f8fafc !important;
  border: 1.5px solid var(--ev-border) !important;
  color: var(--ev-text-secondary) !important;
  font-weight: 700 !important;
  font-size: 0.86rem !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.guest-language-dropdown .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid var(--ev-border) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  border-radius: 8px !important;
  padding: 8px 0 !important;
}

.guest-language-dropdown .dropdown-menu a {
  color: var(--ev-text-secondary) !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
}

.guest-language-dropdown .dropdown-menu a:hover {
  background: var(--ev-red-subtle) !important;
  color: var(--ev-red) !important;
}

.guest-nav-list {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.guest-nav-item a {
  text-decoration: none !important;
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  color: var(--ev-text-secondary) !important;
  padding: 9px 18px !important;
  border-radius: 8px !important;
  transition: var(--ev-transition);
}

.guest-nav-item a:hover {
  color: var(--ev-red) !important;
  background: var(--ev-red-subtle) !important;
}

.guest-nav-item.active a {
  background: var(--ev-red) !important;
  color: var(--ev-white) !important;
  box-shadow: 0 6px 18px var(--ev-red-glow) !important;
}

/* ==========================================================================
   3. EVSMM LANDING MASTER SUITE (ALL 9 CLIENT SECTIONS)
   Ambient Canvas, Cyber Grid, 5 Clickable Platforms, Route Pipeline,
   Auto-Sliding Testimonials, SMM Profit Simulator, and Crimson Red Footer
   ========================================================================== */

.evsmm-landing-universe {
  width: 100%;
  overflow-x: hidden;
  position: relative;
  background-color: #f6f8fc;
  /* Cyber Grid Texture with Smooth Radial Fade Mask */
  background-image: 
    linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Ambient Particles Canvas Layer */
#evsmm-ambient-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.landing-container {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.section-tag-red {
  display: inline-block;
  background: var(--ev-red-subtle);
  border: 1.5px solid var(--ev-red-border);
  color: var(--ev-red);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 5px 14px;
  border-radius: var(--ev-radius-pill);
  margin-bottom: 14px;
}

.section-heading-dark {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  letter-spacing: -0.6px;
  margin: 0 0 12px;
}

.section-subtext {
  font-size: 1.05rem;
  color: var(--ev-text-muted);
  line-height: 1.6;
  margin: 0;
}

.section-center-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 50px;
}

/* ================= 1. HERO SECTION ================= */
.evsmm-landing-hero {
  padding: 60px 0 80px;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--ev-border);
}

.landing-hero-grid {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 60px;
  align-items: center;
}

.live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-pill);
  padding: 6px 16px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  margin-bottom: 20px;
}

.beacon-pulse-red {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ev-red);
  box-shadow: 0 0 8px var(--ev-red);
}

.hero-display-title {
  font-size: 3.3rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  line-height: 1.12;
  letter-spacing: -1.2px;
  margin: 0 0 18px;
}

.crimson-highlight {
  color: var(--ev-red);
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-summary-text {
  font-size: 1.08rem;
  color: var(--ev-text-muted);
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 560px;
}

/* Rate Ticker Chips */
.hero-rate-ticker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.ticker-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.02);
  transition: var(--ev-transition);
}

.ticker-chip:hover {
  border-color: var(--ev-red);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.12);
}

.chip-platform {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ev-text-primary);
}

.chip-rate {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ev-text-muted);
}

.chip-rate.text-red {
  color: var(--ev-red);
}

.hero-stats-ribbon {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  padding: 14px 24px;
  border-radius: 14px;
  box-shadow: var(--ev-shadow-card);
  width: fit-content;
  margin-bottom: 22px;
}

.stat-pill-item {
  display: flex;
  flex-direction: column;
}

.stat-pill-item strong {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  letter-spacing: -0.5px;
}

.stat-pill-item strong.text-red {
  color: var(--ev-red);
}

.stat-pill-item span {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ev-text-muted);
  text-transform: uppercase;
}

.stat-divider {
  width: 1px;
  height: 28px;
  background: var(--ev-border);
}

.hero-security-badges {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.sec-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ev-text-secondary);
}

/* Auth Capsule Card */
.auth-capsule-card {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  padding: 38px 34px;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.08);
  position: relative;
  overflow: hidden;
}

.auth-capsule-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

.auth-capsule-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--ev-border);
}

.capsule-heading {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 2px;
  letter-spacing: -0.3px;
}

.capsule-subtext {
  font-size: 0.8rem;
  color: var(--ev-text-muted);
}

.badge-encryption {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}

.landing-input-group {
  margin-bottom: 18px;
}

.landing-label {
  display: block;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  margin-bottom: 6px;
}

.label-split-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.link-forgot-pass {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ev-red);
  text-decoration: none !important;
}

.landing-input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.landing-field-icon {
  position: absolute;
  left: 16px;
  width: 18px !important;
  height: 18px !important;
  color: #94a3b8;
  pointer-events: none;
}

.landing-input-box .form-control {
  background: #f8fafc !important;
  border: 1.5px solid var(--ev-border-input) !important;
  border-radius: 10px !important;
  height: 50px !important;
  padding-left: 48px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--ev-text-primary) !important;
  box-shadow: var(--ev-shadow-input) !important;
  transition: var(--ev-transition);
}

.landing-input-box .form-control:focus {
  border-color: var(--ev-red) !important;
  box-shadow: 0 0 0 3.5px var(--ev-red-subtle) !important;
  background: #ffffff !important;
}

.auth-divider-rule {
  position: relative;
  text-align: center;
  margin: 18px 0;
}

.auth-divider-rule::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ev-border);
}

.auth-divider-rule span {
  position: relative;
  background: #ffffff;
  padding: 0 12px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ev-text-muted);
}

.btn-terminal-submit {
  width: 100%;
  height: 52px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 25px var(--ev-red-glow) !important;
  transition: var(--ev-transition);
}

.btn-terminal-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(220, 38, 38, 0.4) !important;
}

.capsule-footer-redirect {
  text-align: center;
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--ev-text-muted);
}

.link-to-register {
  color: var(--ev-red);
  font-weight: 800;
  text-decoration: none !important;
  margin-left: 6px;
}

/* ================= 2. INFRASTRUCTURE & FOUNDATION ================= */
.evsmm-foundation-section {
  padding: 90px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--ev-border);
}

.foundation-split-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 60px;
  align-items: center;
}

.foundation-editorial p {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 18px;
}

.foundation-cards-side {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.foundation-metric-tile {
  background: #f8fafc;
  border: 1.5px solid var(--ev-border);
  border-radius: 16px;
  padding: 26px 22px;
  box-shadow: var(--ev-shadow-card);
  transition: var(--ev-transition);
}

.foundation-metric-tile:hover {
  border-color: var(--ev-red);
  transform: translateY(-3px);
  box-shadow: var(--ev-shadow-hover);
}

.metric-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--ev-red-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.tile-number {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  letter-spacing: -0.5px;
}

.tile-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ev-text-muted);
  line-height: 1.4;
  display: block;
  margin-top: 4px;
}

/* ================= 3. WHY EVSMM SECTION ================= */
.evsmm-why-section {
  padding: 50px 0;
  background: #f6f8fc;
}

.why-banner-card {
  background: linear-gradient(135deg, #151824 0%, #0d0f17 100%);
  border: 1.5px solid rgba(220, 38, 38, 0.35);
  border-radius: 24px;
  padding: 50px 48px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 0 35px rgba(220, 38, 38, 0.12);
}

.why-badge {
  display: inline-block;
  background: rgba(220, 38, 38, 0.2);
  border: 1px solid var(--ev-red);
  color: #fca5a5;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--ev-radius-pill);
  margin-bottom: 14px;
}

.why-card-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}

.why-card-text {
  font-size: 1.08rem;
  color: #cbd5e1;
  line-height: 1.7;
  margin: 0;
}

/* ================= 9. COMPARISON MATRIX ================= */
.evsmm-comparison-section {
  padding: 90px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--ev-border);
}

.comparison-card-wrapper {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: 20px;
  box-shadow: var(--ev-shadow-card);
  overflow: hidden;
  position: relative;
}

.comparison-card-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

.comparison-table {
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
}

.comparison-table th {
  background: #f8fafc !important;
  color: var(--ev-text-muted) !important;
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 18px 24px !important;
  border-bottom: 1.5px solid var(--ev-border) !important;
}

.comparison-table td {
  padding: 18px 24px !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--ev-border) !important;
}

.col-evsmm {
  background: #fffcfc !important;
}

.evsmm-head-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crown-badge {
  font-size: 0.68rem;
  font-weight: 900;
  background: var(--ev-red);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
}

.feature-title {
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--ev-text-primary);
}

.evsmm-val {
  font-size: 0.94rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  background: #fffcfc !important;
}

.evsmm-val.text-red {
  color: var(--ev-red);
}

.badge-check {
  display: inline-block;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.others-val {
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
}

.badge-cross {
  display: inline-block;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* ================= 4. 5 CLICKABLE PLATFORM CATALOGUE CARDS ================= */
.evsmm-services-showcase {
  padding: 90px 0;
  background: #f6f8fc;
  border-bottom: 1px solid var(--ev-border);
}

.services-five-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.card-link-block {
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
}

.service-showcase-card {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: 20px;
  padding: 28px 22px;
  box-shadow: var(--ev-shadow-card);
  transition: var(--ev-transition);
}

.service-showcase-card:hover {
  border-color: var(--ev-red);
  transform: translateY(-4px);
  box-shadow: var(--ev-shadow-hover);
}

.service-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.ig-gradient { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.yt-gradient { background: #ff0000; }
.tg-gradient { background: #229ed9; }
.fb-gradient { background: #1877f2; }
.tt-gradient { background: #000000; }

.service-card-heading {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 10px;
}

.service-card-body {
  font-size: 0.88rem;
  color: var(--ev-text-muted);
  line-height: 1.55;
  margin: 0 0 20px;
  flex: 1;
}

.service-card-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ev-red);
  font-size: 0.86rem;
  font-weight: 800;
  transition: var(--ev-transition);
}

.service-showcase-card:hover .service-card-action {
  transform: translateX(4px);
}

/* ================= EMBEDDED SMM TOOL: RESELLER PROFIT SIMULATOR ================= */
.evsmm-tool-simulator-section {
  padding: 90px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--ev-border);
}

.simulator-card-split {
  background: #f8fafc;
  border: 1.5px solid var(--ev-border);
  border-radius: 24px;
  padding: 50px 48px;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 60px;
  align-items: center;
  box-shadow: var(--ev-shadow-card);
}

.simulator-title {
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 10px 0 14px;
  letter-spacing: -0.5px;
}

.simulator-desc {
  font-size: 1.05rem;
  color: var(--ev-text-muted);
  line-height: 1.6;
  margin-bottom: 22px;
}

.simulator-bullet-perks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
}

.sim-perk-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ev-text-secondary);
}

.btn-tool-start {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  background: var(--ev-red);
  color: #ffffff !important;
  font-size: 0.98rem;
  font-weight: 900;
  border-radius: var(--ev-radius-sm);
  text-decoration: none !important;
  box-shadow: 0 6px 18px var(--ev-red-glow);
  transition: var(--ev-transition);
}

.btn-tool-start:hover {
  background: var(--ev-red-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--ev-red-glow);
}

.simulator-calculator-side {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: 18px;
  padding: 32px 30px;
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.03);
}

.slider-block {
  margin-bottom: 22px;
}

.slider-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sim-slider-label {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ev-text-primary);
}

.sim-slider-val {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--ev-red);
}

.sim-range-slider {
  width: 100%;
  height: 8px;
  border-radius: 6px;
  background: #cbd5e1;
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.sim-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ev-red);
  cursor: pointer;
  box-shadow: 0 0 10px var(--ev-red-glow);
}

.sim-calculation-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.calc-tile {
  background: #f8fafc;
  border: 1px solid var(--ev-border);
  border-radius: 12px;
  padding: 14px 16px;
}

.calc-caption {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ev-text-muted);
  text-transform: uppercase;
}

.calc-num {
  display: block;
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin-top: 4px;
}

.calc-num.text-red {
  color: var(--ev-red);
}

.sim-profit-banner {
  background: #fff5f5;
  border: 1.5px solid var(--ev-red-border);
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profit-label {
  display: block;
  font-size: 0.92rem;
  font-weight: 900;
  color: #7f1d1d;
}

.profit-sub {
  font-size: 0.74rem;
  color: var(--ev-text-muted);
}

.profit-figure {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--ev-red);
}

/* ================= 5. CONNECTED ROUTE / JOURNEY PIPELINE ================= */
.evsmm-steps-section {
  padding: 90px 0;
  background: #f6f8fc;
  border-bottom: 1px solid var(--ev-border);
}

.pipeline-route-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}

/* Route Line Linking the Steps */
.pipeline-route-container::before {
  content: '';
  position: absolute;
  top: 48px;
  left: 60px;
  right: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
  z-index: 1;
}

.pipeline-station {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: 18px;
  padding: 30px 24px;
  position: relative;
  z-index: 2;
  box-shadow: var(--ev-shadow-card);
  transition: var(--ev-transition);
}

.pipeline-station:hover {
  border-color: var(--ev-red);
  transform: translateY(-4px);
  box-shadow: var(--ev-shadow-hover);
}

.station-node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.station-number {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--ev-red);
}

.station-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ev-red);
  box-shadow: 0 0 8px var(--ev-red);
}

.station-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 8px;
}

.station-text {
  font-size: 0.88rem;
  color: var(--ev-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ================= 6. AUTO-SLIDING TESTIMONIAL ENGINE ================= */
.evsmm-reviews-section {
  padding: 90px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--ev-border);
}

.reviews-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
}

.slider-arrow-controls {
  display: flex;
  gap: 10px;
}

.btn-slider-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  color: var(--ev-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--ev-transition);
}

.btn-slider-arrow:hover {
  border-color: var(--ev-red);
  color: var(--ev-red);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

.reviews-slider-track-wrap {
  overflow: hidden;
  width: 100%;
}

.reviews-slider-track {
  display: flex;
  gap: 24px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.review-slide-card {
  min-width: calc(50% - 12px);
  background: #f8fafc;
  border: 1.5px solid var(--ev-border);
  border-radius: 20px;
  padding: 34px 30px;
  box-shadow: var(--ev-shadow-card);
  box-sizing: border-box;
}

.review-author-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.author-avatar-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ev-red-subtle);
  border: 1.5px solid var(--ev-red-border);
  color: var(--ev-red);
  font-size: 1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.author-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ev-text-primary);
}

.author-role {
  font-size: 0.78rem;
  color: var(--ev-text-muted);
}

.star-rating {
  color: #f59e0b;
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.review-quote {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.65;
  margin: 0;
}

.slider-dots-container {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.slider-dot-btn {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.slider-dot-btn.active {
  background: var(--ev-red);
  width: 26px;
  border-radius: 10px;
}

/* ================= 7. 7 COMPREHENSIVE SEO FAQS ================= */
.evsmm-faq-section {
  padding: 90px 0;
  background: #f6f8fc;
  border-bottom: 1px solid var(--ev-border);
}

.faq-accordion-stack {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.faq-accordion-item {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.2s ease;
  position: relative;
}

.faq-accordion-item[open] {
  border-color: var(--ev-border-input);
  box-shadow: var(--ev-shadow-card);
}

.faq-accordion-item[open]::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--ev-red);
}

.faq-item-question {
  padding: 20px 24px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

.faq-item-question::-webkit-details-marker {
  display: none;
}

.faq-arrow-icon {
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.faq-accordion-item[open] .faq-arrow-icon {
  transform: rotate(180deg);
  color: var(--ev-red);
}

.faq-item-answer {
  padding: 0 24px 22px;
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.65;
}

/* ================= LANDING BLOG SECTION ================= */
.evsmm-landing-blog-section {
  padding: 90px 0;
  background: #ffffff;
  border-bottom: 1px solid var(--ev-border);
}

.btn-view-all-blog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  padding: 10px 20px;
  border-radius: var(--ev-radius-pill);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ev-text-primary) !important;
  text-decoration: none !important;
  box-shadow: var(--ev-shadow-card);
  transition: var(--ev-transition);
}

.btn-view-all-blog:hover {
  border-color: var(--ev-red);
  color: var(--ev-red) !important;
  transform: translateY(-2px);
}

.landing-blog-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.landing-blog-card {
  background: #f8fafc;
  border: 1.5px solid var(--ev-border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--ev-shadow-card);
  transition: var(--ev-transition);
}

.landing-blog-card:hover {
  background: #ffffff;
  border-color: var(--ev-red);
  transform: translateY(-4px);
  box-shadow: var(--ev-shadow-hover);
}

.landing-blog-img-box {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: #f1f5f9;
}

.landing-blog-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.landing-blog-card:hover .landing-blog-img-box img {
  transform: scale(1.05);
}

.landing-blog-card-body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-date-tag {
  display: inline-block;
  background: var(--ev-red-subtle);
  color: var(--ev-red);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 4px;
  width: fit-content;
  margin-bottom: 12px;
}

.landing-blog-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 10px;
  line-height: 1.4;
  letter-spacing: -0.3px;
}

.landing-blog-title a {
  color: var(--ev-text-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.landing-blog-title a:hover {
  color: var(--ev-red) !important;
}

.landing-blog-excerpt {
  font-size: 0.88rem;
  color: var(--ev-text-muted);
  line-height: 1.55;
  margin-bottom: 18px;
  flex: 1;
}

.landing-blog-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ev-red);
  text-decoration: none !important;
  transition: var(--ev-transition);
}

.landing-blog-card:hover .landing-blog-link {
  transform: translateX(3px);
}

@media (max-width: 992px) {
  .landing-blog-cards-grid {
    grid-template-columns: 1fr;
  }
}
/* ================= 8. INVERTED CRIMSON RED MASTER FOOTER ================= */
.evsmm-crimson-master-footer {
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  padding: 80px 0 30px;
}

.footer-columns-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 60px;
}

.footer-brand-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: #ffffff !important;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}

.dot-white {
  color: #ffffff;
}

.footer-brand-bio {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.88) !important;
  line-height: 1.65;
  margin-bottom: 22px;
  max-width: 380px;
}

.footer-server-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: var(--ev-radius-pill);
}

.pulse-dot-white {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff;
}

.footer-col-title {
  font-size: 0.88rem;
  font-weight: 900;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0 0 18px;
}

.footer-links-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.footer-links-list a {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  transition: var(--ev-transition);
}

.footer-links-list a:hover {
  color: #ffffff !important;
  transform: translateX(4px);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.footer-bottom-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  flex-wrap: wrap;
  gap: 16px;
}

.footer-copy-text {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.82);
}

.footer-safe-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
}

/* ================= RESPONSIVE BREAKPOINTS ================= */
@media (max-width: 1200px) {
  .services-five-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1100px) {
  .landing-hero-grid,
  .foundation-split-grid,
  .simulator-card-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pipeline-route-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .pipeline-route-container::before {
    display: none;
  }
  .footer-columns-grid {
    grid-template-columns: 1fr 1fr;
  }
  .review-slide-card {
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .hero-display-title {
    font-size: 2.3rem;
  }
  .services-five-grid,
  .pipeline-route-container,
  .foundation-cards-side {
    grid-template-columns: 1fr;
  }
  .footer-columns-grid {
    grid-template-columns: 1fr;
  }
  .hero-stats-ribbon {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .stat-divider {
    display: none;
  }
  .sim-calculation-summary-grid {
    grid-template-columns: 1fr;
  }
  .sim-profit-banner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

/* ==========================================================================
   9. LOGGED-IN CUSTOMER DASHBOARD (PRESERVED FULL INTERACTION SUITE)
   ========================================================================== */
.evsmm-app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.evsmm-sidebar {
  width: 270px;
  background: var(--ev-bg-surface);
  border-right: 1px solid var(--ev-border);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 24px 18px;
  flex-shrink: 0;
  z-index: 100;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.02);
}

.brand-block {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ev-border);
  margin-bottom: 22px;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
}

.brand-logo-svg {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.brand-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

.brand-sub {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--ev-text-muted);
  letter-spacing: 1px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  color: var(--ev-text-muted);
  text-decoration: none !important;
  font-size: 0.94rem;
  font-weight: 700;
  border-radius: var(--ev-radius-sm);
  transition: var(--ev-transition);
  height: 48px;
}

.nav-item a svg,
.nav-item a img,
.nav-item a .nav-icon {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}

.nav-item.active a {
  background: var(--ev-red) !important;
  color: var(--ev-white) !important;
  box-shadow: 0 8px 20px var(--ev-red-glow);
}

.nav-item.active a svg {
  fill: var(--ev-white) !important;
}

.nav-item:not(.active) a:hover {
  background: var(--ev-bg-elevated);
  color: var(--ev-red) !important;
  transform: translateX(4px);
}

.sidebar-footer {
  border-top: 1px solid var(--ev-border);
  padding-top: 18px;
}

.server-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--ev-text-muted);
}

.pulse-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.evsmm-main-stage {
  flex: 1;
  padding: 30px 42px;
  max-width: 1540px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  perspective: 1200px;
}

.evsmm-top-showcase {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 22px;
  transform-style: preserve-3d;
}

.showcase-card {
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius-md);
  padding: 24px;
  box-shadow: var(--ev-shadow-card);
  transition: transform 0.15s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
  transform-style: preserve-3d;
  position: relative;
}

.showcase-card:hover {
  border-color: var(--ev-border-input);
  box-shadow: var(--ev-shadow-hover);
}

.showcase-balance {
  border-top: 3.5px solid var(--ev-red);
}

.card-caption {
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--ev-text-muted);
  letter-spacing: 0.6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
}

.badge-tier {
  background: var(--ev-red-subtle);
  border: 1px solid var(--ev-red-border);
  color: var(--ev-red);
  padding: 3px 9px;
  border-radius: var(--ev-radius-pill);
  font-weight: 800;
  font-size: 0.72rem;
}

.card-metric-val {
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 10px 0;
  letter-spacing: -0.5px;
}

.btn-showcase-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--ev-red);
  color: var(--ev-white) !important;
  text-decoration: none !important;
  border-radius: var(--ev-radius-sm);
  font-size: 0.88rem;
  font-weight: 800;
  box-shadow: 0 6px 18px var(--ev-red-glow);
  transition: var(--ev-transition);
}

.btn-showcase-add:hover {
  background: var(--ev-red-hover);
  transform: translateY(-2px);
}

.card-sub-info {
  font-size: 0.82rem;
  color: var(--ev-text-muted);
}

.account-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 8px;
}

.account-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ev-text-secondary);
  text-decoration: none !important;
  padding: 6px 12px;
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border);
  border-radius: 6px;
  transition: var(--ev-transition);
}

.account-link:hover {
  background: var(--ev-red-subtle);
  border-color: var(--ev-red-border);
  color: var(--ev-red);
}

.evsmm-workspace {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 30px;
  align-items: start;
}

.order-form-container {
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  padding: 34px;
  box-shadow: var(--ev-shadow-card);
  position: relative;
}

.order-form-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 3.5px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

.panel-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--ev-border);
}

.panel-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.badge-status-pulse {
  background: var(--ev-red-subtle);
  color: var(--ev-red);
  padding: 4px 12px;
  border-radius: var(--ev-radius-pill);
  font-size: 0.74rem;
  font-weight: 800;
  border: 1px solid var(--ev-red-border);
}

.form-group {
  margin-bottom: 22px;
}

.control-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ev-text-primary) !important;
  margin-bottom: 8px;
}

.form-control,
select.form-control,
input.form-control,
textarea.form-control,
.select-evsmm {
  background-color: var(--ev-bg-surface) !important;
  border: 1.5px solid var(--ev-border-input) !important;
  color: var(--ev-text-primary) !important;
  border-radius: var(--ev-radius-sm) !important;
  height: 52px !important;
  padding: 12px 18px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  box-shadow: var(--ev-shadow-input) !important;
  outline: none !important;
  transition: var(--ev-transition);
}

.form-control:focus,
select.form-control:focus,
input.form-control:focus,
.select-evsmm:focus {
  border-color: var(--ev-red) !important;
  box-shadow: 0 0 0 3.5px var(--ev-red-subtle), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* PerfectPanel Dynamic Search Cleared */
.evsmm-search-wrapper,
#new-order-search,
.search-dropdown {
  position: relative !important;
  width: 100% !important;
}

.evsmm-search-wrapper .input-wrapper,
#new-order-search .input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.evsmm-search-wrapper button,
#new-order-search button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.evsmm-search-glyph {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.evsmm-search-wrapper #template-input,
#new-order-search input,
#template-input {
  padding-left: 56px !important;
  padding-right: 20px !important;
  background-color: #ffffff !important;
  border: 1.5px solid var(--ev-border-input) !important;
  border-radius: var(--ev-radius-sm) !important;
  height: 52px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--ev-text-primary) !important;
}

.quick-chips-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 24px;
}

.chips-label {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ev-text-muted);
  text-transform: uppercase;
}

.chip-action {
  padding: 8px 18px;
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-pill);
  color: var(--ev-text-primary);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
  transition: var(--ev-transition);
}

.chip-action:hover {
  background: var(--ev-red-subtle);
  border-color: var(--ev-red);
  color: var(--ev-red);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

.input-charge-view {
  font-weight: 900 !important;
  color: var(--ev-red) !important;
  font-size: 1.3rem !important;
  background: #fff5f5 !important;
  border: 1.5px solid var(--ev-red-border) !important;
}

.btn-launch-order,
#order-form button[type="submit"] {
  width: 100%;
  padding: 17px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: var(--ev-white) !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border: none !important;
  border-radius: var(--ev-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 10px 25px var(--ev-red-glow) !important;
  transition: var(--ev-transition);
}

.btn-launch-order:hover,
#order-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(220, 38, 38, 0.38) !important;
}

/* Sticky Live Receipt */
.receipt-column {
  position: -webkit-sticky;
  position: sticky;
  top: 24px;
  perspective: 1000px;
}

.receipt-box {
  background: var(--ev-bg-surface);
  border: 1px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  padding: 30px;
  box-shadow: var(--ev-shadow-card);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.2s ease;
}

.receipt-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

.receipt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed var(--ev-border);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.receipt-tagline {
  font-size: 0.74rem;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ev-text-muted);
}

.receipt-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0;
}

.receipt-live-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  padding: 4px 11px;
  border-radius: var(--ev-radius-pill);
  font-size: 0.72rem;
  font-weight: 800;
}

.live-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
}

.receipt-data-table {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}

.receipt-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: var(--ev-text-muted);
}

.receipt-white {
  color: var(--ev-text-primary);
  font-weight: 800;
}

.service-name-trim {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.receipt-hr {
  height: 1px;
  background: dashed var(--ev-border);
  margin: 6px 0;
}

.receipt-charge-summary {
  background: #fff5f5;
  border: 1.5px solid var(--ev-red-border);
  border-radius: var(--ev-radius-sm);
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.summary-label {
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ev-text-secondary);
}

.summary-sub {
  font-size: 0.72rem;
  color: var(--ev-text-muted);
}

.summary-figure {
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--ev-red);
}

.receipt-perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--ev-text-secondary);
  font-weight: 600;
}

.receipt-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.receipt-perks svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ==========================================================================
   10. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1100px) {
  .hero-container-wide,
  .roi-card-split,
  .vip-cta-box,
  .evsmm-workspace,
  .evsmm-top-showcase {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .matrix-grid-four {
    grid-template-columns: repeat(2, 1fr);
  }
  .vip-cta-box {
    flex-direction: column;
    text-align: center;
  }
  .evsmm-sidebar {
    display: none;
  }
  .evsmm-main-stage {
    padding: 20px;
  }
  .chip-left, .chip-right {
    display: none; /* Hide holographic chips on mobile to prevent overflow */
  }
}

@media (max-width: 640px) {
  .matrix-grid-four,
  .mockup-metrics-grid,
  .roi-results-pod {
    grid-template-columns: 1fr;
  }
  .hero-brand-headline {
    font-size: 2.2rem;
  }
}
/* ==========================================================================
   EVSMM SERVICES CATALOG & WHOLESALE PRICING ENGINE
   ========================================================================== */

.evsmm-services-workspace {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 1. Control & Filter Header Bar */
.services-control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.control-left-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Category Filter Dropdown Pill */
.btn-category-filter {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: var(--ev-radius-sm) !important;
  padding: 11px 18px !important;
  color: var(--ev-text-primary) !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: var(--ev-shadow-card) !important;
  transition: var(--ev-transition) !important;
  cursor: pointer;
}

.btn-category-filter:hover {
  border-color: var(--ev-red) !important;
  transform: translateY(-1px);
}

.filter-icon {
  color: var(--ev-red);
}

.category-filter-dropdown .dropdown-menu {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: var(--ev-radius-sm) !important;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1) !important;
  padding: 8px 0 !important;
  max-height: 380px;
  overflow-y: auto;
  min-width: 280px;
}

.category-filter-dropdown .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--ev-text-secondary) !important;
  text-decoration: none !important;
  transition: var(--ev-transition);
}

.category-filter-dropdown .dropdown-item:hover {
  background: var(--ev-red-subtle) !important;
  color: var(--ev-red) !important;
}

.btn-guest-curr {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: var(--ev-radius-sm) !important;
  padding: 11px 16px !important;
  color: var(--ev-text-secondary) !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
}

/* Search Bar on Right */
.services-search-slot {
  flex: 1;
  max-width: 380px;
}

.services-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.search-glyph-icon {
  position: absolute;
  left: 16px;
  color: var(--ev-red);
  pointer-events: none;
  z-index: 3;
}

.services-search-input {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border-input) !important;
  border-radius: var(--ev-radius-sm) !important;
  height: 48px !important;
  padding-left: 48px !important;
  padding-right: 44px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--ev-text-primary) !important;
  box-shadow: var(--ev-shadow-input) !important;
  transition: var(--ev-transition);
}

.services-search-input:focus {
  border-color: var(--ev-red) !important;
  box-shadow: 0 0 0 3px var(--ev-red-subtle) !important;
}

.btn-search-trigger {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--ev-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
}

/* 2. Main Services Table Card */
.services-table-card {
  background: var(--ev-bg-surface);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  box-shadow: var(--ev-shadow-card);
  overflow: hidden;
  position: relative;
}

.services-table-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

.evsmm-table {
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
}

.evsmm-table > thead > tr > th {
  background: #f8fafc !important;
  border-bottom: 1.5px solid var(--ev-border) !important;
  border-top: none !important;
  color: var(--ev-text-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 16px 20px !important;
}

.tooltip-hint {
  color: var(--ev-text-muted);
  margin-left: 4px;
  cursor: pointer;
}

/* Category Section Header Row */
.category-header-row td {
  background: linear-gradient(135deg, #181a24 0%, #10121a 100%) !important;
  color: #ffffff !important;
  padding: 14px 20px !important;
  border-top: 2px solid var(--ev-border) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cat-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cat-banner-title {
  font-size: 0.96rem;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: #ffffff;
}

/* Service Data Rows */
.service-data-row td {
  padding: 16px 20px !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--ev-border) !important;
  background: #ffffff !important;
  transition: background 0.15s ease;
}

.service-data-row:hover td {
  background: #fafbfe !important;
}

/* Columns */
.service-id-pill {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ev-text-muted);
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border);
  padding: 4px 8px;
  border-radius: 6px;
}

.service-name-text {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ev-text-primary);
  line-height: 1.45;
}

/* Red Rate Badge */
.rate-badge-wrap {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.rate-accent {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--ev-red);
  letter-spacing: -0.5px;
}

.per-k {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ev-text-muted);
}

.limit-pill {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ev-text-secondary);
}

.speed-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--ev-radius-pill);
}

/* Description Action Button */
.btn-service-desc {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border) !important;
  color: var(--ev-text-secondary) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  padding: 6px 14px !important;
  border-radius: var(--ev-radius-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer;
  transition: var(--ev-transition) !important;
}

.btn-service-desc:hover {
  border-color: var(--ev-red) !important;
  color: var(--ev-red) !important;
  background: var(--ev-red-subtle) !important;
  transform: translateY(-1px);
}

.favorite-star-btn {
  cursor: pointer;
  font-size: 0.95rem;
}
.text-gold { color: #f59e0b !important; }

/* Responsive adjustments */
@media (max-width: 900px) {
  .services-control-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .services-search-slot {
    max-width: 100%;
  }
}
/* ==========================================================================
   EVSMM SIGN UP & REGISTRATION SUITE (TWO-COLUMN LUXURY ENGINE)
   ========================================================================== */

.evsmm-signup-workspace {
  width: 100%;
  padding: 40px 32px 80px;
  max-width: 1360px;
  margin: 0 auto;
}

.signup-container-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: start;
}

/* 1. Left: White Registration Card */
.signup-card-white {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  padding: 40px 36px;
  box-shadow: var(--ev-shadow-card);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.signup-card-white::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

.signup-card-header {
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--ev-border);
}

.signup-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--ev-radius-pill);
  margin-bottom: 12px;
}

.pulse-dot-green {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
}

.signup-title {
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}

.signup-subtitle {
  font-size: 0.88rem;
  color: var(--ev-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Fields Grid: 2-Columns for Multiple Fields */
.signup-fields-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.signup-field-group {
  margin-bottom: 0;
}

.signup-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  margin-bottom: 6px;
}

.req-star {
  color: var(--ev-red);
}

.input-wrap-tactile {
  position: relative;
}

.signup-input {
  background: #f8fafc !important;
  border: 1.5px solid var(--ev-border-input) !important;
  border-radius: var(--ev-radius-sm) !important;
  height: 50px !important;
  padding: 12px 16px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--ev-text-primary) !important;
  box-shadow: var(--ev-shadow-input) !important;
  transition: var(--ev-transition);
}

.signup-input:focus {
  border-color: var(--ev-red) !important;
  box-shadow: 0 0 0 3.5px var(--ev-red-subtle) !important;
  background: #ffffff !important;
}

/* Terms Checkbox */
.signup-terms-group {
  margin: 20px 0;
}

.terms-custom-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ev-text-secondary);
  cursor: pointer;
}

.terms-accept-checkbox {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--ev-red);
  cursor: pointer;
}

.terms-link {
  color: var(--ev-red);
  text-decoration: underline;
  font-weight: 700;
}

/* Launch Button */
.btn-signup-submit {
  width: 100%;
  height: 52px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  border: none !important;
  border-radius: var(--ev-radius-sm) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 25px var(--ev-red-glow) !important;
  transition: var(--ev-transition);
}

.btn-signup-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(220, 38, 38, 0.4) !important;
}

/* Divider & Google Auth */
.signup-divider {
  position: relative;
  text-align: center;
  margin: 22px 0;
}

.signup-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ev-border);
}

.signup-divider span {
  position: relative;
  background: #ffffff;
  padding: 0 12px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ev-text-muted);
}

.google-auth-signup-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.signup-card-footer {
  text-align: center;
  margin-top: 22px;
  font-size: 0.9rem;
  color: var(--ev-text-muted);
}

.login-redirect-link {
  color: var(--ev-red);
  font-weight: 800;
  text-decoration: none !important;
  margin-left: 6px;
}

/* 2. Right: Agency Value Guarantee Column */
.signup-info-col {
  padding-top: 10px;
}

.info-tag-red {
  display: inline-block;
  background: var(--ev-red-subtle);
  border: 1px solid var(--ev-red-border);
  color: var(--ev-red);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--ev-radius-pill);
  margin-bottom: 14px;
}

.info-headline {
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}

.info-subtext {
  font-size: 1.05rem;
  color: var(--ev-text-muted);
  line-height: 1.6;
  margin: 0 0 32px;
}

.signup-perks-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 36px;
}

.perk-card {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
  transition: var(--ev-transition);
}

.perk-card:hover {
  border-color: var(--ev-border-input);
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-card);
}

.perk-icon-slot {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--ev-red-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.perk-title {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  margin-bottom: 4px;
}

.perk-desc {
  font-size: 0.88rem;
  color: var(--ev-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Trust Bar */
.signup-trust-bar {
  display: flex;
  gap: 32px;
  padding-top: 24px;
  border-top: 1px dashed var(--ev-border);
}

.trust-stat {
  display: flex;
  flex-direction: column;
}

.trust-number {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  letter-spacing: -0.5px;
}

.trust-number.text-red {
  color: var(--ev-red);
}

.trust-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ev-text-muted);
  margin-top: 2px;
}

/* Responsiveness */
@media (max-width: 1080px) {
  .signup-container-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
/* ==========================================================================
   EVSMM ORDER HISTORY & TELEMETRY TABLE (POLISHED RED & WHITE)
   ========================================================================== */

.evsmm-orders-workspace {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 1. Header & Filter Bar */
.orders-header-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.orders-nav-scroll-wrapper {
  overflow-x: auto;
  max-width: 100%;
}

.orders-filter-pills {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.filter-pill-item a {
  display: inline-block;
  padding: 9px 18px;
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-pill);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ev-text-secondary);
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.03);
  transition: var(--ev-transition);
}

.filter-pill-item a:hover {
  border-color: var(--ev-red);
  color: var(--ev-red);
  transform: translateY(-1px);
}

.filter-pill-item.active a {
  background: var(--ev-red) !important;
  border-color: var(--ev-red) !important;
  color: var(--ev-white) !important;
  box-shadow: 0 6px 18px var(--ev-red-glow) !important;
}

/* Search Form */
.orders-search-slot {
  flex: 1;
  max-width: 360px;
}

.orders-search-form {
  margin: 0;
  width: 100%;
}

.orders-input-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.orders-search-input {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border-input) !important;
  border-radius: var(--ev-radius-sm) !important;
  height: 48px !important;
  padding-left: 46px !important;
  padding-right: 44px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--ev-text-primary) !important;
  box-shadow: var(--ev-shadow-input) !important;
  transition: var(--ev-transition);
}

.orders-search-input:focus {
  border-color: var(--ev-red) !important;
  box-shadow: 0 0 0 3px var(--ev-red-subtle) !important;
}

.btn-orders-search {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--ev-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
}

/* 2. Master Table Card */
.orders-table-card {
  background: var(--ev-bg-surface);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  box-shadow: var(--ev-shadow-card);
  overflow: hidden;
  position: relative;
}

.orders-table-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

#orders-data-table {
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
}

#orders-data-table > thead > tr > th {
  background: #f8fafc !important;
  border-bottom: 1.5px solid var(--ev-border) !important;
  color: var(--ev-text-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 16px 20px !important;
}

.order-row-entry td {
  padding: 16px 20px !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--ev-border) !important;
  background: #ffffff !important;
  transition: background 0.15s ease;
}

.order-row-entry:hover td {
  background: #fafbfe !important;
}

/* Cell Components */
.order-id-badge {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border);
  padding: 4px 8px;
  border-radius: 6px;
}

.order-date-text {
  font-size: 0.84rem;
  color: var(--ev-text-muted);
  font-weight: 600;
}

.order-link-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
}

.target-profile-link {
  color: var(--ev-text-primary);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.target-profile-link:hover {
  color: var(--ev-red);
}

.btn-order-modal-trigger {
  background: var(--ev-red-subtle);
  border: 1px solid var(--ev-red-border);
  color: var(--ev-red);
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: var(--ev-transition);
}

.btn-order-modal-trigger:hover {
  background: var(--ev-red);
  color: #ffffff;
}

.order-charge-figure {
  font-size: 0.94rem;
  font-weight: 900;
  color: var(--ev-red);
}

.order-stat-neutral {
  font-size: 0.85rem;
  color: var(--ev-text-muted);
  font-weight: 600;
}

.order-stat-bold {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ev-text-primary);
}

.order-service-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ev-text-secondary);
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Polished Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--ev-radius-pill);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: capitalize;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.dot-green { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.dot-blue { background: #3b82f6; box-shadow: 0 0 6px #3b82f6; }
.dot-amber { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }
.dot-red { background: #ef4444; box-shadow: 0 0 6px #ef4444; }

.status-completed, .status-complete {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.status-inprogress, .status-in-progress, .status-processing {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.status-pending {
  background: #fefce8;
  border: 1px solid #fef08a;
  color: #854d0e;
}

.status-canceled, .status-partial {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.cancel-reason-hint {
  cursor: pointer;
  color: #ef4444;
  margin-left: 4px;
}

.order-remains-text {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ev-text-muted);
}

/* Refill & Actions Cluster */
.order-actions-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-order-refill {
  background: var(--ev-red-subtle);
  border: 1px solid var(--ev-red-border);
  color: var(--ev-red) !important;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: var(--ev-radius-pill);
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: var(--ev-transition);
}

.btn-order-refill:hover {
  background: var(--ev-red);
  color: #ffffff !important;
  transform: translateY(-1px);
}

.btn-order-refill.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-order-cancel {
  background: #ffffff;
  border: 1px solid var(--ev-border);
  color: var(--ev-text-muted) !important;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--ev-radius-pill);
  text-decoration: none !important;
}

.btn-order-cancel:hover {
  border-color: #ef4444;
  color: #ef4444 !important;
}

.refill-status-pill {
  font-size: 0.74rem;
  font-weight: 800;
  color: #22c55e;
}

/* Custom Modal Polish */
.evsmm-custom-modal {
  border-radius: var(--ev-radius-md) !important;
  border: 1px solid var(--ev-border) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
}

.custom-detail-group textarea {
  background: #f8fafc !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  color: var(--ev-text-primary) !important;
}

/* Empty State */
.empty-orders-cell {
  text-align: center;
  padding: 60px 20px !important;
}

.empty-orders-view h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  margin: 14px 0 4px;
}

.empty-orders-view p {
  font-size: 0.9rem;
  color: var(--ev-text-muted);
  margin: 0;
}

/* 3. Pagination Engine */
.orders-pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.evsmm-pagination {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-pill);
  box-shadow: var(--ev-shadow-card);
}

.evsmm-pagination li a {
  border: none !important;
  background: transparent !important;
  color: var(--ev-text-secondary) !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  padding: 8px 14px !important;
  border-radius: var(--ev-radius-pill) !important;
  transition: var(--ev-transition) !important;
}

.evsmm-pagination li a:hover {
  background: var(--ev-red-subtle) !important;
  color: var(--ev-red) !important;
}

.evsmm-pagination li.active a {
  background: var(--ev-red) !important;
  color: var(--ev-white) !important;
  box-shadow: 0 4px 12px var(--ev-red-glow) !important;
}

@media (max-width: 900px) {
  .orders-header-panel {
    flex-direction: column;
    align-items: stretch;
  }
  .orders-search-slot {
    max-width: 100%;
  }
}

/* ==========================================================================
   EVSMM ADD FUNDS & PAYMENT GATEWAY SUITE (RED & WHITE LUXURY)
   ========================================================================== */

.evsmm-funds-workspace {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 1. Deposit 2-Column Suite */
.funds-deposit-split {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 32px;
  align-items: start;
}

/* Left: Deposit Card */
.deposit-form-card {
  background: var(--ev-bg-surface);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  padding: 36px 34px;
  box-shadow: var(--ev-shadow-card);
  position: relative;
  overflow: hidden;
}

.deposit-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

.deposit-card-header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--ev-border);
}

.deposit-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--ev-radius-pill);
  margin-bottom: 10px;
}

.live-dot-green {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
}

.deposit-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 4px;
  letter-spacing: -0.5px;
}

.deposit-subtitle {
  font-size: 0.85rem;
  color: var(--ev-text-muted);
  margin: 0;
}

.funds-group {
  margin-bottom: 22px;
}

.funds-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  margin-bottom: 8px;
}

.select-funds {
  background-color: var(--ev-bg-surface) !important;
  border: 1.5px solid var(--ev-border-input) !important;
  border-radius: var(--ev-radius-sm) !important;
  height: 52px !important;
  font-weight: 700 !important;
  color: var(--ev-text-primary) !important;
}

/* Custom Currency Prefix Input */
.amount-input-box {
  position: relative;
  display: flex;
  align-items: center;
}

.currency-prefix {
  position: absolute;
  left: 18px;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--ev-red);
  pointer-events: none;
  z-index: 5;
}

.input-amount-funds {
  padding-left: 38px !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  color: var(--ev-text-primary) !important;
  height: 54px !important;
  border: 1.5px solid var(--ev-border-input) !important;
  border-radius: var(--ev-radius-sm) !important;
}

.input-amount-funds:focus {
  border-color: var(--ev-red) !important;
  box-shadow: 0 0 0 3.5px var(--ev-red-subtle) !important;
}

/* Quick Select Amount Chips */
.funds-chips-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.chips-caption {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ev-text-muted);
  text-transform: uppercase;
}

.chip-deposit {
  padding: 6px 14px;
  background: var(--ev-bg-elevated);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-pill);
  color: var(--ev-text-primary);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.02);
  transition: var(--ev-transition);
}

.chip-deposit:hover {
  background: var(--ev-red-subtle);
  border-color: var(--ev-red);
  color: var(--ev-red);
  transform: translateY(-1px);
}

/* Submit CTA */
.btn-deposit-launch {
  width: 100%;
  height: 54px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border: none !important;
  border-radius: var(--ev-radius-sm) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 25px var(--ev-red-glow) !important;
  transition: var(--ev-transition);
}

.btn-deposit-launch:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(220, 38, 38, 0.4) !important;
}

/* 2. Right: Perks & Telemetry Card */
.deposit-perks-card {
  background: var(--ev-bg-surface);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  padding: 34px 30px;
  box-shadow: var(--ev-shadow-card);
}

.perks-card-header {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--ev-border);
}

.perk-tagline {
  font-size: 0.74rem;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ev-red);
  letter-spacing: 0.5px;
}

.perks-headline {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 4px 0 0;
}

.perks-list-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}

.perk-tile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.perk-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ev-red-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tile-title {
  display: block;
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  margin-bottom: 2px;
}

.tile-desc {
  font-size: 0.82rem;
  color: var(--ev-text-muted);
  line-height: 1.5;
  margin: 0;
}

.deposit-support-note {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border);
  padding: 12px 16px;
  border-radius: var(--ev-radius-sm);
  font-size: 0.8rem;
  color: var(--ev-text-secondary);
}

/* 3. Bottom: Deposit Ledger Table */
.funds-history-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0;
}

.badge-history-count {
  background: var(--ev-red-subtle);
  border: 1px solid var(--ev-red-border);
  color: var(--ev-red);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--ev-radius-pill);
}

.funds-table-card {
  background: var(--ev-bg-surface);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  box-shadow: var(--ev-shadow-card);
  overflow: hidden;
  position: relative;
}

.tx-row-entry td {
  padding: 16px 20px !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--ev-border) !important;
  background: #ffffff !important;
}

.tx-id-badge {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ev-text-muted);
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border);
  padding: 4px 8px;
  border-radius: 6px;
}

.tx-date-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ev-text-muted);
}

.tx-method-pill {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border);
  padding: 5px 12px;
  border-radius: var(--ev-radius-pill);
}

.tx-amount-figure {
  font-size: 1.1rem;
  font-weight: 900;
  color: #166534;
}

.btn-download-invoice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-pill);
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ev-text-secondary) !important;
  text-decoration: none !important;
  transition: var(--ev-transition);
}

.btn-download-invoice:hover {
  border-color: var(--ev-red);
  color: var(--ev-red) !important;
  background: var(--ev-red-subtle);
  transform: translateY(-1px);
}

.funds-pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

@media (max-width: 992px) {
  .funds-deposit-split {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   EVSMM SUPPORT TICKETS & SLA SUITE (RED & WHITE LUXURY)
   ========================================================================== */

.evsmm-tickets-workspace {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 1. Top 2-Column Split */
.tickets-suite-split {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 32px;
  align-items: start;
}

/* Left: Form Card */
.ticket-create-card {
  background: var(--ev-bg-surface);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  padding: 36px 34px;
  box-shadow: var(--ev-shadow-card);
  position: relative;
  overflow: hidden;
}

.ticket-create-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

.ticket-card-header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--ev-border);
}

.ticket-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--ev-radius-pill);
  margin-bottom: 10px;
}

.live-beacon-green {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
}

.ticket-headline {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 4px;
  letter-spacing: -0.5px;
}

.ticket-subtext {
  font-size: 0.85rem;
  color: var(--ev-text-muted);
  margin: 0;
}

.ticket-group {
  margin-bottom: 20px;
}

.ticket-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  margin-bottom: 8px;
}

.select-ticket,
.input-ticket,
.textarea-ticket {
  background-color: var(--ev-bg-surface) !important;
  border: 1.5px solid var(--ev-border-input) !important;
  border-radius: var(--ev-radius-sm) !important;
  font-weight: 600 !important;
  color: var(--ev-text-primary) !important;
  box-shadow: var(--ev-shadow-input) !important;
  transition: var(--ev-transition);
}

.input-ticket {
  height: 50px !important;
  padding: 12px 16px !important;
}

.textarea-ticket {
  padding: 14px 16px !important;
  resize: vertical;
}

.input-ticket:focus,
.textarea-ticket:focus,
.select-ticket:focus {
  border-color: var(--ev-red) !important;
  box-shadow: 0 0 0 3.5px var(--ev-red-subtle) !important;
}

/* File Uploader Container */
.evsmm-uploader-wrap {
  margin-top: 8px;
}

.evsmm-uploader-wrap button,
.evsmm-uploader-wrap .btn {
  background: var(--ev-bg-elevated) !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: var(--ev-radius-pill) !important;
  color: var(--ev-text-secondary) !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  padding: 8px 18px !important;
  transition: var(--ev-transition) !important;
}

.evsmm-uploader-wrap button:hover,
.evsmm-uploader-wrap .btn:hover {
  border-color: var(--ev-red) !important;
  color: var(--ev-red) !important;
  background: var(--ev-red-subtle) !important;
}

/* Submit Action Button */
.btn-ticket-submit {
  width: 100%;
  height: 52px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border: none !important;
  border-radius: var(--ev-radius-sm) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 25px var(--ev-red-glow) !important;
  transition: var(--ev-transition);
}

.btn-ticket-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(220, 38, 38, 0.4) !important;
}

/* 2. Right: Telemetry & SLA Card */
.ticket-telemetry-card {
  background: var(--ev-bg-surface);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  padding: 34px 30px;
  box-shadow: var(--ev-shadow-card);
}

.telemetry-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--ev-border);
}

.telemetry-pill {
  font-size: 0.74rem;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ev-red);
  letter-spacing: 0.5px;
}

.telemetry-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 4px 0 0;
}

.telemetry-stats-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 24px;
}

.stat-caption {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ev-text-muted);
  text-transform: uppercase;
}

.stat-number {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin-top: 2px;
}

.telemetry-protocols-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}

.protocol-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.protocol-icon-slot {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ev-red-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.protocol-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  margin-bottom: 2px;
}

.protocol-desc {
  font-size: 0.82rem;
  color: var(--ev-text-muted);
  line-height: 1.5;
  margin: 0;
}

.telemetry-footer-note {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid var(--ev-border);
  padding: 12px 16px;
  border-radius: var(--ev-radius-sm);
  font-size: 0.8rem;
  color: var(--ev-text-secondary);
}

/* 3. Bottom: Tickets Table */
.tickets-history-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.history-meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.history-section-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0;
}

.badge-ticket-count {
  background: var(--ev-red-subtle);
  border: 1px solid var(--ev-red-border);
  color: var(--ev-red);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--ev-radius-pill);
}

.ticket-search-form {
  margin: 0;
}

.ticket-input-search-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 320px;
}

.ticket-search-input {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border-input) !important;
  border-radius: var(--ev-radius-sm) !important;
  height: 46px !important;
  padding-left: 44px !important;
  padding-right: 40px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--ev-text-primary) !important;
}

.ticket-search-input:focus {
  border-color: var(--ev-red) !important;
  box-shadow: 0 0 0 3px var(--ev-red-subtle) !important;
}

.btn-ticket-search-trigger {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--ev-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.tickets-table-card {
  background: var(--ev-bg-surface);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  box-shadow: var(--ev-shadow-card);
  overflow: hidden;
  position: relative;
}

.ticket-entry-row td {
  padding: 16px 20px !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--ev-border) !important;
  background: #ffffff !important;
}

.ticket-entry-row:hover td {
  background: #fafbfe !important;
}

.ticket-unread-highlight td {
  background: #fffcfc !important;
}

.ticket-id-badge {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ev-text-muted);
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border);
  padding: 4px 8px;
  border-radius: 6px;
}

.subject-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ticket-subject-link {
  color: var(--ev-text-primary);
  text-decoration: none !important;
  font-size: 0.92rem;
}

.unread-title {
  color: var(--ev-text-primary);
  font-weight: 900;
}

.badge-unread-pill {
  background: var(--ev-red);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--ev-radius-pill);
}

/* Status Badges */
.ticket-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--ev-radius-pill);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: capitalize;
}

.status-dot-mini {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-answered, .status-answer {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}
.status-answered .status-dot-mini { background: #22c55e; }

.status-pending, .status-open {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}
.status-pending .status-dot-mini,
.status-open .status-dot-mini { background: #3b82f6; }

.status-closed {
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border);
  color: var(--ev-text-muted);
}
.status-closed .status-dot-mini { background: #94a3b8; }

.ticket-time-text {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ev-text-muted);
}

.tickets-pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

@media (max-width: 992px) {
  .tickets-suite-split {
    grid-template-columns: 1fr;
  }
  .ticket-input-search-group {
    width: 100%;
  }
}
/* ==========================================================================
   EVSMM VIEW TICKET & MESSENGER SUITE (HIGH-DEFINITION CHAT STREAM)
   ========================================================================== */

.evsmm-viewticket-workspace {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.viewticket-container {
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 1. Header Ribbon */
.ticket-thread-header {
  background: var(--ev-bg-surface);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  padding: 24px 30px;
  box-shadow: var(--ev-shadow-card);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.ticket-thread-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

.thread-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn-back-tickets {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ev-bg-elevated);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-pill);
  padding: 8px 16px;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ev-text-secondary) !important;
  text-decoration: none !important;
  transition: var(--ev-transition);
}

.btn-back-tickets:hover {
  border-color: var(--ev-red);
  color: var(--ev-red) !important;
  background: var(--ev-red-subtle);
  transform: translateX(-2px);
}

.thread-meta {
  display: flex;
  flex-direction: column;
}

.thread-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--ev-radius-pill);
  width: fit-content;
  margin-bottom: 4px;
}

.live-pulse-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
}

.thread-subject-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0;
  letter-spacing: -0.3px;
}

.support-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border);
  padding: 6px 14px;
  border-radius: var(--ev-radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ev-text-muted);
}

/* 2. Conversation Card & Stream */
.ticket-conversation-card {
  background: var(--ev-bg-surface);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  box-shadow: var(--ev-shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.conversation-stream {
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: #fdfdfd;
}

.message-bubble-row {
  display: flex;
  width: 100%;
}

.bubble-client-row {
  justify-content: flex-end;
}

.bubble-support-row {
  justify-content: flex-start;
}

.bubble-container {
  max-width: 82%;
  border-radius: 18px;
  padding: 20px 22px;
  position: relative;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
}

/* User Message Bubble */
.client-bubble {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-bottom-right-radius: 4px;
}

/* Support Staff Bubble */
.support-bubble {
  background: #fffafa;
  border: 1.5px solid #fed7d7;
  border-bottom-left-radius: 4px;
}

.bubble-header-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}

.support-author-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.staff-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ev-red);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.4px;
}

.bubble-author {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ev-text-primary);
}

.bubble-timestamp {
  font-size: 0.78rem;
  color: var(--ev-text-muted);
  font-weight: 600;
}

.bubble-text-content {
  font-size: 0.94rem;
  color: var(--ev-text-secondary);
  line-height: 1.6;
  word-break: break-word;
}

/* File Attachment Chips */
.bubble-attachments-slot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.attach-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--ev-text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.attach-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ev-text-primary) !important;
  text-decoration: none !important;
  transition: var(--ev-transition);
}

.attachment-chip:hover {
  border-color: var(--ev-red);
  color: var(--ev-red) !important;
  background: var(--ev-red-subtle);
}

.support-attach-chip {
  background: #ffffff;
  border-color: #fecaca;
}

/* 3. Reply Composer Section */
.thread-reply-section {
  padding: 28px 30px;
  background: #ffffff;
  border-top: 1.5px solid var(--ev-border);
}

.reply-textarea-group {
  margin-bottom: 16px;
}

.reply-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  margin-bottom: 8px;
}

.textarea-reply {
  background-color: #f8fafc !important;
  border: 1.5px solid var(--ev-border-input) !important;
  border-radius: var(--ev-radius-sm) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--ev-text-primary) !important;
  padding: 14px 16px !important;
  transition: var(--ev-transition);
}

.textarea-reply:focus {
  background-color: #ffffff !important;
  border-color: var(--ev-red) !important;
  box-shadow: 0 0 0 3.5px var(--ev-red-subtle) !important;
}

.reply-uploader-slot {
  margin-bottom: 18px;
}

.reply-actions-bar {
  display: flex;
  justify-content: flex-end;
}

.btn-send-reply {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  font-size: 0.96rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border: none !important;
  border-radius: var(--ev-radius-sm) !important;
  padding: 12px 26px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 20px var(--ev-red-glow) !important;
  transition: var(--ev-transition);
}

.btn-send-reply:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.4) !important;
}

@media (max-width: 768px) {
  .bubble-container {
    max-width: 95%;
  }
  .ticket-thread-header {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ==========================================================================
   EVSMM PASSWORD RECOVERY & RESET SUITE (RED & WHITE LUXURY)
   ========================================================================== */

.evsmm-auth-single-workspace {
  width: 100%;
  padding: 60px 24px 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-single-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* Recovery Card */
.recovery-card-white {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  padding: 42px 38px;
  box-shadow: var(--ev-shadow-card);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.recovery-card-white::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

.recovery-card-header {
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--ev-border);
}

.recovery-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ev-red-subtle);
  border: 1px solid var(--ev-red-border);
  color: var(--ev-red);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--ev-radius-pill);
  margin-bottom: 12px;
}

.recovery-title {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}

.recovery-subtitle {
  font-size: 0.88rem;
  color: var(--ev-text-muted);
  line-height: 1.55;
  margin: 0;
}

.recovery-field-group {
  margin-bottom: 22px;
}

.recovery-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  margin-bottom: 8px;
}

.recovery-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.recovery-field-icon {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  color: #94a3b8;
  pointer-events: none;
}

.recovery-input {
  background: #f8fafc !important;
  border: 1.5px solid var(--ev-border-input) !important;
  border-radius: var(--ev-radius-sm) !important;
  height: 52px !important;
  padding-left: 48px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--ev-text-primary) !important;
  box-shadow: var(--ev-shadow-input) !important;
  transition: var(--ev-transition);
}

.recovery-input:focus {
  border-color: var(--ev-red) !important;
  box-shadow: 0 0 0 3.5px var(--ev-red-subtle) !important;
  background: #ffffff !important;
}

.recovery-captcha-slot {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* Primary Action Button */
.btn-recovery-submit {
  width: 100%;
  height: 52px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border: none !important;
  border-radius: var(--ev-radius-sm) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 25px var(--ev-red-glow) !important;
  transition: var(--ev-transition);
}

.btn-recovery-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(220, 38, 38, 0.4) !important;
}

.recovery-card-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 0.9rem;
  color: var(--ev-text-muted);
}

.back-login-link {
  color: var(--ev-red);
  font-weight: 800;
  text-decoration: none !important;
  margin-left: 6px;
}
/* ==========================================================================
   EVSMM DEDICATED FAQ PAGE & KNOWLEDGEBASE SUITE
   ========================================================================== */

.evsmm-faq-workspace {
  width: 100%;
  padding: 40px 24px 80px;
}

.faq-container-centered {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* 1. Page Header */
.faq-page-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 10px;
}

.faq-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ev-red-subtle);
  border: 1px solid var(--ev-red-border);
  color: var(--ev-red);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: var(--ev-radius-pill);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.faq-headline {
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 10px;
  letter-spacing: -0.6px;
}

.faq-subheadline {
  font-size: 1rem;
  color: var(--ev-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* 2. Content Card (Wraps the Dynamic {{ faq }} Variable) */
.faq-content-card {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  padding: 44px 40px;
  box-shadow: var(--ev-shadow-card);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.faq-content-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

/* Automatic Styling for Any Elements Injected Inside {{ faq }} */
.faq-render-area {
  color: var(--ev-text-secondary);
  font-size: 0.96rem;
  line-height: 1.7;
}

.faq-render-area h1,
.faq-render-area h2,
.faq-render-area h3,
.faq-render-area h4 {
  color: var(--ev-text-primary);
  font-weight: 900;
  letter-spacing: -0.4px;
  margin: 28px 0 12px;
}

.faq-render-area h1:first-child,
.faq-render-area h2:first-child,
.faq-render-area h3:first-child {
  margin-top: 0;
}

.faq-render-area p {
  margin-bottom: 18px;
}

.faq-render-area a {
  color: var(--ev-red);
  font-weight: 700;
  text-decoration: underline;
}

/* PerfectPanel Bootstrap Panel Overrides inside {{ faq }} */
.faq-render-area .panel,
.faq-render-area .card {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: var(--ev-radius-sm) !important;
  margin-bottom: 14px !important;
  box-shadow: none !important;
  overflow: hidden;
}

.faq-render-area .panel-heading {
  background: var(--ev-bg-elevated) !important;
  border-bottom: 1px solid var(--ev-border) !important;
  padding: 16px 20px !important;
  font-weight: 800 !important;
  color: var(--ev-text-primary) !important;
}

.faq-render-area .panel-title a {
  color: var(--ev-text-primary) !important;
  text-decoration: none !important;
  display: block;
}

.faq-render-area .panel-body {
  padding: 20px !important;
  background: #ffffff !important;
  color: var(--ev-text-secondary) !important;
  line-height: 1.65;
}

/* 3. Bottom Help Footer */
.faq-help-footer {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-md);
  padding: 24px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
  flex-wrap: wrap;
  gap: 16px;
}

.help-footer-text {
  display: flex;
  flex-direction: column;
}

.help-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ev-text-primary);
}

.help-desc {
  font-size: 0.86rem;
  color: var(--ev-text-muted);
}

.btn-faq-ticket {
  background: var(--ev-red);
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 0.92rem;
  font-weight: 800;
  padding: 11px 22px;
  border-radius: var(--ev-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 18px var(--ev-red-glow);
  transition: var(--ev-transition);
}

.btn-faq-ticket:hover {
  background: var(--ev-red-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--ev-red-glow);
}

@media (max-width: 768px) {
  .faq-content-card {
    padding: 28px 22px;
  }
  .faq-headline {
    font-size: 1.85rem;
  }
  .faq-help-footer {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   EVSMM ACCOUNT & API SETTINGS SUITE (RED & WHITE LUXURY)
   ========================================================================== */

.evsmm-account-workspace {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 1. Account Navigation Pills */
.account-nav-bar {
  display: flex;
  margin-bottom: 4px;
}

.account-nav-pills {
  list-style: none !important;
  display: flex !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pill-item a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-pill);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ev-text-secondary);
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.03);
  transition: var(--ev-transition);
}

.pill-item a:hover {
  border-color: var(--ev-red);
  color: var(--ev-red);
  transform: translateY(-1px);
}

.pill-item.active a {
  background: var(--ev-red) !important;
  border-color: var(--ev-red) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px var(--ev-red-glow) !important;
}

/* 2. Settings Grid (2 Columns) */
.account-grid-suite {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: start;
}

.account-col-left,
.account-col-right {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Common Account Card Box */
.account-card-box {
  background: var(--ev-bg-surface);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  padding: 32px 30px;
  box-shadow: var(--ev-shadow-card);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.account-card-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

.card-box-header {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--ev-border);
}

.card-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border);
  color: var(--ev-text-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--ev-radius-pill);
  margin-bottom: 8px;
}

.card-box-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 4px;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-box-desc {
  font-size: 0.85rem;
  color: var(--ev-text-muted);
  margin: 0;
  line-height: 1.5;
}

.setting-field-group {
  margin-bottom: 18px;
}

.setting-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  margin-bottom: 7px;
}

.readonly-input {
  background: #f8fafc !important;
  color: var(--ev-text-muted) !important;
  font-weight: 700 !important;
  cursor: default;
}

.btn-change-email-modal {
  background: var(--ev-bg-elevated);
  border: 1.5px solid var(--ev-border);
  color: var(--ev-text-primary);
  font-size: 0.84rem;
  font-weight: 800;
  padding: 9px 18px;
  border-radius: var(--ev-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: var(--ev-transition);
}

.btn-change-email-modal:hover {
  border-color: var(--ev-red);
  color: var(--ev-red);
  background: var(--ev-red-subtle);
}

.btn-account-submit {
  background: var(--ev-red) !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  padding: 12px 24px !important;
  border-radius: var(--ev-radius-sm) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 18px var(--ev-red-glow) !important;
  transition: var(--ev-transition);
  cursor: pointer;
}

.btn-account-submit:hover {
  background: var(--ev-red-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px var(--ev-red-glow) !important;
}

/* 2FA Badge & Action */
.status-2fa-tag {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}

.status-2fa-tag.active-tag {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.status-2fa-tag.inactive-tag {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.btn-2fa-action {
  background: #0f172a;
  border: none;
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: var(--ev-radius-sm);
  cursor: pointer;
  transition: var(--ev-transition);
}

.btn-2fa-action:hover {
  background: var(--ev-red);
}

/* API Copy Token Box */
.api-key-copy-box {
  position: relative;
  display: flex;
  align-items: center;
}

.input-api-key {
  padding-right: 90px !important;
  font-family: monospace, monospace !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  background: #f8fafc !important;
}

.btn-copy-api {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: 1px solid var(--ev-border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--ev-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: var(--ev-transition);
}

.btn-copy-api:hover {
  border-color: var(--ev-red);
  color: var(--ev-red);
  background: var(--ev-red-subtle);
}

.api-date-caption {
  font-size: 0.78rem;
  color: var(--ev-text-muted);
  display: block;
  margin-top: 6px;
}

.no-key-state {
  background: var(--ev-bg-elevated);
  border: 1px dashed var(--ev-border);
  padding: 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  color: var(--ev-text-muted);
}

.btn-generate-api {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  color: var(--ev-text-primary);
  font-size: 0.88rem;
  font-weight: 800;
  padding: 11px 22px;
  border-radius: var(--ev-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.02);
  transition: var(--ev-transition);
}

.btn-generate-api:hover {
  border-color: var(--ev-red);
  color: var(--ev-red);
  background: var(--ev-red-subtle);
  transform: translateY(-1px);
}

.textarea-setting {
  resize: vertical;
}

@media (max-width: 992px) {
  .account-grid-suite {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   EVSMM SERVICE UPDATES & CHANGELOG SUITE (RED & WHITE LUXURY)
   ========================================================================== */

.evsmm-updates-workspace {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* 1. Header & Controls */
.updates-control-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.updates-header-left {
  max-width: 600px;
}

.updates-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--ev-radius-pill);
  margin-bottom: 8px;
}

.updates-title {
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 4px;
  letter-spacing: -0.4px;
}

.updates-desc {
  font-size: 0.88rem;
  color: var(--ev-text-muted);
  line-height: 1.5;
  margin: 0;
}

.updates-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Type Filter Dropdown */
.btn-type-filter {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: var(--ev-radius-sm) !important;
  padding: 11px 18px !important;
  color: var(--ev-text-primary) !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.03) !important;
  transition: var(--ev-transition) !important;
  cursor: pointer;
}

.btn-type-filter:hover {
  border-color: var(--ev-red) !important;
  transform: translateY(-1px);
}

.update-type-dropdown .dropdown-menu {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: var(--ev-radius-sm) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
  padding: 8px 0 !important;
  min-width: 200px;
}

.update-type-dropdown .dropdown-item {
  display: block !important;
  padding: 8px 18px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--ev-text-secondary) !important;
  text-decoration: none !important;
}

.update-type-dropdown .dropdown-item:hover,
.update-type-dropdown .active a {
  background: var(--ev-red-subtle) !important;
  color: var(--ev-red) !important;
}

/* Search Box */
.updates-search-box {
  width: 280px;
}

.updates-search-form {
  margin: 0;
}

.updates-input-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.updates-search-input {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border-input) !important;
  border-radius: var(--ev-radius-sm) !important;
  height: 48px !important;
  padding-left: 46px !important;
  padding-right: 42px !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  color: var(--ev-text-primary) !important;
  box-shadow: var(--ev-shadow-input) !important;
  transition: var(--ev-transition);
}

.updates-search-input:focus {
  border-color: var(--ev-red) !important;
  box-shadow: 0 0 0 3px var(--ev-red-subtle) !important;
}

.btn-updates-search {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--ev-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 4px;
}

/* 2. Updates Master Table */
.updates-table-card {
  background: var(--ev-bg-surface);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  box-shadow: var(--ev-shadow-card);
  overflow: hidden;
  position: relative;
}

.updates-table-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

#updates-data-table {
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
}

#updates-data-table > thead > tr > th {
  background: #f8fafc !important;
  border-bottom: 1.5px solid var(--ev-border) !important;
  color: var(--ev-text-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 16px 22px !important;
}

.update-entry-row td {
  padding: 18px 22px !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--ev-border) !important;
  background: #ffffff !important;
  transition: background 0.15s ease;
}

.update-entry-row:hover td {
  background: #fafbfe !important;
}

.service-ident-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.service-name-text {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  line-height: 1.45;
}

.update-date-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ev-text-muted);
}

.update-payload-content {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ev-text-secondary);
  line-height: 1.55;
}

/* Automatic PerfectPanel Update Payload Highlights */
.update-payload-content span[style*="green"],
.update-payload-content .text-success {
  color: #166534 !important;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 2px 8px;
  border-radius: 4px;
}

.update-payload-content span[style*="red"],
.update-payload-content .text-danger {
  color: #991b1b !important;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 2px 8px;
  border-radius: 4px;
}

/* Empty State */
.empty-updates-cell {
  text-align: center;
  padding: 60px 20px !important;
}

.empty-updates-view h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  margin: 14px 0 4px;
}

.empty-updates-view p {
  font-size: 0.9rem;
  color: var(--ev-text-muted);
  margin: 0;
}

/* Pagination */
.updates-pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

@media (max-width: 900px) {
  .updates-control-header {
    flex-direction: column;
    align-items: stretch;
  }
  .updates-search-box {
    width: 100%;
  }
}
/* ==========================================================================
   EVSMM BLOG & EDITORIAL SUITE (RED & WHITE LUXURY GRID)
   ========================================================================== */

.evsmm-blog-workspace {
  width: 100%;
  padding: 40px 24px 80px;
  max-width: 1380px;
  margin: 0 auto;
}

/* 1. Header */
.blog-main-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 48px;
}

.blog-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ev-red-subtle);
  border: 1px solid var(--ev-red-border);
  color: var(--ev-red);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: var(--ev-radius-pill);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.blog-headline {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 12px;
  letter-spacing: -0.6px;
}

.blog-subheadline {
  font-size: 1.05rem;
  color: var(--ev-text-muted);
  line-height: 1.6;
  margin: 0;
}

.blog-custom-intro {
  max-width: 900px;
  margin: 0 auto 36px;
}

/* 2. Responsive Posts Grid */
.blog-posts-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.blog-card-item {
  background: var(--ev-bg-surface);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-lg);
  overflow: hidden;
  box-shadow: var(--ev-shadow-card);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.blog-card-item:hover {
  border-color: var(--ev-border-input);
  transform: translateY(-4px);
  box-shadow: var(--ev-shadow-hover);
}

.blog-card-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

/* Image Aspect Ratio & Hover Zoom */
.blog-thumbnail-wrapper {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: #f1f5f9;
}

.thumbnail-link {
  display: block;
  width: 100%;
  height: 100%;
}

.blog-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-card-item:hover .blog-thumb-img {
  transform: scale(1.04);
}

/* Body & Typography */
.blog-card-body {
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-post-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 12px;
  line-height: 1.35;
  letter-spacing: -0.3px;
}

.blog-post-title a {
  color: var(--ev-text-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.blog-post-title a:hover {
  color: var(--ev-red) !important;
}

.blog-excerpt-content {
  font-size: 0.92rem;
  color: var(--ev-text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-footer {
  display: flex;
  align-items: center;
}

.btn-read-article {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ev-red);
  color: #ffffff !important;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none !important;
  padding: 10px 20px;
  border-radius: var(--ev-radius-sm);
  box-shadow: 0 6px 16px var(--ev-red-glow);
  transition: var(--ev-transition);
}

.btn-read-article:hover {
  background: var(--ev-red-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px var(--ev-red-glow);
}

/* 3. Pagination */
.blog-pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .blog-posts-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .blog-headline {
    font-size: 1.95rem;
  }
}
/* ==========================================================================
   GLOBAL SEARCH ENGINE PADDING & ICON OVERLAP FIX (ALL PAGES)
   Eliminates "Qarch" collision across New Order, Services, Orders & Updates
   ========================================================================== */

/* 1. Global Input Padding for any search field */
input[name="search"],
input[data-search-service],
#template-input,
.services-search-input,
.orders-search-input,
.updates-search-input,
.search-dropdown input,
.search input,
form[id*="search"] input {
  padding-left: 54px !important; /* Forces placeholder/text 54px right, giving full icon clearance */
  padding-right: 20px !important;
  text-indent: 0 !important;
}

/* 2. Position the search icon cleanly inside the 54px left gutter */
.search,
.search-dropdown,
.input-wrapper,
.services-search-wrapper,
.orders-input-group,
.updates-input-group,
form[id*="search"] .input-group,
form[id*="search"] {
  position: relative !important;
}

/* Target all search buttons/icons across PerfectPanel themes */
.search button,
.search-dropdown button,
.input-wrapper button,
.services-search-wrapper .search-glyph-icon,
.orders-input-group .search-glyph-icon,
.updates-input-group .search-glyph-icon,
form[id*="search"] button,
form[id*="search"] .input-group-btn {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  color: var(--ev-red) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
}

/* Ensure the icon font or SVG stays crisp and properly colored */
.search button i,
.search-dropdown button i,
form[id*="search"] button i,
.search .fa-search,
.search .fas.fa-search {
  color: var(--ev-red) !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

/* Hide empty or broken trailing input-group addons if present */
form[id*="search"] .input-group-addon {
  display: none !important;
}
/* ==========================================================================
   EVSMM NEW ORDER POWER DASHBOARD (CHANNELS, METRICS RIBBON, TIER BAR, NOTICE)
   ========================================================================== */

.evsmm-neworder-suite {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
}

/* 1. Telegram & WhatsApp Broadcast Channels */
.evsmm-community-channels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.channel-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: var(--ev-radius-md);
  text-decoration: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.channel-card:hover {
  transform: translateY(-2px);
  color: #ffffff !important;
}

.telegram-channel-card {
  background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
  box-shadow: 0 6px 20px rgba(0, 136, 204, 0.25);
}

.whatsapp-channel-card {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.25);
}

.channel-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.channel-text-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.channel-title {
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.channel-subtitle {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.88);
}

.channel-arrow-action {
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.channel-card:hover .channel-arrow-action {
  transform: translateX(3px);
  opacity: 1;
}

/* 2. 4-Card Performance & Balance Ribbon */

.metric-card-tile {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-md);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--ev-shadow-card);
  transition: var(--ev-transition);
}

.metric-card-tile:hover {
  border-color: var(--ev-border-input);
  transform: translateY(-2px);
  box-shadow: var(--ev-shadow-hover);
}

.metric-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-icon-bg { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.orders-icon-bg { background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); }
.spent-icon-bg { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.balance-icon-bg { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }

.metric-tile-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tile-main-stat {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.tile-main-stat.text-red {
  color: var(--ev-red);
}

.tile-caption-text {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ev-text-muted);
  text-transform: uppercase;
  margin-top: 3px;
}

/* Balance Card Highlight with Micro Add-Funds Button */
.balance-card-highlight {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.balance-number-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.balance-stat {
  color: #065f46;
}

.btn-micro-add {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ev-red);
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  box-shadow: 0 2px 6px var(--ev-red-glow);
  transition: transform 0.2s ease;
}

.btn-micro-add:hover {
  transform: scale(1.15);
  background: var(--ev-red-hover);
}

/* 3. VIP Loyalty Level & Progression Bar */
.evsmm-tier-progress-card {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-md);
  padding: 18px 24px;
  box-shadow: var(--ev-shadow-card);
}

.tier-card-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.tier-left-status {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tier-trophy-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tier-tagline {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ev-text-muted);
  letter-spacing: 0.6px;
}

.tier-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.current-tier-name {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--ev-text-primary);
}

.badge-tier-discount {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--ev-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tier-right-progression {
  flex: 1;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.progress-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--ev-text-muted);
}

.next-level-label strong {
  color: var(--ev-text-primary);
}

.tier-progress-track {
  width: 100%;
  height: 7px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.tier-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #dc2626);
  border-radius: 4px;
}

/* 4. System Bulletin Notice */
.evsmm-system-notice-card {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-left: 4px solid var(--ev-red);
  border-radius: var(--ev-radius-sm);
  padding: 16px 22px;
  box-shadow: var(--ev-shadow-card);
}

.notice-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.notice-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ev-red);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.notice-date-caption {
  font-size: 0.72rem;
  color: var(--ev-text-muted);
}

.notice-bullet-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notice-bullet-list li {
  font-size: 0.86rem;
  color: var(--ev-text-secondary);
  line-height: 1.5;
  position: relative;
  padding-left: 16px;
}

.notice-bullet-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--ev-red);
  font-weight: 900;
}

.notice-bullet-list strong {
  color: var(--ev-text-primary);
}

/* Hide old header showcase on New Order to prevent duplicate balance boxes */
.evsmm-top-showcase {
  display: none !important;
}

/* Responsive Breakpoints */
@media (max-width: 1100px) {
  .evsmm-metrics-ribbon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .evsmm-community-channels-grid {
    grid-template-columns: 1fr;
  }
  .tier-card-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .tier-right-progression {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .evsmm-metrics-ribbon-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SIDEBAR USER PROFILE & COMPACT CHANNELS (MATCHING THEMAINSMM LAYOUT)
   ========================================================================== */

/* User Greeting in Sidebar */
.sidebar-user-ribbon {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ev-bg-elevated);
  border: 1.5px solid var(--ev-border);
  border-radius: var(--ev-radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
}

.sidebar-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ev-red);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--ev-red-glow);
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
}

.sidebar-username {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  line-height: 1.2;
}

.sidebar-user-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ev-text-muted);
}

/* Compact Channels Stack inside Sidebar (Hidden by default, revealed on neworder) */
.sidebar-social-channels {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

/* Revealed ONLY when the New Order page mounts */
body.is-neworder-active .sidebar-social-channels {
  display: flex !important;
}

.sidebar-channel-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none !important;
  color: #ffffff !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-channel-btn:hover {
  transform: translateY(-1px);
  color: #ffffff !important;
}

.btn-telegram-channel {
  background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.25);
}

.btn-whatsapp-channel {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}

.channel-icon-pill {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.channel-btn-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.channel-btn-text strong {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  line-height: 1.2;
}

.channel-btn-text span {
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.channel-chevron {
  opacity: 0.8;
  flex-shrink: 0;
}

/* Sidebar Section Header */
.sidebar-nav-section-title {
  font-size: 0.72rem;
  font-weight: 900;
  color: var(--ev-text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-left: 6px;
}

/* ==========================================================================
   4 REORDERED METRIC BOXES
   Box 1: Balance | Box 2: Add Funds | Box 3: Total Investment | Box 4: Orders
   ========================================================================== */

.deposit-icon-bg {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.addfunds-card-trigger {
  text-decoration: none !important;
  background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%) !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
}

.addfunds-card-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.15);
  border-color: var(--ev-red) !important;
}

.badge-instant-tag {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--ev-radius-pill);
}

.balance-box-primary {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.balance-box-primary .balance-stat {
  color: #065f46;
}

/* ==========================================================================
   MOBILE-FIRST APP EXPERIENCE (80% USERS ON MOBILE)
   ========================================================================== */
.mobile-top-bar {
  display: none;
}

.evsmm-mobile-bottom-nav {
  display: none;
}

@media (max-width: 900px) {
  /* 1. Hide Desktop Sidebar Completely on Mobile */
  .evsmm-sidebar {
    display: none !important;
  }

  .evsmm-app-layout {
    flex-direction: column !important;
  }

  .evsmm-main-stage {
    padding: 14px 14px 90px !important; /* Bottom clearance for bottom app nav */
    max-width: 100% !important;
  }

  /* 2. Top Mobile Brand Header */
  .mobile-top-bar {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid var(--ev-border);
    border-radius: 14px;
    padding: 10px 16px;
    margin-bottom: 14px;
    box-shadow: var(--ev-shadow-card);
  }

  .mobile-top-balance {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mobile-bal-num {
    font-size: 1rem;
    font-weight: 900;
    color: var(--ev-red);
  }

  .mobile-add-btn {
    width: 26px;
    height: 26px;
    background: var(--ev-red);
    color: #ffffff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    font-weight: 900;
  }

  /* 3. Metrics Grid on Mobile: 2x2 Clean Stack */
  .evsmm-metrics-ribbon-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .metric-card-tile {
    padding: 14px 12px !important;
    gap: 10px !important;
  }

  .metric-tile-icon {
    width: 36px !important;
    height: 36px !important;
  }

  .tile-main-stat {
    font-size: 1.2rem !important;
  }

  .tile-caption-text {
    font-size: 0.72rem !important;
  }

  .evsmm-community-channels-grid {
    grid-template-columns: 1fr !important;
  }

  .evsmm-workspace {
    grid-template-columns: 1fr !important;
  }

  .receipt-column {
    position: static !important;
    top: auto !important;
  }

  .tier-card-inner {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .tier-right-progression {
    max-width: 100% !important;
  }

  /* 4. PINNED MOBILE BOTTOM APP NAVIGATION (NATIVE APP FEEL) */
  .evsmm-mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #ffffff;
    border-top: 1.5px solid var(--ev-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    z-index: 10000;
  }

  .mobile-nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--ev-text-muted) !important;
    text-decoration: none !important;
    font-size: 0.7rem;
    font-weight: 700;
    transition: color 0.15s ease;
  }

  .mobile-nav-tab svg {
    width: 20px;
    height: 20px;
    transition: transform 0.15s ease;
  }

  .mobile-nav-tab.active {
    color: var(--ev-red) !important;
  }

  .mobile-nav-tab.active svg {
    transform: translateY(-2px);
  }
}

/* ==========================================================================
   FOOTER UPGRADE (LIGHT CRIMSON RED #dc2626 + BOLD WHITE CLICKABLE LINKS)
   ========================================================================== */
.evsmm-crimson-master-footer {
  background: #dc2626 !important; /* Vibrant lighter brand red */
  color: #ffffff !important;
  position: relative;
}

/* Top Accent Bar Highlight */
.evsmm-crimson-master-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ffffff, #fca5a5, #ffffff);
}

.footer-col-title {
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
}

.footer-links-list a {
  color: #ffffff !important;
  font-weight: 800 !important; /* Bold clickable links */
  font-size: 0.95rem !important;
  display: inline-block;
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.footer-links-list a:hover {
  transform: translateX(4px);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8) !important;
}

.footer-brand-title {
  color: #ffffff !important;
}

.footer-brand-bio {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
}

.footer-server-status {
  background: rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

.footer-bottom-strip {
  border-top-color: rgba(255, 255, 255, 0.25) !important;
}

.footer-copy-text {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
}

.footer-safe-badges span {
  color: #ffffff !important;
  font-weight: 800 !important;
}
/* ==========================================================================
   FIXES: PERFECT SCREEN FIT (DESKTOP & MOBILE), BALANCED FONTS & 4 BOXES
   ========================================================================== */

/* 1. Balanced Global Base Font: Sharp & Screen-Proportional (No Overscaling) */
html, body {
  font-size: 14px !important;
}

/* Ensure Main Stage Never Overflows Screen Width */
.evsmm-main-stage {
  padding: 20px 24px !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
}

.control-label, .setting-label, .landing-label, .funds-label, .spec-label {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
}

.form-control, select.form-control, input.form-control {
  font-size: 0.95rem !important;
  height: 48px !important;
  font-weight: 600 !important;
}

.nav-item a {
  font-size: 0.94rem !important;
  font-weight: 700 !important;
}

/* 2. Active Sidebar Icon (Stays crisp white stroke, no solid blob) */
.nav-item.active a svg {
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2.5 !important;
}

.nav-item:not(.active) a svg {
  fill: none !important;
  stroke: var(--ev-text-muted) !important;
  stroke-width: 2.5 !important;
}

.nav-item:not(.active) a:hover svg {
  stroke: var(--ev-red) !important;
}

.service-spec-container {
  display: block;
  background: #fffafa !important;
  border: 1.5px solid #fed7d7 !important;
  border-radius: var(--ev-radius-sm) !important;
  padding: 14px 18px !important;
  margin-bottom: 18px !important;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  color: #1e293b !important;
}

/* 4. THE 4 METRIC BOXES: Fits 100% Inside Desktop Without Overflow */
.evsmm-metrics-ribbon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* Forces all 4 cards to fit */
  gap: 14px !important;
  width: 100% !important;
}

.metric-card-tile {
  padding: 14px 16px !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.metric-tile-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}

.tile-main-stat {
  font-size: 1.3rem !important;
  letter-spacing: -0.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tile-caption-text {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* GREEN CARDS (Box 1: Balance, Box 4: Completed Orders) */
.card-tone-green {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.4) !important;
}

.icon-tone-green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.stat-tone-green {
  color: #065f46 !important;
}

/* BLUE CARDS (Box 2: Add Funds, Box 3: Total Investment) */
.card-tone-blue {
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%) !important;
  border: 1.5px solid rgba(37, 99, 235, 0.35) !important;
}

.icon-tone-blue {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.stat-tone-blue {
  color: #1e40af !important;
}

.badge-instant-blue {
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--ev-radius-pill);
}

.addfunds-clickable {
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.addfunds-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15);
  border-color: #2563eb !important;
}

/* ==========================================================================
   MOBILE-PERFECT RESPONSIVE OVERHAUL (ZERO OVERFLOW, 100% SCREEN FIT)
   ========================================================================== */
@media (max-width: 900px) {
  
  /* 1. Prevent Horizontal Page Stretching */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    font-size: 14px !important;
  }

  .evsmm-main-stage,
  .evsmm-neworder-suite,
  .evsmm-app-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .evsmm-main-stage {
    padding: 10px 12px 90px !important; /* Bottom clearance for mobile app nav */
  }

  /* 2. Fix 4 Metric Boxes: No More Cropped / Escaping Text */
  .evsmm-metrics-ribbon-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .metric-card-tile {
    padding: 10px 10px !important;
    gap: 8px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .metric-tile-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  .tile-main-stat {
    font-size: 1.15rem !important;
    line-height: 1.1 !important;
  }

  /* Allow text to wrap cleanly inside the card without crossing the screen */
  .tile-caption-text {
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    display: block !important;
  }

  /* 3. Fix "Instant New Order" & "Order Breakdown" Screen-Crossing */
  .evsmm-workspace {
    grid-template-columns: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 16px !important;
    box-sizing: border-box !important;
  }

  .order-form-container,
  .receipt-box,
  .evsmm-tier-progress-card,
  .evsmm-system-notice-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
  }

  /* Wrap Quick Volume Chips so [+5,000] never pushes card off-screen */
  .quick-chips-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .chips-label {
    width: 100% !important;
    margin-bottom: 2px !important;
  }

  .chip-action {
    flex: 1 1 calc(25% - 6px) !important;
    min-width: 60px !important;
    padding: 6px 6px !important;
    font-size: 0.75rem !important;
    text-align: center !important;
  }

  .receipt-column {
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }

  .tier-card-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .tier-right-progression {
    max-width: 100% !important;
  }

 /* 4. Lift Floating Telegram Button & Parent Container Above Bottom App Menu */
  div:has(> a[href*="t.me"]),
  body :has(> a[href*="t.me"]),
  a[href*="t.me"],
  a[href*="telegram"],
  [class*="telegram"][class*="float"],
  [class*="float"][class*="telegram"],
  [id*="telegram"],
  .telegram-floating,
  .btn-telegram-float {
    position: fixed !important;
    bottom: 85px !important; /* Lifts 21px clearly above the 64px bottom app bar */
    right: 18px !important;
    z-index: 999999 !important; /* Higher than the app bar so it is never trapped underneath */
  }
}
/* Prevent Multiple Description Blocks from Stacking */
#fields .service-description,
#fields .help-block:has(p),
#fields div[class*="description"],
.single-desc-body + .single-desc-body {
  display: none !important;
}

/* Ensure clean padding & line-height for the single remaining description */
#service_description {
  max-height: 280px;
  overflow-y: auto;
}
/* ==========================================================================
   MOBILE-FIRST TRANSFORMATION: SERVICES & ORDERS CARD STREAM (<= 768PX)
   Transforms rigid desktop tables into touch-friendly native app cards
   ========================================================================== */

/* Fix empty rectangle glyph on favorite star */
.favorite-star-btn .far.fa-star::before {
  content: "☆" !important;
  font-size: 16px !important;
  color: #94a3b8 !important;
}

.favorite-star-btn .fas.fa-star::before {
  content: "★" !important;
  font-size: 16px !important;
  color: #f59e0b !important;
}

/* Hide clunky grey desktop scrollbars on mobile filter pills */
.orders-nav-scroll-wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.orders-nav-scroll-wrapper::-webkit-scrollbar {
  display: none !important;
}

@media (max-width: 768px) {
  
  /* 1. Hide Desktop Table Headers */
  #service-table > thead,
  #orders-data-table > thead,
  .evsmm-table > thead {
    display: none !important;
  }

  .table-responsive {
    border: none !important;
    overflow: visible !important;
  }

  .services-table-card,
  .orders-table-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .services-table-card::before,
  .orders-table-card::before {
    display: none !important;
  }

  #service-table,
  #service-table > tbody,
  #orders-data-table,
  #orders-data-table > tbody {
    display: block !important;
    width: 100% !important;
  }

  /* 2. SERVICES: Transform Rows into App-Style Service Cards */
  .category-header-row {
    display: block !important;
    margin: 18px 0 10px !important;
  }

  .category-header-row td {
    display: block !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }

  .service-data-row {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1.5px solid var(--ev-border) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
    box-shadow: var(--ev-shadow-card) !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .service-data-row td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
  }

  /* Card Top Row: ID Badge + Star + Rate per 1k */
  .service-data-row {
    position: relative;
  }

  .cell-favorite {
    position: absolute;
    top: 14px;
    right: 14px;
    width: auto !important;
    z-index: 5;
  }

  .cell-id {
    display: inline-block !important;
    width: auto !important;
    margin-bottom: 4px;
  }

  .cell-name {
    margin-bottom: 6px;
  }

  .service-name-text {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--ev-text-primary) !important;
    line-height: 1.4 !important;
    padding-right: 28px; /* Clearance for star */
  }

  /* Price Highlight on Mobile */
  .cell-rate {
    display: flex !important;
    align-items: baseline !important;
    background: #fff5f5;
    border: 1px solid var(--ev-red-border);
    padding: 8px 12px !important;
    border-radius: 8px;
    width: fit-content !important;
    margin-bottom: 6px;
  }

  .cell-rate .rate-accent {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    color: var(--ev-red) !important;
  }

  .cell-rate .per-k {
    font-size: 0.8rem !important;
    color: var(--ev-text-muted) !important;
    margin-left: 4px;
  }

  /* Metadata Strip (Min / Max / Speed / Details) */
  .cell-min, .cell-max, .cell-avg {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.8rem !important;
    color: var(--ev-text-muted) !important;
    font-weight: 700 !important;
    margin-right: 12px;
  }

  .cell-min::before { content: "Min: "; color: #64748b; margin-right: 3px; }
  .cell-max::before { content: "Max: "; color: #64748b; margin-right: 3px; }

  .cell-actions {
    margin-top: 6px;
    padding-top: 8px !important;
    border-top: 1px dashed var(--ev-border) !important;
  }

  .btn-service-desc {
    width: 100% !important;
    justify-content: center !important;
    height: 38px !important;
    font-size: 0.84rem !important;
  }

  /* 3. ORDERS: Transform Rows into App-Style Order Cards */
  .order-row-entry {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1.5px solid var(--ev-border) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    box-shadow: var(--ev-shadow-card) !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    position: relative;
  }

  .order-row-entry td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
  }

  /* Status pinned to top right of order card */
  .cell-status {
    position: absolute;
    top: 16px;
    right: 16px;
    width: auto !important;
  }

  .cell-id {
    display: inline-block !important;
    width: auto !important;
  }

  .order-service-name {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--ev-text-primary) !important;
    max-width: 100% !important;
    white-space: normal !important; /* Full text wraps naturally */
    line-height: 1.4 !important;
    margin: 4px 0;
  }

  .cell-link {
    margin: 4px 0 8px;
  }

  .target-profile-link {
    font-size: 0.85rem !important;
    color: var(--ev-red) !important;
    word-break: break-all !important;
    max-width: 100% !important;
  }

  .cell-charge {
    display: inline-block !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    color: var(--ev-text-primary) !important;
    margin-right: 16px;
  }

  .cell-date {
    font-size: 0.76rem !important;
    color: var(--ev-text-muted) !important;
    margin-top: 4px;
    display: block !important;
  }

  .cell-actions {
    margin-top: 8px;
    padding-top: 10px !important;
    border-top: 1px dashed var(--ev-border) !important;
  }

  .btn-order-refill {
    width: 100% !important;
    justify-content: center !important;
    height: 38px !important;
  }
}
/* ==========================================================================
   EVSMM LANDING EXTENSIONS: FOMO TICKER, PAYMENT MARQUEE, SAFETY & API TERMINAL
   ========================================================================== */

/* 1. Compact Live FOMO Ticker & Payment Gateway Marquee Strip */
.evsmm-fomo-payment-strip {
  background: #ffffff;
  border-bottom: 1.5px solid var(--ev-border);
  padding: 16px 0;
  position: relative;
  z-index: 5;
}

.evsmm-fomo-payment-strip .landing-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Cute Compact Live FOMO Toast */
.fomo-live-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f8fafc;
  border: 1px solid var(--ev-border);
  padding: 7px 16px;
  border-radius: var(--ev-radius-pill);
  font-size: 0.84rem;
  color: var(--ev-text-secondary);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.fomo-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
}

.fomo-live-icon {
  color: #f59e0b;
  font-size: 0.9rem;
}

.fomo-live-text strong {
  color: var(--ev-text-primary);
}

.fomo-time-ago {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ev-text-muted);
  background: #ffffff;
  border: 1px solid var(--ev-border);
  padding: 2px 7px;
  border-radius: var(--ev-radius-pill);
}

/* Payment Gateway Badges Marquee */
.payment-trust-marquee-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  max-width: 60%;
  scrollbar-width: none;
}
.payment-trust-marquee-wrapper::-webkit-scrollbar {
  display: none;
}

.payment-marquee-label {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ev-text-muted);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.payment-marquee-track {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ev-bg-elevated);
  border: 1px solid var(--ev-border);
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ev-text-secondary);
}

/* 2. The evSMM Safety Standard Grid */
.evsmm-safety-section {
  padding: 90px 0;
  background: #ffffff;
  border-bottom: 1.5px solid var(--ev-border);
}

.safety-grid-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.safety-card {
  background: #f8fafc;
  border: 1.5px solid var(--ev-border);
  border-radius: 18px;
  padding: 30px 24px;
  box-shadow: var(--ev-shadow-card);
  transition: var(--ev-transition);
  position: relative;
  overflow: hidden;
}

.safety-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.2s ease;
}

.safety-card:hover {
  border-color: var(--ev-red);
  background: #ffffff;
  transform: translateY(-4px);
  box-shadow: var(--ev-shadow-hover);
}

.safety-card:hover::before {
  background: var(--ev-red);
}

.safety-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--ev-red-subtle);
  border: 1px solid var(--ev-red-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.safety-title {
  font-size: 1.18rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 8px;
}

.safety-text {
  font-size: 0.88rem;
  color: var(--ev-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* 3. Developer API Code Terminal & Child Panel Spotlight */
.evsmm-api-childpanel-section {
  padding: 90px 0;
  background: #f6f8fc;
  border-bottom: 1.5px solid var(--ev-border);
}

.api-spotlight-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 40px;
  align-items: center;
}

/* Dark Code Terminal Window */
.api-code-terminal-card {
  background: #0f1118;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 0 25px rgba(220, 38, 38, 0.1);
}

.code-terminal-topbar {
  background: #181b26;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.terminal-dots {
  display: flex;
  gap: 7px;
}

.t-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }

.code-tabs-nav {
  display: flex;
  gap: 6px;
}

.btn-code-tab {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-code-tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.btn-code-tab.active {
  color: #ffffff;
  background: var(--ev-red);
}

.code-terminal-body {
  padding: 24px;
}

.code-snippet {
  display: none;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: #e2e8f0;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
  overflow-x: auto;
}

.code-snippet.active {
  display: block;
}

/* Syntax Highlighting */
.code-cmd { color: #f43f5e; font-weight: 700; }
.code-str { color: #34d399; }
.code-num { color: #f59e0b; }

/* Right: Turnkey Child Panel Card */
.childpanel-spotlight-card {
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  border-radius: 24px;
  padding: 44px 38px;
  box-shadow: var(--ev-shadow-card);
  position: relative;
  overflow: hidden;
}

.childpanel-spotlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ev-red), #fca5a5, var(--ev-red));
}

.spotlight-tag-pill {
  display: inline-block;
  background: var(--ev-red-subtle);
  border: 1px solid var(--ev-red-border);
  color: var(--ev-red);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--ev-radius-pill);
  margin-bottom: 14px;
}

.spotlight-heading {
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--ev-text-primary);
  margin: 0 0 14px;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.spotlight-text {
  font-size: 0.98rem;
  color: var(--ev-text-muted);
  line-height: 1.6;
  margin: 0 0 24px;
}

.spotlight-perks-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}

.s-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ev-text-secondary);
}

.spotlight-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-launch-childpanel {
  padding: 14px 28px;
  background: var(--ev-red);
  color: #ffffff !important;
  font-size: 0.95rem;
  font-weight: 900;
  border-radius: var(--ev-radius-sm);
  text-decoration: none !important;
  box-shadow: 0 8px 20px var(--ev-red-glow);
  transition: var(--ev-transition);
}

.btn-launch-childpanel:hover {
  background: var(--ev-red-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px var(--ev-red-glow);
}

.btn-view-docs {
  padding: 14px 22px;
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  color: var(--ev-text-primary) !important;
  font-size: 0.92rem;
  font-weight: 800;
  border-radius: var(--ev-radius-sm);
  text-decoration: none !important;
  transition: var(--ev-transition);
}

.btn-view-docs:hover {
  border-color: var(--ev-red);
  color: var(--ev-red) !important;
}

/* Responsiveness for New Landing Extensions */
@media (max-width: 1024px) {
  .safety-grid-four {
    grid-template-columns: repeat(2, 1fr);
  }
  .api-spotlight-split {
    grid-template-columns: 1fr;
  }
  .evsmm-fomo-payment-strip .landing-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .payment-trust-marquee-wrapper {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .safety-grid-four {
    grid-template-columns: 1fr;
  }
  .spotlight-heading {
    font-size: 1.7rem;
  }
}

/* ==========================================================================
   EVSMM CLIENT FINAL ADJUSTMENTS SUITE: QUICK SELECTORS, CURRENCY & MODALS
   ========================================================================== */

/* 1. Quick Social Media Selector Bar (POINT #1: Above Search Box) */
.quick-social-media-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.platform-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  border: 1.5px solid var(--ev-border);
  padding: 6px 14px;
  border-radius: var(--ev-radius-pill);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ev-text-primary);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.03);
  transition: var(--ev-transition);
}

.platform-filter-pill svg {
  flex-shrink: 0;
}

.platform-filter-pill:hover,
.platform-filter-pill.active {
  border-color: var(--ev-red);
  color: var(--ev-red);
  background: var(--ev-red-subtle);
  transform: translateY(-1px);
}

/* 2. Green "Auto-Dispatch Active" Badge (POINT #10) */
.badge-status-pulse-green {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4 !important;
  border: 1.5px solid #bbf7d0 !important;
  color: #166534 !important;
  padding: 4px 12px;
  border-radius: var(--ev-radius-pill);
  font-size: 0.74rem;
  font-weight: 800;
}

.pulse-dot-green-mini {
  width: 7px;
  height: 7px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
}

/* 3. Order Success Notification Banner (POINT #11: Directly Above Header) */
.order-success-banner {
  background: #f0fdf4 !important;
  border: 1.5px solid #bbf7d0 !important;
  border-left: 4px solid #22c55e !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
  color: #166534 !important;
}

.success-banner-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  margin-bottom: 8px;
}

.success-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 18px;
  font-size: 0.88rem;
  color: #15803d;
}

/* 4. Clickable VIP Loyalty Level Card & Benefits Modal (POINT #7) */
.tier-card-clickable {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tier-card-clickable:hover {
  border-color: #f59e0b !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.12) !important;
}

/* 5. Custom Receipt Bullets (POINT #5) */
.receipt-perks-custom {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.84rem;
  color: #475569;
  font-weight: 600;
  line-height: 1.45;
}

.receipt-perks-custom li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.perk-bullet-emoji {
  font-size: 15px;
  line-height: 1.2;
  flex-shrink: 0;
}

/* 6. Desktop Top Utility Bar & Currency Converter (POINT #6) */
.desktop-top-utility-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 14px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--ev-border);
}

.utility-live-clock {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ev-text-muted);
}

.utility-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-currency-toggle {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: var(--ev-radius-pill) !important;
  padding: 6px 14px !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  color: var(--ev-text-primary) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.03);
  cursor: pointer;
  transition: var(--ev-transition);
}

.btn-currency-toggle:hover {
  border-color: var(--ev-red) !important;
  color: var(--ev-red) !important;
}

.curr-icon-tag {
  font-size: 13px;
}

.dropdown-currencies .dropdown-menu {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08) !important;
  padding: 6px 0 !important;
  min-width: 140px;
}

.dropdown-currencies .dropdown-menu a {
  color: var(--ev-text-primary) !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem !important;
  text-decoration: none !important;
  transition: var(--ev-transition);
}

.dropdown-currencies .dropdown-menu a:hover {
  background: var(--ev-red-subtle) !important;
  color: var(--ev-red) !important;
}

.utility-account-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.utility-acc-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ev-text-muted);
  text-decoration: none !important;
  padding: 5px 10px;
  border-radius: 6px;
  transition: var(--ev-transition);
}

.utility-acc-link:hover {
  color: var(--ev-red);
  background: var(--ev-red-subtle);
}

/* 7. Orders Table: Reorder Button & Service ID Tag (POINT #12) */
.btn-order-reorder {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border) !important;
  color: var(--ev-text-primary) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  border-radius: var(--ev-radius-pill) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: var(--ev-transition) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.btn-order-reorder:hover {
  border-color: var(--ev-red) !important;
  color: var(--ev-red) !important;
  background: var(--ev-red-subtle) !important;
  transform: translateY(-1px);
}

.service-id-tag {
  background: var(--ev-red-subtle);
  color: var(--ev-red);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  display: inline-block;
}


/* 9. Sign In Google Button (POINT #2) */
.btn-google-universal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  background: #ffffff;
  border: 1.5px solid var(--ev-border-input);
  border-radius: 10px;
  color: #1e293b;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.02);
  transition: var(--ev-transition);
}

.btn-google-universal:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

/* 10. Mobile Navigation Drawer & Hamburger (POINT #9) */
.btn-mobile-hamburger {
  background: transparent;
  border: none;
  padding: 4px;
  color: var(--ev-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-top-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-mobile-curr {
  background: var(--ev-bg-elevated) !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  color: var(--ev-text-primary) !important;
  cursor: pointer;
}

.btn-sidebar-close {
  display: none;
  background: transparent;
  border: none;
  color: var(--ev-text-muted);
  cursor: pointer;
}

.sidebar-backdrop-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sidebar-backdrop-overlay.active {
  display: block !important;
  opacity: 1 !important;
}

@media (max-width: 900px) {
  .desktop-top-utility-bar {
    display: none !important;
  }

  /* Slide-Out Drawer Animation for Mobile */
  .evsmm-sidebar.mobile-drawer-open {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.2) !important;
    animation: drawerSlideIn 0.25s ease-out !important;
  }

  @keyframes drawerSlideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }

  .btn-sidebar-close {
    display: flex !important;
  }

  .brand-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .success-details-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   LOYALTY MODAL FIX: GUARANTEED CLICK-OUTSIDE & DISMISS VISIBILITY
   ========================================================================== */

#vipTiersModal {
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 10500 !important;
}

#vipTiersModal .modal-dialog {
  margin: 60px auto !important;
  max-width: 720px !important;
  z-index: 10501 !important;
}

#vipTiersModal .modal-content {
  background: #ffffff !important;
  border: 1.5px solid var(--ev-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

/* Ensure Close Buttons are Clickable & Visible */
#vipTiersModal .close {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  opacity: 0.8 !important;
  cursor: pointer !important;
  padding: 10px !important;
  line-height: 1 !important;
}

#vipTiersModal .close:hover {
  color: var(--ev-red) !important;
  opacity: 1 !important;
}

#vipTiersModal .btn-default {
  background: var(--ev-bg-elevated) !important;
  border: 1.5px solid var(--ev-border) !important;
  color: var(--ev-text-primary) !important;
  font-weight: 800 !important;
  padding: 9px 20px !important;
  border-radius: var(--ev-radius-sm) !important;
  cursor: pointer !important;
}

#vipTiersModal .btn-default:hover {
  border-color: #cbd5e1 !important;
  background: #f1f5f9 !important;
}
/* ==========================================================================
   PERMANENT FIX: 100% FIT MOBILE GUEST HEADER (ZERO HORIZONTAL BLOWOUT)
   Fits Logo + Language + Services + Sign In cleanly inside 360px screens
   ========================================================================== */

/* 1. Prevent ANY horizontal viewport blowout across the entire site */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  position: relative;
}

.evsmm-guest-header {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.evsmm-landing-universe,
.evsmm-guest-main,
.landing-container {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* 2. Compact Proportions on Mobile so all 4 elements fit on one line */
.mobile-guest-actions-cluster {
  display: none;
}

@media (max-width: 768px) {
  /* Hide the desktop text links list */
  .guest-menu-nav {
    display: none !important;
  }

  .guest-nav-inner {
    padding: 0 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Compact Logo on Mobile */
  .guest-brand-anchor img,
  .guest-nav-logo {
    max-height: 26px !important;
    max-width: 100px !important;
    width: auto !important;
  }

  /* Cluster on Right */
  .guest-right-cluster {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }

  /* Compact Language Toggle */
  .btn-lang-toggle {
    padding: 5px 7px !important;
    font-size: 0.72rem !important;
    height: 32px !important;
  }

  .mobile-guest-actions-cluster {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }

  /* Compact Services Pill */
  .mobile-guest-services-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: #ffffff !important;
    border: 1.5px solid var(--ev-border) !important;
    color: var(--ev-text-primary) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    padding: 5px 9px !important;
    height: 32px !important;
    border-radius: var(--ev-radius-pill) !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  /* Compact Sign In Pill */
  .mobile-guest-signin-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    padding: 5px 11px !important;
    height: 32px !important;
    border-radius: var(--ev-radius-pill) !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px var(--ev-red-glow) !important;
    box-sizing: border-box !important;
  }

  .mobile-guest-services-pill svg,
  .mobile-guest-signin-pill svg {
    width: 12px !important;
    height: 12px !important;
  }
}
/* ==========================================================================
   MOBILE HERO SECTION ALIGNMENT & FULL-WIDTH STATS POLISH
   ========================================================================== */
@media (max-width: 768px) {

  /* 1. Full-Width Clean Hero Stats Ribbon (Circled in Screenshot) */
  .hero-stats-ribbon {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* 3 clean equal columns */
    gap: 10px !important;
    padding: 16px 12px !important;
    text-align: center !important;
    margin: 0 0 20px 0 !important;
    background: #ffffff !important;
    border: 1.5px solid var(--ev-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--ev-shadow-card) !important;
  }

  .stat-pill-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .stat-pill-item strong {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  .stat-pill-item span {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    color: var(--ev-text-muted) !important;
    margin-top: 4px !important;
    letter-spacing: 0.3px !important;
  }

  /* Thin vertical dividers between the 3 columns */
  .stat-divider {
    display: none !important; /* Handled cleanly by grid gap */
  }

  .stat-pill-item:not(:last-child) {
    border-right: 1px solid var(--ev-border) !important;
    padding-right: 6px !important;
  }

  /* 2. Platform Rate Ticker Chips on Mobile (Balanced 2-Column Grid) */
  .hero-rate-ticker-chips {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  .ticker-chip {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
  }

  /* Make 5th chip (Facebook) span full width if odd number */
  .ticker-chip:nth-child(5) {
    grid-column: span 2 !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .chip-platform {
    font-size: 0.78rem !important;
  }

  .chip-rate {
    font-size: 0.76rem !important;
  }

  /* 3. Security Badges (Centered Clean Wrap on Mobile) */
  .hero-security-badges {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 24px !important;
    background: #f8fafc !important;
    border: 1px dashed var(--ev-border) !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
  }

  .sec-badge {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--ev-text-secondary) !important;
  }

  /* 4. Auth Capsule Form Card on Mobile */
  .auth-capsule-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 26px 20px !important;
    border-radius: 18px !important;
  }
}
/* ==========================================================================
   LOYALTY MODAL MOBILE SCROLL & TOUCH SLIDE FIX
   ========================================================================== */

/* Enable smooth horizontal touch-swiping on mobile */
.modal-tier-table-scroll {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border: 1px solid var(--ev-border) !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
}

.modal-tier-table {
  min-width: 540px !important; /* Ensures columns stay readable during touch scroll */
  width: 100% !important;
}

.modal-tier-table th {
  background: #f8fafc !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  color: var(--ev-text-muted) !important;
  padding: 12px 14px !important;
  white-space: nowrap !important;
}

.modal-tier-table td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  font-size: 0.88rem !important;
}

.tier-disc-tag {
  font-weight: 800;
  font-size: 0.78rem;
  padding: 2px 8px;
  border-radius: 4px;
}
.tier-disc-tag.text-blue { color: #2563eb; background: #eff6ff; }
.tier-disc-tag.text-green { color: #16a34a; background: #f0fdf4; }
.tier-disc-tag.text-red { color: #dc2626; background: #fff7f7; }

@media (max-width: 768px) {
  #vipTiersModal .modal-dialog {
    margin: 20px 10px !important;
    max-width: calc(100% - 20px) !important;
  }

  #vipTiersModal .modal-body {
    padding: 14px !important;
  }
}
/* ==========================================================================
   ORDER HISTORY MOBILE LABELS, COPYABLE ID & RIGHT-ALIGNED BUTTONS
   ========================================================================== */

/* 1. Click-to-Copy Order ID Badge (Never disappears on touch) */
.copyable-id-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--ev-bg-elevated) !important;
  border: 1px solid var(--ev-border) !important;
  border-radius: 8px !important;
  padding: 5px 10px !important;
  cursor: pointer !important;
  position: relative !important;
  color: var(--ev-text-primary) !important;
  font-weight: 800 !important;
  font-size: 0.84rem !important;
  transition: var(--ev-transition) !important;
}

.copyable-id-btn:hover,
.copyable-id-btn:active {
  border-color: var(--ev-red) !important;
  color: var(--ev-red) !important;
}

.copy-tiny-icon {
  color: var(--ev-text-muted);
}

.copied-tooltip {
  display: none;
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  background: #0f172a;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}

.copied-tooltip.show-tooltip {
  display: block !important;
  animation: fadeInOut 1.5s ease;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, 4px); }
  20%, 80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}

/* 2. Structured Label Tag */
.order-detail-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}

.detail-label-tag {
  display: none; /* Hidden on desktop table */
}

/* 3. Mobile Card Transformation */
@media (max-width: 768px) {
  .desktop-status-cell {
    display: none !important;
  }

  .detail-label-tag {
    display: inline-block !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    color: var(--ev-text-muted) !important;
    min-width: 95px !important;
    flex-shrink: 0 !important;
  }

  /* Card Header: Order ID on LEFT, Status on RIGHT */
  .order-card-header-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding-bottom: 10px !important;
    border-bottom: 1px dashed var(--ev-border) !important;
    margin-bottom: 6px !important;
  }

  .cell-status {
    position: static !important;
  }

  .order-row-entry td {
    padding: 0 !important;
    border: none !important;
  }

  /* Action Buttons placed cleanly at bottom right */
  .order-actions-cluster {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px dashed var(--ev-border) !important;
  }

  .btn-order-reorder {
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
  }
}
/* ==========================================================================
   FIX: ORDER LINK MULTI-LINE WRAP & SERVICE FULL TITLE VISIBILITY
   ========================================================================== */

/* 1. Ensure the Service Title is Always Bold & Fully Visible */
.order-service-name {
  width: 100% !important;
  max-width: 100% !important;
}

.service-full-title {
  display: block !important;
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  color: var(--ev-text-primary) !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* 2. Break Long Links onto New Lines (Never Cross Card Edge) */
.order-link-wrap {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.target-profile-link {
  display: inline-block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-all !important; /* Forces long URLs to wrap to next line */
  overflow-wrap: anywhere !important;
  color: #dc2626 !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

@media (max-width: 768px) {
  /* On mobile, let Link and Service stack label above value if long */
  .order-link-line,
  .order-service-line {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  .order-link-line .detail-label-tag,
  .order-service-line .detail-label-tag {
    margin-bottom: 2px !important;
  }

  .target-profile-link {
    background: #f8fafc;
    border: 1px dashed var(--ev-border);
    padding: 6px 10px;
    border-radius: 6px;
    box-sizing: border-box;
  }
}
/* ==========================================================================
   FIX: GUARANTEED VISIBILITY FOR SERVICE ID & SERVICE TITLE
   ========================================================================== */

/* 1. Container wraps cleanly without collapsing */
.order-service-box {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 2. Service ID Badge (#8483) */
.service-id-tag {
  display: inline-block !important;
  background: rgba(220, 38, 38, 0.08) !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
  color: #dc2626 !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  line-height: 1.2 !important;
}

/* 3. Service Full Title */
.service-title-text {
  display: inline !important;
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.45 !important;
  word-break: break-word !important;
  white-space: normal !important;
  visibility: visible !important;
}

@media (max-width: 768px) {
  .order-service-line {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  .order-service-box {
    gap: 6px !important;
  }

  .service-title-text {
    font-size: 0.92rem !important;
  }
}
/* ==========================================================================
   FORCE SERVICE TITLE VISIBILITY ON DESKTOP & MOBILE TABLES
   ========================================================================== */
#orders-data-table .cell-service,
.evsmm-table .cell-service,
.cell-service {
  min-width: 180px !important;
  max-width: 340px !important;
  white-space: normal !important;
}

.order-service-box {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.service-title-text {
  display: inline !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* ==========================================================================
   DESKTOP ORDERS TABLE FORMATTING: SLIM ROWS, LINK TRUNCATION & CLEAN ALIGNMENT
   Applies only on Desktop (> 768px), leaving mobile app cards 100% untouched
   ========================================================================== */

@media (min-width: 769px) {

  /* 1. Prevent Rows from Stretching: Vertical Middle Alignment */
  #orders-data-table {
    table-layout: auto !important;
    width: 100% !important;
  }

  #orders-data-table .order-row-entry td {
    vertical-align: middle !important;
    padding: 16px 14px !important;
    height: auto !important;
  }

  /* 2. Fix the Link Column on Desktop: Clean 1-Line Truncation (No 20-line squish) */
  #orders-data-table .col-order-link,
  #orders-data-table .cell-link {
    width: 220px !important;
    min-width: 190px !important;
    max-width: 240px !important;
  }

  #orders-data-table .target-profile-link {
    display: inline-block !important;
    max-width: 185px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Truncates long URLs cleanly onto 1 line */
    word-break: normal !important;
    vertical-align: middle !important;
  }

  /* 3. Hide the Duplicate Status Badge inside the ID cell on Desktop */
  /* (Leaves the dedicated STATUS column on the right as the single source) */
  #orders-data-table .order-card-header-flex .status-badge {
    display: none !important;
  }

  #orders-data-table .order-card-header-flex {
    display: inline-flex !important;
    justify-content: flex-start !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 4. Desktop Service Column Width & Flow */
  #orders-data-table .col-order-service,
  #orders-data-table .cell-service {
    min-width: 220px !important;
    max-width: 320px !important;
    white-space: normal !important;
  }

  #orders-data-table .order-service-box {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* 5. Clean Action Buttons */
  #orders-data-table .col-order-actions,
  #orders-data-table .cell-actions {
    width: 100px !important;
    white-space: nowrap !important;
  }
}
/* ==========================================================================
   SERVICES PAGE: FULL TITLE WRAP, FULL MAX LIMITS & MODAL STYLING
   ========================================================================== */

/* 1. Ensure Full Title Wraps Inside the Box (No Overflow) */
.service-name-text {
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  color: var(--ev-text-primary) !important;
  line-height: 1.45 !important;
}

/* 2. Format Limits (Min / Max Numbers) */
.limit-pill {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: var(--ev-text-primary) !important;
  white-space: nowrap !important;
}

.limit-label-mobile {
  display: none;
}

/* 3. Empty Clock Badge Fix: Hide if empty */
.cell-avg:empty,
.speed-time-badge:empty {
  display: none !important;
}

/* 4. Service Details Modal Popup */
#serviceDetailsModal {
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  z-index: 10600 !important;
}

#serviceDetailsModal .modal-dialog {
  margin: 50px auto !important;
  max-width: 600px !important;
  z-index: 10601 !important;
}

.service-modal-header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-right: 28px;
}

.service-modal-id-badge {
  background: var(--ev-red-subtle);
  border: 1px solid var(--ev-red-border);
  color: var(--ev-red);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
}

#modal-service-title {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: var(--ev-text-primary) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

.service-modal-desc-box {
  background: #f8fafc;
  border: 1.5px solid var(--ev-border);
  border-radius: 12px;
  padding: 16px 18px;
  max-height: 280px;
  overflow-y: auto;
}

.modal-desc-content {
  font-size: 0.92rem;
  color: var(--ev-text-secondary);
  line-height: 1.6;
  white-space: normal;
  word-break: break-word;
}

.service-modal-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 22px !important;
}

.btn-modal-back {
  background: var(--ev-bg-elevated) !important;
  border: 1.5px solid var(--ev-border) !important;
  font-weight: 800 !important;
  padding: 10px 22px !important;
  border-radius: var(--ev-radius-sm) !important;
  color: var(--ev-text-secondary) !important;
  cursor: pointer;
}

.btn-modal-order {
  background: var(--ev-red) !important;
  border: none !important;
  font-weight: 900 !important;
  padding: 10px 24px !important;
  border-radius: var(--ev-radius-sm) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px var(--ev-red-glow) !important;
  transition: var(--ev-transition);
}

.btn-modal-order:hover {
  background: var(--ev-red-hover) !important;
  transform: translateY(-1px);
}

/* 5. Mobile Adjustments for Services Cards */
@media (max-width: 768px) {
  .limit-label-mobile {
    display: inline !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    color: var(--ev-text-muted) !important;
    margin-right: 4px !important;
  }

  .cell-min, .cell-max {
    display: inline-block !important;
    margin-right: 14px !important;
  }

  .service-data-row {
    padding: 16px 16px !important;
    gap: 10px !important;
  }

  .btn-service-desc {
    margin-top: 4px;
    height: 42px !important;
    font-size: 0.88rem !important;
  }

  #serviceDetailsModal .modal-dialog {
    margin: 20px 12px !important;
    max-width: calc(100% - 24px) !important;
  }
}
/* ==========================================================================
   EVSMM LUXURY SERVICE MODAL & LIMIT PILLS POLISH
   ========================================================================== */

/* 1. Limit Pills in Table (Guaranteed Visible Full Numbers) */
.cell-min .limit-pill,
.cell-max .limit-pill {
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

/* 2. Modal Window Architecture */
#serviceDetailsModal .modal-dialog {
  max-width: 640px !important;
  margin: 40px auto !important;
}

.service-modal-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.22) !important;
  background: #ffffff !important;
}

.modal-accent-bar {
  height: 4px;
  background: linear-gradient(90deg, #dc2626, #fca5a5, #dc2626);
  width: 100%;
}

.service-modal-head {
  padding: 20px 24px 14px !important;
  border-bottom: 1px dashed #e2e8f0 !important;
  background: #ffffff !important;
}

.service-modal-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.service-modal-id-badge {
  background: rgba(220, 38, 38, 0.08) !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
  color: #dc2626 !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
}

.btn-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #64748b;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-modal-close:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

#modal-service-title {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* 3. 4-Parameter Specs Ribbon */
.service-modal-body {
  padding: 20px 24px !important;
  background: #ffffff !important;
}

.service-modal-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.param-card {
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  border: 1px solid #e2e8f0;
}

.param-card.card-rate {
  background: #fff5f5;
  border-color: rgba(220, 38, 38, 0.2);
}

.param-card.card-min,
.param-card.card-max {
  background: #f8fafc;
}

.param-card.card-speed {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.param-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
}

.param-card.card-rate .param-label {
  color: #991b1b;
}

.param-card.card-speed .param-label {
  color: #166534;
}

.param-val {
  font-size: 0.95rem;
  font-weight: 900;
  color: #0f172a;
}

.param-val.text-red {
  color: #dc2626;
}

.param-val.text-green {
  color: #15803d;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* 4. Description Box */
.service-modal-desc-wrapper {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 20px;
}

.desc-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #cbd5e1;
}

.desc-box-title {
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.desc-box-content {
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.55;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
}

/* 5. Modal Footer */
.service-modal-foot {
  padding: 16px 24px !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.btn-modal-back {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  padding: 10px 22px !important;
  color: #475569 !important;
  font-size: 0.9rem !important;
}

.btn-modal-back:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.btn-modal-order {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 900 !important;
  padding: 11px 26px !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.35) !important;
  transition: transform 0.2s ease;
}

.btn-modal-order:hover {
  transform: translateY(-1px);
  color: #ffffff !important;
}

@media (max-width: 640px) {
  .service-modal-ribbon {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ==========================================================================
   EVSMM LUXURY SERVICE MODAL & LIMIT PILLS POLISH
   ========================================================================== */

/* 1. Limit Pills in Table (Guaranteed Visible Full Numbers) */
.cell-min .limit-pill,
.cell-max .limit-pill {
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

/* 2. Modal Window Architecture */
#serviceDetailsModal .modal-dialog {
  max-width: 640px !important;
  margin: 40px auto !important;
}

.service-modal-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.22) !important;
  background: #ffffff !important;
}

.modal-accent-bar {
  height: 4px;
  background: linear-gradient(90deg, #dc2626, #fca5a5, #dc2626);
  width: 100%;
}

.service-modal-head {
  padding: 20px 24px 14px !important;
  border-bottom: 1px dashed #e2e8f0 !important;
  background: #ffffff !important;
}

.service-modal-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.service-modal-id-badge {
  background: rgba(220, 38, 38, 0.08) !important;
  border: 1px solid rgba(220, 38, 38, 0.25) !important;
  color: #dc2626 !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 6px !important;
}

.btn-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f1f5f9;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #64748b;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-modal-close:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

#modal-service-title {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* 3. 4-Parameter Specs Ribbon */
.service-modal-body {
  padding: 20px 24px !important;
  background: #ffffff !important;
}

.service-modal-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.param-card {
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  border: 1px solid #e2e8f0;
}

.param-card.card-rate {
  background: #fff5f5;
  border-color: rgba(220, 38, 38, 0.2);
}

.param-card.card-min,
.param-card.card-max {
  background: #f8fafc;
}

.param-card.card-speed {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.param-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
}

.param-card.card-rate .param-label {
  color: #991b1b;
}

.param-card.card-speed .param-label {
  color: #166534;
}

.param-val {
  font-size: 0.95rem;
  font-weight: 900;
  color: #0f172a;
}

.param-val.text-red {
  color: #dc2626;
}

.param-val.text-green {
  color: #15803d;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* 4. Description Box */
.service-modal-desc-wrapper {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 20px;
}

.desc-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #cbd5e1;
}

.desc-box-title {
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.desc-box-content {
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.55;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
}

/* 5. Modal Footer */
.service-modal-foot {
  padding: 16px 24px !important;
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.btn-modal-back {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  padding: 10px 22px !important;
  color: #475569 !important;
  font-size: 0.9rem !important;
}

.btn-modal-back:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.btn-modal-order {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 900 !important;
  padding: 11px 26px !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.35) !important;
  transition: transform 0.2s ease;
}

.btn-modal-order:hover {
  transform: translateY(-1px);
  color: #ffffff !important;
}

@media (max-width: 640px) {
  .service-modal-ribbon {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ==========================================================================
   EVSMM MOBILE SERVICES FIX: CLEAN LABELS, RATES & DETAILS BUTTON
   ========================================================================== */

/* 1. Eliminate Duplicate "Min: Min:" & "Max: Max:" on Mobile */
.cell-min::before,
.cell-max::before {
  content: none !important;
  display: none !important;
}

.limit-label-mobile {
  display: none;
}

@media (max-width: 768px) {
  .limit-label-mobile {
    display: inline !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    margin-right: 4px !important;
  }
}

/* 2. Format Currency Rate (₹ amount.XXX) */
.cell-rate .rate-accent {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: var(--ev-red) !important;
  letter-spacing: -0.2px !important;
}

/* 3. Button "View Details" Full Width & Touch Polish */
.btn-service-desc {
  width: 100% !important;
  justify-content: center !important;
  height: 42px !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  gap: 8px !important;
  border-radius: var(--ev-radius-pill) !important;
}