/* =========================================================
   RaidLine — OpenCart 4.1.0.3 theme layer
   Namespaced with rl- to avoid clashing with Bootstrap 5
   (which the default OpenCart theme uses sitewide for
   .btn, .card, .nav, .container, etc.)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Inter:wght@400;500;600;700&family=Cinzel:wght@400;600;700&display=swap');

:root {
  --rl-page: #FBFAF8;
  --rl-page-alt: #F2EFEC;
  --rl-surface: #FFFFFF;

  --rl-text: #161214;
  --rl-text-dim: rgba(22,18,20,0.64);
  --rl-text-faint: rgba(22,18,20,0.4);
  --rl-border: rgba(22,18,20,0.14);
  --rl-border-soft: rgba(22,18,20,0.08);
  --rl-border-strong: rgba(22,18,20,0.32);
  --rl-dot: rgba(22,18,20,0.06);
  --rl-nav-bg: rgba(251,250,248,0.92);

  --rl-stage-1: #161214;
  --rl-stage-2: #0B0908;
  --rl-stage-text: #F7F4F1;
  --rl-stage-text-dim: rgba(247,244,241,0.62);
  --rl-stage-border: rgba(255,255,255,0.12);

  --rl-crimson-300: #FF5C55;
  --rl-crimson-500: #F01B22;
  --rl-crimson-700: #A8121A;

  --rl-gold-300: #E0BC5C;
  --rl-gold-500: #C9A227;
  --rl-gold-700: #8A6A17;
  --rl-gold-ink: #241A06;

  --rl-green: #1D8A4C;
  --rl-purple: #7B4FE0;

  --rl-r1: #F1C6CC;
  --rl-r2: #DD8194;
  --rl-r3: var(--rl-crimson-500);
  --rl-r4: var(--rl-crimson-700);
  --rl-r5: #161214;
  --rl-ring: rgba(22,18,20,0.22);
}

[data-rl-theme="dark"] {
  --rl-page: #121011;
  --rl-page-alt: #1A1617;
  --rl-surface: #1D1819;

  --rl-text: #F5F1EE;
  --rl-text-dim: rgba(245,241,238,0.66);
  --rl-text-faint: rgba(245,241,238,0.4);
  --rl-border: rgba(255,255,255,0.14);
  --rl-border-soft: rgba(255,255,255,0.08);
  --rl-border-strong: rgba(255,255,255,0.32);
  --rl-dot: rgba(255,255,255,0.07);
  --rl-nav-bg: rgba(18,16,17,0.9);

  --rl-stage-1: #0A0808;
  --rl-stage-2: #000000;
  --rl-stage-border: rgba(255,255,255,0.14);

  --rl-ring: rgba(255,255,255,0.24);
}

/* ---------- sitewide reskin of the existing OpenCart/Bootstrap chrome ---------- */
/* These target OpenCart's own markup (#top, header, footer, #menu, buttons) —
   nothing here is renamed, so nothing else on the site (checkout, admin-added
   HTML modules, other extensions) is at risk of breaking. */

