@charset "UTF-8";
/* ===== MODERN CAR TUNE AI DESIGN - BLACK/RED THEME ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* BLACK/RED Color Palette */
  --primary: #ff0000; /* Bright Red */
  --primary-dark: #cc0000; /* Dark Red */
  --primary-light: #ff3333; /* Light Red */
  --secondary: #000000; /* Pure Black */
  --accent: #ff1a1a; /* Accent Red */
  --danger: #ff3333; /* Danger Red */
  --success: #00cc00; /* Green */
  --warning: #ff9900; /* Amber/Orange */

  /* Background Colors - Black theme */
  --bg-primary: #000000; /* Pure Black */
  --bg-secondary: #0a0a0a; /* Near Black */
  --bg-card: #1a1a1a; /* Dark Gray */
  --bg-surface: #262626; /* Gray-800 */

  /* Text Colors */
  --text-primary: #ffffff; /* White */
  --text-secondary: #cccccc; /* Light Gray */
  --text-muted: #999999; /* Gray */

  /* Borders & Shadows */
  --border-color: #404040; /* Gray-700 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.8);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.9), 0 2px 4px -1px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.95), 0 4px 6px -2px rgba(0, 0, 0, 0.8);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.95), 0 10px 10px -5px rgba(0, 0, 0, 0.8);

  /* Gradients - Red/Black theme */
  --gradient-primary: linear-gradient(135deg, #ff0000 0%, #990000 100%);
  --gradient-secondary: linear-gradient(135deg, #ff3333 0%, #660000 100%);
  --gradient-accent: linear-gradient(135deg, #ff0000 0%, #000000 100%);
  --gradient-black-red: linear-gradient(135deg, #000000 0%, #ff0000 100%);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

body.modal-open {
  overflow: hidden;
}

/* Screen Transitions */
.screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-primary);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1;
  display: none;
}

.screen.active {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: translateY(0);
  animation: screenFadeIn 0.4s ease;
}

@keyframes screenFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== HOME SCREEN ===== */
.home-screen {
  position: relative;
  background-color: var(--bg-primary);
}

.home-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  transition: all 1.5s ease;
}

/* Default night background */
.home-background {
  background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0)
    ),
    url('audi_night0.webp');
}

/* Day background */
.home-background.day-mode {
  background-image: 
    linear-gradient(
      rgb(0, 0, 0, 0.4),
      rgb(0, 0, 0, 0.5)
    ),
    url('audi_day1.webp');
}

/* If you don't have a day image, use a gradient instead */
.home-background.day-mode.no-image {
  background-image: 
    linear-gradient(
      135deg,
      #667eea 0%,
      #764ba2 50%,
      #f093fb 100%
    );
}

.home-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 20px 40px; /* Reduced top padding, kept bottom padding */
}

.home-logo {
  text-align: center;
  padding-top: 20px; /* Reduced padding */
  flex-shrink: 0;
}

.logo-icon {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 0 auto 15px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite;
  overflow: hidden;
}

/* Logo image fills the circle */
.logo-icon .logo-img {
  width: 145%;
  height: 145%;
  object-fit: cover;
  border-radius: var(--radius-full);
}

/* SVG logo inside the icon circle */
.logo-icon .logo-svg {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

.logo-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 32px; /* Smaller */
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 0%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

.logo-text span {
  color: var(--primary);
  -webkit-text-fill-color: var(--primary);
}

/* === Home Logo Wordmark (Tunerra) === */
/* Shared base for the home wordmark */
.home-logo .logo-text.home-wordmark {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  display: inline-flex;
  align-items: baseline;
  position: relative;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35))
          drop-shadow(0 0 18px rgba(255, 0, 0, 0.15));
}

/* "Tuner" — strong brand color */
.home-logo .home-wordmark .wm-strong {
  color: var(--primary);
  -webkit-text-fill-color: var(--primary);
}
/* "r" — transition letter, blended */
.home-logo .home-wordmark .wm-mid {
  background: linear-gradient(90deg, var(--primary) 0%, rgba(255, 255, 255, 0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* "ra" — white */
.home-logo .home-wordmark .wm-soft {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

/* Day hero variant — boost contrast against bright background */
.home-background.day-mode + .home-container .home-logo .home-wordmark {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6))
          drop-shadow(0 0 24px rgba(0, 0, 0, 0.3))
          drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
}
.home-background.day-mode + .home-container .home-logo .home-wordmark .wm-strong {
  color: #d40000;
  -webkit-text-fill-color: #d40000;
}
.home-background.day-mode + .home-container .home-logo .home-wordmark .wm-mid {
  background: linear-gradient(90deg, #d40000 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.home-background.day-mode + .home-container .home-logo .home-wordmark .wm-soft {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

/* Empty middle space - MUCH LARGER to push button to bottom */
.home-middle {
  flex: 1;
  min-height: 300px; /* Increased dramatically to push button down */
}

/* Bottom section container - POSITIONED AT BOTTOM */
.home-bottom-section {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px; /* Add bottom padding */
}

/* Button at the bottom */
.home-bottom {
  padding: 20px;
  text-align: center;
  order: 1;
  margin-bottom: 20px; /* Space between button and features */
}

/* ===== APPLE LIQUID GLASS EFFECT - START BUTTON ===== */
.start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Liquid Glass Base */
  background: linear-gradient(
    135deg,
    rgba(255, 50, 50, 0.25) 0%,
    rgba(255, 0, 0, 0.15) 25%,
    rgba(220, 0, 0, 0.2) 50%,
    rgba(255, 20, 20, 0.1) 75%,
    rgba(255, 0, 0, 0.15) 100%
  );

  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 22px 48px;
  border-radius: 22px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  min-width: 300px;

  /* Apple Glass Blur Effect */
  backdrop-filter: blur(40px) saturate(180%) contrast(120%);
  -webkit-backdrop-filter: blur(40px) saturate(180%) contrast(120%);

  /* Multi-layered shadows for depth */
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 4px 30px rgba(255, 0, 0, 0.15),
    0 8px 60px rgba(0, 0, 0, 0.3),
    0 16px 90px rgba(255, 0, 0, 0.1);
}

/* Glass Reflection Overlay */
.start-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(255, 255, 255, 0.05) 70%,
    transparent 100%
  );
  border-radius: 22px 22px 50% 50%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
  transition: all 0.4s ease;
}

/* Liquid Ripple Effect Layer */
.start-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 50% 0%,
    rgba(255, 100, 100, 0.3) 0%,
    rgba(255, 0, 0, 0.15) 40%,
    transparent 70%
  );
  border-radius: 22px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

/* Dynamic Background Animation */
@keyframes liquidFloat {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(20px, 10px) rotate(1deg);
  }
  66% {
    transform: translate(-10px, 15px) rotate(-1deg);
  }
}

/* Hover State - Liquid Glass Activation */
.start-btn:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.25);

  /* Enhanced glass effect on hover */
  backdrop-filter: blur(50px) saturate(200%) contrast(130%);
  -webkit-backdrop-filter: blur(50px) saturate(200%) contrast(130%);

  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 6px 40px rgba(255, 0, 0, 0.25),
    0 12px 80px rgba(0, 0, 0, 0.4),
    0 24px 120px rgba(255, 0, 0, 0.15);
}

.start-btn:hover::before {
  height: 60%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.25) 40%,
    rgba(255, 255, 255, 0.1) 80%,
    transparent 100%
  );
}

.start-btn:hover::after {
  opacity: 1;
}

/* Active State - Liquid Press */
.start-btn:active {
  transform: translateY(-2px) scale(0.99);
  transition: all 0.1s ease;

  backdrop-filter: blur(30px) saturate(160%) contrast(110%);
  -webkit-backdrop-filter: blur(30px) saturate(160%) contrast(110%);

  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
    inset 0 -4px 8px 0 rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 2px 20px rgba(255, 0, 0, 0.2),
    0 4px 40px rgba(0, 0, 0, 0.3);
}

/* Button Content Styling */
.start-btn .btn-text {
  position: relative;
  z-index: 2;
  text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 100, 100, 0.4);
  letter-spacing: 1px;
  font-weight: 700;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 230, 230, 0.9) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.start-btn .btn-icon {
  position: relative;
  z-index: 2;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 230, 230, 0.9) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.start-btn:hover .btn-icon {
  transform: translateX(10px) scale(1.1);
  filter: drop-shadow(0 2px 8px rgba(255, 100, 100, 0.4));
}

/* Animation for liquid motion */
@keyframes liquidFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.start-btn {
  background-size: 200% 200%;
  animation: liquidFlow 6s ease infinite;
}

/* Enhanced focus states for accessibility */
.start-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px;
  box-shadow: 
    0 0 0 4px rgba(255, 0, 0, 0.3),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.3);
}

/* Features BELOW the button */
.home-features {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 10px 20px; /* Reduced padding */
  flex-wrap: wrap;
  order: 2;
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* Reduced gap */
  color: var(--text-secondary);
  transition: color 0.3s ease;
  min-width: 90px;
}

.feature i {
  font-size: 26px; /* Slightly smaller */
  margin-bottom: 6px; /* Reduced margin */
  color: var(--primary);
}

.feature span {
  font-size: 13px; /* Slightly smaller */
  font-weight: 500;
}

.feature:hover {
  color: var(--primary);
  transform: translateY(-2px);
}

/* Remove the old .home-center styles */
.home-center {
  display: none;
}

/* ===== APP CONTAINER (for other screens) ===== */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  background-color: var(--bg-primary);
  position: relative;
  overflow: hidden;
}

/* For Screen 4 specifically - allow content to take full height */
#screen-upgrade .app-container {
  padding: 0;
}

#screen-upgrade .scrollable-content {
  flex: 1;
  padding: 0;
}

#screen-upgrade .content-wrapper {
  height: 100%;
  padding: 0;
}

/* ===== MODERN PROGRESS BAR HEADER ===== */
.screen-header {
  display: flex;
  flex-direction: column;
  padding: 15px 20px 10px;
  background-color: var(--bg-primary);
  flex-shrink: 0;
  z-index: 10;
  border-bottom: 1px solid #333333;
  min-height: 90px;
}

/* Top row: Back button, Logo, Step text */
.header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  width: 100%;
}

.header-top-row .back-btn {
  flex-shrink: 0;
}

.header-logo {
  flex: 1;
  text-align: center;
  margin: 0 10px;
}

.header-logo .logo-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px; /* Smaller than home screen */
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 0%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.header-logo .logo-text span {
  color: var(--primary);
  -webkit-text-fill-color: var(--primary);
}

.step-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255, 0, 0, 0.1);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 0, 0, 0.2);
  flex-shrink: 0;
  min-width: 70px;
  text-align: center;
}

/* Progress Bar Container */
.progress-container {
  width: 100%;
  padding: 0 5px;
}

.progress-bar-wrapper {
  width: 100%;
  height: 6px;
  background: #1a1a1a;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  border: 1px solid #333333;
}

.progress-bar-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 3px;
  width: 0%;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

/* Animated shine effect on progress bar */
.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: progressShine 2s infinite;
}

@keyframes progressShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Progress Dots */
.progress-dots {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  position: relative;
}

.progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333333;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.progress-dot.active {
  background: var(--primary);
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

.progress-dot.completed {
  background: var(--primary);
}

.progress-dot.completed::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* Progress labels */
.progress-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 5px;
}

.progress-label {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: color 0.3s ease;
  text-align: center;
  width: 20%;
  padding: 0 2px;
}

.progress-label.active {
  color: var(--primary);
  font-weight: 600;
}

.back-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--bg-card);
  border: none;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  border: 1px solid #333333;
}

.back-btn:hover {
  background: var(--primary);
  color: white;
  transform: translateX(-2px);
  border-color: var(--primary);
}

/* ===== Scrollable Content Area ===== */
.scrollable-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px;
}

.content-wrapper {
  padding: 20px 0;
  min-height: min-content;
}

/* Action Footer */
.action-footer {
  flex-shrink: 0;
  padding: 20px;
  background-color: var(--bg-primary);
  border-top: 1px solid #333333;
  margin-top: auto;
}

.dual-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ===== BUTTONS ===== */
/* PRIMARY BUTTON LIQUID GLASS EFFECT */
.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Liquid Glass Base */
  background: linear-gradient(
    135deg,
    rgba(255, 50, 50, 0.2) 0%,
    rgba(255, 0, 0, 0.12) 25%,
    rgba(220, 0, 0, 0.18) 50%,
    rgba(255, 20, 20, 0.08) 75%,
    rgba(255, 0, 0, 0.12) 100%
  );

  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 32px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  width: 100%;
  min-height: 60px;

  /* Apple Glass Blur Effect */
  backdrop-filter: blur(30px) saturate(180%) contrast(120%);
  -webkit-backdrop-filter: blur(30px) saturate(180%) contrast(120%);

  /* Multi-layered shadows */
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 4px 20px rgba(255, 0, 0, 0.12),
    0 8px 40px rgba(0, 0, 0, 0.25),
    0 12px 60px rgba(255, 0, 0, 0.08);
}

/* Glass Reflection for Primary Button */
.primary-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.12) 40%,
    rgba(255, 255, 255, 0.03) 80%,
    transparent 100%
  );
  border-radius: 18px 18px 50% 50%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
  transition: all 0.3s ease;
}

/* Hover State */
.primary-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.2);

  backdrop-filter: blur(35px) saturate(200%) contrast(130%);
  -webkit-backdrop-filter: blur(35px) saturate(200%) contrast(130%);

  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 6px 30px rgba(255, 0, 0, 0.2),
    0 12px 60px rgba(0, 0, 0, 0.3),
    0 18px 90px rgba(255, 0, 0, 0.1);
}

.primary-btn:hover::before {
  height: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.08) 90%,
    transparent 100%
  );
}

/* Active State */
.primary-btn:active {
  transform: translateY(-1px);
  transition: all 0.1s ease;

  backdrop-filter: blur(25px) saturate(160%) contrast(110%);
  -webkit-backdrop-filter: blur(25px) saturate(160%) contrast(110%);

  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
    inset 0 -3px 6px 0 rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 2px 15px rgba(255, 0, 0, 0.15),
    0 4px 30px rgba(0, 0, 0, 0.25);
}

/* Button Text Styling */
.primary-btn span,
.primary-btn i {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
}

.primary-btn i {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.primary-btn:hover i {
  transform: translateX(5px) scale(1.1);
}

.primary-btn {
  background-size: 200% 200%;
  animation: liquidFlow 6s ease infinite;
}

.primary-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px;
  box-shadow: 
    0 0 0 4px rgba(255, 0, 0, 0.3),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.3);
}

/* SECONDARY BUTTON GLASS EFFECT */
.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Dark Glass Base */
  background: linear-gradient(
    135deg,
    rgba(40, 40, 40, 0.25) 0%,
    rgba(30, 30, 30, 0.15) 25%,
    rgba(20, 20, 20, 0.2) 50%,
    rgba(30, 30, 30, 0.1) 75%,
    rgba(40, 40, 40, 0.15) 100%
  );

  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px 24px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  width: 100%;
  min-height: 56px;

  /* Glass Blur Effect */
  backdrop-filter: blur(25px) saturate(180%) contrast(120%);
  -webkit-backdrop-filter: blur(25px) saturate(180%) contrast(120%);

  /* Shadows */
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 4px 15px rgba(0, 0, 0, 0.2),
    0 8px 30px rgba(0, 0, 0, 0.3);
}

.secondary-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0.02) 80%,
    transparent 100%
  );
  border-radius: 18px 18px 50% 50%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
  transition: all 0.3s ease;
}

.secondary-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(60, 60, 60, 0.3) 0%,
    rgba(40, 40, 40, 0.2) 25%,
    rgba(30, 30, 30, 0.25) 50%,
    rgba(40, 40, 40, 0.15) 75%,
    rgba(60, 60, 60, 0.2) 100%
  );
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--primary);
  transform: translateY(-2px);

  backdrop-filter: blur(30px) saturate(200%) contrast(130%);
  -webkit-backdrop-filter: blur(30px) saturate(200%) contrast(130%);

  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 6px 25px rgba(0, 0, 0, 0.3),
    0 12px 50px rgba(0, 0, 0, 0.4);
}

.secondary-btn:hover::before {
  height: 50%;
}

.secondary-btn:active {
  transform: translateY(-1px);
  transition: all 0.1s ease;
}

