/* =========================================================
   Rubox Top Up BD — Theme styles
   Mirrors src/styles.css from the React build.
   ========================================================= */

:root {
  --background: oklch(0.16 0.02 260);
  --foreground: oklch(0.98 0.01 250);
  --card: oklch(0.22 0.025 260);
  --border: oklch(0.32 0.03 260);
  --muted: oklch(0.28 0.02 260);
  --muted-foreground: oklch(0.72 0.02 260);
  --primary: oklch(0.62 0.22 25);
  --roblox-red: oklch(0.62 0.22 25);
  --neon: oklch(0.85 0.23 145);
  --accent: oklch(0.72 0.2 60);
  --input: oklch(0.28 0.025 260);
  --radius: 0.75rem;
  --gradient-card: linear-gradient(145deg, oklch(0.26 0.04 265) 0%, oklch(0.2 0.03 260) 100%);
  --shadow-block: 0 6px 0 0 oklch(0 0 0 / 0.45), 0 10px 30px -10px oklch(0.62 0.22 25 / 0.4);
  --font-display: 'Luckiest Guy', 'Hind Siliguri', cursive;
  --font-block: 'Russo One', 'Hind Siliguri', sans-serif;
  --font-body: 'Hind Siliguri', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--background);
  color: var(--foreground);
  background-image:
    radial-gradient(circle at 20% 10%, oklch(0.62 0.22 25 / 0.18), transparent 50%),
    radial-gradient(circle at 80% 90%, oklch(0.78 0.22 145 / 0.15), transparent 55%),
    radial-gradient(circle at 50% 50%, oklch(0.55 0.25 320 / 0.08), transparent 70%);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1,h2,h3 { font-family: var(--font-block); margin: 0; }

.rubox-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.rubox-container--narrow { max-width: 800px; margin: 0 auto; padding: 0 1rem; }
.rubox-container--narrow-wide { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }

.text-neon { color: var(--neon); }
.text-accent { color: var(--accent); }
.text-roblox-red { color: var(--roblox-red); }
.muted { color: var(--muted-foreground); }
.small { font-size: .75rem; }
.upper { text-transform: uppercase; letter-spacing: .12em; font-family: var(--font-block); }
.center { text-align: center; }
.full { width: 100%; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.pad-6 { padding: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }

.text-stroke { -webkit-text-stroke: 2px oklch(0.16 0.02 260); text-shadow: 0 4px 0 oklch(0 0 0 / 0.4); }
.glow-text { text-shadow: 0 0 20px oklch(0.85 0.23 145 / 0.7), 0 0 40px oklch(0.85 0.23 145 / 0.4); }

/* Notice + Header */
.rubox-notice-bar {
  background: linear-gradient(90deg, var(--roblox-red), oklch(0.6 0.25 0), var(--accent));
  color: white; text-align: center; padding: .5rem 1rem; font-family: var(--font-block); font-size: .8rem;
}
.rubox-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(20px); background: oklch(0.16 0.02 260 / 0.7); border-bottom: 2px solid var(--border); }
.rubox-header__inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; }
.rubox-logo { display: flex; align-items: center; gap: .5rem; }
.rubox-logo__icon { width: 2.5rem; height: 2.5rem; border-radius: .5rem; background: linear-gradient(135deg, var(--roblox-red), var(--accent)); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.25rem; color: white; -webkit-text-stroke: 2px oklch(0.16 0.02 260); }
.rubox-logo__title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1; }
.rubox-logo__subtitle { font-family: var(--font-block); font-size: .625rem; color: var(--neon); margin-top: -2px; display: block; }
.rubox-nav { display: none; gap: 1.5rem; font-family: var(--font-block); font-size: .85rem; text-transform: uppercase; }
.rubox-nav a:hover { color: var(--neon); }
@media (min-width: 768px) { .rubox-nav { display: flex; } }

