/* ==================================================
   CASINO BANGLADESH 2026 — main-theme.css
   Luxe Nocturne | Deep Jade & Antique Gold
   ================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;1,500&family=Noto+Sans+Bengali:wght@300;400;500;700&display=swap');

/* ─────────────── Design System Tokens ─────────────── */
:root {
  --gold-pale:      #f0d076;
  --gold-core:      #d4a017;
  --gold-deep:      #7a5c00;
  --gold-shine:     #ffeb99;
  --jade-dark:      #0a5c3e;
  --jade-main:      #128c5e;
  --jade-glow:      #3acfa2;
  --jade-shadow:    #063828;
  --bg-void:        #030907;
  --bg-deep:        #09120e;
  --bg-frosted:     rgba(9, 18, 14, 0.86);
  --card-base:      #101c16;
  --layer-up:       #1a2a22;
  --edge-gold:      rgba(212,160,23,0.22);
  --edge-gold-strong: rgba(212,160,23,0.44);
  --edge-jade:      rgba(58,207,162,0.34);
  --text-light:     #e5f5eb;
  --text-softer:    #7a9a88;
  --text-pure:      #f8fff5;
  --negative:       #a52714;
  --positive:       #1b6e38;
  --radius-xs:      10px;
  --radius-base:    18px;
  --radius-wide:    28px;
  --shine-gold:     0 0 26px rgba(212,160,23,0.28), 0 0 9px rgba(212,160,23,0.16);
  --shine-jade:     0 0 22px rgba(58,207,162,0.24);
  --shadow-heavy:   0 7px 34px rgba(0,0,0,0.62);
  --bezier-smooth:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-base:  0.34s;
}

/* ─────────────── Reset & Base ─────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16.4px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Noto Sans Bengali', system-ui, sans-serif;
  background-color: var(--bg-void);
  color: var(--text-light);
  line-height: 1.82;
  min-height: 100vh;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 26px 84px;

  background-image:
    radial-gradient(ellipse at 30% 70%, rgba(58,207,162,0.11) 0%, transparent 58%),
    radial-gradient(ellipse at 75% 25%, rgba(212,160,23,0.09) 0%, transparent 62%),
    radial-gradient(ellipse at 10% 10%, rgba(212,160,23,0.06) 0%, transparent 55%),
    repeating-linear-gradient(
      125deg,
      transparent 0,
      transparent 46px,
      rgba(212,160,23,0.018) 46px,
      rgba(212,160,23,0.018) 48px
    ),
    url('bgcasino.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ─────────────── Typography ─────────────── */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.26;
  letter-spacing: 0.012em;
}

h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.2rem);
  font-weight: 800;
  color: var(--gold-shine);
  text-shadow: 0 0 38px rgba(212,160,23,0.42), 0 3px 7px rgba(0,0,0,0.85);
}

h2 {
  font-size: clamp(1.45rem, 3.6vw, 2.2rem);
  font-weight: 700;
  color: var(--gold-shine);
  margin: 50px 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--edge-gold);
  position: relative;
}

h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 64px; height: 3px;
  background: linear-gradient(45deg, var(--jade-glow), var(--gold-core));
  border-radius: 3px;
}

h3 {
  font-size: clamp(1.1rem, 2.8vw, 1.45rem);
  font-weight: 500;
  font-style: italic;
  color: var(--jade-glow);
  margin: 34px 0 12px;
}

h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-core);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 10px;
}

p {
  margin-bottom: 1.1rem;
  color: var(--text-light);
  font-size: 0.98rem;
}

strong { color: var(--gold-shine); font-weight: 800; }
em { font-style: italic; color: var(--text-softer); font-size: 0.93em; }

/* ─────────────── Links ─────────────── */
a {
  color: var(--jade-glow);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid rgba(58,207,162,0.32);
  transition: all var(--duration-base) var(--bezier-smooth);
}

a:hover {
  color: var(--gold-shine);
  border-bottom-color: rgba(212,160,23,0.62);
}