.secondary-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.3);
  outline-offset: 4px;
}

/* ===== FORM ELEMENTS ===== */
.form-container {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 25px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 20px;
  border: 1px solid #333333;
}

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

.input-group:last-child {
  margin-bottom: 0;
}

.input-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.input-group label i {
  color: var(--primary);
  width: 16px;
}

.modern-select {
  width: 100%;
  padding: 16px;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ff0000' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}

.modern-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.2);
}

.input-row {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.input-row:last-child {
  margin-bottom: 0;
}

.input-row .half {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

/* ===== UPLOAD AREA ===== */
.upload-area {
  background: var(--bg-card);
  border: 2px dashed #333333;
  border-radius: var(--radius-xl);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

.upload-area:hover {
  border-color: var(--primary);
  background: rgba(255, 0, 0, 0.05);
}

.upload-icon {
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.upload-icon i {
  font-size: 32px;
  color: white;
}

.upload-area h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.upload-area p {
  color: var(--text-muted);
  margin-bottom: 20px;
  font-size: 14px;
}

.upload-requirements {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 25px;
}

.upload-requirements span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-full);
  border: 1px solid #333333;
}

.upload-requirements i {
  color: var(--primary);
}

.file-input {
  display: none;
}

/* ===== OPTIONS GRID ===== */
.options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.option-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid #333333;
  position: relative;
  overflow: hidden;
}

.option-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3);
}

.option-card:active {
  transform: translateY(-2px);
}

.option-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: var(--gradient-primary);
}

.option-icon i {
  font-size: 24px;
  color: white;
}

.option-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.option-card p {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.5;
}

.option-tag {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(255, 0, 0, 0.1);
  color: var(--primary);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255, 0, 0, 0.3);
}

/* ===== OPTIONS LIST ===== */
.options-list {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 20px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 20px;
  border: 1px solid #333333;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #333333;
  cursor: pointer;
  min-height: 60px;
}

.option-item:last-child {
  border-bottom: none;
}

.option-item input[type="checkbox"] {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid #333333;
  border-radius: var(--radius-sm);
  margin-right: 15px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.option-item input[type="checkbox"]:checked {
  background: var(--gradient-primary);
  border-color: transparent;
}

.option-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -60%) rotate(45deg);
}

.option-item label {
  flex: 1;
  font-size: 16px;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.option-price {
  font-weight: 600;
  color: var(--primary);
  font-size: 14px;
  flex-shrink: 0;
}

/* ===== RESULTS CARD ===== */
.results-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 25px;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255, 0, 0, 0.3);
  margin-bottom: 20px;
}

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

.result-header h3 {
  font-size: 20px;
  color: var(--text-primary);
}

.result-badge {
  background: var(--gradient-primary);
  color: white;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.results-content {
  margin-bottom: 25px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #333333;
  align-items: center;
  min-height: 50px;
}

.result-item:last-child {
  border-bottom: none;
}

.result-label {
  color: var(--text-secondary);
  font-size: 15px;
}

.result-value {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 16px;
}

/* ===== FIXED STATS GRID ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 25px;
}

.stat {
  background: #1a1a1a;
  border-radius: var(--radius-lg);
  padding: 12px 6px;
  text-align: center;
  min-height: 75px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #333333;
}

.stat-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 3px;
  max-width: 100%;
  display: block;
}

.stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 3px;
  max-width: 100%;
  display: block;
}

/* (comment removed: encoding noise) */
.map-container {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
  margin-bottom: 20px;
  border: 1px solid #333333;
}

.map-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #000000 0%, #330000 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.map-placeholder i {
  font-size: 40px;
  margin-bottom: 10px;
  color: var(--primary);
}

.map-placeholder p {
  font-size: 16px;
  font-weight: 500;
}

.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.shop-marker {
  position: absolute;
  width: 42px;
  height: 42px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  animation: markerFloat 3s ease-in-out infinite;
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -50%);
  overflow: visible;
}

@keyframes bounce {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-4px); }
}

/* ===== COST BREAKDOWN ===== */
.cost-breakdown {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 25px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 20px;
  border: 1px solid #333333;
}

.cost-breakdown h3 {
  font-size: 18px;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.cost-item {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #333333;
  color: var(--text-secondary);
  align-items: center;
  min-height: 50px;
}

.cost-item:last-child {
  border-bottom: none;
}

.cost-total {
  display: flex;
  justify-content: space-between;
  padding: 20px 0 0;
  margin-top: 15px;
  border-top: 2px solid #333333;
  font-weight: 600;
  color: var(--text-primary);
  align-items: center;
  min-height: 60px;
}

.total-amount {
  color: var(--primary);
  font-size: 22px;
}

/* ===== HELPER TEXT ===== */
.helper-text {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 15px;
  line-height: 1.4;
}

/* ===== LOADING OVERLAY ===== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.loading-container {
  text-align: center;
  max-width: 300px;
  padding: 40px;
  background: rgba(0, 0, 0, 0.9);
  border-radius: var(--radius-xl);
  border: 2px solid #333333;
}

.loading-animation {
  position: relative;
  height: 100px;
  margin-bottom: 30px;
}

.loading-car {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  animation: drive 2s linear infinite;
}

.loading-car i {
  font-size: 48px;
  color: var(--primary);
}

.loading-track {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background: #333333;
  overflow: hidden;
}

.loading-track::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  animation: trackMove 1s linear infinite;
}

@keyframes drive {
  0% { left: 0; }
  50% { left: calc(100% - 48px); }
  100% { left: 0; }
}

@keyframes trackMove {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes pulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  }
  50% { 
    transform: scale(1.05); 
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 30px rgba(0, 0, 0, 0.6);
  }
}

#loading-text {
  font-size: 24px;
  margin-bottom: 10px;
  color: var(--text-primary);
  background: linear-gradient(90deg, #ffffff, var(--primary), #990000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradientShift 2s ease infinite;
}

.loading-subtext {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.4;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== SPLIT SCREEN UPGRADE SELECTION - FULL SCREEN VERTICAL SPLIT ===== */
.split-screen-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  margin-bottom: 0;
  flex: 1;
  border: 1px solid #333333;
}

.scrollable-content {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  padding: 0 !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.split-option {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.split-left {
  left: 0;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.split-right {
  right: 0;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}

.split-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.8s ease;
}

.split-option:hover .split-image {
  transform: scale(1.05);
}

@media (min-width: 769px) {
  .split-option:hover {
    width: 60%;
    z-index: 2;
    box-shadow: 0 0 40px rgba(255, 0, 0, 0.6);
  }

  .split-left:hover {
    border-radius: var(--radius-xl);
  }

  .split-right:hover {
    border-radius: var(--radius-xl);
  }
}

.split-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.8) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  transition: all 0.3s ease;
}

.split-option:hover .split-overlay,
.split-option.active .split-overlay {
  background: linear-gradient(
    to bottom,
    rgba(255, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

.split-content {
  text-align: center;
  color: white;
  z-index: 3;
  transition: all 0.4s ease;
}

.split-option:hover .split-content,
.split-option.active .split-content {
  transform: translateY(0);
}

.split-icon {
  width: 70px;
  height: 70px;
  background: rgba(255, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border: 2px solid rgba(255, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.split-option:hover .split-icon,
.split-option.active .split-icon {
  background: var(--gradient-primary);
  border-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.1);
}

.split-icon i {
  font-size: 32px;
  color: white;
}

.split-content h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.split-content p {
  font-size: 14px;
  opacity: 0.9;
  line-height: 1.5;
  margin-bottom: 20px;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

.split-badge {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(255, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 0, 0, 0.6);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.split-option:hover .split-badge,
.split-option.active .split-badge {
  background: rgba(255, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

/* Center Divider */
.split-divider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 4;
  pointer-events: none;
}

.divider-line {
  width: 2px;
  height: 100px;
  background: rgba(255, 0, 0, 0.5);
}

.divider-text {
  color: white;
  font-size: 14px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.7);
  padding: 8px 12px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(255, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

/* Selection animation */
@keyframes selectionPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(255, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

.selection-animation {
  animation: selectionPulse 0.8s;
}

/* ===== RESPONSIVE DESIGN ===== */

/* ===== Build strip entries (unified styling) ===== */
.build-entry {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.build-entry:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 46, 46, 0.35);
  background: rgba(255, 46, 46, 0.10);
}

.build-entry-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.build-entry .entry-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 46, 46, 0.14);
  border: 1px solid rgba(255, 46, 46, 0.25);
  flex: 0 0 auto;
}

.build-entry .entry-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.build-entry .entry-title {
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.build-entry .entry-subtitle {
  font-size: 0.80rem;
  opacity: 0.86;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.build-entry-x {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}

.build-entry-x:hover {
  background: rgba(255, 46, 46, 0.16);
  border-color: rgba(255, 46, 46, 0.25);
}

@media (max-width: 480px) {
  .split-screen-container {
    border-radius: 0;
    height: 100%;
  }

  .split-left,
  .split-right {
    border-radius: 0;
  }

  .split-overlay {
    padding: 20px;
  }

  .split-content h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .split-content p {
    font-size: 13px;
    margin-bottom: 15px;
  }

  .split-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
  }

  .split-icon i {
    font-size: 28px;
  }

  .split-badge {
    padding: 6px 12px;
    font-size: 11px;
  }

  .divider-line {
    height: 80px;
  }

  .divider-text {
    font-size: 12px;
    padding: 6px 10px;
  }

  .split-option:hover {
    width: 60%;
  }

  /* Mobile responsive adjustments */
  .home-container {
    padding: 15px 15px 30px;
  }

  .home-logo {
    padding-top: 15px;
  }

  .logo-icon {
    width: 60px;
    height: 60px;
  }

  .logo-text {
    font-size: 28px;
  }

  .home-middle {
    min-height: 200px;
  }

  .start-btn {
    padding: 20px 32px;
    font-size: 16px;
    min-width: 280px;
    border-radius: 20px;
    backdrop-filter: blur(30px) saturate(180%) contrast(120%);
    -webkit-backdrop-filter: blur(30px) saturate(180%) contrast(120%);
  }

  .start-btn::before {
    border-radius: 20px 20px 50% 50%;
  }

  .home-bottom-section {
    padding-bottom: 10px;
  }

  .home-features {
    gap: 20px;
    padding: 5px 15px;
  }

  .feature {
    min-width: 70px;
    gap: 5px;
  }

  .feature i {
    font-size: 22px;
    margin-bottom: 4px;
  }

  .feature span {
    font-size: 12px;
  }

  .screen-header {
    padding: 12px 15px 8px;
    min-height: 85px;
  }

  .header-title h2 {
    font-size: 15px;
  }

  .step-text {
    font-size: 10px;
    padding: 3px 8px;
    min-width: 60px;
  }

  .back-btn {
    width: 34px;
    height: 34px;
  }

  .progress-dot {
    width: 8px;
    height: 8px;
  }

  .progress-label {
    font-size: 8px;
  }

  .scrollable-content {
    padding: 0 15px;
  }

  .content-wrapper {
    padding: 15px 0;
  }

  .action-footer {
    padding: 15px;
  }

  .form-container,
  .upload-area,
  .options-list,
  .results-card,
  .cost-breakdown {
    padding: 20px;
  }

  .input-row {
    flex-direction: column;
    gap: 20px;
  }

  .input-row .half {
    width: 100%;
    margin-bottom: 0;
  }

  .dual-buttons {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .primary-btn,
  .secondary-btn {
    padding: 16px 20px;
    font-size: 15px;
    min-height: 52px;
    border-radius: 16px;
  }

  .primary-btn {
    backdrop-filter: blur(25px) saturate(180%) contrast(120%);
    -webkit-backdrop-filter: blur(25px) saturate(180%) contrast(120%);
  }

  .secondary-btn {
    backdrop-filter: blur(20px) saturate(180%) contrast(120%);
    -webkit-backdrop-filter: blur(20px) saturate(180%) contrast(120%);
  }

  .stats-grid {
    gap: 6px;
  }

  .stat {
    padding: 10px 4px;
    min-height: 70px;
  }

  .stat-value {
    font-size: 15px;
    padding: 0 2px;
  }

  .stat-label {
    font-size: 9px;
    letter-spacing: 0.3px;
    padding: 0 2px;
  }

  .map-container {
    height: auto;
  }

  .map-placeholder i {
    font-size: 36px;
  }

  .total-amount {
    font-size: 20px;
  }

  .option-item label {
    font-size: 15px;
  }

  .option-price {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .split-screen-container {
    height: 350px;
  }

  .split-content h3 {
    font-size: 18px;
  }

  .split-content p {
    font-size: 12px;
  }

  .split-icon {
    width: 50px;
    height: 50px;
  }

  .split-icon i {
    font-size: 24px;
  }

  .start-btn {
    min-width: 250px;
    padding: 18px 24px;
    font-size: 15px;
  }

  .home-features {
    gap: 15px;
  }

  .feature {
    min-width: 65px;
  }

  .logo-text {
    font-size: 26px;
  }

  .stat-value {
    font-size: 14px;
  }

  .stat-label {
    font-size: 8px;
  }

  .map-container {
    height: auto;
  }
}

/* Tablet styles */
@media (min-width: 481px) and (max-width: 768px) {
  .split-screen-container {
    height: 100%;
  }

  .split-option:hover {
    width: 55%;
  }

  .home-middle {
    min-height: 350px;
  }

  .map-container {
    height: auto;
  }
}

/* Desktop styles */
@media (min-width: 769px) {
  .split-screen-container {
    height: 100%;
  }

  .home-middle {
    min-height: 400px;
  }
}

/* Custom Scrollbar */
.scrollable-content::-webkit-scrollbar {
  width: 6px;
}

.scrollable-content::-webkit-scrollbar-track {
  background: transparent;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: var(--radius-full);
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Prevent horizontal overflow */
* {
  max-width: 100%;
}

img, video, canvas {
  max-width: 100%;
  height: auto;
}

/* For devices that don't support backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
  .start-btn {
    background: linear-gradient(
      135deg,
      rgba(255, 50, 50, 0.4) 0%,
      rgba(255, 0, 0, 0.3) 25%,
      rgba(220, 0, 0, 0.35) 50%,
      rgba(255, 20, 20, 0.25) 75%,
      rgba(255, 0, 0, 0.3) 100%
    );
  }

  .primary-btn {
    background: linear-gradient(
      135deg,
      rgba(255, 50, 50, 0.3) 0%,
      rgba(255, 0, 0, 0.25) 25%,
      rgba(220, 0, 0, 0.3) 50%,
      rgba(255, 20, 20, 0.2) 75%,
      rgba(255, 0, 0, 0.25) 100%
    );
  }

  .secondary-btn {
    background: linear-gradient(
      135deg,
      rgba(60, 60, 60, 0.4) 0%,
      rgba(50, 50, 50, 0.3) 25%,
      rgba(40, 40, 40, 0.35) 50%,
      rgba(50, 50, 50, 0.25) 75%,
      rgba(60, 60, 60, 0.3) 100%
    );
  }
}

/* ============ ZIP CODE SEARCH SECTION - BLACK/RED THEME ============ */
.zip-search-section {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0505 100%);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 20px;
  color: white;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  border: 1px solid #2a2a2a;
}

.zip-search-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 160px;
  height: 160px;
  background: rgba(255, 0, 0, 0.06);
  border-radius: 50%;
}

.zip-search-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -30%;
  width: 120px;
  height: 120px;
  background: rgba(255, 50, 50, 0.03);
  border-radius: 50%;
}

.zip-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.zip-icon {
  font-size: 22px;
  margin-right: 12px;
  background: rgba(255, 0, 0, 0.12);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--primary);
  border: 1px solid rgba(255, 0, 0, 0.2);
  flex-shrink: 0;
}

.zip-header-text h3 {
  margin: 0 0 2px 0;
  font-size: 17px;
  font-weight: 700;
  color: white;
}

.zip-subtitle {
  margin: 0;
  opacity: 0.6;
  font-size: 12px;
  color: #aaa;
}

.zip-input-container {
  position: relative;
  z-index: 2;
}

.zip-input-group {
  background: rgba(15, 15, 15, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid #2a2a2a;
}

.input-with-icon {
  position: relative;
  margin-bottom: 12px;
}

.input-with-icon i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 16px;
}

#zip-code {
  width: 100%;
  padding: 14px 18px 14px 44px;
  background: rgba(10, 10, 10, 0.8);
  border: 1.5px solid #2a2a2a;
  border-radius: 10px;
  color: white;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
}

#zip-code:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(20, 20, 20, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.2);
}

#zip-code::placeholder {
  color: #666666;
}

.input-hint {
  display: flex;
  align-items: center;
  color: #777;
  font-size: 11px;
  margin-top: 6px;
  margin-left: 4px;
}

.input-hint i {
  margin-right: 5px;
  font-size: 12px;
  color: var(--primary);
}

.zip-action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 0;
}

.zip-current-location, .zip-search-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.zip-current-location {
  background: rgba(40, 40, 40, 0.8);
  color: white;
  border: 1px solid #333333;
}

.zip-current-location:hover {
  background: rgba(60, 60, 60, 0.8);
  border-color: var(--primary);
  color: var(--primary);
}

.zip-search-btn {
  background: linear-gradient(135deg, var(--primary) 0%, #990000 100%);
  color: white;
  border: 1px solid var(--primary);
}

.zip-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
  background: linear-gradient(135deg, #ff3333 0%, #990000 100%);
}

.quick-zips {
  margin-top: 20px;
}

.quick-zips-label {
  display: block;
  color: #cccccc;
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: 500;
}

.zip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.zip-chip {
  background: rgba(40, 40, 40, 0.8);
  border: 1px solid #333333;
  color: #cccccc;
  padding: 10px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.zip-chip:hover {
  background: rgba(255, 0, 0, 0.2);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
}

/* ============ MAP CONTAINER UPDATES - BLACK/RED THEME ============ */
/* --- Map Card: two-row structure (header bar + viewport) --- */
.map-container.map-card {
  background: var(--bg-card);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: var(--shadow-lg), 0 0 40px rgba(255, 0, 0, 0.06);
  border: 1px solid #333333;
  height: auto;
  display: flex;
  flex-direction: column;
}

/* Row A: compact header bar */
.map-card-header {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(8, 8, 8, 0.95);
  flex-shrink: 0;
  min-height: 0;
}

.map-card-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
}

.map-card-header-right {
  flex-shrink: 0;
}

.map-card-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  white-space: nowrap;
}

.map-card-header h3 i {
  color: var(--primary);
  font-size: 14px;
}

.map-card-header .map-results-count {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 400;
}

.map-card-header .map-attribution {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
  letter-spacing: 0.02em;
}

/* Row B: map viewport */
.map-viewport {
  position: relative;
  height: 400px;
  overflow: hidden;
  flex-shrink: 0;
/* (comment removed: encoding noise) */
  background: #0e0f11;
}

/* === SVG-based dark map background === */
.map-viewport-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* City-block grid: small blocks for buildings, larger for neighborhoods */
  background-image:
    /* fine building blocks */
    linear-gradient(to right, rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.022) 1px, transparent 1px),
    /* medium streets */
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px),
    /* major roads */
    linear-gradient(to right, rgba(255,255,255,0.06) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
  background-size:
    18px 18px,
    18px 18px,
    90px 90px,
    90px 90px,
    270px 270px,
    270px 270px;
  background-position:
    0 0,
    0 0,
    45px 45px,
    45px 45px,
    135px 135px,
    135px 135px;
}

/* Colored zones: parks, water, districts + vignette */
.map-viewport-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
/* (comment removed: encoding noise) */
    radial-gradient(ellipse 110px 70px at 18% 28%, rgba(34, 85, 44, 0.12) 0%, rgba(34, 85, 44, 0.04) 60%, transparent 100%),
/* (comment removed: encoding noise) */
    radial-gradient(ellipse 70px 90px at 78% 42%, rgba(40, 90, 40, 0.09) 0%, rgba(40, 90, 40, 0.02) 60%, transparent 100%),
/* (comment removed: encoding noise) */
    radial-gradient(ellipse 50px 40px at 55% 82%, rgba(36, 78, 36, 0.08) 0%, transparent 100%),
/* (comment removed: encoding noise) */
    radial-gradient(ellipse 150px 35px at 30% 78%, rgba(25, 50, 100, 0.13) 0%, rgba(25, 50, 100, 0.03) 70%, transparent 100%),
/* (comment removed: encoding noise) */
    radial-gradient(ellipse 55px 45px at 85% 18%, rgba(30, 55, 95, 0.10) 0%, transparent 100%),
/* (comment removed: encoding noise) */
    radial-gradient(ellipse 100px 80px at 48% 45%, rgba(60, 40, 25, 0.07) 0%, transparent 100%),
/* (comment removed: encoding noise) */
    radial-gradient(ellipse 120px 60px at 65% 65%, rgba(45, 35, 30, 0.06) 0%, transparent 100%),
/* (comment removed: encoding noise) */
    radial-gradient(ellipse 80px 70px at 20% 60%, rgba(35, 38, 50, 0.06) 0%, transparent 100%);
}