/* Buttons (Roblox brick style) */
.btn-block {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; font-family: var(--font-block); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; border-radius: var(--radius);
  border: 2px solid oklch(0 0 0 / 0.4);
  box-shadow: 0 5px 0 0 oklch(0 0 0 / 0.5), 0 8px 20px -5px oklch(0 0 0 / 0.4);
  transition: transform .12s ease, box-shadow .12s ease; cursor: pointer; color: white;
}
.btn-block:hover { transform: translateY(-2px); }
.btn-block:active { transform: translateY(3px); box-shadow: 0 2px 0 0 oklch(0 0 0 / 0.5); }
.btn-block.primary { background: linear-gradient(180deg, oklch(0.7 0.22 25), oklch(0.55 0.24 25)); }
.btn-block.neon { background: linear-gradient(180deg, oklch(0.85 0.23 145), oklch(0.65 0.22 145)); color: oklch(0.15 0.02 260); }
.btn-block.gold { background: linear-gradient(180deg, oklch(0.85 0.18 80), oklch(0.65 0.2 60)); color: oklch(0.15 0.02 260); }
.btn-block:disabled { opacity: .5; cursor: not-allowed; }
.btn-block.neon[data-rubox-whatsapp] { padding: .5rem 1rem; font-size: .75rem; }

/* Brick card */
.brick-card {
  background: var(--gradient-card); border: 2px solid oklch(0.35 0.04 260);
  border-radius: 1rem; position: relative; box-shadow: var(--shadow-block);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  padding: 1.25rem;
}
.brick-card::before { content:''; position:absolute; inset: 8px 8px auto 8px; height: 6px; border-radius: 4px; background: linear-gradient(90deg, oklch(1 0 0 / 0.12), transparent); pointer-events:none; }
.brick-card:hover { transform: translateY(-6px) rotate(-.5deg); border-color: oklch(0.78 0.22 145 / 0.7); }

/* Pills */
.rubox-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem 1rem; border-radius: 999px; font-family: var(--font-block); font-size: .7rem; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 1rem; }
.rubox-pill--neon { background: oklch(0.85 0.23 145 / 0.15); border: 1px solid oklch(0.85 0.23 145 / 0.4); color: var(--neon); }
.rubox-pill--red { background: oklch(0.62 0.22 25 / 0.15); border: 1px solid oklch(0.62 0.22 25 / 0.4); color: var(--roblox-red); }
.rubox-pill .dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--neon); }

/* Hero */
.rubox-hero { position: relative; overflow: hidden; }
.rubox-hero__inner { display: grid; gap: 2.5rem; padding: 4rem 1rem; }
@media (min-width: 768px) { .rubox-hero__inner { grid-template-columns: 1fr 1fr; padding: 7rem 1rem; } }
.rubox-display { font-family: var(--font-display); font-size: clamp(3rem, 7vw, 5rem); line-height: .95; }
.rubox-hero__lead { color: var(--muted-foreground); font-size: 1.125rem; margin-top: 1.5rem; max-width: 28rem; }
.rubox-hero__ctas { display: flex; gap: .75rem; margin-top: 1.75rem; flex-wrap: wrap; }
.rubox-stats { display: flex; gap: 1.5rem; margin-top: 2rem; font-size: .75rem; }
.rubox-stats .n { font-family: var(--font-display); font-size: 1.5rem; color: var(--neon); }
.rubox-stats .l { color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .12em; }
.rubox-hero__bricks { position: absolute; inset: 0; pointer-events: none; }
.rubox-hero__bricks .brick { position: absolute; border-radius: .5rem; }
.brick-red  { background: oklch(0.62 0.22 25 / 0.3); }
.brick-neon { background: oklch(0.85 0.23 145 / 0.3); }
.brick-gold { background: oklch(0.72 0.2 60 / 0.4); }
.rubox-hero__visual { display: none; position: relative; height: 400px; }
@media (min-width: 768px) { .rubox-hero__visual { display: block; } }
.float-card { position: absolute; border-radius: 1rem; box-shadow: 0 25px 50px -12px oklch(0 0 0 / 0.5); display: grid; place-items: center; font-family: var(--font-display); -webkit-text-stroke: 2px oklch(0.16 0.02 260); animation: float-slow 6s ease-in-out infinite; }
.float-red    { top: 10%; left: 15%; width: 8rem; height: 8rem; background: linear-gradient(135deg, var(--roblox-red), oklch(0.6 0.22 350)); color: white; font-size: 3rem; }
.float-neon   { top: 35%; left: 45%; width: 10rem; height: 10rem; background: linear-gradient(135deg, var(--neon), oklch(0.7 0.2 150)); font-size: 2rem; animation-delay: 1.5s; }
.float-gold   { top: 60%; left: 10%; width: 9rem; height: 9rem; background: linear-gradient(135deg, var(--accent), oklch(0.6 0.22 40)); font-size: 1.5rem; animation-delay: 2.8s; }
.float-purple { top: 5%; left: 60%; width: 6rem; height: 6rem; background: linear-gradient(135deg, oklch(0.55 0.25 320), oklch(0.6 0.2 260)); color: white; font-size: 1.5rem; animation-delay: 3.5s; }

