/**
 * Universal Theme Styles
 * Modern, responsive styles for the universal template system
 * Version: 1.0.0 - Day 2 Implementation
 */

/* 🎨 CSS Variables for dynamic theming */
:root {
  /* Default color scheme (overrideable from config) */
  --template-primary: #007bff;
  --template-secondary: #6c757d;
  --template-success: #28a745;
  --template-accent: #17a2b8;
  --template-warning: #ffc107;
  --template-danger: #dc3545;

  /* Neutral colors */
  --template-white: #ffffff;
  --template-light: #f8f9fa;
  --template-dark: #343a40;
  --template-muted: #6c757d;
  --template-border: #e9ecef;

  /* Background gradients */
  --template-bg-gradient: linear-gradient(160deg, #faf9f7 0%, #e8e4df 50%, #d5d0cb 100%);
  --template-card-bg: rgba(255, 255, 255, 0.95);

  /* Typography */
  --template-heading-font: 'DM Serif Display', Georgia, serif;
  --template-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --template-font-size-base: 1rem;
  --template-line-height: 1.6;

  /* Spacing */
  --template-spacing-xs: 0.25rem;
  --template-spacing-sm: 0.5rem;
  --template-spacing-md: 1rem;
  --template-spacing-lg: 1.5rem;
  --template-spacing-xl: 3rem;

  /* Border radius */
  --template-radius-sm: 6px;
  --template-radius-md: 12px;
  --template-radius-lg: 16px;
  --template-radius-pill: 50px;

  /* Shadows — layered, hue-tinted for depth */
  --template-shadow-sm:
    0.5px 1px 1px rgba(0, 40, 120, 0.04),
    1px 2px 2px rgba(0, 40, 120, 0.04);
  --template-shadow-md:
    0.5px 1px 1px rgba(0, 40, 120, 0.035),
    1px 2px 2px rgba(0, 40, 120, 0.035),
    2px 4px 4px rgba(0, 40, 120, 0.035),
    4px 8px 8px rgba(0, 40, 120, 0.035);
  --template-shadow-lg:
    0.5px 1px 1px rgba(0, 40, 120, 0.03),
    1px 2px 2px rgba(0, 40, 120, 0.03),
    2px 4px 4px rgba(0, 40, 120, 0.03),
    4px 8px 8px rgba(0, 40, 120, 0.03),
    8px 16px 16px rgba(0, 40, 120, 0.03);

  /* Transitions */
  --template-transition: all 0.3s ease;
}

/* 📱 Universal Header Styles */
#universal-header {
  background: var(--template-card-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 12px var(--template-spacing-md);
  position: relative;
  z-index: 100;
  box-shadow: var(--template-shadow-sm);
}

#universal-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

#universal-header .brand-text {
  flex: 1;
}

#universal-header .brand-name {
  font-family: var(--template-heading-font);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--template-dark);
  margin: 0;
}

#universal-header .brand-tagline {
  font-size: 0.8rem;
  color: var(--template-muted);
  margin: 0;
  margin-top: 2px;
}

#business-logo {
  height: 48px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  border-radius: var(--template-radius-sm);
}

/* 📊 Segmented Step Indicator */
#progress-container {
  margin-top: 8px;
}

.step-indicators {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 6px 0 2px;
}

.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  /* Override ui.css which styles this as a 40px colored circle */
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
  color: inherit !important;
}

.step-indicator.active,
.step-indicator.completed {
  background: none !important;
  border: none !important;
}

.step-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1.5px solid #d0d5dd;
  background: white;
  color: #98a2b3;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: none;
  line-height: 1;
}

.step-indicator.active .step-circle {
  border-color: var(--template-primary);
  background: var(--template-primary);
  color: white;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--template-primary) 12%, transparent);
}

.step-indicator.completed .step-circle {
  border-color: var(--template-primary);
  background: var(--template-primary);
  color: white;
  box-shadow: none;
}

.step-label {
  font-size: 0.65rem;
  color: #98a2b3;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  max-width: 80px;
}

.step-indicator.active .step-label {
  color: var(--template-primary);
  font-weight: 700;
}

.step-indicator.completed .step-label {
  color: var(--template-primary);
  font-weight: 600;
}

.step-connector {
  height: 1.5px;
  flex: 1;
  background: #d0d5dd;
  margin: 0 4px;
  margin-top: 14px;
  border-radius: 1px;
  transition: background 0.3s ease;
  min-width: 28px;
}