/* Vignette + glow at center */
.map-viewport-texture::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* soft red glow at center for "you are here" feel */
    radial-gradient(ellipse 80px 80px at 50% 50%, rgba(180, 40, 40, 0.06) 0%, transparent 100%),
    /* vignette */
    radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

/* center crosshair */
.map-viewport::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(255, 50, 50, 0.25);
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(255, 50, 50, 0.1);
}

/* Decorative road network overlay */
.map-roads-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

/* (comment removed: encoding noise) */
.map-roads-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
/* (comment removed: encoding noise) */
    linear-gradient(0deg,
      transparent calc(50% - 2px),
      rgba(255, 200, 80, 0.045) calc(50% - 2px),
      rgba(255, 200, 80, 0.06) 50%,
      rgba(255, 200, 80, 0.045) calc(50% + 2px),
      transparent calc(50% + 2px)),
/* (comment removed: encoding noise) */
    linear-gradient(90deg,
      transparent calc(44% - 2px),
      rgba(255, 200, 80, 0.04) calc(44% - 2px),
      rgba(255, 200, 80, 0.055) 44%,
      rgba(255, 200, 80, 0.04) calc(44% + 2px),
      transparent calc(44% + 2px)),
    /* diagonal avenue NW-SE */
    linear-gradient(35deg,
      transparent calc(50% - 1.5px),
      rgba(255, 255, 255, 0.04) 50%,
      transparent calc(50% + 1.5px)),
    /* diagonal avenue NE-SW */
    linear-gradient(140deg,
      transparent calc(38% - 1px),
      rgba(255, 255, 255, 0.03) 38%,
      transparent calc(38% + 1px)),
/* (comment removed: encoding noise) */
    linear-gradient(0deg,
      transparent calc(25% - 1px),
      rgba(255, 255, 255, 0.03) 25%,
      transparent calc(25% + 1px)),
/* (comment removed: encoding noise) */
    linear-gradient(0deg,
      transparent calc(75% - 1px),
      rgba(255, 255, 255, 0.025) 75%,
      transparent calc(75% + 1px)),
/* (comment removed: encoding noise) */
    linear-gradient(90deg,
      transparent calc(72% - 1px),
      rgba(255, 255, 255, 0.03) 72%,
      transparent calc(72% + 1px)),
    /* ring road arc (simulated) */
    linear-gradient(155deg,
      transparent calc(62% - 1px),
      rgba(255, 200, 80, 0.025) 62%,
      transparent calc(62% + 1px));
}

/* (comment removed: encoding noise) */
.map-roads-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* dense downtown cluster */
    radial-gradient(ellipse 80px 80px at 46% 48%, rgba(255, 255, 255, 0.025) 0%, transparent 100%),
    /* commercial strip along highway */
    radial-gradient(ellipse 140px 20px at 50% 50%, rgba(255, 255, 255, 0.015) 0%, transparent 100%),
    /* suburb cluster top-right */
    radial-gradient(ellipse 60px 50px at 72% 30%, rgba(255, 255, 255, 0.015) 0%, transparent 100%),
    /* suburb cluster bottom-left */
    radial-gradient(ellipse 70px 40px at 28% 68%, rgba(255, 255, 255, 0.015) 0%, transparent 100%);
}

/* map-placeholder inside viewport */
.map-viewport .map-placeholder {
  position: absolute;
  inset: 0;
  height: auto;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* (comment removed: encoding noise) */
.map-viewport .map-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  pointer-events: none;
  z-index: 4;
  display: none;
}

/* ---- Marker redesign ---- */
.map-viewport .shop-marker {
  position: absolute;
  background: linear-gradient(135deg, var(--primary) 0%, #990000 100%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 0, 0, 0.15);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  animation: markerFloat 3s ease-in-out infinite;
  transform: translate(-50%, -50%);
  overflow: visible;
}

@keyframes markerFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-4px); }
}

.map-viewport .shop-marker i {
  color: white;
  font-size: 16px;
}

.map-viewport .shop-marker:hover {
  transform: translate(-50%, -50%) scale(1.2) translateY(-4px);
  z-index: 20;
  box-shadow: 0 8px 24px rgba(255, 0, 0, 0.45), 0 0 0 3px rgba(255, 0, 0, 0.25);
}

.map-viewport .shop-marker:hover .shop-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Recommended marker: gold glow ring + larger */
.map-viewport .shop-marker.recommended {
  width: 50px;
  height: 50px;
  border: 3px solid #ffd700;
  box-shadow:
    0 0 0 4px rgba(255, 215, 0, 0.25),
    0 0 20px rgba(255, 215, 0, 0.15),
    0 6px 20px rgba(0, 0, 0, 0.6);
  z-index: 15;
  animation: recommendedPulse 2.5s ease-in-out infinite;
}

@keyframes recommendedPulse {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
    box-shadow:
      0 0 0 4px rgba(255, 215, 0, 0.25),
      0 0 20px rgba(255, 215, 0, 0.15),
      0 6px 20px rgba(0, 0, 0, 0.6);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-5px);
    box-shadow:
      0 0 0 6px rgba(255, 215, 0, 0.35),
      0 0 28px rgba(255, 215, 0, 0.2),
      0 10px 28px rgba(0, 0, 0, 0.5);
  }
}

.map-viewport .shop-marker.recommended i {
  font-size: 18px;
}

.map-viewport .shop-marker.recommended .shop-tooltip {
  font-weight: 700;
  border-color: rgba(255, 215, 0, 0.3);
}

/* Tooltip repositioned for new centering */
.map-viewport .shop-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(0, 0, 0, 0.92);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  width: max-content;
  min-width: fit-content;
  max-width: 260px;
  opacity: 0;
  transition: all 0.25s ease;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  z-index: 30;
  /* Prevent inheriting any width constraint from the 42px marker parent */
  box-sizing: border-box;
  display: block;
}

.map-viewport .shop-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.92);
}

/* ---- Spacing below map card ---- */
.map-card + .shops-list,
.map-card ~ .shops-list {
  margin-top: 8px;
}

/* Hide old .map-header since we replaced it */
.map-header {
  display: none !important;
}

.map-loading {
  text-align: center;
  color: var(--text-secondary);
}

.loading-pulse {
  width: 80px;
  height: 80px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  animation: pulse 2s infinite;
  border: 3px solid rgba(255, 0, 0, 0.3);
}

.loading-pulse i {
  font-size: 32px;
  color: white;
}

.map-loading p {
  margin: 5px 0;
  font-size: 16px;
  color: white;
}

.map-hint {
  font-size: 14px;
  opacity: 0.7;
  color: #999999;
}

.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.shop-marker {
  position: absolute;
  background: linear-gradient(135deg, var(--primary) 0%, #990000 100%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 0, 0, 0.15);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  animation: markerFloat 3s ease-in-out infinite;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.shop-marker i {
  color: white;
  font-size: 16px;
}

.shop-marker:hover {
  transform: translate(-50%, -50%) scale(1.2) translateY(-4px);
  z-index: 20;
  box-shadow: 0 8px 24px rgba(255, 0, 0, 0.45), 0 0 0 3px rgba(255, 0, 0, 0.25);
}

.shop-marker:hover .shop-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.shop-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  width: max-content;
  min-width: fit-content;
  max-width: 260px;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  border: 1px solid #333333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 30;
  box-sizing: border-box;
  display: block;
}

.shop-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.9);
}

/* ============ SHOPS LIST - BLACK/RED THEME ============ */
.shops-list {
  margin-bottom: 25px;
  display: none;
}

/* --- Show More Shops toggle --- */
.show-more-shops-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  margin-top: 4px;
  margin-bottom: 8px;
  border-radius: 12px;
  border: 1px solid #2a2a2a;
  background: rgba(20, 20, 20, 0.7);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
}

.show-more-shops-btn:hover {
  background: rgba(255, 0, 0, 0.08);
  border-color: rgba(255, 0, 0, 0.3);
  color: var(--primary);
}

.show-more-shops-btn i {
  font-size: 12px;
  transition: transform 0.3s ease;
}

.show-more-shops-btn.expanded i {
  transform: rotate(180deg);
}

/* Hidden cards beyond the first 3 */
.shop-card.shop-card-hidden {
  display: none;
}

.shop-card.shop-card-hidden.shop-card-visible {
  display: block;
}

.shop-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 25px;
  margin-bottom: 15px;
  box-shadow: var(--shadow-lg);
  border: 1px solid #333333;
  transition: all 0.3s ease;
}

.shop-card.featured {
  border: 2px solid var(--primary);
  box-shadow: 0 5px 20px rgba(255, 0, 0, 0.15);
  background: linear-gradient(135deg, #1a1a1a 0%, #330000 100%);
}

.shop-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(255, 0, 0, 0.1);
}

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

.shop-rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rating-stars {
  color: #ffb400;
  font-size: 18px;
}

.rating-text {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

.shop-badge {
  background: linear-gradient(135deg, var(--primary) 0%, #990000 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(255, 0, 0, 0.3);
}

.shop-card-body h4 {
  margin: 0 0 10px 0;
  font-size: 20px;
  color: white;
}

.shop-address {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.shop-address i {
  color: var(--primary);
}

.shop-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.shop-spec {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-size: 14px;
}

.shop-spec i {
  color: var(--primary);
  width: 20px;
}

.shop-actions {
  display: flex;
  gap: 15px;
}

.shop-details-btn, .shop-book-btn {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.shop-details-btn {
  background: transparent;
  border: 2px solid #333333;
  color: white;
}

.shop-details-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.shop-book-btn {
  background: linear-gradient(135deg, var(--primary) 0%, #990000 100%);
  color: white;
  border: none;
}

.shop-book-btn:hover {
  background: linear-gradient(135deg, #ff3333 0%, #990000 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
}

/* ============ COST BREAKDOWN UPDATES - BLACK/RED THEME ============ */
.cost-breakdown {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 25px;
  box-shadow: var(--shadow-lg);
  border: 1px solid #333333;
}

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

.cost-header h3 {
  margin: 0;
  font-size: 18px;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cost-header h3 i {
  color: var(--primary);
}

.cost-currency {
  background: rgba(40, 40, 40, 0.8);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid #333333;
}

.cost-items {
  margin-bottom: 20px;
}

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #333333;
}

.cost-item:last-child {
  border-bottom: none;
}

.cost-item-left {
  display: flex;
  flex-direction: column;
}

.cost-label {
  font-weight: 600;
  color: white;
  margin-bottom: 4px;
}

.cost-note {
  font-size: 12px;
  color: var(--text-secondary);
}

.cost-amount {
  font-weight: 700;
  font-size: 18px;
  color: white;
}

#shipping-cost {
  color: #cccccc;
}

.cost-total {
  background: linear-gradient(135deg, rgba(40, 40, 40, 0.8) 0%, rgba(50, 0, 0, 0.8) 100%);
  border-radius: 12px;
  padding: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  border: 1px solid #333333;
}

.total-left {
  display: flex;
  flex-direction: column;
}

.total-label {
  font-weight: 700;
  font-size: 20px;
  color: white;
  margin-bottom: 4px;
}

.total-note {
  font-size: 13px;
  color: var(--text-secondary);
}

.total-amount {
  font-weight: 800;
  font-size: 32px;
  color: var(--primary);
  text-shadow: 0 2px 10px rgba(255, 0, 0, 0.3);
}

.cost-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 15px;
  background: rgba(255, 100, 0, 0.1);
  border-radius: 12px;
  border-left: 4px solid #ff9900;
}

.cost-disclaimer i {
  color: #ff9900;
  margin-top: 2px;
}

.cost-disclaimer span {
  font-size: 13px;
  color: #ffcc00;
  line-height: 1.5;
}

/* ============ RESPONSIVE DESIGN ============ */
@media (max-width: 768px) {
  .zip-header {
    flex-direction: row;
    text-align: left;
  }

  .zip-icon {
    margin-right: 10px;
    margin-bottom: 0;
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .zip-header-text h3 {
    font-size: 15px;
  }

  .zip-action-buttons {
    flex-direction: column;
    gap: 8px;
  }

  .shop-specs {
    grid-template-columns: 1fr;
  }

  .shop-actions {
    flex-direction: column;
  }

  .cost-total {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .total-amount {
    font-size: 28px;
  }

  .zip-chips {
    justify-content: center;
  }

  .map-container.map-card {
    margin-bottom: 24px;
  }

  .map-viewport {
    height: 340px;
  }

  .map-card-header {
    padding: 10px 16px;
  }

  .map-card-header h3 {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .map-viewport {
    height: 300px;
  }

  .map-card-header {
    padding: 10px 14px;
    flex-wrap: wrap;
    gap: 4px;
  }

  .map-card-header-left {
    gap: 8px;
  }

  .map-card-header h3 {
    font-size: 13px;
    gap: 6px;
  }

  .map-card-header .map-results-count {
    font-size: 11px;
  }

  .map-viewport .shop-marker {
    width: 36px;
    height: 36px;
  }

  .map-viewport .shop-marker i {
    font-size: 14px;
  }

  .map-viewport .shop-marker.recommended {
    width: 44px;
    height: 44px;
  }

  .map-viewport .map-overlay {
    top: 14px;
    left: 14px;
    right: 14px;
    bottom: 14px;
  }
}

/* ===== FULL WIDTH SCREENS FOR SCREEN 3 AND 4 ===== */
#screen-details .app-container,
#screen-upgrade .app-container {
  max-width: 100% !important;
  width: 100% !important;
}

#screen-upgrade .split-screen-container {
  border-radius: 0 !important;
  margin: 0 !important;
  border: none !important;
}

#screen-details .form-container {
  max-width: 600px;
  margin: 0 auto;
  width: 90%;
}

#screen-upgrade .split-option {
  border-radius: 0 !important;
}

#screen-upgrade .split-left {
  border-radius: 0 !important;
}

#screen-upgrade .split-right {
  border-radius: 0 !important;
}

/* ============ OPTION CARD WITH IMAGES ============ */
.option-card-with-image {
  display: flex;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid #333333;
  transition: all 0.3s ease;
  cursor: pointer;
  max-width: 100%;
  box-sizing: border-box;
}

.option-card-with-image:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(255, 0, 0, 0.1);
}

