/* ============================================================
   WhatsUpcoming v2 — India's Upcoming Launch Hub
   Shared Theme · Bootstrap 5 · Dark + Light
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ─── Light ─────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:           #F7F6F2;
  --bg-2:         #EEECEA;
  --bg-card:      #FFFFFF;
  --bg-card-2:    #F7F6F2;
  --border:       #E2E0DB;
  --border-2:     #CBC9C3;
  --text:         #111110;
  --text-2:       #484744;
  --text-3:       #888782;
  --inv-bg:       #111110;
  --inv-text:     #F7F6F2;
  --shadow-sm:    0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:    0 12px 40px rgba(0,0,0,.12);
}

/* ─── Dark ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:           #0E0E0D;
  --bg-2:         #181816;
  --bg-card:      #1C1C1A;
  --bg-card-2:    #232320;
  --border:       #2A2A27;
  --border-2:     #3A3A36;
  --text:         #F0EFE9;
  --text-2:       #A8A79F;
  --text-3:       #5C5C57;
  --inv-bg:       #F0EFE9;
  --inv-text:     #111110;
  --shadow-sm:    0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
  --shadow-md:    0 4px 16px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.2);
  --shadow-lg:    0 12px 40px rgba(0,0,0,.5);
}

/* ─── Brand / Category Colors (theme-independent) ────────── */
:root {
  --red:          #E8391D;
  --red-10:       rgba(232,57,29,.1);
  --red-20:       rgba(232,57,29,.2);
  --blue:         #1A6BFF;
  --blue-10:      rgba(26,107,255,.1);
  --green:        #0B9B6E;
  --green-10:     rgba(11,155,110,.1);
  --amber:        #D97706;
  --amber-10:     rgba(217,119,6,.1);
  --violet:       #7C3AED;
  --violet-10:    rgba(124,58,237,.1);
  --teal:         #0891B2;
  --teal-10:      rgba(8,145,178,.1);

  /* Category map */
  --c-gadgets:    var(--blue);
  --c-gadgets-10: var(--blue-10);
  --c-cars:       var(--amber);
  --c-cars-10:    var(--amber-10);
  --c-movies:     var(--violet);
  --c-movies-10:  var(--violet-10);
  --c-jobs:       var(--green);
  --c-jobs-10:    var(--green-10);
  --c-ipos:       var(--teal);
  --c-ipos-10:    var(--teal-10);

  --font-head:    "Playfair Display", serif;;
  --font-body:    "Poppins", sans-serif;;
  --font-mono:    'DM Mono', monospace;
  --nav-h:        60px;
  --r:            6px;
  --r-lg:         12px;
  --ease:         cubic-bezier(.22,1,.36,1);
  --dur:          .2s;
}

