/* ==========================================================
   BAJAI89 LIGHT MAROON PREMIUM FIX
   WAJIB TARUH PALING BAWAH SEMUA CSS
   ========================================================== */

:root{
  --b89-red:#e32645;
  --b89-red2:#ff3f60;
  --b89-red3:#ff6b82;
  --b89-maroon:#550d20;
  --b89-maroon2:#2c0913;
  --b89-dark:#13080d;

  --b89-bg:#f7f3f4;
  --b89-card:#ffffff;
  --b89-soft:#fff5f7;

  --b89-text:#171116;
  --b89-muted:#685c61;
}


/* ==========================================================
   BACKGROUND UTAMA
   JANGAN HITAM SEMUA
   ========================================================== */

html,
body{
  background:
    linear-gradient(
      180deg,
      #f8f4f5 0%,
      #ffffff 45%,
      #f5edef 100%
    ) !important;

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


/* area utama */

main,
.main-wrapper,
#content,
.content,
.content-wrapper,
.overflow-hidden,
.product,
.product-detail,
.product-details,
.product-container,
.single-product{
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fffafb 100%
    ) !important;

  color:#171116 !important;
}


/* ==========================================================
   HEADER
   DARK MAROON, BUKAN HITAM MATI
   ========================================================== */

header,
.vc-header,
.vc-header__container{
  background:
    linear-gradient(
      135deg,
      #170910 0%,
      #350b18 48%,
      #190911 100%
    ) !important;

  border-bottom:
    1px solid rgba(255,63,96,.35) !important;

  box-shadow:
    0 7px 25px rgba(60,8,24,.20) !important;
}


/* ==========================================================
   NAV CATEGORY
   ========================================================== */

.m-explore-nav,
.m-explore-nav__container,
.m-tab-nav,
.m-tab-nav__container{
  background:
    linear-gradient(
      180deg,
      #250b14 0%,
      #16090e 100%
    ) !important;

  border-bottom:
    1px solid rgba(255,71,101,.25) !important;
}


.m-explore-nav a,
.m-tab-nav a{
  color:#fff !important;
}


.m-explore-nav a:hover,
.m-tab-nav a:hover{
  color:#ff6980 !important;
}


/* ==========================================================
   BAR LOGIN / DAFTAR ATAS
   ========================================================== */

.n-columns-2{
  background:
    linear-gradient(
      90deg,
      #fff7f8,
      #ffffff,
      #fff7f8
    ) !important;

  padding:14px 8px !important;

  border-top:
    1px solid rgba(227,38,69,.08) !important;

  border-bottom:
    1px solid rgba(227,38,69,.12) !important;
}


.login{
  background:
    linear-gradient(
      135deg,
      #3e0b18,
      #651027
    ) !important;

  color:#fff !important;

  border:
    1px solid rgba(255,84,112,.55) !important;

  box-shadow:
    0 6px 16px rgba(66,8,23,.17) !important;
}


.register{
  background:
    linear-gradient(
      135deg,
      #c51639,
      #e32645 50%,
      #ff4968
    ) !important;

  color:#fff !important;

  border:
    1px solid rgba(255,118,140,.60) !important;

  box-shadow:
    0 7px 18px rgba(227,38,69,.25) !important;
}


/* ==========================================================
   AREA PRODUK
   ========================================================== */

.product,
.product-detail,
.product-details,
.product-container,
.single-product{
  border-radius:0 !important;

  padding-top:28px !important;
}


/* BAGIAN TEKS KANAN */

.product-info,
.product-summary,
.summary,
.product-details,
.product-content{
  background:#ffffff !important;

  color:#171116 !important;
}


/* ==========================================================
   JUDUL
   ========================================================== */

.product h1,
.product-title,
.product-info h1,
.product-summary h1,
.summary h1,
.product-details h1{
  color:#1d1016 !important;

  text-shadow:none !important;

  font-weight:900 !important;
}


/* ==========================================================
   HARGA
   ========================================================== */