.option-image-container {
  width: 150px;
  min-width: 150px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.option-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.option-card-with-image:hover .option-image {
  transform: scale(1.05);
}

.option-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.option-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 10px;
  flex-wrap: wrap;
}

.option-header h4 {
  margin: 0;
  font-size: 18px;
  color: var(--text-primary);
  flex: 1;
  min-width: 200px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.option-price-tag {
  background: var(--gradient-primary);
  color: white;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 16px;
  margin-left: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

.option-details {
  display: flex;
  gap: 15px;
  margin-bottom: 12px;
  font-size: 14px;
  flex-wrap: wrap;
}

.option-brand, .option-category {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}

.option-brand i, .option-category i {
  color: var(--primary);
}

/* Fitment warning tag shown on every upgrade card */
.fitment-verify-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text-secondary);
  width: fit-content;
}

.fitment-verify-tag i {
  color: var(--primary);
  opacity: 0.9;
}

.option-compatibility {
  background: rgba(0, 255, 0, 0.1);
  color: var(--success);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  word-break: break-word;
}

.option-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  flex-wrap: wrap;
  gap: 10px;
}

/* ===== ENHANCED CHECKBOX DESIGN (REPLACING OLD ONE) ===== */
.checkbox-container {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border: 2px solid #333333;
  transition: all 0.3s ease;
  min-width: 200px;
  position: relative;
  overflow: hidden;
}

/* ========== AI DISCLAIMER MODAL ========== */
.ai-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  padding: 18px;
}

.ai-modal {
  width: min(560px, 92vw);
  max-height: 82vh;
  overflow: auto;
  background: rgba(15, 16, 18, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  padding: 18px 18px 16px 18px;
  position: relative;
  color: #fff;
}

.ai-modal h3 {
  margin: 6px 40px 12px 0;
  font-size: 18px;
  font-weight: 700;
}

.ai-modal-body {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.ai-modal-body ul {
  margin: 10px 0 0 18px;
  padding: 0;
}

.ai-modal-body li {
  margin: 8px 0;
}

.ai-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ai-modal-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.ai-modal-ack {
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  cursor: pointer;
}

/* lock background while modal is open */
body.ai-modal-open {
  overflow: hidden;
}

.checkbox-container:hover {
  background: rgba(255, 0, 0, 0.1);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 0, 0, 0.2);
}

.checkbox-container input {
  display: none;
}

.checkmark {
  width: 36px;
  height: 36px;
  border: 3px solid #444444;
  border-radius: 9px;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3);
}

.checkbox-container:hover .checkmark {
  border-color: var(--primary);
  transform: scale(1.1);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 0, 0, 0.4);
}

.checkbox-container input:checked + .checkmark {
  background: var(--gradient-primary);
  border-color: var(--primary);
  animation: checkboxPulse 0.5s ease;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(255, 0, 0, 0.5);
}

.checkbox-container input:checked + .checkmark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -60%) rotate(45deg);
}

@keyframes checkboxPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes checkmarkAppear {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.checkbox-label {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  flex: 1;
  transition: all 0.3s ease;
}

.checkbox-container input:checked ~ .checkbox-label {
  color: var(--primary);
  font-weight: 700;
  text-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
}

.source-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.source-link:hover {
  background: var(--primary);
  color: white;
}

/* ===== EXTERIOR CUSTOMIZER (Step 4) ===== */
.customize-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.2px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 0, 0, 0.65);
  border-radius: var(--radius-sm);
  background: rgba(255, 0, 0, 0.14);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.10);
  transition: all 0.25s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.customize-link i {
  color: #fff;
}

.customize-link:hover {
  background: rgba(255, 0, 0, 0.20);
  border-color: rgba(255, 0, 0, 0.95);
  box-shadow: 0 0 0 4px rgba(255, 0, 0, 0.14);
  transform: translateY(-1px);
}

.customization-summary {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(255, 0, 0, 0.35);
  background: rgba(255, 0, 0, 0.06);
  color: var(--text-secondary);
  font-size: 13px;
}

.customization-summary i {
  color: var(--primary);
}

.customizer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
}

.customizer-modal {
  width: 100%;
  max-width: 560px;
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.96), rgba(10, 10, 10, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: customizerSlideUp 0.25s ease;
}

@keyframes customizerSlideUp {
  from { transform: translateY(18px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.customizer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.customizer-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.customizer-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 0, 0, 0.12);
  border: 1px solid rgba(255, 0, 0, 0.35);
}

.customizer-icon i {
  color: var(--primary);
  font-size: 18px;
}

.customizer-titles h3 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 2px;
}

.customizer-titles p {
  font-size: 13px;
  color: var(--text-muted);
}

.customizer-close {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.customizer-close:hover {
  border-color: rgba(255, 0, 0, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.15);
}

.customizer-body {
  padding: 14px 16px 6px;
  max-height: 60vh;
  overflow: auto;
}

.customizer-preview-row {
  margin-bottom: 10px;
}

.customizer-preview-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-full);
  background: rgba(0, 204, 0, 0.12);
  border: 1px solid rgba(0, 204, 0, 0.35);
  color: var(--text-secondary);
  font-size: 13px;
}

.customizer-preview-pill i {
  color: var(--success);
}

.customizer-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.customizer-field {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-lg);
  padding: 12px;
}

.customizer-field-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.customizer-field-label strong {
  font-size: 14px;
}

.customizer-field-label span {
  font-size: 12px;
  color: var(--text-muted);
}

.customizer-select {
  width: 100%;
  padding: 12px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
  font-weight: 600;
  outline: none;
}

.customizer-select:focus {
  border-color: rgba(255, 0, 0, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.18);
}

.customizer-swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: all 0.2s ease;
}

.swatch:hover {
  border-color: rgba(255, 0, 0, 0.55);
  transform: translateY(-1px);
}

.swatch.selected {
  border-color: rgba(255, 0, 0, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.18);
}

.swatch-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.swatch-name {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 700;
}

.customizer-color-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.customizer-color-input {
  width: 44px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  padding: 0;
}

.customizer-color-hex {
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-primary);
  font-weight: 700;
}

.customizer-footer {
  display: flex;
  gap: 12px;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.customizer-footer .secondary-btn,
.customizer-footer .primary-btn {
  flex: 1;
}

.power-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--gradient-primary);
  color: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}

/* Visual feedback for selected upgrades */
.option-card-with-image.selected {
  border-color: var(--primary) !important;
  box-shadow: 0 10px 30px rgba(255, 0, 0, 0.2) !important;
  transform: translateY(-5px);
  transition: all 0.3s ease;
}

.option-card-with-image.selected .option-header h4 {
  color: var(--primary);
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
}

/* Add selection indicator */
.option-card-with-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: transparent;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transition: all 0.3s ease;
  z-index: 2;
}

.option-card-with-image.selected::before {
  background: var(--gradient-primary);
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
}

/* Update the continue button state for screen 5 */
#screen-options .primary-btn {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

#screen-options .primary-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

#screen-options .primary-btn:not(:disabled)::after {
  animation: buttonShine 2s infinite;
}

@keyframes buttonShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Selection count animation */
@keyframes selectionBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

#screen-options .step-text span {
  animation: selectionBounce 2s ease;
}

/* Responsive adjustments for checkboxes */
@media (max-width: 768px) {
  .checkbox-container {
    min-width: 160px;
    padding: 10px 14px;
  }

  .checkmark {
    width: 32px;
    height: 32px;
  }

  .checkbox-container input:checked + .checkmark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -60%) rotate(45deg);
}

  .checkbox-label {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .checkbox-container {
    min-width: 140px;
    padding: 8px 12px;
    gap: 10px;
  }

  .checkmark {
    width: 28px;
    height: 28px;
  }

  .checkbox-container input:checked + .checkmark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -60%) rotate(45deg);
}

  .checkbox-label {
    font-size: 14px;
  }
}

.source-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.source-link:hover {
  background: var(--primary);
  color: white;
}

.power-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--gradient-primary);
  color: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}

/* ============ UPGRADE MODAL - FIXED FOR PRODUCT CARDS ============ */
.upgrade-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 20px;
  overflow-y: auto;
  animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(10px);
  }
}

.upgrade-modal {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-xl);
  position: relative;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    transform: translateY(30px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 24px;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.modal-close:hover {
  background: var(--primary);
  transform: scale(1.1);
  border-color: var(--primary);
}

.modal-header {
  padding: 30px 25px 20px;
  border-bottom: 1px solid #333333;
  position: relative;
}

.modal-header h3 {
  margin: 0 0 15px 0;
  font-size: 26px;
  color: var(--text-primary);
  line-height: 1.2;
  font-weight: 700;
}

.modal-price {
  font-size: 32px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 5px;
}

.modal-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.4;
}

.modal-content {
  padding: 25px;
}

.modal-section {
  margin-bottom: 25px;
}

.modal-section h4 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.modal-section h4 i {
  color: var(--primary);
  font-size: 16px;
}

/* ============ MODAL FOOTER UPDATES ============ */
.modal-footer {
  padding: 20px;
  border-top: 1px solid #333333;
  display: flex;
  gap: 12px;
  background: rgba(0, 0, 0, 0.3);
}

.modal-footer .btn-secondary,
.modal-footer .btn-primary {
  flex: 1;
  padding: 16px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  min-height: 52px;
  text-align: center;
}

.modal-footer .btn-secondary {
  background: rgba(40, 40, 40, 0.8);
  border: 2px solid #333333;
  color: var(--text-primary);
}

.modal-footer .btn-primary {
  background: var(--gradient-primary);
  color: white;
  border: none;
}

.modal-footer .btn-primary.selected {
  background: linear-gradient(135deg, #00cc00 0%, #008800 100%);
}

.modal-footer .btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(60, 60, 60, 0.8);
}

.modal-footer .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
}

.modal-footer .btn-primary.selected:hover {
  box-shadow: 0 5px 15px rgba(0, 204, 0, 0.3);
}

/* Update modal content spacing */
.modal-content {
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.modal-section {
  margin-bottom: 20px;
}

.modal-section:last-child {
  margin-bottom: 0;
}

.modal-section h4 {
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-section h4 i {
  color: var(--primary);
  font-size: 14px;
}

/* Purchase options styling */
.purchase-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.purchase-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border: 1px solid #333333;
  transition: all 0.3s ease;
}

.purchase-option:hover {
  border-color: var(--primary);
  background: rgba(255, 0, 0, 0.05);
}

.purchase-option i {
  font-size: 20px;
  color: var(--primary);
  width: 24px;
  flex-shrink: 0;
}

.purchase-option div {
  flex: 1;
  min-width: 0;
}

.purchase-option strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
}

.purchase-option small {
  color: var(--text-muted);
  font-size: 12px;
  display: block;
  line-height: 1.4;
}

/* Small button for purchase options */
.btn-small {
  background: rgba(255, 255, 255, 0.05);
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.btn-small:hover {
  background: var(--primary);
  color: white;
}

/* Performance grid in modal */
.performance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 15px;
}

.perf-item {
  background: rgba(255, 0, 0, 0.1);
  padding: 15px;
  border-radius: var(--radius-md);
  text-align: center;
  border: 1px solid rgba(255, 0, 0, 0.2);
}

