/* =========================================================
   Bharat Matka — Fintech Pro UI (Wise / Chime inspired)
   Light, professional, green. CSS-only — keeps site light.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --ink: #142722;
  --ink-soft: #52635b;
  --ink-muted: #708077;
  --canvas: #f7f9f6;
  --surface: #ffffff;
  --mint: #e8f4ed;
  --mint-2: #d3f2c0;
  --line: #dfe6e0;
  --forest: #0f3d2e;
  --forest-2: #10533f;
  --primary: #176b52;
  --lime: #9fe870;
  --lime-ink: #163300;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 9999px;
  --shadow-soft: 0 1px 0 rgba(20, 39, 34, 0.04), 0 12px 40px rgba(20, 39, 34, 0.06);
  --shadow-lift: 0 18px 50px rgba(20, 39, 34, 0.1);
  --font-display: "Outfit", system-ui, sans-serif;
  --font-ui: "Plus Jakarta Sans", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* ---------- Base canvas ---------- */
html { scroll-behavior: smooth; }

body.glass-theme,
body.theme-green {
  font-family: var(--font-ui) !important;
  color: var(--ink) !important;
  background: var(--canvas) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(159, 232, 112, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 10%, rgba(23, 107, 82, 0.08), transparent 50%),
    linear-gradient(180deg, #f7f9f6 0%, #ffffff 55%) !important;
  background-attachment: scroll !important;
}

body.glass-theme h1,
body.glass-theme h2,
body.glass-theme h3,
body.glass-theme h4,
body.glass-theme .font-heading {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em;
  color: var(--ink) !important;
}

#root .min-h-screen.bg-neutral-50 {
  background: transparent !important;
}

/* ---------- Floating pill header (fintech nav) ---------- */
.site-header-glass,
body.glass-theme header[style*="position: fixed"],
body.glass-theme header[style*="position:fixed"] {
  top: 12px !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0.65rem 1rem !important;
  background: rgba(255, 255, 255, 0.86) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  border: 1px solid rgba(20, 39, 34, 0.08) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-soft) !important;
  z-index: 1000 !important;
}

body.glass-theme header .container-main {
  max-width: none;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.site-header-glass nav a,
body.glass-theme header nav a {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: var(--ink-soft) !important;
  border-radius: var(--radius-pill) !important;
  padding: 0.45rem 0.9rem !important;
  transition: background 0.18s var(--ease), color 0.18s var(--ease) !important;
}

.site-header-glass nav a:hover,
body.glass-theme header nav a:hover {
  background: rgba(211, 242, 192, 0.45) !important;
  color: var(--forest) !important;
}

/* Header CTA → Wise lime pill */
body.glass-theme header a[href$=".apk"],
body.glass-theme header a[download] {
  background: var(--lime) !important;
  color: var(--lime-ink) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  padding: 0.7rem 1.35rem !important;
  border: none !important;
  transition: transform 0.18s var(--ease), filter 0.18s var(--ease) !important;
}

body.glass-theme header a[href$=".apk"]:hover,
body.glass-theme header a[download]:hover {
  transform: scale(1.04) !important;
  filter: brightness(1.02);
}

/* Push content under floating header */
body.glass-theme main.container-main {
  padding-top: 6.5rem !important;
}

@media (min-width: 1024px) {
  body.glass-theme #root > div > main,
  body.glass-theme section.section-padding:first-of-type {
    /* hero often sits under header */
  }
}

/* ---------- Buttons (global) ---------- */
body.glass-theme .btn-primary,
body.glass-theme button[style*="linear-gradient(135deg"],
body.glass-theme a[style*="linear-gradient(135deg, rgb(21, 128, 61)"] {
  background: var(--lime) !important;
  color: var(--lime-ink) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease) !important;
}

body.glass-theme .btn-primary:hover,
body.glass-theme a[style*="linear-gradient(135deg, rgb(21, 128, 61)"]:hover {
  transform: scale(1.04) !important;
  background: #b6f08a !important;
}

body.glass-theme .btn-secondary {
  background: rgba(22, 51, 0, 0.07) !important;
  color: var(--ink) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 700 !important;
}

body.glass-theme .btn-secondary:hover {
  background: rgba(22, 51, 0, 0.12) !important;
}

body.glass-theme .btn-accent {
  background: var(--lime) !important;
  color: var(--lime-ink) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

body.glass-theme .btn-accent:hover {
  transform: scale(1.04) !important;
}

/* ---------- Cards / panels ---------- */
body.glass-theme .card,
body.glass-theme .card-glass,
body.glass-theme .glass,
body.glass-theme .glass-panel {
  background: var(--surface) !important;
  border: 1px solid rgba(14, 15, 12, 0.1) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease) !important;
}

body.glass-theme .card:hover,
body.glass-theme .glass-panel:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift) !important;
  border-color: rgba(159, 232, 112, 0.55) !important;
}