body {
  background: var(--rl-page);
  color: var(--rl-text);
  font-family: 'Inter', -apple-system, sans-serif !important;
  transition: background-color 0.25s ease, color 0.25s ease;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Rajdhani', sans-serif !important; font-weight: 700; color: var(--rl-text); line-height: 1.1; }
h1, h2, h3 { text-transform: uppercase; letter-spacing: 0.02em; }

#top { background: var(--rl-page-alt); border-bottom: 1px solid var(--rl-border); transition: background-color .25s ease, border-color .25s ease; }
#top a { color: var(--rl-text-dim); }
#top a:hover { color: var(--rl-text); }

header { background: var(--rl-page); border-bottom: 1px solid var(--rl-border); transition: background-color .25s ease, border-color .25s ease; }

/* search + cart — sharper cut corners matching the block sections */
header .input-group .form-control { border: 1px solid var(--rl-border-strong); border-right: none; background: var(--rl-surface); color: var(--rl-text); clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
header .input-group .btn-light { border: 1px solid var(--rl-border-strong); background: var(--rl-text); color: var(--rl-page); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); }
header .input-group .btn-light:hover { background: var(--rl-crimson-500); color: #fff; border-color: var(--rl-crimson-500); }
#cart .btn-dark { background: var(--rl-text); color: var(--rl-page); border: none; font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.02em; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
#cart .btn-dark:hover { background: var(--rl-crimson-700); }

footer { background: var(--rl-stage-2); color: var(--rl-stage-text-dim); }
footer h5 { color: var(--rl-stage-text); }
footer a { color: var(--rl-stage-text-dim); }
footer a:hover { color: var(--rl-stage-text); }
footer hr { border-color: var(--rl-stage-border); }

#menu, .dropdown-menu { background: var(--rl-surface); border-color: var(--rl-border); }
#menu .nav-link, .dropdown-item { color: var(--rl-text); }
#menu .dropdown:hover .dropdown-menu, .dropdown-item:hover { background: var(--rl-page-alt); }

.btn-primary {
  background: linear-gradient(160deg, var(--rl-crimson-300), var(--rl-crimson-700));
  border-color: transparent;
  color: #fff;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.btn-primary:hover { background: linear-gradient(160deg, var(--rl-crimson-500), var(--rl-crimson-700)); color: #fff; }
.btn-light { background: var(--rl-surface); border-color: var(--rl-border); color: var(--rl-text); }

.card { background: var(--rl-surface); border-color: var(--rl-border); color: var(--rl-text); }
.breadcrumb, .pagination .page-link { background: transparent; color: var(--rl-text-dim); }
.form-select, .form-control { background: var(--rl-surface); border-color: var(--rl-border); color: var(--rl-text); }

/* ---------- theme toggle (inserted into #top) ---------- */

.rl-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--rl-border-strong);
  background: var(--rl-surface);
  color: var(--rl-text);
  cursor: pointer;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.rl-theme-toggle svg { width: 15px; height: 15px; }
.rl-theme-toggle .rl-icon-sun { display: none; }
[data-rl-theme="dark"] .rl-theme-toggle .rl-icon-moon { display: none; }
[data-rl-theme="dark"] .rl-theme-toggle .rl-icon-sun { display: block; }

/* =========================================================
   New sections (hero / services / VIP / stats / CTA)
   All under the rl- namespace, safe to add alongside Bootstrap
   ========================================================= */

.rl-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; overflow: hidden;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  text-decoration: none;
}
.rl-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 32%); pointer-events: none; }
.rl-btn--crimson { background: linear-gradient(160deg, var(--rl-crimson-300), var(--rl-crimson-700)); color: #fff; filter: drop-shadow(0 12px 22px rgba(196,30,58,0.3)); }
.rl-btn--crimson:hover { transform: translateY(-1px); color: #fff; }
.rl-btn--gold { background: linear-gradient(160deg, var(--rl-gold-300), var(--rl-gold-700)); color: var(--rl-gold-ink); }
.rl-btn--ghost { background: transparent; border-color: var(--rl-border-strong); color: var(--rl-text); }
.rl-btn--ghost::after { display: none; }
.rl-btn--ghost:hover { border-color: var(--rl-text); color: var(--rl-text); }

.rl-hero { position: relative; padding: 92px 24px 100px; overflow: hidden; background-image: radial-gradient(var(--rl-dot) 1px, transparent 1px); background-size: 22px 22px; }
.rl-hero__slash { position: absolute; top: -15%; right: -12%; width: 62%; height: 150%; background: linear-gradient(100deg, transparent 42%, rgba(196,30,58,0.10) 55%, rgba(196,30,58,0.22) 60%, transparent 74%); transform: rotate(-9deg); pointer-events: none; }
.rl-hero__grid { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 60px; align-items: center; }
@media (min-width: 900px) { .rl-hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.rl-pulse-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 11px; border: 1px solid var(--rl-border); background: var(--rl-surface); border-radius: 999px; font-size: 12.5px; color: var(--rl-text-dim); margin-bottom: 24px; }
.rl-pulse-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--rl-crimson-500); }
.rl-pulse-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--rl-crimson-500); opacity: 0.6; animation: rlPulseRing 1.8s ease-out infinite; }
@keyframes rlPulseRing { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } }
.rl-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); max-width: 15ch; font-weight: 800; margin: 0; }
.rl-hero__sub { margin-top: 22px; max-width: 46ch; font-size: 17px; color: var(--rl-text-dim); }
.rl-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.rl-hero__trust { margin-top: 26px; font-size: 13.5px; color: var(--rl-text-faint); max-width: 44ch; }