.step-connector.completed {
  background: var(--template-primary);
}

/* 🎯 Main Content Area */
#universal-main {
  flex: 1;
  padding: var(--template-spacing-lg) var(--template-spacing-md);
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

#universal-step-content {
  background: var(--template-card-bg);
  border-radius: var(--template-radius-lg);
  box-shadow: var(--template-shadow-md);
  padding: var(--template-spacing-xl);
  margin-bottom: var(--template-spacing-lg);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 🔥 Lead Saver Section */
#lead-saver-section {
  background: linear-gradient(135deg, var(--template-warning) 0%, var(--template-accent) 100%);
  border-radius: var(--template-radius-lg);
  padding: var(--template-spacing-xl);
  margin-bottom: var(--template-spacing-lg);
  text-align: center;
  color: white;
  box-shadow: var(--template-shadow-lg);
}

.lead-saver-content h2 {
  font-family: var(--template-heading-font);
  margin: 0 0 var(--template-spacing-md) 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.lead-saver-content p {
  margin: 0 0 var(--template-spacing-lg) 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

/* 🎪 Pre-qualifier Section */
#pre-qualifier-section {
  background: var(--template-card-bg);
  border-radius: var(--template-radius-lg);
  padding: var(--template-spacing-xl);
  margin-bottom: var(--template-spacing-lg);
  box-shadow: var(--template-shadow-md);
}

.pre-qualifier-content h3 {
  margin: 0 0 var(--template-spacing-lg) 0;
  color: var(--template-dark);
  text-align: center;
}

#pre-qualifier-questions {
  margin-bottom: var(--template-spacing-lg);
}

/* 👥 Social Proof Section */
#social-proof-section {
  background: var(--template-card-bg);
  border-radius: var(--template-radius-lg);
  padding: var(--template-spacing-lg);
  margin-bottom: var(--template-spacing-lg);
  text-align: center;
  box-shadow: var(--template-shadow-sm);
}

.social-proof-content {
  display: flex;
  flex-direction: column;
  gap: var(--template-spacing-lg);
}

#social-proof-testimonial blockquote {
  margin: 0;
  padding: var(--template-spacing-md);
  font-style: italic;
  color: var(--template-dark);
  border-left: 4px solid var(--template-primary);
  background: rgba(0, 0, 0, 0.02);
}

#social-proof-testimonial cite {
  display: block;
  margin-top: var(--template-spacing-sm);
  color: var(--template-muted);
  font-size: 0.9rem;
}

#social-proof-stats {
  display: flex;
  justify-content: center;
  gap: var(--template-spacing-xl);
}

.stat {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--template-primary);
}

.stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--template-muted);
  margin-top: var(--template-spacing-xs);
}

/* 📱 Footer Styles */
#universal-footer {
  background: var(--template-card-bg);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: var(--template-spacing-lg) var(--template-spacing-md);
  box-shadow: var(--template-shadow-sm);
}

#contact-info {
  margin-bottom: var(--template-spacing-md);
  text-align: center;
}

#contact-info [id^="contact-"] {
  display: inline-flex !important;
  align-items: center;
  gap: var(--template-spacing-xs);
  font-size: 0.9rem;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--template-spacing-md);
}

/* 🎨 Button Styles */
button {
  font-family: var(--template-font-family);
  font-size: var(--template-font-size-base);
  font-weight: 600;
  padding: var(--template-spacing-md) var(--template-spacing-lg);
  border: none;
  border-radius: var(--template-radius-md);
  cursor: pointer;
  transition: var(--template-transition);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  line-height: 1.4;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-template-primary,
#universal-next:not(:disabled),
#lead-saver-cta,
#pre-qualifier-submit {
  background: linear-gradient(135deg, var(--template-primary) 0%, var(--template-accent) 100%);
  color: white;
  box-shadow: var(--template-shadow-md);
}

.btn-template-primary:hover,
#universal-next:not(:disabled):hover,
#lead-saver-cta:hover,
#pre-qualifier-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--template-shadow-lg);
}

.btn-template-secondary,
#universal-back {
  background: var(--template-secondary);
  color: white;
}

.btn-template-secondary:hover,
#universal-back:hover:not(:disabled) {
  background: var(--template-dark);
}

/* 🔘 Navigation Footer Styles */
#universal-footer {
  position: sticky;
  bottom: 0;
  background: white;
  border-top: 1px solid var(--template-border, #e9ecef);
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

#universal-footer .nav {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
}

