/* ========================================
   Component Styles
   MGH ED Patient Portal
   ======================================== */

/* ========================================
   Header
   ======================================== */

.site-header {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-xs);
  background-color: var(--bg);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-inner-glow);
  position: relative;
  z-index: 200;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.header-group {
  display: flex;
  align-items: center;
}

.site-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: 55%;
  pointer-events: none;
}

.header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--min-touch-target);
  height: var(--min-touch-target);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text);
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.header-btn:hover {
  background-color: var(--glass-bg-medium);
}

.header-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.header-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.header-icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

/* Font Size Popover - iOS-inspired control */
.font-size-wrapper {
  position: relative;
  flex-shrink: 0;
}

.font-size-popover {
  position: absolute;
  top: calc(100% + var(--space-xs));
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm) 0;
  background-color: var(--glass-bg-heavy);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  box-shadow: var(--glass-shadow), var(--glass-inner-glow);
  z-index: 100;
}

.font-size-popover[hidden] {
  display: none;
}

.font-size-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text);
  font-size: 2rem;
  font-weight: 300;
  border-radius: 50%;
  transition: background-color var(--transition-fast);
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.font-size-step:hover {
  background-color: var(--border);
}

.font-size-step:active {
  background-color: var(--border);
}

.font-size-step:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.font-size-step:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.font-size-divider {
  width: 40px;
  height: 1px;
  background-color: var(--border);
}

.font-size-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: var(--space-md) 0;
}

.font-size-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--text-muted);
  background: transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.font-size-dot.active {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  transform: scale(1.15);
}

/* Language Selector */
.language-wrapper {
  flex-shrink: 0;
}

.language-wrapper[hidden] {
  display: none;
}

.language-select {
  width: var(--min-touch-target);
  height: var(--min-touch-target);
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: transparent;
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-fast);
  font-size: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-size);
}

[data-theme="dark"] .language-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E5E5E5' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

.language-select:hover {
  background-color: var(--bg-surface);
}

.language-select:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Translate Disclaimer Banner */
.translate-disclaimer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-sm);
  background-color: var(--section-yellow);
  border-bottom: 1px solid var(--section-yellow-end);
}

.translate-disclaimer[hidden] {
  display: none;
}

.translate-disclaimer-message {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--text);
}

.translate-restore-btn {
  border: 1px solid var(--border);
  background-color: var(--bg);
  color: var(--text);
  border-radius: var(--border-radius-sm);
  min-height: var(--min-touch-target);
  padding: 0 var(--space-sm);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hide Google Translate's own UI elements */
.goog-te-banner-frame,
.goog-te-menu-frame,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}

#google_translate_element {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}

.skiptranslate {
  height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

body {
  top: 0 !important;
  position: static !important;
}

/* Theme Toggle */
.theme-toggle-btn {
  flex-shrink: 0;
}

.theme-icon-light {
  display: none;
}

[data-theme="dark"] .theme-icon-dark {
  display: none;
}

[data-theme="dark"] .theme-icon-light {
  display: block;
}

/* ========================================
   Accordion Sections
   ======================================== */

.accordion-section {
  margin-bottom: var(--space-sm);
  overflow-anchor: none;
}

.accordion-section:first-child {
  margin-top: var(--space-sm);
}

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

.accordion-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.accordion-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 72px;
  padding: var(--space-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text);
  text-align: left;
  box-shadow: var(--glass-inner-glow);
  transition: box-shadow var(--transition-fast);
  scroll-margin-top: var(--space-sm);
  position: relative;
  overflow: hidden;
}

/* Glass gloss highlight on top half */
.accordion-header::before {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  background: linear-gradient(180deg, var(--glass-gloss) 0%, var(--glass-gloss-end) 100%);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  pointer-events: none;
  z-index: 1;
}

.accordion-header:hover {
  box-shadow: var(--shadow-md), var(--glass-inner-glow);
}

