/* TopEmby Design System — phase 1 homepage foundation */
:root {
  --bg-main: #050506;
  --bg-section: #08080a;
  --surface: rgba(14, 14, 17, .82);
  --surface-strong: #101014;
  --text-primary: #f5f5f3;
  --text-secondary: #aaa5a7;
  --text-muted: #747074;
  --brand-red: #ff544a;
  --brand-red-dark: #9d1426;
  --brand-glow: rgba(255, 84, 74, .16);
  --border-subtle: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --radius-card: 1.5rem;
  --radius-pill: 999px;
  --shadow-card: 0 24px 72px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .025);
  --shadow-glow: 0 0 38px var(--brand-glow);
}

body {
  background: var(--bg-main);
  color: var(--text-primary);
}

/* Semantic utility compatibility: this file is loaded after compiled Tailwind. */
body .bg-surface-container-lowest { background-color: var(--bg-main); }
body .bg-surface-container-low { background-color: var(--surface-strong); }
body .bg-surface-container-high { background-color: #151519; }
body .bg-surface-container-highest { background-color: #1a1a1f; }
body .text-on-surface-variant { color: var(--text-secondary); }
body .text-primary { color: var(--brand-red); }
body .bg-primary { background-color: var(--brand-red); }
body .border-primary { border-color: var(--brand-red); }

/* Shared components. */
body .section-kicker {
  border-color: var(--border-subtle);
  background: rgba(255, 255, 255, .035);
  color: var(--text-secondary);
}

body .section-kicker::before {
  background: var(--brand-red);
  box-shadow: 0 0 18px var(--brand-glow);
}

body .primary-gradient,
body .brand-gradient {
  background: #f5f5f3;
  color: #09090b;
  box-shadow: 0 12px 34px rgba(255, 255, 255, .10), var(--shadow-glow);
}

body .primary-gradient:hover,
body .brand-gradient:hover {
  background: #fff;
}

/* Semantic component layer with compatibility mappings for legacy page classes. */
.te-button-primary,
.te-button-secondary,
body .btn-primary,
body .btn-secondary,
body .btn-checkout,
body .cs-btn,
body .primary-gradient,
body .brand-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

.te-button-primary,
body .btn-primary,
body .btn-checkout,
body .cs-btn,
body .primary-gradient,
body .brand-gradient {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-main);
  box-shadow: 0 12px 34px var(--brand-glow);
}

.te-button-primary:hover,
body .btn-primary:hover,
body .btn-checkout:hover:not(:disabled),
body .cs-btn:hover,
body .primary-gradient:hover,
body .brand-gradient:hover {
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.te-button-secondary,
body .btn-secondary,
body .account-btn {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.te-button-secondary:hover,
body .btn-secondary:hover,
body .account-btn:hover:not(:disabled) {
  border-color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.te-card,
.te-card-interactive,
.te-card-highlight,
body .card-plan,
body .guide-card,
body .device-card,
body .setting-card,
body .faq-card,
body .product-card,
body .review-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.te-card-interactive,
body .product-card,
body .review-card {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.te-card-interactive:hover,
body .product-card:hover,
body .review-card:hover {
  border-color: var(--brand-red);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  transform: translateY(-2px);
}

.te-card-highlight,
body .card-plan.featured,
body .product-card.selected {
  border-color: var(--brand-red);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.te-kicker,
.te-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}

.te-kicker {
  padding: .5rem .75rem;
  background: var(--surface);
  color: var(--text-secondary);
}

.te-kicker::before {
  content: "";
  width: .375rem;
  height: .375rem;
  border-radius: var(--radius-pill);
  background: var(--brand-red);
  box-shadow: 0 0 18px var(--brand-glow);
}

.te-badge {
  padding: .375rem .625rem;
  border-color: var(--brand-red-dark);
  background: var(--brand-red-dark);
  color: var(--text-primary);
}

.te-header,
.te-footer {
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.te-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.te-footer {
  background: var(--surface-strong);
  border-top: 1px solid var(--border-subtle);
}

.te-modal-surface {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.te-input-surface {
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius-card) * .5);
  background: var(--surface-strong);
  color: var(--text-primary);
}

.te-input-surface::placeholder {
  color: var(--text-muted);
}

.te-input-surface:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 1px var(--brand-red), var(--shadow-glow);
  outline: none;
}

/* Homepage section surfaces. */
body #media-showcase,
body #features,
body .managed-service-section,
body .daily-guide-section,
body .poster-plan-section,
body .timeline-section,
body #reviews,
body #faq {
  background-color: var(--bg-section);
  background-image: none;
}

body .managed-service-section::before,
body .poster-plan-section::before,
body .daily-guide-section::before {
  opacity: .12;
}

body .cinema-card,
body .managed-capability-card,
body .managed-flow-panel,
body .daily-guide-card,
body .ticket-card,
body .timeline-card,
body .checkout-dock {
  background: var(--surface);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
}

body .cinema-card:hover,
body .managed-capability-card:hover,
body .ticket-card.is-selected {
  border-color: rgba(255, 84, 74, .42);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

body .managed-capability-card::before,
body .managed-flow-panel::before,
body .daily-guide-card::after,
body .ticket-card::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, .05), transparent 32%), linear-gradient(180deg, var(--brand-glow), transparent 46%);
}

body .managed-icon,
body .managed-flow-node,
body .ticket-card.is-selected .ticket-feature .material-symbols-outlined {
  color: var(--brand-red);
  border-color: rgba(255, 84, 74, .28);
  background: rgba(255, 84, 74, .09);
  box-shadow: 0 0 24px var(--brand-glow);
}

body .managed-flow-step:not(:last-child)::after,
body .timeline-card::before {
  background: linear-gradient(180deg, rgba(255, 84, 74, .7), rgba(255, 84, 74, .06));
  box-shadow: none;
}

body .daily-guide-poster-button,
body .daily-guide-stat,
body .ticket-cycle,
body #plan-selection-hint {
  background: rgba(255, 255, 255, .035);
  border-color: var(--border-subtle);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

body .daily-guide-poster-button {
  box-shadow: var(--shadow-card), 0 0 42px var(--brand-glow);
}

body .daily-guide-poster-button::before {
  background: linear-gradient(180deg, #f5f5f3, #d9d8d5), #f5f5f3;
}

body .daily-guide-poster-button::after,
body .daily-guide-preview-close {
  background: rgba(14, 14, 17, .88);
  border-color: var(--border-strong);
}

body .daily-guide-preview-close:hover {
  background: #f5f5f3;
  color: #09090b;
}

body .ticket-card.is-selected {
  transform: translateY(-4px);
}

body .cycle-btn.active {
  background: var(--brand-red) !important;
  color: #fff !important;
}

body footer {
  background: var(--surface-strong);
  border-color: var(--border-subtle);
}

body footer a:hover { color: var(--text-primary); }

/* Shared popup surface for the homepage; behavior remains in its existing JS. */
body .media-preview-overlay,
body .daily-guide-preview-overlay {
  background: rgba(5, 5, 6, .92);
}

@media (prefers-reduced-motion: reduce) {
  body .primary-gradient,
  body .brand-gradient { transition: none; }
}