/* Enhanced Mobile-First Button Styling */
#universal-back,
#universal-next {
  padding: 12px 28px;
  font-size: 16px;
  min-height: 48px;
  border-radius: var(--template-radius-pill);
  font-weight: 600;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  flex: 1;
  max-width: 180px;
}

#universal-back {
  border: 2px solid var(--template-primary, #007bff);
  background: white;
  color: var(--template-primary, #007bff);
}

#universal-back:hover:not(:disabled) {
  background: var(--template-primary, #007bff);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--template-shadow-md);
}

#universal-back:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: #ccc;
  color: #ccc;
}

#universal-next {
  background: var(--template-primary, #007bff);
  color: white;
}

#universal-next:hover:not(:disabled) {
  filter: brightness(0.9);
  transform: translateY(-1px);
  box-shadow: var(--template-shadow-lg);
}

#universal-next:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #ccc;
}

/* Accessible focus ring for all interactive elements */
#universal-back:focus-visible,
#universal-next:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}

/* 📱 Responsive Design */
@media (max-width: 768px) {
  :root {
    --template-spacing-xl: 2rem;
  }

  #universal-header {
    padding: var(--template-spacing-md);
  }

  #universal-header .brand-name {
    font-size: 1.1rem;
  }

  .step-label {
    font-size: 0.58rem;
  }

  .step-circle {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
  }

  .step-connector {
    margin-top: 13px;
  }

  #universal-main {
    padding: var(--template-spacing-md);
    padding-bottom: 100px; /* Account for sticky footer */
  }

  /* Hide contact info on mobile - not needed during booking flow */
  #contact-info {
    display: none !important;
  }

  /* Mobile navigation optimizations */
  #universal-footer {
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  #universal-footer .nav {
    gap: 8px;
  }

  #universal-back,
  #universal-next {
    padding: 14px 20px;
    font-size: 16px;
    min-height: 48px; /* Larger touch target on mobile */
    flex: 1;
  }
}

@media (max-width: 768px) {
  #universal-step-content,
  #lead-saver-section,
  #pre-qualifier-section {
    padding: var(--template-spacing-lg);
  }

  #social-proof-stats {
    flex-direction: column;
    gap: var(--template-spacing-md);
  }

  .nav {
    gap: var(--template-spacing-sm);
  }

  .nav button {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  #universal-header .brand {
    gap: 8px;
  }

  #business-logo {
    height: 36px;
  }

  .step-label {
    display: none;
  }

  .step-circle {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
  }

  .step-connector {
    margin-top: 12px;
    min-width: 16px;
  }
}

/* ============================================
   MOBILE-FIRST OPTIMIZATIONS (< 600px)
   ============================================ */
@media (max-width: 600px) {
  /* Hide footer contact info on mobile - not needed during booking flow */
  #contact-info {
    display: none !important;
  }

  /* Make footer more compact */
  #universal-footer {
    padding: 6px 10px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0));
  }

  /* Full-width nav buttons on mobile */
  #universal-footer .nav {
    max-width: 100%;
    gap: 10px;
  }

  #universal-back,
  #universal-next {
    max-width: none;
    padding: 14px 16px;
  }

  /* Truncate long business tagline to 1 line */
  #universal-header .brand-tagline {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 1.4em;
  }

  /* Compact step indicator on small screens — let it use full width */
  .step-indicators {
    max-width: 100%;
    padding: 6px 8px 2px;
  }

  /* Stack form fields vertically on mobile */
  .form-row-2col,
  .form-row-3col {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Ensure form inputs are full width and touch-friendly */
  input, select, textarea {
    font-size: 16px !important; /* Prevents iOS zoom */
    min-height: 48px !important;
    padding: 14px 12px !important;
  }

  /* Reduce header padding */
  #universal-header {
    padding: 12px;
  }

  #universal-header .brand-name {
    font-size: 1.15rem;
  }

  /* Breathing room for content above sticky footer */
  #universal-main {
    padding-bottom: 70px;
  }

  /* ── Mobile-responsive classes for inline-style overrides ── */

  /* Step content containers — reduce heavy padding */
  .step-content-wrap {
    padding: 16px 12px !important;
    max-width: 100% !important;
  }

  /* White card containers — reduce 40px padding */
  .card-padded {
    padding: 16px !important;
  }

  /* Step headings — reduce from 2.5rem */
  .step-heading {
    font-size: 1.35rem !important;
    margin-bottom: 8px !important;
  }

  .step-subtitle {
    font-size: 0.95rem !important;
  }

  /* Form row grids — force single column on mobile */
  .form-grid-3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .form-grid-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Price displays — reduce from 28-32px */
  .price-large {
    font-size: 1.35rem !important;
  }

  .price-medium {
    font-size: 1.1rem !important;
  }

  /* Primary action buttons — reduce from 25px padding */
  .btn-action-primary {
    padding: 12px 16px !important;
    font-size: 1rem !important;
    min-height: 48px;
  }

  /* Secondary/choice buttons — reduce from 25px padding */
  .btn-choice {
    padding: 12px 16px !important;
    font-size: 1rem !important;
  }

  /* Section spacing — reduce from 50px margins */
  .section-spacing {
    margin-bottom: 20px !important;
  }

  /* Modal inner content */
  .modal-body {
    padding: 16px !important;
  }

  /* Summary sections */
  .summary-section {
    padding: 16px !important;
  }

  /* Confirmation grid — force single column */
  .confirm-details-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* Extra small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
  #universal-header .brand-tagline {
    display: none !important;
  }

  #universal-header .brand-name {
    font-size: 1rem;
  }

  #universal-back,
  #universal-next {
    padding: 12px 10px;
    font-size: 15px;
  }

  #universal-step-content {
    padding: 16px !important;
  }
}

