/* =============================================
   Market Neon – Main Stylesheet
   ============================================= */

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #0d9488; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #0f766e; }

/* ---- Neon Gradient Text ---- */
.gradient-text {
  background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 50%, #0d9488 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Hero Gradient ---- */
.hero-gradient {
  background: linear-gradient(135deg,
    #f0fdf9 0%,
    #ccfbef 30%,
    #f0fdf9 60%,
    #ecfdf5 100%);
}
.dark .hero-gradient {
  background: linear-gradient(135deg,
    #030712 0%,
    #042f2e 30%,
    #030712 60%,
    #022c22 100%);
}

/* ---- Cards ---- */
.card {
  background: #ffffff;
  border: 1px solid #f3f4f6;
  border-radius: 1rem;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.dark .card {
  background: #111827;
  border-color: #1f2937;
}
.card:hover {
  box-shadow: 0 8px 30px rgba(13, 148, 136, 0.12);
  transform: translateY(-2px);
  border-color: #99f6e0;
}
.dark .card:hover {
  border-color: #0f766e;
  box-shadow: 0 8px 30px rgba(13, 148, 136, 0.2);
}

/* ---- Calculator Card ---- */
.calc-card .icon-wrap {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, #ccfbef, #f0fdf9);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.dark .calc-card .icon-wrap {
  background: linear-gradient(135deg, #134e4a, #042f2e);
}

/* ---- Category Card ---- */
.category-card {
  background: #fff;
  border: 1.5px solid #f3f4f6;
  border-radius: 1rem;
  padding: 1.25rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.dark .category-card {
  background: #111827;
  border-color: #1f2937;
}
.category-card:hover {
  border-color: #5eead4;
  background: #f0fdf9;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(13,148,136,0.12);
}
.dark .category-card:hover {
  background: #042f2e;
  border-color: #0f766e;
}
.category-card .cat-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.category-card .cat-icon svg { width: 22px; height: 22px; color: white; }

/* ---- IPO Status Badges ---- */
.badge-open  { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; }
.badge-upcoming { background:#fef9c3; color:#854d0e; border:1px solid #fef08a; }
.badge-closed { background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; }
.dark .badge-open  { background:#14532d; color:#4ade80; border-color:#166534; }
.dark .badge-upcoming { background:#422006; color:#fbbf24; border-color:#713f12; }
.dark .badge-closed { background:#450a0a; color:#f87171; border-color:#7f1d1d; }

/* ---- IPO Tabs ---- */
.ipo-tab { transition: all 0.2s; cursor: pointer; }
.ipo-tab.active {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: white;
  box-shadow: 0 4px 14px rgba(13,148,136,0.3);
}

/* ---- News Card ---- */
.news-card img { transition: transform 0.3s; }
.news-card:hover img { transform: scale(1.05); }

/* ---- Calculator Engine ---- */
.calc-input-group { margin-bottom: 1.25rem; }
.calc-input-group label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.4rem; color: #374151; }
.dark .calc-input-group label { color: #d1d5db; }
.calc-input-group input,
.calc-input-group select {
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.625rem;
  font-size: 0.9rem;
  background: #f9fafb;
  color: #111827;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.dark .calc-input-group input,
.dark .calc-input-group select {
  background: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}
.calc-input-group input:focus,
.calc-input-group select:focus {
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20,184,166,0.15);
}

.calc-result-box {
  background: linear-gradient(135deg, #f0fdf9, #ccfbef);
  border: 1px solid #99f6e0;
  border-radius: 1rem;
  padding: 1.5rem;
}
.dark .calc-result-box {
  background: linear-gradient(135deg, #042f2e, #064e3b);
  border-color: #0f766e;
}
.result-item { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid rgba(20,184,166,0.15); }
.result-item:last-child { border-bottom: none; }
.result-label { font-size: 0.875rem; color: #6b7280; }
.dark .result-label { color: #9ca3af; }
.result-value { font-weight: 700; font-size: 1.05rem; color: #0d9488; }

/* ---- Doughnut Chart placeholder ---- */
.chart-container { position: relative; max-width: 220px; margin: 0 auto; }

/* ---- Breadcrumbs ---- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: #6b7280; }
.breadcrumb a { color: #14b8a6; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb svg { width: 14px; height: 14px; }

/* ---- Section Heading ---- */
.section-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, #ccfbef, #f0fdf9);
  color: #0d9488;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.dark .section-tag { background: linear-gradient(135deg, #042f2e, #064e3b); color: #2dd4bf; }

/* ---- Button Styles ---- */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: white;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(13,148,136,0.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(13,148,136,0.35); background: linear-gradient(135deg, #0d9488, #0f766e); }
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  border: 1.5px solid #14b8a6;
  color: #0d9488;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-outline:hover { background: #f0fdf9; transform: translateY(-1px); }
.dark .btn-outline { color: #2dd4bf; border-color: #0d9488; }
.dark .btn-outline:hover { background: #042f2e; }

/* ---- Skeleton Loader ---- */
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: 0.5rem;
}
.dark .skeleton {
  background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
  background-size: 200% 100%;
}
@keyframes skeleton-loading { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ---- Donut Chart ---- */
.donut-ring { transform: rotate(-90deg); transform-origin: 50% 50%; }

/* ---- Sticky Sidebar ---- */
@media (min-width: 1024px) {
  .sticky-sidebar { position: sticky; top: 5rem; }
}

/* ---- Mobile-first adjustments ---- */
@media (max-width: 640px) {
  .section-pad { padding: 3rem 1rem; }
  .hero-title { font-size: 2rem; line-height: 1.2; }
}

/* ---- Print styles ---- */
@media print {
  header, footer, .no-print { display: none !important; }
  body { background: white; color: black; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}