:root {
  /* Color System */

  /* Primary Colors - Base and Variants */
  --primary: #00566b;
  --primary-light: #007a9b;
  --primary-dark: #003d4d;
  --primary-darker: #002429;

  /* Secondary/Accent Colors */
  --secondary: #ff6f61;

  /* Semantic Colors */
  --success: #48a74c;
  --warning: #d37d00;
  --error: #f44336;
  --info: #2196f3;
  --info-light: #64b5f6;

  /* Background Colors */
  --background: #f5f5f5;
  --background-surface: #ffffff;
  --background-elevated: #ffffff;
  --background-subtle: #fafafa;
  --background-hover: #f0f0f0;

  /* Text Colors */
  --text-primary: #333333;
  --text-secondary: #4c4c4c;
  --text-inverse: #ffffff;
  --text-on-primary: #ffffff;

  /* Border Colors */
  --border-default: #575757;
  --border-light: #f0f0f0;
  --border-dark: #4d4d4d;
  --border-focus: var(--primary);

  /* Legacy/Theme Colors (for compatibility) */
  --highlight-day: #ffd700;
  --highlight-night: #2e3a59;
  --feedback-positive: var(--success);
  --feedback-negative: var(--error);

  /* Spacing System (8px grid) */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-3xl: 4rem; /* 64px */

  /* Component-Specific Spacing */
  --spacing-section-gap: var(
    --spacing-3xl
  ); /* 64px - Gap between major sections */
  --spacing-element-gap: var(
    --spacing-md
  ); /* 16px - Gap between related elements */
  --spacing-button-gap: var(--spacing-sm); /* 8px - Gap between buttons */
  --spacing-container-padding: var(--spacing-xl); /* 32px - Container padding */

  /* Typography — font stacks (self-hosted /css/fonts.css) & scale */
  /* Site-wide stacks: no embedded base64 fonts */
  --font-sans:
    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:
    "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, "SF Mono", Monaco, Consolas, monospace;
  /* Converter / smart-scheduler tokens (same faces) */
  --converter-font-sans: var(--font-sans);
  --converter-font-display: var(--font-display);
  --converter-font-mono: var(--font-mono);
  --converter-text-xs: 0.6875rem;
  --converter-text-sm: 0.875rem;
  --converter-text-base: 1rem;
  --converter-text-lg: 1.125rem;
  --converter-text-xl: 1.25rem;
  --converter-text-2xl: 1.5rem;

  --font-lg: 1.125rem; /* 18px */
  --font-xl: 1.25rem; /* 20px */
  --font-2xl: 1.5rem; /* 24px */
  --font-3xl: 2rem; /* 32px */
  --font-4xl: 2.5rem; /* 40px */
  --font-hero: 4.5rem; /* 72px */

  /* Typography System - Font Weights */
  --font-medium: 500;
  --font-semibold: 600;

  /* Typography System - Line Heights */
  --line-tight: 1.2;
}

/* Mobile Responsive Spacing - Tablet (768px and below) */
@media (max-width: 768px) {
  :root {
    /* Reduced spacing for tablet */
    --spacing-section-gap: var(--spacing-xl); /* 32px - Reduced from 64px */
    --spacing-container-padding: var(
      --spacing-md
    ); /* 16px - Reduced from 32px */
    --spacing-element-gap: var(--spacing-sm); /* 8px - Reduced from 16px */
  }
}

/* Mobile Responsive Spacing - Mobile (480px and below) */
@media (max-width: 480px) {
  :root {
    /* Further reduced spacing for mobile */
    --spacing-section-gap: var(--spacing-lg); /* 24px - Reduced from 64px */
    --spacing-container-padding: var(
      --spacing-sm
    ); /* 8px - Reduced from 32px */
    --spacing-element-gap: var(--spacing-sm); /* 8px - Keep same as tablet */
  }
}

/* ============================================
   NOVA DESIGN SYSTEM - Phase 1: Foundation
   Project Codename: Nova 🌟
   Scoped to .nova-enabled pages only
   ============================================ */

:root {
  /* Nova Color System - Based on Replit Design */
  --nova-color-primary: #0066cc;
  --nova-color-primary-hover: #0052a3;
  --nova-color-slate-900: #1a1a1a;
  --nova-color-slate-800: #1e293b;
  --nova-color-slate-700: #334155;
  --nova-color-slate-500: #64748b;
  --nova-color-slate-400: #94a3b8;
  --nova-color-slate-200: #e2e8f0;
  --nova-color-slate-100: #f1f5f9;
  --nova-color-slate-50: #f8fafc; /* Page background - matches Replit bg-slate-50 */
  --nova-color-blue-50: #eff6ff;
  --nova-color-blue-100: #dbeafe;
  --nova-color-blue-200: #bfdbfe;
  --nova-color-blue-700: #1d4ed8;
  --nova-color-green-400: #4ade80;
  --nova-color-green-500: #22c55e;

  /* Nova Spacing System */
  --nova-spacing-xs: 0.5rem; /* 8px */
  --nova-spacing-sm: 1rem; /* 16px */
  --nova-spacing-md: 1.5rem; /* 24px */
  --nova-spacing-lg: 3rem; /* 48px */
  --nova-spacing-xl: 4rem; /* 64px */

  /* Nova Typography */
  --nova-font-sans: var(--font-sans);
  --nova-font-mono: var(--font-mono);

  /* Nova Border Radius */
  --nova-radius-sm: 0.375rem; /* 6px */
  --nova-radius-md: 0.5rem; /* 8px */
  --nova-radius-lg: 0.75rem; /* 12px */
  --nova-radius-xl: 1rem; /* 16px */
  --nova-radius-full: 9999px; /* Full rounded */

  /* Nova Shadows */
  --nova-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --nova-shadow-sm:
    0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --nova-shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --nova-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --nova-shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Nova Typography Classes - Scoped to Nova-enabled pages */
.nova-enabled .nova-text-hero-title,
.nova-container .nova-text-hero-title {
  font-size: 3rem; /* 48px */
  font-weight: 700;
  line-height: 1.2;
  color: var(--nova-color-slate-900);
  letter-spacing: -0.02em;
}

.nova-enabled .nova-text-hero-title-large,
.nova-container .nova-text-hero-title-large {
  font-size: 3.75rem; /* 60px */
  font-weight: 700;
  line-height: 1.1;
  color: var(--nova-color-slate-900);
  letter-spacing: -0.03em;
}

.nova-enabled .nova-text-time-display,
.nova-container .nova-text-time-display {
  font-size: 4.5rem; /* 72px */
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--nova-color-slate-900);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum", "lnum", "ss01", "cv11";
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.nova-enabled .nova-text-time-display-large,
.nova-container .nova-text-time-display-large {
  font-size: 6rem; /* 96px */
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--nova-color-slate-900);
  letter-spacing: -0.03em;
  font-feature-settings: "tnum", "lnum", "ss01", "cv11";
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.nova-enabled .nova-text-body,
.nova-container .nova-text-body {
  font-size: 1rem; /* 16px */
  line-height: 1.5;
  color: var(--nova-color-slate-700);
}

.nova-enabled .nova-text-body-lg,
.nova-container .nova-text-body-lg {
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: var(--nova-color-slate-700);
}

.nova-enabled .nova-text-sm,
.nova-container .nova-text-sm {
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
  color: var(--nova-color-slate-500);
}

.nova-enabled .nova-text-xs,
.nova-container .nova-text-xs {
  font-size: 0.75rem; /* 12px */
  line-height: 1.5;
  color: var(--nova-color-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Nova Page Background - Light grey like Replit bg-slate-50 */
.nova-enabled body,
body.nova-enabled {
  background-color: var(--nova-color-slate-50);
}

/* Nova Section Backgrounds - White sections on grey background for visual separation */
.nova-enabled #zoneTable {
  background-color: #ffffff;
  border-bottom: 1px solid var(--nova-color-slate-200);
}

/* Nova Local Facts Section - Full width section with light gray background */
.nova-enabled .nova-local-facts-section,
.nova-container .nova-local-facts-section {
  /* Break out of container to extend full viewport width */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f8fafc; /* bg-slate-50 - light gray background */
  border-top: 1px solid var(--nova-color-slate-200);
  border-bottom: 1px solid var(--nova-color-slate-200);
  margin-top: var(--nova-spacing-lg);
  margin-bottom: 0;
  padding: 3rem var(--spacing-container-padding); /* 48px top/bottom, 24px sides */
  box-sizing: border-box;
}

/* Nova Local Facts Container - Constrain width and center */
.nova-enabled .nova-local-facts-container,
.nova-container .nova-local-facts-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Nova Local Facts Title */
.nova-enabled .nova-local-facts-title,
.nova-container .nova-local-facts-title {
  font-size: 2rem; /* 32px */
  font-weight: 700; /* Inter Bold */
  color: #0f172a; /* text-slate-900 */
  margin: 0 0 var(--nova-spacing-lg) 0;
  line-height: 1.2;
}

/* Nova Local Facts Grid - Responsive grid layout */
.nova-enabled .nova-local-facts-grid,
.nova-container .nova-local-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
  gap: var(--nova-spacing-md); /* 16px gap */
}

@media (min-width: 768px) {
  .nova-enabled .nova-local-facts-grid,
  .nova-container .nova-local-facts-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
  }
}

/* Nova Local Fact Card - White card with border */
.nova-enabled .nova-local-fact-card,
.nova-container .nova-local-fact-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0; /* border-slate-200 */
  border-radius: 0.75rem; /* rounded-xl = 12px */
  padding: 1.5rem; /* 24px */
  transition: all 0.2s ease;
}

.nova-enabled .nova-local-fact-card:hover,
.nova-container .nova-local-fact-card:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

/* Nova Local Fact Label - Small text above value */
.nova-enabled .nova-local-fact-label,
.nova-container .nova-local-fact-label {
  font-size: 0.875rem; /* text-sm = 14px */
  color: #64748b; /* text-slate-500 */
  margin-bottom: 0.25rem;
  line-height: 1.5;
}

/* Nova Local Fact Value - Bold value text */
.nova-enabled .nova-local-fact-value,
.nova-container .nova-local-fact-value {
  font-size: 1rem; /* 16px */
  font-weight: 600; /* font-semibold */
  color: #0f172a; /* text-slate-900 */
  line-height: 1.5;
}

.nova-enabled .nova-local-fact-value a,
.nova-container .nova-local-fact-value a {
  color: var(--nova-color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nova-enabled .nova-local-fact-value a:hover,
.nova-container .nova-local-fact-value a:hover {
  color: var(--nova-color-blue-700);
  text-decoration: underline;
}

/* Nova FAQ Section - Full width section with white background */
.nova-enabled .nova-faq-section,
.nova-container .nova-faq-section {
  /* Break out of container to extend full viewport width */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  border-top: 1px solid var(--nova-color-slate-200);
  border-bottom: 1px solid var(--nova-color-slate-200);
  margin-top: var(--nova-spacing-lg);
  margin-bottom: 0;
  padding: 3rem var(--spacing-container-padding); /* 48px top/bottom, 24px sides */
  box-sizing: border-box;
  min-height: 350px; /* Reserve space to prevent CLS */
}

/* Nova FAQ Container - Constrain width and center */
.nova-enabled .nova-faq-container,
.nova-container .nova-faq-container {
  max-width: 48rem; /* max-w-3xl = 768px */
  margin: 0 auto;
  width: 100%;
}

/* Nova FAQ Title */
.nova-enabled .nova-faq-title,
.nova-container .nova-faq-title {
  font-size: 2rem; /* 32px */
  font-weight: 700; /* Inter Bold */
  color: #0f172a; /* text-slate-900 */
  margin: 0 0 var(--nova-spacing-lg) 0;
  line-height: 1.2;
  text-align: center;
}

/* Nova FAQ List */
.nova-enabled .nova-faq-list,
.nova-container .nova-faq-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--nova-spacing-md); /* 16px gap between items */
}

/* Nova FAQ Item */
.nova-enabled .nova-faq-item,
.nova-container .nova-faq-item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #e2e8f0; /* border-slate-200 */
  padding-bottom: var(--nova-spacing-md);
}

.nova-enabled .nova-faq-item:last-child,
.nova-container .nova-faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Nova FAQ Question */
.nova-enabled .nova-faq-question,
.nova-container .nova-faq-question {
  font-size: 1.125rem; /* text-lg = 18px */
  font-weight: 500; /* font-medium */
  color: #0f172a; /* text-slate-900 */
  margin: 0 0 var(--nova-spacing-xs) 0;
  line-height: 1.5;
  text-align: left;
}

/* Nova FAQ Answer */
.nova-enabled .nova-faq-answer,
.nova-container .nova-faq-answer {
  font-size: 1rem; /* 16px */
  color: #64748b; /* text-slate-600 */
  line-height: 1.6;
  margin-top: var(--nova-spacing-xs);
}

