/* ==========================================================
   BAJAI89 — RAINBOW DARK PREMIUM
   CSS OVERRIDE ONLY
   Pasang SETELAH CSS template utama
   ========================================================== */

:root{
  --rb-red:#ff3b5c;
  --rb-orange:#ff8a00;
  --rb-yellow:#ffd600;
  --rb-green:#35e88b;
  --rb-cyan:#22dff5;
  --rb-blue:#4c7dff;
  --rb-purple:#a855f7;
  --rb-pink:#ff4fd8;

  --rb-black:#050507;
  --rb-dark:#09090d;
  --rb-card:#111118;
  --rb-card2:#171720;
  --rb-white:#ffffff;
  --rb-text:#eeeeF5;
  --rb-muted:#aaaabd;
}

/* ==========================================================
   GLOBAL
   ========================================================== */

html,
body{
  background:
    radial-gradient(circle at 15% 10%,rgba(255,59,92,.10),transparent 25%),
    radial-gradient(circle at 85% 15%,rgba(168,85,247,.10),transparent 28%),
    radial-gradient(circle at 80% 85%,rgba(34,223,245,.08),transparent 28%),
    linear-gradient(180deg,#08080c 0%,#050507 100%) !important;

  color:var(--rb-text) !important;
}

body{
  min-height:100vh;
}

/* ==========================================================
   RAINBOW ANIMATION
   ========================================================== */

@keyframes bajaiRainbow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

@keyframes bajaiGlow{
  0%,100%{
    filter:drop-shadow(0 0 5px rgba(255,59,92,.25));
  }
  50%{
    filter:drop-shadow(0 0 12px rgba(34,223,245,.35));
  }
}

/* ==========================================================
   PAGE / MAIN WRAPPER
   ========================================================== */

.page-wrapper,
main,
#maincontent,
.columns,
.column.main{
  background:transparent !important;
}

#maincontent{
  position:relative;
}

/* ==========================================================
   HEADER
   ========================================================== */

.page-header,
.page-header .header-main,
.header-main,
.sections.nav-sections{
  background:
    linear-gradient(
      135deg,
      rgba(12,12,18,.98),
      rgba(22,15,30,.98),
      rgba(8,18,25,.98)
    ) !important;
}

/* rainbow line bawah header */

.page-header{
  position:relative;
  border-bottom:0 !important;
}

.page-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;

  background:
    linear-gradient(
      90deg,
      var(--rb-red),
      var(--rb-orange),
      var(--rb-yellow),
      var(--rb-green),
      var(--rb-cyan),
      var(--rb-blue),
      var(--rb-purple),
      var(--rb-pink),
      var(--rb-red)
    );

  background-size:300% 300%;
  animation:bajaiRainbow 7s ease infinite;
}

/* ==========================================================
   NAVIGATION
   ========================================================== */

.navigation,
.navigation ul,
.navigation li{
  background:transparent !important;
}

.navigation a,
.navigation span{
  color:#fff !important;
}