/* Sections / package grid */
.rubox-section { padding: 4rem 0; }
.rubox-section__head { text-align: center; margin-bottom: 2.5rem; }
.rubox-section__head h2 { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.5rem); }
.rubox-tabs { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-bottom: 1.5rem; }
.rubox-tabs .btn-block { padding: .6rem 1.25rem; font-size: .85rem; }
.rubox-tabs .btn-block:not(.active) { opacity: .7; }
.rubox-tabs .btn-block.active { transform: scale(1.05); }
.rubox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .rubox-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .rubox-grid { grid-template-columns: repeat(4, 1fr); } }
.pkg-card { display: flex; flex-direction: column; }
.pkg-badge { position: absolute; top: -.75rem; right: -.75rem; background: var(--accent); color: oklch(0.15 0.02 260); font-family: var(--font-block); font-size: .65rem; padding: .25rem .75rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .15em; transform: rotate(6deg); }
.pkg-popular { position: absolute; top: -.75rem; left: .75rem; background: var(--roblox-red); color: white; font-family: var(--font-block); font-size: .65rem; padding: .25rem .75rem; border-radius: 999px; text-transform: uppercase; }
.pkg-icon { width: 3rem; height: 3rem; border-radius: .5rem; background: linear-gradient(135deg, oklch(0.62 0.22 25 / 0.3), oklch(0.85 0.23 145 / 0.2)); display: grid; place-items: center; font-size: 1.5rem; }
.pkg-name { font-family: var(--font-block); font-size: .9rem; line-height: 1.2; }
.pkg-price { font-family: var(--font-display); font-size: 1.75rem; color: var(--neon); margin-top: 1rem; }
.pkg-sub { font-size: .75rem; color: var(--muted-foreground); }

/* Steps */
.rubox-steps { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .rubox-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .rubox-steps { grid-template-columns: repeat(4, 1fr); } }
.step { text-align: center; padding: 1.5rem; }
.step-icon { margin: 0 auto 1rem; width: 4rem; height: 4rem; border-radius: 1rem; display: grid; place-items: center; font-size: 2rem; box-shadow: 0 10px 25px -5px oklch(0 0 0 / 0.4); }
.grad-red    { background: linear-gradient(135deg, var(--roblox-red), oklch(0.6 0.22 350)); }
.grad-gold   { background: linear-gradient(135deg, var(--accent), oklch(0.6 0.22 40)); }
.grad-purple { background: linear-gradient(135deg, oklch(0.55 0.25 320), oklch(0.6 0.2 260)); }
.grad-neon   { background: linear-gradient(135deg, var(--neon), oklch(0.7 0.2 150)); }
.step-num { position: absolute; top: .5rem; right: .75rem; font-family: var(--font-display); font-size: 3rem; color: oklch(0.72 0.02 260 / 0.3); }

/* FAQ */
.rubox-faq__list { display: flex; flex-direction: column; gap: .75rem; }
.rubox-faq summary { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-block); cursor: pointer; list-style: none; }
.rubox-faq summary span { color: var(--neon); font-size: 1.5rem; transition: transform .2s; }
.rubox-faq details[open] summary span { transform: rotate(45deg); }
.rubox-faq p { color: var(--muted-foreground); font-size: .9rem; margin: .75rem 0 0; }