/* 🎭 Step Slide Transitions */
#universal-step-content {
  overflow: hidden;
  position: relative;
}

.step-slide-out-left {
  animation: slideOutLeft 300ms ease forwards;
}

.step-slide-out-right {
  animation: slideOutRight 300ms ease forwards;
}

.step-slide-in-right {
  animation: slideInRight 300ms ease forwards;
}

.step-slide-in-left {
  animation: slideInLeft 300ms ease forwards;
}

@keyframes slideOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}

@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* 🎭 Animation Classes */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.slide-in-up {
  transform: translateY(20px);
  opacity: 0;
  animation: slideInUp 0.5s ease forwards;
}

@keyframes slideInUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* 🎯 Form Elements */
.form-group {
  margin-bottom: var(--template-spacing-md);
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--template-spacing-xs);
  color: var(--template-dark);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: var(--template-spacing-md);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--template-radius-md);
  font-family: var(--template-font-family);
  font-size: var(--template-font-size-base);
  transition: var(--template-transition);
  background: white;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--template-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
  outline: none;
  border-color: var(--template-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* 🔍 Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--template-spacing-xs); }
.mb-2 { margin-bottom: var(--template-spacing-sm); }
.mb-3 { margin-bottom: var(--template-spacing-md); }
.mb-4 { margin-bottom: var(--template-spacing-lg); }
.mb-5 { margin-bottom: var(--template-spacing-xl); }

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

/* 🌟 Theme Variations */
.theme-dark {
  --template-card-bg: rgba(0, 0, 0, 0.8);
  --template-dark: #ffffff;
  --template-muted: #adb5bd;
  --template-bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%);
}

.theme-warm {
  --template-primary: #fd7e14;
  --template-accent: #e83e8c;
  --template-bg-gradient: linear-gradient(135deg, #fff5ee 0%, #ffe4e1 100%);
}

.theme-nature {
  --template-primary: #28a745;
  --template-accent: #20c997;
  --template-bg-gradient: linear-gradient(135deg, #f1f8e9 0%, #e8f5e8 100%);
}

.theme-professional {
  --template-primary: #495057;
  --template-accent: #6c757d;
  --template-bg-gradient: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* 🎨 High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --template-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --template-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --template-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
  }

  button {
    border: 2px solid currentColor;
  }
}

/* 🎭 Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ============================================
   VISUAL POLISH — UI/UX Upgrade
   ============================================ */

/* 1. Step centering — narrow card width for focus */
.step-content {
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2. Card design — solid white + left accent border */
#universal-step-content {
  background: #ffffff;
  border-left: 4px solid var(--template-primary);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(0, 40, 120, 0.04),
    0 2px 4px rgba(0, 40, 120, 0.04),
    0 4px 12px rgba(0, 40, 120, 0.06);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s ease;
}

#universal-step-content:hover {
  box-shadow:
    0 2px 4px rgba(0, 40, 120, 0.05),
    0 4px 8px rgba(0, 40, 120, 0.05),
    0 8px 20px rgba(0, 40, 120, 0.07);
}

