/* ═══════════════════════════════════════════════════════════════════════════
   UI POLISH v3.0 (2026-07-13) — visual unification pass, additive overrides
   One consistent look for every panel, modal, popup, input and scrollbar:
   dark abyss + antique gold, matching the pyramason.com homepage identity.
   Pure CSS — remove this file to restore the previous look.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Scrollbars — thin, gold, everywhere ─────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 162, 39, 0.45) rgba(255, 255, 255, 0.05);
}
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-thumb {
    background: rgba(201, 162, 39, 0.4);
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(201, 162, 39, 0.65); }
*::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }

/* ── 2. Popups & modals — one card language ─────────────────────────────── */
.mapboxgl-popup-content {
    background: rgba(10, 15, 26, 0.97) !important;
    border: 1px solid rgba(201, 162, 39, 0.35) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
    color: #f5efdc;
}
.mapboxgl-popup-tip {
    border-top-color: rgba(201, 162, 39, 0.35) !important;
    border-bottom-color: rgba(201, 162, 39, 0.35) !important;
}
.mapboxgl-popup-close-button {
    color: rgba(245, 239, 220, 0.6) !important;
    font-size: 18px !important;
    padding: 2px 8px !important;
    transition: color 120ms ease;
}
.mapboxgl-popup-close-button:hover {
    color: #e8c547 !important;
    background: transparent !important;
}

/* ── 3. Panel headers — consistent gold titling ─────────────────────────── */
#messageModal h4, #drawMeasurePanel h4,
#astroLinesPanel h3, #skyEventsPanel h3 {
    letter-spacing: 0.06em;
}

/* ── 4. Inputs — one style across all panels ────────────────────────────── */
#messageModal input, #messageModal select, #messageModal textarea,
#astroLinesPanel input, #skyEventsPanel input,
#drawMeasurePanel input, #drawMeasurePanel select {
    accent-color: #c9a227;
    caret-color: #e8c547;
}
#messageModal input:focus, #messageModal select:focus, #messageModal textarea:focus,
#astroLinesPanel input:focus, #skyEventsPanel input:focus {
    outline: none !important;
    border-color: rgba(232, 197, 71, 0.7) !important;
    box-shadow: 0 0 0 2px rgba(232, 197, 71, 0.15) !important;
}

/* ── 5. Buttons — unified hover feel (lift + glow) ──────────────────────── */
.tool-btn, .map-ctrl-btn, .nav-btn, .pyra-chip {
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease !important;
}
.tool-btn:hover, .map-ctrl-btn:hover, .nav-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(201, 162, 39, 0.18);
}
.tool-btn:active, .map-ctrl-btn:active, .nav-btn:active {
    transform: translateY(0);
}
.pyra-chip:hover {
    background: rgba(201, 162, 39, 0.18) !important;
    transform: translateX(-2px);
}

/* ── 6. Panel entrance — subtle rise-in for tool panels ─────────────────── */
#astroLinesPanel, #skyEventsPanel {
    animation: pyraPanelIn 180ms ease-out;
}
@keyframes pyraPanelIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 7. Sidebar — quieter section headers, tighter rhythm ───────────────── */
.section-title {
    letter-spacing: 0.09em !important;
}
.tool-label {
    letter-spacing: 0.04em;
}

/* ── 8. Toasts — match the card language ────────────────────────────────── */
/* v3.1: style ONLY toast items. The earlier [class*="toast"] selector also hit
   #toastContainer (the invisible tray), which on mobile is a near-fullscreen
   element — giving it a border/background turned it into a black card that
   covered the whole map. Never style the container. */
.toast, .pyra-toast {
    border-radius: 10px !important;
    border: 1px solid rgba(201, 162, 39, 0.35) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}
#toastContainer, .toast-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;   /* tray must never block the map */
}
#toastContainer > *, .toast-container > * {
    pointer-events: auto;              /* the toasts themselves stay clickable */
}

/* ── 9. Selection colour — brand instead of default blue ────────────────── */
::selection { background: rgba(201, 162, 39, 0.35); color: #fff; }

/* ── 10. Initial loader — living, not static (desktop had no animation) ─── */
.loader-icon {
    position: relative;
}
.loader-icon::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(232, 197, 71, 0.85);
    border-right-color: rgba(201, 162, 39, 0.25);
    animation: pyraLoaderSpin 1.4s linear infinite;
}
.loader-icon::after {
    content: '';
    position: absolute;
    inset: -26px;
    border-radius: 50%;
    border: 1px dashed rgba(201, 162, 39, 0.25);
    animation: pyraLoaderSpin 9s linear infinite reverse;
}
@keyframes pyraLoaderSpin { to { transform: rotate(360deg); } }
.loader-icon img, .loader-icon svg {
    animation: pyraLoaderPulse 2.4s ease-in-out infinite;
}
@keyframes pyraLoaderPulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(232, 197, 71, 0.25)); }
    50%      { filter: drop-shadow(0 0 18px rgba(232, 197, 71, 0.65)); }
}
/* styles.css kills ALL animations under the OS "reduced motion" setting
   (Farhad's Windows has it on — that's why desktop looked static while
   mobile animated). Loading indicators are a legitimate exception. */
@media (prefers-reduced-motion: reduce) {
    .loader-icon::before { animation: pyraLoaderSpin 1.4s linear infinite !important; }
    .loader-icon::after  { animation: pyraLoaderSpin 9s linear infinite reverse !important; }
    .loader-icon img     { animation: pyraLoaderPulse 2.4s ease-in-out infinite !important; }
    .loader-progress-bar { transition: width 0.3s ease !important; }
}