.accordion-header:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Section colors (translucent glass gradients) */
[data-color="red"] .accordion-header { background: linear-gradient(160deg, var(--section-red-glass), var(--section-red-glass-end)); }
[data-color="orange"] .accordion-header { background: linear-gradient(160deg, var(--section-orange-glass), var(--section-orange-glass-end)); }
[data-color="yellow"] .accordion-header { background: linear-gradient(160deg, var(--section-yellow-glass), var(--section-yellow-glass-end)); }
[data-color="green"] .accordion-header { background: linear-gradient(160deg, var(--section-green-glass), var(--section-green-glass-end)); }
[data-color="teal"] .accordion-header { background: linear-gradient(160deg, var(--section-teal-glass), var(--section-teal-glass-end)); }
[data-color="blue"] .accordion-header { background: linear-gradient(160deg, var(--section-blue-glass), var(--section-blue-glass-end)); }
[data-color="gray"] .accordion-header { background: linear-gradient(160deg, var(--section-gray-glass), var(--section-gray-glass-end)); }

/* Section icon */
.section-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Accordion title */
.accordion-title {
  flex: 1;
}

/* Accordion arrow */
.accordion-arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-normal);
}

.accordion-arrow::before {
  content: "";
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-right: var(--arrow-border-width) solid var(--text);
  border-bottom: var(--arrow-border-width) solid var(--text);
  transform: rotate(45deg);
  transition: transform var(--transition-normal);
}

/* Arrow rotates when expanded */
.accordion-header[aria-expanded="true"] .accordion-arrow::before {
  transform: rotate(-135deg);
}

/* Sticky accordion header when section is open */
.accordion-header[aria-expanded="true"] {
  position: sticky;
  top: 0;
  z-index: 50;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.details-summary-label {
  flex: 1;
}

.details-chevron {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-sm);
  color: var(--details-chevron-color, var(--text-secondary));
}

.details-chevron-icon {
  width: var(--details-chevron-size, 16px);
  height: var(--details-chevron-size, 16px);
  overflow: visible;
  transform-origin: center;
  transition: transform var(--transition-normal);
}

/* Accordion content */
.accordion-content {
  overflow: hidden;
}

.accordion-content[hidden] {
  display: none;
}

.accordion-content:not([hidden]) {
  display: block;
}

.accordion-body {
  padding: var(--space-sm);
}

/* ========================================
   Collapsible Subsections (Inside Accordions)
   ======================================== */

.subsection {
  border-bottom: 1px solid var(--border);
  overflow-anchor: none;
  scroll-margin-top: var(--space-sm);
}

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

.subsection summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--space-sm) 0;
  min-height: var(--min-touch-target);
  list-style: none;
}

.subsection summary::-webkit-details-marker {
  display: none;
}

.subsection summary::marker {
  display: none;
  content: "";
}

.subsection summary h3 {
  margin: 0;
  flex: 1;
}

.subsection .details-chevron {
  --details-chevron-size: 16px;
}

.subsection:not([open]) .details-chevron-icon {
  transform: rotate(180deg);
}

.subsection[open] .details-chevron-icon {
  transform: rotate(0deg);
}

.subsection summary:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--border-radius-sm);
}

.subsection-content {
  padding-bottom: var(--space-sm);
}

/* ========================================
   Zone Cards (Inside How the ED Works)
   ======================================== */

.zone-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.zone-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm);
  box-shadow: var(--shadow-sm);
}

.zone-card h4 {
  margin-top: 0;
  margin-bottom: var(--space-xs);
}

.zone-card p {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ========================================
   Content Cards (Generic info grouping)
   ======================================== */

.content-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
  box-shadow: var(--shadow-sm);
}

.content-card h4 {
  margin-top: 0;
  margin-bottom: var(--space-xs);
}

.content-card p:last-child,
.content-card ul:last-child,
.content-card ol:last-child {
  margin-bottom: 0;
}

.collapsible-card {
  padding: 0;
}

.collapsible-card summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--space-sm);
  list-style: none;
  min-height: var(--min-touch-target);
}

.collapsible-card summary::-webkit-details-marker {
  display: none;
}

.collapsible-card summary::marker {
  display: none;
  content: "";
}

.collapsible-card summary h4 {
  margin: 0;
  flex: 1;
}

.collapsible-card:not([open]) .details-chevron-icon {
  transform: rotate(180deg);
}

.collapsible-card[open] .details-chevron-icon {
  transform: rotate(0deg);
}