.price,
.product-price,
.product .price,
.product-info .price,
.product-summary .price{
  color:#b51234 !important;

  text-shadow:none !important;

  font-weight:800 !important;
}


/* ==========================================================
   SUB TITLE
   ========================================================== */

.product-subtitle,
.product-meta,
.product-description-short,
.product-info p,
.product-summary p{
  color:#4d4246 !important;
}


/* ==========================================================
   PARAGRAF DESKRIPSI
   PAKSA JANGAN HITAM
   ========================================================== */

.product-description,
.description,
.entry-content,
.article-content,
.product-content,
.product-info,
.product-summary{
  color:#292126 !important;
}


.product-description p,
.description p,
.entry-content p,
.article-content p,
.product-content p,
.product-info p,
.product-summary p{
  color:#292126 !important;

  line-height:1.55 !important;

  opacity:1 !important;

  text-shadow:none !important;
}


/* ==========================================================
   TOMBOL DAFTAR DISINI + LOGIN DISINI
   HAPUS KUNING
   ========================================================== */

.btn-x,
a.btn-x,
button.btn-x{
  background:
    linear-gradient(
      135deg,
      #bd1435 0%,
      #e32645 52%,
      #fb4564 100%
    ) !important;

  color:#ffffff !important;

  border:
    1px solid rgba(255,105,130,.65) !important;

  border-radius:12px !important;

  box-shadow:
    0 7px 18px rgba(227,38,69,.23) !important;

  text-shadow:none !important;

  filter:none !important;
}


.btn-x:hover,
a.btn-x:hover,
button.btn-x:hover{
  background:
    linear-gradient(
      135deg,
      #d2193f,
      #f03758
    ) !important;

  color:#fff !important;

  box-shadow:
    0 9px 23px rgba(227,38,69,.32) !important;

  transform:translateY(-2px) !important;
}


/* ==========================================================
   GAMBAR UTAMA
   ========================================================== */

.product-image img,
.product-gallery img,
.main-image img{
  border:
    1px solid rgba(227,38,69,.18) !important;

  border-radius:18px !important;

  box-shadow:
    0 14px 35px rgba(50,12,23,.18) !important;
}


/* thumbnail */

.thumbnail img,
.thumbnails img,
.product-thumbnail img{
  border:
    2px solid rgba(227,38,69,.20) !important;

  border-radius:11px !important;

  background:#fff !important;
}


/* ==========================================================
   CARD / BOX CONTENT
   ========================================================== */

.card,
.box,
.info-box,
.product-card{
  background:#ffffff !important;

  color:#20171b !important;

  border:
    1px solid rgba(227,38,69,.13) !important;

  box-shadow:
    0 8px 25px rgba(75,15,32,.08) !important;

  border-radius:15px !important;
}


/* ==========================================================
   INFO BOX
   ========================================================== */

#mw-info-box{
  background:
    linear-gradient(
      145deg,
      #fff8f9,
      #ffffff
    ) !important;

  color:#24191e !important;

  border:
    1px solid rgba(227,38,69,.20) !important;
}


/* header info */

#mw-info-box > div:first-child{
  background:
    linear-gradient(
      135deg,
      #76162e,
      #c41a3b
    ) !important;

  color:#fff !important;
}


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

.faq-container,
.faq-box{
  background:#ffffff !important;

  border:
    1px solid rgba(227,38,69,.18) !important;

  box-shadow:
    0 10px 26px rgba(60,8,24,.08) !important;
}


.faq-container > div:first-child,
.faq-box > div:first-child{
  background:
    linear-gradient(
      135deg,
      #72142c,
      #c51a3c
    ) !important;
}


.faq-question{
  background:#fff8fa !important;

  color:#30151f !important;

  border-bottom:
    1px solid rgba(227,38,69,.10) !important;
}


.faq-question:hover,
.faq-question.active{
  background:#ffeef2 !important;

  color:#c41739 !important;
}


.faq-answer{
  background:#ffffff !important;

  color:#514348 !important;
}


/* ==========================================================
   REVIEW
   ========================================================== */