.navigation a:hover span{
  background:
    linear-gradient(
      90deg,
      var(--rb-yellow),
      var(--rb-green),
      var(--rb-cyan),
      var(--rb-purple),
      var(--rb-pink)
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}

/* ==========================================================
   CONTENT CARDS
   ========================================================== */

.product-info-main,
.product.media,
.review-card,
.faq-box,
.block,
.widget,
fieldset,
.table-wrapper{
  background:
    linear-gradient(
      145deg,
      rgba(25,25,34,.94),
      rgba(10,10,15,.97)
    ) !important;

  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:18px !important;

  box-shadow:
    0 14px 40px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ==========================================================
   HEADINGS
   ========================================================== */

h1,
.page-title,
.product-info-main .page-title{
  background:
    linear-gradient(
      90deg,
      #ff3b5c 0%,
      #ff9d00 15%,
      #ffe600 30%,
      #35e88b 45%,
      #22dff5 60%,
      #5b7cff 75%,
      #b25cff 88%,
      #ff4fd8 100%
    ) !important;

  background-size:250% auto !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;

  -webkit-text-fill-color:transparent !important;
  color:transparent !important;

  animation:bajaiRainbow 7s linear infinite;
  font-weight:900 !important;
}

h2{
  color:#fff !important;
  font-weight:800 !important;

  text-shadow:
    0 0 14px rgba(168,85,247,.22);
}

h3,
h4{
  color:#f5f5ff !important;
}

/* ==========================================================
   PARAGRAPH / TEXT
   ========================================================== */

p,
li,
.description,
.product.attribute.description,
.product-info-main,
.review-card p,
.faq-box p{
  color:#dcdce7 !important;
}

small,
.note,
.subtitle{
  color:var(--rb-muted) !important;
}

strong,
b{
  color:#fff !important;
}

/* ==========================================================
   LINKS
   ========================================================== */

a{
  transition:
    color .25s ease,
    opacity .25s ease,
    transform .25s ease;
}

main a:not(.action):not(.button){
  color:var(--rb-cyan);
}

main a:not(.action):not(.button):hover{
  color:var(--rb-pink);
}

/* ==========================================================
   BUTTONS
   ========================================================== */

button,
.action.primary,
.action.tocart,
.actions-primary a,
.button,
.btn{
  position:relative !important;

  color:#fff !important;

  background:
    linear-gradient(
      100deg,
      #ff355e,
      #ff8a00,
      #ffd600,
      #27df83,
      #16d9ee,
      #5275ff,
      #a855f7,
      #ff4fd8
    ) !important;

  background-size:300% 300% !important;

  border:0 !important;
  border-radius:12px !important;

  font-weight:800 !important;

  box-shadow:
    0 8px 25px rgba(0,0,0,.35),
    0 0 18px rgba(168,85,247,.15) !important;

  animation:bajaiRainbow 7s ease infinite;

  transition:
    transform .25s ease,
    box-shadow .25s ease !important;
}

button:hover,
.action.primary:hover,
.action.tocart:hover,
.button:hover,
.btn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 12px 30px rgba(0,0,0,.45),
    0 0 25px rgba(34,223,245,.25) !important;
}

/* ==========================================================
   FAQ BAJAI89
   ========================================================== */

.faq-box{
  position:relative !important;
  overflow:hidden !important;

  margin-bottom:14px !important;
  padding:22px 24px !important;

  transition:
    transform .3s ease,
    box-shadow .3s ease !important;
}

.faq-box::before{
  content:"" !important;

  position:absolute !important;
  left:0 !important;
  top:0 !important;

  width:4px !important;
  height:100% !important;

  background:
    linear-gradient(
      180deg,
      var(--rb-red),
      var(--rb-yellow),
      var(--rb-green),
      var(--rb-cyan),
      var(--rb-purple),
      var(--rb-pink)
    ) !important;
}

.faq-box:hover{
  transform:translateY(-3px);

  box-shadow:
    0 16px 40px rgba(0,0,0,.50),
    0 0 20px rgba(168,85,247,.12) !important;
}

.faq-box strong{
  display:block;
  margin-bottom:9px;

  color:#fff !important;
  font-size:17px;
}

/* ==========================================================
   REVIEWS
   ========================================================== */

.review-card{
  position:relative;
  overflow:hidden;
  padding:22px !important;
}

.review-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--rb-red),
      var(--rb-yellow),
      var(--rb-green),
      var(--rb-cyan),
      var(--rb-purple),
      var(--rb-pink),
      transparent
    );
}

.review-stars{
  color:#ffd600 !important;
  text-shadow:0 0 10px rgba(255,214,0,.30);
}

/* ==========================================================
   IMAGES
   ========================================================== */

.product.media img,
.review-avatar img{
  border-radius:14px;

  filter:
    drop-shadow(0 10px 25px rgba(0,0,0,.35));
}

/* ==========================================================
   INPUT / FORM
   ========================================================== */

input,
select,
textarea{
  background:#101016 !important;
  color:#fff !important;

  border:
    1px solid rgba(255,255,255,.14) !important;

  border-radius:10px !important;
}

input:focus,
select:focus,
textarea:focus{
  outline:none !important;

  border-color:var(--rb-purple) !important;

  box-shadow:
    0 0 0 3px rgba(168,85,247,.12) !important;
}

/* ==========================================================
   SCROLLBAR
   ========================================================== */

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

::-webkit-scrollbar-track{
  background:#08080c;
}

::-webkit-scrollbar-thumb{
  border-radius:20px;

  background:
    linear-gradient(
      180deg,
      #ff3b5c,
      #ff9d00,
      #35e88b,
      #22dff5,
      #a855f7,
      #ff4fd8
    );
}

/* ==========================================================
   TEXT SELECTION
   ========================================================== */

::selection{
  background:#a855f7;
  color:#fff;
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:767px){

  .product-info-main,
  .product.media,
  .review-card,
  .faq-box,
  .block{
    border-radius:13px !important;
  }

  .faq-box{
    padding:18px !important;
  }

  h1,
  .page-title{
    font-size:27px !important;
    line-height:1.25 !important;
  }

  h2{
    font-size:22px !important;
  }

  p,
  li{
    line-height:1.75 !important;
  }
}

/* ==========================================================
   ACCESSIBILITY — REDUCE MOTION
   ========================================================== */

@media(prefers-reduced-motion:reduce){

  h1,
  .page-title,
  button,
  .action.primary,
  .button,
  .page-header::after{
    animation:none !important;
  }

}