.perf-item span {
  display: block;
  color: var(--text-secondary);
  font-size: 11px;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.perf-item strong {
  display: block;
  color: var(--primary);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

/* Detail grid in modal */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.detail-item {
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  border: 1px solid #333333;
}

.detail-item strong {
  color: var(--text-secondary);
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.detail-item span {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

/* Modal subtitle */
.modal-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 5px;
}

/* Responsive updates for modal */
@media (max-width: 768px) {
  .modal-footer {
    flex-direction: column;
  }

  .modal-footer .btn-secondary,
  .modal-footer .btn-primary {
    width: 100%;
  }

  .performance-grid,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .purchase-option {
    flex-wrap: wrap;
  }

  .btn-small {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .modal-section {
    margin-bottom: 15px;
  }

  .modal-section h4 {
    font-size: 15px;
  }

  .perf-item {
    padding: 12px;
  }

  .perf-item strong {
    font-size: 18px;
  }

  .detail-item {
    padding: 10px;
  }

  .modal-footer .btn-secondary,
  .modal-footer .btn-primary {
    padding: 14px;
    font-size: 13px;
    min-height: 48px;
  }
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 15px;
}

.detail-item {
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  border: 1px solid #333333;
}

.detail-item strong {
  color: var(--text-secondary);
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.detail-item span {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.performance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.perf-item {
  background: rgba(255, 0, 0, 0.1);
  padding: 18px 12px;
  border-radius: var(--radius-md);
  text-align: center;
  border: 1px solid rgba(255, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.perf-item span {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.perf-item strong {
  color: var(--primary);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.purchase-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.purchase-option {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  border: 1px solid #333333;
  transition: all 0.3s ease;
}

.purchase-option:hover {
  border-color: var(--primary);
  background: rgba(255, 0, 0, 0.05);
}

.purchase-option i {
  font-size: 22px;
  color: var(--primary);
  width: 30px;
  flex-shrink: 0;
}

.purchase-option div {
  flex: 1;
  min-width: 0;
}

.purchase-option strong {
  display: block;
  color: var(--text-primary);
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 600;
}

.purchase-option small {
  color: var(--text-muted);
  font-size: 13px;
  display: block;
  line-height: 1.4;
}

.btn-small {
  background: var(--gradient-primary);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s ease;
  flex-shrink: 0;
  white-space: nowrap;
}

.btn-small:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.modal-footer {
  padding: 25px;
  border-top: 1px solid #333333;
  display: flex;
  gap: 15px;
  background: rgba(0, 0, 0, 0.3);
}

.btn-secondary, .btn-primary {
  flex: 1;
  padding: 18px;
  border-radius: var(--radius-lg);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  min-height: 56px;
}

.btn-secondary {
  background: rgba(40, 40, 40, 0.8);
  border: 2px solid #333333;
  color: var(--text-primary);
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
  border: none;
}

.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(60, 60, 60, 0.8);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
}

/* ============ RESPONSIVE MODAL FIXES ============ */
@media (max-width: 768px) {
  .upgrade-modal {
    max-width: 90%;
    max-height: 85vh;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .modal-header {
    padding: 25px 20px 15px;
  }

  .modal-header h3 {
    font-size: 22px;
  }

  .modal-price {
    font-size: 28px;
  }

  .modal-content {
    padding: 20px;
  }

  .modal-footer {
    padding: 20px;
    flex-wrap: wrap;
  }

  .btn-secondary, .btn-primary {
    min-width: 100%;
    flex: 1 0 100%;
  }

  .purchase-option {
    flex-wrap: wrap;
  }

  .btn-small {
    margin-top: 10px;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .upgrade-modal {
    max-width: 95%;
    max-height: 90vh;
    margin: 10px;
  }

  .modal-header h3 {
    font-size: 20px;
  }

  .modal-price {
    font-size: 24px;
  }

  .performance-grid {
    grid-template-columns: 1fr;
  }

  .modal-section h4 {
    font-size: 16px;
  }

  .modal-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .btn-secondary, .btn-primary {
    padding: 16px;
    font-size: 15px;
    min-height: 52px;
  }

  .modal-content {
    padding: 15px;
  }
}

@media (max-width: 360px) {
  .upgrade-modal {
    max-width: 100%;
    margin: 5px;
    border-radius: var(--radius-lg);
  }

  .modal-header {
    padding: 20px 15px 10px;
  }

  .modal-content {
    padding: 10px 15px;
  }

  .modal-footer {
    padding: 15px;
  }

  .modal-header h3 {
    font-size: 18px;
  }

  .modal-price {
    font-size: 22px;
  }
}

/* Fix for modal scrolling on mobile */
.upgrade-modal {
  -webkit-overflow-scrolling: touch;
}

/* ============ NOTIFICATION ============ */
.notification {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: var(--gradient-primary);
  color: white;
  padding: 15px 25px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10001;
  opacity: 0;
  transition: all 0.3s ease;
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow-xl);
  text-align: center;
  justify-content: center;
}

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

.notification i {
  font-size: 20px;
  flex-shrink: 0;
}

.notification span {
  flex: 1;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .notification {
    top: 20px;
    padding: 12px 18px;
    width: 85%;
  }

  .notification i {
    font-size: 18px;
  }

  .notification span {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .notification {
    padding: 10px 15px;
    width: 80%;
  }

  .notification span {
    font-size: 12px;
  }
}

.notification i {
  font-size: 20px;
}

/* ===== FIX FOR SCREEN-OPTIONS CONTAINER ===== */
#screen-options .scrollable-content {
  padding: 0 15px !important;
  overflow-x: hidden;
}

#screen-options .content-wrapper {
  padding: 20px 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* ===== FIX FOR SCROLLING ===== */
.scrollable-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ===== UTILITY CLASSES FOR TEXT OVERFLOW ===== */
.text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-break {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ===== IMPROVED RESPONSIVE DESIGN FOR PRODUCT CARDS ===== */
@media (max-width: 768px) {
  .option-card-with-image {
    flex-direction: column;
  }

  .option-image-container {
    width: 100%;
    max-width: 100%;
    height: 200px;
  }

  .option-content {
    padding: 15px;
  }

  .option-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .option-header h4 {
    min-width: 100%;
    font-size: 16px;
  }

  .option-price-tag {
    align-self: flex-start;
    margin-left: 0;
  }

  .option-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .checkbox-container {
    justify-content: center;
    margin-bottom: 10px;
  }

  .source-link {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .option-image-container {
    height: 180px;
  }

  .option-header h4 {
    font-size: 15px;
  }

  .option-price-tag {
    font-size: 14px;
    padding: 5px 10px;
  }

  .option-details,
  .option-compatibility,
  .delivery-info {
    font-size: 13px;
  }

  .option-details {
    gap: 10px;
  }

  #options-list {
    padding: 0 10px;
  }

  .option-card-with-image {
    margin-bottom: 15px;
  }
}

/* ===== FIX FOR PRODUCT CARD OVERFLOW ===== */
#screen-options .app-container {
  max-width: 100% !important;
  width: 100% !important;
}

#screen-options .scrollable-content {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 20px;
}

#screen-options #options-list {
  max-width: 100%;
  overflow: hidden;
}

#screen-options .option-card-with-image {
  max-width: 100%;
  box-sizing: border-box;
}

#screen-options .option-content {
  min-width: 0;
}

#screen-options .option-header h4 {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

#screen-options .option-details,
#screen-options .option-compatibility,
#screen-options .delivery-info {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

@media (max-width: 480px) {
  #screen-options .option-card-with-image {
    flex-direction: column;
  }

  #screen-options .option-image-container {
    width: 100%;
    max-width: 100%;
    height: 200px;
  }

  #screen-options .option-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Add shake animation CSS */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.shake-animation {
  animation: shake 0.3s ease-in-out;
}

/* Ensure modal doesn't overflow viewport on very small screens */
@media (max-height: 600px) {
  .upgrade-modal {
    max-height: 90vh;
  }

  .modal-content {
    padding: 15px;
  }

  .modal-section {
    margin-bottom: 15px;
  }
}

/* ============ ENHANCED CAR SPECS DISPLAY ============ */
.car-specs-display {
  background: linear-gradient(145deg, #1a1a1a 0%, #0a0a0a 100%);
  border-radius: 20px;
  overflow: hidden;
  margin: 20px 0;
  box-shadow: 0 10px 30px rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.2);
  animation: specsSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes specsSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.car-specs-header {
  display: flex;
  align-items: center;
  padding: 20px 25px;
  background: linear-gradient(90deg, rgba(255, 0, 0, 0.15) 0%, rgba(255, 0, 0, 0.05) 100%);
  border-bottom: 1px solid rgba(255, 0, 0, 0.1);
  /* Remove gap since we'll use margins instead */
}

.car-specs-icon {
  width: 50px;
  height: 50px;
  background: var(--gradient-primary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 15px; /* Space between icon and text */
}

.car-specs-icon i {
  font-size: 24px;
  color: white;
}

.car-specs-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 50px; /* Match icon height */
}

.car-specs-title h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #ffffff 0%, #ffcccc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
  margin-bottom: 4px;
}

.car-specs-title p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  opacity: 0.9;
  line-height: 1.2;
}

.car-specs-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 255, 0, 0.1);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(0, 255, 0, 0.3);
  margin-left: 15px; /* Space between text and badge */
  flex-shrink: 0;
}

.car-specs-badge i {
  color: #00ff00;
  font-size: 14px;
}

.car-specs-badge span {
  color: #00ff00;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.car-specs-body {
  padding: 25px;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}

.spec-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 18px 15px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.spec-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.spec-item:hover {
  background: rgba(255, 0, 0, 0.05);
  border-color: rgba(255, 0, 0, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 0, 0, 0.1);
}

.spec-item:hover::before {
  opacity: 1;
}

.spec-item strong {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.spec-item span {
  display: block;
  font-size: 16px;
  color: white;
  font-weight: 600;
  line-height: 1.3;
}

.specs-performance {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(255, 0, 0, 0.1);
}

.performance-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.performance-item:hover {
  background: rgba(255, 0, 0, 0.08);
  transform: translateY(-2px);
}

.performance-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 0, 0, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.performance-icon i {
  color: var(--primary);
  font-size: 18px;
}

.performance-info {
  flex: 1;
}

.performance-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  font-weight: 500;
}

.performance-value {
  display: block;
  font-size: 18px;
  color: white;
  font-weight: 700;
}

.car-specs-footer {
  padding: 15px 25px;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 0, 0, 0.1);
}

.specs-note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 13px;
}

.specs-note i {
  color: var(--primary);
  font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .specs-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .specs-performance {
    flex-direction: column;
  }

  .car-specs-header {
    flex-wrap: wrap;
    padding: 15px;
  }

  .car-specs-body {
    padding: 20px 15px;
  }

  .car-specs-title h4 {
    font-size: 18px;
  }

  .car-specs-title p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .car-specs-badge {
    margin-top: 10px;
    width: 90%;
    justify-content: center;
  }

  .car-specs-header {
    flex-direction: row;
    align-items: flex-start;
  }

  .performance-item {
    padding: 12px;
  }

  .performance-value {
    font-size: 16px;
  }
}
/* ============ AI IMAGE GENERATION SCREEN ============ */

/* AI Generation Header */
.ai-generation-header {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
  border-radius: 20px;
  margin-bottom: 30px;
  border: 1px solid rgba(255, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.ai-header-icon {
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  animation: pulse 2s infinite;
}

.ai-header-icon i {
  font-size: 36px;
  color: white;
}

.ai-generation-header h2 {
  font-size: 28px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #ffffff 0%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ai-subtitle {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 20px;
}

.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 0, 0, 0.15);
  border: 1px solid rgba(255, 0, 0, 0.3);
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}

.ai-badge i {
  font-size: 16px;
}

/* Image Sections */
.image-section {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 25px;
  margin-bottom: 25px;
  border: 1px solid #333333;
  box-shadow: var(--shadow-lg);
}

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

.section-header h3 {
  font-size: 20px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-header h3 i {
  color: var(--primary);
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

/* Car Image Container */
.car-image-container {
  width: 100%;
  height: 250px;
  background: linear-gradient(135deg, #000000 0%, #1a0000 100%);
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  border: 2px solid #333333;
}

/*
  Screen 6 (AI Image Generation / Design Studio):
  The "Current Design" container must fully show a 2x2 photo grid.
  IMPORTANT: action button lives OUTSIDE the container (below it).
*/
#screen-ai-generate .car-image-container {
  height: auto;
  overflow: hidden; /* keep rounded corners clean */
  padding: 10px;
}

#screen-ai-generate #original-car-image {
  width: 100%;
  height: auto;
}

/* 2x2 AI photo selector grid (Design Studio) */
.ai-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.ai-photo-tile {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.18);
  aspect-ratio: 16 / 9;
  min-height: 92px;
}

.ai-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ai-photo-selector-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* When selector row is outside the image container */
.ai-photo-selector-row.outside {
  margin-top: 12px;
}

.ai-photo-selector-hint {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 420px) {
  .ai-photo-tile {
    min-height: 84px;
  }
}


.car-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.car-image-placeholder i {
  font-size: 60px;
  margin-bottom: 20px;
  color: var(--primary);
  opacity: 0.5;
}

.car-image-placeholder p {
  font-size: 18px;
  font-weight: 500;
}

/* AI Controls */
.ai-controls {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 25px;
  border: 1px solid #333333;
}

.ai-style-selector {
  margin-bottom: 20px;
}

.ai-style-selector h4 {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--text-primary);
}

.style-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.style-option {
  flex: 1;
  min-width: 120px;
  padding: 15px;
  background: rgba(40, 40, 40, 0.8);
  border: 2px solid #333333;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.style-option i {
  font-size: 24px;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

.style-option span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

.style-option.active {
  background: rgba(255, 0, 0, 0.2);
  border-color: var(--primary);
}

.style-option.active i,
.style-option.active span {
  color: var(--primary);
}

.style-option:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05);
  border-color: #444444;
}

.generate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 20px;
  background: linear-gradient(135deg, var(--primary) 0%, #990000 100%);
  border: none;
  border-radius: 15px;
  color: white;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.generate-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3);
  background: linear-gradient(135deg, #ff3333 0%, #990000 100%);
}

.generate-btn:active {
  transform: translateY(-1px);
}

/* AI Images Grid */
.ai-images-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 25px;
}

@media (max-width: 768px) {
  .ai-images-grid {
    grid-template-columns: 1fr;
  }
}

.ai-image-placeholder {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  border-radius: 15px;
  border: 2px solid #333333;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

.ai-image-placeholder:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(255, 0, 0, 0.2);
}

.ai-image-placeholder.loading {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0000 100%);
}

.ai-image-placeholder.loading .loading-spinner {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.ai-image-placeholder.loading i {
  font-size: 36px;
  color: var(--primary);
  animation: spin 1s linear infinite;
}

.ai-image-placeholder.loading p {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ai-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
}

.ai-image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  padding: 12px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  border-radius: 0 0 13px 13px;
}

/* Design Details */
.design-details {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #333333;
}

.design-details h4 {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.design-details h4 i {
  color: var(--primary);
}

.upgrade-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.upgrade-tag {
  background: rgba(255, 0, 0, 0.15);
  color: var(--primary);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.upgrade-tag i {
  font-size: 12px;
}

.design-note {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
}

.design-note i {
  color: var(--primary);
  margin-top: 3px;
}

/* Compare Section */
.compare-section {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 25px;
  border: 1px solid #333333;
}

.compare-section h3 {
  font-size: 20px;
  margin-bottom: 20px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.compare-section h3 i {
  color: var(--primary);
}

.compare-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.small-btn {
  padding: 12px 20px;
  font-size: 14px;
  min-height: auto;
}

/* Selection indicator for images */
.ai-image-placeholder.selected {
  border: 3px solid var(--primary);
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.4);
}

.selected-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--gradient-primary);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  animation: pulse 2s infinite;
}