.nova-enabled .nova-faq-answer p,
.nova-container .nova-faq-answer p {
  margin: 0 0 var(--nova-spacing-xs) 0;
}

.nova-enabled .nova-faq-answer p:last-child,
.nova-container .nova-faq-answer p:last-child {
  margin-bottom: 0;
}

.nova-enabled .nova-faq-answer strong,
.nova-container .nova-faq-answer strong {
  color: #0f172a; /* text-slate-900 */
  font-weight: 600;
}

/* Nova Accordion Toggle Button */
.nova-enabled .nova-accordion-toggle,
.nova-container .nova-accordion-toggle {
  background-color: transparent;
  color: var(--nova-color-primary);
  border: 1px solid var(--nova-color-slate-200);
  border-radius: var(--nova-radius-md); /* 6px */
  padding: 0.5rem 1rem; /* 8px 16px */
  font-size: 0.875rem; /* text-sm = 14px */
  font-weight: 500;
  cursor: pointer;
  display: inline-block;
  margin-top: var(--nova-spacing-xs);
  align-self: flex-start;
  transition: all 0.2s ease;
}

.nova-enabled .nova-accordion-toggle:hover,
.nova-container .nova-accordion-toggle:hover {
  background-color: var(--nova-color-slate-50);
  border-color: var(--nova-color-primary);
  color: var(--nova-color-blue-700);
}

.nova-enabled .nova-accordion-toggle:active,
.nova-container .nova-accordion-toggle:active {
  transform: scale(0.98);
}

/* Accordion content collapsed state */
.nova-enabled .nova-faq-answer.accordion-content.collapsed,
.nova-container .nova-faq-answer.accordion-content.collapsed {
  max-height: 0;
  overflow: hidden;
  display: none;
  margin-top: 0;
}

/* Nova Search Section - Full width section wrapper */
/* Base styles shared by both variants */
.nova-enabled .nova-search-section,
.nova-container .nova-search-section {
  width: 100vw;
  max-width: 100vw;
  background-color: #ffffff;
  border-top: 1px solid var(--nova-color-slate-200);
  border-bottom: 1px solid var(--nova-color-slate-200);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--nova-spacing-lg) var(--spacing-container-padding);
  box-sizing: border-box;
  z-index: 30;
}

/* Search visible immediately after hero (above fold) */
.nova-enabled .nova-search-section,
.nova-container .nova-search-section {
  position: relative; /* Not sticky initially - visible immediately */
  /* left: 50%; */
  margin-top: 0; /* No margin, directly after hero */
  margin-bottom: 0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  /* Becomes sticky when scrolled past hero (handled by JS) */
}

/* When scrolled past hero, search becomes sticky */
.nova-enabled .nova-search-section.sticky,
.nova-container .nova-search-section.sticky {
  position: sticky;
  top: 0;
  left: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Enhanced shadow when sticky */
}

/* Search bar within Nova section - centered content */
.nova-enabled .nova-search-section #searchBar,
.nova-container .nova-search-section #searchBar {
  width: 100%;
  max-width: 600px;
  padding: 0;
  margin: 0 auto;
  box-shadow: none;
  background: transparent;
  border: none;
  position: relative;
  left: auto;
  transform: none;
  z-index: 11;
  /* FIX: Reserve space to prevent CLS */
  min-height: 60px;
}

/* Center and constrain the search input within the section */
.nova-enabled .nova-search-section .search-input-wrapper,
.nova-container .nova-search-section .search-input-wrapper {
  /* FIX: Reserve space to prevent CLS */
  min-height: 50px;
  width: 100%;
  max-width: 100%;
}

/* Ensure dropdowns appear above other elements on Nova pages */
.nova-enabled .nova-search-section #searchBar .autocomplete-itemsBase,
.nova-container .nova-search-section #searchBar .autocomplete-itemsBase {
  z-index: 1001 !important;
}

.nova-enabled .nova-search-section #searchBar .recent-searches-dropdown,
.nova-container .nova-search-section #searchBar .recent-searches-dropdown {
  z-index: 1001 !important;
}

/* Nova Action Buttons Section - Full width section after search bar (not sticky) */
.nova-enabled .nova-action-buttons-section,
.nova-container .nova-action-buttons-section {
  /* Break out of container to extend full viewport width */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  border-bottom: 1px solid var(--nova-color-slate-200);
  margin-top: 0;
  margin-bottom: 0;
  padding: var(--nova-spacing-md) var(--spacing-container-padding);
  box-sizing: border-box;
  z-index: 1;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.nova-enabled .nova-action-buttons-container,
.nova-container .nova-action-buttons-container {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 100%;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center !important;
  align-content: center !important;
  gap: var(--nova-spacing-md);
  padding: 0 !important;
  text-align: center;
  position: relative;
  left: auto;
  transform: none;
}

/* Override any existing #buttons styles for Nova - More specific selectors */
.nova-enabled .nova-action-buttons-section #buttons,
.nova-container .nova-action-buttons-section #buttons,
.nova-enabled .nova-action-buttons-container#buttons,
.nova-container .nova-action-buttons-container#buttons,
.nova-enabled #buttons.nova-action-buttons-container,
.nova-container #buttons.nova-action-buttons-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 1200px !important;
  /* FIX: Reserve space to prevent CLS when buttons load */
  min-height: 50px !important;
}

/* Nova Action Buttons Styling */
.nova-enabled .nova-action-buttons-container .actionButton,
.nova-container .nova-action-buttons-container .actionButton {
  height: 3rem; /* 48px */
  padding: 0.75rem 1.5rem; /* 12px 24px */
  border-radius: var(--nova-radius-lg); /* 8px */
  font-size: 1rem; /* 16px */
  font-weight: 500;
  transition: all 200ms ease-out;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.nova-enabled .nova-action-buttons-container .actionButton:hover,
.nova-container .nova-action-buttons-container .actionButton:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

/* Primary button (Create Meeting) */
.nova-enabled .nova-action-buttons-container .actionButton.primary,
.nova-container .nova-action-buttons-container .actionButton.primary,
.nova-enabled .nova-action-buttons-container .actionButton.createMeetingButton,
.nova-container
  .nova-action-buttons-container
  .actionButton.createMeetingButton {
  background-color: var(--nova-color-primary);
  color: #ffffff;
  border: 1px solid var(--nova-color-primary);
  box-shadow: 0 2px 4px 0 rgba(0, 102, 204, 0.2);
}

.nova-enabled .nova-action-buttons-container .actionButton.primary:hover,
.nova-container .nova-action-buttons-container .actionButton.primary:hover,
.nova-enabled
  .nova-action-buttons-container
  .actionButton.createMeetingButton:hover,
.nova-container
  .nova-action-buttons-container
  .actionButton.createMeetingButton:hover {
  background-color: var(--nova-color-blue-700);
  border-color: var(--nova-color-blue-700);
  box-shadow: 0 4px 8px 0 rgba(0, 102, 204, 0.3);
}

/* Secondary buttons (Share, Copy Widget) */
.nova-enabled .nova-action-buttons-container .actionButton.secondary,
.nova-container .nova-action-buttons-container .actionButton.secondary,
.nova-enabled .nova-action-buttons-container .actionButton.shareButton,
.nova-container .nova-action-buttons-container .actionButton.shareButton,
.nova-enabled .nova-action-buttons-container .actionButton.embedButton,
.nova-container .nova-action-buttons-container .actionButton.embedButton {
  background-color: #ffffff;
  color: var(--nova-color-slate-700);
  border: 1px solid var(--nova-color-slate-200);
}

.nova-enabled .nova-action-buttons-container .actionButton.secondary:hover,
.nova-container .nova-action-buttons-container .actionButton.secondary:hover,
.nova-enabled .nova-action-buttons-container .actionButton.shareButton:hover,
.nova-container .nova-action-buttons-container .actionButton.shareButton:hover,
.nova-enabled .nova-action-buttons-container .actionButton.embedButton:hover,
.nova-container .nova-action-buttons-container .actionButton.embedButton:hover {
  border-color: var(--nova-color-slate-300);
  background-color: var(--nova-color-slate-50);
}

/* Tertiary button (Clear) */
.nova-enabled .nova-action-buttons-container .actionButton.tertiary,
.nova-container .nova-action-buttons-container .actionButton.tertiary,
.nova-enabled .nova-action-buttons-container .actionButton.resetButton,
.nova-container .nova-action-buttons-container .actionButton.resetButton {
  background-color: transparent;
  color: var(--nova-color-slate-600);
  border: 1px solid transparent;
  box-shadow: none;
}

.nova-enabled .nova-action-buttons-container .actionButton.tertiary:hover,
.nova-container .nova-action-buttons-container .actionButton.tertiary:hover,
.nova-enabled .nova-action-buttons-container .actionButton.resetButton:hover,
.nova-container .nova-action-buttons-container .actionButton.resetButton:hover {
  background-color: var(--nova-color-red-50);
  color: var(--nova-color-red-600);
  border-color: transparent;
}

/* Nova Location Suggestions Section - Full width section with card grid */
.nova-enabled .nova-location-suggestions-section,
.nova-container .nova-location-suggestions-section {
  /* Break out of container to extend full viewport width */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  background-color: #ffffff;
  border-top: 1px solid var(--nova-color-slate-200);
  border-bottom: 1px solid var(--nova-color-slate-200);
  margin-top: var(--nova-spacing-lg);
  margin-bottom: 0;
  padding: var(--nova-spacing-xl) var(--spacing-container-padding);
  box-sizing: border-box;
}

.nova-enabled .nova-location-suggestions-container,
.nova-container .nova-location-suggestions-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.nova-enabled .nova-location-suggestions-title,
.nova-container .nova-location-suggestions-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nova-color-slate-900);
  margin-bottom: var(--nova-spacing-lg);
  text-align: center;
}

.nova-enabled .nova-location-suggestions-grid,
.nova-container .nova-location-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--nova-spacing-md);
  width: 100%;
}

@media (min-width: 768px) {
  .nova-enabled .nova-location-suggestions-grid,
  .nova-container .nova-location-suggestions-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .nova-enabled .nova-location-suggestions-grid,
  .nova-container .nova-location-suggestions-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.nova-enabled .nova-location-suggestion-card,
.nova-container .nova-location-suggestion-card {
  background-color: #ffffff;
  border: 1px solid var(--nova-color-slate-200);
  border-radius: var(--nova-radius-lg);
  /* padding: var(--nova-spacing-sm); */
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all 200ms ease-out;
  display: flex;
  flex-direction: column;
  gap: var(--nova-spacing-xs);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.nova-enabled .nova-location-suggestion-card:hover,
.nova-container .nova-location-suggestion-card:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  border-color: var(--nova-color-primary);
}

.nova-enabled .nova-location-suggestion-header,
.nova-container .nova-location-suggestion-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--nova-spacing-xs);
}

.nova-enabled .nova-location-icon,
.nova-container .nova-location-icon {
  font-size: 0.875rem;
}

.nova-enabled .nova-location-abbr,
.nova-container .nova-location-abbr {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nova-color-slate-500);
  transition: color 200ms ease-out;
}

.nova-enabled .nova-location-suggestion-card:hover .nova-location-abbr,
.nova-container .nova-location-suggestion-card:hover .nova-location-abbr {
  color: var(--nova-color-primary);
}

.nova-enabled .nova-location-suggestion-name,
.nova-container .nova-location-suggestion-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--nova-color-slate-900);
  line-height: 1.3;
}

.nova-enabled .nova-location-suggestion-timezone,
.nova-container .nova-location-suggestion-timezone {
  font-size: 0.875rem;
  color: var(--nova-color-slate-500);
  line-height: 1.4;
}

/* Nova Zone Table Section - Full width section after search bar (before action buttons) */
.nova-enabled .nova-zone-table-section,
.nova-container .nova-zone-table-section {
  /* Break out of container to extend full viewport width */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  border-bottom: 1px solid var(--nova-color-slate-200);
  margin-top: 0;
  margin-bottom: 0;
  padding: var(--nova-spacing-lg) var(--spacing-container-padding);
  box-sizing: border-box;
}

/* Nova Zone Table Header */
.nova-enabled .nova-zone-table-header,
.nova-container .nova-zone-table-header {
  max-width: 1200px;
  margin: 0 auto var(--nova-spacing-md) auto;
  text-align: center;
  padding: 0;
}

.nova-enabled .nova-zone-table-title,
.nova-container .nova-zone-table-title {
  font-size: 1.5rem; /* 24px */
  font-weight: 700; /* Inter Bold */
  color: #0f172a; /* text-slate-900 */
  margin: 0 0 var(--nova-spacing-xs) 0;
  line-height: 1.3;
}

.nova-enabled .nova-zone-table-subtitle,
.nova-container .nova-zone-table-subtitle {
  font-size: 1rem; /* 16px */
  color: #64748b; /* text-slate-500 */
  margin: 0;
  line-height: 1.5;
}