.rl-portal-frame { position: relative; display: flex; justify-content: center; }
.rl-portal-frame__glow { position: absolute; inset: -40px; background: radial-gradient(circle, rgba(196,30,58,0.16), transparent 68%); filter: blur(6px); animation: rlPulse 7s ease-in-out infinite; pointer-events: none; }
@keyframes rlPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.rl-portal-shell { position: relative; max-width: 372px; width: 100%; }
.rl-floating-chip { position: absolute; top: -20px; left: -18px; z-index: 6; background: var(--rl-surface); border: 1px solid var(--rl-border); padding: 10px 14px; border-radius: 10px; box-shadow: 0 16px 30px rgba(23,20,18,0.18); transform: rotate(-6deg); display: flex; flex-direction: column; gap: 2px; }
.rl-floating-chip__stars { color: var(--rl-crimson-500); font-size: 12px; letter-spacing: 1px; }
.rl-floating-chip__text { font-size: 11.5px; color: var(--rl-text-dim); white-space: nowrap; }
.rl-hud-corner { position: absolute; width: 18px; height: 18px; border-color: var(--rl-crimson-500); border-style: solid; pointer-events: none; }
.rl-hud-corner--tl { top: -9px; left: -9px; border-width: 2px 0 0 2px; }
.rl-hud-corner--tr { top: -9px; right: -9px; border-width: 2px 2px 0 0; }
.rl-hud-corner--bl { bottom: -9px; left: -9px; border-width: 0 0 2px 2px; }
.rl-hud-corner--br { bottom: -9px; right: -9px; border-width: 0 2px 2px 0; }
.rl-portal-shell.rl-is-vip .rl-hud-corner { border-color: var(--rl-gold-500); }
.rl-portal { --rl-accent: var(--rl-crimson-500); --rl-accent-soft: rgba(196,30,58,0.22); --rl-accent-text: #E8899B; position: relative; background: linear-gradient(165deg, var(--rl-stage-1), var(--rl-stage-2)); padding: 24px 26px 22px; width: 100%; filter: drop-shadow(0 26px 46px rgba(23,10,10,0.4)); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); transform: perspective(900px) rotateX(2deg) rotateY(-4deg); transition: transform 0.2s ease; }
.rl-portal.rl-is-vip { --rl-accent: var(--rl-gold-500); --rl-accent-soft: rgba(201,162,39,0.25); --rl-accent-text: var(--rl-gold-300); }
.rl-portal::before { content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 2px; background: linear-gradient(90deg, transparent, var(--rl-accent), transparent); }
.rl-portal-toggle { display: inline-flex; background: rgba(255,255,255,0.07); padding: 4px; border-radius: 8px; gap: 4px; margin-bottom: 18px; }
.rl-portal-toggle__opt { border: none; background: transparent; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 6px; color: rgba(245,240,232,0.6); }
.rl-portal-toggle__opt.rl-is-active { background: var(--rl-accent); color: #fff; }
.rl-portal.rl-is-vip .rl-portal-toggle__opt.rl-is-active { color: var(--rl-gold-ink); }
.rl-portal__tier { font-size: 12px; font-weight: 600; color: var(--rl-accent-text); }
.rl-portal h3 { font-size: 21px; margin: 6px 0 0; color: var(--rl-stage-text); }
.rl-portal__stats { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 9px; }
.rl-portal__stats li { font-size: 13.5px; color: rgba(245,240,232,0.7); padding-left: 16px; position: relative; }
.rl-portal__stats li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--rl-accent); }
.rl-portal__ready { margin-top: 16px; display: flex; align-items: center; gap: 5px; }
.rl-ready-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rl-accent); box-shadow: 0 0 0 2px var(--rl-accent-soft); }
.rl-portal__ready-label { margin-left: 6px; font-size: 12px; color: rgba(245,240,232,0.55); }
.rl-portal__meta { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rl-stage-border); display: flex; align-items: center; justify-content: space-between; }
.rl-portal__time { font-size: 13px; color: rgba(245,240,232,0.5); }
.rl-portal__price { font-family: 'Cinzel', serif; font-size: 22px; color: var(--rl-accent-text); }

