/* ================================================================
   SOLARFLARE — GLOBAL STYLESHEET
   Dark-mode, glassmorphism, smooth micro-animations.
================================================================ */

:root {
  /* Background palette — darker, redder navy */
  --bg-base:        #0c0608;
  --bg-surface:     #1a0c12;
  --bg-card:        rgba(26, 12, 18, 0.72);
  --bg-card-hover:  rgba(40, 16, 24, 0.85);

  /* Accent colours — hot plasma palette */
  --accent-gold:    #ffd700;
  --accent-orange:  #ff8c42;
  --accent-rose:    #ff3b30;
  --accent-green:   #34c759;
  --accent-blue:    #4fc3f7;

  /* Text */
  --text-primary:   #ffebee;
  --text-secondary: #c5a3ab;
  --text-muted:     #7a5e65;

  /* Glass border */
  --border:         rgba(255, 255, 255, 0.08);
  --border-active:  rgba(255, 59, 48, 0.35);

  /* Gradients */
  --grad-hero:      linear-gradient(135deg, #2e0a12 0%, #1a0a2e 50%, #0c0608 100%);
  --grad-primary:   linear-gradient(135deg, #ff8c42 0%, #ff3b30 100%);

  /* Spacing & Radii */
  --sp-xs: 0.25rem; --sp-sm: 0.5rem; --sp-md: 1rem; --sp-lg: 1.5rem; --sp-xl: 2rem; --sp-2xl: 3rem;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-full: 9999px;

  /* Fonts */
  --font-sans: 'InterVariable', 'Inter', system-ui, sans-serif;
  --font-mono: 'InterVariable', 'Inter', system-ui, sans-serif;

  /* Shadows */
  --shadow-card: 0 8px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
  --t-fast: 150ms ease; --t-slow: 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(2px 2px at 30% 55%, rgba(255,100,100,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 70%, rgba(255,255,255,0.2) 0%, transparent 100%),
    var(--grad-hero);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
}

.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }

/* ── LAYOUT ── */
.main-container {
  max-width: 680px; margin: 0 auto;
  padding: var(--sp-md) var(--sp-md) var(--sp-2xl);
  display: flex; flex-direction: column; gap: var(--sp-lg);
  flex-grow: 1;
}

/* ── HEADER ── */
.site-header { position: relative; overflow: hidden; text-align: center; padding: var(--sp-2xl) var(--sp-md) var(--sp-xl); }
.header-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 30%, rgba(255,59,48,0.12) 0%, transparent 70%); pointer-events: none; }
.header-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-md); }
.sun-icon { width: 80px; height: 80px; filter: drop-shadow(0 0 18px rgba(255, 59, 48, 0.5)); }

.header-text h1 {
  font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 700; letter-spacing: -0.02em;
  background: var(--grad-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1;
}
.tagline { color: var(--text-secondary); font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; margin-top: var(--sp-xs); }

/* ── CARDS ── */
.card {
  background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-xl);
  box-shadow: var(--shadow-card); position: relative; overflow: hidden;
  animation: slide-up var(--t-slow) forwards;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}

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

.result-summary { margin-bottom: var(--sp-lg); padding-bottom: var(--sp-lg); border-bottom: 1px solid var(--border); }
.result-summary p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; }
.result-summary strong { color: var(--accent-orange); font-weight: 600; }

.meta-pills { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-bottom: var(--sp-lg); }
.pill {
  flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 2px;
  background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-sm) var(--sp-md);
}
.pill-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.pill-value { font-size: 0.88rem; color: var(--text-primary); word-break: break-all; }

/* ── GRID ── */
.sun-times-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); margin-bottom: var(--sp-lg); }
@media (max-width: 600px) { .sun-times-grid { grid-template-columns: 1fr; } }
.sun-time-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-xs);
  padding: var(--sp-lg) var(--sp-sm); border-radius: var(--r-md); border: 1px solid transparent;
  transition: transform var(--t-fast), box-shadow var(--t-fast); text-align: center;
}
.sun-time-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }

.sun-time-icon { font-size: 1.8rem; line-height: 1; animation: bounce-in var(--t-slow) both; }
.sun-time-card:nth-child(2) .sun-time-icon { animation-delay: 0.1s; }
.sun-time-card:nth-child(3) .sun-time-icon { animation-delay: 0.2s; }
@keyframes bounce-in { 0% { transform: scale(0.5) rotate(-10deg); opacity: 0; } 60% { transform: scale(1.15) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); } }

.sun-time-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.sun-time-value { font-size: clamp(0.95rem, 3vw, 1.2rem); font-weight: 500; color: var(--text-primary); word-break: break-word; text-align: center; margin-top: var(--sp-sm); }
.desc-text { font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px; opacity: 0.8; }

/* Severity Colors */
.severity-low { border-color: rgba(52, 199, 89, 0.4) !important; background: linear-gradient(160deg, rgba(52, 199, 89, 0.1) 0%, transparent 100%); box-shadow: 0 0 10px rgba(52,199,89,0.1); }
.severity-med { border-color: rgba(255, 140, 66, 0.4) !important; background: linear-gradient(160deg, rgba(255, 140, 66, 0.1) 0%, transparent 100%); box-shadow: 0 0 10px rgba(255,140,66,0.1); }
.severity-high { border-color: rgba(255, 59, 48, 0.4) !important; background: linear-gradient(160deg, rgba(255, 59, 48, 0.15) 0%, transparent 100%); box-shadow: 0 0 15px rgba(255,59,48,0.2); }