.collapsible-card[open] summary {
  border-bottom: 1px solid var(--border);
}

.collapsible-card summary:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--border-radius-sm);
}

.collapsible-card-content {
  padding: var(--space-sm);
}

.collapsible-card-content p:last-child,
.collapsible-card-content ul:last-child,
.collapsible-card-content ol:last-child {
  margin-bottom: 0;
}

/* ========================================
   Map Embed
   ======================================== */

.map-embed-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  margin: var(--space-xs) 0;
  border-radius: var(--radius, 8px);
  overflow: hidden;
}

.map-embed-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ========================================
   Test Cards (Inside Assessments & Tests)
   ======================================== */

.test-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-xs);
  box-shadow: var(--shadow-sm);
}

.test-card h4 {
  margin-top: 0;
  margin-bottom: var(--space-2xs);
}

.test-card p {
  margin-bottom: 0;
  color: var(--text-secondary);
}

/* ========================================
   FAQ Items (Using <details>/<summary>)
   ======================================== */

.faq-list {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
  background-color: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  padding: 0 var(--space-sm);
  box-shadow: var(--shadow-sm);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

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

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  min-height: var(--min-touch-target);
  color: var(--text);
}

/* Remove default marker */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  display: none;
  content: "";
}

.faq-item .details-chevron {
  --details-chevron-size: 14px;
}

.faq-item:not([open]) .details-chevron-icon {
  transform: rotate(180deg);
}

.faq-item[open] .details-chevron-icon {
  transform: rotate(0deg);
}

.faq-item summary:hover {
  color: var(--link);
}

.faq-item summary:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--border-radius-sm);
}

.faq-item p,
.faq-item div {
  padding-bottom: var(--space-sm);
  color: var(--text);
}

.faq-item div > p {
  margin: 0;
  padding-bottom: var(--space-xs);
}

.faq-item div > ul {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
  padding-left: var(--space-md);
}

.faq-item div > p:last-child {
  padding-bottom: 0;
}

.disclaimer {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-style: italic;
  margin-top: var(--space-sm);
}

/* ========================================
   Error & Loading States
   ======================================== */

.section-loading,
.load-error {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: var(--space-md) var(--space-sm);
}

.map-loading {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-xl);
}

/* ========================================
   Footer
   ======================================== */

.site-footer {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  padding-bottom: var(--space-lg);
  border-top: 1px solid var(--glass-border);
}

.footer-content {
  text-align: center;
}

.footer-updated {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.footer-disclaimer {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.footer-security {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ========================================
   App Update Banner
   ======================================== */

.app-update-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-sm);
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--glass-border);
}

.app-update-banner[hidden] {
  display: none;
}

.app-update-message {
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.site-status-banner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-sm);
  border-bottom: 1px solid var(--glass-border);
  font-size: var(--font-size-sm);
}

.site-status-banner-info {
  background-color: var(--section-blue);
  color: var(--text);
}

.site-status-banner-warning {
  background-color: var(--section-yellow);
  color: var(--text);
}

.update-refresh-btn {
  border: 1px solid var(--border);
  background-color: var(--brand-secondary);
  color: var(--text-on-brand);
  border-radius: var(--border-radius-sm);
  min-height: var(--min-touch-target);
  padding: 0 var(--space-sm);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.update-refresh-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.update-refresh-btn:disabled {
  opacity: 0.7;
  cursor: progress;
}

.feedback-unavailable {
  color: var(--text-secondary);
}

/* ========================================
   Flow Steps (Process Flow in How the ED Works)
   ======================================== */

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

.flow-steps > li {
  position: relative;
}

.flow-step {
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  overflow-anchor: none;
  scroll-margin-top: var(--space-sm);
}

.flow-step summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--space-sm);
  min-height: var(--min-touch-target);
  list-style: none;
  gap: var(--space-sm);
}

.flow-step summary::-webkit-details-marker {
  display: none;
}

.flow-step summary::marker {
  display: none;
  content: "";
}

.flow-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background-color: var(--flow-step-bg, var(--brand-primary));
  color: var(--flow-step-text, var(--text));
  font-weight: 700;
  font-size: var(--font-size-base);
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--brand-primary-shadow, rgba(118, 176, 67, 0.3));
}