.rl-services { padding: 92px 24px; background: var(--rl-surface); border-top: 1px solid var(--rl-border-soft); border-bottom: 1px solid var(--rl-border-soft); }
.rl-services__head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.rl-cards { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px 18px; }
.rl-card { position: relative; background: var(--rl-surface); border: 1px solid var(--rl-border); border-radius: 10px; padding: 28px 22px 24px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.rl-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(23,20,18,0.16); }
.rl-card::before, .rl-card::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--rl-crimson-500); border-style: solid; opacity: 0; transition: opacity 0.15s ease; }
.rl-card::before { top: -6px; left: -6px; border-width: 2px 0 0 2px; }
.rl-card::after { bottom: -6px; right: -6px; border-width: 0 2px 2px 0; }
.rl-card:hover::before, .rl-card:hover::after { opacity: 1; }
.rl-card__ribbon { position: absolute; top: 0; right: 0; width: 52px; height: 52px; clip-path: polygon(100% 0, 100% 100%, 0 0); background: var(--rl-tier, var(--rl-r3)); box-shadow: inset -2px 2px 6px rgba(255,255,255,0.25), inset 2px -2px 6px rgba(0,0,0,0.18); filter: drop-shadow(0 0 1px var(--rl-ring)); }
.rl-card__icon { width: 30px; height: 30px; color: var(--rl-text); margin-bottom: 16px; }
.rl-card__tier { display: block; font-size: 12px; font-weight: 600; color: var(--rl-text-dim); }
.rl-card h3 { font-size: 18px; margin-top: 10px; font-family: 'Inter', sans-serif; font-weight: 700; }
.rl-card p { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--rl-text-dim); }

.rl-vip { padding: 100px 24px; background: var(--rl-page-alt); }
.rl-vip__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
@media (min-width: 900px) { .rl-vip__inner { grid-template-columns: 1fr 0.85fr; } }
.rl-vip__perks { list-style: none; padding: 0; margin: 26px 0 30px; display: flex; flex-direction: column; gap: 12px; }
.rl-vip__perks li { font-size: 14px; color: var(--rl-text); padding-left: 22px; position: relative; }
.rl-vip__perks li::before { content: ''; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; background: var(--rl-gold-500); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.rl-vip-card { position: relative; max-width: 380px; padding: 30px 28px 26px; color: #F5F0E8; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 7px), linear-gradient(160deg, #241C10, #0E0B06); clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); filter: drop-shadow(0 26px 50px rgba(23,16,4,0.35)); }
.rl-vip-card::before { content: ''; position: absolute; top: 0; left: 30px; right: 30px; height: 2px; background: linear-gradient(90deg, transparent, var(--rl-gold-500), transparent); }
.rl-vip-card__top { display: flex; align-items: center; justify-content: space-between; }
.rl-vip-card__brand { display: flex; align-items: center; gap: 7px; font-family: 'Cinzel', serif; font-size: 15px; color: var(--rl-gold-300); }
.rl-vip-card__chip { width: 30px; height: 22px; border-radius: 4px; background: linear-gradient(160deg, var(--rl-gold-300), var(--rl-gold-700)); }
.rl-vip-card__tier { margin-top: 26px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 19px; }
.rl-vip-card__number { margin-top: 16px; font-size: 14px; letter-spacing: 0.14em; color: rgba(245,240,232,0.55); }
.rl-vip-card__foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; font-size: 11.5px; color: rgba(245,240,232,0.5); }

.rl-stats { padding: 68px 24px; }
.rl-stats__row { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.rl-stat__num { font-family: 'Cinzel', serif; font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--rl-crimson-500); font-weight: 700; }
.rl-stat__label { margin-top: 6px; font-size: 13.5px; color: var(--rl-text-dim); max-width: 26ch; }

.rl-cta { position: relative; padding: 150px 24px 110px; text-align: center; color: var(--rl-stage-text); background: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 7px), linear-gradient(180deg, var(--rl-stage-1), var(--rl-stage-2)); clip-path: polygon(0 56px, 100% 0, 100% 100%, 0 100%); }
.rl-cta h2 { color: var(--rl-stage-text); font-size: clamp(1.7rem, 3.4vw, 2.4rem); max-width: 20ch; margin: 0 auto; }
.rl-cta p { margin: 18px auto 0; max-width: 44ch; font-size: 15.5px; color: var(--rl-stage-text-dim); }
.rl-cta .rl-btn { margin-top: 30px; }

/* ---------- product-thumb (product/thumb.twig) ---------- */