/* Mock images styling - remove when real images are available */
.ai-image-placeholder.mock {
  background: linear-gradient(135deg, #000000 0%, #330000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-image-placeholder.mock::before {
  content: "AI";
  color: rgba(255, 255, 255, 0.25);
  font-size: 64px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.ai-image-placeholder.mock::after {
  content: 'AI Design Preview';
  position: absolute;
  bottom: 20px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .ai-generation-header {
    padding: 20px 15px;
  }

  .ai-header-icon {
    width: 60px;
    height: 60px;
  }

  .ai-header-icon i {
    font-size: 28px;
  }

  .ai-generation-header h2 {
    font-size: 24px;
  }

  .image-section {
    padding: 20px 15px;
  }

  .style-option {
    min-width: calc(50% - 10px);
  }

  .ai-images-grid {
    gap: 15px;
  }

  .ai-image-placeholder {
    min-height: 180px;
  }
}

/* Animation for generated images */
@keyframes imageFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.ai-image-placeholder:not(.loading) {
  animation: imageFadeIn 0.5s ease;
}
/* ============ DESIGN STUDIO SIMPLIFIED ============ */

.design-studio-header {
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
}

.design-icon {
  width: 60px;
  height: 60px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

.design-icon i {
  font-size: 28px;
  color: white;
}

.design-studio-header h2 {
  font-size: 22px;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.design-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
}

/* Simplified design controls */
.design-controls {
  margin-bottom: 20px;
}

/* AI Preview Container */
.ai-preview-container {
  background: linear-gradient(135deg, #000000 0%, #1a0000 100%);
  border-radius: 15px;
  border: 2px solid #333333;
  margin-bottom: 20px;
  overflow: hidden;
}

.ai-preview-placeholder.loading {
  padding: 40px;
  text-align: center;
}

.ai-preview-placeholder.loading .loading-spinner {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
}

.ai-preview-placeholder.loading i {
  font-size: 36px;
  color: var(--primary);
  animation: spin 1s linear infinite;
}

.ai-preview-placeholder.loading p {
  color: var(--text-secondary);
  font-size: 16px;
}

.ai-preview-image {
  height: 300px;
  background: linear-gradient(135deg, #000000 0%, #330000 100%);
  position: relative;
  overflow: hidden;
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  padding: 20px;
}

.preview-badge {
  background: rgba(255, 0, 0, 0.2);
  border: 1px solid rgba(255, 0, 0, 0.4);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.preview-description {
  font-size: 16px;
  opacity: 0.8;
  max-width: 300px;
}

.preview-actions {
  display: flex;
  gap: 10px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.5);
  border-top: 1px solid #333333;
}

/* Selected Upgrades */
.selected-upgrades {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #333333;
}

.selected-upgrades h4 {
  font-size: 16px;
  margin-bottom: 15px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.selected-upgrades h4 i {
  color: var(--primary);
}

/* Action Section */
.action-section {
  background: var(--bg-card);
  border-radius: 15px;
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #333333;
}

.action-options {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.action-note {
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.action-note i {
  color: var(--primary);
}

/* Small button adjustments */
.small-btn {
  padding: 10px 16px;
  font-size: 14px;
  min-height: 44px;
  flex: 1;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .design-studio-header {
    padding: 15px;
  }

  .design-icon {
    width: 50px;
    height: 50px;
  }

  .design-icon i {
    font-size: 24px;
  }

  .design-studio-header h2 {
    font-size: 20px;
  }

  .ai-preview-image {
    height: 250px;
  }

  .preview-title {
    font-size: 20px;
  }

  .action-options {
    flex-direction: column;
  }

  .small-btn {
    width: 100%;
  }
}
/* ============ DESIGN STUDIO COMPACT HEADER ============ */
.design-studio-header-compact {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: rgba(255, 0, 0, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 0, 0, 0.1);
  max-height: 70px;
  overflow: hidden;
}

.compact-icon {
  width: 48px;
  height: 48px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.compact-icon i {
  font-size: 22px;
  color: white;
}

.compact-text {
  flex: 1;
  min-width: 0;
}

.design-studio-header-compact h2 {
  font-size: 18px;
  margin-bottom: 4px;
  color: var(--text-primary);
  line-height: 1.2;
}

.design-subtitle {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.2;
}

/* Responsive adjustments for compact header */
@media (max-width: 480px) {
  .design-studio-header-compact {
    padding: 10px 12px;
    max-height: 65px;
  }

  .compact-icon {
    width: 42px;
    height: 42px;
    margin-right: 12px;
  }

  .compact-icon i {
    font-size: 20px;
  }

  .design-studio-header-compact h2 {
    font-size: 16px;
  }

  .design-subtitle {
    font-size: 12px;
  }
}
/* ===== MINIMAL DAY/NIGHT TOGGLE ===== */
.minimal-daynight-toggle {
  position: absolute;
  top: 25px;
  right: 25px;
  z-index: 100;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* ===== MINIMAL SETTINGS BUTTON (HOME) ===== */
.minimal-settings-toggle {
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 100;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.minimal-settings-toggle .toggle-indicator {
  /* Match day/night toggle footprint */
  width: 52px;
  height: 52px;
  background: transparent !important;
}

.settings-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.settings-icon i {
  color: rgba(255, 255, 255, 0.9);
  font-size: 22px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  transition: all 0.3s ease;
}

.minimal-settings-toggle:hover .toggle-indicator {
  transform: scale(1.05);
  box-shadow:
    0 4px 15px rgba(255, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: var(--primary);
}

.minimal-settings-toggle:hover .settings-icon i {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(255, 0, 0, 0.35);
}

.minimal-settings-toggle:active .toggle-indicator {
  animation: toggleBounce 0.3s ease;
}

/* Only show on home page */
#screen-home .minimal-settings-toggle {
  display: block;
}

.screen:not(#screen-home) .minimal-settings-toggle {
  display: none !important;
}

@media (max-width: 768px) {
  .minimal-settings-toggle {
    top: 20px;
    left: 20px;
    width: 46px;
    height: 46px;
  }
  .minimal-settings-toggle .toggle-indicator {
    width: 46px;
    height: 46px;
  }
  .settings-icon i {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .minimal-settings-toggle {
    top: 15px;
    left: 15px;
    width: 40px;
    height: 40px;
  }
  .minimal-settings-toggle .toggle-indicator {
    width: 40px;
    height: 40px;
    border-width: 1px;
  }
  .settings-icon i {
    font-size: 18px;
  }
}

/* ===== SETTINGS MODAL ===== */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.settings-overlay.active {
  display: flex;
}

.settings-modal {
  width: min(980px, 100%);
  max-height: min(82vh, 820px);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.settings-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-title .settings-badge {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: rgba(255, 0, 0, 0.12);
  border: 1px solid rgba(255, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(255, 0, 0, 0.08);
}

.settings-title .settings-badge i {
  color: rgba(255, 255, 255, 0.9);
}

.settings-title h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.2px;
}

.settings-title p {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.settings-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-full);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.settings-close i {
  color: rgba(255, 255, 255, 0.85);
}

.settings-close:hover {
  transform: scale(1.03);
  border-color: rgba(255, 0, 0, 0.35);
  box-shadow: 0 10px 22px rgba(255, 0, 0, 0.12);
}

.settings-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 0;
}

.settings-nav {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(0, 0, 0, 0.08);
}

.settings-nav button {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
}

.settings-nav button i {
  width: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
}

.settings-nav button.active {
  background: rgba(255, 0, 0, 0.12);
  border-color: rgba(255, 0, 0, 0.25);
  box-shadow: 0 10px 20px rgba(255, 0, 0, 0.08);
}

.settings-panel {
  padding: 14px 16px 18px;
  overflow: auto;
}

.settings-section {
  display: none;
}

.settings-section.active {
  display: block;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-field {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 12px;
}

.settings-field label {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 8px;
}

.settings-field select,
.settings-field input[type="text"],
.settings-field input[type="range"],
.settings-field textarea {
  width: 100%;
}

.settings-field select,
.settings-field input[type="text"],
.settings-field textarea {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 10px 10px;
  outline: none;
}

.settings-field textarea {
  min-height: 90px;
  resize: vertical;
}

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

.settings-pill {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}

.settings-pill.active {
  background: rgba(255, 0, 0, 0.12);
  border-color: rgba(255, 0, 0, 0.25);
}

.settings-helper {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.35;
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.settings-btn {
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
}

.settings-btn.primary {
  background: rgba(255, 0, 0, 0.14);
  border-color: rgba(255, 0, 0, 0.28);
}

/* Danger button (used for Garage delete in detail view) */
.settings-btn.danger {
  background: rgba(220, 38, 38, 0.14);
  border-color: rgba(220, 38, 38, 0.55);
  color: rgba(255, 255, 255, 0.92);
}

.settings-btn.danger:hover {
  background: rgba(220, 38, 38, 0.22);
  border-color: rgba(239, 68, 68, 0.9);
}

.legal-doc {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}

.legal-doc h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.legal-doc p,
.legal-doc li {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  line-height: 1.45;
}

.legal-doc ul {
  margin: 8px 0 0 18px;
}

@media (max-width: 820px) {
  .settings-body {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    flex-direction: row;
    overflow: auto;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .settings-nav button {
    width: auto;
    white-space: nowrap;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

.toggle-indicator {
  position: relative;
  width: 52px;
  height: 52px;
  background: var(--bg-card);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border-color);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Sun/Moon icons */
.sun-icon, .moon-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sun-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.sun-icon i {
  color: #FFD700;
  font-size: 18px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  transition: all 0.3s ease;
}

.moon-icon {
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
}

.moon-icon i {
  color: #7B9EFF;
  font-size: 16px;
  text-shadow: 0 0 8px rgba(123, 158, 255, 0.4);
  transition: all 0.3s ease;
}

/* Night active state */
.night-active .sun-icon {
  opacity: 0;
  transform: scale(0.5) rotate(90deg);
}

.night-active .moon-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Day active state */
.day-active .toggle-indicator {
  background: linear-gradient(135deg, 
    rgba(255, 0, 0, 0.1) 0%, 
    rgba(255, 50, 50, 0.05) 100%);
  border-color: rgba(255, 0, 0, 0.4);
  box-shadow: 
    0 2px 10px rgba(255, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.night-active .toggle-indicator {
  background: linear-gradient(135deg, 
    rgba(0, 0, 0, 0.2) 0%, 
    rgba(20, 20, 20, 0.1) 100%);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Hover effects */
.minimal-daynight-toggle:hover .toggle-indicator {
  transform: scale(1.05);
  box-shadow: 
    0 4px 15px rgba(255, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color: var(--primary);
}

.minimal-daynight-toggle:hover .sun-icon i {
  color: #FFC107;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.minimal-daynight-toggle:hover .moon-icon i {
  color: #9BB9FF;
  text-shadow: 0 0 12px rgba(123, 158, 255, 0.6);
}

/* Click animation */
.toggle-click .toggle-indicator {
  animation: toggleBounce 0.3s ease;
}

@keyframes toggleBounce {
  0% { transform: scale(1); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* Toggle slider animation */
.toggle-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, 
    rgba(255, 0, 0, 0.1) 0%, 
    transparent 50%,
    rgba(0, 0, 0, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.minimal-daynight-toggle:hover .toggle-slider {
  opacity: 1;
}

/* Only show on home page */
#screen-home .minimal-daynight-toggle {
  display: block;
}

.screen:not(#screen-home) .minimal-daynight-toggle {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .minimal-daynight-toggle {
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }

  .toggle-indicator {
    width: 40px;
    height: 40px;
  }

  .sun-icon i {
    font-size: 16px;
  }

  .moon-icon i {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .minimal-daynight-toggle {
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
  }

  .toggle-indicator {
    width: 36px;
    height: 36px;
    border-width: 1px;
  }

  .sun-icon i {
    font-size: 14px;
  }

  .moon-icon i {
    font-size: 13px;
  }
}
/* ===== UPLOAD PAGE ENHANCEMENTS ===== */

.upload-instructions {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #333333;
}

.upload-instructions h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--text-primary);
  font-size: 20px;
}

.upload-instructions h3 i {
  color: var(--primary);
}

.instruction-text {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Upload Badges */
.upload-badges-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin: 20px 0;
}

@media (min-width: 768px) {
  .upload-badges-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

.upload-badge {
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid #333333;
  border-radius: var(--radius-md);
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* ============ UNIFIED UPLOAD CONTAINER ============ */
.unified-upload-container {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: 25px;
  margin-bottom: 20px;
  border: 1px solid #333333;
  box-shadow: var(--shadow-lg);
}

.upload-main-area {
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  border: 2px dashed #333333;
}

.upload-main-area:hover {
  border-color: var(--primary);
  background: rgba(255, 0, 0, 0.05);
  transform: translateY(-2px);
}

.upload-main-area h3 {
  font-size: 22px;
  margin: 20px 0 10px;
  color: var(--text-primary);
}

.upload-main-area p {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 25px;
  line-height: 1.5;
}

/* ============ MINIMAL ANGLE BADGES (ICON + TEXT ONLY) ============ */
.angle-badges-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
  flex-wrap: nowrap;
  max-width: 100%;
  padding: 0 10px;
}

.angle-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  min-width: 60px;
  max-width: 70px;
  transition: all 0.3s ease;
  position: relative;
}

.angle-badge.uploaded .angle-label {
  color: #00cc00;
  font-weight: 700;
}

.angle-badge:not(.uploaded) .angle-label {
  color: var(--text-secondary);
}

.angle-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
}

.angle-icon .fa-times-circle {
  color: #ff3333;
}

.angle-badge.uploaded .angle-icon .fa-check-circle {
  color: #00cc00;
  animation: badgePop 0.3s ease;
}

.angle-label {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
  transition: all 0.3s ease;
}

/* Hover effect */
.angle-badge:hover .angle-icon {
  transform: scale(1.1);
}

.angle-badge:hover .angle-label {
  color: var(--primary);
}

/* Animation for checkmark */
@keyframes badgePop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Responsive adjustments for badges */
@media (max-width: 480px) {
  .angle-badges-container {
    gap: 15px;
    margin: 15px 0;
    padding: 0 5px;
  }

  .angle-badge {
    min-width: 50px;
    max-width: 55px;
  }

  .angle-icon {
    width: 20px;
    height: 20px;
    font-size: 18px;
  }

  .angle-label {
    font-size: 10px;
    letter-spacing: 0.3px;
  }
}

/* For very small screens, allow wrapping but keep in one row if possible */
@media (max-width: 360px) {
  .angle-badges-container {
    gap: 12px;
    flex-wrap: wrap;
  }

  .angle-badge {
    min-width: 45px;
    max-width: 50px;
  }

  .angle-label {
    font-size: 9px;
  }
}

/* Remove the old badge styles if they exist */
.upload-badges-container,
.upload-badge {
  display: none;
}

.upload-hint {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 15px;
  font-style: italic;
}

/* Hide old upload containers */
.upload-area {
  display: none;
}

.upload-badges-container {
  display: none;
}

.upload-instructions {
  display: none;
}

/* Update uploaded images container */
.uploaded-images-container {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #333333;
}

.upload-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: all 0.3s ease;
}

.upload-badge.uploaded::before {
  background: var(--gradient-primary);
}

.upload-badge.uploaded {
  border-color: rgba(255, 0, 0, 0.3);
  background: rgba(255, 0, 0, 0.05);
}

.badge-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.badge-icon .fa-times-circle {
  color: #ff3333;
}

.badge-icon .fa-check-circle {
  color: #00cc00;
  animation: badgePop 0.3s ease;
}

@keyframes badgePop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.badge-label {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.upload-hint {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 10px;
  font-style: italic;
}

/* Uploaded Images Container */
.uploaded-images-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
  margin: 20px 0;
  min-height: 100px;
}

.uploaded-image-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid #333333;
  transition: all 0.3s ease;
  height: 150px;
}

.uploaded-image-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 5px 15px rgba(255, 0, 0, 0.2);
}

.uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-angle-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.remove-image-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(255, 0, 0, 0.9);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.3s ease;
}

.remove-image-btn:hover {
  background: #ff0000;
  transform: scale(1.1);
}

/* Example Images Section */
.example-images-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 20px;
  border: 1px solid #333333;
}

.example-images-section h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 18px;
}

.example-images-section h4 i {
  color: #ffcc00;
}

.example-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.example-images-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

@media (min-width: 768px) {
  .example-images-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.example-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.example-image-placeholder {
  width: 100%;
  height: 120px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  border: 2px solid #333333;
  position: relative;
  overflow: hidden;
}

.example-image-placeholder i {
  font-size: 40px;
  color: var(--primary);
  opacity: 0.5;
}

/* Responsive adjustments for unified upload */
@media (max-width: 480px) {
  .unified-upload-container {
    padding: 15px;
  }

  .upload-main-area {
    padding: 15px;
  }

  .upload-main-area h3 {
    font-size: 20px;
  }

  .angle-badges-container {
    gap: 10px;
  }

  .angle-badge {
    min-width: 70px;
    padding: 10px 8px;
  }

  .angle-icon {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }

  .angle-label {
    font-size: 11px;
  }
}

/* Different background colors for example angles */
.front-example {
  background: linear-gradient(135deg, #1a0000 0%, #330000 100%);
  border-color: rgba(255, 0, 0, 0.3);
}

.rear-example {
  background: linear-gradient(135deg, #001a00 0%, #003300 100%);
  border-color: rgba(0, 255, 0, 0.2);
}

.left-example {
  background: linear-gradient(135deg, #00001a 0%, #000033 100%);
  border-color: rgba(0, 100, 255, 0.2);
}

.right-example {
  background: linear-gradient(135deg, #1a1a00 0%, #333300 100%);
  border-color: rgba(255, 255, 0, 0.2);
}

.example-label {
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
  font-weight: 500;
  line-height: 1.3;
}

/* AI Mock Analysis */
.ai-mock-analysis {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(50, 0, 0, 0.5) 100%);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 20px;
  border: 1px solid rgba(255, 0, 0, 0.3);
  animation: slideUp 0.5s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-analysis-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.ai-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #ff0000 0%, #990000 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-icon i {
  font-size: 24px;
  color: white;
}

.ai-text h4 {
  margin: 0 0 5px 0;
  color: white;
  font-size: 18px;
}

.ai-text p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.ai-result {
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  padding: 15px;
}

.ai-car-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.ai-car-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 0, 0, 0.3);
}

.ai-car-badge i {
  color: var(--primary);
}

.ai-car-badge span {
  color: white;
  font-weight: 600;
  font-size: 16px;
}

.ai-confidence {
  min-width: 150px;
}

.ai-confidence span {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 5px;
}

.confidence-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  background: linear-gradient(90deg, #00ff00, #00cc00);
  border-radius: 3px;
  transition: width 1s ease;
}

/* Upload Buttons Enhancement */
.upload-actions {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

.upload-btn {
  flex: 1;
  padding: 16px;
  border-radius: var(--radius-md);
  border: none;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-btn.gallery {
  background: rgba(40, 40, 40, 0.8);
  color: white;
  border: 1px solid #333333;
}

.upload-btn.camera {
  background: linear-gradient(135deg, var(--primary) 0%, #990000 100%);
  color: white;
  border: 1px solid var(--primary);
}

.upload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 0, 0, 0.2);
}

/* Progress indicator for uploads */
.upload-progress {
  margin: 15px 0;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.progress-info span {
  color: var(--text-secondary);
  font-size: 12px;
}

.progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--gradient-primary);
  width: 0%;
  transition: width 0.3s ease;
}

/* Empty state for uploaded images */
.uploaded-images-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.uploaded-images-empty i {
  font-size: 48px;
  margin-bottom: 15px;
  color: var(--primary);
  opacity: 0.3;
}

.uploaded-images-empty p {
  margin: 10px 0;
  font-size: 14px;
}
/* ============ UPGRADE META INFO - SEPARATED DIFFICULTY & TIME ============ */
.upgrade-meta-info {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.upgrade-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid;
}

.upgrade-difficulty {
  background: rgba(255, 100, 0, 0.1);
  color: #ff9900;
  border-color: rgba(255, 100, 0, 0.3);
}

.upgrade-difficulty.easy {
  background: rgba(0, 204, 0, 0.1);
  color: #00cc00;
  border-color: rgba(0, 204, 0, 0.3);
}

.upgrade-difficulty.medium {
  background: rgba(255, 165, 0, 0.1);
  color: #ff9900;
  border-color: rgba(255, 165, 0, 0.3);
}

.upgrade-difficulty.hard {
  background: rgba(255, 0, 0, 0.1);
  color: #ff3333;
  border-color: rgba(255, 0, 0, 0.3);
}

.upgrade-difficulty.very-hard {
  background: rgba(153, 0, 0, 0.1);
  color: #ff0000;
  border-color: rgba(153, 0, 0, 0.3);
}

.upgrade-installation {
  background: rgba(0, 100, 255, 0.1);
  color: #3399ff;
  border-color: rgba(0, 100, 255, 0.3);
}

.upgrade-meta-badge i {
  font-size: 10px;
}

/* Make sure it works with the existing layout */
.option-content {
  min-width: 0;
  overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .upgrade-meta-info {
    gap: 6px;
  }

  .upgrade-meta-badge {
    padding: 6px 10px;
    font-size: 11px;
  }
}
/* ============ ADDITIONAL NOTES STYLING ============ */
.additional-notes {
    background: rgba(0, 100, 255, 0.08);
    color: #66b3ff;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin: 8px 0 12px 0;
    border: 1px solid rgba(0, 100, 255, 0.2);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
}

.additional-notes i {
    color: #3399ff;
    font-size: 14px;
    margin-top: 1px;
    flex-shrink: 0;
}

.additional-notes span {
    flex: 1;
}

/* Responsive */
@media (max-width: 480px) {
    .additional-notes {
        font-size: 12px;
        padding: 8px 10px;
        gap: 8px;
    }

    .additional-notes i {
        font-size: 12px;
    }
}


/* Customizer CTA visibility tweaks */
.option-actions {
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 520px) {
  .customize-link {
    width: 100%;
  }
  .source-link {
    width: 100%;
    justify-content: center;
  }
}


/* ===== Build Strip (Exterior Customizer) ===== */
.build-strip {
  background: rgba(15, 15, 18, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
  margin-top: 12px;
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.build-strip.hidden { display: none; }


.build-strip-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.build-strip-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:0.6px;
  text-transform:uppercase;
  font-size:14px;
  color:rgba(255,255,255,0.92);
}

.build-strip-title i{
  opacity:0.95;
  filter: drop-shadow(0 0 8px rgba(255, 46, 46, 0.20));
}

.build-strip-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:#fff;
  background:rgba(255,46,46,0.20);
  border:1px solid rgba(255,46,46,0.35);
}

.build-strip-actions{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.build-strip-total{
  font-weight:800;
  font-size:12px;
  color:rgba(255,255,255,0.95);
  padding:4px 8px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,46,46,0.18), rgba(255,46,46,0.06));
  border:1px solid rgba(255,46,46,0.30);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.build-strip-body { max-height: 220px; overflow: auto; padding-right: 2px; }
.build-strip.is-collapsed .build-strip-body { display: none; }
.build-strip:not(.is-collapsed) .build-strip-body::-webkit-scrollbar { width: 6px; }
.build-strip-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 999px; }

.build-strip-essentials, .build-strip-items { align-items: stretch; }

.build-chip, 
@media (max-width: 480px) {
  .build-strip { padding: 12px; top: 8px; }
  .build-strip-total { font-size: 0.92rem; }
}

/* ===== Customizer estimate line ===== */
.customizer-estimate {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 46, 46, 0.10);
  border: 1px solid rgba(255, 46, 46, 0.22);
  font-weight: 800;
  letter-spacing: 0.2px;
}
.customizer-estimate small {
  display: block;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 2px;
}

/* Build Strip empty state */
.build-empty-state{
  text-align:center;
  color: rgba(255,255,255,0.60);
  font-size: 13px;
  padding: 10px 6px;
}

/* ===== Shop Amazon button on option cards ===== */
.amazon-link {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 6px;
color: #FF9900;
text-decoration: none;
font-weight: 700;
font-size: 14px;
padding: 8px 12px;
border: 1px solid rgba(255, 153, 0, 0.75);
border-radius: var(--radius-sm);
transition: all 0.3s ease;
flex-shrink: 0;
white-space: nowrap;
}

.amazon-link:hover {
background: rgba(255, 153, 0, 0.12);
transform: translateY(-1px);
}


/* Shop Amazon button loading state */
.amazon-link.is-loading {
  opacity: 0.8;
  cursor: wait;
}

.amazon-link.is-loading i {
  opacity: 0.9;
}
/* ========================================
   RECOMMENDATION FEEDBACK WIDGET
   ======================================== */

.fb-widget {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  width: fit-content;
}

.fb-label {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.6;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.fb-btn {
  background: none;
  border: none;
  padding: 3px 5px;
  cursor: pointer;
  color: var(--text-secondary);
  opacity: 0.45;
  font-size: 12px;
  border-radius: 4px;
  transition: opacity 0.15s, color 0.15s, transform 0.15s;
  line-height: 1;
}

.fb-btn:hover {
  opacity: 1;
}

.fb-btn.fb-up:hover  { color: #4caf50; }
.fb-btn.fb-down:hover { color: #e57373; }

.fb-btn.fb-voted {
  opacity: 1;
  cursor: default;
}

.fb-btn.fb-up.fb-voted  { color: #4caf50; }
.fb-btn.fb-down.fb-voted { color: #e57373; }

.fb-btn:disabled {
  cursor: default;
}

.fb-accuracy {
  font-size: 10px;
  color: var(--text-secondary);
  opacity: 0.5;
  margin-left: 2px;
  white-space: nowrap;
}

/* (comment removed: encoding noise) */
.map-attribution {
  font-size: 10px;
  opacity: 0.75;
  margin-top: 0;
}

/* (comment removed: encoding noise) */
.shop-marker.recommended {
  transform: translate(-50%, -50%) scale(1);
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.25), 0 0 20px rgba(255, 215, 0, 0.15);
}

.shop-marker.recommended .shop-tooltip {
  font-weight: 700;
}

/* Print quote */
.print-quote {
  display: none;
}

@media print {
  /* Hide the app UI */
  body * {
    visibility: hidden !important;
  }

  /* Show only print quote */
  #print-quote,
  #print-quote * {
    visibility: visible !important;
  }

  #print-quote {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 24px;
    background: #fff;
    color: #111;
  }

  .pq-page {
    max-width: 820px;
    margin: 0 auto;
    font-family: Inter, Arial, sans-serif;
  }

  .pq-title {
    font-size: 20px;
    font-weight: 700;
  }

  .pq-sub {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
  }

  .pq-date {
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.75;
  }

  .pq-section {
    margin-top: 18px;
  }

  .pq-section-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
  }

  .pq-table,
  .pq-totals {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .pq-table td,
  .pq-totals td {
    padding: 10px 0;
    border-bottom: 1px solid #e7e7e7;
    vertical-align: top;
  }

  .pq-right {
    text-align: right;
    white-space: nowrap;
    padding-left: 16px;
  }

  .pq-name {
    font-weight: 700;
  }

  .pq-meta {
    font-size: 12px;
    opacity: 0.75;
    margin-top: 2px;
  }

  .pq-total td {
    font-weight: 800;
    border-bottom: none;
    padding-top: 12px;
  }

  .pq-footnote {
    margin-top: 10px;
    font-size: 11px;
    opacity: 0.75;
  }
}




.ebay-link i {
  font-size: 16px;
}

/* ===== Shop eBay button (styled similar to Amazon, but eBay branded) ===== */
.ebay-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
  flex-shrink: 0;
  white-space: nowrap;

  /* eBay brand-inspired */
  color: #ffffff;
  background: linear-gradient(90deg, rgba(229,50,56,0.95), rgba(0,100,210,0.95));
  border: 1px solid rgba(229, 50, 56, 0.55);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

.ebay-link i {
  font-size: 16px;
  opacity: 0.95;
}

.ebay-link:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 14px 28px rgba(0,0,0,0.33);
}

.ebay-link:active {
  transform: translateY(0px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

/* Match Amazon loading behavior */
.ebay-link.is-loading {
  opacity: 0.85;
  cursor: wait;
}

/* Disabled / No match state (keeps layout consistent) */
.ebay-link:disabled,
.ebay-link[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

/* Modal small button inherits btn-small, but we brand the provider class */
.btn-small.ebay-btn {
  background: linear-gradient(90deg, rgba(229,50,56,0.95), rgba(0,100,210,0.95));
  color: #fff;
  border: 1px solid rgba(0, 100, 210, 0.55);
}

.btn-small.ebay-btn:hover {
  filter: saturate(1.05);
  transform: translateY(-1px);
}

.btn-small.ebay-btn:disabled,
.btn-small.ebay-btn[disabled] {
  opacity: 0.6;
  transform: none;
  filter: none;
}



/* ===== Fullscreen loading overlay (Options screen) ===== */
#screen-options .loading-spinner-container{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)) 20px;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9; /* below header (z-index:10), above content */
}

#screen-options .loading-spinner-container .loading-subtext{
  max-width: 280px;
}

#screen-options .loading-spinner-container p{
  margin-left: auto;
  margin-right: auto;
}

/* Make sure loading overlay doesn't get card styling from .options-list */

/* =====================
   Auth Modal (Supabase)
   ===================== */
.auth-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:18px;
}
.auth-overlay.active{display:flex;}
.auth-modal{
  width:min(520px, 100%);
  background:rgba(18,18,18,0.98);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
  overflow:hidden;
}
.auth-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:16px 16px 10px 16px;
  gap:12px;
}
.auth-title{display:flex; gap:12px; align-items:flex-start;}
.auth-badge{
  width:38px;height:38px;border-radius:12px;
  background:rgba(255,0,0,0.12);
  display:flex; align-items:center; justify-content:center;
  color:#ff3b3b;
}
.auth-subtitle{
  margin:4px 0 0 0;
  opacity:0.8;
  font-size:13px;
}
.auth-close{
  border:none;
  background:rgba(255,255,255,0.08);
  color:#fff;
  border-radius:12px;
  width:38px;height:38px;
  cursor:pointer;
}
.auth-body{padding:0 16px 16px 16px;}
.auth-tabs{
  display:flex;
  gap:10px;
  margin:4px 0 12px 0;
}
.auth-tab{
  flex:1;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:#fff;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:600;
}
.auth-tab.active{
  border-color: rgba(255,0,0,0.45);
  background: rgba(255,0,0,0.12);
}
.auth-oauth{
  width:100%;
  border:none;
  background:rgba(255,255,255,0.10);
  color:#fff;
  border-radius:12px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.auth-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:12px 0;
  opacity:0.75;
}
.auth-divider span{
  padding:0 10px;
  font-size:12px;
}
.auth-form label{
  display:block;
  font-size:12px;
  opacity:0.85;
  margin:8px 0 6px 0;
}
.auth-form input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:#fff;
  outline:none;
}
.auth-submit{
  width:100%;
  margin-top:12px;
  border:none;
  background:linear-gradient(90deg, #ff2b2b, #b70000);
  color:#fff;
  border-radius:12px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:800;
}
.auth-link{
  margin-top:10px;
  width:100%;
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.75);
  cursor:pointer;
  text-decoration:underline;
}
.auth-error{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,0,0,0.35);
  background:rgba(255,0,0,0.08);
  color:#fff;
  font-size:13px;
}
.auth-error.info{
  border-color: rgba(0,170,255,0.35);
  background: rgba(0,170,255,0.08);
}

.account-email{
  display:flex;
  gap:10px;
  align-items:center;
  margin:10px 0 0 0;
}
.account-msg{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,170,255,0.30);
  background: rgba(0,170,255,0.08);
}
.account-msg.bad{
  border-color: rgba(255,0,0,0.35);
  background: rgba(255,0,0,0.08);
}


/* === Account Tab Inputs (Dark Theme) === */
.account-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(20, 20, 20, 0.9);
  border: 1px solid rgba(255, 60, 60, 0.2);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: all 0.2s ease;
}

.account-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.account-input:focus {
  border-color: rgba(255, 60, 60, 0.6);
  box-shadow: 0 0 0 2px rgba(255, 60, 60, 0.15);
  background: rgba(15, 15, 15, 0.95);
}

.account-provider {
  margin-top: 6px;
  opacity: 0.85;
  font-size: 13px;
}

.account-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 14px 0;
}

.account-danger {
  border: 1px solid rgba(255, 60, 60, 0.25);
  background: rgba(255, 60, 60, 0.06);
  border-radius: 12px;
  padding: 12px;
  margin-top: 12px;
}

.account-danger .danger-title {
  margin: 0 0 8px 0;
  font-size: 13px;
  opacity: 0.9;
}

.account-danger .danger-btn {
  background: rgba(255, 60, 60, 0.12);
  border: 1px solid rgba(255, 60, 60, 0.35);
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}

.account-danger .danger-btn:hover {
  background: rgba(255, 60, 60, 0.18);
}

/* Simple card wrapper used inside Account tab (e.g., Plan section) */
.account-card {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 12px;
}

.account-plan-card {
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.account-plan-card:hover,
.account-plan-card:focus-visible {
  border-color: rgba(255, 0, 0, 0.35);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transform: translateY(-1px);
  outline: none;
}

/* ========= PRICING MODAL ========= */
/* ===== PRICING MODAL — REFINED LAYOUT ===== */
.pricing-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10050;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  padding: 20px;
  overflow-y: auto;
  animation: modalFadeIn 0.3s ease;
}

.pricing-modal {
  background: linear-gradient(180deg, #141416 0%, #0c0c0e 100%);
  border-radius: 20px;
  width: 100%;
  max-width: 740px;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 24px 80px rgba(0,0,0,0.7),
    0 0 120px rgba(255,0,0,0.04);
  position: relative;
  overflow: hidden;
  animation: modalSlideIn 0.3s ease;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

.pricing-header {
  padding: 28px 28px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pricing-header h2 {
  margin: 0 0 4px 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(255,255,255,0.97);
}

.pricing-header p {
  margin: 0;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 20px 28px 28px;
}

@media (max-width: 760px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

.pricing-header,
.pricing-footer { flex: 0 0 auto; }

.pricing-grid { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

@supports (height: 100dvh) {
  .pricing-modal { max-height: calc(100dvh - 40px); }
}

@media (max-height: 740px) {
  .pricing-modal-overlay { align-items: flex-start; padding: 12px; }
  .pricing-modal { margin-top: 12px; }
}

@media (max-width: 420px) {
  .pricing-header { padding: 20px 18px 14px; }
  .pricing-grid { padding: 14px 18px 20px; gap: 12px; }
  .pricing-footer { padding: 0 18px 18px; }
}

/* --- Pricing Cards --- */
.pricing-card {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 22px 20px 20px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card:hover {
  border-color: rgba(255,255,255,0.12);
}

.pricing-card.featured {
  border-color: rgba(255, 50, 50, 0.30);
  background: linear-gradient(180deg, rgba(255,30,30,0.04) 0%, rgba(255,255,255,0.015) 100%);
  box-shadow:
    0 0 0 1px rgba(255,50,50,0.08) inset,
    0 8px 32px rgba(255,0,0,0.06);
}

.pricing-card.featured:hover {
  border-color: rgba(255, 50, 50, 0.40);
}

.pricing-tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tier-name {
  font-weight: 700;
  font-size: 16px;
}

.tier-price {
  font-weight: 800;
  font-size: 18px;
}

.tier-price .small {
  font-size: 12px;
  opacity: 0.8;
  font-weight: 600;
  margin-left: 2px;
}

/* --- Feature List --- */
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  flex: 1;
}

.pricing-features li {
  color: rgba(255,255,255,0.78);
  line-height: 1.45;
  letter-spacing: 0.005em;
  padding-left: 22px;
  position: relative;
}

/* Bullet dot */
.pricing-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
}

.pricing-card.featured .pricing-features li::before,
.pricing-card[data-card="premium"] .pricing-features li::before {
  background: rgba(255,60,60,0.45);
}

.pricing-features li i {
  width: 16px;
  text-align: center;
  opacity: 0.75;
  margin-right: 6px;
}

.pricing-features li.muted {
  opacity: 0.5;
}

.pricing-footer {
  padding: 0 28px 24px;
}

.pricing-note {
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.05);
  line-height: 1.5;
  letter-spacing: 0.01em;
}



/* =============================
   Pricing modal — tier badges & price typography
   ============================= */
.pricing-card .pricing-tier{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.pricing-card[data-card="premium"] .pricing-tier{
  background: rgba(255,50,50,0.10);
  border-color: rgba(255,50,50,0.25);
  color: rgba(255,120,120,0.95);
}

.pricing-card[data-card="elite"] .pricing-tier{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.95);
}

.pricing-card .pricing-price{
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 4px;
  margin-bottom: 6px;
  color: rgba(255,255,255,0.98);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.pricing-card .pricing-sub{
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  position: relative;
  top: -0.05em;
}

.pricing-card .pricing-small{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 20px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.pricing-card[data-card="premium"] .pricing-small,
.pricing-card[data-card="elite"] .pricing-small{
  background: rgba(255,255,255,0.04);
}

@media (max-width: 480px){
  .pricing-card .pricing-tier{
    font-size: 12px;
    margin-bottom: 14px;
    padding: 5px 12px;
  }

  .pricing-card .pricing-price{
    font-size: 26px;
    gap: 4px;
    margin-bottom: 6px;
  }

  .pricing-card .pricing-sub{
    font-size: 0.48em;
  }

  .pricing-card .pricing-small{
    margin-bottom: 16px;
    padding: 5px 9px;
    font-size: 11.5px;
  }
}

/* =====================
   Garage (Settings)
   ===================== */
.garage-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}

.garage-card{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(20,20,20,0.55);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.garage-cover{
  width:100%;
  height:140px;
  background: rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position: relative;
}


.garage-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.garage-cover-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0.8;
  font-size: 28px;
}

.garage-meta{
  padding: 12px;
  position: relative;
}

.garage-meta-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.garage-meta-text{
  min-width:0;
  flex:1;
}

.garage-title{
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 4px;
}

.garage-sub{
  opacity: 0.75;
  font-size: 12px;
  margin-bottom: 0;
}

.garage-card-modify-btn{
  flex: 0 0 auto;
  padding: 8px 12px !important;
  min-height: 36px;
  font-size: 12px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  align-self: center;
  white-space: nowrap;
  cursor: pointer;
}

.garage-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.garage-meta-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.garage-meta-text{
  min-width:0;
  flex:1 1 auto;
}

.garage-card-modify-btn{
  width:auto;
  min-width:unset;
  margin-top:0;
  padding:8px 12px;
  border-radius:12px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
  flex:0 0 auto;
}

@media (max-width: 420px){
  .garage-card-modify-btn{
    padding:7px 10px;
    font-size:11px;
  }
}


.garage-card-clickable{
  cursor: pointer;
}

.garage-card-clickable:focus{
  outline: 2px solid rgba(255,255,255,0.18);
  outline-offset: 2px;
}

.garage-delete-btn{
  position: absolute;
  top: 10px;
  right: 10px;

  /* KEY FIX: remove transparency */
  background: #dc2626 !important;        /* solid red */
  border: 1px solid #ef4444 !important;  /* stronger border */
  color: #ffffff !important;             /* pure white text */

  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;

  /* NEW: ensures visibility on any image */
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  z-index: 10;
}

.garage-delete-btn:hover{
  border-color: rgba(255,70,70,0.75) !important;
  background: rgba(255,70,70,0.22) !important;
}

/* Force detail view to span the full parent garage-grid */
.garage-detail{
  grid-column: 1 / -1;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(20,20,20,0.45);
  border-radius: 14px;
  padding: 14px;
}

.garage-detail-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom: 12px;
}

.garage-assets-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:10px;
  margin-top: 8px;
}

/* "Uploaded Photos" / "Generated Photos" labels inside the grid must span full row */
.garage-assets-grid > div:not(.garage-asset) {
  grid-column: 1 / -1;
}

.garage-asset{
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  border-radius: 12px;
  overflow:hidden;
}

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

.garage-specs{
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
  display:grid;
  gap:8px;
}

.garage-spec-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size: 13px;
  opacity: 0.9;
}

.garage-spec-row span:first-child{
  opacity: 0.7;
}

/* Garage: resume tuning button */
.garage-modify-btn{
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  font-weight: 800;
  border-radius: 14px;
}

/* Desktop: better photo grid sizing */
@media (min-width: 680px) {
  .garage-detail {
    padding: 20px;
  }

  .garage-assets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px){
  .garage-meta-top{
    align-items: center;
  }

  .garage-card-modify-btn{
    padding: 7px 10px !important;
    font-size: 11px !important;
  }
}

/* ===== Garage Delete Button Overlay (Top-Right of Image) ===== */
.garage-card-image {
  position: relative !important;
}

.garage-delete-overlay {
  position: absolute !important;
  top: 10px;
  right: 10px;
  z-index: 10;

  background: rgba(220, 38, 38, 0.95);
  border: 1px solid rgba(239, 68, 68, 1);
  color: #ffffff !important;

  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;

  cursor: pointer;
  transition: all 0.15s ease;
  backdrop-filter: blur(4px);
}

.garage-delete-overlay:hover {
  background: #ef4444;
  transform: scale(1.05);
}
/* ===== GARAGE DETAIL ACTION ROW (Save + Delete) ===== */
.settings-actions,
.garage-actions,
.build-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Push Delete button to the far right */
.settings-btn.danger,
.delete-btn,
.garage-delete-inline {
  margin-left: auto;
}

/* Keep buttons compact and aligned */
.settings-actions .primary-btn,
.settings-actions .secondary-btn,
.settings-actions .settings-btn {
  width: auto;
  min-width: unset;
}

/* =============================
   PAYWALL / PRICING MODAL UX
   ============================= */
.pricing-header .pricing-current-plan{
  opacity: 0.85;
}

.billing-toggle{
  display: inline-flex;
  gap: 0;
  padding: 3px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}

.billing-toggle button{
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.55);
  padding: 8px 12px;
  border-radius: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}

.billing-toggle button:hover{
  color: rgba(255,255,255,0.82);
}

.billing-toggle button.is-active{
  background: rgba(255,30,30,0.18);
  border: 1px solid rgba(255,30,30,0.32);
  color: rgba(255,255,255,0.97);
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
}


.pricing-card .pricing-cta{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 14px;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.pricing-card .pricing-cta:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.pricing-card .pricing-cta.primary{
  background: linear-gradient(180deg, rgba(255,40,40,0.32) 0%, rgba(200,0,0,0.22) 100%);
  border: 1px solid rgba(255,50,50,0.45);
  color: rgba(255,255,255,0.97);
}

.pricing-card .pricing-cta.primary:hover{
  background: linear-gradient(180deg, rgba(255,40,40,0.40) 0%, rgba(200,0,0,0.28) 100%);
  box-shadow: 0 8px 28px rgba(255,0,0,0.12), 0 4px 14px rgba(0,0,0,0.3);
}

.pricing-card .pricing-cta.current{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.45);
  cursor: default;
  opacity: 1;
}

.pricing-card .pricing-cta.current:hover{
  transform: none;
  box-shadow: none;
  background: rgba(255,255,255,0.04);
}

.map-viewport.map-locked-free .map-viewport-texture,
.map-viewport.map-locked-free .map-roads-layer {
  filter: blur(12px) saturate(0.7) brightness(0.82);
  transform: scale(1.045);
}

.map-viewport.map-locked-free::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, calc(-50% - 36px));
  border-radius: 16px;
  background: rgba(120, 20, 20, 0.34) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 1 1 8 0v3'/%3E%3C/svg%3E") center/24px 24px no-repeat;
  border: 1px solid rgba(255, 70, 70, 0.28);
  box-shadow: 0 10px 28px rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 4;
}

.map-viewport.map-locked-free::after {
  content: 'Premium Required\AUpgrade to view all shops';
  white-space: pre-line;
  position: absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:700;
  font-size:16px;
  line-height: 1.45;
  color:#ffffff;
  padding-top: 56px;
  background: linear-gradient(180deg, rgba(6,6,8,0.35), rgba(6,6,8,0.55));
  backdrop-filter: blur(8px) saturate(0.7);
  -webkit-backdrop-filter: blur(8px) saturate(0.7);
  pointer-events:none;
  z-index:3;
}

.map-viewport.map-locked-free .shop-marker.locked {
  opacity: 0.18;
  filter: blur(6px) saturate(0.55);
}

.map-viewport.map-locked-free .shop-marker.locked .shop-tooltip {
  display: none !important;
}

/* =============================
   Locked shop cards: stronger blur + overlay
   ============================= */
.shop-card.locked{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  min-height: 132px;
  height: 132px;
  padding: 16px 18px;
}

.shop-card.locked .shop-card-body,
.shop-card.locked .shop-card-header{
  filter: blur(14px);
  opacity: 0.28;
  pointer-events: none;
  user-select: none;
}

.shop-card.locked .shop-actions{
  display: none !important;
}

.shop-card.locked .shop-address{
  margin-bottom: 12px;
}

.shop-card.locked .shop-specs{
  gap: 10px;
  margin-bottom: 0;
}

.shop-card.locked::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.62));
  pointer-events: none;
}

/* Map markers: make locked markers less readable */
.shop-marker.locked{
  opacity: 0.30;
  filter: blur(1.2px);
}
/* ================================
   Paywall UX polish (added)
   ================================ */
.pricing-toggle{
  display:flex;
  gap:0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 3px;
  margin-top: 14px;
}
.pricing-toggle-btn{
  flex:1;
  border: none;
  cursor: pointer;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 9px;
  transition: all 160ms ease;
}
.pricing-toggle-btn:hover{
  color: rgba(255,255,255,0.78);
}
.pricing-toggle-btn[aria-selected="true"]{
  background: rgba(255,20,20,0.18);
  border: 1px solid rgba(255,20,20,0.30);
  color: rgba(255,255,255,0.97);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.pricing-save-badge{
  display:inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(255, 30, 30, 0.16);
  border: 1px solid rgba(255, 30, 30, 0.30);
  color: rgba(255,180,180,0.92);
  letter-spacing: 0.02em;
}
.plan-action-btn{
  width:100%;
  border:none;
  cursor:pointer;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
}
.plan-action-btn.current{
  cursor: default;
  opacity: 0.85;
}

/* Locked shop overlay + stronger blur */
.shop-card.locked{
  position: relative;
  overflow: hidden;
}
.shop-card.locked .shop-details,
.shop-card.locked .shop-title,
.shop-card.locked .shop-address,
.shop-card.locked .shop-rating,
.shop-card.locked .shop-distance,
.shop-card.locked .shop-meta{
  filter: blur(14px);
  opacity: 0.18;
  user-select: none;
  pointer-events: none;
}
.shop-lock-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.30);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
  min-height: 100%;
}
.shop-lock-badge{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255, 0, 0, 0.16);
  border: 1px solid rgba(255, 0, 0, 0.35);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
}
.shop-lock-badge i{
  color: rgba(255,255,255,0.92);
  font-size: 15px;
}
.shop-lock-text{
  text-align: left;
}

.shop-lock-title{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.15;
  color: rgba(255,255,255,0.95);
}
.shop-lock-sub{
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(255,255,255,0.75);
}

.quota-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10060;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 20px;
  animation: modalFadeIn 0.25s ease;
}