/* ─────────────── Header Area ─────────────── */
body > h1:first-of-type,
header {
  background: linear-gradient(145deg, #0e1f17 0%, #08140f 50%, #0c1b13 100%);
  border-bottom: 1px solid var(--edge-gold);
  border-radius: 0 0 var(--radius-wide) var(--radius-wide);
  padding: 40px 30px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 0 -26px 38px;
}

body > h1:first-of-type::before,
header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(212,160,23,0.14) 0%, transparent 75%);
  pointer-events: none;
}

/* ─────────────── Content Blocks ─────────────── */
section,
.section,
.card,
.section-card {
  background: var(--bg-frosted);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid var(--edge-gold);
  border-radius: var(--radius-wide);
  padding: 34px 30px;
  margin: 30px 0;
  box-shadow: var(--shadow-heavy);
  position: relative;
  overflow: hidden;
}

section::before,
.section::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 2px;
  background: linear-gradient(45deg, transparent, rgba(58,207,162,0.6), transparent);
}

/* ─────────────── Tip / Highlight Paragraphs ─────────────── */
p:has(> strong:first-child) {
  background: rgba(18,140,94,0.12);
  border-left: 4px solid var(--jade-glow);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  padding: 13px 18px;
  margin: 20px 0;
  font-size: 0.96rem;
}

/* ─────────────── Lists ─────────────── */
ul, ol { margin: 12px 0 20px; }
ul { list-style: none; padding-left: 0; }

ul li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: 10px;
  color: var(--text-light);
  font-size: 0.97rem;
}

ul li::before {
  content: '➜';
  position: absolute;
  left: 0;
  color: var(--jade-glow);
  font-size: 1.1em;
}

ul ul li::before {
  content: '◆';
  color: var(--gold-deep);
  font-size: 0.9em;
}

ol {
  list-style: none;
  counter-reset: step-counter;
  padding-left: 0;
}

ol li {
  counter-increment: step-counter;
  position: relative;
  padding-left: 2.4em;
  margin-bottom: 12px;
}

ol li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  width: 1.8em; height: 1.8em;
  background: linear-gradient(145deg, var(--jade-dark), var(--jade-main));
  color: white;
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: 0.85em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(18,140,94,0.4);
}

/* ─────────────── CTA Button ─────────────── */
.btn,
a.btn {
  display: inline-block;
  background: linear-gradient(45deg, var(--jade-dark) 0%, var(--jade-main) 50%, var(--gold-core) 100%);
  background-size: 240% 100%;
  background-position: 0% 0%;
  color: white !important;
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: 0.98rem;
  letter-spacing: 0.07em;
  padding: 15px 38px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none !important;
  transition: all var(--duration-base) var(--bezier-smooth);
  box-shadow: 0 6px 28px rgba(18,140,94,0.48);
}

.btn:hover,
a.btn:hover {
  background-position: 100% 0%;
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 12px 40px rgba(212,160,23,0.42), var(--shine-jade);
}