/* 3. Form input polish — override inline 2px borders */
#universal-step-content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(.time-slot-btn):not(.guest-chip):not(.guest-stepper-btn):not(.event-type-card),
#universal-step-content select,
#universal-step-content textarea {
  border: 2px solid #e2e8f0 !important;
  border-radius: 10px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#universal-step-content input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
#universal-step-content select:focus,
#universal-step-content textarea:focus {
  border-color: var(--template-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--template-primary) 15%, transparent) !important;
  outline: none !important;
}

/* 4. Progress bar connector fill animation */
.step-connector {
  transition: background 0.4s ease;
}

.step-connector.completed {
  background: var(--template-primary);
}

/* 5. Service card hover lift */
.service-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.service-card:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 4px 6px rgba(0, 40, 120, 0.06),
    0 10px 20px rgba(0, 40, 120, 0.08) !important;
}

/* Service card selection state */
.service-card[style*="border-color: var(--template-primary)"],
.service-card[style*="border: 2px solid #007bff"],
.service-card[style*="border-color: #007bff"] {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--template-primary) 15%, transparent),
    0 4px 12px rgba(0, 40, 120, 0.1) !important;
}

/* 6. Button active press + smoother hover */
#universal-next:active:not(:disabled),
.btn-template-primary:active,
.btn-action-primary:active {
  transform: scale(0.97) !important;
}

#universal-back:active:not(:disabled) {
  transform: scale(0.97) !important;
}

button {
  transition: all 0.2s ease;
}

/* 7. Price display badges — cleaner look */
.price-large {
  font-size: 28px;
  letter-spacing: -0.02em;
}

/* 8. Service & addon images — consistent aspect ratio */
.service-image-container img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.addon-image-container img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 9. Reduced motion — respect for all new animations */
@media (prefers-reduced-motion: reduce) {
  .service-card:hover {
    transform: none !important;
  }
  #universal-next:active:not(:disabled),
  #universal-back:active:not(:disabled),
  .btn-template-primary:active {
    transform: none !important;
  }
  .step-connector {
    transition: none;
  }
}

/* 🖨️ Print Styles for Confirmation Page */
@media print {
  /* Hide non-essential elements */
  body {
    background: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Hide navigation, buttons, and interactive elements */
  #universal-header,
  #universal-footer,
  .confirmation-actions,
  .calendar-dropdown,
  button:not(.print-keep),
  nav,
  .progress-bar,
  #progress-container,
  .step-indicator,
  [onclick] {
    display: none !important;
  }

  /* Show print-only elements */
  .print-only {
    display: block !important;
  }

  /* Style the main content for print */
  .step-content {
    max-width: 100% !important;
    padding: 20px !important;
    box-shadow: none !important;
  }

  /* Make event summary prominent */
  .event-summary,
  .print-section {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    padding: 20px !important;
    margin: 15px 0 !important;
    page-break-inside: avoid;
  }

  /* Ensure text is readable */
  * {
    color: #333 !important;
  }

  /* Remove backgrounds for cleaner printing */
  .step-content > div {
    background: white !important;
    box-shadow: none !important;
  }

  /* Adjust confirmation box */
  [style*="background: #d4edda"] {
    border: 2px solid #28a745 !important;
    background: #f8fff8 !important;
  }

  /* Page margins */
  @page {
    margin: 1cm;
  }

  /* Show business info on print */
  .print-section .print-only {
    display: block !important;
  }
}

/* ============================================
   EVENT TYPE CARDS
   ============================================ */

.event-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.event-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--template-font-family);
  min-height: auto;
}

.event-type-card:hover {
  border-color: var(--template-primary);
  background: color-mix(in srgb, var(--template-primary) 6%, white);
  transform: translateY(-2px);
  box-shadow: var(--template-shadow-sm);
}

.event-type-card.selected {
  border-color: var(--template-primary);
  background: color-mix(in srgb, var(--template-primary) 10%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--template-primary) 15%, transparent);
}

.event-type-emoji {
  font-size: 1.6rem;
  line-height: 1;
  background: none !important;
  background-color: transparent !important;
}

.event-type-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #333;
  text-align: center;
}

@media (max-width: 600px) {
  .event-type-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .event-type-card {
    padding: 12px 8px;
    min-height: 44px;
  }
  .event-type-emoji {
    font-size: 1.4rem;
  }
  .event-type-label {
    font-size: 0.75rem;
  }
}