.quota-modal {
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, rgba(18,18,20,0.98), rgba(8,8,10,0.98));
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  position: relative;
  overflow: hidden;
  animation: modalSlideIn 0.25s ease;
}

.quota-modal-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 28px 28px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.quota-modal-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,51,51,0.22), rgba(255,51,51,0.10));
  color: var(--primary);
  font-size: 24px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}

.quota-modal-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}

.quota-modal-header h3 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.2;
}

.quota-modal-header p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  line-height: 1.5;
}

.quota-modal-body {
  padding: 20px 28px 10px;
}

.quota-stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.quota-stat-card {
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}

.quota-stat-label {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 4px;
}

.quota-stat-card strong {
  font-size: 24px;
  line-height: 1;
}

.quota-reset-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  margin-bottom: 12px;
}

.quota-modal-copy {
  color: rgba(255,255,255,0.86);
  margin: 0;
  line-height: 1.5;
}

.quota-modal-actions {
  padding: 0 28px 28px;
}

.quota-modal-actions .pricing-cta {
  width: 100%;
  justify-content: center;
}

.quota-modal-actions .quota-upgrade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid rgba(255,70,70,0.55);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,70,70,0.35), rgba(255,70,70,0.18));
  color: rgba(255,255,255,0.96);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.quota-modal-actions .quota-upgrade-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 16px 32px rgba(0,0,0,0.34);
}