.nova-enabled .nova-zone-table-section #zoneTable,
.nova-container .nova-zone-table-section #zoneTable {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: var(--nova-spacing-md) 0;
  background-color: transparent;
  border: none;
}

/* Nova Zone Table Modern - Spacing between cards */
.nova-enabled .nova-zone-table-section .zone-table-modern,
.nova-container .nova-zone-table-section .zone-table-modern {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* space-y-4 = 16px */
  max-width: 100%;
  padding: 0;
  background: transparent;
}

/* Nova Scheduler Section - Full width section after zone table and action buttons */
.nova-enabled .nova-scheduler-section,
.nova-container .nova-scheduler-section {
  /* Break out of container to extend full viewport width */
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff;
  border-top: 1px solid var(--nova-color-slate-200);
  border-bottom: 1px solid var(--nova-color-slate-200);
  margin-top: var(--nova-spacing-lg);
  margin-bottom: 0;
  padding: 3rem var(--spacing-container-padding); /* 48px top/bottom, 24px sides */
  box-sizing: border-box;
}

/* Nova Scheduler Header */
.nova-enabled .nova-scheduler-header,
.nova-container .nova-scheduler-header {
  max-width: 1200px;
  margin: 0 auto var(--nova-spacing-lg) auto;
  text-align: center;
  padding: 0;
}

.nova-enabled .nova-scheduler-title,
.nova-container .nova-scheduler-title {
  font-size: 2rem; /* 32px */
  font-weight: 700; /* Inter Bold */
  color: #0f172a; /* text-slate-900 */
  margin: 0 0 var(--nova-spacing-xs) 0;
  line-height: 1.2;
}

.nova-enabled .nova-scheduler-subtitle,
.nova-container .nova-scheduler-subtitle {
  font-size: 1rem; /* 16px */
  color: #64748b; /* text-slate-500 */
  margin: 0;
  line-height: 1.5;
}

/* Nova Scheduler Content - Constrain width and center */
.nova-enabled .nova-scheduler-content,
.nova-container .nova-scheduler-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* Nova Scheduler Section - Style inner scheduler-section */
.nova-enabled .nova-scheduler-section .scheduler-section,
.nova-container .nova-scheduler-section .scheduler-section {
  margin-bottom: 0;
  min-height: 600px;
  background: transparent;
}

/* Phase D: Converter shell inside Nova rail (no 40rem outer column; sticky bar matches converter pages) */
.nova-enabled .converter-scheduler-shell--nova,
.nova-container .converter-scheduler-shell--nova {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
  background: transparent;
}

.nova-enabled .converter-scheduler-shell--nova .scheduler-section,
.nova-container .converter-scheduler-shell--nova .scheduler-section {
  margin-bottom: 0;
  min-height: 600px;
  background: transparent;
}

.nova-enabled
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky,
.nova-container
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky {
  margin-top: 0;
}

.nova-enabled
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-inner,
.nova-container
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0 0 var(--radius-lg, 0.75rem) var(--radius-lg, 0.75rem);
  background: rgba(255, 255, 255, 0.98);
}

.nova-enabled
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-meta,
.nova-container
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-meta {
  min-width: 0;
}

.nova-enabled
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-label,
.nova-container
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.nova-enabled
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-value,
.nova-container
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22rem;
}

.nova-enabled
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-cta,
.nova-container
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-cta {
  margin-right: 0;
  border-radius: 0.9rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.nova-enabled
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-cta.actionButton.primary,
.nova-container
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-cta.actionButton.primary {
  background: #1a73e8;
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}

.nova-enabled
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-cta.actionButton.primary:hover,
.nova-container
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-cta.actionButton.primary:hover {
  background: #1669d6;
}

.nova-enabled
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-cta:disabled,
.nova-container
  .converter-scheduler-shell--nova
  .converter-scheduler-shell__sticky-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 520px) {
  .nova-enabled
    .converter-scheduler-shell--nova
    .converter-scheduler-shell__sticky-inner,
  .nova-container
    .converter-scheduler-shell--nova
    .converter-scheduler-shell__sticky-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .nova-enabled
    .converter-scheduler-shell--nova
    .converter-scheduler-shell__sticky-value,
  .nova-container
    .converter-scheduler-shell--nova
    .converter-scheduler-shell__sticky-value {
    max-width: 100%;
  }

  .nova-enabled
    .converter-scheduler-shell--nova
    .converter-scheduler-shell__sticky-cta,
  .nova-container
    .converter-scheduler-shell--nova
    .converter-scheduler-shell__sticky-cta {
    width: 100%;
    justify-content: center;
  }
}

/* Nova Component Base Classes - Scoped to Nova-enabled pages */
/* Compact hero (no min-height) + visible search above fold */
.nova-enabled .nova-hero-section,
.nova-container .nova-hero-section {
  min-height: 0; /* Remove min-height constraint - let hero size to content */
  height: auto; /* Also override height if set */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: center;
  /* Match page background for cohesive look */
  background-color: var(--nova-color-slate-50);
}

/* Mobile: Same - no min-height constraint */
@media (max-width: 768px) {
  .nova-enabled .nova-hero-section,
  .nova-container .nova-hero-section {
    min-height: 0; /* Remove min-height on mobile too */
  }
}

.nova-enabled .nova-hero-container,
.nova-container .nova-hero-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* States v3: two-column hero body (desktop), single column (mobile) */
.nova-enabled .nova-hero-body,
.nova-container .nova-hero-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nova-spacing-lg);
  width: 100%;
  align-items: start;
  overflow-x: visible;
}

.nova-enabled .nova-hero-clock-col,
.nova-container .nova-hero-clock-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  container-type: inline-size;
  container-name: nova-hero-clock;
  overflow-x: visible;
  /* DOM: meta column precedes clock for SR/tab; show clock first on mobile */
  order: 1;
}

.nova-enabled .nova-hero-meta-col,
.nova-container .nova-hero-meta-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--nova-spacing-md);
  min-width: 0;
  text-align: left;
  order: 2;
}

/* Visually hidden; used for polite, minute-throttled live region (see state hero) */
.nova-enabled .nova-sr-only,
.nova-container .nova-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.nova-enabled .nova-hero-meta-col .nova-timezone-bar,
.nova-container .nova-hero-meta-col .nova-timezone-bar {
  justify-content: flex-start;
}

.nova-enabled .nova-hero-meta-col .nova-utc-display,
.nova-container .nova-hero-meta-col .nova-utc-display {
  align-self: stretch;
  text-align: left;
  margin-top: 0;
}

.nova-enabled .nova-hero-meta-col .nova-comparison-bar,
.nova-container .nova-hero-meta-col .nova-comparison-bar {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

.nova-enabled .nova-hero-meta-hint,
.nova-container .nova-hero-meta-hint {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--nova-color-slate-700);
  white-space: pre-line;
}

.nova-enabled .nova-hero-snippet,
.nova-container .nova-hero-snippet {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--nova-color-slate-600);
}

.nova-enabled .nova-secondary-zone,
.nova-container .nova-secondary-zone {
  margin-top: var(--nova-spacing-lg);
  padding-top: var(--nova-spacing-md);
  border-top: 1px solid var(--nova-color-slate-200);
  width: 100%;
  max-width: 28rem;
  text-align: center;
}

.nova-enabled .nova-secondary-kicker,
.nova-container .nova-secondary-kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nova-color-slate-500);
  margin-bottom: 0.375rem;
}

.nova-enabled .nova-time-display-secondary,
.nova-container .nova-time-display-secondary {
  font-size: clamp(2rem, 8vw, 3.5rem);
  margin-bottom: 0.25rem;
}

.nova-enabled .nova-time-date-secondary,
.nova-container .nova-time-date-secondary {
  font-size: 1rem;
  margin-top: 0;
}

.nova-enabled .nova-secondary-subline,
.nova-container .nova-secondary-subline {
  font-size: 0.8125rem;
  color: var(--nova-color-slate-600);
  margin-top: 0.375rem;
}

@media (min-width: 769px) {
  .nova-enabled .nova-hero-body,
  .nova-container .nova-hero-body {
    grid-template-columns: 1fr minmax(17.5rem, 20rem);
    gap: var(--nova-spacing-xl);
    align-items: start;
  }

  .nova-enabled .nova-hero-clock-col,
  .nova-container .nova-hero-clock-col {
    grid-column: 1;
    grid-row: 1;
    align-items: flex-end;
    text-align: right;
  }

  .nova-enabled .nova-hero-meta-col,
  .nova-container .nova-hero-meta-col {
    grid-column: 2;
    grid-row: 1;
  }

  .nova-enabled .nova-hero-clock-col .nova-time-display-wrapper,
  .nova-container .nova-hero-clock-col .nova-time-display-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .nova-enabled .nova-hero-clock-col .nova-secondary-zone,
  .nova-container .nova-hero-clock-col .nova-secondary-zone {
    text-align: right;
    align-self: flex-end;
  }

  /* Narrow meta column: keep pill on one row; full name still in data / FAQ */
  .nova-enabled .nova-hero-meta-col .nova-timezone-bar,
  .nova-container .nova-hero-meta-col .nova-timezone-bar {
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    justify-content: flex-start;
  }

  .nova-enabled .nova-hero-meta-col .nova-timezone-item,
  .nova-container .nova-hero-meta-col .nova-timezone-item {
    flex-shrink: 0;
  }

  .nova-enabled .nova-hero-meta-col .nova-timezone-abbr,
  .nova-container .nova-hero-meta-col .nova-timezone-abbr,
  .nova-enabled .nova-hero-meta-col .nova-timezone-offset,
  .nova-container .nova-hero-meta-col .nova-timezone-offset {
    font-size: 0.8125rem;
  }

  .nova-enabled .nova-hero-meta-col .nova-timezone-name,
  .nova-container .nova-hero-meta-col .nova-timezone-name {
    font-size: 0.8125rem;
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
  }

  .nova-enabled .nova-hero-meta-col .nova-timezone-offset,
  .nova-container .nova-hero-meta-col .nova-timezone-offset {
    flex-shrink: 0;
  }

  .nova-enabled .nova-hero-meta-col .nova-timezone-dst-badge,
  .nova-container .nova-hero-meta-col .nova-timezone-dst-badge {
    flex-shrink: 0;
    font-size: 0.6875rem;
  }
}

/* Dual local-time hero: secondary stays on a row under primary; clip so clocks never bleed into meta column */
.nova-enabled .nova-hero-section[data-secondary-iana] .nova-hero-body,
.nova-container .nova-hero-section[data-secondary-iana] .nova-hero-body {
  gap: var(--nova-spacing-xl);
}

.nova-enabled .nova-hero-section[data-secondary-iana] .nova-hero-clock-col,
.nova-container .nova-hero-section[data-secondary-iana] .nova-hero-clock-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

.nova-enabled
  .nova-hero-section[data-secondary-iana]
  .nova-time-display-wrapper,
.nova-container
  .nova-hero-section[data-secondary-iana]
  .nova-time-display-wrapper {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.nova-enabled .nova-hero-section[data-secondary-iana] .nova-secondary-zone,
.nova-container .nova-hero-section[data-secondary-iana] .nova-secondary-zone {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.nova-enabled .nova-hero-section[data-secondary-iana] .nova-hero-meta-col,
.nova-container .nova-hero-section[data-secondary-iana] .nova-hero-meta-col {
  position: relative;
  z-index: 1;
}

@media (min-width: 769px) {
  .nova-enabled .nova-hero-section[data-secondary-iana] .nova-hero-clock-col,
  .nova-container .nova-hero-section[data-secondary-iana] .nova-hero-clock-col {
    align-items: flex-end;
  }

  .nova-enabled .nova-hero-section[data-secondary-iana] .nova-secondary-zone,
  .nova-container .nova-hero-section[data-secondary-iana] .nova-secondary-zone {
    align-self: flex-end;
  }
}

.nova-enabled .nova-hero-card,
.nova-container .nova-hero-card {
  background: #ffffff;
  border-radius: var(--nova-radius-xl);
  padding: var(--nova-spacing-lg);
  box-shadow: var(--nova-shadow-xl);
  max-width: 600px;
  margin: 0 auto;
}

.nova-enabled .nova-zone-card,
.nova-container .nova-zone-card {
  background: #ffffff;
  border: 1px solid var(--nova-color-slate-200);
  border-radius: var(--nova-radius-lg);
  padding: var(--nova-spacing-sm);
  transition: all 200ms ease-out;
}

.nova-enabled .nova-zone-card:hover,
.nova-container .nova-zone-card:hover {
  border-color: rgba(0, 102, 204, 0.3);
  box-shadow: var(--nova-shadow-md);
}

.nova-enabled .nova-button-base,
.nova-container .nova-button-base {
  height: 3rem; /* 48px */
  padding: 0.75rem 1.5rem;
  border-radius: var(--nova-radius-md);
  font-weight: 500;
  transition: all 200ms ease-out;
  box-shadow: var(--nova-shadow-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nova-spacing-xs);
}

.nova-enabled .nova-button-base:hover,
.nova-container .nova-button-base:hover {
  transform: scale(1.02);
  box-shadow: var(--nova-shadow-sm);
}

.nova-enabled .nova-button-primary,
.nova-container .nova-button-primary {
  background-color: var(--nova-color-primary);
  color: #ffffff;
  border: none;
}

.nova-enabled .nova-button-primary:hover,
.nova-container .nova-button-primary:hover {
  background-color: var(--nova-color-primary-hover);
}

.nova-enabled .nova-button-secondary,
.nova-container .nova-button-secondary {
  background-color: var(--nova-color-slate-100);
  color: var(--nova-color-slate-900);
  border: 1px solid var(--nova-color-slate-200);
}

.nova-enabled .nova-button-secondary:hover,
.nova-container .nova-button-secondary:hover {
  background-color: var(--nova-color-slate-200);
}

/* ============================================
   NOVA HERO SECTION - Phase 2: Hero Styling
   ============================================ */

/* Live Mode Indicator */
.nova-enabled .nova-live-indicator,
.nova-container .nova-live-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--nova-color-primary);
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--nova-spacing-md);
}