/* ─────────────── Tables ─────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: 0.89rem;
  border-radius: var(--radius-base);
  overflow: hidden;
}

thead tr {
  background: linear-gradient(135deg, var(--jade-shadow), #0b1711);
  border-bottom: 3px solid var(--jade-glow);
}

thead th {
  padding: 14px 16px;
  text-align: left;
  color: var(--gold-shine);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

tbody tr {
  border-bottom: 1px solid rgba(58,207,162,0.12);
  transition: background var(--duration-base) var(--bezier-smooth);
}

tbody tr:hover {
  background: rgba(58,207,162,0.08);
}

tbody td {
  padding: 13px 16px;
  vertical-align: middle;
}

/* ─────────────── Badges / Pills ─────────────── */
.badge {
  background: rgba(212,160,23,0.14);
  border: 1px solid var(--gold-deep);
  color: var(--gold-shine);
  font-size: 0.74rem;
  font-weight: 800;
  padding: 4px 13px;
  border-radius: 999px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.badge-green {
  background: rgba(58,207,162,0.14);
  border-color: var(--jade-glow);
  color: var(--jade-glow);
}

/* ─────────────── FAQ Accordion ─────────────── */
.faq-item {
  background: rgba(16,28,22,0.92);
  border: 1px solid var(--edge-jade);
  border-radius: var(--radius-base);
  margin-bottom: 12px;
  transition: border-color var(--duration-base) var(--bezier-smooth);
}

.faq-item:hover {
  border-color: var(--jade-glow);
}

.faq-item h3 {
  padding: 18px 22px;
  font-size: 1rem;
  color: var(--gold-core);
  cursor: pointer;
}

/* ─────────────── Steps List ─────────────── */
.steps ol li {
  background: rgba(16,28,22,0.88);
  border: 1px solid var(--edge-jade);
  border-radius: var(--radius-base);
  padding: 18px 20px 18px 66px;
  margin-bottom: 14px;
  position: relative;
  transition: all var(--duration-base) var(--bezier-smooth);
}

.steps ol li:hover {
  border-color: var(--gold-core);
  transform: translateX(6px);
}

.steps ol li::before {
  content: counter(step-counter);
  position: absolute;
  left: 16px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  background: linear-gradient(145deg, var(--gold-deep), var(--gold-core));
  color: var(--bg-void);
  font-weight: 800;
  font-size: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shine-gold);
}

/* ─────────────── Casino / Ranking Cards ─────────────── */
.casino-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--layer-up);
  border: 1px solid var(--edge-gold);
  border-left: 4px solid var(--gold-deep);
  border-radius: var(--radius-base);
  padding: 18px 22px;
  margin-bottom: 12px;
  transition: all var(--duration-base) var(--bezier-smooth);
}

.casino-card:hover {
  border-color: var(--edge-gold-strong);
  border-left-color: var(--gold-shine);
  transform: translateX(6px);
  box-shadow: var(--shine-gold);
}

.casino-card__rank {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--gold-deep);
  min-width: 36px;
}

.casino-card:hover .casino-card__rank {
  color: var(--gold-core);
}

/* ─────────────── Footer ─────────────── */
footer {
  background: rgba(6,12,9,0.96);
  border-top: 1px solid var(--edge-gold);
  padding: 32px 26px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-softer);
  margin: 0 -26px -84px;
}

.footer-warning {
  background: rgba(165,39,20,0.09);
  border: 1px solid rgba(165,39,20,0.26);
  border-radius: var(--radius-xs);
  padding: 14px 20px;
  font-size: 0.8rem;
  color: #a07070;
  margin-bottom: 18px;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* ─────────────── Scrollbar & Selection ─────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: var(--jade-main); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--jade-glow); }

::selection {
  background: rgba(58,207,162,0.32);
  color: var(--text-pure);
}

/* ─────────────── Utility Classes ─────────────── */
.text-center      { text-align: center; }
.text-gold        { color: var(--gold-core); }
.text-jade        { color: var(--jade-glow); }
.text-dim         { color: var(--text-softer); font-size: 0.89em; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 18px; }
.mt-3 { margin-top: 32px; }
.mb-2 { margin-bottom: 18px; }
.mb-3 { margin-bottom: 32px; }

/* ─────────────── Responsive Adjustments ─────────────── */
@media (max-width: 480px) {
  body { padding: 0 16px 60px; }
  h1 { font-size: 1.55rem; }
  h2 { margin-top: 34px; font-size: 1.25rem; }
  section, .section, .card { padding: 20px 18px; margin: 20px 0; }
  .btn, a.btn { padding: 14px 24px; font-size: 0.94rem; width: 100%; }
  .casino-card { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (min-width: 768px) {
  body { padding: 0 36px 80px; max-width: 960px; }
  .casino-card:hover { transform: translateX(8px); }
  .steps ol li:hover { transform: translateX(8px); }
}