:root {
  --font-main: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;

  --color-bg: #050505; /* True Black for OLED/modern dark mode */
  --color-bg-secondary: #0A0A0A; /* Deep Dark */
  --color-text: #F8FAFC; /* Slate-50 */
  --color-text-muted: #888888; /* Slate-400 */
  --color-border: rgba(255, 255, 255, 0.08);

  --color-primary: #0070F3; /* Vercel Blue - Modern SaaS */
  --color-primary-dark: #0761D1;
  --color-secondary: #7928CA; /* Deep Purple */
  --color-accent: #00DFD8; /* Cyan Glow */

  --gradient-main: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-glow: radial-gradient(circle, rgba(0, 112, 243, 0.15) 0%, transparent 70%);

  /* --- Bento Grid 2.0 & Glassmorphism Variables --- */
  --bento-bg: rgba(17, 17, 17, 0.6); /* Translucent dark */
  --bento-border: rgba(255, 255, 255, 0.05); /* Very subtle white edge */
  --bento-radius: 20px;
  --bento-blur: blur(20px);
  --bento-shadow: 0 10px 40px -10px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.05);
  
  --spacing-container: 1200px;
  --spacing-section: 6rem;
  
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.25);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
  --transition-smooth: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  /* Force enable selection */
  -webkit-user-select: text !important;
  user-select: text !important;
  -moz--ms-user-select: text !important;
  user-select: text !important;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* --- UTILITIES --- */
.hidden { display: none !important; }

/* --- COMPONENT STYLES --- */
a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

ul {
  list-style: none;
}

.container {
  max-width: var(--spacing-container);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Typography */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
}

.gradient-text {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.8rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
}

.btn-primary {
  background: var(--color-primary);
  color: white;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-border);
  color: white;
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
}

.btn-sm {
  padding: 0.5rem 1.5rem;
  font-size: 0.9rem;
}

/* Custom File Input Upload Button */
.premium-file-input {
  width: 100%;
  color: #a0a0a0;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.3s ease;
  padding: 0;
  background: rgba(25, 25, 25, 0.5);
  border: 1px dashed rgba(0, 112, 243, 0.4);
}

.premium-file-input:hover {
  border-color: var(--color-primary);
  background: rgba(0, 112, 243, 0.05);
}

.premium-file-input::file-selector-button {
  cursor: pointer;
  border: none;
  background: var(--gradient-main);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 6px 0 0 6px;
  margin-right: 1rem;
  font-family: var(--font-main);
  font-weight: 600;
  transition: opacity 0.3s;
}

.premium-file-input::file-selector-button:hover {
  opacity: 0.9;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(11, 15, 25, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 1000;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-right: 1rem;
  white-space: nowrap;
}

.logo .accent {
  color: var(--color-primary);
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  font-size: 0.9rem;
  opacity: 0.8;
  white-space: nowrap;
}

.nav-links a:hover {
  opacity: 1;
  color: var(--color-primary);
}

/* Nav Dropdown Menu Container */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Nav Dropdown Child Menu */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(11, 15, 25, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  min-width: 200px;
  padding: 0.5rem 0;
  z-index: 1050;
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* Show on Hover */
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu li {
  width: 100%;
}

.nav-dropdown-menu li a {
  display: block;
  padding: 0.7rem 1.2rem;
  color: #ccc;
  font-size: 0.9rem;
  transition: all 0.2s;
  white-space: nowrap;
}

.nav-dropdown-menu li a:hover {
  background: rgba(0, 112, 243, 0.1);
  color: white;
  padding-left: 1.5rem;
}


.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.lang-switch {
  display: flex;
  gap: 5px;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.lang-btn {
  background: transparent;
  border: none;
  color: #888;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.lang-btn.active {
  background: var(--color-primary);
  color: white;
}

.lang-btn:hover:not(.active) {
  color: white;
}

/* User Menu */
.user-menu-container {
  position: relative;
  display: flex;
  align-items: center;
}

.user-icon-btn {
  color: white;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-primary);
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: -50px;
  /* Adjust to center or align right */
  width: 220px;
  background: #111;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s;
  z-index: 1000;
  overflow: hidden;
}

/* Show Dropdown on Parent Hover or Click (toggled via JS) */
.user-menu-container.logged-in:hover .user-dropdown,
.user-menu-container.logged-in.show-dropdown .user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-header {
  padding: 1rem;
  background: #1a1a1a;
  border-bottom: 1px solid #333;
}

.dropdown-items {
  padding: 0.5rem 0;
}

.dropdown-items li a {
  display: block;
  padding: 0.8rem 1.5rem;
  color: #ccc;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.dropdown-items li a:hover {
  background: rgba(0, 112, 243, 0.1);
  color: white;
  padding-left: 1.8rem;
  /* Slight slide effect */
}

.dropdown-items .divider {
  height: 1px;
  background: #333;
  margin: 0.5rem 0;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.bar {
  width: 25px;
  height: 2px;
  background-color: white;
}

/* Hero Section */
.hero {
  padding: 180px 0 100px;
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% -20%, rgba(59, 130, 246, 0.1) 0%, transparent 60%);
  z-index: -1;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.version-badge {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-text h1 {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.subtitle {
  font-size: 1.2rem;
  color: var(--color-text-muted);
  margin-bottom: 2rem;
  max-width: 90%;
}

.cta-group {
  display: flex;
  gap: 1rem;
}

.hero-visual {
  position: relative;
  perspective: 1000px;
}

.mockup-container {
  position: relative;
  width: 100%;
  height: 400px;
  /* Placeholder height */
  display: flex;
  justify-content: center;
  align-items: center;
}

.mockup-3d {
  width: 100%;
  max-width: 500px;
  height: auto;
  position: relative;
  transform-style: preserve-3d;
  animation: rotateCube 10s infinite linear;
}

@keyframes rotateCube {
  0% {
    transform: rotateX(-15deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(-15deg) rotateY(360deg);
  }
}

.mockup-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1a1a1a;
  /* Fallback */
}

.glow-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(0, 112, 243, 0.2) 0%, transparent 60%);
  filter: blur(20px);
  z-index: -1;
  animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.6;
    scale: 1;
  }

  50% {
    opacity: 1;
    scale: 1.2;
  }
}

/* Features Grid */
.features {
  padding: var(--spacing-section) 0;
  background: var(--color-bg-secondary);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: var(--shadow-md);
}

.icon-box {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.feature-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.feature-card p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Value Prop */
.value-prop {
  padding: var(--spacing-section) 0;
  background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
  background-size: 40px 40px;
}

.value-content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.section-desc {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: 3rem;
}

.benefits-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  text-align: left;
  background: var(--color-bg-secondary);
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

/* Efficiency */
.efficiency {
  padding: var(--spacing-section) 0;
}

.efficiency-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Alternating order for variety if multiple blocks, single here */
.efficiency-text h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.efficiency-text p {
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}

.ui-card {
  background: transparent;
  height: auto;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.ui-preview-img {
  width: 100%;
  height: auto;
  display: block;
}

.mini-highlights {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.highlight {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.03);
  padding: 1rem;
  border-radius: 10px;
  border-left: 3px solid var(--color-primary);
}

.h-icon {
  font-size: 1.5rem;
}

/* Partners */
.partners {
  padding: 3rem 0;
  text-align: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.partners-label {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.partners-carousel {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
  opacity: 0.6;
}

.partner-logo {
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
}

/* Pricing */
.pricing {
  padding: var(--spacing-section) 0;
  background: var(--color-bg-secondary);
  position: relative;
  overflow: hidden;
}

/* Subtle background glow for pricing */
.pricing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 500px;
  background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
  z-index: 0;
}

.main-pricing {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  max-width: 450px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.pricing-header {
  padding: 3rem 2rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--color-border);
}

.price {
  font-size: 4rem;
  font-weight: 700;
  color: white;
  margin: 1rem 0 0.5rem;
}

.sub-price {
  color: var(--color-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
}

.pricing-body {
  padding: 2rem 2rem 3rem;
}

.annual-fee {
  display: flex;
  justify-content: space-between;
  background: rgba(0, 255, 0, 0.1);
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 2rem;
  border: 1px solid rgba(0, 255, 0, 0.2);
}

.fee-label {
  font-weight: 600;
}

.fee-value {
  font-weight: 700;
  color: #4ade80;
}

.pricing-features li {
  margin-bottom: 1rem;
  display: flex;
  gap: 10px;
}

.pricing-faq {
  text-align: center;
  margin-top: 2rem;
  color: var(--color-text-muted);
}

.full-width {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}

/* Resellers */
.resellers {
  padding: var(--spacing-section) 0;
  text-align: center;
}

.reseller-badges {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}

.reseller-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 15px;
  width: 180px;
  border: 1px solid transparent;
  transition: all 0.3s;
}

.reseller-badge.active {
  border-color: var(--color-primary);
  background: rgba(0, 112, 243, 0.05);
  animation: pulse-badge 2s infinite ease-in-out;
}

@keyframes pulse-badge {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 112, 243, 0.4);
  }

  50% {
    transform: scale(1.03);
    box-shadow: 0 0 20px 0 rgba(0, 112, 243, 0.2);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 112, 243, 0);
  }
}

a.reseller-badge {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.reseller-badge:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.1);
}

.reseller-badge .flag {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.reseller-badge .country {
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.reseller-badge .domain {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.reseller-badge .status {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  background: var(--color-primary);
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
}

/* Contact */
.contact {
  padding: var(--spacing-section) 0;
  background: var(--color-bg-secondary);
}

.contact-container {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 4rem;
}

.contact-form-wrapper h2 {
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: white;
  font-family: var(--font-main);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.info-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.info-item .icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: 12px;
  display: flex;
  box-shadow: var(--shadow-lg);
  max-width: 600px;
  width: 90%;
  z-index: 10000;
  transition: all 0.5s;
}

.cookie-banner.hidden {
  transform: translate(-50%, 100px);
  opacity: 0;
  pointer-events: none;
}

.cookie-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 2rem;
}

.cookie-content p {
  font-size: 0.9rem;
  color: #ccc;
  margin-bottom: 0;
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cookie-link {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
}

/* Scroll Animations */
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, visibility;
}

.fade-in-section.visible {
  opacity: 1;
  transform: none;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
  .container {
    padding: 0 1rem;
  }

  .hero-text h1 {
    font-size: 2.8rem;
  }

  .nav-container {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .logo {
    font-size: 1.2rem;
    white-space: nowrap;
  }

  .nav-actions {
    gap: 0.5rem;
  }

  .nav-actions .btn-primary {
    display: none;
    /* Hide Acheter button in header to save space on mobile */
  }

  .nav-links {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    background: var(--color-bg-secondary);
    flex-direction: column;
    padding: 2rem;
    gap: 1.5rem;
    -webkit-clip-path: circle(0px at 100% 0px);
    clip-path: circle(0px at 100% 0px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.5s ease-in-out;
    border-bottom: 1px solid var(--color-border);
    overflow-y: auto;
    max-height: calc(100vh - 60px);
    z-index: 1000;
  }

  .nav-links.active {
    -webkit-clip-path: circle(150% at 100% 0px);
    clip-path: circle(150% at 100% 0px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Display mobile specific links */
  .mobile-only {
    display: block !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    margin-top: 0.5rem;
  }

  .hero-content,
  .efficiency-layout,
  .features-grid,
  .benefits-list,
  .contact-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .menu-toggle {
    display: flex;
    margin-left: 0.5rem;
  }

  .hero-visual {
    order: -1;
  }

  .cart-drawer {
    width: 90%;
    max-width: none;
  }
}

.mobile-only {
  display: none;
}

/* Cart Styles (New) */
.cart-icon-container {
  position: relative;
  cursor: pointer;
  color: white;
  padding: 8px;
  transition: color 0.3s;
}

.cart-icon-container:hover {
  color: var(--color-primary);
}

.cart-count-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--color-primary);
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Drawer */
.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.cart-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible !important;
  z-index: 10000 !important;
  display: flex !important;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: -400px;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background: var(--color-bg-secondary);
  z-index: 9999;
  box-shadow: var(--shadow-lg);
  transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.cart-drawer.open {
  right: 0;
}

.cart-header {
  padding: 1.5rem;
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-header h3 {
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #222;
}

.cart-item h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.cart-item p {
  color: #888;
  font-size: 0.9rem;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-item-actions button {
  background: #333;
  border: none;
  color: white;
  width: 25px;
  height: 25px;
  border-radius: 4px;
  cursor: pointer;
}

.cart-item-actions button.remove-btn {
  background: #ff007f33;
  color: #ff007f;
}

.cart-footer {
  padding: 1.5rem;
  background: #1a1a1a;
  border-top: 1px solid #333;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.cart-empty {
  text-align: center;
  color: #666;
  margin-top: 2rem;
}

/* Video Demo Section */
.video-demo {
  padding: 4rem 0;
  background: var(--color-bg-secondary);
  position: relative;
  overflow: hidden;
}

.video-demo .container {
  text-align: center;
}

.video-demo .section-desc {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

.video-container video {
  max-width: 650px;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-container video:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg) !important;
}

/* FAQ Section */
.faq-section {
  padding: var(--spacing-section) 0;
  background: var(--color-bg);
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.faq-item {
  background: var(--color-bg-secondary);
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  transition: all 0.3s;
}

.faq-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow-md);
}

.faq-item h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: white;
}

.faq-item p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Footer */
footer {
  background: var(--color-bg-secondary);
  padding: 5rem 0 2rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
}

.footer-col h4 {
  color: white;
  margin-bottom: 1.5rem;
  font-size: 1.2rem;
}

.footer-col ul li {
  margin-bottom: 0.8rem;
}

.footer-col ul li a {
  color: var(--color-text-muted);
  transition: color 0.3s;
}

.footer-col ul li a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.9rem;
}

.disclaimer {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
}

/* Notification Toast */
.notification-toast {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: #111;
  color: white;
  padding: 1rem 2rem;
  border-radius: 50px;
  border: 1px solid #333;
  z-index: 9999;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
}

.notification-toast.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.notification-toast.success {
  border-color: #00ff88;
  color: #00ff88;
  background: rgba(0, 255, 136, 0.1);
}

.notification-toast.error {
  border-color: #ff0055;
  color: #ff0055;
  background: rgba(255, 0, 85, 0.1);
}

/* Blog Styles (Restored) */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
  margin-top: 2rem;
}

.blog-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255, 255, 255, 0.1);
}

.blog-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.blog-content {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-date {
  font-size: 0.85rem;
  color: var(--color-primary);
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.blog-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: #fff;
  line-height: 1.3;
}

.blog-desc {
  color: #b0b0b0;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.read-more {
  margin-top: auto;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s;
}

.read-more:hover {
  color: var(--color-primary);
  gap: 12px;
}

/* Single Post Styles */
.post-img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
}

.post-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #ddd;
  max-width: 800px;
  margin: 0 auto;
}

.post-title {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 1rem;
  background: linear-gradient(to right, #fff, #aaa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.post-meta {
  text-align: center;
  color: var(--color-primary);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.9rem;
}

.post-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s;
  width: 45%;
}

.nav-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-5px);
}

