/* ==========================================================================
   NAVIONFX — calendar.css
   Economic Calendar page specific styles
   ========================================================================== */


/* ── HERO TICKER EVENT IMPACT LABELS ── */
.event-name { color: rgba(15,23,42,0.45); }
.event-impact--high { color: rgba(220,38,38,0.65); font-weight: 800; font-size: 9px; letter-spacing: 1px; padding: 1px 5px; border-radius: 3px; background: rgba(220,38,38,0.06); }
.event-impact--medium { color: rgba(161,114,8,0.75); font-weight: 800; font-size: 9px; letter-spacing: 1px; padding: 1px 5px; border-radius: 3px; background: rgba(234,179,8,0.07); }
.event-impact--low { color: rgba(37,99,235,0.6); font-weight: 800; font-size: 9px; letter-spacing: 1px; padding: 1px 5px; border-radius: 3px; background: rgba(37,99,235,0.05); }


/* ── LIVE CALENDAR WIDGET SECTION ── */
.calendar-widget-section { position: relative; overflow: hidden; background: #020c1b; padding: 80px 0 100px; }
.calendar-dot-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; z-index: 0; }
.calendar-glow-tl { position: absolute; top: -150px; left: -150px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(30,58,138,0.5) 0%, transparent 65%); pointer-events: none; z-index: 0; }
.calendar-glow-br { position: absolute; bottom: -100px; right: -100px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(14,116,144,0.18) 0%, transparent 65%); pointer-events: none; z-index: 0; }
.calendar-widget-section .container { position: relative; z-index: 1; }
.calendar-widget-head { text-align: center; margin-bottom: 52px; }

/* ── CALENDAR FRAME ── */
.calendar-frame { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(96,165,250,0.12); box-shadow: 0 0 0 1px rgba(255,255,255,0.02), 0 32px 80px rgba(0,0,0,0.6), 0 0 60px rgba(37,99,235,0.06); }

/* ── CHROME BAR ── */
.calendar-chrome { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: rgba(4,15,36,0.95); border-bottom: 1px solid rgba(96,165,250,0.08); gap: 16px; }
.calendar-chrome-dots { display: flex; gap: 7px; align-items: center; }
.calendar-dot-red { display: block; width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.calendar-dot-yellow { display: block; width: 11px; height: 11px; border-radius: 50%; background: #febc2e; }
.calendar-dot-green { display: block; width: 11px; height: 11px; border-radius: 50%; background: #28c840; }
.calendar-chrome-title { font-size: 11px; font-weight: 600; color: rgba(240,246,255,0.18); letter-spacing: 0.5px; font-family: var(--font); flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-chrome-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap; }
.calendar-clock-label { font-size: 11px; color: rgba(240,246,255,0.25); font-family: var(--font); }
.calendar-clock-value { font-size: 13px; font-weight: 700; color: #f0f6ff; font-family: monospace; letter-spacing: 1px; }
.calendar-live { display: flex; align-items: center; gap: 6px; }
.calendar-live-dot { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; animation: calendarLivePulse 1.8s ease-in-out infinite; }
.calendar-live-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #4ade80; font-family: var(--font); }

/* ── EMBED ── */
.calendar-embed-wrap { background: #0a0f1e; min-height: 600px; }
.calendar-embed { width: 100%; height: 600px; border: none; display: block; }
.calendar-embed-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to top, rgba(10,15,30,0.9), transparent); pointer-events: none; z-index: 2; }

/* ── STATS STRIP ── */
.calendar-stats { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 0; margin-top: 20px; background: rgba(255,255,255,0.025); border: 1px solid rgba(96,165,250,0.09); border-radius: 16px; overflow: hidden; }
.calendar-stat-cell { padding: 20px 28px; border-right: 1px solid rgba(96,165,250,0.08); display: flex; flex-direction: column; gap: 3px; }
.calendar-stat-val { font-size: 22px; font-weight: 800; color: #f0f6ff; letter-spacing: -0.5px; font-family: var(--font); }
.calendar-stat-val--accent { color: #60a5fa; }
.calendar-stat-label { font-size: 11px; color: rgba(240,246,255,0.3); font-family: var(--font); }
.calendar-stat-cta { padding: 16px 24px; display: flex; align-items: center; justify-content: center; }
.calendar-powered-note { text-align: center; font-size: 11px; color: rgba(240,246,255,0.18); margin-top: 16px; font-family: var(--font); }

@keyframes calendarLivePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); opacity: 1; } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); opacity: 0.6; } }

@media (max-width: 768px) { .calendar-stats { grid-template-columns: 1fr 1fr; } .calendar-stat-cell:nth-child(3) { border-right: none; } .calendar-stat-cta { grid-column: span 2; border-top: 1px solid rgba(96,165,250,0.08); } }
@media (max-width: 480px) { .calendar-stats { grid-template-columns: 1fr; } .calendar-stat-cell { border-right: none; border-bottom: 1px solid rgba(96,165,250,0.08); } .calendar-stat-cta { grid-column: span 1; } }