/* =========================================================
   DRAGON FIRE THEME — visual only (red / black / orange)
   Does not change page content or SEO markup.
   ========================================================= */

:root {
  --df-black: #0a0000;
  --df-black-2: #140505;
  --df-black-3: #1c0a08;
  --df-charcoal: #2a0f0a;
  --df-red-deep: #5c0000;
  --df-red: #c81000;
  --df-red-hot: #ff1a00;
  --df-orange: #ff6a00;
  --df-orange-bright: #ff8c1a;
  --df-ember: #ff4500;
  --df-gold-fire: #ffb347;
  --df-cream: #ffe8d0;
  --df-text: #f2e8e0;
  --df-muted: #c4a99a;
  --df-glow: 0 0 18px rgba(255, 60, 0, 0.55), 0 0 40px rgba(255, 100, 0, 0.25);
  --df-border-fire: linear-gradient(135deg, #ff1a00, #ff6a00, #8b0000);
}

/* ---------- PAGE FOUNDATION ---------- */
html {
  background: var(--df-black) !important;
}

body {
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(255, 50, 0, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 30%, rgba(180, 20, 0, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 70% 40% at 0% 70%, rgba(255, 90, 0, 0.12) 0%, transparent 45%),
    linear-gradient(180deg, #0d0101 0%, #1a0604 35%, #0a0000 100%) !important;
  color: var(--df-text) !important;
  position: relative;
}

/* Soft ember particles (CSS only — no content) */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(255, 140, 40, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 28% 68%, rgba(255, 60, 0, 0.55), transparent),
    radial-gradient(2px 2px at 55% 35%, rgba(255, 180, 60, 0.5), transparent),
    radial-gradient(1px 1px at 72% 78%, rgba(255, 80, 0, 0.65), transparent),
    radial-gradient(2px 2px at 88% 18%, rgba(255, 120, 20, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 40% 90%, rgba(255, 50, 0, 0.4), transparent),
    radial-gradient(1px 1px at 8% 48%, rgba(255, 160, 40, 0.5), transparent);
  animation: df-embers 12s ease-in-out infinite alternate;
  opacity: 0.75;
}

/* Top fire haze strip */
body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 99998;
  background: linear-gradient(90deg, #5c0000, #ff1a00, #ff6a00, #ff1a00, #5c0000);
  box-shadow: 0 0 16px #ff4500, 0 0 32px rgba(255, 60, 0, 0.6);
  animation: df-fireline 3s linear infinite;
  background-size: 200% 100%;
}

@keyframes df-embers {
  0% { transform: translateY(0); opacity: 0.55; }
  100% { transform: translateY(-18px); opacity: 0.9; }
}

@keyframes df-fireline {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes df-flame-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 60, 0, 0.4), 0 0 18px rgba(255, 100, 0, 0.2);
  }
  50% {
    box-shadow: 0 0 18px rgba(255, 40, 0, 0.75), 0 0 36px rgba(255, 110, 0, 0.4);
  }
}

@keyframes df-border-glow {
  0%, 100% { border-color: #8b0000; box-shadow: 0 0 12px rgba(255, 50, 0, 0.35); }
  50% { border-color: #ff6a00; box-shadow: 0 0 28px rgba(255, 90, 0, 0.55); }
}

/* Keep content above particle layer */
body > * {
  position: relative;
  z-index: 1;
}

/* ---------- HEADER ---------- */
.header-alt,
.header-alt__middle,
.header-alt.js-header {
  background: linear-gradient(180deg, #1a0505 0%, #0a0000 100%) !important;
  border-bottom: 2px solid #8b0000 !important;
  box-shadow: 0 8px 28px rgba(255, 40, 0, 0.18) !important;
}

.header-alt__top-bar {
  background: linear-gradient(90deg, #1a0000, #3d0500, #1a0000) !important;
  border-bottom: 1px solid rgba(255, 80, 0, 0.35) !important;
}

.header-alt__top-bar-link-text,
.header-alt__top-bar a,
.header-alt__top-bar span {
  color: var(--df-cream) !important;
}

.header-alt__top-bar a:hover span {
  color: var(--df-orange-bright) !important;
  text-shadow: 0 0 10px rgba(255, 100, 0, 0.8);
}

.header-alt__logo-img {
  filter: drop-shadow(0 0 10px rgba(255, 60, 0, 0.55));
}

.header-alt__location-picker-text,
.header-alt__widgets,
.header-alt a {
  color: var(--df-cream) !important;
}

/* Search */
.header-alt__search .form-control,
.search .form-control,
#siteSearchMirror {
  background: #1a0806 !important;
  border: 1px solid #8b0000 !important;
  color: var(--df-cream) !important;
  box-shadow: inset 0 0 12px rgba(255, 40, 0, 0.12) !important;
}

.btn-search,
.search__form-cta .btn {
  background: linear-gradient(180deg, #ff6a00, #8b0000) !important;
  border-color: #ff4500 !important;
  color: #fff !important;
}

/* Nav menu */
.menu-alt,
.menu-alt__list,
.header-alt__nav,
nav.menu-alt {
  background: transparent !important;
}

.menu-alt__link,
.menu-alt__link--main,
.menu-alt a {
  color: var(--df-cream) !important;
  text-shadow: 0 1px 2px #000;
}

.menu-alt__link:hover,
.menu-alt__link--main:hover {
  color: var(--df-orange-bright) !important;
  text-shadow: 0 0 12px rgba(255, 100, 0, 0.9) !important;
}

/* ---------- MAIN / CONTAINERS ---------- */
.main,
.main-container,
.container {
  background: transparent !important;
}

.product,
.product--main,
.simple-container__generic,
.simple-container__product-panel,
.product__panel {
  background: linear-gradient(160deg, rgba(30, 8, 5, 0.95), rgba(10, 0, 0, 0.98)) !important;
  border: 1px solid rgba(255, 70, 0, 0.35) !important;
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(255, 40, 0, 0.12) !important;
  color: var(--df-text) !important;
}

.product-title,
h1.product-title,
h1, h2, h3, h4, h5 {
  color: var(--df-cream) !important;
  text-shadow: 0 0 14px rgba(255, 70, 0, 0.35);
}

.product-title {
  background: linear-gradient(90deg, #ff8c1a, #ff1a00, #ff6a00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 8px rgba(255, 60, 0, 0.45));
}

.product-sku,
.product__description,
.product__description-long,
.breadcrumb,
.breadcrumb__inner,
.breadcrumb a {
  color: var(--df-muted) !important;
}

.breadcrumb__link:hover .breadcrumb__inner {
  color: var(--df-orange) !important;
}

/* Product image frame — dragon glow */
#gallery-product-main,
.product-details-carousel,
.product-details-carousel__zoom,
.zoom {
  border: 2px solid transparent !important;
  border-radius: 14px;
  background:
    linear-gradient(#120505, #120505) padding-box,
    linear-gradient(145deg, #ff1a00, #ff6a00, #5c0000, #ff1a00) border-box !important;
  box-shadow: var(--df-glow) !important;
  animation: df-flame-pulse 3.5s ease-in-out infinite;
  overflow: hidden;
}

#gallery-product-main img,
.product-details-carousel img {
  border-radius: 10px;
}

/* Buttons / CTAs */
.btn,
.btn-primary,
.btn-secondary,
button.btn {
  background: linear-gradient(180deg, #ff6a00 0%, #b30000 55%, #5c0000 100%) !important;
  border: 1px solid #ff4500 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 0 14px rgba(255, 60, 0, 0.4) !important;
}

.btn:hover,
.btn-primary:hover {
  background: linear-gradient(180deg, #ff8c1a 0%, #ff1a00 60%, #8b0000 100%) !important;
  box-shadow: 0 0 22px rgba(255, 90, 0, 0.65) !important;
  color: #fff !important;
}

/* CTA daftar/login strip */
.CTAMAHJONGBET88468516465 {
  border-color: #ff4500 !important;
  box-shadow: 0 0 22px rgba(255, 50, 0, 0.55) !important;
  animation: df-border-glow 2.2s ease-in-out infinite !important;
}

.m-btn {
  background: linear-gradient(180deg, #ff6a00 0%, #ff1a00 40%, #5c0000 100%) !important;
  color: #fff !important;
}

.m-btn:hover {
  color: var(--df-gold-fire) !important;
  text-shadow: 0 0 14px #ff6a00 !important;
}

/* ---------- FAQ — fire cards ---------- */
.faq-section {
  background: linear-gradient(180deg, rgba(20, 4, 2, 0.85), rgba(8, 0, 0, 0.9)) !important;
  border: 1px solid rgba(255, 70, 0, 0.35);
  box-shadow: 0 0 40px rgba(255, 40, 0, 0.12);
}

.faq-section::before {
  background: linear-gradient(90deg, transparent, #ff6a00, #ff1a00, #ff6a00, transparent) !important;
  box-shadow: 0 0 12px #ff4500;
}

.faq-section h2,
.cok-faq-title {
  background: linear-gradient(135deg, #ff8c1a, #ff1a00, #ff6a00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 10px rgba(255, 60, 0, 0.5));
}

.faq-item {
  background: linear-gradient(145deg, #140505, #0a0000) !important;
  border: 2px solid #8b0000 !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55) !important;
}

.faq-item:hover {
  border-color: #ff6a00 !important;
  box-shadow: 0 12px 36px rgba(255, 60, 0, 0.45) !important;
}

.faq-question {
  color: var(--df-cream) !important;
}

.faq-question:hover {
  color: var(--df-orange-bright) !important;
}

.faq-question::after {
  color: var(--df-orange) !important;
  border-color: #ff4500 !important;
  background: rgba(80, 10, 0, 0.5) !important;
  box-shadow: 0 0 10px rgba(255, 60, 0, 0.35);
}

.faq-item.active .faq-question::after {
  background: linear-gradient(135deg, #ff6a00, #8b0000) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.faq-answer {
  background: linear-gradient(180deg, rgba(255, 60, 0, 0.08), transparent) !important;
}

.faq-item.active .faq-answer {
  border-top-color: rgba(255, 80, 0, 0.45) !important;
  color: var(--df-text) !important;
}

.faq-answer p {
  color: var(--df-muted) !important;
}

/* ---------- TESTIMONIAL / CARDS ---------- */
.t-card,
[class*="t-card"],
#testimonislotterbaikMAHJONGBET88 .t-card {
  background: linear-gradient(160deg, #1a0805, #0a0000) !important;
  border: 1px solid #8b0000 !important;
  box-shadow: 0 0 20px rgba(255, 40, 0, 0.2) !important;
  color: var(--df-text) !important;
}

#testimonislotterbaikMAHJONGBET88 h2,
#testimonislotterbaikMAHJONGBET88 .judul,
.judul-wrapper-MAHJONGBET88 {
  color: var(--df-orange-bright) !important;
  text-shadow: 0 0 16px rgba(255, 80, 0, 0.55) !important;
}

/* ---------- WRAP / CONTENT BOXES ---------- */
.wrapstarlinkalternatif {
  background:
    linear-gradient(#0a0000, #140505) padding-box,
    linear-gradient(180deg, #ff1a00 0%, #ff6a00 50%, #5c0000 100%) border-box !important;
  border: 4px solid transparent !important;
  box-shadow:
    0 0 30px rgba(255, 50, 0, 0.45),
    inset 0 0 30px rgba(80, 0, 0, 0.5) !important;
}

.wrapstarlinkalternatif h2,
.judul-wrapper-MAHJONGBET88 {
  color: var(--df-orange-bright) !important;
  text-shadow: 0 0 18px rgba(255, 70, 0, 0.7) !important;
}

.wrapstarlink {
  color: var(--df-text) !important;
}

.wrapstarlink a,
a[style*="color: #ff0909"],
a[style*="color:#ff0909"] {
  color: #ff6a00 !important;
  text-shadow: 0 0 8px rgba(255, 80, 0, 0.5);
}

.wrapstarlink a:hover {
  color: #ffb347 !important;
}

/* Generic content links in main */
.main a:not(.btn):not(.m-btn):not(.footer-btn-star):not(.menu-alt__link) {
  color: #ff6a00;
}

.main a:not(.btn):not(.m-btn):not(.footer-btn-star):hover {
  color: #ffb347;
}

/* ---------- RECOMMENDATIONS / CAROUSEL ---------- */
.product-recommendations-carousel,
.glider-contain,
.js-add-product {
  background: transparent !important;
}

.product-recommendations-carousel h2 {
  color: var(--df-orange-bright) !important;
  text-shadow: 0 0 12px rgba(255, 60, 0, 0.4);
}

/* ---------- FOOTER ---------- */
.footer,
footer.footer {
  background: linear-gradient(180deg, #140505 0%, #0a0000 100%) !important;
  border-top: 3px solid #8b0000 !important;
  box-shadow: 0 -10px 40px rgba(255, 40, 0, 0.15) !important;
  color: var(--df-muted) !important;
}

.footer__heading,
.footer h3,
.footer .h3 {
  color: var(--df-orange-bright) !important;
  text-shadow: 0 0 10px rgba(255, 80, 0, 0.4);
}

.footer a,
.footer__list a {
  color: var(--df-cream) !important;
}

.footer a:hover {
  color: var(--df-orange) !important;
}

.footer__hr {
  border-color: rgba(255, 70, 0, 0.35) !important;
  background: linear-gradient(90deg, transparent, #ff4500, transparent) !important;
  height: 1px;
  border: none !important;
  opacity: 1 !important;
}

.footer__copyright,
.footer__small,
.footer__bottom {
  color: var(--df-muted) !important;
  background: transparent !important;
}

/* ---------- FLOATING FOOTER BAR ---------- */
.footer-floating-star {
  background: rgba(20, 4, 2, 0.72) !important;
  border: 2px solid rgba(255, 70, 0, 0.65) !important;
  box-shadow:
    0 0 28px rgba(255, 50, 0, 0.55),
    inset 0 0 20px rgba(255, 40, 0, 0.12) !important;
  backdrop-filter: blur(12px) !important;
}

.footer-btn-star {
  background: linear-gradient(180deg, #1a0805, #0a0000) !important;
  border: 2px solid #8b0000 !important;
  color: var(--df-cream) !important;
  box-shadow: 0 0 14px rgba(255, 50, 0, 0.45) !important;
}

.footer-btn-star:hover {
  background: linear-gradient(180deg, #ff6a00, #8b0000) !important;
  color: #fff !important;
  border-color: #ff4500 !important;
  box-shadow:
    0 0 18px #ff4500,
    0 0 36px rgba(255, 80, 0, 0.55) !important;
}

.footer-btn-star:active {
  background: linear-gradient(135deg, #ff1a00, #ff6a00) !important;
  color: #fff !important;
  border-color: #ffb347 !important;
}

.footer-btn-star img {
  filter: drop-shadow(0 0 6px rgba(255, 80, 0, 0.85)) !important;
}

/* Legacy fixed bar if present */
.footerslotstar {
  background: linear-gradient(180deg, #ff6a00 0%, #5c0000 55%, #0a0000 100%) !important;
  border-top: 2px solid #ff4500 !important;
  box-shadow: 0 -6px 24px rgba(255, 40, 0, 0.55) !important;
}

.ft-main {
  background: linear-gradient(145deg, #ff8c1a, #ff1a00) !important;
  border-top-color: #ffb347 !important;
  box-shadow: 0 -5px 18px rgba(255, 80, 0, 0.55) !important;
}

.ft-btn:hover svg {
  fill: #ffb347 !important;
}

/* ---------- FORMS / MISC ---------- */
input, select, textarea {
  background-color: #1a0806 !important;
  border-color: #8b0000 !important;
  color: var(--df-cream) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: #ff6a00 !important;
  box-shadow: 0 0 0 2px rgba(255, 90, 0, 0.35) !important;
  outline: none !important;
}

hr {
  border-color: rgba(255, 70, 0, 0.3) !important;
}

/* Rating / stars accents */
.rating,
.stars,
[class*="rating"] {
  color: var(--df-orange) !important;
}

/* Tables if any */
table {
  color: var(--df-text);
}

/* Scrollbar — fire */
* {
  scrollbar-width: thin;
  scrollbar-color: #ff4500 #1a0505;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #0a0000;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff6a00, #8b0000);
  border-radius: 8px;
}

/* ---------- ACCESSIBILITY: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  #gallery-product-main,
  .CTAMAHJONGBET88468516465,
  .footer-btn-star {
    animation: none !important;
  }
}