.flow-step summary h3 {
  margin: 0;
  flex: 1;
}

.flow-step .details-chevron {
  --details-chevron-size: 16px;
}

.flow-step:not([open]) .details-chevron-icon {
  transform: rotate(180deg);
}

.flow-step[open] .details-chevron-icon {
  transform: rotate(0deg);
}

.flow-step summary:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--border-radius);
}

.flow-step[open] summary {
  border-bottom: 1px solid var(--border);
}

.flow-step-content {
  padding: var(--space-sm);
}

/* Flow arrows between steps */
.flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
}

.flow-arrow::before {
  content: "";
  display: block;
  width: 2px;
  height: 10px;
  background-color: var(--text-muted, #999);
}

.flow-arrow::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-muted, #999);
}

/* Inline details (urgency levels nested toggle) */
.inline-details {
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  margin: var(--space-sm) 0;
}

.inline-details summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--space-xs) var(--space-sm);
  list-style: none;
  font-weight: 600;
  color: var(--text-secondary);
  min-height: var(--min-touch-target);
}

.inline-details summary::-webkit-details-marker {
  display: none;
}

.inline-details summary::marker {
  display: none;
  content: "";
}

.inline-details .details-chevron {
  --details-chevron-size: 14px;
}

.inline-details:not([open]) .details-chevron-icon {
  transform: rotate(180deg);
}

.inline-details[open] .details-chevron-icon {
  transform: rotate(0deg);
}

.inline-details summary:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--border-radius-sm);
}

.inline-details > :not(summary) {
  padding: var(--space-sm);
  padding-top: var(--space-sm);
}