.mw-review-box{
  background:#fff !important;

  border:
    1px solid rgba(227,38,69,.18) !important;
}


.mw-review-title{
  background:
    linear-gradient(
      135deg,
      #6a1128,
      #c81a3c
    ) !important;

  color:#fff !important;
}


.review-card{
  background:
    linear-gradient(
      145deg,
      #fff8fa,
      #ffffff
    ) !important;

  color:#292126 !important;

  border:
    1px solid rgba(227,38,69,.13) !important;
}


.review-name{
  color:#c01638 !important;
}


.review-text{
  color:#514348 !important;
}


/* ==========================================================
   FOOTER FIXED
   HAPUS KUNING TOTAL
   ========================================================== */

.bajai89-fixed-footer{
  background:
    linear-gradient(
      180deg,
      rgba(67,10,25,.98),
      rgba(20,6,11,.99)
    ) !important;

  border-top:
    1px solid rgba(255,81,111,.55) !important;

  box-shadow:
    0 -6px 22px rgba(120,12,42,.20) !important;

  border-radius:
    17px 17px 0 0 !important;
}


/* teks footer */

.bajai89-fixed-footer a,
.bajai89-fixed-footer span{
  color:#ffffff !important;

  text-shadow:none !important;

  filter:none !important;
}


/* ICON FOOTER */

.bajai89-fixed-footer img{
  filter:
    drop-shadow(
      0 0 4px rgba(255,69,101,.50)
    ) !important;
}


/* tombol daftar tengah */

.bajai89-fixed-footer .tada{
  background:
    radial-gradient(
      circle,
      rgba(255,62,96,.35) 0%,
      rgba(227,38,69,.17) 48%,
      transparent 72%
    ) !important;

  border:
    1px solid rgba(255,83,112,.35) !important;

  box-shadow:
    0 0 18px rgba(227,38,69,.38) !important;

  filter:none !important;
}


/* ==========================================================
   HAPUS WARNA KUNING SISA TEMPLATE
   ========================================================== */

.btn-x,
.login,
.register,
.bajai89-fixed-footer,
.bajai89-fixed-footer *,
.product-info *,
.product-summary *{
  text-shadow:none !important;
}


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

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


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

@media(max-width:768px){

  body{
    background:#fff !important;
  }


  .product,
  .product-detail,
  .product-container,
  .single-product{
    background:#fff !important;

    padding-top:16px !important;
  }


  .product-info,
  .product-summary,
  .summary{
    background:#fff !important;

    padding:
      14px 5px !important;
  }


  .product h1,
  .product-title,
  .product-info h1{
    color:#1d1016 !important;

    font-size:23px !important;
  }


  .price,
  .product-price{
    color:#bc1537 !important;
  }


  .btn-x{
    width:100% !important;
  }


  .bajai89-fixed-footer{
    border-radius:
      14px 14px 0 0 !important;
  }

}

/* ==========================================================
   FIX TEKS INFORMASI BAJAI89
   TARUH PALING BAWAH
   ========================================================== */

/* BOX UTAMA */
#mw-info-box{
  background:#ffffff !important;
  color:#23171c !important;

  border:1px solid rgba(227,38,69,.22) !important;
  border-radius:16px !important;

  overflow:hidden !important;

  box-shadow:
    0 10px 28px rgba(70,10,28,.16) !important;
}


/* HEADER INFORMASI */
#mw-info-box > div:first-child{
  background:
    linear-gradient(
      135deg,
      #8f1532 0%,
      #c91b3d 55%,
      #e32645 100%
    ) !important;

  color:#ffffff !important;

  border-bottom:none !important;
}


/* JUDUL HEADER */
#mw-info-box > div:first-child *,
#mw-info-box h2,
#mw-info-box h3{
  color:#ffffff !important;
  text-shadow:none !important;
}


/* SEMUA TEKS DALAM BOX */
#mw-info-box,
#mw-info-box div,
#mw-info-box span,
#mw-info-box p,
#mw-info-box td,
#mw-info-box th,
#mw-info-box li{
  color:#2d2025 !important;
  text-shadow:none !important;
  opacity:1 !important;
}