.nova-enabled .nova-live-dot,
.nova-container .nova-live-dot {
  position: relative;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: var(--nova-color-green-500);
  animation: nova-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.nova-enabled .nova-live-dot::before,
.nova-container .nova-live-dot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--nova-color-green-400);
  opacity: 0.75;
  animation: nova-ping 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes nova-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes nova-ping {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Hero Header */
.nova-enabled .nova-hero-header,
.nova-container .nova-hero-header {
  margin-bottom: var(--nova-spacing-lg);
  space-y: var(--nova-spacing-sm);
  align-self: center;
  max-width: 1200px;
  width: 100%;
}

.nova-enabled .nova-hero-title,
.nova-container .nova-hero-title {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--nova-color-slate-900);
  letter-spacing: -0.02em;
  margin-bottom: var(--nova-spacing-sm);
}

.nova-enabled .nova-hero-title-accent,
.nova-container .nova-hero-title-accent {
  color: var(--nova-color-primary);
}

.nova-enabled .nova-hero-location,
.nova-container .nova-hero-location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--nova-color-slate-500);
  font-size: 1.125rem;
  margin-top: var(--nova-spacing-sm);
}

.nova-enabled .nova-location-icon,
.nova-container .nova-location-icon {
  font-size: 1.25rem;
}

/* Time Display */
.nova-enabled .nova-time-display-wrapper,
.nova-container .nova-time-display-wrapper {
  /* padding: var(--nova-spacing-lg) 0; */
  margin-bottom: var(--nova-spacing-md);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: visible;
}

.nova-enabled .nova-time-display,
.nova-container .nova-time-display {
  font-size: clamp(3.5rem, 12vw, 10rem);
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--nova-color-slate-900);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum", "lnum", "ss01", "cv11";
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: var(--nova-spacing-sm);
  white-space: nowrap;
}

/* Primary state hero clock: keep sans stack (some builds inherit mono elsewhere). */
body.nova-enabled #novaStateTime.nova-time-display {
  font-family: var(--font-sans);
}

.nova-enabled .nova-time-date,
.nova-container .nova-time-date {
  font-size: 1.25rem;
  color: var(--nova-color-slate-500);
  font-weight: 400;
  margin-top: var(--nova-spacing-sm);
}

/* Timezone Context Bar - Sleek design matching Replit */
.nova-enabled .nova-timezone-bar,
.nova-container .nova-timezone-bar {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background-color: var(--nova-color-blue-50);
  border: 1px solid var(--nova-color-blue-100);
  border-radius: var(--nova-radius-full);
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  color: var(--nova-color-slate-700);
  margin-bottom: var(--nova-spacing-md);
  line-height: 1.5;
}

.nova-enabled .nova-timezone-item,
.nova-container .nova-timezone-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nova-enabled .nova-timezone-icon,
.nova-container .nova-timezone-icon {
  font-size: 1rem;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  color: var(--nova-color-primary);
  flex-shrink: 0;
}

.nova-enabled .nova-timezone-abbr,
.nova-container .nova-timezone-abbr {
  font-weight: 600;
  color: var(--nova-color-slate-900);
  font-size: 0.875rem;
}

.nova-enabled .nova-timezone-divider,
.nova-container .nova-timezone-divider {
  width: 1px;
  height: 1rem;
  background-color: var(--nova-color-blue-200);
  flex-shrink: 0;
}

.nova-enabled .nova-timezone-name,
.nova-container .nova-timezone-name {
  color: var(--nova-color-slate-700);
  font-size: 0.875rem;
}

.nova-enabled .nova-timezone-offset,
.nova-container .nova-timezone-offset {
  color: var(--nova-color-slate-700);
  font-size: 0.875rem;
  font-family: var(--font-sans);
  font-feature-settings: "tnum", "lnum", "ss01", "cv11";
  font-variant-numeric: tabular-nums;
}

.nova-enabled .nova-timezone-dst-badge,
.nova-container .nova-timezone-dst-badge {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--nova-radius-full);
  font-weight: 500;
  line-height: 1.5;
}

/* DST Active - Blue, prominent */
.nova-enabled .nova-timezone-dst-badge-active,
.nova-container .nova-timezone-dst-badge-active {
  background-color: var(--nova-color-blue-100);
  color: var(--nova-color-blue-700);
}

/* Observes DST (but not active) - Grey, muted */
.nova-enabled .nova-timezone-dst-badge-observes,
.nova-container .nova-timezone-dst-badge-observes {
  background-color: var(--nova-color-slate-100);
  color: var(--nova-color-slate-600);
}

/* No DST - Slate, distinct */
.nova-enabled .nova-timezone-dst-badge-no-dst,
.nova-container .nova-timezone-dst-badge-no-dst {
  background-color: var(--nova-color-slate-200);
  color: var(--nova-color-slate-700);
}

/* Local Time Comparison Bar */
.nova-enabled .nova-comparison-bar,
.nova-container .nova-comparison-bar {
  background: #ffffff;
  border-radius: var(--nova-radius-xl);
  box-shadow: var(--nova-shadow-sm);
  border: 1px solid var(--nova-color-slate-200);
  padding: var(--nova-spacing-sm);
  max-width: 28rem;
  margin: 0 auto var(--nova-spacing-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nova-spacing-md);
}

.nova-enabled .nova-comparison-left,
.nova-container .nova-comparison-left {
  text-align: left;
}

.nova-enabled .nova-comparison-right,
.nova-container .nova-comparison-right {
  text-align: right;
}

.nova-enabled .nova-comparison-label,
.nova-container .nova-comparison-label {
  font-size: 0.75rem;
  color: var(--nova-color-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nova-enabled .nova-comparison-icon,
.nova-container .nova-comparison-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.nova-enabled .nova-comparison-time,
.nova-container .nova-comparison-time {
  font-size: 1.25rem;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--nova-color-slate-800);
  font-feature-settings: "tnum", "lnum", "ss01", "cv11";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nova-enabled .nova-comparison-diff,
.nova-container .nova-comparison-diff {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nova-color-primary);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.nova-enabled .nova-time-diff-icon,
.nova-container .nova-time-diff-icon {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
}

.nova-enabled .nova-time-diff-icon-ahead,
.nova-container .nova-time-diff-icon-ahead {
  color: #10b981; /* green-500 */
}

.nova-enabled .nova-time-diff-icon-behind,
.nova-container .nova-time-diff-icon-behind {
  color: #f59e0b; /* amber-500 */
}

.nova-enabled .nova-time-diff-icon-same,
.nova-container .nova-time-diff-icon-same {
  color: var(--nova-color-slate-500);
}

/* Live UTC — card aligned with meta column / timezone bar family */
.nova-enabled .nova-utc-display,
.nova-container .nova-utc-display {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding: 0.625rem 0.875rem;
  background: linear-gradient(
    145deg,
    var(--nova-color-blue-50) 0%,
    var(--nova-color-slate-50) 100%
  );
  border: 1px solid var(--nova-color-blue-100);
  border-radius: var(--nova-radius-lg);
  box-shadow: var(--nova-shadow-xs);
}

.nova-enabled .nova-utc-display-mark,
.nova-container .nova-utc-display-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--nova-color-primary);
  background-color: rgba(0, 102, 204, 0.12);
  border-radius: var(--nova-radius-sm);
}

.nova-enabled .nova-utc-display-body,
.nova-container .nova-utc-display-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nova-enabled .nova-utc-display-kicker,
.nova-container .nova-utc-display-kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nova-color-slate-500);
  line-height: 1.3;
}

.nova-enabled .nova-utc-display-row,
.nova-container .nova-utc-display-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}

.nova-enabled .nova-utc-display-time,
.nova-container .nova-utc-display-time {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 2.8vw, 1.1875rem);
  font-weight: 600;
  font-feature-settings: "tnum", "lnum", "ss01", "cv11";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--nova-color-slate-900);
  line-height: 1.2;
}

.nova-enabled .nova-utc-display-sep,
.nova-container .nova-utc-display-sep {
  color: var(--nova-color-slate-400);
  font-weight: 600;
  user-select: none;
}

.nova-enabled .nova-utc-display-date,
.nova-container .nova-utc-display-date {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--nova-color-slate-600);
  line-height: 1.3;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .nova-enabled .nova-hero-title,
  .nova-container .nova-hero-title {
    font-size: 1.875rem; /* 30px */
  }

  .nova-enabled .nova-time-display:not(.nova-time-display-secondary),
  .nova-container .nova-time-display:not(.nova-time-display-secondary) {
    font-size: clamp(3.25rem, 14vw, 4.5rem);
  }

  .nova-enabled .nova-timezone-bar,
  .nova-container .nova-timezone-bar {
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    gap: 0.75rem;
  }

  .nova-enabled .nova-comparison-bar,
  .nova-container .nova-comparison-bar {
    flex-direction: column;
    text-align: center;
  }

  .nova-enabled .nova-comparison-left,
  .nova-container .nova-comparison-left,
  .nova-enabled .nova-comparison-right,
  .nova-container .nova-comparison-right {
    text-align: center;
    width: 100%;
  }
}

/* Two-column hero (769+): always cap vw by clock-column width (cqi) — laptops often
   have columns >560px but 11vw still overflows when right-aligned */
@media (min-width: 769px) {
  .nova-enabled .nova-time-display:not(.nova-time-display-secondary),
  .nova-container .nova-time-display:not(.nova-time-display-secondary) {
    font-size: clamp(2.75rem, min(12vw, 14cqi), 10rem);
  }
}

@media (min-width: 1024px) {
  .nova-enabled .nova-hero-title,
  .nova-container .nova-hero-title {
    font-size: 2.75rem; /* defer visual dominance to clock */
  }

  .nova-enabled .nova-time-display:not(.nova-time-display-secondary),
  .nova-container .nova-time-display:not(.nova-time-display-secondary) {
    font-size: clamp(3.25rem, min(11vw, 14cqi), 10rem);
  }
}

/* Dual IANA state hero: larger primary clock, smaller secondary (must follow generic .nova-time-display rules) */
.nova-enabled
  .nova-hero-section[data-secondary-iana]
  .nova-time-display:not(.nova-time-display-secondary),
.nova-container
  .nova-hero-section[data-secondary-iana]
  .nova-time-display:not(.nova-time-display-secondary) {
  font-size: clamp(4rem, 14vw, 10rem);
}

.nova-enabled
  .nova-hero-section[data-secondary-iana]
  .nova-time-display-secondary,
.nova-container
  .nova-hero-section[data-secondary-iana]
  .nova-time-display-secondary {
  font-size: clamp(1.35rem, 4.5vw, 2.35rem);
  margin-bottom: 0.125rem;
}

.nova-enabled .nova-hero-section[data-secondary-iana] .nova-time-date-secondary,
.nova-container
  .nova-hero-section[data-secondary-iana]
  .nova-time-date-secondary {
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .nova-enabled
    .nova-hero-section[data-secondary-iana]
    .nova-time-display:not(.nova-time-display-secondary),
  .nova-container
    .nova-hero-section[data-secondary-iana]
    .nova-time-display:not(.nova-time-display-secondary) {
    font-size: clamp(3.5rem, 17vw, 5.25rem);
  }

  .nova-enabled
    .nova-hero-section[data-secondary-iana]
    .nova-time-display-secondary,
  .nova-container
    .nova-hero-section[data-secondary-iana]
    .nova-time-display-secondary {
    font-size: clamp(1.2rem, 5vw, 2rem);
  }
}