/* ============================================
   GUEST COUNT STEPPER
   ============================================ */

.guest-stepper-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.guest-chip {
  padding: 8px 16px;
  border: 2px solid #e9ecef;
  border-radius: var(--template-radius-pill);
  background: #f8f9fa;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: auto;
  font-family: var(--template-font-family);
}

.guest-chip:hover {
  border-color: var(--template-primary);
  background: color-mix(in srgb, var(--template-primary) 6%, white);
}

.guest-chip.selected {
  border-color: var(--template-primary);
  background: var(--template-primary);
  color: white;
}

.guest-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  width: fit-content;
}

.guest-stepper-btn {
  width: 48px;
  height: 48px;
  border: none;
  background: #f8f9fa;
  font-size: 1.3rem;
  font-weight: 700;
  color: #333;
  cursor: pointer;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: auto;
  border-radius: 0;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.guest-stepper-btn:hover {
  background: #e9ecef;
}

.guest-stepper-btn:active {
  background: #dee2e6;
}

.guest-stepper-num {
  min-width: 64px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #333;
  padding: 0 4px;
}

@media (max-width: 480px) {
  .guest-chip {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* ============================================
   TIME SLOT GRID
   ============================================ */

.time-slot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.time-slot-btn {
  padding: 11px 14px;
  border: 2px solid #e9ecef;
  border-radius: var(--template-radius-pill);
  background: #f8f9fa;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
  font-family: var(--template-font-family);
}

.time-slot-btn:hover {
  border-color: var(--template-primary);
  background: color-mix(in srgb, var(--template-primary) 6%, white);
}

.time-slot-btn.selected {
  border-color: var(--template-primary);
  background: var(--template-primary);
  color: white;
}

@media (max-width: 480px) {
  .time-slot-btn {
    padding: 10px 10px;
    font-size: 12px;
    min-height: 44px;
  }
}

/* ============================================
   INLINE VALIDATION ERRORS
   ============================================ */

/* Error state on inputs */
.input-error {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

/* Error message below field */
.field-error-inline {
  color: #dc3545;
  font-size: 13px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  animation: fadeInUp 0.25s ease;
}

.field-error-inline svg {
  flex-shrink: 0;
}

/* Shake animation for error card */
.v2-shake {
  animation: v2Shake 0.4s ease;
}

@keyframes v2Shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .v2-shake {
    animation: none !important;
  }
  .field-error-inline {
    animation: none !important;
  }
}

/* Toast animation keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ============================================
   STEP TRANSITION SKELETON
   ============================================ */
.step-skeleton {
  padding: 20px 0;
}

.skel-bar {
  background: linear-gradient(90deg, #e9ecef 25%, #f3f4f6 50%, #e9ecef 75%);
  background-size: 200% 100%;
  animation: skelPulse 1.4s ease infinite;
  border-radius: 8px;
  margin-bottom: 16px;
}

.skel-title {
  height: 28px;
  width: 55%;
}

.skel-subtitle {
  height: 16px;
  width: 40%;
  margin-bottom: 28px;
}

.skel-block {
  height: 48px;
  width: 100%;
}

.skel-block.short {
  width: 65%;
}

@keyframes skelPulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skel-bar {
    animation: none;
    background: #e9ecef;
  }
}

/* Spinner animation for loading states */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ===========================================
   Override browser extension highlighting
   (Price trackers like Honey, Rakuten, etc.)
   =========================================== */
.summary-total,
.summary-total *,
.event-summary span,
.event-summary h3 span,
[class*="summary"] span {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
}

/* Prevent emoji highlighting */
.event-summary span[style*="font-size: 11px"],
.step-content span {
  background: transparent !important;
  background-color: transparent !important;
}

/* ===========================================
   Service & Addon Image Styles
   =========================================== */

/* Service Image Container */
.service-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: zoom-in;
}

.service-image-container::after {
  content: '🔍';
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.service-image-container:hover::after {
  opacity: 1;
}

.service-image-container img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.service-image-container:hover img {
  transform: scale(1.05);
}

/* Addon Image Container */
.addon-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  cursor: zoom-in;
}

.addon-image-container::after {
  content: '🔍';
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.addon-image-container:hover::after {
  opacity: 1;
}

.addon-image-container img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.addon-image-container:hover img {
  transform: scale(1.03);
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .service-image-container img {
    height: 150px;
  }

  .addon-image-container img {
    height: 100px;
  }

  /* Show zoom hint on mobile by default (since no hover) */
  .service-image-container::after,
  .addon-image-container::after {
    opacity: 0.7;
  }
}

/* Small mobile screens */
@media (max-width: 480px) {
  .service-image-container img {
    height: 140px;
  }

  .addon-image-container img {
    height: 90px;
  }
}

/* Lightbox responsive */
@media (max-width: 768px) {
  #image-lightbox-modal {
    padding: 10px !important;
  }

  #image-lightbox-modal img {
    max-height: 70vh !important;
  }

  #image-lightbox-modal button[style*="top: 20px"] {
    top: 10px !important;
    right: 10px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 22px !important;
  }
}