.nav-label {
  display: block;
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 0.5rem;
}

.nav-title {
  color: #fff;
  font-weight: bold;
}

/* Software Details Section */
.software-details {
  padding: var(--spacing-section) 0;
  background: var(--color-bg);
  position: relative;
}

.details-header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 3rem;
}

.details-eyebrow {
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.9rem;
  font-weight: 700;
  display: block;
  margin-bottom: 1rem;
}

.details-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
}

.lead-text {
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.sub-text {
  color: var(--color-text-muted);
  margin-bottom: 2rem;
}

.details-list {
  list-style: none;
  padding: 0;
}

.premium-list li {
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #ddd;
  display: flex;
  align-items: center;
  gap: 10px;
}

.premium-list li::before {
  content: '✓';
  color: var(--color-primary);
  font-weight: bold;
}

.details-actions {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 3rem;
}

.btn-premium-pink {
  background: var(--color-primary);
  color: white;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0, 112, 243, 0.3);
  transition: all 0.3s ease;
}

.btn-premium-pink:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 112, 243, 0.5);
  background: var(--color-primary-dark);
}

.container-narrow {
  max-width: 1000px;
  margin: 0 auto;
}

.details-separator {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
  margin: 3rem 0;
}

@media (max-width: 768px) {

  .details-header-grid,
  .details-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.details-header-grid .header-right {
  display: flex;
  align-items: center;
}

.quote {
  font-size: 1.1rem;
  font-style: italic;
  color: #bbb;
  border-left: 3px solid var(--color-primary);
  padding-left: 1.5rem;
  line-height: 1.6;
  max-width: 90%;
}

/* Footer Payment Icons */
.footer-payment-icons {
  display: flex;
  gap: 15px;
  margin-top: 15px;
  align-items: center;
}

.footer-payment-icons img,
.footer-payment-icons svg {
  height: 30px;
  /* Reduced slightly to prevent layout break */
  width: auto;
  filter: grayscale(100%) opacity(0.7) brightness(1.5);
  /* Monochrome, lightened for dark bg */
  transition: all 0.3s ease;
  margin-right: 10px;
}

.footer-payment-icons img:hover,
.footer-payment-icons svg:hover {
  filter: none;
  /* Full color on hover */
  opacity: 1;
  transform: translateY(-2px);
}

.footer-payment-icons svg:hover {
  fill: #fff;
  opacity: 1;
  transform: translateY(-2px);
}

/* Specific Brand Colors on Hover */
.footer-payment-icons .icon-visa:hover {
  fill: #1a73e8;
}

.footer-payment-icons .icon-mastercard:hover {
  fill: #eb001b;
}


.footer-payment-icons .icon-stripe:hover {
  fill: #635bff;
}

/* -------------------------------- */
/* TRIAL SECTION STYLES             */
/* -------------------------------- */
.trial-section {
  padding: 6rem 0;
  background: var(--color-bg-secondary);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.trial-content {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: center;
}

.trial-badge {
  display: inline-block;
  background: rgba(212, 175, 55, 0.1);
  color: #d4af37;
  /* Gold */
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.trial-text h2 {
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.trial-text p {
  color: #bbb;
  font-size: 1.1rem;
  margin-bottom: 2rem;
  max-width: 500px;
}

.trial-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.trial-features li {
  font-size: 1rem;
  color: #ddd;
  display: flex;
  align-items: center;
  gap: 10px;
}

.trial-features li::before {
  content: "✔️";
  color: #00ff88;
}

.trial-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.btn-glow {
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

.btn-glow:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.trial-note {
  font-size: 0.85rem;
  color: #666;
}

.shield-icon {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.2));
  animation: floatShield 6s ease-in-out infinite;
}

.shield-icon svg {
  width: 100%;
  height: auto;
}

@keyframes floatShield {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

@media (max-width: 900px) {
  .trial-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .trial-actions {
    align-items: center;
  }

  .trial-text p {
    margin: 0 auto 2rem;
  }
}

/* --- PRICING GRID LAYOUT FIX (FINAL) --- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    /* Tighter gap */
    margin-top: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    /* Force side-by-side */
  }

  .pricing-card, .pricing-saas-card {
    flex: 1 1 300px;
    /* Grow/shrink, base 300px */
    max-width: 380px;
    /* COMPACT WIDTH */
    min-width: 280px;
    display: flex;
    flex-direction: column;
    /* Ensure no other overrides */
    width: auto !important;
    margin: 0 !important;
  }

  @media (max-width: 768px) {
    .pricing-grid {
      grid-template-columns: 1fr;
      align-items: center;
    }

    .pricing-card, .pricing-saas-card {
      width: 100% !important;
      max-width: 450px;
    }
  }

  /* -------------------------------- */
  /* CART DRAWER STYLES               */
  /* -------------------------------- */
  .cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .cart-overlay.open {
    opacity: 1;
    visibility: visible;
  }

  .cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 90%;
    height: 100%;
    background: #111;
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-left: 1px solid #333;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  }

  .cart-drawer.open {
    transform: translateX(0);
  }

  .cart-header {
    padding: 1.5rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .cart-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #fff;
  }

  .close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
  }

  .close-btn:hover {
    color: var(--color-primary);
  }

  .cart-items {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
  }

  .cart-item-details h4 {
    margin: 0 0 0.3rem 0;
    font-size: 1rem;
    color: #fff;
  }

  .cart-item-details p {
    margin: 0;
    font-size: 0.9rem;
    color: #888;
  }

  .cart-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .cart-item-actions button {
    background: #333;
    border: none;
    color: #fff;
    width: 25px;
    height: 25px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cart-item-actions span {
    font-size: 0.9rem;
    min-width: 20px;
    text-align: center;
    color: #fff;
  }

  .cart-item-actions .remove-btn {
    background: rgba(255, 0, 0, 0.2);
    color: #ff4444;
    margin-left: 10px;
    font-size: 1.2rem;
    line-height: 1;
  }

  .cart-item-actions .remove-btn:hover {
    background: #ff4444;
    color: white;
  }

  .cart-footer {
    padding: 1.5rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
  }

  .cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #fff;
  }

  .cart-empty {
    text-align: center;
    color: #888;
    margin-top: 2rem;
  }

  /* Badge CSS */
  .cart-icon-container {
    position: relative;
    cursor: pointer;
    padding: 8px;
  }

  .cart-count-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--color-primary);
    color: white;
    font-size: 0.7rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 2px solid #050505;
  }

/* Gallery Slider */
.gallery-slider {
  padding: 4rem 0;
  background-color: var(--color-bg);
  overflow: hidden;
}

.slider-track-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 2rem 0;
}

.slider-track-container::before,
.slider-track-container::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.slider-track-container::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg) 0%, transparent 100%);
}

.slider-track-container::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg) 0%, transparent 100%);
}

.slider-track {
  display: flex;
  width: max-content;
  animation: scrollTrack 80s linear infinite;
  gap: 2rem;
}

.slider-track:hover {
  animation-play-state: paused;
}

.slider-track img {
  height: 250px;
  width: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.slider-track img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px var(--color-primary);
}

@keyframes scrollTrack {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50% - 1rem));
  }
}

@media (max-width: 768px) {
  .slider-track img {
    height: 180px;
  }
}

/* Lightbox Styles */
.lightbox-overlay {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
  display: flex;
  opacity: 1;
}

.lightbox-img {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
  animation: zoomIn 0.3s ease;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 100000;
}

.lightbox-close:hover,
.lightbox-close:focus {
  color: var(--color-primary);
  text-decoration: none;
}

@keyframes zoomIn {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

/* WhatsApp Community Section */
.whatsapp-community {
  padding: 5rem 0;
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.05) 0%, var(--color-bg-secondary) 100%);
  border-top: 1px solid rgba(37, 211, 102, 0.2);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  position: relative;
  z-index: 10;
}

.whatsapp-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.whatsapp-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.whatsapp-icon-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background: rgba(37, 211, 102, 0.15);
  border-radius: 50%;
  margin-bottom: 2rem;
  box-shadow: 0 0 30px rgba(37, 211, 102, 0.3);
  animation: pulse-whatsapp 2s infinite ease-in-out;
}

.whatsapp-icon-big {
  color: #25D366;
}

.btn-whatsapp {
  background: #25D366;
  color: #fff;
  box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
  margin-top: 1.5rem;
  font-size: 1.1rem;
  padding: 1rem 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-whatsapp:hover {
  background: #128C7E;
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6);
  transform: translateY(-3px);
  color: white;
}

/* Testimonials Alignment Fix */
.customer-feedback > div > div {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}
.customer-feedback > div > div > p {
  flex-grow: 1;
}