/* KOLOM LABEL KIRI */
#mw-info-box td:first-child,
#mw-info-box .label,
#mw-info-box .info-label{
  color:#66565c !important;

  font-weight:600 !important;

  opacity:1 !important;
}


/* VALUE / ISI KANAN */
#mw-info-box td:last-child,
#mw-info-box .value,
#mw-info-box .info-value{
  color:#25181e !important;

  font-weight:700 !important;

  opacity:1 !important;
}


/* BRAND BAJAI89 / TEKS PENTING */
#mw-info-box strong,
#mw-info-box b{
  color:#d7193d !important;

  font-weight:900 !important;
}


/* BARIS INFORMASI */
#mw-info-box tr{
  border-bottom:
    1px solid rgba(227,38,69,.08) !important;
}


#mw-info-box tr:last-child{
  border-bottom:none !important;
}


/* JIKA STRUKTURNYA DIV BUKAN TABLE */
#mw-info-box > div:not(:first-child){
  color:#2b1e23 !important;
}


/* ==========================================================
   FOOTER DALAM INFO BOX
   ========================================================== */

#mw-info-box footer,
#mw-info-box .footer,
#mw-info-box > div:last-child{
  color:#ffffff !important;
}


/* Kalau div terakhir memang footer copyright */
#mw-info-box > div:last-child{
  background:
    linear-gradient(
      135deg,
      #4c0b1b,
      #751027
    ) !important;

  color:#ffffff !important;
}


/* isi footer */
#mw-info-box > div:last-child *{
  color:#ffffff !important;
}


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

@media(max-width:768px){

  #mw-info-box{
    border-radius:13px !important;
  }

  #mw-info-box td,
  #mw-info-box p,
  #mw-info-box span{
    font-size:14px !important;
  }

}

/* ==========================================================
   FIX FAQ BAJAI89 BISA DIKLIK / DIBUKA
   TARUH PALING BAWAH CSS
   ========================================================== */

.faq-question{
  position:relative !important;
  z-index:5 !important;

  display:block !important;
  width:100% !important;

  cursor:pointer !important;
  pointer-events:auto !important;

  user-select:none !important;

  background:#fff7f9 !important;
  color:#35242b !important;

  border:0 !important;
  border-bottom:1px solid rgba(120,20,45,.18) !important;

  padding:17px 22px !important;

  font-size:17px !important;
  font-weight:600 !important;

  text-align:left !important;

  transition:
    background .2s ease,
    color .2s ease !important;
}


.faq-question:hover{
  background:#ffedf2 !important;
  color:#c5163a !important;
}


/* ketika diklik */
.faq-question.active{
  background:
    linear-gradient(
      90deg,
      #ffe8ee,
      #fff5f7
    ) !important;

  color:#c5163a !important;

  font-weight:700 !important;
}


/* ==========================================================
   JAWABAN FAQ
   ========================================================== */

.faq-answer{
  position:relative !important;
  z-index:4 !important;

  display:block !important;

  max-height:0 !important;
  overflow:hidden !important;

  padding:0 22px !important;

  background:#ffffff !important;
  color:#514147 !important;

  opacity:0 !important;

  line-height:1.55 !important;

  transition:
    max-height .4s ease,
    padding .3s ease,
    opacity .25s ease !important;
}


/* INI YANG MEMBUKA JAWABAN */
.faq-question.active + .faq-answer{
  max-height:500px !important;

  padding:17px 22px 20px !important;

  opacity:1 !important;

  color:#514147 !important;
}


/* pastikan parent tidak menutup click */
.faq-item{
  position:relative !important;

  overflow:visible !important;

  pointer-events:auto !important;
}


/* jika ada overlay liar dari template */
.faq-container,
.faq-box{
  position:relative !important;
  z-index:2 !important;

  pointer-events:auto !important;
}


/* semua button FAQ harus menerima klik */
.faq-container button,
.faq-box button{
  pointer-events:auto !important;
}