.rl-product-card { position: relative; background: var(--rl-surface); border: 1px solid var(--rl-border); border-radius: 10px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.rl-product-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(23,20,18,0.16); }
.rl-product-card::before, .rl-product-card::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--rl-crimson-500); border-style: solid; opacity: 0; transition: opacity 0.15s ease; z-index: 2; }
.rl-product-card::before { top: 6px; left: 6px; border-width: 2px 0 0 2px; }
.rl-product-card::after { bottom: 6px; right: 6px; border-width: 0 2px 2px 0; }
.rl-product-card:hover::before, .rl-product-card:hover::after { opacity: 1; }
.rl-product-card__art { position: relative; height: 220px; background: var(--rl-page-alt); }
.rl-product-card__art img { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); object-fit: contain; }
.rl-product-card__body { padding: 16px 18px 18px; border-top: 1px solid var(--rl-border-soft); flex: 1; display: flex; flex-direction: column; }
.rl-product-card__title { font-family: 'Cinzel', serif; font-size: 14.5px; line-height: 1.35; }
.rl-product-card__title a { color: var(--rl-text); text-decoration: none; }
.rl-product-card__desc { margin-top: 6px; font-size: 12.5px; color: var(--rl-text-dim); line-height: 1.5; flex: 1; }
.rl-product-card__price { margin-top: 12px; font-family: 'Cinzel', serif; color: var(--rl-crimson-500); font-size: 16px; }
.rl-product-card__price-old { margin-left: 6px; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--rl-text-faint); text-decoration: line-through; }
.rl-product-card__rating { margin-top: 6px; color: var(--rl-gold-500); font-size: 11px; }
.rl-product-card__actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rl-border-soft); display: flex; gap: 8px; }
.rl-product-card__actions button { flex: 1; border: 1px solid var(--rl-border); background: var(--rl-surface); color: var(--rl-text-dim); padding: 8px 0; cursor: pointer; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.rl-product-card__actions button:first-child { background: linear-gradient(160deg, var(--rl-crimson-300), var(--rl-crimson-700)); color: #fff; border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .rl-portal-frame__glow, .rl-pulse-dot::after { animation: none; }
  .rl-portal, .rl-card, .rl-product-card, .rl-btn, body, header, #top, footer { transition: none; }
}

/* ---------- full-bleed utility ----------
   Modules render inside OpenCart's .container column, so a section that
   needs an edge-to-edge colored background (hero, alternating bands, the
   CTA band) has to break out of that constraint explicitly. */
body { overflow-x: hidden; }
.rl-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ---------- brand lockup (logo icon + wordmark + tagline) ---------- */
.rl-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.rl-brand__mark { width: 38px; height: 38px; flex-shrink: 0; object-fit: contain; }
.rl-brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.rl-brand__name { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rl-text); }
.rl-brand__tag { font-size: 11px; color: var(--rl-crimson-500); font-weight: 600; letter-spacing: 0.03em; }

/* ---------- header actions (cart + theme toggle, sit together) ---------- */
.rl-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.rl-header-actions #cart { flex: 1 1 auto; min-width: 0; max-width: 260px; }
.rl-header-actions .rl-theme-toggle { flex-shrink: 0; }

/* ---------- mega-menu / primary nav — force dark, override Bootstrap bg-primary ---------- */
#menu.bg-primary,
#menu {
  background: var(--rl-stage-1) !important;
  border-color: var(--rl-stage-border) !important;
}
#menu .navbar-nav > .nav-item > .nav-link {
  color: var(--rl-stage-text-dim);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
#menu .navbar-nav > .nav-item > .nav-link:hover,
#menu .navbar-nav > .nav-item > .nav-link:focus {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
#menu .navbar-toggler { border-color: var(--rl-stage-border); color: var(--rl-stage-text-dim); }
#menu #category { color: var(--rl-stage-text-dim); }

/* ---------- cart pill polish (clean up default bootstrap dropdown caret) ---------- */
#cart .dropdown-toggle::after { display: none; }
#cart .btn-dark { text-transform: uppercase; }

/* ---------- custom cursor (sword-tip arrow), site-wide ---------- */
html, body {
  cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMyAyIEwzIDE5LjUgTDcuNSAxNS43IEwxMC44IDIyLjYgTDE0IDIxLjEgTDEwLjggMTQuMiBMMTggMTQuMiBaIiBmaWxsPSIjMTYxMjE0IiBzdHJva2U9IiNGMDFCMjIiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+') 3 2, auto;
}
a, button, .btn, .rl-theme-toggle, .rl-brand, #cart .btn, .game-card, .game-card__chip, input, select, label,
#menu .nav-link, .footer-grid a, header .input-group .btn-light {
  cursor: pointer !important;
}
a:active, button:active, .btn:active, .rl-theme-toggle:active, #cart .btn:active, .game-card__chip:active {
  cursor: pointer;
}
@media (hover:none),(pointer:coarse) { html, body { cursor:auto; } a, button, .btn { cursor:pointer; } }
@media (prefers-reduced-motion:reduce) { body { cursor:auto; } }