/* Disclaimer */
.disclaimer-card { border-color: oklch(0.62 0.22 25 / 0.4); padding: 2rem; }
.disclaimer-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.disclaimer-icon { width: 3rem; height: 3rem; border-radius: .75rem; background: linear-gradient(135deg, var(--roblox-red), oklch(0.6 0.22 350)); display: grid; place-items: center; font-size: 1.5rem; }
.disclaimer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; color: var(--muted-foreground); font-size: .9rem; }
.disclaimer-list li { display: flex; gap: .5rem; }
.bullet { font-weight: bold; }
.bullet-neon { color: var(--neon); }
.bullet-red  { color: var(--roblox-red); }
.bullet-gold { color: var(--accent); }
.disclaimer-list strong { color: var(--foreground); }
.disclaimer-footer { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); text-align: center; font-size: .75rem; color: var(--muted-foreground); }

/* Checkout */
.rubox-back { font-size: .85rem; color: var(--muted-foreground); }
.rubox-back:hover { color: var(--neon); }
.rubox-checkout { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 1024px) { .rubox-checkout { grid-template-columns: 1fr 380px; } }
.rubox-checkout__main { display: flex; flex-direction: column; gap: 1.5rem; }
.step-badge { display: flex; align-items: center; gap: .75rem; }
.step-badge__num { width: 2.25rem; height: 2.25rem; border-radius: .5rem; background: linear-gradient(135deg, var(--roblox-red), oklch(0.6 0.22 350)); color: white; font-family: var(--font-display); display: grid; place-items: center; font-size: 1.1rem; -webkit-text-stroke: 2px oklch(0.16 0.02 260); }
.step-badge__title { font-family: var(--font-block); font-size: 1.05rem; text-transform: uppercase; }
.field { display: block; margin-top: .75rem; }
.field > span { display: block; font-family: var(--font-block); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-foreground); margin-bottom: .35rem; }
.field input { width: 100%; padding: .65rem 1rem; border-radius: .5rem; background: var(--input); border: 2px solid var(--border); color: var(--foreground); font-family: var(--font-body); font-size: 1rem; outline: none; }
.field input:focus { border-color: var(--neon); box-shadow: 0 0 0 3px oklch(0.85 0.23 145 / 0.3); }

.toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem; }
@media (min-width: 640px) { .toggle-grid { grid-template-columns: repeat(4, 1fr); } }
.toggle-btn { padding: .55rem .75rem; font-size: .75rem; }
.toggle-btn:not(.active) { opacity: .7; }
.warn-box { padding: .75rem; border-radius: .5rem; background: oklch(0.62 0.22 25 / 0.1); border: 1px solid oklch(0.62 0.22 25 / 0.4); font-size: .75rem; margin-top: 1rem; }
.info-box { padding: .75rem; border-radius: .5rem; background: oklch(0.85 0.23 145 / 0.1); border: 1px solid oklch(0.85 0.23 145 / 0.4); font-size: .75rem; margin-top: 1rem; }

.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1rem; }
.pay-btn { padding: 1rem; border-radius: .75rem; border: 2px solid transparent; color: white; font-family: var(--font-block); text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 10px oklch(0 0 0 / 0.3); }
.pay-btn.pay-bkash  { background: linear-gradient(135deg, oklch(0.55 0.2 0), oklch(0.5 0.22 0)); }
.pay-btn.pay-nagad  { background: linear-gradient(135deg, oklch(0.65 0.2 50), oklch(0.55 0.24 30)); }
.pay-btn.pay-rocket { background: linear-gradient(135deg, oklch(0.45 0.2 300), oklch(0.35 0.2 290)); }
.pay-btn.active { border-color: var(--neon); transform: scale(1.05); box-shadow: 0 0 0 3px oklch(0.85 0.23 145 / 0.5); }
.pay-info { margin-top: 1.25rem; padding: 1rem; border-radius: .5rem; background: oklch(0.16 0.02 260 / 0.5); border: 1px solid var(--border); }
.pay-info__num { font-family: var(--font-display); font-size: 1.5rem; color: var(--neon); margin-top: .25rem; }