@media (min-width: 769px) {
  .nova-enabled
    .nova-hero-section[data-secondary-iana]
    .nova-time-display:not(.nova-time-display-secondary),
  .nova-container
    .nova-hero-section[data-secondary-iana]
    .nova-time-display:not(.nova-time-display-secondary) {
    font-size: clamp(3.35rem, min(13.5vw, 15cqi), 10rem);
  }

  .nova-enabled
    .nova-hero-section[data-secondary-iana]
    .nova-time-display-secondary,
  .nova-container
    .nova-hero-section[data-secondary-iana]
    .nova-time-display-secondary {
    font-size: clamp(1.4rem, min(3.5cqi, 4.5vw), 2.5rem);
  }
}

@media (min-width: 1024px) {
  .nova-enabled
    .nova-hero-section[data-secondary-iana]
    .nova-time-display:not(.nova-time-display-secondary),
  .nova-container
    .nova-hero-section[data-secondary-iana]
    .nova-time-display:not(.nova-time-display-secondary) {
    font-size: clamp(3.85rem, min(12.5vw, 15cqi), 10rem);
  }

  .nova-enabled
    .nova-hero-section[data-secondary-iana]
    .nova-time-display-secondary,
  .nova-container
    .nova-hero-section[data-secondary-iana]
    .nova-time-display-secondary {
    font-size: clamp(1.5rem, min(3.8cqi, 4.75vw), 2.65rem);
  }
}

/* Responsive Typography - Mobile adjustments */
@media (max-width: 768px) {
  .nova-enabled .nova-text-hero-title,
  .nova-container .nova-text-hero-title {
    font-size: 2.25rem; /* 36px */
  }

  .nova-enabled .nova-text-time-display,
  .nova-container .nova-text-time-display {
    font-size: 4.5rem; /* 72px - keep same */
  }

  .nova-enabled .nova-text-time-display-large,
  .nova-container .nova-text-time-display-large {
    font-size: 4.5rem; /* 72px - reduced from 96px */
  }

  .nova-enabled .nova-hero-section,
  .nova-container .nova-hero-section {
    padding: var(--nova-spacing-md) var(--nova-spacing-sm);
    min-height: auto; /* Mobile: Let hero size naturally */
  }

  .nova-enabled .nova-hero-card,
  .nova-container .nova-hero-card {
    padding: var(--nova-spacing-md);
  }
}

body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: var(--background);
  color: var(--text-primary);
}

button {
  font-family: inherit;
  font-size: 0.1rem;
  display: inline-flex;
  align-items: center; /* Vertically center the contents */
  justify-content: center;
}

/* Media query to remove bullets on screens smaller than 600px */
@media (max-width: 600px) {
  li {
    list-style-type: none;
    padding: 0rem;
  }
  li {
    padding-left: 0.2rem;
  }
}

.title {
  font-size: 1.5rem;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
  /* color: var(--primary); */
  /* FIX: Minimal space reservation to prevent CLS - only height */
  min-height: 1.2em;
}

.link {
  color: var(--text-primary);
}

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

#timeLabel {
  margin-right: 1em;
}

#themeLabel {
  margin-right: 1em;
}

#secondsLabel {
  margin-right: 1em;
}

#tableViewLabel {
  margin-right: 1em;
}

#clockLabel {
  margin-right: 1em;
}

#container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--spacing-container-padding);
  /* margin-top: 1em; */
}

/* Nova state hero: span full content width so the grid clock column gets real space */
#container > .nova-hero-section {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  box-sizing: border-box;
}

#container.hide {
  display: none;
}

/* Section Spacing - Major page sections */
.scheduler-section {
  margin-bottom: var(--spacing-lg);
  /* Reserve space for all scheduler sections to prevent CLS */
  min-height: 600px;
}

/* Homepage scheduler gets same treatment, but can be more specific if needed */
#homePageSchedulerSection {
  min-height: 600px;
}

/* Skeleton loader styles - prevents CLS by reserving exact space */
/* These styles must be in the main stylesheet to load immediately */
/* Using fixed pixel values to ensure they work even if CSS variables aren't loaded */
.scheduler-skeleton {
  width: 100%;
  display: block !important; /* Force visible */
  visibility: visible !important;
  opacity: 1 !important;
}

.skeleton-scheduler-card {
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 24px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.95) 100%
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
}

/* Recommendations skeleton */
.skeleton-recommendations-container {
  margin-bottom: 24px;
}

.skeleton-recommendations-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 16px 0;
  box-sizing: border-box;
}

.skeleton-recommendation-slot {
  flex: 0 0 auto;
  width: 150px;
  min-height: 65px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  box-sizing: border-box;
}

/* Advisor skeleton */
.skeleton-advisor {
  height: 60px;
  border-radius: 8px;
  margin-bottom: 24px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  box-sizing: border-box;
}

/* Timeline skeleton */
.skeleton-timeline-container {
  margin-bottom: 24px;
}

.skeleton-timeline-header {
  margin-bottom: 16px;
}

.skeleton-timeline-title {
  height: 20px;
  width: 150px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.skeleton-timeline {
  height: 120px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  box-sizing: border-box;
}

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

/* CLS fix: Scheduler overlays skeleton. Must beat .scheduler-skeleton { visibility: visible !important } above. */
#homePageSchedulerSection:has([data-scheduler]) .scheduler-skeleton,
.scheduler-section:has([data-scheduler]) .scheduler-skeleton {
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
}

#homePageSchedulerSection:has([data-scheduler]) .scheduler-skeleton *,
.scheduler-section:has([data-scheduler]) .scheduler-skeleton * {
  animation: none !important;
}

/* Mobile responsive skeleton adjustments */
@media (max-width: 768px) {
  .skeleton-scheduler-card {
    padding: 24px 16px;
  }

  .skeleton-recommendation-slot {
    width: 160px;
    min-height: 80px;
  }

  .skeleton-timeline {
    height: 100px;
  }
}

.smart-converter-section {
  margin-top: var(--spacing-section-gap);
  margin-bottom: var(--spacing-section-gap);
}

.time-strip-wrapper {
  margin-top: var(--spacing-section-gap);
  margin-bottom: var(--spacing-section-gap);
}

.zone-table-modern:empty {
  display: none;
}

#zoneTable:empty {
  display: none;
}

#localFactsContainer {
  margin-top: var(--spacing-section-gap);
  margin-bottom: var(--spacing-section-gap);
}

.localInfoContainer {
  margin-top: var(--spacing-section-gap);
  margin-bottom: var(--spacing-section-gap);
  /* Reserve space to prevent CLS - FAQ section can be tall (323px based on shift measurement) */
  min-height: 350px;
}

/* Prevent layout shift when FAQ section is hidden - use visibility instead of display */
.localInfoContainer.hide {
  visibility: hidden;
  min-height: 350px;
  /* Keep in layout flow - don't remove from document flow */
  position: relative;
  height: 350px;
  overflow: hidden;
}

.hide {
  display: none !important;
}

/*
 * Visibility override for action-bar buttons.
 * The mobile rules below (≤480px and ≤375px) declare
 * `.actionButton { display: inline-flex !important; }`, which has equal
 * specificity to `.hide` but appears later in source order and so wins
 * the cascade — re-showing buttons such as #liveUpdateButton even when
 * JS has hidden them. Bumping the selector to two classes (0,0,2,0)
 * lets `hide` reliably keep these buttons hidden until JS toggles it off.
 */
.actionButton.hide {
  display: none !important;
}

/* Exception: FAQ section uses visibility to prevent CLS on all pages */
.localInfoContainer.hide {
  display: flex !important; /* Keep flex layout */
  visibility: hidden !important;
  min-height: 350px !important;
  height: 350px !important;
  overflow: hidden !important;
}

.show {
  display: flex;
}

.setTimeModal {
  display: flex;
}

select {
  appearance: none;
  padding: 8px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  background-color: transparent;
  /* width: 200px; */
  font-size: 0.8em;
  color: var(--text-primary);
  outline: none;
  /* Remove the default outline on focus */
  cursor: pointer;
}

/* Styles for the options */
option {
  background-color: var(--background-surface);
  color: var(--text-primary);
  padding: 8px;
  /* transition: background-color 0.3s ease; */
  /* Smooth transition for background color change */
}

/* Style for the select arrow */
select::-ms-expand {
  display: none;
}

select:after {
  content: "\25BC";
  /* Unicode character for a downward-pointing triangle */
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

/* Style for the select when focused */
select:focus {
  border-color: var(--border-focus);
}

/* Hover effect for options */
option:hover {
  background-color: var(--background-hover);
}

.setTimeButton {
  background: var(--feedback-positive);
  margin-left: 0.5em;
}

.cancelTimeButton {
  background: var(--feedback-negative);
}

.selectTimeButton {
  appearance: none;
  padding: 0.5em;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  /* background-color: transparent; */
  /* width: 200px; */
  font-size: 0.5em;
  color: var(--info-light);
  outline: none;
  cursor: pointer;
}

#mainDisplay {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  /* FIX: Reserve space to prevent CLS when content loads via document.write */
  min-height: 220px;
}

#toggleContainer {
  display: flex;
  flex-direction: column;
  justify-content: right;
  font-size: 1.4em;
}

.toggle {
  display: flex;
  justify-content: right;
  margin-right: 1em;
}
#mainContainer {
  display: flex;
}
.mainItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-element-gap);
}
#mainFirst {
  margin-right: var(--spacing-md);
  margin-left: var(--spacing-md);
}
#mainSecond {
  margin-left: var(--spacing-md);
}
#mainThird {
  margin-left: var(--spacing-md);
  font-size: 1.4rem;
}
.timeContainer {
  display: flex;
  gap: var(--spacing-xs);
  align-items: baseline;
}
.mainTime {
  font-size: var(--font-hero);
  font-weight: var(--font-semibold);
  line-height: var(--line-tight);
}
.mainSuffix {
  align-content: end;
  font-size: var(--font-2xl);
  font-weight: var(--font-medium);
  line-height: var(--line-tight);
}

#utcTime {
  font-size: 1.8rem;
  color: var(--primary);
  /* FIX: Minimal space reservation to prevent CLS - only height */
  min-height: 1.2em;
}
#secondTime {
  font-size: 1.8rem;
  color: var(--primary);
  /* FIX: Minimal space reservation to prevent CLS - only height */
  min-height: 1.2em;
}
#thirdTime {
  font-size: 1.8rem;
  color: var(--primary);
  /* FIX: Minimal space reservation to prevent CLS - only height */
  min-height: 1.2em;
}
#utcSuffix {
  color: var(--primary);
}
#secondSuffix {
  color: var(--primary);
}
#thirdSuffix {
  color: var(--primary);
}
#utcDate {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
  /* FIX: Minimal space reservation to prevent CLS - only height */
  min-height: 1.2em;
}

#secondDate {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
  /* FIX: Minimal space reservation to prevent CLS - only height */
  min-height: 1.2em;
}

#thirdDate {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
  /* FIX: Minimal space reservation to prevent CLS - only height */
  min-height: 1.2em;
}

/* Homepage (root): match converter live-hero clock faces (JetBrains Mono + label rhythm).
   smart-converter.css is not loaded on `/`; tokens come from :root --converter-font-*.
   Sizing is fluid via clamp() so the UTC + Local clocks stay side-by-side at every
   viewport down to 320px without overflow:
   - Time floor 1.5rem (24px) at iPhone SE 320px — JetBrains Mono "11:18:16" at 24px
     is ~115px wide, fits each ~152px column once `.mainItem` margins zero out below.
   - Time slope 7vw — at 768px tablet → 54px, hits the 3.85rem ceiling at ~880px+
     so the desktop hero feel (61.6px) is preserved.
   - Suffix tracks at ~40% of time so "PM" stays balanced against "11:18:16". */
body.page-type-root #mainContainer #utcTime,
body.page-type-root #mainContainer #secondTime,
body.page-type-root #mainContainer #thirdTime {
  font-family: var(--converter-font-mono);
  font-size: clamp(1.5rem, 7vw, 3.85rem);
  font-weight: 700;
  font-feature-settings: "tnum", "lnum", "zero";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  min-height: 0;
  color: hsl(220 25% 12%);
}

body.page-type-root #mainContainer #utcSuffix,
body.page-type-root #mainContainer #secondSuffix,
body.page-type-root #mainContainer #thirdSuffix {
  font-family: var(--converter-font-mono);
  font-size: clamp(0.625rem, 2.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1;
  align-self: baseline;
  font-feature-settings: "tnum", "lnum", "zero";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  opacity: 0.88;
  color: hsl(220 12% 42%);
}

body.page-type-root #mainContainer .timeContainer {
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}

/* Uppercase zone labels — same scale/tracking as converter hero .title */
body.page-type-root #mainContainer .mainItem .title {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: hsl(220 12% 42%);
  margin-bottom: 0.375rem;
  width: 100%;
}

body.page-type-root #mainContainer #mainSecond .title {
  color: hsl(var(--conv-accent, 28 90% 55%));
}