/* Market rows — product tiles */
body.glass-theme [class*="market-row"],
body.glass-theme .sm-flex-row {
  border-radius: var(--radius-md) !important;
}

/* ---------- Sections ---------- */
body.glass-theme .section-padding {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

@media (min-width: 1024px) {
  body.glass-theme .section-padding {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
}

body.glass-theme .container-main {
  max-width: 1120px;
}

/* ---------- Charts SSR (index.php) ---------- */
body.glass-theme #root main.container-main > div:first-child h1 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(1.85rem, 4vw, 2.6rem) !important;
  letter-spacing: -0.03em !important;
  color: var(--ink) !important;
}

body.glass-theme #root main.container-main section {
  background: var(--surface) !important;
  border: 1px solid rgba(14, 15, 12, 0.1) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
  overflow: hidden !important;
}

body.glass-theme #root main.container-main section > div:first-child {
  background: linear-gradient(180deg, #f3faf5 0%, #ffffff 100%) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 1.15rem 1.35rem !important;
}

body.glass-theme #root main.container-main section > div:first-child > div > div:first-child {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

body.glass-theme #root main.container-main section li a {
  transition: background 0.15s var(--ease) !important;
  padding: 1rem 1.35rem !important;
}

body.glass-theme #root main.container-main section li a:hover {
  background: #f3faf5 !important;
}

body.glass-theme #root main.container-main section li a > div:last-child {
  background: rgba(159, 232, 112, 0.35) !important;
  color: var(--lime-ink) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  padding: 0.35rem 0.75rem !important;
  border-radius: var(--radius-pill) !important;
}

/* ---------- Tables — fintech pro + animations ---------- */
@keyframes lm-table-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes lm-row-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes lm-cell-pop {
  0% { transform: scale(0.92); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes lm-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Wrapper cards that contain rates/charts tables */
body.glass-theme .rate-table,
body.glass-theme table[style*="borderCollapse"],
body.glass-theme table[style*="tableLayout"] {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-soft) !important;
  animation: lm-table-in 0.45s var(--ease) both;
}

body.glass-theme .rate-table th,
body.glass-theme table[style*="borderCollapse"] thead th,
body.glass-theme table[style*="tableLayout"] thead th {
  background: linear-gradient(180deg, #e8f4ed 0%, #f3faf5 100%) !important;
  color: var(--ink-soft) !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-bottom: 2px solid rgba(23, 107, 82, 0.18) !important;
  padding: 0.85rem 0.65rem !important;
  position: sticky;
  top: 0;
  z-index: 2;
}

body.glass-theme .rate-table td,
body.glass-theme table[style*="borderCollapse"] tbody td,
body.glass-theme table[style*="tableLayout"] tbody td {
  border: none !important;
  border-bottom: 1px solid #eef2ef !important;
  padding: 0.75rem 0.55rem !important;
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
  text-align: center;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

body.glass-theme .rate-table tbody tr,
body.glass-theme table[style*="borderCollapse"] tbody tr,
body.glass-theme table[style*="tableLayout"] tbody tr {
  animation: lm-row-in 0.35s var(--ease) both;
}

body.glass-theme table[style*="borderCollapse"] tbody tr:nth-child(1),
body.glass-theme table[style*="tableLayout"] tbody tr:nth-child(1) { animation-delay: 0.03s; }
body.glass-theme table[style*="borderCollapse"] tbody tr:nth-child(2),
body.glass-theme table[style*="tableLayout"] tbody tr:nth-child(2) { animation-delay: 0.06s; }
body.glass-theme table[style*="borderCollapse"] tbody tr:nth-child(3),
body.glass-theme table[style*="tableLayout"] tbody tr:nth-child(3) { animation-delay: 0.09s; }
body.glass-theme table[style*="borderCollapse"] tbody tr:nth-child(4),
body.glass-theme table[style*="tableLayout"] tbody tr:nth-child(4) { animation-delay: 0.12s; }
body.glass-theme table[style*="borderCollapse"] tbody tr:nth-child(5),
body.glass-theme table[style*="tableLayout"] tbody tr:nth-child(5) { animation-delay: 0.15s; }
body.glass-theme table[style*="borderCollapse"] tbody tr:nth-child(6),
body.glass-theme table[style*="tableLayout"] tbody tr:nth-child(6) { animation-delay: 0.18s; }
body.glass-theme table[style*="borderCollapse"] tbody tr:nth-child(7),
body.glass-theme table[style*="tableLayout"] tbody tr:nth-child(7) { animation-delay: 0.21s; }
body.glass-theme table[style*="borderCollapse"] tbody tr:nth-child(8),
body.glass-theme table[style*="tableLayout"] tbody tr:nth-child(8) { animation-delay: 0.24s; }
body.glass-theme table[style*="borderCollapse"] tbody tr:nth-child(n+9),
body.glass-theme table[style*="tableLayout"] tbody tr:nth-child(n+9) { animation-delay: 0.28s; }

body.glass-theme .rate-table tbody tr:nth-child(even),
body.glass-theme table[style*="borderCollapse"] tbody tr:nth-child(even),
body.glass-theme table[style*="tableLayout"] tbody tr:nth-child(even) {
  background: #fafcfb;
}

body.glass-theme .rate-table tbody tr:hover,
body.glass-theme table[style*="borderCollapse"] tbody tr:hover,
body.glass-theme table[style*="tableLayout"] tbody tr:hover {
  background: #eef8f1 !important;
}

body.glass-theme .rate-table tbody tr:hover td,
body.glass-theme table[style*="borderCollapse"] tbody tr:hover td,
body.glass-theme table[style*="tableLayout"] tbody tr:hover td {
  transform: translateY(-1px);
}

/* Result / number cells */
body.glass-theme table[style*="borderCollapse"] tbody td > div,
body.glass-theme table[style*="tableLayout"] tbody td > div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.2rem 0.45rem;
  border-radius: 10px;
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}

body.glass-theme table[style*="borderCollapse"] tbody tr:hover td > div,
body.glass-theme table[style*="tableLayout"] tbody tr:hover td > div {
  background: rgba(159, 232, 112, 0.28);
  animation: lm-cell-pop 0.35s var(--ease);
}

/* First column (date) chip look */
body.glass-theme table[style*="borderCollapse"] tbody td:first-child,
body.glass-theme table[style*="tableLayout"] tbody td:first-child {
  background: linear-gradient(90deg, #f3faf5 0%, transparent 100%);
  font-weight: 700 !important;
  color: var(--forest) !important;
}

/* Rate game cards (Single / Jodi / Panna) */
body.glass-theme #rates [style*="border: 1px solid"],
body.glass-theme section#rates [style*="borderRadius:`1rem`"],
body.glass-theme [style*="boxShadow: 0 10px 25px rgba(22, 101, 52"] {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-soft) !important;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease) !important;
  animation: lm-table-in 0.4s var(--ease) both;
}

body.glass-theme #rates [style*="boxShadow"]:hover,
body.glass-theme [style*="0 10px 25px rgba(22, 101, 52"]:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lift) !important;
  border-color: rgba(159, 232, 112, 0.6) !important;
}