/* ─── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  transition: background .25s var(--ease), color .25s var(--ease);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ─── Typography ────────────────────────────────────────── */
.t-display {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.t-head  { font-family: var(--font-head); font-weight: 700; line-height: 1.15; }
.t-label { font-family: var(--font-head); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.t-serif { font-family: var(--font-body); }
.t-mono  { font-family: var(--font-mono); }
.t-2     { color: var(--text-2) !important; }
.t-3     { color: var(--text-3) !important; }

/* ─── NAVBAR ────────────────────────────────────────────── */
.wu-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 20px;
  gap: 4px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.wu-logo {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  margin-right: auto;
  display: flex; align-items: center; gap: 6px;
  transition: opacity .15s;
}
.wu-logo:hover { opacity: .8; }

.wu-logo-dot {
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  display: inline-block;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: .7; }
}

.wu-nav-link {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  padding: 6px 12px;
  border-radius: var(--r);
  transition: all .15s;
  white-space: nowrap;
}
.wu-nav-link:hover, .wu-nav-link.active {
  color: var(--text);
  background: var(--bg-2);
}

.wu-nav-btn {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: var(--r);
  cursor: pointer;
  transition: all .15s;
  margin-left: 4px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.wu-nav-btn:hover { background: #c42e17; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(232,57,29,.35); }

.wu-theme-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .15s;
  font-size: 15px;
  color: var(--text-2);
  margin-left: 6px;
  flex-shrink: 0;
}
.wu-theme-btn:hover { border-color: var(--border-2); color: var(--text); }

/* ─── TICKER ────────────────────────────────────────────── */
.wu-ticker {
  height: 38px;
  background: var(--inv-bg);
  color: var(--inv-text);
  display: flex; align-items: center;
  overflow: hidden;
  transition: background .25s var(--ease);
  flex-shrink: 0;
}
.wu-ticker-chip {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  padding: 0 16px;
  height: 100%;
  display: flex; align-items: center;
  flex-shrink: 0;
  gap: 6px;
}
.wu-ticker-track {
  display: flex; align-items: center;
  animation: ticker-move 36s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.wu-ticker-item {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 500;
  padding: 0 40px 0 0;
  opacity: .75;
}
.wu-ticker-item::before {
  content: '●';
  font-size: 6px;
  opacity: .4;
  margin-right: 12px;
  vertical-align: middle;
}
@keyframes ticker-move {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── CATEGORY TAGS ─────────────────────────────────────── */
.wu-tag {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.wu-tag-gadgets { background: var(--c-gadgets-10); color: var(--c-gadgets); }
.wu-tag-cars    { background: var(--c-cars-10);    color: var(--c-cars); }
.wu-tag-movies  { background: var(--c-movies-10);  color: var(--c-movies); }
.wu-tag-jobs    { background: var(--c-jobs-10);    color: var(--c-jobs); }
.wu-tag-ipos    { background: var(--c-ipos-10);    color: var(--c-ipos); }

/* ─── COUNTDOWN PILL ────────────────────────────────────── */
.wu-cdpill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.wu-cdpill-hot  { background: var(--red-10);   color: var(--red); }
.wu-cdpill-warn { background: var(--amber-10); color: var(--amber); }
.wu-cdpill-cool { background: var(--bg-2);     color: var(--text-3); border: 1px solid var(--border); }

/* ─── CARD BASE ─────────────────────────────────────────── */
.wu-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  height: 100%;
}
.wu-card:hover {
  border-color: var(--border-2);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.wu-card-dark {
  background: var(--inv-bg);
  border-color: transparent;
  transition: background .25s var(--ease);
}
.wu-card-dark:hover { background: #1c1c1a; border-color: transparent; }

/* ─── NOTIFY BUTTON ─────────────────────────────────────── */
.wu-bell {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: none;
  color: var(--text-3);
  cursor: pointer;
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.wu-bell:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.wu-bell.on { background: var(--green); color: #fff; border-color: var(--green); }

/* ─── SECTION HEADER ────────────────────────────────────── */
.wu-sh {
  display: flex; align-items: center; gap: 14px;
  padding: 32px 0 16px;
}
.wu-sh-title {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.wu-sh-line { flex: 1; height: 1px; background: var(--border); }
.wu-sh-more {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  transition: color .15s;
}
.wu-sh-more:hover { color: var(--text); }

/* ─── PILL STRIP ────────────────────────────────────────── */
.wu-pills {
  display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  padding: 2px 0;
}
.wu-pills::-webkit-scrollbar { display: none; }

.wu-pill {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.wu-pill:hover, .wu-pill.on {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

/* ─── COUNTDOWN STRIP ───────────────────────────────────── */
.wu-cdstrip {
  background: var(--inv-bg);
  transition: background .25s var(--ease);
  overflow-x: auto; scrollbar-width: none;
  display: flex;
}
.wu-cdstrip::-webkit-scrollbar { display: none; }

.wu-cdi {
  flex-shrink: 0;
  padding: 20px 28px;
  border-right: 1px solid rgba(255,255,255,.07);
  cursor: pointer;
  transition: background .15s;
  min-width: 155px;
}
.wu-cdi:last-child { border-right: none; }
.wu-cdi:hover { background: rgba(255,255,255,.04); }

.wu-cdi-cat {
  font-family: var(--font-head);
  font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 4px;
}
.wu-cdi-name {
  font-family: var(--font-head);
  font-size: 13px; font-weight: 600;
  color: var(--inv-text);
  margin-bottom: 6px;
  line-height: 1.3;
}
.wu-cdi-days {
  font-family: var(--font-mono);
  font-size: 28px; font-weight: 500;
  color: var(--red);
  line-height: 1;
}
.wu-cdi-days span { font-size: 13px; color: rgba(255,255,255,.3); margin-left: 4px; }

/* ─── AFFILIATE BADGE ───────────────────────────────────── */
.aff-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--amber-10);
  color: var(--amber);
  white-space: nowrap;
}

/* ─── FOOTER ────────────────────────────────────────────── */
.wu-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 56px 0 0;
  transition: background .25s var(--ease);
}
.wu-footer-brand {
  font-family: var(--font-head);
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}
.wu-footer-col-title {
  font-family: var(--font-head);
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}
.wu-footer-link {
  font-size: 14px;
  color: var(--text-2);
  display: block; margin-bottom: 10px;
  transition: color .15s;
}
.wu-footer-link:hover { color: var(--text); }
.wu-footer-bottom {
  border-top: 1px solid var(--border);
  padding: 18px 0;
  margin-top: 48px;
  font-family: var(--font-head);
  font-size: 12px;
  color: var(--text-3);
}

/* ─── TOAST ─────────────────────────────────────────────── */
.wu-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-head);
  font-size: 13px; font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--r-lg);
  transform: translateY(72px);
  opacity: 0;
  transition: all .32s var(--ease);
  display: flex; align-items: center; gap: 8px;
  pointer-events: none;
  max-width: 320px;
  box-shadow: var(--shadow-lg);
}
.wu-toast.show { transform: translateY(0); opacity: 1; }

/* ─── UTILITY ───────────────────────────────────────────── */
.border-wu   { border-color: var(--border) !important; }
.bg-card-wu  { background: var(--bg-card) !important; }
.bg-2-wu     { background: var(--bg-2) !important; }
.gap-wu { gap: 1px; background: var(--border); }

/* ─── REVEAL ANIMATION ──────────────────────────────────── */
.wu-rev {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.wu-rev.in { opacity: 1; transform: none; }

/* ─── MOBILE NAV ────────────────────────────────────────── */
.wu-mobile-menu {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  z-index: 999;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px 20px;
  transition: background .25s var(--ease);
}