/* ---------- click spark, site-wide ---------- */
.rl-click-spark {
  position: fixed; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background: var(--rl-crimson-500); box-shadow: 0 0 14px 2px rgba(240,27,34,0.55);
  transform: rotate(45deg) scale(1); opacity: 1;
  pointer-events: none; z-index: 10000;
  animation: rlSparkOut .5s cubic-bezier(.2,.7,.3,1) forwards;
}
.rl-click-spark::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--rl-crimson-300); opacity: .7;
  animation: rlSparkRing .5s ease-out forwards;
}
@keyframes rlSparkOut { to { transform: rotate(45deg) scale(2.8); opacity: 0; } }
@keyframes rlSparkRing { to { transform: scale(2.4); opacity: 0; } }

/* ---------- mega-menu: separate click-to-navigate from caret-to-open-dropdown ---------- */
#menu .nav-item.dropdown { display: flex; align-items: stretch; position: relative; }
#menu .nav-item.dropdown > .nav-link { padding-right: 6px; }
.rl-dropdown-caret {
  display: flex; align-items: center; padding: 14px 14px 14px 2px;
  color: var(--rl-stage-text-dim); cursor: pointer;
}
.rl-dropdown-caret:hover { color: #fff; }
.rl-dropdown-caret i { font-size: 11px; }


/* ---------- mega-menu dropdown: force correct position (Popper doesn't attach reliably to our split caret trigger) ---------- */
#menu .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 2px;
}
#menu .dropdown-item:hover, #menu .dropdown-item:focus,
.dropdown-item:hover, .dropdown-item:focus {
  color: var(--rl-text) !important;
  background: var(--rl-page-alt) !important;
}

/* ---------- game-card: keep title position consistent regardless of subcategory count ---------- */
.game-card__overlay { min-height: 132px; display: flex; flex-direction: column; justify-content: flex-start; }
.game-card__chips { max-height: 56px; overflow: hidden; }

/* ---------- game-card chips: clearer clickable affordance ---------- */
.game-card__chip {
  border: 1px solid rgba(255,255,255,0.18);
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease, color .15s ease;
}
.game-card__chip:hover {
  background: var(--rl-crimson-500);
  border-color: var(--rl-crimson-500);
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- header theme toggle: stand out more, stay centered with cart ---------- */
.rl-header-actions { align-items: stretch; }
.rl-header-actions .rl-theme-toggle {
  align-self: center;
  background: var(--rl-crimson-500);
  border-color: var(--rl-crimson-500);
  color: #fff;
}
.rl-header-actions .rl-theme-toggle:hover { background: var(--rl-crimson-700); border-color: var(--rl-crimson-700); }
.game-card__chips { min-height: 56px; }
/* ---------- re-point Bootstrap's own color variables at our design tokens ----------
   Bootstrap ships with its own blue --bs-primary/--bs-link-color that many components
   (breadcrumbs, badges, pagination, focus rings, dropdown actives) use directly and
   which our earlier per-component overrides never touched. Redirecting the variables
   themselves fixes all of those at once, site-wide, without hunting every selector. */
:root {
  --bs-primary: var(--rl-crimson-500);
  --bs-primary-rgb: 240, 27, 34;
  --bs-link-color: var(--rl-crimson-500);
  --bs-link-color-rgb: 240, 27, 34;
  --bs-link-hover-color: var(--rl-crimson-700);
  --bs-link-hover-color-rgb: 168, 18, 26;
  --bs-focus-ring-color: rgba(240, 27, 34, 0.25);
  --bs-dropdown-link-active-bg: var(--rl-crimson-500);
}

/* ---------- Bootstrap also ships its own light-mode body/text/border variables that
   never switch when OUR [data-rl-theme="dark"] attribute flips — any component we
   haven't explicitly restyled was silently staying dark-text-on-dark-bg. Re-point the
   variables themselves so everything inherits correctly, automatically. ---------- */
[data-rl-theme="dark"] {
  --bs-body-color: var(--rl-text);
  --bs-body-color-rgb: 245, 241, 238;
  --bs-body-bg: var(--rl-page);
  --bs-emphasis-color: var(--rl-text);
  --bs-secondary-color: var(--rl-text-dim);
  --bs-tertiary-color: var(--rl-text-faint);
  --bs-heading-color: var(--rl-text);
  --bs-border-color: var(--rl-border);
  --bs-border-color-translucent: var(--rl-border);
  --bs-secondary-bg: var(--rl-surface);
  --bs-tertiary-bg: var(--rl-page-alt);
  --bs-dropdown-color: var(--rl-text);
  --bs-dropdown-bg: var(--rl-surface);
  --bs-dropdown-link-color: var(--rl-text);
  --bs-dropdown-link-hover-color: var(--rl-text);
  --bs-dropdown-link-hover-bg: var(--rl-page-alt);
}

/* ---------- catch remaining Bootstrap components at the element level too, for the
   rare cases that hardcode a color instead of reading the variable ---------- */
[data-rl-theme="dark"] .breadcrumb-item.active,
[data-rl-theme="dark"] .breadcrumb-item a,
[data-rl-theme="dark"] .card,
[data-rl-theme="dark"] .card-body,
[data-rl-theme="dark"] .list-group-item,
[data-rl-theme="dark"] .form-control,
[data-rl-theme="dark"] .form-select,
[data-rl-theme="dark"] .modal-content,
[data-rl-theme="dark"] .nav-tabs .nav-link,
[data-rl-theme="dark"] .table {
  color: var(--rl-text);
  background-color: transparent;
}
[data-rl-theme="dark"] .form-control,
[data-rl-theme="dark"] .form-select {
  background-color: var(--rl-surface);
  border-color: var(--rl-border-strong);
}
[data-rl-theme="dark"] .form-control::placeholder { color: var(--rl-text-faint); }
[data-rl-theme="dark"] .card { background-color: var(--rl-surface); border-color: var(--rl-border); }
[data-rl-theme="dark"] .breadcrumb { background: transparent; }

/* ---------- rich/legacy SEO content (category descriptions, product description tab):
   these blocks carry hundreds of hand-written inline styles assuming a plain white
   page behind them. We can't safely override every hardcoded inline color, so in dark
   mode we instead give the block its own guaranteed-light "paper" card, exactly like
   wrapping a printed page — whatever inline colors it uses stay readable regardless. ---------- */
[data-rl-theme="dark"] .rl-rich-content,
[data-rl-theme="dark"] #tab-description {
  background: #fdfaf6;
  color: #1a1a1a;
  border-radius: 8px;
  padding: 20px 22px;
  border: 1px solid var(--rl-border);
}
[data-rl-theme="dark"] .rl-rich-content a,
[data-rl-theme="dark"] #tab-description a {
  color: var(--rl-crimson-700);
}