.rubox-checkout__summary .sticky { position: sticky; top: 6rem; }
.summary-pkg { display: flex; align-items: center; gap: .75rem; padding: 1rem 0; border-bottom: 1px solid var(--border); margin-bottom: 1rem; font-family: var(--font-block); }
.row { display: flex; justify-content: space-between; font-size: .9rem; color: var(--muted-foreground); margin-top: .25rem; }
.row.total { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); font-family: var(--font-block); color: var(--foreground); }
.row.total span:last-child { font-family: var(--font-display); font-size: 1.5rem; }
.age-confirm { display: flex; gap: .5rem; align-items: flex-start; padding: .75rem; margin-top: 1.25rem; border-radius: .5rem; background: oklch(0.62 0.22 25 / 0.1); border: 2px solid oklch(0.62 0.22 25 / 0.4); cursor: pointer; font-size: .75rem; }
.age-confirm input { margin-top: .15rem; accent-color: var(--roblox-red); }

/* Thank-you */
.thank-icon { margin: 0 auto 1.25rem; width: 5rem; height: 5rem; border-radius: 1rem; background: linear-gradient(135deg, var(--neon), oklch(0.7 0.2 150)); display: grid; place-items: center; font-size: 2rem; }
.thank-orderid { margin-top: 1.5rem; padding: 1rem; border-radius: .5rem; background: oklch(0.16 0.02 260 / 0.5); border: 1px solid oklch(0.85 0.23 145 / 0.3); }
.thank-rows { margin-top: 1.25rem; padding: 1.25rem; text-align: left; background: oklch(0.16 0.02 260 / 0.5); border-radius: .5rem; border: 1px solid var(--border); display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; }
.thank-rows .row { color: inherit; }
.thank-cta { margin-top: 1.75rem; padding: 1.25rem; border-radius: 1rem; background: linear-gradient(135deg, oklch(0.85 0.23 145 / 0.15), oklch(0.7 0.2 150 / 0.1)); border: 2px solid oklch(0.85 0.23 145 / 0.4); }

/* Footer */
.rubox-footer { border-top: 2px solid var(--border); margin-top: 4rem; }
.rubox-footer__grid { max-width: 1280px; margin: 0 auto; display: grid; gap: 2rem; padding: 2.5rem 1rem; }
@media (min-width: 768px) { .rubox-footer__grid { grid-template-columns: repeat(3, 1fr); } }
.rubox-footer__brand { font-family: var(--font-display); font-size: 1.5rem; color: var(--neon); }
.rubox-footer__heading { font-family: var(--font-block); font-size: .8rem; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.rubox-footer ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; color: var(--muted-foreground); }
.rubox-footer ul li a:hover { color: var(--neon); }
.rubox-footer p { color: var(--muted-foreground); font-size: .9rem; margin: .25rem 0; }
.rubox-footer__copy { border-top: 1px solid var(--border); padding: 1rem; text-align: center; font-size: .75rem; color: var(--muted-foreground); }

/* Animations */
@keyframes float-slow { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-15px) rotate(3deg); } }
.animate-float { animation: float-slow 6s ease-in-out infinite; }
@keyframes pulse-neon { 0%,100% { box-shadow: 0 0 20px oklch(0.85 0.23 145 / 0.5); } 50% { box-shadow: 0 0 40px oklch(0.85 0.23 145 / 0.9); } }
.pulse-neon { animation: pulse-neon 2.5s ease-in-out infinite; }

/* Logo image (when uploaded via Rubox CMS) */
.rubox-logo__img { height: 2.5rem; width: auto; display: block; border-radius: .35rem; }

/* Hero video section */
.rubox-video { padding-top: 1rem; }
.rubox-video__frame { position: relative; padding: 0; overflow: hidden; border-radius: 1rem; }
.rubox-video__frame iframe,
.rubox-video__frame video { width: 100%; aspect-ratio: 16/9; display: block; background: #000; border: 0; }