body.page-type-root #mainContainer #utcDate,
body.page-type-root #mainContainer #secondDate,
body.page-type-root #mainContainer #thirdDate {
  font-size: 0.8125rem;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  color: var(--text-secondary);
}

/*
 * Homepage: pull FAQ up under the converter scheduler shell.
 */
body.page-type-root.scheduler-converter-layout .converter-scheduler-shell {
  padding-bottom: 0;
}

body.page-type-root.scheduler-converter-layout
  .converter-scheduler-shell
  .scheduler-section {
  margin-bottom: 0;
}

/* Beat #homePageSchedulerSection { min-height: 600px } — that extra 180px read as “shell” gap above the sticky bar */
body.page-type-root.scheduler-converter-layout #homePageSchedulerSection {
  min-height: 420px;
}

body.page-type-root .localInfoContainer {
  margin-top: 0;
}

/* Homepage: empty local-facts wrapper still inherited section-gap margins */
body.page-type-root #localFactsContainer {
  margin-top: 0;
  margin-bottom: 0;
}

body.page-type-root #localFactsContainer:has(#localFactsList) {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

#utcLabel {
  font-size: 3em;
}

.offsetContainer {
  font-size: 3em;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.offset {
  margin-bottom: -0.7em;
}

.arrow {
  display: flex;
  justify-content: center;
}

#searchBar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: 100%;
  width: 100%;
  margin-top: var(--spacing-md);
  /* FIX: Reserve space to prevent CLS */
  min-height: 60px;
}

.search-input-wrapper {
  position: relative;
  width: 89%;
  max-width: 89%;
  display: flex;
  align-items: center;
  /* FIX: Reserve space to prevent CLS */
  min-height: 50px;
}

#searchBar {
  position: relative;
}

.search-icon {
  position: absolute;
  left: var(--spacing-md);
  color: var(--text-secondary);
  pointer-events: none;
  z-index: 1;
  transition: color 0.2s ease;
}

#searchBox {
  margin-top: var(--spacing-sm);
  width: 100%;
  padding: 0.875rem var(--spacing-md) 0.875rem 3rem;
  border: 2px solid var(--border-default);
  border-radius: 0.5rem;
  outline: none;
  font-size: 1rem;
  line-height: 1.5;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.95) 100%
  );
  color: var(--text-primary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#searchBox:focus {
  border-color: var(--border-focus);
  box-shadow: 0 4px 12px rgba(0, 86, 107, 0.15);
  background: var(--background-surface);
}

.search-input-wrapper:focus-within .search-icon {
  color: var(--primary);
}

#searchBox::placeholder {
  opacity: 0.6;
  font-size: 1rem;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Recent Searches Dropdown */
.recent-searches-dropdown {
  position: absolute;
  top: calc(100% + var(--spacing-sm));
  /* left: 50%; */
  /* transform: translateX(-50%); */
  width: 89%;
  max-width: 89%;
  background: var(--background-surface);
  border: 2px solid var(--border-default);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
}

.recent-searches-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem var(--spacing-md);
  border-bottom: 1px solid var(--border-default);
  background: var(--background-subtle);
  border-radius: 0.5rem 0.5rem 0 0;
}

.recent-searches-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.clear-recent-searches {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
}

.clear-recent-searches:hover {
  background: var(--background-hover);
  color: var(--primary);
}

.recent-searches-list {
  padding: var(--spacing-sm) 0;
}

.recent-search-item {
  padding: 0.75rem var(--spacing-md);
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid var(--border-light);
}

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

.recent-search-item:hover {
  background-color: var(--background-subtle);
}

.recent-search-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.recent-search-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
}

.recent-search-details {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .search-input-wrapper {
    width: 95%;
    max-width: 95%;
  }

  #searchBox {
    padding: 0.75rem 0.875rem 0.75rem 2.75rem;
    font-size: 0.9375rem;
  }

  .search-icon {
    left: 0.75rem;
    width: 18px;
    height: 18px;
  }

  .recent-searches-dropdown {
    width: 95%;
    max-width: 95%;
  }
}

.searchResultItem {
  background: var(--background-surface);
  border-bottom: 1px solid var(--border-light);
}

#rightBar {
  text-align: right;
  display: flex;
  justify-content: end;
}

.settings {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.setting {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-light);
}

.setting:last-child {
  border-bottom: none;
}

.setting-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.leftSetting {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
  min-width: 0;
}

.setting-label {
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 0.375rem;
  line-height: 1.4;
}

.setting-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.rightSetting {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: 0.125rem;
}

.rightSetting .link {
  color: var(--primary);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.rightSetting .link:hover {
  color: var(--secondary);
  text-decoration: underline;
}

.icon {
  width: 1em;
  height: 1em;
}

#settingsIcon {
  font-size: 2em;
  cursor: pointer;
}

#settingsModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
}

#settingsModal.show {
  display: block;
}

.modalContent {
  margin: 5% auto;
  padding: 2rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  position: relative;
  font-size: 1rem;
  background-color: var(--background-surface);
  color: var(--text-primary);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modalContent h2 {
  margin: 0 0 1.5rem 0;
  font-size: 1.5rem;
  color: var(--text-primary);
  font-weight: 600;
}

.modalContent.bodyDark {
  background-color: var(--background-surface);
  color: var(--text-primary);
}

/* Close button */
.close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-secondary);
  background: none;
  border: none;
  transition: color 0.2s;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.close:hover {
  color: var(--text-primary);
  background-color: rgba(0, 0, 0, 0.05);
}

#header {
  display: flex;
  vertical-align: middle;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-right: 1em;
}

.headerItem {
  margin-left: 1em;
  font-size: 1.3em;
}
/* .desktop-nav ul,
.mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.desktop-nav ul {
  display: flex;
  gap: 15px;
}

.desktop-nav a,
.mobile-menu a {
  color: var(--link);
  text-decoration: none;
} */

/* .mobile-nav {
  display: none;
} */

.hamburger {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 10px;
  position: absolute;
  top: 60px;
  right: 20px;
  z-index: 1002; /* above #searchBar / autocomplete (1000) so menu links stay clickable */
  background-color: var(--background-elevated);
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--border-default);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive styles */
/* @media (max-width: 768px) {
  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    display: flex;
  }
} */

#zones {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 1em;
  flex-wrap: wrap;
}

.zone {
  display: flex;
  flex-direction: column;
  margin-left: 1em;
  margin-top: 1em;
  align-items: center;

  /* border styles */
  padding-left: 1em;
  padding-right: 1em;
  border-radius: 2em;
}

.zoneTitle {
  display: flex;
  align-items: center;
  width: 100%;
}

.zoneTime {
  font-size: 3em;
}

.zoneLabel {
  font-size: 1.5em;
}

.zoneDateLabel {
  font-size: 1.5em;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoneOffsetLabel {
  text-align: right;
  display: flex;
}

.zoneSubLabel {
  font-size: 1.5em;
}
#converterTable {
  width: 27rem;
  overflow: scroll;
  font-size: 1rem;
}
#tableElementConverter {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  table-layout: auto;

  /* width: 100%; */
  max-width: 100%;
  overflow-x: auto;
  margin: 20px 0;
}
th,
td {
  border: 1px solid var(--border-default);
  padding: 8px;
  text-align: center;
  position: relative;
}
th {
  background-color: var(--background-subtle);
  position: sticky;
  top: 0;
  z-index: 1;
}
.sticky {
  position: sticky;
  left: 0;
  z-index: 2;
}
.day-night-icon {
  font-size: 0.5rem;
  /* margin-top: 2px; */
}
.am .day-night-icon::before {
  content: "☀️"; /* Sun icon */
}
.pm .day-night-icon::before {
  content: "🌙"; /* Moon icon */
}
.cell-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.time {
  font-size: 1rem;
}
.ampm {
  font-size: 0.7rem;
}
.timezone {
  background-color: var(--info);
  position: sticky;
  left: 0;
  z-index: 2;
  color: var(--text-on-primary);
}
@media (max-width: 600px) {
  th,
  td {
    padding: 4px;
    font-size: 1rem;
  }
}
#zoneTable {
  /* display: grid;
  grid-template-columns: auto repeat(2, 1fr); */
  /* max-width: 90%; */
  font-size: 1.3rem;
  background: transparent;
}

.zoneTableHour {
  display: grid;
  justify-content: center;
  align-content: stretch;
  align-items: stretch;
  justify-items: center;
}

.zoneTableTime {
  display: grid;
  justify-content: center;
  align-content: stretch;
  align-items: stretch;
  justify-items: center;
}

.zoneTableLabel {
  color: var(--text-primary);
}

.zoneTableSubLabel {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* color: #d3d0a6; */
  font-size: 0.7em;
  margin-top: 0.5rem;
  color: var(--text-secondary);
}

.zoneTableTimeValue {
  color: var(--primary);
}

.zoneTableDate {
  font-size: 0.7em;
  display: flex;
  justify-self: flex-end;
  color: var(--text-secondary);
}

.gridItem {
  /* max-width: 10em; */
  /* overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;  */
}

.edit-tooltip {
  position: absolute;
  bottom: 30%;
  left: 115%;
  transform: translateX(-50%);
  /* background-color: transparent; */
  /* color: whitesmoke; */
  /* border: 1px solid #ddd; */
  /* padding: 5px 10px; */
  /* border-radius: 5px; */
  /* font-size: 12px; */
  /* opacity: 0; */
  /* width: 6em; */
  /* transition: opacity 0.3s ease; */
  margin-left: 0.3em;
}

.snapshotInfo {
  position: absolute;
  top: 0.3em;
  left: 2em;
  transform: translateX(-50%);
  margin-left: 0.3em;
  fill: coral;
}

.tooltip {
  position: relative;
  /* display: inline-block; */
  cursor: pointer;
  bottom: 0.2em;
}

.tooltip:hover .tooltip-text {
  display: block;
}

.tooltip-text {
  display: none;
  position: absolute;
  /* background-color: #a3a1a1; */
  color: var(--text-primary);
  padding: 5px;
  border-radius: 5px;
  border-style: solid;
  /* stroke: beige; */
  border-width: 0.1em;
  /* top: 100%; */
  /* left: 50%; */
  left: 6.5em;
  font-size: 0.6em;
  transform: translateX(-50%);
  z-index: 1;
}

.buttonText {
  font-size: 0.9375rem;
  margin: 0;
  display: inline;
  align-content: center;
  position: relative;
  z-index: 1;
}

.buttonIcon {
  position: relative;
  z-index: 1;
}

.yellowText {
  color: var(--label);
  padding-top: 0.3em;
  margin-left: 0.3em;
}

.bottomSearchText {
  margin-left: 0.3em;
  margin-bottom: 0.2em;
  color: var(--text-secondary);
}

.time-container {
  display: flex;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.time-container:hover .edit-tooltip {
  opacity: 1;
}

#locationSuggestions {
  display: flex;
  margin-top: 1rem;
  align-content: center;
  justify-content: center;
}