.inline-details ul,
.inline-details ol {
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

.inline-details li {
  margin-bottom: var(--space-2xs);
}

.inline-details li:last-child {
  margin-bottom: 0;
}

/* CTAS Triage Level Badges (replace bullet markers) */
li:has(.ctas-badge) {
  list-style: none;
  position: relative;
}

.ctas-badge {
  position: absolute;
  left: -1.2em;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ctas-1 { background-color: #0072C6; }
.ctas-2 { background-color: #D32F2F; }
.ctas-3 { background-color: #F9A825; }
.ctas-4 { background-color: #388E3C; }
.ctas-5 {
  background-color: #FFFFFF;
  border: 1.5px solid var(--text-secondary);
}

[data-theme="dark"] .ctas-5 {
  background-color: transparent;
}

/* ========================================
   Zone Selector (Interactive Zone Picker)
   ======================================== */

.zone-selector {
  margin: var(--space-sm) 0;
}

.zone-selector-intro {
  margin-bottom: var(--space-sm);
}

.zone-selector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

@media (max-width: 359px) {
  .zone-selector-grid {
    grid-template-columns: 1fr;
  }
}

.zone-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--space-sm);
  min-height: var(--min-touch-target);
  border: 1px solid var(--glass-border);
  border-left: 4px solid var(--zone-color, var(--border));
  border-radius: var(--border-radius-sm);
  background-color: var(--zone-bg, var(--bg-surface));
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  width: 100%;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
}

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

.zone-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.zone-btn-name {
  font-weight: 600;
}

.zone-btn-alt {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 400;
}

.zone-btn-rooms {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.zone-btn.active .zone-btn-alt {
  margin-left: var(--space-sm);
}

.zone-btn.active .zone-btn-rooms {
  margin-top: 0;
  margin-left: var(--space-xs);
}

/* Zone color definitions */
.zone-btn[data-zone="red"] {
  --zone-color: #FF3B30;
  --zone-bg: rgba(255, 59, 48, 0.1);
}
.zone-btn[data-zone="blue"] {
  --zone-color: #4A90E2;
  --zone-bg: rgba(74, 144, 226, 0.1);
}
.zone-btn[data-zone="pink"] {
  --zone-color: #FF9CCF;
  --zone-bg: rgba(255, 156, 207, 0.1);
}
.zone-btn[data-zone="green"] {
  --zone-color: #34C759;
  --zone-bg: rgba(52, 199, 89, 0.1);
}
.zone-btn[data-zone="raz"] {
  --zone-color: #FFE066;
  --zone-bg: rgba(255, 224, 102, 0.1);
}
.zone-btn[data-zone="yellow"] {
  --zone-color: #FFF59D;
  --zone-bg: rgba(255, 245, 157, 0.1);
}
.zone-btn[data-zone="purple"] {
  --zone-color: #8E7CF0;
  --zone-bg: rgba(142, 124, 240, 0.1);
}
.zone-btn[data-zone="cyez"] {
  --zone-color: #00CFE8;
  --zone-bg: rgba(0, 207, 232, 0.1);
}

/* Dark mode: increase tint opacity */
@media (prefers-color-scheme: dark) {
  .zone-btn[data-zone="red"] { --zone-bg: rgba(255, 59, 48, 0.15); }
  .zone-btn[data-zone="blue"] { --zone-bg: rgba(74, 144, 226, 0.15); }
  .zone-btn[data-zone="pink"] { --zone-bg: rgba(255, 156, 207, 0.15); }
  .zone-btn[data-zone="green"] { --zone-bg: rgba(52, 199, 89, 0.15); }
  .zone-btn[data-zone="raz"] { --zone-bg: rgba(255, 224, 102, 0.15); }
  .zone-btn[data-zone="yellow"] { --zone-bg: rgba(255, 245, 157, 0.15); }
  .zone-btn[data-zone="purple"] { --zone-bg: rgba(142, 124, 240, 0.15); }
  .zone-btn[data-zone="cyez"] { --zone-bg: rgba(0, 207, 232, 0.15); }
}

.zone-btn-arrow {
  display: none;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-right: var(--arrow-border-width) solid var(--text-secondary);
  border-bottom: var(--arrow-border-width) solid var(--text-secondary);
  transform: rotate(-45deg);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  margin-left: auto;
}

.zone-btn.active {
  border-left-width: 6px;
  cursor: pointer;
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  scroll-margin-top: var(--space-sm);
  box-shadow: var(--shadow-md), var(--glass-inner-glow);
}

.zone-btn.active .zone-btn-arrow {
  display: block;
  transform: rotate(-135deg);
}

.zone-btn[hidden] {
  display: none;
}

/* Zone detail panel (expanded zone content) */
.zone-detail {
  padding: 0;
}

.zone-detail[hidden] {
  display: none;
}

.zone-detail-rooms {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.zone-detail-description {
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
}

.zone-bridge-link {
  display: block;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
  color: var(--link);
  font-weight: 600;
}

.zone-after-note {
  font-size: var(--font-size-base);
  color: var(--text-muted);
  font-style: italic;
}

/* ========================================
   Language Selection Modal (First Visit)
   ======================================== */

.language-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.language-modal-overlay.active {
  opacity: 1;
}

.language-modal {
  background-color: var(--glass-bg-heavy);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  width: 100%;
  max-width: 400px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--glass-shadow), var(--glass-inner-glow);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.language-modal-overlay.active .language-modal {
  opacity: 1;
  transform: scale(1);
}

.language-modal:focus {
  outline: none;
}

.language-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-sm);
  gap: var(--space-xs);
}

.language-modal-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text);
  line-height: var(--line-height-tight);
  flex: 1;
}

.language-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--min-touch-target);
  height: var(--min-touch-target);
  min-width: var(--min-touch-target);
  border: none;
  background: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.language-modal-close:hover {
  background-color: var(--bg-surface);
}

.language-modal-close:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.language-modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--space-sm) var(--space-sm);
}

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

.language-modal-btn {
  width: 100%;
  min-height: var(--min-touch-target);
  padding: var(--space-xs) var(--space-sm);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--text);
  text-align: left;
  border-radius: var(--border-radius-sm);
  display: block;
}

.language-modal-btn:hover {
  background-color: var(--glass-bg-medium);
}

.language-modal-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.language-modal-btn-featured {
  font-size: var(--font-size-lg);
  font-weight: 500;
}

.language-modal-separator {
  height: 1px;
  background-color: var(--border);
  margin: var(--space-xs) 0;
}

/* ========================================
   Staffing Indicator
   ======================================== */

.staffing-indicator {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .language-modal-overlay,
  .language-modal {
    transition: none;
  }

  .details-chevron-icon {
    transition: none;
  }
}