/* ── BUTTON ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm);
  padding: 0.75rem 1.5rem; border: none; border-radius: var(--r-md); font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600;
  cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast); letter-spacing: 0.01em; width: 100%;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--grad-primary); color: #fff; box-shadow: 0 4px 16px rgba(255, 59, 48, 0.3); }
.btn-primary:hover { box-shadow: 0 6px 24px rgba(255, 59, 48, 0.45); transform: translateY(-1px); }


/* App Switcher Carousel */
.app-switcher-container {
  padding: 3rem 0;
  text-align: center;
  margin-top: 2rem;
  border-top: 1px solid var(--border);
}

.switcher-title {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
  font-weight: 600;
  letter-spacing: -0.5px;
}

.app-switcher-marquee {
  display: flex;
  overflow: hidden;
  padding-bottom: 1rem;
  width: 100%;
}

.app-switcher-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.app-switcher-marquee:hover .app-switcher-track {
  animation-play-state: paused;
}

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

.switcher-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 1rem;
}

.switcher-card:hover {
  transform: translateY(-3px);
  background: var(--bg-card-hover);
  box-shadow: 0 4px 12px var(--shadow-card);
}

.switcher-card img {
  width: 20px !important;
  height: 20px !important;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .app-switcher-marquee {
    padding: 0.5rem 1rem 1.5rem 1rem;
  }
}

.site-footer { background: var(--bg-base); border-top: 1px solid var(--border); padding: 4rem 1.5rem 2rem; margin-top: auto; }
.footer-inner { max-width: 680px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 3rem; flex-wrap: wrap; gap: 2rem; }
.footer-brand { max-width: 320px; }
.footer-logo { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 700; color: var(--text-primary); text-decoration: none; display: inline-block; margin-bottom: 0.5rem; }
.footer-dot { background: linear-gradient(135deg, #E21E26, #FF4D54); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-tagline { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; }
.footer-powered p { color: var(--text-secondary); font-size: 0.88rem; text-align: right; max-width: 250px; line-height: 1.6; }
.footer-powered a { color: var(--accent-blue); text-decoration: none; transition: color var(--t-fast); }
.footer-bottom { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 2rem; text-align: center; }
.footer-social { display: flex; gap: 1.25rem; }
.footer-social a { color: var(--text-muted); transition: color var(--t-fast), transform var(--t-fast); }
.footer-social a:hover { color: var(--text-primary); transform: translateY(-2px); }
.footer-bottom p { color: var(--text-muted); font-size: 0.85rem; }
.footer-bottom a { color: var(--text-secondary); text-decoration: none; }
.footer-bottom a:hover { color: var(--text-primary); text-decoration: underline; }
.footer-privacy, .footer-ai { opacity: 0.7; }

/* ── FORM ELEMENTS ──────────────────────────────────────────── */
.field-group { display: flex; flex-direction: column; gap: var(--sp-xs); margin-bottom: var(--sp-md); }
label { font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; }

.search-input {
  width: 100%;
  padding: 0.65rem 1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-appearance: none;
  appearance: none;
}

.search-input:focus {
  border-color: var(--accent-rose);
  box-shadow: 0 0 0 3px rgba(255,59,48,0.12);
  background: rgba(0, 0, 0, 0.45);
}

/* ── SEARCH WRAPPER ─────────────────────────────────────────── */
.search-wrapper { position: relative; }
.search-icon {
  position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; transition: color var(--t-fast);
}
.search-input { padding-left: 2.4rem; }
.search-input:focus ~ .search-icon, .search-wrapper:focus-within .search-icon { color: var(--accent-rose); }

/* ── DROPDOWN ───────────────────────────────────────────────── */
.dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-active); border-radius: var(--r-md);
  max-height: 240px; overflow-y: auto; z-index: 100; list-style: none;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  scrollbar-width: thin; scrollbar-color: var(--text-muted) transparent;
  animation: fade-in var(--t-fast) forwards;
}
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.dropdown li {
  padding: 0.55rem 1rem; cursor: pointer; font-size: 0.9rem;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-sm);
  transition: background var(--t-fast), color var(--t-fast);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dropdown li:last-child { border-bottom: none; }
.dropdown li:hover, .dropdown li.highlighted {
  background: rgba(255, 59, 48, 0.1); color: var(--accent-rose);
}
.dropdown li .city-name { font-weight: 500; }
.dropdown li .city-country { font-size: 0.75rem; color: var(--text-muted); }

/* Selected-city badge */
.selected-city {
  display: flex; align-items: center; gap: var(--sp-sm);
  background: rgba(255,59,48,0.08); border: 1px solid rgba(255,59,48,0.2);
  border-radius: var(--r-sm); padding: var(--sp-sm) var(--sp-md);
  font-size: 0.88rem; color: var(--accent-orange); margin-top: var(--sp-xs);
}
.clear-btn {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 0 var(--sp-xs); margin-left: auto; transition: color var(--t-fast);
}
.clear-btn:hover { color: var(--accent-rose); }