.locationSuggestion {
  border-color: var(--background);
  background-color: var(--background-surface);
  border-width: 0.15em;
  border-style: ridge;
  margin-right: var(--spacing-xs);
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.locationSuggestionLink {
  color: var(--text-primary);
  transition: color 0.2s ease;
}

.locationSuggestion:hover {
  border-color: var(--primary);
  background-color: var(--background);
}

.locationSuggestion:hover .locationSuggestionLink {
  color: var(--primary);
}

.locationSuggestionTitle {
  font-size: 1rem;
  padding: var(--spacing-sm);
}

.gridColumn-1 {
  grid-column: 1;
  max-width: 1em;
  margin-right: 0.5em;
  /* margin-left: 0.7em; */
}

.bottomGrid1 {
  width: 2.5rem;
}

.gridColumn-2 {
  grid-column: 2;
  max-width: 12em;
  margin-bottom: 0.3em;
  margin-right: 0.3em;
  margin-left: 0.5rem;
}

.gridColumn-3 {
  grid-column: 3;
  max-width: 8em;
}

.gridColumn-4 {
  grid-column: 4;
  max-width: 3em;
}

.zoneTableElement {
  /* display: flex;
  flex-direction: row; */
}

.zoneTableHoursList {
}

.buttonIcon {
  display: flex;
  align-items: center;
}

/* Button Base Styles */
.actionButton {
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  cursor: pointer;
  margin-right: var(--spacing-button-gap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
  white-space: nowrap;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* Ripple effect on click */
.actionButton::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition:
    width 0.6s,
    height 0.6s;
  pointer-events: none;
}

.actionButton:active::before {
  width: 300px;
  height: 300px;
}

/* Primary Button Style - For main actions (now outlined to match others) */
.actionButton.primary,
.actionButton.createMeetingButton {
  background-color: var(--background-surface);
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.actionButton.primary:hover,
.actionButton.createMeetingButton:hover {
  background-color: rgba(0, 86, 107, 0.06);
  border-color: var(--primary);
  box-shadow: 0 1px 3px rgba(0, 86, 107, 0.1);
}

.actionButton.primary:active,
.actionButton.createMeetingButton:active {
  background-color: rgba(0, 86, 107, 0.12);
  border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(0, 86, 107, 0.15);
  transform: scale(0.98);
}

.actionButton.primary:focus-visible,
.actionButton.createMeetingButton:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Secondary Button Style - For supporting actions */
.actionButton.secondary,
.actionButton.shareButton,
.actionButton.embedButton {
  background-color: var(--background-surface);
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.actionButton.secondary:hover,
.actionButton.shareButton:hover,
.actionButton.embedButton:hover {
  background-color: rgba(0, 86, 107, 0.06);
  border-color: var(--primary);
  box-shadow: 0 1px 3px rgba(0, 86, 107, 0.1);
}

.actionButton.secondary:active,
.actionButton.shareButton:active,
.actionButton.embedButton:active {
  background-color: rgba(0, 86, 107, 0.12);
  border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(0, 86, 107, 0.15);
  transform: scale(0.98);
}

.actionButton.secondary:focus-visible,
.actionButton.shareButton:focus-visible,
.actionButton.embedButton:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Tertiary/Destructive Button Style - For reset/clear actions */
.actionButton.tertiary,
.actionButton.resetButton {
  background-color: var(--background-surface);
  color: var(--text-secondary);
  border-color: var(--border-default);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.actionButton.tertiary:hover,
.actionButton.resetButton:hover {
  background-color: var(--background-subtle);
  border-color: var(--border-dark);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.actionButton.tertiary:active,
.actionButton.resetButton:active {
  background-color: var(--background-hover);
  border-color: var(--border-dark);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(0) scale(0.98);
}

.actionButton.tertiary:focus-visible,
.actionButton.resetButton:focus-visible {
  outline: 2px solid var(--text-secondary);
  outline-offset: 2px;
}

.shareButton {
  /* margin-right: 1em; */
  /* border: 2px solid var(--last); */
  /* color: var(--text); */
  /* box-shadow: 0 2px 4px #f3efef8f; */
}

#createMeetingButton {
  margin-right: 1em;
}

.resetButton {
  /* border: 2px solid var(--text-primary); */
  /* color: var(--text); */
  /* box-shadow: 0 2px 4px #f3efef8f; */
}

.resetButton:hover {
  transform: scale(1.05);
}

/* Button-specific overrides can be added here if needed */

/* Mobile Responsive Styles for Buttons */
@media (max-width: 768px) {
  #buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-md);
    width: 100%;
    box-sizing: border-box;
  }

  .actionButton {
    flex: 1 1 auto;
    min-width: calc(50% - var(--spacing-xs));
    max-width: 100%;
    padding: var(--spacing-sm) 0.75rem;
    font-size: 0.875rem;
    margin-right: 0;
    white-space: normal;
    text-align: center;
  }

  .buttonText {
    font-size: 0.875rem;
  }

  .buttonIcon {
    flex-shrink: 0;
  }

  .buttonIcon svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  #buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    width: 100% !important;
    padding: 0 var(--spacing-xs) !important;
    gap: var(--spacing-xs) !important;
    margin-top: var(--spacing-md);
    justify-content: unset !important;
    max-width: 100% !important;
  }

  .actionButton {
    /* width: 100% !important; */
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0.5rem 0.375rem !important;
    font-size: 0.75rem;
    gap: 0.25rem;
    box-sizing: border-box;
    overflow: hidden;
    margin-right: 0 !important;
    margin-left: 0 !important;
    white-space: normal;
    text-align: center;
    display: inline-flex !important;
  }

  .buttonText {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
  }

  .buttonIcon {
    flex-shrink: 0;
  }

  .buttonIcon svg {
    width: 14px;
    height: 14px;
  }
}

/* Extra specific for iPhone SE and similar small devices */
@media (max-width: 375px) {
  #buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .actionButton {
    padding: 0.45rem 0.25rem !important;
    font-size: 0.7rem;
  }

  .buttonText {
    font-size: 0.7rem;
  }

  .buttonIcon svg {
    width: 12px;
    height: 12px;
  }
}

#emptyMeetingToast {
  align-items: center;
  background-color: transparent;
  border-color: var(--last);
  border-style: solid;
  color: var(--last);
  margin-top: 1em;
  padding: 10px;
  border-radius: 5px;
  opacity: 0;
  /* transition: opacity 0.3s ease-in-out; */
  display: none;
}

#emptyMeetingToast.show {
  opacity: 1;
  display: block;
}

.toast {
  align-items: center;
  background-color: transparent;
  border-color: var(--last);
  border-style: solid;
  color: var(--last);
  margin-top: 1em;
  padding: 10px;
  border-radius: 5px;
  opacity: 0;
  /* transition: opacity 0.3s ease-in-out; */
  display: none;
}

.toast.show {
  opacity: 1;
  display: block;
}

#buttons {
  display: flex;
  margin-top: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  max-width: 100%;
  padding: 0 var(--spacing-md);
  /* FIX: Reserve space to prevent CLS when buttons load */
  min-height: 50px;
}

/* Search bar */
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid transparent;
  padding: 10px;
  font-size: 1.3em;
}

input[type="text"] {
  width: 100%;
}

input[type="submit"] {
  background-color: DodgerBlue;
  color: #a8a4a4;
}

.autocomplete-itemsBase {
  position: absolute;
  top: calc(100% + var(--spacing-xs));
  left: 50%;
  transform: translateX(-50%);
  width: 89%;
  max-width: 89%;
  background: var(--background-surface);
  border: 2px solid var(--border-default);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
  margin-top: var(--spacing-sm);
  display: none;
}

.autocomplete-itemsBase:not(:empty) {
  display: block;
}

.autocomplete-items {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-sm) 0;
}

.autocomplete-items div {
  padding: 0;
  cursor: pointer;
}

.searchResultItem {
  background: var(--background-surface);
  border-bottom: 1px solid var(--border-light);
  padding: 0.75rem var(--spacing-md);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.searchResultItem:last-child {
  border-bottom: none;
}

.searchResultItem:hover {
  background-color: var(--background-subtle);
}

.searchResultItem:hover .autocompleteItemName {
  color: var(--primary);
}

.autocompleteItemName {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  padding: 0;
  transition: color 0.2s ease;
}

.autocompleteItemName strong {
  font-weight: 700;
  color: var(--primary);
  background-color: rgba(0, 86, 107, 0.1);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
}

.autocomplete-active .autocompleteItemName strong {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.2);
}

.bottomSearchText {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0.25rem 0 0 0;
  padding: 0;
}

.autocomplete-active {
  background-color: var(--primary) !important;
  color: var(--text-inverse);
}

.autocomplete-active .autocompleteItemName {
  color: var(--text-inverse) !important;
}

.autocomplete-active .bottomSearchText {
  color: rgba(255, 255, 255, 0.9) !important;
}

.autocomplete-active:hover {
  background-color: var(--primary) !important;
}

.autocomplete-activeLight {
  background-color: rgba(0, 86, 107, 0.1) !important;
}

@media (max-width: 768px) {
  .autocomplete-itemsBase {
    width: 95%;
    max-width: 95%;
  }

  .searchResultItem {
    padding: 0.625rem 0.875rem;
  }

  .autocompleteItemName {
    font-size: 0.9375rem;
  }

  .bottomSearchText {
    font-size: 0.8125rem;
  }
}

.toggle {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 0;
}

/* Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 2.7em;
  height: 1.5em;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1em;
  width: 1em;
  left: 0.3em;
  bottom: 0.25em;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#localFactsContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background-color: #043c04; */
  left: 0;
  right: 0;
  /* border-style: solid; */
}

#localFactsList {
  width: 40%;
}
.localFact {
  color: #58e0c7;
  display: flex;
  flex-direction: row;
  margin-top: 0.2rem;
}

.localFactKey {
  color: var(--text-primary);
  font-size: 1rem;
  margin-right: 0.2rem;
}

.localFactValue {
  color: var(--secondary);
}

.localInfoContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.localInfoTitle {
  /* margin-top: 3em; */
  justify-content: center;
  display: flex;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.outerLocalInfo {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
  margin-bottom: 15px;
}

.localKey {
  color: var(--text-primary);
  font-size: 1.2rem;
  margin: 0;
  font-weight: normal;
}

.localValue {
  grid-column: 1;
  color: var(--text-secondary);
  word-wrap: break-word;
  font-size: 1rem;
  display: block;
  /* overflow: hidden; Hide any content that overflows its container */
  /* white-space: nowrap; Prevent the text from wrapping */
  /* text-overflow: ellipsis; Show an ellipsis (...) when the text overflows */
}

.localInfoList {
  width: 80%;
  word-wrap: break-word;
}

/* Media query for desktop devices */
@media (min-width: 768px) {
  .localInfoList {
    width: 35%;
  }
}

.accordion-content {
  max-height: none;
  overflow: visible;
  display: block;
}

.accordion-content.collapsed {
  max-height: 0;
  overflow: hidden;
  display: none;
}

.accordion-toggle {
  background-color: var(--primary);
  color: #ffffff;
  border: 2px solid var(--text-primary);
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  display: inline-block;
}

.accordion-toggle:hover,
.accordion-toggle:focus {
  background-color: #0088b0;
  transform: scale(1.05);
}

.accordion-toggle:active {
  background-color: #0088b0;
  transform: scale(1);
}

/* Blog */
table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #ccced8;
  padding: 0.5em;
  border-style: solid;
}

#outerBlogContent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.blogContent {
  width: 50%;
}

.blogContent h2 {
  margin-top: 2em;
}

.blogContent h3 {
  color: var(--last);
}

.blogContent p {
  color: var(--label);
}

.blogContent li {
  color: var(--label);
}

.blogContent a {
  color: var(--link);
}

.blogContent strong {
  color: orange;
}

.blogContent table {
  display: flex;
  align-items: center;
  justify-content: center;
}

.blogContent img {
  width: 20em;
  height: 20em;
}

/* Enhanced Mobile Menu Styling */
.mobile-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  margin-bottom: 0.5rem;
}

.menu-item .link {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--text-primary, #333);
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.2s;
  border-radius: 6px;
}