/* ---------- game-card restructure: title pinned to top, subcategories pinned to
   bottom and stack upward as they grow — independent of each other, so title
   position is always identical across every card regardless of subcategory count ---------- */
.game-card { display: block; }
.game-card__scrim-top { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,9,8,0.85) 0%, transparent 48%); pointer-events: none; z-index: 1; }
.game-card__title-block { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 18px 20px 16px; color: var(--rl-stage-text); }
.game-card__title-block h3 { margin: 0; font-size: 19px; color: var(--rl-stage-text); }
.game-card__chips-wrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 20px 18px; }
.game-card__chips { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: 34px; max-height: 108px; overflow: hidden; }

/* ---------- mega-menu dropdown items: clear, on-brand hover feedback ---------- */
.dropdown-item {
  transition: background-color .12s ease, color .12s ease, padding-left .12s ease;
}
#menu .dropdown-item:hover, #menu .dropdown-item:focus,
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--rl-crimson-500) !important;
  color: #fff !important;
  padding-left: 20px;
}

/* ---------- utility bar (#top): match brand typography, clearer hover ---------- */
#top { font-family: 'Rajdhani', sans-serif; }
#top .list-inline-item,
#top .dropdown-toggle,
#top span[role="button"] {
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
#top a, #top .dropdown-toggle, #top span[role="button"] {
  transition: color .15s ease;
}
#top a:hover:not(.dropdown-item), #top .dropdown-toggle:hover, #top span[role="button"]:hover:not(.dropdown-item) {
  color: var(--rl-crimson-500) !important;
}
#top .dropdown-item:hover, #top .dropdown-item:focus {
  color: #fff !important;
  background: var(--rl-crimson-500) !important;
}
#top .list-inline-item + .list-inline-item {
  border-left: 1px solid var(--rl-border);
  padding-left: 14px;
  margin-left: 6px !important;
}
#top .dropdown-toggle::after { border-top-color: currentColor; opacity: .6; }
#top .dropdown-item { text-transform: none; letter-spacing: normal; font-weight: 500; }