/* Rates tab strip shimmer accent */
body.glass-theme #rates [style*="linear-gradient(to right"] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f3d2e 0%, #176b52 55%, #10533f 100%) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

body.glass-theme #rates [style*="linear-gradient(to right"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(159, 232, 112, 0.18) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: lm-shimmer 3.5s linear infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.glass-theme .rate-table,
  body.glass-theme table[style*="borderCollapse"],
  body.glass-theme table[style*="tableLayout"],
  body.glass-theme table tbody tr,
  body.glass-theme #rates [style*="linear-gradient(to right"]::after {
    animation: none !important;
  }
}

body.glass-theme .search-input {
  border-radius: var(--radius-pill) !important;
  border: 1.5px solid var(--line) !important;
  background: #fff !important;
  font-family: var(--font-ui) !important;
  padding: 0.9rem 1.25rem 0.9rem 3rem !important;
}

body.glass-theme .search-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(23, 107, 82, 0.12) !important;
}

body.glass-theme .tab-button {
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
}

body.glass-theme .tab-button:not(.active) {
  background: rgba(22, 51, 0, 0.05) !important;
  color: var(--ink-soft) !important;
  border: none !important;
}

body.glass-theme .tab-button.active {
  background: var(--forest) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.glass-theme .result-number,
body.glass-theme .result-number-large {
  background: linear-gradient(135deg, #176b52 0%, #9fe870 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-family: var(--font-display) !important;
}

body.glass-theme .badge-info {
  background: var(--mint) !important;
  color: var(--forest) !important;
  border-radius: var(--radius-pill) !important;
}

/* ---------- Hero polish ---------- */
body.glass-theme .hero-badge {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
}

body.glass-theme .download-feature-pill {
  border-radius: var(--radius-md) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ---------- Modals ---------- */
body.glass-theme .modal-overlay {
  background: rgba(15, 61, 46, 0.55) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

body.glass-theme .modal-content {
  background: #fff !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-lift) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ---------- Footer — deep forest ---------- */
body.glass-theme footer#contact {
  margin-top: 3rem;
  background: var(--forest) !important;
  border-top: none !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

body.glass-theme footer#contact a:hover {
  color: var(--lime) !important;
}

/* ---------- WhatsApp float ---------- */
body.glass-theme .whatsapp-float {
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.35) !important;
}

/* ---------- Mobile nav drawer ---------- */
body.glass-theme .lg-hidden div[style*="borderRadius"][style*="padding"] {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Selection */
body.theme-green ::selection {
  background: var(--mint-2);
  color: var(--lime-ink);
}