@keyframes pulse-whatsapp {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }

  70% {
    box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* GTranslate Widget Custom Premium Styling */


/* Force dark mode and neon aesthetic onto the floating wrapper */


/* Hover glow effect for the main button */


/* Style the dropdown menu items */




/* Hover on language rows */


/* Hide footers on auth pages to prevent flex layout breaks */
body.auth-page footer {
  display: none !important;
}
/* =========================================================
   ENTERPRISE SAAS REDESIGN (STRIPE / VERCEL STYLE)
   ========================================================= */

/* Base & Typography */
body {
  background-color: #040506;
  color: #aeb5be;
  font-family: 'Inter', -apple-system, sans-serif;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  color: #ffffff;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.gradient-text {
  background: linear-gradient(135deg, #fff 0%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glow Orbs for Hero */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: -1;
  pointer-events: none;
}
.glow-orb.top-left {
  top: -10%;
  left: -5%;
  width: 500px;
  height: 500px;
  background: rgba(59, 130, 246, 0.15); /* Blue-500 */
}
.glow-orb.center-right {
  top: 40%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: rgba(139, 92, 246, 0.1); /* Violet-500 */
}

/* SaaS Hero Section */
.hero-saas {
  position: relative;
  padding: 12rem 0 6rem 0;
  overflow: hidden;
  text-align: center;
}
.hero-content-saas {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.version-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #aeb5be;
  text-decoration: none;
  margin-bottom: 2rem;
  transition: all 0.3s ease;
}
.version-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.pill-highlight {
  color: #3b82f6;
  font-weight: 600;
}

.hero-title {
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  font-weight: 700;
}
.hero-subtitle {
  font-size: 1.15rem;
  max-width: 640px;
  margin: 0 auto 3rem auto;
  color: #8a94a6;
}

/* SaaS Buttons */
.hero-cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 5rem;
}
.btn-saas-primary {
  background: #fff;
  color: #000;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}
.btn-saas-primary:hover {
  opacity: 0.9;
}

.btn-saas-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.btn-saas-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Dashboard Mockup */
.hero-dashboard-preview {
  margin-top: 4rem;
  perspective: 1000px;
}
.dashboard-frame {
  background: #0d1117;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8), 0 0 60px rgba(59, 130, 246, 0.1);
  overflow: hidden;
  max-width: 1080px;
  margin: 0 auto;
}
.mac-header {
  height: 38px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
}
.mac-header .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.mac-header .red { background: #ff5f56; }
.mac-header .yellow { background: #ffbd2e; }
.mac-header .green { background: #27c93f; }

.dashboard-img {
  width: 100%;
  display: block;
}

/* Bento Grid */
.bento-features {
  padding: 6rem 0;
  background: #040506;
}
.section-header-centered {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem auto;
}
.section-eyebrow {
  color: #8b5cf6;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1rem;
}

.bento-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.bento-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 2.5rem;
  transition: all 0.3s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.bento-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}
.bento-icon {
  width: 48px;
  height: 48px;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.bento-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: #fff;
}
.bento-card p {
  color: #8a94a6;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Grid Spans */
.bento-wide {
  grid-column: span 2;
}

@media (max-width: 1024px) {
  .bento-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .bento-grid-container {
    grid-template-columns: 1fr;
  }
  .bento-wide {
    grid-column: span 1;
  }
}


/* ==========================================================================
   RESTORED MODAL & COMPARE TABLE SAAS CSS
   ========================================================================== */

/* Compare Table Restyling */
.compare-table-container {
  max-width: 900px;
  margin: 4rem auto 0;
  width: 100%;
}

.compare-table-container h3 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.compare-table-container table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.compare-table-container th,
.compare-table-container td {
  padding: 1rem 1.5rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

.compare-table-container th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
  font-weight: 600;
  border-bottom: 2px solid var(--color-border);
}

.compare-table-container td:not(:first-child),
.compare-table-container th:not(:first-child) {
  text-align: center;
}

.compare-table-container tr:last-child td {
  border-bottom: none;
}

.compare-table-container tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Base Modal Overlay Restoration */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 15, 25, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-content {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  max-width: 600px;
  width: 90%;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.modal-overlay.active {
  display: flex !important;
  opacity: 1;
}

.modal-overlay.active .modal-content {
  transform: translateY(0);
}

#closeCompatModal {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.2s;
}

#closeCompatModal:hover {
  color: var(--color-text-primary);
}

/* Compatibility Items Matrix */
.compat-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.compat-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background 0.2s;
}

.compat-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.compat-item .icon {
  color: var(--color-primary);
  flex-shrink: 0;
  display: flex;
}

.compat-item .text h3 {
  font-size: 1.05rem;
  margin: 0 0 0.25rem 0;
  color: var(--color-text-primary);
  font-weight: 500;
}

.compat-item .text p {
  font-size: 0.9rem;
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.compat-item .badge {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-weight: 500;
}

/* Lightbox Modal (Hero Zoom) Overlay Fix */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 10005;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  cursor: zoom-out;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
  display: flex !important;
  opacity: 1;
}

.lightbox-img {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-overlay.active .lightbox-img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 10010;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.lightbox-close:hover {
  opacity: 1;
}



/* ==========================================================================
   Trust Bar Pricing Section Restyling
   ========================================================================== */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 4rem;
  padding: 2.5rem 2rem;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.trust-bar > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 200px;
  max-width: 250px;
}

.trust-bar > div > div {
  background: rgba(var(--color-primary-rgb), 0.1);
  padding: 1rem;
  border-radius: var(--radius-full);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--color-primary-rgb), 0.2);
}

.trust-bar .lucide-icon {
  color: var(--color-primary);
  width: 28px;
  height: 28px;
  stroke-width: 2px;
}

.trust-bar strong {
  color: var(--color-text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  line-height: 1.4;
}

.trust-bar span {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .trust-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 1.5rem;
    gap: 1.5rem;
  }
  
  .trust-bar > div {
    max-width: 100%;
    flex-direction: row;
    text-align: left;
    gap: 1rem;
  }

  .trust-bar > div > div {
    margin-bottom: 0;
    padding: 0.75rem;
  }
}


.feature-check-icon {
  margin-right: 12px;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px var(--color-primary));
}

/* STRIPE WEBHOOK ADMIN SETUP */
.stripe-webhook-setup {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #333;
}
.stripe-webhook-title {
    color: #fff;
    font-size: 1.1rem;
    margin-top: 0;
}
.stripe-webhook-desc {
    color: #aaa;
    font-size: 0.9rem;
    margin-bottom: 15px;
    margin-top: 10px;
    font-weight: normal;
    line-height: 1.5;
}
.webhook-link {
    color: #0070f3;
    text-decoration: none;
}
.webhook-display-box {
    background: #1a1a1a;
    border: 1px solid #333;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    color: #ddd;
    font-family: monospace;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.webhook-input {
    background: transparent;
    border: none;
    color: #00e5ff;
    width: 100%;
    outline: none;
    font-size: 0.9rem;
    padding: 0;
}
.webhook-copy-btn {
    border: 1px solid #444;
    background: #333;
    color: white;
}
.webhook-events-title {
    color: #ccc;
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
}
.webhook-events-list {
    color: #888;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 10px;
}
.webhook-event-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.webhook-check-green {
    color: #00ff88;
    font-weight: bold;
}
.webhook-check-red {
    color: #ff3366;
    font-weight: bold;
}

/* ---------- TRUST MARQUEE COMPONENT ---------- */
.trust-marquee-section {
  padding: 3rem 0;
  background: var(--bg-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.trust-title {
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: var(--text-gray);
  margin-bottom: 2rem;
  text-transform: uppercase;
  font-weight: 600;
}
.marquee-track-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  /* Fading edges */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
  display: inline-flex;
  gap: 4rem;
  animation: scrollMarquee 30s linear infinite;
  padding-left: 2rem;
}
.marquee-item {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease;
  cursor: default;
}
.marquee-item:hover {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}
@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Inline Extraction --- */
.hero-changelog {
  padding: 100px 0 50px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: radial-gradient(circle at 50% 0%, rgba(var(--color-primary-rgb), 0.1), transparent 70%);
}
.hero-eyebrow {
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 0.9rem;
  margin-bottom: 10px;
  display: inline-block;
}
.hero-title-large {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}
.hero-subtitle-lg {
  max-width: 650px;
  margin: 0 auto;
}
.timeline-section {
  padding: 4rem 0;
  min-height: 50vh;
}
.timeline-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}
.timeline-vertical-line {
  position: absolute; left: 30px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--color-primary), rgba(255,255,255,0.05)); z-index: 0;
}
.timeline-item-block {
  position: relative; padding-left: 80px; margin-bottom: 4rem; z-index: 1;
}
.timeline-item-block.faded {
  margin-bottom: 2rem;
  opacity: 0.7;
}
.timeline-dot {
  position: absolute; left: 24px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #000; border: 2px solid var(--color-primary); box-shadow: 0 0 15px var(--color-primary);
}
.timeline-dot-plain {
  position: absolute; left: 24px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #000; border: 2px solid var(--color-primary);
}
.timeline-dot-faded {
  position: absolute; left: 24px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #000; border: 2px solid rgba(255,255,255,0.2);
}
.release-header-block {
  margin-bottom: 15px;
}
.release-title {
  font-size: 2rem; color: #fff; margin-bottom: 5px;
}
.release-title-sm {
  font-size: 1.6rem; color: #fff; margin-bottom: 5px;
}
.release-date {
  font-size: 1rem; color: var(--text-gray); font-weight: 400; margin-left:10px;
}
.badge-group {
  display:flex; gap:10px; align-items:center;
}
.badge-new {
  background: rgba(0,255,100,0.1); color: #00ff66; padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; border: 1px solid rgba(0,255,100,0.3);
}
.badge-front {
  background: rgba(var(--color-primary-rgb),0.1); color: var(--color-primary); padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; border: 1px solid rgba(var(--color-primary-rgb),0.3);
}
.badge-sec {
  background: rgba(255,150,0,0.1); color: #ffaa00; padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; border: 1px solid rgba(255,150,0,0.3);
}
.badge-core {
  background: rgba(255,255,255,0.05); color: #aaa; padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; border: 1px solid rgba(255,255,255,0.1);
}
.release-body-block {
  background: rgba(20,25,30,0.5); border: 1px solid rgba(255,255,255,0.05); padding: 25px; border-radius: 12px;
}
.release-body-block-sm {
  background: rgba(20,25,30,0.3); border: 1px solid rgba(255,255,255,0.05); padding: 20px; border-radius: 12px;
}
.release-list {
  color: var(--text-gray); font-size: 1.05rem; line-height: 1.6; list-style-type: none; padding:0;
}
.release-list-sm {
  color: var(--text-gray); font-size: 0.95rem; line-height: 1.6; list-style-type: none; padding:0;
}
.release-li {
  margin-bottom: 10px;
}
.release-li-last {
  margin-bottom: 0;
}
.hero-docs {
  padding: 100px 0 50px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); background: radial-gradient(circle at 50% 0%, rgba(var(--color-primary-rgb), 0.05), transparent 70%);
}
.hero-title-docs {
  font-size: 3rem; margin-bottom: 1rem;
}
.docs-layout-section {
  padding: 4rem 0; min-height: 60vh;
}
.docs-flex-container {
  display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap;
}
.docs-sidebar {
  flex: 0 0 250px; position: sticky; top: 100px; padding-right: 20px; border-right: 1px solid rgba(255,255,255,0.05);
}
.docs-sidebar-title {
  font-size: 1.1rem; color: #fff; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px;
}
.docs-nav-list {
  list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px;
}
.docs-nav-link-active {
  color: var(--color-primary); text-decoration: none; font-size: 1rem; font-weight: 600; transition: color 0.2s;
}
.docs-nav-link {
  color: var(--text-gray); text-decoration: none; font-size: 1rem; transition: color 0.2s;
}
.docs-nav-link:hover {
  color: #fff;
}
.docs-main-content {
  flex: 1; min-width: 300px;
}
.docs-article {
  margin-bottom: 4rem;
}
.docs-h2 {
  font-size: 2rem; color: #fff; margin-bottom: 1rem; display: flex; align-items: center; gap: 10px;
}
.docs-p {
  color: var(--text-gray); font-size: 1.1rem; line-height: 1.7; margin-bottom: 1.5rem;
}
.docs-step-block {
  background: rgba(20,25,30,0.8); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 25px; margin-bottom: 2rem;
}
.docs-h4 {
  color: #fff; margin-bottom: 15px; font-size: 1.2rem;
}
.docs-ol {
  color: var(--text-gray); margin-left: 20px; line-height: 1.8; font-size: 1.05rem;
}
.docs-warning-block {
  background: rgba(255,150,0,0.1); border-left: 4px solid #ffaa00; padding: 15px 20px; border-radius: 0 8px 8px 0;
}
.docs-warning-title {
  color: #ffaa00; display: block; margin-bottom: 5px;
}
.docs-warning-text {
  color: rgba(255,255,255,0.8); font-size: 0.95rem; margin: 0;
}
.docs-p-no-margin {
  color: var(--text-gray); font-size: 1.1rem; line-height: 1.7;
}
.flex-1 { flex: 1; }
.bento-icon-primary { color: var(--color-primary); }
.bento-h3 { font-size: 1.6rem; margin-bottom: 12px; }
.bento-h3-sm { font-size: 1.4rem; }
.bento-p { font-size: 1.05rem; line-height: 1.6; }
.badge-tprot { background: #331100; color: #ff9900; border-color: rgba(255,153,0,0.5); }
.mb-2rem { margin-bottom: 2rem; }
.vehicles-hero-bg {
  padding: 100px 0 50px; text-align: center; background: radial-gradient(circle at 50% 100%, rgba(var(--color-primary-rgb), 0.15), transparent 60%); border-bottom: 1px solid rgba(255,255,255,0.05);
}
.vehicles-h1 {
  font-size: 3rem; margin-bottom: 1rem;
}
.vehicles-subtitle {
  max-width: 600px; margin: 0 auto;
}
.vehicles-db-section {
  padding: 4rem 0; min-height: 50vh;
}
.vehicles-search-container {
  max-width: 800px; margin: 0 auto 3rem; position: relative;
}
.vehicles-search-icon {
  position:absolute; left:20px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,0.4);
}
.vehicles-search-input {
  width:100%; padding: 20px 20px 20px 60px; border-radius: 12px; background: rgba(20,20,25,0.8); border: 1px solid rgba(var(--color-primary-rgb),0.3); color: #fff; font-size: 1.2rem; outline: none; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.vehicles-search-input:focus { border-color: rgba(var(--color-primary-rgb),1); }
.vehicles-results-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;
}
.vehicles-no-results {
  display:none; text-align:center; padding: 3rem; color: rgba(255,255,255,0.4);
}
.vehicles-no-results-icon {
  margin-bottom:1rem; opacity:0.5;
}