/* ---------- hero video banner (between mega-menu and trust bar) ---------- */
.rl-hero-banner { position: relative; width: 100%; overflow: hidden; background: #000; line-height: 0; }
.rl-hero-banner__video { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: cover; }
.rl-hero-banner__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(11,9,8,0.88) 0%, rgba(11,9,8,0.55) 32%, rgba(11,9,8,0.12) 58%, transparent 72%),
              linear-gradient(to top, rgba(11,9,8,0.55) 0%, transparent 30%);
}
.rl-hero-banner__content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: clamp(1.2rem, 4vw, 3.2rem) clamp(1.2rem, 5vw, 4rem);
  max-width: 620px; line-height: normal;
}
.rl-hero-banner__headline {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: clamp(1.4rem, 4vw, 2.6rem); line-height: 1.08;
  color: #fff; margin: 0 0 10px;
}
.rl-hero-banner__sub {
  font-size: clamp(0.8rem, 1.6vw, 1rem); color: rgba(247,244,241,0.78); line-height: 1.55;
  max-width: 46ch; margin: 0 0 20px;
}
.rl-hero-banner__btn { margin-top: 4px; }
@media (max-width: 700px) {
  .rl-hero-banner__content { max-width: 100%; padding: 1rem 1rem 1.4rem; justify-content: flex-end; }
  .rl-hero-banner__video { max-height: 42vh; }
}

/* ---------- category sidebar (secretsergey_unlim_categories): re-point Bootstrap's
   list-group blue accent at our crimson/dark tokens ---------- */
.list-group-item {
  background: var(--rl-surface);
  border-color: var(--rl-border);
  color: var(--rl-text);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.list-group-item:hover {
  background: var(--rl-page-alt);
  color: var(--rl-text);
  z-index: 1;
}
.list-group-item.active {
  background: var(--rl-crimson-500) !important;
  border-color: var(--rl-crimson-500) !important;
  color: #fff !important;
  z-index: 2;
}

/* ---------- font consistency guard ----------
   Legacy/pasted content (blog, product & category descriptions, custom HTML
   modules, information pages) sometimes carries an inline font-family or a
   legacy <font> tag left over from Word/CKEditor paste, or its own <style>
   block. This forces everything back to the site's two fonts so nothing but
   Inter/Rajdhani ever renders, without touching icon fonts (FontAwesome /
   Bootstrap Icons are set via class, never inline style, so they're untouched). */
body [style*="font-family" i],
body font[face] {
  font-family: 'Inter', -apple-system, sans-serif !important;
}
body h1[style*="font-family" i], body h2[style*="font-family" i],
body h3[style*="font-family" i], body h4[style*="font-family" i],
body h5[style*="font-family" i], body h6[style*="font-family" i] {
  font-family: 'Rajdhani', sans-serif !important;
}

/* ---------- "+N more" overflow chip (category tile subcategory list) ---------- */
.game-card__chip--more {
  border-color: var(--rl-crimson-500);
  color: var(--rl-crimson-300, #fff);
  font-weight: 700;
}
.game-card__chip--more:hover {
  background: var(--rl-crimson-500);
  border-color: var(--rl-crimson-500);
  color: #fff;
}

/* ---------- contact page: "write to us via messenger/social" module ---------- */
.rl-social-block {
  background: var(--rl-surface);
  border: 1px solid var(--rl-border);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
  margin: 10px 0 30px;
}
.rl-social-block h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--rl-text);
  margin: 0 0 20px;
}
.rl-social-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.rl-social-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 84px;
  height: 84px;
  border-radius: 14px;
  border: 1px solid var(--rl-border);
  background: var(--rl-page-alt);
  color: var(--rl-text-dim);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.rl-social-icon i { font-size: 22px; line-height: 1; }
.rl-social-icon:hover {
  background: var(--rl-crimson-500);
  border-color: var(--rl-crimson-500);
  color: #fff;
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .rl-social-icon { width: 72px; height: 72px; font-size: 10px; }
  .rl-social-icon i { font-size: 19px; }
}

/* ---------- contact page: captcha widget ---------- */
.rl-captcha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
.rl-captcha__image-wrap {
  position: relative;
  line-height: 0;
  flex: 0 0 auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.rl-captcha__image-wrap img {
  display: block;
  width: 180px;
  height: 56px;
}
.rl-captcha__refresh {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.5);
  color: #F5F1EE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.rl-captcha__refresh:hover {
  background: var(--rl-crimson-500);
  border-color: var(--rl-crimson-500);
  transform: scale(1.06);
}
.rl-captcha__refresh.is-spinning i {
  display: inline-block;
  animation: rl-captcha-spin .5s linear;
}
@keyframes rl-captcha-spin {
  to { transform: rotate(360deg); }
}
.rl-captcha__input {
  flex: 1 1 160px;
  min-width: 140px;
}
@media (max-width: 480px) {
  .rl-captcha { flex-direction: column; align-items: flex-start; }
  .rl-captcha__input { width: 100%; }
}