.menu-item .link:hover {
  background-color: var(--primary, #00566b);
  color: white;
}

.menu-section {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 1rem;
}

.menu-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.section-title {
  font-weight: bold;
  color: var(--primary, #00566b);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
  display: block;
  padding: 0.5rem 1rem;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.submenu li {
  margin-bottom: 0.25rem;
}

.submenu .link {
  display: block;
  padding: 0.5rem 1rem 0.5rem 2rem;
  color: var(--text-primary, #333);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s;
  border-radius: 4px;
  position: relative;
}

.submenu .link:hover {
  background-color: var(--primary, #00566b);
  color: white;
  transform: translateX(4px);
}

.submenu .link::before {
  content: "→";
  position: absolute;
  left: 1rem;
  opacity: 0;
  transition: all 0.2s;
  pointer-events: none;
}

.submenu .link:hover::before {
  opacity: 1;
  transform: translateX(-2px);
}

/* Zone Table Modern Styling */
.zone-table-modern {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 100%;
  padding: 1rem;
  background: transparent;
}

.zone-table-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  background: linear-gradient(to right, #f0f9ff, #fef7cd);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Legacy zone table row hover (non-Nova) */
.zone-table-row:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.zone-table-row.night-theme {
  background: linear-gradient(to right, #e0e7ff, #f1f5f9);
}

.zone-table-row.highlighted {
  animation: zone-table-highlight-pulse 2s infinite;
}

@keyframes zone-table-highlight-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

/* Nova Zone Table Location - Icon first, then details */
.nova-enabled .zone-table-location,
.nova-container .zone-table-location {
  display: flex;
  align-items: center;
  gap: 1rem; /* gap-4 = 16px */
  flex: 1;
  min-width: 0;
}

/* Legacy zone table location */
.zone-table-location {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.zone-table-flag {
  font-size: 2rem;
  display: inline-block;
  width: 2rem;
  height: 1.5rem;
  overflow: hidden;
  flex-shrink: 0;
}

.zone-table-flag svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Interactive States */
.zone-table-row.editing {
  background: linear-gradient(to right, #dbeafe, #fef7cd);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
  transform: translateY(-1px);
}

.zone-table-row.editing.night-theme {
  background: linear-gradient(to right, #c7d2fe, #e0e7ff);
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.2);
}

.zone-table-time-input {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--primary);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: #1f2937;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.zone-table-time-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: rgba(255, 255, 255, 1);
}

.zone-table-time-button.updated {
  animation: zone-table-time-updated 1s ease-in-out;
}

@keyframes zone-table-time-updated {
  0% {
    background-color: #10b981;
    color: white;
    transform: scale(1.05);
  }
  50% {
    background-color: #059669;
    transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    color: inherit;
    transform: scale(1);
  }
}

/* Hover effects for better interactivity */
.zone-table-time-button:hover {
  background-color: rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.zone-table-row:hover .zone-table-icon {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.zone-table-row:hover .zone-table-flag {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

/* Theme change animation */
.zone-table-row.theme-changed {
  animation: zone-table-theme-change 0.5s ease-in-out;
}

@keyframes zone-table-theme-change {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
  100% {
    transform: scale(1);
  }
}

/* Icon hover effects */
.zone-table-icon {
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #fbbf24;
}

.zone-table-icon:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

.zone-table-icon:active {
  transform: scale(0.95);
}

.zone-table-location-details {
  flex: 1;
  min-width: 0;
}

/* Nova Zone Table Typography - Match Replit */
.nova-enabled .zone-table-city,
.nova-container .zone-table-city {
  font-weight: 700; /* font-bold */
  color: #0f172a; /* text-slate-900 */
  font-size: 1.125rem; /* text-lg = 18px */
  margin: 0;
  line-height: 1.5;
}

.nova-enabled .zone-table-country,
.nova-container .zone-table-country {
  font-size: 0.875rem; /* text-sm = 14px */
  color: #64748b; /* text-slate-500 */
  margin-top: 0.25rem;
  line-height: 1.5;
}

/* Legacy zone table typography */
.zone-table-city {
  font-weight: 600;
  color: #1e293b;
  font-size: 1.1rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zone-table-country {
  font-size: 0.875rem;
  color: #64748b;
  margin-top: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zone-table-time-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.zone-table-icon.night {
  background-color: #a5b4fc;
}

.zone-table-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.zone-table-icon.day svg {
  color: #d97706;
}

.zone-table-icon.night svg {
  color: #4338ca;
}

/* Nova Zone Table Time Display - Match Replit */
.nova-enabled .zone-table-time-display,
.nova-container .zone-table-time-display {
  text-align: right;
  min-width: 140px;
}

.nova-enabled .zone-table-time-button,
.nova-container .zone-table-time-button {
  font-family: var(--font-sans);
  font-size: 1.5rem; /* text-2xl = 24px */
  font-weight: 700; /* font-bold */
  color: #0f172a; /* text-slate-900 */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1.2;
  font-feature-settings: "tnum", "lnum", "ss01", "cv11";
  font-variant-numeric: tabular-nums; /* tabular-nums */
}

.nova-enabled .zone-table-date,
.nova-container .zone-table-date {
  font-size: 0.875rem; /* text-sm = 14px - increased from 12px for better visibility */
  color: #475569; /* text-slate-600 - darker than slate-500 for better contrast */
  margin-top: 0.375rem; /* Slightly more spacing from time */
  line-height: 1.5;
  font-weight: 500; /* Medium weight for better readability */
}

/* Nova Zone Table Remove Button - Always visible for better UX */
.nova-enabled .zone-table-remove-button,
.nova-container .zone-table-remove-button {
  opacity: 0.6; /* Always visible but subtle */
  transition: all 0.2s ease;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem; /* h-8 = 32px */
  height: 2rem;
  border-radius: 50%;
  color: #64748b;
  padding: 0;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.nova-enabled .zone-table-row:hover .zone-table-remove-button,
.nova-container .zone-table-row:hover .zone-table-remove-button {
  opacity: 1;
}

.nova-enabled .zone-table-remove-button:hover,
.nova-container .zone-table-remove-button:hover {
  background-color: #fef2f2; /* hover:bg-red-50 */
  color: #dc2626; /* hover:text-red-600 */
  opacity: 1;
}

.nova-enabled .zone-table-remove-button:active,
.nova-container .zone-table-remove-button:active {
  transform: scale(0.95);
}

.nova-enabled .zone-table-remove-button svg,
.nova-container .zone-table-remove-button svg {
  width: 1rem; /* w-4 = 16px */
  height: 1rem;
  stroke-width: 2;
}

/* Legacy zone table time display */
.zone-table-time-display {
  text-align: right;
  min-width: 140px;
}

.zone-table-time-button {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  width: 100%;
}

.zone-table-time-button:hover {
  background-color: #f1f5f9;
  color: var(--primary);
}

.zone-table-time-input {
  width: 100%;
  padding: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  border: 2px solid var(--primary);
  border-radius: 0.5rem;
  outline: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.95);
  transition: all 0.2s ease;
  font-family: inherit;
}

.zone-table-time-input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  border-color: var(--primary);
  background: rgba(255, 255, 255, 1);
}

.zone-table-time-input::placeholder {
  color: #9ca3af;
  font-weight: 500;
  font-size: 1.2rem;
}

/* Error state for invalid time input */
.zone-table-time-input.error {
  border-color: #ef4444;
  background-color: #fef2f2;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Success state for valid time input */
.zone-table-time-input.success {
  border-color: #10b981;
  background-color: #f0fdf4;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.zone-table-date {
  font-size: 0.875rem;
  color: #64748b;
  margin-top: 0.25rem;
}

/* Sun and Moon SVG Icons */
.zone-table-sun-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #d97706;
}

.zone-table-moon-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #4338ca;
}

/* Responsive design */
@media (max-width: 768px) {
  .zone-table-row {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    min-height: auto;
  }

  .zone-table-location {
    flex: 1;
    min-width: 0;
    gap: var(--spacing-sm);
  }

  .zone-table-flag {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1rem;
    flex-shrink: 0;
  }

  .zone-table-location-details {
    min-width: 0;
    overflow: hidden;
  }

  .zone-table-city {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .zone-table-country {
    font-size: 0.75rem;
    margin-top: 0.125rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .zone-table-time-section {
    flex-shrink: 0;
    gap: 0.5rem;
    align-items: center;
  }

  .zone-table-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
  }

  .zone-table-icon svg {
    width: 1rem;
    height: 1rem;
  }

  .zone-table-time-display {
    min-width: 80px;
    text-align: right;
  }

  .zone-table-time-button {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    line-height: 1.2;
  }

  .zone-table-date {
    font-size: 0.7rem;
    margin-top: 0.125rem;
    line-height: 1.1;
  }

  .zone-table-time-input {
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
    width: 80px;
  }
}

/* General mobile improvements for better fit */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
    transform: scale(0.95);
    transform-origin: center top;
  }

  .container {
    padding-left: var(--spacing-container-padding);
    padding-right: var(--spacing-container-padding);
    max-width: 100%;
  }

  .content {
    padding-left: var(--spacing-container-padding);
    padding-right: var(--spacing-container-padding);
  }

  /* Ensure time strip has enough space */
  .time-strip-wrapper {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  /* Responsive typography for hero time display */
  .mainTime {
    font-size: var(--font-4xl); /* 40px on tablet */
  }

  .mainSuffix {
    font-size: var(--font-xl); /* 20px on tablet */
  }
}

/* Extra small mobile screens — avoid scaling <body>: it inflates scrollWidth, skews
   getBoundingClientRect/boundingBox in tests, and shrinks the whole UI unexpectedly. */
@media (max-width: 480px) {
  /* Full-bleed sections often use width:100vw, which ignores the vertical scrollbar gutter
     and can widen layout scrollWidth slightly past the layout viewport on mobile. */
  html {
    overflow-x: hidden;
  }

  /* Responsive typography for hero time display on mobile */
  .mainTime {
    font-size: var(--font-3xl); /* 32px on mobile */
  }

  .mainSuffix {
    font-size: var(--font-lg); /* 18px on mobile */
  }

  /* Home page only: drop the per-item horizontal margins so the two
     side-by-side clocks (UTC + Local) get the full container width and
     don't lose the ~48px of inter-column padding the desktop layout
     can afford. Combined with the 7vw clamp on `#utcTime` /
     `#secondTime`, this keeps `11:18:16 PM` from clipping at any phone
     width down to 320px. Other page types keep their margins so single-
     clock hero pages stay visually anchored. */
  body.page-type-root #mainFirst,
  body.page-type-root #mainSecond,
  body.page-type-root #mainThird {
    margin-left: 0;
    margin-right: 0;
  }

  .zone-table-row {
    padding: 0.375rem;
    gap: 0.375rem;
  }

  .zone-table-city {
    font-size: 0.8rem;
  }

  .zone-table-country {
    font-size: 0.7rem;
  }

  .zone-table-time-button {
    font-size: 0.9rem;
    padding: 0.2rem 0.4rem;
  }

  .zone-table-date {
    font-size: 0.65rem;
  }

  .zone-table-icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  .zone-table-icon svg {
    width: 0.9rem;
    height: 0.9rem;
  }

  .zone-table-flag {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 0.875rem;
  }

  .zone-table-time-display {
    min-width: 70px;
  }

  .zone-table-time-input {
    width: 70px;
    font-size: 0.9rem;
    padding: 0.2rem 0.4rem;
  }
}

/* Override existing zone table styles when modern class is applied */
.zone-table-modern #zoneTable {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-width: 100%;
  padding: var(--spacing-md);
  background: transparent;
  font-size: inherit;
  grid-template-columns: none;
}

.zone-table-modern .zoneTableElement {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  background: linear-gradient(to right, #f0f9ff, #fef7cd);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
}

.zone-table-modern .zoneTableElement:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.zone-table-modern .zoneTableElement.night-theme {
  background: linear-gradient(to right, #e0e7ff, #f1f5f9);
}

/* Settings Modal Responsive Styles */
@media (max-width: 768px) {
  .modalContent {
    width: 95%;
    max-width: none;
    margin: 10% auto;
    padding: 1.5rem;
    font-size: 0.95rem;
  }

  .modalContent h2 {
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
  }

  .setting {
    padding: 1rem 0;
  }

  .setting-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .leftSetting {
    width: 100%;
  }

  .setting-label {
    font-size: 0.95rem;
  }

  .setting-description {
    font-size: 0.8125rem;
  }

  .rightSetting {
    width: 100%;
    justify-content: flex-start;
  }

  .toggle {
    margin-right: 0;
  }

  .switch {
    width: 3em;
    height: 1.75em;
  }

  .switch input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  .close {
    top: 0.5rem;
    right: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .modalContent {
    width: 98%;
    margin: 5% auto;
    padding: 1.25rem;
    font-size: 0.9rem;
  }

  .modalContent h2 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
  }

  .setting {
    padding: 0.875rem 0;
  }

  .setting-label {
    font-size: 0.9rem;
  }

  .setting-description {
    font-size: 0.75rem;
  }

  .rightSetting .link {
    font-size: 0.875rem;
  }
}

/* ============================================
   3.3.1.1 Page Loading Spinner
   ============================================ */

/* Loading spinner animation */
/* @keyframes spin - removed (was only used by page-loading-spinner) */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Loading indicator */
/* Page loading spinner removed to prevent CLS */

/* ============================================
   3.3.1.3 Micro-Interactions
   ============================================ */

/* Keyframe Animations */
@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

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

@keyframes iconRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Enhanced Ripple Effect for Buttons */
.actionButton {
  position: relative;
  overflow: hidden;
}

.actionButton::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}

.actionButton:active::after {
  width: 200px;
  height: 200px;
  animation: ripple 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

/* Enhanced Hover Scale for Interactive Elements */
.locationSuggestion {
  transition:
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.locationSuggestion:hover {
  transform: translateY(-2px) scale(1.02);
}

/* Smooth Focus Transitions for Form Inputs */
#searchBox,
select,
input[type="text"],
input[type="email"],
input[type="number"],
textarea {
  transition:
    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#searchBox:focus,
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(0, 86, 107, 0.1);
}

/* Icon Animations */
.buttonIcon {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon pulse animation for loading/processing states */
.actionButton.processing .buttonIcon,
.actionButton.loading .buttonIcon {
  animation: iconPulse 1.5s ease-in-out infinite;
}

/* Icon rotate animation for refresh/reload actions */
.actionButton.refresh .buttonIcon,
.actionButton.reload .buttonIcon {
  animation: iconRotate 1s linear infinite;
}

/* Icon bounce animation for success/notification states */
.actionButton.success .buttonIcon {
  animation: iconBounce 0.6s ease-in-out;
}

/* Hover icon animations - unified for all buttons */
.actionButton:hover .buttonIcon {
  transform: scale(1.02);
}

/* Loading Skeleton Screens */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--background-subtle, #fafafa) 0%,
    var(--background-hover, #f0f0f0) 50%,
    var(--background-subtle, #fafafa) 100%
  );
  background-size: 2000px 100%;
  animation: shimmer 2s infinite;
  border-radius: 4px;
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-text:last-child {
  width: 80%;
}

.skeleton-card {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  background: var(--background-surface);
  box-shadow: var(--shadow-sm);
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-button {
  height: 40px;
  width: 120px;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .actionButton::after,
  .locationSuggestion,
  #searchBox,
  select,
  input,
  textarea,
  .buttonIcon {
    animation: none !important;
    transition: none !important;
  }

  .skeleton {
    animation: none !important;
  }
}