.quota-modal-actions .quota-upgrade-btn:active {
  transform: translateY(0);
}

.quota-modal-actions .quota-upgrade-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
}

.quota-modal-actions .quota-upgrade-btn i,
.quota-modal-actions .quota-upgrade-btn span {
  color: inherit;
}

.quota-preview-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 260px;
  text-align: center;
}

.quota-preview-locked i {
  font-size: 34px;
  color: var(--primary);
}

@media (max-width: 560px) {
  .quota-modal-overlay {
    padding: 12px;
    align-items: flex-start;
  }

  .quota-modal {
    margin-top: 12px;
    border-radius: 20px;
  }

  .quota-modal-header,
  .quota-modal-body,
  .quota-modal-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  .quota-modal-header {
    padding-top: 22px;
    gap: 12px;
  }

  .quota-modal-header h3 {
    font-size: 21px;
  }

  .quota-stat-row {
    grid-template-columns: 1fr;
  }
}

/* ===== PRICING MODAL — RESPONSIVE FINE-TUNING ===== */
@media (max-width: 760px){
  .pricing-card .pricing-price{
    font-size: 26px;
    gap: 4px;
  }

  .pricing-card .pricing-small{
    margin-bottom: 16px;
  }
}

@media (max-width: 480px){
  .pricing-card .pricing-tier{
    font-size: 12px;
    padding: 5px 12px;
    margin-bottom: 12px;
  }

  .pricing-card .pricing-price{
    font-size: 24px;
    gap: 3px;
    margin-bottom: 5px;
  }

  .pricing-card .pricing-sub{
    font-size: 0.46em;
  }

  .pricing-card .pricing-small{
    min-height: 26px;
    margin-bottom: 14px;
    padding: 4px 9px;
    font-size: 11px;
  }
}

@media (max-width: 360px){
  .pricing-card .pricing-price{
    font-size: 22px;
  }
}
/* FIX: equal upgrade action buttons */
.customize-link,
.ebay-link,
.amazon-link,
.search-online-link,
.search-online,
.source-link,
.btn-small.ebay-btn{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:8px;
  padding:12px 16px !important;
  font-size:14px !important;
  border-radius:12px !important;
  box-sizing:border-box;
}


/* Desktop polish for Step 4 upgrade cards */
@media (min-width: 1024px){
  #screen-options .option-card-with-image {
    align-items: stretch;
  }

  #screen-options .option-image-container {
    width: min(42vw, 520px) !important;
    min-width: min(42vw, 520px) !important;
    flex: 0 0 min(42vw, 520px) !important;
    align-self: stretch;
    background: #0b0b0b;
  }

  #screen-options .option-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    background: #0b0b0b;
  }
}

.legal-doc-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 14px;
}

.legal-readmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.legal-readmore-btn i {
  margin-right: 0;
}