/* Elite Bento Expansion Styles */
.elite-bento-card { background: linear-gradient(135deg, rgba(30,35,45,0.7) 0%, rgba(15,18,25,0.9) 100%); border: 1px solid rgba(var(--color-primary-rgb), 0.3); position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.elite-bento-card:hover { border-color: rgba(var(--color-primary-rgb), 0.9); box-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.25); transform: translateY(-5px); }
.elite-glow { position: absolute; top: -60px; left: -60px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(var(--color-primary-rgb),0.35) 0%, transparent 60%); pointer-events: none; z-index: 0; }
.elite-content-wrapper { position: relative; z-index: 1; }
.elite-flex-wide { display: flex; gap: 2.5rem; align-items: center; }
@media (max-width: 900px) { .elite-flex-wide { flex-direction: column; align-items: flex-start; gap: 1.5rem; } }
.elite-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.2rem; }
.elite-badge { font-size: 0.7rem; font-weight: 700; padding: 6px 14px; border-radius: 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); letter-spacing: 0.5px; text-transform: uppercase; }
.badge-ac { background: #002211; color: #00ff66; border-color: rgba(0,255,100,0.4); }
.badge-sport { background: #220000; color: #ff3333; border-color: rgba(255,50,50,0.4); }
.elite-code-block { background: #0d1117; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 1.2rem; flex: 1; font-family: 'Courier New', Courier, monospace; font-size: 0.85rem; color: #e6edf3; min-width: 280px; width: 100%; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); }
.elite-code-block .keyword { color: #ff7b72; }
.elite-code-block .string { color: #a5d6ff; }
.elite-code-block .function { color: #d2a8ff; }
.elite-code-block .comment { color: #8b949e; font-style: italic; }
/* JS Badge injected classes */
.badge-dpf { background:rgba(0,255,100,0.1); color:#00ff66; padding: 4px 8px; border-radius:4px; font-size:0.7rem; font-weight:bold; margin-right:5px; border:1px solid rgba(0,255,100,0.3); }
.badge-tprot-js { background:rgba(255,150,0,0.1); color:#ffaa00; padding: 4px 8px; border-radius:4px; font-size:0.7rem; font-weight:bold; margin-right:5px; border:1px solid rgba(255,150,0,0.3); }

/* =========================================================================
   BENTO GRID 2.0 & GLASSMORPHISM (PREMIUM SAAS DESIGN)
   ========================================================================= */

.bento-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  width: 100%;
}

/* Base Glass Tile */
.bento-item, .glass-card {
  background: var(--bento-bg);
  -webkit-backdrop-filter: var(--bento-blur);
  backdrop-filter: var(--bento-blur);
  border: 1px solid var(--bento-border);
  border-radius: var(--bento-radius);
  padding: 2.5rem;
  color: var(--color-text);
  box-shadow: var(--bento-shadow);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.bento-item:hover, .glass-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 112, 243, 0.4);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.1), 0 0 20px rgba(0, 112, 243, 0.1);
}

/* Item spans for grid structure */
.col-span-12 { grid-column: span 12; }
.col-span-8 { grid-column: span 8; }
.col-span-4 { grid-column: span 4; }
.col-span-6 { grid-column: span 6; }

/* Glowing elements inside cards */
.glass-glow::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 112, 243, 0.25) 0%, transparent 60%);
  z-index: 0;
  pointer-events: none;
  filter: blur(40px);
}

.glass-content {
  position: relative;
  z-index: 1;
}

/* Modern Inputs for Bento Design */
.bento-input {
  width: 100%;
  padding: 1.2rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: white;
  border-radius: 12px;
  font-family: var(--font-main);
  transition: var(--transition-smooth);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.bento-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: rgba(0,0,0,0.8);
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.15), inset 0 2px 4px rgba(0,0,0,0.2);
}

.bento-btn {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border: none;
  padding: 1.2rem 2rem;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(0, 112, 243, 0.3);
}

.bento-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 112, 243, 0.5);
  filter: brightness(1.1);
}