/* Summary edit links */
.summary-edit-link:hover {
  text-decoration: underline !important;
  opacity: 0.8;
}

/* ============================================
   REVIEW ACTION BUTTONS — Mobile stacking
   ============================================ */
@media (max-width: 600px) {
  .review-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    grid-template-columns: none !important;
  }
  .review-action-book {
    order: -1; /* Book Now first (primary action) */
  }
}

/* ============================================
   5-STEP INDICATOR — Tighter spacing
   ============================================ */
@media (max-width: 600px) {
  .step-connector {
    min-width: 12px;
  }
}

@media (max-width: 375px) {
  .step-indicators {
    max-width: 100%;
    padding: 6px 4px 2px;
  }
  .step-connector {
    min-width: 8px;
    margin: 0 2px;
    margin-top: 11px;
  }
  .step-circle {
    width: 22px;
    height: 22px;
    font-size: 0.55rem;
  }
}

/* ============================================
   REVIEW SECTIONS — Accordion on mobile
   ============================================ */
@media (max-width: 600px) {
  .review-accordion {
    border: none;
  }
  .review-accordion summary {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 15px;
    color: var(--template-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
    border-radius: 12px;
    margin-bottom: 4px;
  }
  .review-accordion summary::-webkit-details-marker {
    display: none;
  }
  .review-accordion summary::after {
    content: '+';
    font-size: 1.2rem;
    font-weight: 700;
    transition: transform 0.2s ease;
  }
  .review-accordion[open] summary::after {
    content: '−';
  }
  .review-accordion > div {
    padding: 12px 16px;
  }
}

/* === Agreement / Contract Signing Step === */
.agreement-terms-box {
  max-height: 180px; overflow-y: auto;
  border: 1px solid rgba(0,0,0,0.12); border-radius: 8px;
  padding: 1rem; font-size: 0.82rem; line-height: 1.65;
  color: #4b5563; background: #f8fafc;
  margin-bottom: 1.25rem;
}
.agreement-sign-field { margin-bottom: 1rem; }
.agreement-sign-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: #374151; }
.agreement-checkbox-row { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; cursor: pointer; font-size: 0.9rem; color: #374151; }
.agreement-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--template-primary, #14b8a6); cursor: pointer; }
.agreement-legal-note { font-size: 0.72rem; color: #6b7280; font-style: italic; line-height: 1.5; margin-top: 0.5rem; }

/* ============================================
   BOTTOM SHEET MODAL (replaces confirm())
   ============================================ */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background 0.25s ease;
}
.bottom-sheet-overlay.bottom-sheet-visible {
  background: rgba(0,0,0,0.55);
}
.bottom-sheet-overlay.bottom-sheet-closing {
  background: rgba(0,0,0,0);
}

.bottom-sheet {
  background: white;
  border-radius: 20px 20px 0 0;
  padding: 16px 24px 28px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 480px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -4px 30px rgba(0,0,0,0.15);
}
.bottom-sheet.bottom-sheet-visible {
  transform: translateY(0);
}
.bottom-sheet.bottom-sheet-closing {
  transform: translateY(100%);
}

.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  background: #d1d5db;
  border-radius: 2px;
  margin: 0 auto 16px;
}

.bottom-sheet-actions {
  display: flex;
  gap: 10px;
}

.bottom-sheet-btn {
  flex: 1;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  min-height: 48px;
}
.bottom-sheet-btn-primary {
  background: var(--template-primary, #007bff);
  color: white;
}
.bottom-sheet-btn-primary:hover {
  filter: brightness(0.9);
}
.bottom-sheet-btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}
.bottom-sheet-btn-secondary:hover {
  background: #e5e7eb;
}

/* Desktop: centered modal instead of bottom sheet */
@media (min-width: 769px) {
  .bottom-sheet-overlay {
    align-items: center;
  }
  .bottom-sheet {
    border-radius: 16px;
    max-width: 420px;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .bottom-sheet.bottom-sheet-visible {
    transform: scale(1);
    opacity: 1;
  }
  .bottom-sheet.bottom-sheet-closing {
    transform: scale(0.95);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-sheet,
  .bottom-sheet-overlay {
    transition: none !important;
  }
}

/* ============================================
   EVENT TYPE CONFIRMED BADGE
   ============================================ */
.event-type-card.event-type-confirmed::after {
  content: '\2713';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: #22c55e;
  color: white;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.event-type-card {
  position: relative;
}

/* ============================================
   DATE PICKER — Custom inline calendar
   ============================================ */
.date-picker-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.date-picker-month {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
}

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

.date-picker-header button {
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: auto;
  color: #374151;
}
.date-picker-header button:hover {
  background: #f3f4f6;
}

.date-picker-header span {
  font-weight: 600;
  font-size: 0.95rem;
  color: #1a1a1a;
}

.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

.date-picker-weekdays span {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  padding: 4px 0;
}

.date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.date-picker-day {
  aspect-ratio: 1;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  color: #1a1a1a;
  transition: all 0.15s ease;
  position: relative;
  padding: 0;
  min-width: 0;
}

.date-picker-day:hover:not(.dp-disabled):not(.dp-blocked) {
  background: color-mix(in srgb, var(--template-primary) 10%, white);
}

.date-picker-day.dp-today {
  box-shadow: inset 0 0 0 2px var(--template-primary);
}

.date-picker-day.dp-selected {
  background: var(--template-primary);
  color: white;
  font-weight: 700;
}

.date-picker-day.dp-disabled {
  color: #d1d5db;
  cursor: default;
  pointer-events: none;
}

.date-picker-day.dp-blocked {
  color: #9ca3af;
  text-decoration: line-through;
  cursor: default;
  pointer-events: none;
  background: #f9fafb;
}

.date-picker-day.dp-empty {
  visibility: hidden;
}

.date-picker-month {
  max-width: 400px;
  margin: 0 auto;
}

/* ============================================
   BACKGROUND TEXTURE — Subtle noise grain
   ============================================ */
#universal-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

#universal-shell > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   STEP HEADING FONT
   ============================================ */
.step-heading {
  font-family: var(--template-heading-font);
  font-weight: 600;
}

/* ============================================
   STEP TRANSITION ANIMATIONS
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes stepEnter {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  #universal-step-content > .step-content {
    animation: stepEnter 0.35s ease-out both;
  }

  /* Stagger utilities for child elements */
  .stagger-1 { animation-delay: 0.06s; }
  .stagger-2 { animation-delay: 0.12s; }
  .stagger-3 { animation-delay: 0.18s; }
  .stagger-4 { animation-delay: 0.24s; }
  .stagger-5 { animation-delay: 0.30s; }
  .stagger-6 { animation-delay: 0.36s; }
}

/* ============================================
   PROGRESS INDICATOR POLISH
   ============================================ */

/* Completed circle shows checkmark */
.step-indicator.completed .step-circle::after {
  content: '\2713';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
}

/* Hide the number text when completed (checkmark replaces it) */
.step-indicator.completed .step-circle {
  font-size: 0;
}

/* Connector fill animates smoothly */
.step-connector {
  transition: background 0.5s ease;
}

/* Mobile: current-step label bar below circles */
@media (max-width: 480px) {
  #progress-container {
    position: relative;
  }

  .step-indicator.active .step-label {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--template-primary);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Add padding for the label bar */
  .step-indicators {
    padding-bottom: 18px;
  }
}

/* ============================================
   FOOTER — Mobile button refinements
   ============================================ */
@media (max-width: 600px) {
  #universal-back,
  #universal-next {
    min-height: 52px;
  }

  /* Back button ghost style */
  #universal-back {
    background: transparent;
    border: 2px solid var(--template-primary, #007bff);
    color: var(--template-primary, #007bff);
  }

  /* Continue button filled */
  #universal-next:not(:disabled) {
    background: var(--template-primary, #007bff);
    color: white;
  }
}

/* Google Places autocomplete dropdown above bottom sheet */
.pac-container {
  z-index: 10001 !important;
}