/* ============================================================ */
/* === GLOBAL EXTRAS: Loader, Toast, Timer                  === */
/* ============================================================ */

/* 1. Page Transition Loader */
#page-transition-loader {
  position: fixed; inset: 0; z-index: 999999;
  background: var(--bg); display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  color: var(--text-main);
}
#page-transition-loader.hidden { opacity: 0; visibility: hidden; }

.loader-spinner {
  width: 50px; height: 50px; border: 4px solid var(--border);
  border-top-color: var(--blue); border-radius: 50%;
  animation: spin 1s linear infinite; margin-bottom: 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 2. Countdown Timer Banner */
#countdown-banner {
  background: linear-gradient(90deg, #ef4444, #b91c1c);
  color: #fff; text-align: center; padding: 10px;
  font-weight: 700; font-size: 14px; position: relative; z-index: 1001;
  display: flex; justify-content: center; align-items: center; gap: 15px;
}
.timer-box { background: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 4px; letter-spacing: 1px; }

/* 3. Social Proof Toast */
#social-proof-toast {
  position: fixed; bottom: -100px; left: 20px; z-index: 9999;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 4px solid var(--blue); border-radius: 8px;
  padding: 15px 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  display: flex; align-items: center; gap: 15px;
  transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#social-proof-toast.show { bottom: 20px; }
.toast-icon {
  width: 40px; height: 40px; background: rgba(0,153,255,0.1);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--blue); font-size: 18px;
}
.toast-text { font-size: 14px; font-weight: 600; color: var(--text-main); }
.toast-time { font-size: 11px; color: var(--w40); margin-top: 2px; }
body { padding-top: 40px; }