@media (max-width: 900px) {
  .bento-container, .bento-grid {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
  }
}
.badge-pops { background:rgba(255,50,50,0.1); color:#ff3333; padding: 4px 8px; border-radius:4px; font-size:0.7rem; font-weight:bold; margin-right:5px; border:1px solid rgba(255,50,50,0.3); }
.badge-std { background:rgba(255,255,255,0.05); color:#aaa; padding: 4px 8px; border-radius:4px; font-size:0.7rem; font-weight:bold; margin-right:5px; border:1px solid rgba(255,255,255,0.1); }
.card-p { font-size:0.8rem; color:var(--text-gray); margin-bottom:5px; text-transform:uppercase; letter-spacing:1px; }
.card-h3 { font-size:1.4rem; color:#fff; margin-bottom:15px; font-weight:700; }
.card-flex { display:flex; flex-wrap:wrap; gap:5px; }
.card-bg { background: linear-gradient(135deg, rgba(20,25,30,0.8), rgba(10,12,15,0.9)); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 20px; transition: transform 0.2s, box-shadow 0.2s; }
.card-bg:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(var(--color-primary-rgb),0.1); }

/* --- Utilities for Bento UI Checkout --- */
.container-wide { max-width: 1400px; padding: 2rem; margin: 0 auto; }
.bento-stack { display: flex; flex-direction: column; }
.bento-heading-primary { font-size: 2rem; margin-bottom: 2rem; display: flex; align-items: center; gap: 15px; }
.bento-heading-secondary { font-size: 1.8rem; margin-bottom: 2rem; display: flex; align-items: center; gap: 15px; }
.bento-accent-pill-primary { background: var(--color-primary); width: 12px; height: 32px; border-radius: 6px; display: inline-block; }
.bento-accent-pill-secondary { background: var(--color-secondary); width: 12px; height: 32px; border-radius: 6px; display: inline-block; }
.bento-form-group { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.bento-sticky-aside { position: sticky; top: 120px; height: fit-content; }
.bento-dynamic-items { min-height: 80px; }
.text-accent-primary { color: var(--color-primary); }
.mt-bento-lg { margin-top: 2.5rem; }
.bento-subtitle { margin-bottom: 1.5rem; font-size: 1.3rem; color: var(--color-text-muted); }
.bento-microcopy { margin-bottom: 1.5rem; font-size: 0.95rem; line-height: 1.6; }
.bento-policy-box { background: rgba(0,0,0,0.4); padding: 1.2rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); margin-bottom: 2rem; }
.bento-policy-check { accent-color: var(--color-primary); transform: scale(1.2); cursor: pointer; float: left; margin-top: 4px; margin-right: 15px; }
.bento-policy-label { font-size: 0.85rem; line-height: 1.5; color: var(--color-text-muted); display: block; overflow: hidden; margin-bottom: 0; }
.w-full { width: 100%; }
.bento-ssl-badge { margin-top: 1.5rem; font-size: 0.85rem; color: #555; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.bento-ssl-icon { color: var(--color-primary); }

/* --- Utilities for Kinetic Minimalist Hero --- */
.nav-glass { border-radius: 0; padding: 1rem 0; position: fixed; width: 100%; top: 0; z-index: 1000; border-bottom: 1px solid var(--bento-border); overflow: visible !important; }
.logo-bento { font-family: 'Space Grotesk', var(--font-display); font-weight: 700; letter-spacing: -1px; font-size: 1.5rem; }
.text-glow-primary { text-shadow: 0 0 20px rgba(0,112,243,0.5); }
.text-glow-heavy { text-shadow: 0 0 30px rgba(0, 112, 243, 0.4); }
.hero-kinetic { padding-top: 140px; min-height: 90vh; display: flex; align-items: center; position: relative; }
.glass-glow-top { top: 0; left: 10%; }
.glass-glow-bottom { bottom: 0; right: 10%; background: radial-gradient(circle, rgba(121, 40, 202, 0.2) 0%, transparent 60%); }
.bento-stack-hero { gap: 3rem; text-align: center; max-width: 900px; margin: 0 auto; z-index: 1; }
.version-pill-glass { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px; border-radius: 50px; text-transform: uppercase; letter-spacing: 1px; font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 2rem; }
.title-kinetic { font-family: 'Space Grotesk', var(--font-display); font-size: clamp(3rem, 6vw, 5rem); line-height: 1.1; font-weight: 800; margin-bottom: 1.5rem; letter-spacing: -0.04em; color: #fff; }
.subtitle-kinetic { font-size: 1.25rem; color: var(--color-text-muted); max-width: 600px; margin: 0 auto 2.5rem; line-height: 1.6; }
.hero-cta-bento { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.bento-btn-glow { box-shadow: 0 0 30px rgba(0,112,243,0.3); }
.btn-glass-bento { padding: 1.2rem 2rem; border-radius: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; }

/* --- Kinetic Minimalist Auth Page --- */
body.auth-page { background-color: var(--bento-bg); background-image: radial-gradient(circle at 50% 0%, rgba(121, 40, 202, 0.1) 0%, transparent 70%); display: flex; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; font-family: 'Inter', sans-serif; }
.auth-lang-switch { position: absolute; top: 20px; right: 20px; z-index: 50; }
.login-card { background: rgba(255, 255, 255, 0.03); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); padding: 3.5rem 3rem; border-radius: 2rem; border: 1px solid var(--bento-border); width: 100%; max-width: 440px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0,112,243,0.05); text-align: center; position: relative; animation: slideUp 0.8s ease-out; }
.login-card h2 { margin-bottom: 0.5rem; color: white; font-weight: 700; letter-spacing: -0.02em; font-family: 'Space Grotesk', var(--font-display); }
.subtitle { color: var(--color-text-muted); margin-bottom: 2.5rem; font-size: 0.95rem; }
.form-group { margin-bottom: 1.5rem; text-align: left; }
.form-group label { display: block; color: var(--color-text); font-size: 0.9rem; margin-bottom: 0.6rem; font-weight: 500; }
.form-group input { width: 100%; padding: 1rem 1.2rem; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--bento-border); color: white; border-radius: 12px; transition: all 0.2s ease; font-size: 1rem; }
.form-group input:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 1px var(--color-primary), 0 0 15px rgba(0, 112, 243, 0.2); background: rgba(0, 0, 0, 0.8); }
.btn-auth { width: 100%; padding: 1rem; margin-top: 1rem; background: var(--color-primary); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: white; font-weight: 600; font-size: 1.05rem; cursor: pointer; transition: all 0.2s ease; letter-spacing: -0.01em; box-shadow: 0 0 20px rgba(0,112,243,0.3); }
.btn-auth:hover { background: #0060df; transform: translateY(-1px); box-shadow: 0 8px 30px rgba(0, 112, 243, 0.5); }
.btn-auth:disabled { opacity: 0.7; cursor: wait; }

/* --- Verify Page Styles --- */
.verify-card { background: rgba(255, 255, 255, 0.03); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 3rem; border-radius: 24px; border: 1px solid var(--bento-border); width: 100%; max-width: 500px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); text-align: center; position: relative; animation: slideUp 0.8s ease-out; }
.status-icon { font-size: 4rem; margin-bottom: 1.5rem; display: inline-block; }
.status-icon.pending { animation: pulse 2s infinite; }
@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
.timer-box { background: rgba(0, 112, 243, 0.1); border: 1px solid rgba(0, 112, 243, 0.3); padding: 1rem; border-radius: 12px; margin: 2rem 0; color: var(--color-primary); font-weight: 600; }
.action-btn { width: 100%; padding: 1.2rem; background: var(--color-primary); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: white; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; margin-top: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.action-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 112, 243, 0.4); background: #0060df; }
/* Modal Specifics */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { background: rgba(10, 10, 10, 0.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 2.5rem; border-radius: 24px; width: 90%; max-width: 420px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(0, 112, 243, 0.05); position: relative; transform: translateY(20px) scale(0.95); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.modal-overlay.active .modal-content { transform: translateY(0) scale(1); }

/* specific fix for Buy Modal carrying a 5-column grid */
#plan-selection-modal .modal-content {
    max-width: 1400px !important;
    width: 95% !important;
    max-height: 90vh;
    overflow-y: auto;
    padding: 3rem 2rem;
}
#plan-selection-modal .pricing-grid {
    margin-top: 2.5rem;
    gap: 1.5rem;
}

.close-modal { position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.1); border: none; color: #ccc; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; transition: all 0.2s; }
.close-modal:hover { background: rgba(255, 50, 50, 0.2); color: #ff3333; transform: rotate(90deg); }
.countdown-grid { display: flex; justify-content: center; gap: 15px; margin-top: 0.5rem; }
.time-unit { background: rgba(255, 255, 255, 0.05); border: 1px solid #333; border-radius: 8px; padding: 10px; min-width: 60px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.time-unit span:first-child { font-size: 1.5rem; font-weight: 700; color: #fff; font-family: 'Courier New', Courier, monospace; }
.time-unit .label { font-size: 0.8rem; color: #888; margin-top: 2px; }
.active-pulse { animation: pulse-border 2s infinite; }
@keyframes pulse-border { 0% { border-color: rgba(0,112,243,0.3); } 50% { border-color: rgba(0,112,243,1); } 100% { border-color: rgba(0,112,243,0.3); } }
@media (max-width: 480px) { .modal-content { width: 95%; padding: 1.5rem; margin: 10px; } .countdown-grid { gap: 8px; } .time-unit { min-width: 50px; padding: 5px; } }
/* Price Box Specifics */
.price-info-box { background: rgba(0, 255, 136, 0.05); border: 1px dashed rgba(0, 255, 136, 0.3); border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0; text-align: center; animation: slideUp 0.5s ease-out; }
.instruction-text { font-size: 0.9rem; color: #ccc; margin-bottom: 0.8rem; }
.price-display-row { display: flex; align-items: center; justify-content: center; gap: 15px; background: rgba(0, 0, 0, 0.3); padding: 10px 20px; border-radius: 50px; width: fit-content; margin: 0 auto; border: 1px solid rgba(255, 255, 255, 0.1); }
.price-value { font-size: 1.8rem; font-weight: 700; color: #00ff88; font-family: 'Courier New', monospace; letter-spacing: 1px; }
.copy-btn { background: transparent; border: none; color: #fff; cursor: pointer; font-size: 1.2rem; padding: 5px; border-radius: 50%; transition: all 0.2s; display: flex; }
.copy-btn:hover { background: rgba(255, 255, 255, 0.1); color: #00ff88; transform: scale(1.1); }
.copy-feedback { color: #00ff88; font-size: 0.8rem; margin-top: 5px; opacity: 0; transition: opacity 0.3s; height: 1rem; }
.copy-feedback.active { opacity: 1; }
/* Toasts Specifics */
.toast-notification { position: fixed; top: 30px; left: 50%; transform: translateX(-50%) translateY(-150%); background: rgba(15, 15, 15, 0.98); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); color: #fff; padding: 15px 30px; border-radius: 50px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); border: 1px solid #444; z-index: 99999; font-size: 1rem; display: flex; align-items: center; gap: 15px; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); opacity: 0; visibility: hidden; }
.toast-notification.active { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }
.toast-notification.success { border-color: #00ff88; color: #00ff88; }
.toast-notification.error { border-color: #ff0055; color: #ff0055; }

/* --- Dashboard & Profile Styles --- */
.dashboard-container { display: grid; grid-template-columns: 250px 1fr; gap: 2rem; margin-top: 120px; min-height: 80vh; }
.sidebar { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--bento-border); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 2rem; border-radius: 20px; height: fit-content; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.sidebar-menu { list-style: none; padding: 0; margin: 0; }
.sidebar-menu li { padding: 1rem 1.2rem; color: var(--color-text-muted); cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 12px; margin-bottom: 0.5rem; font-weight: 500; }
.sidebar-menu li:hover, .sidebar-menu li.active { background: rgba(0, 112, 243, 0.15); color: var(--color-primary); transform: translateX(5px); }
.content-area { background: rgba(10, 10, 10, 0.7); border: 1px solid var(--bento-border); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 3rem; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
.download-box { background: radial-gradient(circle at top right, rgba(0, 112, 243, 0.15), transparent 60%), rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 112, 243, 0.3); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 3rem; border-radius: 24px; text-align: center; margin-bottom: 2rem; box-shadow: 0 10px 40px rgba(0, 112, 243, 0.1); position: relative; overflow: hidden; }
.download-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 112, 243, 0.8), transparent); }
.download-box h2 { font-size: 2.2rem; margin-bottom: 1rem; font-weight: 700; }
.order-item { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.02); border-radius: 12px; margin-bottom: 1rem; transition: background 0.3s; }
.order-item:hover { background: rgba(255,255,255,0.04); }
@media (max-width: 768px) { .dashboard-container { grid-template-columns: 1fr; margin-top: 1rem; } .content-area, .download-box { padding: 1.5rem; } }

/* Profile & Forms Glassmorphism */
.content-area label { display: block; margin-bottom: 0.5rem; color: #bbb; font-size: 0.9rem; font-weight: 500; margin-top: 1rem; }
.content-area input[type="text"], .content-area input[type="email"], .content-area input[type="password"], .content-area textarea, .content-area select { width: 100%; padding: 0.8rem 1.2rem; margin-bottom: 0.5rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: white; font-family: 'Inter', sans-serif; transition: all 0.3s ease; }
.content-area input:focus, .content-area textarea:focus, .content-area select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 15px rgba(0, 112, 243, 0.2); background: rgba(0, 112, 243, 0.05); }
.content-area input:disabled { background: rgba(255, 255, 255, 0.01); color: #666; cursor: not-allowed; }
.content-area table { width: 100%; border-collapse: separate; border-spacing: 0; background: rgba(255, 255, 255, 0.02); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.05); margin-top: 1rem; }
.content-area table th { background: rgba(255, 255, 255, 0.05); padding: 1rem 1.5rem; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.1); text-align: left; }
.content-area table td { padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.content-area button[type="submit"] { margin-top: 1.5rem; }
.content-area .btn { margin-top: 1rem; }

.btn-loading { position: relative; color: transparent !important; pointer-events: none; opacity: 0.8; }
.btn-loading::after { content: ""; position: absolute; width: 20px; height: 20px; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px; border: 3px solid #ffffff; border-radius: 50%; border-top-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeOutPreloader { to { opacity: 0; visibility: hidden; } }

/* --- MASS EXTRACT CSS FIX --- */
/* RECOVERED FROM ARCHIVO.ZIP */
.esq-668074 { display:flex; justify-content:space-between; align-items:center; }
.esq-46dcee { margin:0; }
.esq-e569ce { font-size: 0.75rem; color: #666; font-weight: 500; margin-bottom: 2px; }
.esq-36b89f { color: #fff; font-size: 1rem; letter-spacing: 0.5px; }
.esq-a3ae1f { padding-top: 1rem; border-top: 1px solid #222; margin-top: auto; }
.esq-9ae2b3 { margin-bottom: 10px; background: #333; text-align: center; }
.esq-5403fa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; }
.esq-af0034 { background: #111; padding: 2rem; border-radius: 8px; border: 1px solid #333; }
.esq-813a6e { font-size: 2rem; color: #00ff88; font-weight: bold; }
.esq-7e77ae { font-size: 2rem; color: #fff; font-weight: bold; }
.esq-da55bb { font-size: 2rem; color: #ff0055; font-weight: bold; }
.esq-d0c4d6 { background: #222; padding: 20px; position: absolute; top: 100px; left: 50%; transform: translateX(-50%); width: 400px; border: 1px solid #444; z-index: 100; }
.esq-003083 { width: 100%; padding: 10px; background: #000; color: white; border: 1px solid #333; }
.esq-1bd244 { gap: 10px; margin-top: 15px; }
.esq-56445c { background: #111; padding: 20px; border-radius: 8px; border: 1px solid #333; margin-bottom: 2rem; }
.esq-fc288e { background: #111; padding: 20px; border-radius: 8px; border: 1px solid #333; }
.esq-293c18 { background: #444; }
.esq-cf0f3a { margin-top: 2rem; }
.esq-849459 { height: 80px; }
.esq-4c7436 { height: 300px; font-family: monospace; }
.esq-fa0207 { display: none; margin-top: 10px; }
.esq-0e255b { max-height: 150px; border-radius: 4px; }
.esq-4d1e5c { max-width: 600px; }
.esq-b512c9 { display: flex; align-items: center; gap: 10px; }
.esq-dc251b { width: auto; }
.esq-1be78c { margin: 0; color: white; }
.esq-27b417 { border-top: 1px solid #333; margin: 20px 0; }
.esq-c1bcb9 { background: #333; }
.esq-eab05c { max-width: 500px; text-align: left; }
.esq-2a1170 { gap: 10px; }
.esq-49cdf8 { flex: 1; }
.esq-2c1990 { width: 100%; padding: 0.8rem; background: #222; border: 1px solid #333; color: white; border-radius: 4px; }
.esq-967afc { font-size: 0.8rem; color: #666; }
.esq-a87155 { justify-content: flex-end; gap: 10px; margin-top: 1rem; }
.esq-de4fd1 { position: absolute; top: 20px; right: 20px; }
.esq-819f22 { width: auto; padding: 5px 10px; margin-right:5px; }
.esq-b3d308 { width: auto; padding: 5px 10px; }
.esq-8a0519 { position:fixed; top:0; left:0; width:100%; height:100%; background:#050505; z-index:99999; animation: fadeOutPreloader 0.5s ease-out 0.2s forwards; pointer-events:none; }
.esq-490b10 { font-size: 0.8rem; color: #888; display: block; }
.esq-224b51 { display: none; }
.esq-928e00 { color: var(--color-primary); }
.esq-93b8ea { display:none; }
.esq-2b82aa { max-width: 1200px; margin: 0 auto; padding: 4rem 1rem; }
.esq-8fa257 { font-size: 3rem; margin-bottom: 3rem; text-align: center; }
.esq-71b78c { color: #666; text-align: center; grid-column: 1/-1; }
.esq-3bef98 { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 3rem; }
.esq-50f260 { text-align: center; grid-column: 1/-1; color: #888; }
.esq-1e3a7d { color: red; text-align: center; }
.esq-257995 { margin-bottom: 2rem; }
.esq-c6235d { display: flex; gap: 10px; align-items: center; }
.esq-d3297f { margin-bottom: 1.5rem; }
.esq-88467b { display: block; font-weight: 600; }
.esq-4986ec { margin-bottom: 1rem; }
.esq-3df53c { color: #aaa; font-size: 0.8rem; margin-bottom: 5px; }
.esq-0ed0e9 { display: flex; gap: 10px; }
.esq-881f2e { padding: 8px; }
.esq-dd7648 { height: auto; padding: 0 15px; }
.esq-6387f7 { font-size: 0.8rem; margin-top: 5px; }
.esq-6b456a { display: none; color: #00ff88; }
.esq-d7bb0f { margin-bottom: 1rem; color: white; }
.esq-09c0fe { margin-top: 1rem; padding: 10px; background: rgba(0, 255, 136, 0.1); border: 1px solid #00ff88; border-radius: 4px; font-size: 0.8rem; color: #00ff88; line-height: 1.4; }
.esq-771a9e { display: none; max-width: 800px; margin-top: 4rem; text-align: center; }
.esq-1143d2 { background: #111; padding: 3rem; border-radius: 20px; border: 1px solid #333; }
.esq-a86f11 { font-size: 4rem; margin-bottom: 1rem; }
.esq-f47b82 { font-size: 2rem; margin-bottom: 1rem; color: white; }
.esq-57c8ea { color: #ccc; margin-bottom: 2rem; font-size: 1.1rem; line-height: 1.6; }
.esq-c754a6 { text-align: left; background: #000; padding: 2rem; border-radius: 12px; border: 1px solid #222; margin-bottom: 2rem; }
.esq-b8715d { color: var(--color-primary); margin-bottom: 1.5rem; border-bottom: 1px solid #333; padding-bottom: 10px; }
.esq-8eccb9 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.esq-479e50 { color: #666; font-size: 0.9rem; margin-bottom: 5px; }
.esq-2a8cb6 { color: white; font-weight: 500; }
.esq-9cc0a9 { color: #888; font-size: 0.9rem; }
.esq-e52540 { color: #00ff88; font-size: 1.5rem; font-weight: 700; }
.esq-1e4c54 { color: #666; font-size: 0.9rem; margin-bottom: 10px; }
.esq-4e877d { list-style: none; padding: 0; color: white; }
.esq-c3e93a { margin-top:10px; border-color:#333; color:#aaa; }
.esq-81ab69 { text-decoration:none; font-size: 2rem; display:block; margin-bottom:1rem; }
.esq-cb4c68 { margin-top: 1.5rem; font-size: 0.9rem; color: #666; }
.esq-b67ab6 { color: #ff007f; text-decoration: none; }
.esq-988c5f { margin-top: 1rem; }
.esq-5d60ec { color: #888; font-size: 0.8rem; text-decoration: none; }
.esq-cdd8ca { text-align: center; }
.esq-7851db { text-align: right; }
.esq-962646 { text-align: center; margin-bottom: 2rem; }
.esq-cc5a45 { width: 80px; height: 80px; background: #222; border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.esq-3627de { font-size: 0.9rem; color: #666; }
.esq-d73d67 { color: #aaa; margin-bottom: 2rem; }
.esq-9722b9 { font-size: 1.2rem; padding: 1rem 3rem; }
.esq-54e3da { margin-top: 1rem; font-size: 0.8rem; color: #666; }
.esq-b82f42 { text-align: center; padding: 3rem; }
.esq-88aa25 { margin-top: 0; }
.esq-0ca503 { white-space: nowrap; }
.esq-6221b9 { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; }
.esq-56d68e { background: #111; padding: 2rem; border-radius: 12px; border: 1px solid #333; width: 400px; max-width: 90%; }
.esq-a87763 { color: #888; font-size: 0.9rem; margin-bottom: 1rem; }
.esq-1e0781 { color: white; font-weight: bold; }
.esq-e02e9c { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2rem; }
.esq-0b03ec { color: #aaa; margin-top: 10px; }
.esq-e47004 { display: block; margin-bottom: 10px; font-size: 0.9rem; color: #888; }
.esq-57f87f { margin-top: 1.5rem; font-size: 0.8rem; color: #666; }
.esq-be88e2 { color: #ff007f; text-decoration: underline; }
.esq-3eef6b { margin-top: 0.5rem; font-size: 0.8rem; }
.esq-72d7de { color: #888; text-decoration: none; border-bottom: 1px dashed #888; }
.esq-39a10c { color: #888; font-size: 0.9rem; margin-bottom: 1.5rem; }
.esq-e30fad { display: flex; gap: 15px; }
.esq-9aa101 { font-size: 3rem; margin-bottom: 1rem; }
.esq-27a9ff { color: #ccc; font-size: 1rem; margin-bottom: 1.5rem; line-height: 1.5; }
/* --- EXTRACTED INLINE STYLES --- */
.es-668074 { display:flex; justify-content:space-between; align-items:center; }
.es-46dcee { margin:0; }
.es-e569ce { font-size: 0.75rem; color: #666; font-weight: 500; margin-bottom: 2px; }
.es-36b89f { color: #fff; font-size: 1rem; letter-spacing: 0.5px; }
.es-23ca03 { color: #ff4444; }
.es-a3ae1f { padding-top: 1rem; border-top: 1px solid #222; margin-top: auto; }
.es-9ae2b3 { margin-bottom: 10px; background: #333; text-align: center; }
.es-9c6fab { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.es-13332c { background: linear-gradient(145deg, #111, #1a1a1a); padding: 2rem; border-radius: 12px; border: 1px solid #333; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
.es-75a49d { color: #888; margin-top: 0; font-size: 0.9rem; text-transform: uppercase; }
.es-850a2f { font-size: 2.2rem; margin: 10px 0 0 0; color: #00ff88; font-weight: bold; }
.es-fb2977 { font-size: 2.2rem; margin: 10px 0 0 0; color: #fff; font-weight: bold; }
.es-e2b466 { font-size: 2.2rem; margin: 10px 0 0 0; color: #0070f3; font-weight: bold; }
.es-8f7e87 { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; margin-top: 2rem; }
.es-b9f289 { color: #888; margin-top: 0; font-size: 0.9rem; text-transform: uppercase; margin-bottom: 20px; }
.es-8d5232 { position: relative; height: 300px; width: 100%; }
.es-ea7a4c { position: relative; height: 300px; width: 100%; display: flex; align-items: center; justify-content: center; }
.es-58cdc4 { margin-top: 2.5rem; color: #fff; font-size: 1.2rem; }
.es-e567f2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.es-749153 { background: linear-gradient(145deg, #111, #1a1a1a); padding: 2rem; border-radius: 12px; border: 1px solid #0070f340; box-shadow: 0 4px 15px rgba(0,112,243,0.1); }
.es-17de0d { color: #0070f3; margin-top: 0; font-size: 0.9rem; text-transform: uppercase; }
.es-7d6f26 { font-size: 2.2rem; margin: 10px 0 0 0; color: #28a745; font-weight: bold; }
.es-94b75e { font-size: 2.2rem; margin: 10px 0 0 0; color: #eebb00; font-weight: bold; }
.es-b2f1dc { font-size: 2.2rem; margin: 10px 0 0 0; color: #00ccff; font-weight: bold; }
.es-8ca1d3 { font-size: 2.2rem; margin: 10px 0 0 0; color: #aaa; font-weight: bold; }
.es-4986ec { margin-bottom: 1rem; }
.es-e2b74b { margin: 0; }
.es-b0e4b4 { background: #ff3333; color: white; display: flex; align-items: center; gap: 8px; }
.es-d73d67 { color: #aaa; margin-bottom: 2rem; }
.es-77b5db { padding: 0.5rem; background: #000; color: white; border: 1px solid #333; border-radius: 4px; }
.es-8c2bcc { display: flex; gap: 15px; margin-bottom: 1rem; align-items: center; background: #1a1a1a; padding: 10px; border-radius: 6px; border: 1px solid #333; }
.es-b13125 { display: flex; gap: 8px; align-items: center; }
.es-9da252 { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.es-f7e398 { margin: 0; color: #fff; cursor: pointer; -webkit-user-select: none; user-select: none; }
.es-c54505 { height: 20px; width: 1px; background: #333; }
.es-293c18 { background: #444; }
.es-479236 { width: 40px; }
.es-a2dcb9 { background: #111; padding: 2rem; border-radius: 12px; border: 1px solid #333; margin-top: 2rem; }
.es-257995 { margin-bottom: 2rem; }
.es-c953bf { display: flex; gap: 2rem; }
.es-36ae11 { flex: 2; }
.es-273cd7 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; border-bottom: 1px solid #333; padding-bottom: 1rem; }
.es-467127 { color: #888; }
.es-c6235d { display: flex; gap: 10px; align-items: center; }
.es-981937 { display: flex; flex-direction: column; gap: 1.5rem; max-height: 500px; overflow-y: auto; padding-right: 10px; margin-bottom: 2rem; }
.es-f16d3f { width: 100%; padding: 1rem; background: #000; color: white; border: 1px solid #333; border-radius: 6px; margin-bottom: 1rem; }
.es-50d1ed { display: block; margin-bottom: 5px; color: #888; }
.es-f4382a { padding: 1rem 2rem; }
.es-620d80 { flex: 1; background: #1a1a1a; padding: 1.5rem; border-radius: 8px; border: 1px solid #333; height: fit-content; }
.es-749cff { color:#888; }
.es-56445c { background: #111; padding: 20px; border-radius: 8px; border: 1px solid #333; margin-bottom: 2rem; }
.es-78b3dd { color: #0070ba; }
.es-0ed0e9 { display: flex; gap: 10px; }
.es-49cdf8 { flex: 1; }
.es-206225 { color: #aaa; font-size: 0.85em; margin-top: 5px; }
.es-6635af { width: 100%; padding: 10px; background: #333; color: white; border: 1px solid #444; border-radius: 5px; }
.es-b512c9 { display: flex; align-items: center; gap: 10px; }
.es-dc251b { width: auto; }
.es-a75b09 { margin: 0; color: #0070f3; font-weight: bold; }
.es-fc288e { background: #111; padding: 20px; border-radius: 8px; border: 1px solid #333; }
.es-f37286 { background: #111; padding: 20px; border-radius: 8px; border: 1px solid #333; margin-top: 20px; }
.es-edad91 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.es-2273c9 { background: #e74c3c; color: white; border: 2px solid #c0392b; padding: 8px 15px; border-radius: 6px; margin-right: 15px; font-weight: bold; font-size: 14px; display: none; box-shadow: 0 0 10px rgba(231, 76, 60, 0.5); }
.es-4405eb { background: #2a2a2a; color: white; border: 1px solid #444; padding: 5px 10px; border-radius: 4px; }
.es-5fa19c { color: #aaa; font-size: 0.9em; margin-bottom: 10px; }
.es-010f06 { width: 50px; text-align: center; }
.es-074289 { transform: scale(1.5); cursor: pointer; margin-top: 5px; }
.es-d3297f { margin-bottom: 1.5rem; }
.es-14ed94 { background:#bd34fe; }
.es-e1e6f1 { color:#888; margin-bottom:1.5rem; font-size:0.9rem; }
.es-d5dc35 { color:#00ff88; }
.es-1523fe { background:#111; border-radius:8px; border:1px solid #333; padding:1.5rem; margin-bottom:2rem; }
.es-09cbfd { margin-bottom:1rem; }
.es-b80428 { color:#666; }
.es-22685d { background:#111; border-radius:8px; border:1px solid #333; padding:1.5rem; }
.es-ff3531 { margin-right: 10px; background: #cc0000; }
.es-54faf1 { background: #2a2a2a; color: white; border: 1px solid #444; }
.es-6508a7 { color:#888; font-size:0.9rem; margin-bottom:1.5rem; }
.es-6e2fee { margin-bottom: 1rem; gap: 10px; flex-wrap: wrap; background: #1a1a1a; padding: 1rem; border-radius: 8px; border: 1px solid #333; }
.es-fd413c { background: #2a2a2a; border: 1px solid #444; color: white; padding: 6px 10px; border-radius: 4px; }
.es-56afb4 { background: #2a2a2a; border: 1px solid #444; color: white; padding: 6px 10px; border-radius: 4px; flex: 1; min-width: 200px; }
.es-c5473a { background: #111; border-radius: 8px; border: 1px solid #333; overflow-x: auto; }
.es-214d83 { margin-left: 10px; }
.es-d0da85 { align-items: center; }
.es-ed811d { background: linear-gradient(90deg, #7c1fc2 0%, #bd34fe 100%); }
.es-8b8a38 { background: #111; padding: 20px; border-radius: 8px; border: 1px solid #333; margin-top: 10px; margin-bottom: 20px; }
.es-0b4398 { color: #aaa; font-size: 0.9em; margin-top: 5px; margin-bottom: 15px; }
.es-5995e4 { width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 4px; border: 1px solid #444; background: #222; color: #fff; }
.es-cd40b8 { background: linear-gradient(90deg, #0070f3 0%, #00e5ff 100%); width: 100%; }
.es-38e5e0 { color: #00ff88; font-size: 0.9em; margin-top: 10px; display: none; }
.es-f878af { display:flex; gap:10px; margin-bottom:15px; border-bottom:1px solid #333; }
.es-a0d43a { background:#333; padding:2px 8px; font-size:0.8rem; }
.es-93b8ea { display:none; }
.es-e71a13 { display:none; margin-top:10px; }
.es-be3dc4 { max-width: 200px; border-radius: 5px; }
.es-55d76d { gap: 10px; margin-top: 20px; }
.es-979d3c { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.es-17c944 { background: #111; padding: 20px; border-radius: 8px; border: 1px solid #333; grid-column: 1 / -1; }
.es-2f7b10 { display: flex; flex-direction: column; gap: 20px; align-items: stretch; text-align: left; }
.es-88aa25 { margin-top: 0; }
.es-a67a69 { color: #aaa; font-size: 0.9em; margin-bottom: 0; }
.es-69b6f2 { display: flex; gap: 30px; min-height: 500px; width: 100%; }
.es-501d68 { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.es-f15d79 { width: 100%; padding: 12px; background: #000; color: white; border: 1px solid #333; border-radius: 6px; font-size: 14px; }
.es-0471d6 { width: 100%; padding: 12px; background: #000; color: white; border: 1px solid #333; border-radius: 6px; }
.es-df12fc { flex: 1; display: flex; flex-direction: column; }
.es-91df47 { width: 100%; flex: 1; padding: 15px; background: #0a0a0a; color: #00ff88; font-family: monospace; font-size: 13px; border: 1px solid #333; border-radius: 6px; resize: vertical; min-height: 250px; }
.es-5447af { padding: 15px; border: 1px dashed #bd34fe; margin-bottom: 20px; border-radius: 8px; background: rgba(189, 52, 254, 0.05); }
.es-cf1474 { color: #bd34fe; font-size: 1.1rem; margin-bottom: 5px; display: block; font-weight: bold; }
.es-865dca { color: #aaa; font-size: 0.85rem; margin-top: 0; margin-bottom: 10px; }
.es-40e651 { height: 80px; width: 100%; padding: 10px; background: #000; color: white; border: 1px solid #333; border-radius: 6px; font-family: 'Outfit', sans-serif; }
.es-39c6d7 { margin-top: 10px; width: 100%; background: linear-gradient(90deg, #9b2add 0%, #bd34fe 100%); border: none; padding: 10px; font-weight: bold; font-size: 14px; text-transform: uppercase; }
.es-b3635f { background: linear-gradient(90deg, #cc0000 0%, #0070f3 100%); padding: 15px; font-size: 16px; font-weight: bold; border-radius: 6px; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px rgba(0, 112, 243, 0.3); border: none; }
.es-167bf4 { flex: 1; display: flex; flex-direction: column; background: #1a1a1a; border-radius: 8px; overflow: hidden; border: 1px solid #444; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.es-2be023 { background: linear-gradient(90deg, #9b2add 0%, #bd34fe 100%); color: #fff; padding: 12px 20px; font-size: 0.95rem; font-weight: bold; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #7c1fc2; }
.es-bd9db1 { display: flex; align-items: center; gap: 8px; }
.es-dd1742 { font-weight: 500; font-size: 0.85rem; color: rgba(255,255,255,0.9); opacity: 0.9; }
.es-b81a9d { flex: 1; padding: 0; background: #111; display: flex; align-items: center; justify-content: center; }
.es-c6b78e { border: none; width: 100%; height: 100%; background: #ffffff; min-height: 500px; }
.es-d43a1a { color: #aaa; font-size: 0.9em; }
.es-f8294f { margin: 0; color: #00ff88; font-weight: bold; }
.es-0ba205 { display: flex; gap: 1rem; }
.es-87e1e1 { padding: 0; min-height: 40px; }
.es-13220e { color: #ffaa00; }
.es-eb4a81 { background: #ffaa00; color: #111; font-weight: bold; }
.es-4d1e5c { max-width: 600px; }
.es-97cff6 { color: #888; font-size: 0.9rem; margin-top: 0; margin-bottom: 15px; }
.es-1be78c { margin: 0; color: white; }
.es-e37669 { width: 100%; padding: 10px; border-radius: 4px; border: 1px solid #333; background: #222; color: white; }
.es-99ba90 { height: 60px; }
.es-d85c4e { position: relative; }
.es-668aa3 { border-color: #00ff88; }
.es-146655 { color: #00ff88; }
.es-42da69 { color: #0070f3; }
.es-fcaa24 { color: #bd34fe; }
.es-9bd744 { color: #00aaff; }
.es-27b417 { border-top: 1px solid #333; margin: 20px 0; }
.es-f1dd98 { background: #333; color: #fff; }
.es-1e3750 { display: flex; gap: 10px; margin-top: 20px; }
.es-c250b6 { flex: 1; background: #555; }
.es-831b82 { max-width: 1200px; width: 95%; text-align: left; display: flex; flex-direction: column; max-height: 90vh; }
.es-68b0c3 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.es-56c128 { background: #333; width: auto; }
.es-1b383a { color: #aaa; font-size: 0.9rem; margin-bottom: 20px; }
.es-3c9ea3 { display: flex; gap: 20px; flex: 1; min-height: 0; }
.es-809e7e { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
.es-c5a5a6 { width: 100%; padding: 0.8rem; background: #222; border: 1px solid #333; color: #fff; border-radius: 4px; }
.es-56bac8 { flex: 1; min-height: 300px; font-family: monospace; font-size: 13px; }
.es-88f17f { flex: 1; display: flex; flex-direction: column; background: #fff; border-radius: 4px; overflow: hidden; border: 1px solid #333; }
.es-7284b4 { background: #333; color: #fff; padding: 8px 12px; font-size: 0.85rem; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.es-24e62e { font-weight: normal; color: #aaa; }
.es-b709eb { flex: 1; border: none; width: 100%; height: 100%; min-height: 300px; background: #f9f9f9; }
.es-7236a8 { justify-content: flex-end; gap: 10px; margin-top: 20px; }
.es-c1bcb9 { background: #333; }
.es-816907 { max-width: 500px; text-align: left; max-height: 90vh; overflow-y: auto; }
.es-2a1170 { gap: 10px; }
.es-2c1990 { width: 100%; padding: 0.8rem; background: #222; border: 1px solid #333; color: white; border-radius: 4px; }
.es-13dc06 { display:flex; flex-direction:column; gap:8px; }
.es-7b9b0a { color: #888; font-size: 0.8rem; display: block; margin-top: 5px; }
.es-9d41a8 { border: 0; border-top: 1px solid #333; margin: 15px 0; }
.es-78fb74 { color: #aaa; margin-top: 0; margin-bottom: 15px; }
.es-b1605f { font-size: 0.8rem; font-weight: normal; }
.es-1b29e0 { background: #1a1a1a; color: #aaa; }
.es-967afc { font-size: 0.8rem; color: #666; }
.es-199b6f { width: 100%; }
.es-a87155 { justify-content: flex-end; gap: 10px; margin-top: 1rem; }
.es-4bd5cc { max-width: 650px; text-align: left; padding: 25px; max-height: 90vh; overflow-y: auto; }
.es-cd3913 { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 20px; }
.es-385888 { margin: 0; display:flex; align-items:center; gap:8px; }
.es-a18c7a { color:#aaa; font-size:0.9rem; margin-top:5px; margin-bottom:0; }
.es-b59271 { color:#fff; }
.es-20b966 { display:none; background: rgba(255, 170, 0, 0.1); border: 1px solid #ffaa00; padding: 12px; border-radius: 6px; margin-bottom: 20px; }
.es-661a08 { color: #ffaa00; font-size: 0.95rem; display:block; margin-bottom:4px; }
.es-eee502 { color: #ddd; font-size: 0.85rem; }
.es-fa9554 { margin-top: 10px; display:flex; align-items:center; gap:8px; }
.es-376827 { color:#fff; font-size:0.85rem; cursor:pointer; margin:0; }
.es-f3bc0e { display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.es-25b7a0 { background: #111; border: 1px solid #333; padding: 15px; border-radius: 6px; }
.es-0b36ec { margin-top:0; color:#888; font-size:0.8rem; text-transform:uppercase; }
.es-94fab7 { margin-bottom:10px; font-size:0.9rem; }
.es-e449e3 { float:right; color:#fff; font-family:monospace; }
.es-8305f0 { float:right; color:#fff; }
.es-08267f { float:right; color:#00ff88; font-weight:bold; }
.es-986d1d { display:flex; flex-direction:column; gap:12px; }
.es-a2d48c { margin-bottom:0; }
.es-b30001 { font-size:0.85rem; }
.es-db6a28 { width:100%; padding:8px; background:#000; border:1px solid #333; color:white; border-radius:4px; }
.es-f5ca40 { margin-top: 15px; margin-bottom:0; }
.es-d4ae2d { margin-top:25px; display:flex; gap:10px; border-top:1px solid #333; padding-top:20px; flex-wrap:wrap; }
.es-6a46dd { background:#2b225c; color:#bd34fe; border:1px solid #bd34fe; }
.es-27fe7c { background:#333; }
.es-d5e8c5 { flex:1; }
.es-68a395 { background:#ff3333; color:white; }
.es-61a3cb { background:linear-gradient(90deg, #9b2add 0%, #bd34fe 100%); font-weight:bold; }
.es-4646b4 { background: #222; padding: 20px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; border: 1px solid #444; z-index: 3000; box-shadow: 0 0 50px rgba(0,0,0,0.8); }
.es-cae3da { color:#aaa; font-size:0.9rem; margin-bottom:15px; }
.es-003083 { width: 100%; padding: 10px; background: #000; color: white; border: 1px solid #333; }
.es-c3b641 { color:#0070f3; font-weight:bold; }
.es-d0fbcb { background: #00ff88; color: black; }
.es-9e027b { width: 100%; font-size: 1.1rem; padding: 1.2rem; display: flex; align-items: center; justify-content: center; gap: 10px; }
.es-e097e0 { color: #a1a1aa; font-weight: 400; }
.es-52ed6c { color: var(--color-primary); font-weight: bold; }
.es-490b10 { font-size: 0.8rem; color: #888; display: block; }
.es-224b51 { display: none; }
.es-928e00 { color: var(--color-primary); }
.es-88467b { display: block; font-weight: 600; }
.es-a0e3f4 { margin-bottom: 1rem; font-size: 1.1rem; color: #ccc; }
.es-b628c5 { background: #111; padding: 1.5rem; border-radius: 12px; border: 1px solid #333; text-align: center; }
.es-a6ee26 { color: #aaa; margin-bottom: 1.5rem; font-size: 0.95rem; }
.es-874842 { text-align: left; margin-bottom: 1.5rem; display: flex; align-items: flex-start; gap: 10px; background: rgba(0, 112, 243, 0.05); padding: 15px; border-radius: 8px; border: 1px solid rgba(0, 112, 243, 0.2); }
.es-db2add { margin-top: 5px; width: auto; }
.es-1952bd { color: #ddd; font-size: 0.85rem; line-height: 1.4; margin: 0; cursor: pointer; }
.es-c37997 { font-size: 1.2rem; padding: 1rem; display: block; width: 100%; }
.es-d2c9b1 { margin-top: 1rem; color: #aaa; font-size: 0.9rem; line-height: 1.5; }
.es-771a9e { display: none; max-width: 800px; margin-top: 4rem; text-align: center; }
.es-1143d2 { background: #111; padding: 3rem; border-radius: 20px; border: 1px solid #333; }
.es-a86f11 { font-size: 4rem; margin-bottom: 1rem; }
.es-f47b82 { font-size: 2rem; margin-bottom: 1rem; color: white; }
.es-57c8ea { color: #ccc; margin-bottom: 2rem; font-size: 1.1rem; line-height: 1.6; }
.es-c754a6 { text-align: left; background: #000; padding: 2rem; border-radius: 12px; border: 1px solid #222; margin-bottom: 2rem; }
.es-b8715d { color: var(--color-primary); margin-bottom: 1.5rem; border-bottom: 1px solid #333; padding-bottom: 10px; }
.es-8eccb9 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.es-479e50 { color: #666; font-size: 0.9rem; margin-bottom: 5px; }
.es-2a8cb6 { color: white; font-weight: 500; }
.es-9cc0a9 { color: #888; font-size: 0.9rem; }
.es-e52540 { color: #00ff88; font-size: 1.5rem; font-weight: 700; }
.es-cf0f3a { margin-top: 2rem; }
.es-1e4c54 { color: #666; font-size: 0.9rem; margin-bottom: 10px; }
.es-4e877d { list-style: none; padding: 0; color: white; }
.es-3bb313 { color:var(--color-primary); }
.es-923a93 { font-size: 0.7rem; color: #444; max-width: 1000px; margin: 1.5rem auto 0; text-align: center; line-height: 1.5; border-top: 1px solid #222; padding-top: 1.5rem; }
.es-c3e93a { margin-top:10px; border-color:#333; color:#aaa; }
.es-8a0519 { position:fixed; top:0; left:0; width:100%; height:100%; background:#050505; z-index:99999; animation: fadeOutPreloader 0.5s ease-out 0.2s forwards; pointer-events:none; }
.es-10ae00 { padding: 160px 0 80px; text-align: center; position: relative; }
.es-afd790 { position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(0,112,243,0.15) 0%, transparent 60%); z-index: -1; }
.es-a7122f { display: flex; flex-direction: column; align-items: center; gap: 3rem; }
.es-91b0d6 { max-width: 800px; animation: fadeInUp 1s ease-out; }
.es-84f4dc { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 30px; padding: 6px 16px; margin-bottom: 24px; }
.es-2ea6be { width: 8px; height: 8px; background: #0070f3; border-radius: 50%; box-shadow: 0 0 10px #0070f3; }
.es-4337f4 { background: none; border: none; padding: 0; margin: 0; font-size: 0.85rem; font-weight: 500; color: #a1a1aa; }
.es-a174ea { font-size: clamp(3rem, 6vw, 5rem); letter-spacing: -0.04em; margin-bottom: 1.5rem; line-height: 1.1; font-weight: 700; }
.es-7d91fd { background: linear-gradient(to right, #ffffff, #a1a1aa); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.es-d8cf4e { font-size: 1.25rem; color: #a1a1aa; max-width: 600px; margin: 0 auto 2.5rem; line-height: 1.6; }
.es-2ffc1a { display: flex; justify-content: center; gap: 1.2rem; }
.es-0f4451 { border-radius: 8px; padding: 14px 28px; font-weight: 500; letter-spacing: -0.01em; }
.es-6c819c { border-radius: 8px; padding: 14px 28px; font-weight: 500; margin: 0; background: rgba(255,255,255,0.03); }
.es-078af0 { width: 100%; max-width: 1080px; margin-top: 2rem; position: relative; perspective: 2000px; }
.es-882c53 { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 100px rgba(0,112,243,0.1); transform: rotateX(5deg) translateY(20px); transition: transform 0.5s ease-out; }
.es-5e4010 { position: absolute; top:0; left:0; right:0; height: 40px; background: rgba(15,15,15,0.9); border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; padding: 0 16px; gap: 8px; z-index: 2; }
.es-400fd5 { width:12px; height:12px; border-radius:50%; background:#ff5f56; }
.es-afd4ce { width:12px; height:12px; border-radius:50%; background:#ffbd2e; }
.es-c72e58 { width:12px; height:12px; border-radius:50%; background:#27c93f; }
.es-051752 { display:block; width:100%; border:none; border-radius: 0; padding-top: 40px; background: #050505; }
.es-a729d7 { margin-bottom: 4rem; }
.es-ed474e { display:inline-block; margin-top: 10px; font-size: clamp(2.5rem, 5vw, 4rem); }
.es-c7b87a { width: 50px; height: 50px; background: rgba(0,112,243,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid rgba(0,112,243,0.3); margin-bottom: 1.5rem; }
.es-014d05 { font-size: 1.4rem; font-weight: 600; }
.es-3c705d { color: #a1a1aa; font-size: 1rem; line-height: 1.6; }
.es-5d37ef { background: rgba(0,112,243,0.15); }
.es-213806 { width: 50px; height: 50px; background: rgba(0,229,255,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid rgba(0,229,255,0.3); margin-bottom: 1.5rem; }
.es-b19760 { width: 50px; height: 50px; background: rgba(39,201,63,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid rgba(39,201,63,0.3); margin-bottom: 1.5rem; }
.es-875345 { width: 50px; height: 50px; background: rgba(255,189,46,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid rgba(255,189,46,0.3); margin-bottom: 1.5rem; }
.es-43a46a { width: 50px; height: 50px; background: rgba(255,95,86,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid rgba(255,95,86,0.3); margin-bottom: 1.5rem; }
.es-9c8197 { width: 50px; height: 50px; background: rgba(161,161,170,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid rgba(161,161,170,0.3); margin-bottom: 1.5rem; }
.es-e9cddc { width: 50px; height: 50px; background: rgba(190,52,254,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid rgba(190,52,254,0.3); margin-bottom: 1.5rem; }
.es-170523 { background: rgba(190,52,254,0.15); }
.es-277c4f { width: 50px; height: 50px; background: rgba(0,255,136,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid rgba(0,255,136,0.3); margin-bottom: 1.5rem; }
.es-6bea3b { background: rgba(0,255,136,0.15); }
.es-fe03e6 { font-size: 1.1rem; color: #fff; margin-bottom: 1.5rem; }
.es-130f40 { background: rgba(0, 112, 243, 0.1); border-left: 4px solid var(--color-primary); padding: 1rem; margin-bottom: 2rem; border-radius: 4px; }
.es-486b71 { margin: 0; font-size: 1.05rem; }
.es-973e7c { color:var(--color-primary);text-decoration:underline; }
.es-26e67d { padding: 1rem 2.5rem; font-size: 1.1rem; }
.es-58a1e2 { margin-right: 10px; }
.es-ace4aa { margin-top: 1rem; opacity: 0.7; margin-bottom: 5px; }
.es-75dae9 { margin-top: 0; opacity: 0.7; }
.es-cdd8ca { text-align: center; }
.es-ef4c6a { font-size: 8rem; margin-bottom: 1rem; }
.es-9ac83f { color: #00ff88; font-weight: bold; letter-spacing: 1px; }
.es-851c35 { color: #666; font-size: 0.8rem; }
.es-5bee11 { aspect-ratio: 16/9; border: none; border-radius: 12px; overflow: hidden; }
.es-467373 { padding: 100px 0; border-top: 1px solid rgba(255,255,255,0.05); background: radial-gradient(ellipse at bottom, rgba(0,112,243,0.05) 0%, transparent 60%); }
.es-7823bb { max-width: 1000px; }
.es-642598 { text-align: center; margin-bottom: 4rem; }
.es-581d49 { color: #0070f3; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }
.es-cd1e0d { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin: 1rem 0; }
.es-d5fb3f { color: #a1a1aa; font-size: 1.1rem; max-width: 600px; margin: 0 auto; }
.es-e89027 { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 3rem; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.es-bec715 { font-size: 1.2rem; font-weight: 500; color: #fff; margin-bottom: 1rem; }
.es-9c27f1 { color: #a1a1aa; line-height: 1.6; margin-bottom: 2rem; }
.es-3422ee { display: flex; flex-wrap: wrap; gap: 1rem; }
.es-fed29d { color:#0070f3; }
.es-e68d55 { color:#00e5ff; }
.es-b94f19 { color:#27c93f; }
.es-897eb0 { color:#ffbd2e; }
.es-ef890d { color:#ff5f56; }
.es-ab7184 { color:#a1a1aa; }
.es-9c979c { margin-top: 3rem; display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.es-cd6b6a { padding: 1rem 2rem; border-radius: 8px; }
.es-4f3ed9 { padding: 1rem 2rem; border-radius: 8px; background: rgba(255,255,255,0.05); }
.es-cafd82 { text-align: center; margin-top: 1.5rem; }
.es-f0730e { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; text-align: center; margin-bottom: 3rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 1.5rem; }
.es-2aa483 { flex: 1; min-width: 200px; display: flex; flex-direction: column; align-items: center; }
.es-d81a05 { font-size: 2rem; margin-bottom: 0.5rem; }
.es-9b2d95 { color: #fff; font-size: 0.95rem; }
.es-91a194 { font-size: 0.8rem; color: #888; }
.es-d66079 { border: 1px solid rgba(255, 255, 255, 0.1); }
.es-5e9649 { background: rgba(255, 255, 255, 0.1); color: #ddd; }
.es-27f0fd { background: #333; color: #fff; border: 1px solid #555; }
.es-dd0886 { margin-top: 1rem; text-align: center; font-size: 0.9rem; padding-top: 0.5rem; }
.es-4eb300 { color: #ccc; }
.es-dfa2a3 { border: 1px solid rgba(190, 52, 254, 0.5); }
.es-eea6a6 { background: rgba(190, 52, 254, 0.05); }
.es-b3e483 { background: rgba(190, 52, 254, 0.2); color: #be34fe; border: 1px solid rgba(190, 52, 254, 0.4); font-weight: bold; }
.es-8b7d69 { font-size: 0.8rem; color: #bbb; margin-top: -5px; margin-bottom: 5px; font-weight: 500; }
.es-4de380 { background: transparent; border: 2px solid #be34fe; color: #be34fe; font-weight: bold; }
.es-4c5649 { margin-top: 4rem; overflow-x: auto; }
.es-cad951 { text-align: center; color: #fff; margin-bottom: 2rem; }
.es-003519 { width: 100%; border-collapse: collapse; min-width: 800px; text-align: left; background: rgba(255,255,255,0.02); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); }
.es-90530a { background: rgba(255,255,255,0.05); }
.es-b93ba0 { padding: 1rem 1.5rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.1); }
.es-252f66 { font-size: 0.8rem; background: #ff007f; padding: 2px 6px; border-radius: 10px; margin-left: 5px; }
.es-de6cf2 { padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: #ccc; }
.es-1519f4 { padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: #fff; }
.es-1caf28 { padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: #fff; font-weight: bold; }
.es-1b8dc5 { padding: 1rem 1.5rem; color: #ccc; }
.es-25049f { padding: 1rem 1.5rem; color: #fff; }
.es-53bb66 { margin-top: 6rem; }
.es-45c9e5 { text-align: center; color: #fff; margin-bottom: 3rem; }
.es-16f67f { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.es-6fc77a { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 12px; transition: transform 0.3s; cursor: default; }
.es-d6fb25 { color: #ffaa00; font-size: 1.2rem; margin-bottom: 1rem; }
.es-e6af6a { color: #ccc; font-style: italic; margin-bottom: 1.5rem; line-height: 1.5; }
.es-d702c0 { display: flex; align-items: center; gap: 0.8rem; }
.es-fa415b { font-size: 1.5rem; }
.es-122508 { color: #fff; display: block; font-size: 0.95rem; }
.es-ecb2ca { color: #777; font-size: 0.8rem; }
.es-7ef748 { color: #25D366; background: none; -webkit-text-fill-color: #25D366; }
.es-8a4e0c { padding: 4rem 0; background-color: #0a0a0a; border-top: 1px solid #222; }
.es-124e6a { text-decoration: none; cursor: pointer; }
.es-ff4b68 { color: #aaa; margin-top: 0.5rem; }
.es-d10e94 { display: inline-block; margin-top: 1rem; color: #fff; font-size: 0.9rem; border-bottom: 1px solid; }
.es-8c3b92 { text-align: center; margin-top: 3rem; }
.es-c556d6 { padding: 1rem 3rem; }
.es-71a146 { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 10000; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.es-74a4c0 { background: #111; padding: 2rem; border-radius: 16px; border: 1px solid #333; width: 600px; max-width: 95%; position: relative; max-height: 90vh; overflow-y: auto; }
.es-8045e2 { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
.es-2a9dba { margin-bottom: 1.5rem; color: #fff; }
.es-79c37f { text-align: left; color: #ccc; line-height: 1.6; }
.es-d654a2 { background: #222; padding: 1rem; border-radius: 8px; border: 1px solid #444; margin-top: 1.5rem; }
.es-421b99 { color: #fff; }
.es-579907 { padding-left: 1.5rem; margin-top: 0.5rem; color: #aaa; }

/* Order History Card Styling */
.order-card {
    background: rgba(20, 20, 22, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}
.order-card:hover {
    background: rgba(20, 20, 22, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.order-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.order-info strong {
    font-size: 1.15rem;
    color: #fff;
    font-weight: 600;
}
.order-info span {
    font-size: 0.85rem;
    color: #888;
}

.order-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}
.order-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.order-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.order-badge.status-completed {
    background: rgba(0, 255, 128, 0.1);
    color: #00ff80;
    border: 1px solid rgba(0, 255, 128, 0.2);
}
.order-badge.status-pending {
    background: rgba(255, 165, 0, 0.1);
    color: #ffa500;
    border: 1px solid rgba(255, 165, 0, 0.2);
}

.btn-receipt {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #eee;
    padding: 8px 16px;
    font-size: 0.85rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.btn-receipt:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

@media (max-width: 768px) {
    .order-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .order-actions {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

/* Testimonials Marquee Animation */
.testimonials-marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 20px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.testimonials-marquee-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: scrollTestimonials 45s linear infinite;
}
.testimonials-marquee-track:hover {
  animation-play-state: paused;
}
.testimonials-marquee-track .testimonial-card {
  width: 350px;
  flex-shrink: 0;
  white-space: normal;
}
@keyframes scrollTestimonials {
  0% { transform: translateX(0); }
  /* Translate backward by half the width so it creates an infinite continuous loop */
  100% { transform: translateX(calc(-50% - 1rem)); }
}

/* Fix for inner pages title overlapping with the new fixed glass navbar */
.navbar + main,
.navbar + .container,
.legal-page .navbar + main,
.navbar + section:not(.hero) {
    margin-top: 100px !important;
}