/* ==========================================================
   BAJAI89 PREMIUM BLUE
   External CSS Override
   ========================================================== */

:root{
    --b89-blue:#087cff;
    --b89-blue2:#00b7ff;
    --b89-blue-dark:#03142d;
    --b89-navy:#07101f;
    --b89-deep:#030912;
    --b89-white:#ffffff;
    --b89-soft:#d9e9ff;
    --b89-muted:#9eb5d1;
    --b89-border:rgba(0,183,255,.25);
    --b89-glow:rgba(0,140,255,.30);
}

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

html{
    scroll-behavior:smooth;
}

html,
body{
    background:#030912 !important;
    color:var(--b89-white) !important;
}

body{
    margin:0;
    overflow-x:hidden !important;
    background:
        radial-gradient(circle at 15% 10%,rgba(0,126,255,.14),transparent 32%),
        radial-gradient(circle at 85% 35%,rgba(0,183,255,.10),transparent 35%),
        linear-gradient(180deg,#020712 0%,#061326 45%,#02060d 100%) !important;
}

body,
button,
input,
select,
textarea{
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* jangan biarkan gambar bikin layout shift */
img{
    max-width:100%;
    height:auto;
}

/* ==============================
   WRAPPER
   ============================== */

.wrapper{
    max-width:1220px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.main-wrapper,
#site,
#content{
    background:transparent !important;
}

/* ==============================
   TOP BANNER
   ============================== */

.m-top-banner{
    background:
        linear-gradient(90deg,#006cff,#00b7ff,#006cff) !important;
    border-bottom:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 5px 25px rgba(0,105,255,.22);
}

.m-top-banner,
.m-top-banner div,
.m-top-banner strong{
    color:#fff !important;
}

.m-top-banner strong{
    font-weight:800 !important;
}

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

.vc-header{
    position:relative;
    z-index:50;
}

.vc-header__container{
    background:
        linear-gradient(180deg,rgba(5,18,39,.98),rgba(2,9,20,.98)) !important;
    border-bottom:1px solid var(--b89-border);
    box-shadow:0 10px 35px rgba(0,0,0,.35);
}

.vc-header-logo__image{
    max-width:160px !important;
    height:auto !important;
    filter:
        drop-shadow(0 0 8px rgba(0,174,255,.32))
        drop-shadow(0 0 18px rgba(0,89,255,.20));
    transition:transform .25s ease,filter .25s ease;
}

.vc-header-logo__wrapper:hover .vc-header-logo__image{
    transform:scale(1.035);
    filter:
        drop-shadow(0 0 10px rgba(0,194,255,.50))
        drop-shadow(0 0 26px rgba(0,89,255,.28));
}

/* icon header */
.vc-header__container svg{
    fill:#e7f5ff !important;
}

.vc-header__account-button-text,
.vc-header__cart-text,
.vc-header__shop-button-text{
    color:#eaf5ff !important;
    font-weight:700;
}

/* ==============================
   SEARCH
   ============================== */

.m-header__search-field-container{
    border:1px solid rgba(0,174,255,.26) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.055) !important;
    overflow:hidden;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.025),
        0 8px 25px rgba(0,0,0,.18);
}

.m-header__search-field{
    background:transparent !important;
    color:#fff !important;
}

.m-header__search-field-placeholder,
.m-header__search-field-placeholder p{
    color:#c7dcf5 !important;
}

.m-header__search-field-placeholder strong{
    color:#fff !important;
}

.m-header__search-submit{
    background:
        linear-gradient(135deg,var(--b89-blue),var(--b89-blue2)) !important;
    border:0 !important;
}

.m-header__search-submit:hover{
    background:
        linear-gradient(135deg,#00a9ff,#0068ff) !important;
}

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

.vc-header__cta-button{
    position:relative;
    overflow:hidden;
    border:0 !important;
    border-radius:10px !important;
    background:
        linear-gradient(135deg,#008cff 0%,#00c8ff 100%) !important;
    color:#fff !important;
    font-weight:800 !important;
    letter-spacing:.3px;
    box-shadow:
        0 8px 22px rgba(0,128,255,.28),
        inset 0 1px 0 rgba(255,255,255,.25);
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.vc-header__cta-button:hover{
    transform:translateY(-2px);
    color:#fff !important;
    box-shadow:
        0 12px 32px rgba(0,148,255,.40),
        inset 0 1px 0 rgba(255,255,255,.28);
}

.vc-header__cta-button:before{
    content:"";
    position:absolute;
    top:-80%;
    left:-30%;
    width:30%;
    height:260%;
    background:rgba(255,255,255,.28);
    transform:rotate(25deg);
    transition:left .45s ease;
}

.vc-header__cta-button:hover:before{
    left:120%;
}

/* ==============================
   EXPLORE NAV
   ============================== */

.m-explore-nav__container,
.m-tab-nav{
    background:
        linear-gradient(180deg,#06162b,#04101f) !important;
    border-bottom:1px solid rgba(0,173,255,.20);
}

.m-tab-nav__list{
    border-bottom:1px solid rgba(255,255,255,.07) !important;
}

.m-tab-nav__item a{
    color:#bcd3ed !important;
    font-weight:700;
    transition:.2s ease;
}

.m-tab-nav__item a:hover{
    color:#fff !important;
}

.m-explore-nav__link{
    border-radius:12px;
    padding:9px 12px !important;
    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.m-explore-nav__link:hover{
    background:rgba(0,136,255,.12) !important;
    transform:translateY(-2px);
    box-shadow:0 7px 20px rgba(0,0,0,.15);
}

.m-explore-nav__link .link__content{
    color:#e3f1ff !important;
    font-weight:700;
}

/* ==============================
   PRODUCT / HERO AREA
   ============================== */

.m-design{
    position:relative;
    padding-top:25px;
    padding-bottom:35px;
}

.m-design__content{
    position:relative;
}

.m-design__product,
.m-design__options{
    border-radius:20px !important;
}

/* gambar utama */
.m-product-preview__main{
    overflow:hidden;
    border-radius:22px !important;
    background:
        linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)) !important;
    border:1px solid rgba(0,178,255,.20);
    box-shadow:
        0 20px 45px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.08);
}

.m-product-preview__glider-img img,
.preview .jsProductMainImage{
    width:100% !important;
    height:auto !important;
    transition:transform .35s ease;
}

.m-product-preview__glider-slide:hover img{
    transform:scale(1.015);
}

/* thumbnail */
.m-product-preview__thumb{
    border-radius:10px !important;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10) !important;
}

.m-product-preview__thumb.on{
    border-color:#00afff !important;
    box-shadow:0 0 0 2px rgba(0,174,255,.15);
}

/* slider arrows */
.glide__arrow{
    border:1px solid rgba(255,255,255,.15) !important;
    background:rgba(2,15,31,.82) !important;
    color:#fff !important;
    backdrop-filter:blur(8px);
    border-radius:50% !important;
}

.glide__arrow:hover{
    background:#087cff !important;
}

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

.m-design-details__title{
    color:#fff !important;
    font-weight:800 !important;
    line-height:1.25 !important;
    letter-spacing:-.25px;
    text-shadow:0 3px 14px rgba(0,110,255,.16);
}

/* ==============================
   PRICE
   ============================== */

.m-design__prices{
    margin-top:12px;
    margin-bottom:16px;
}

.m-design__price{
    color:#42cfff !important;
    font-weight:900 !important;
    text-shadow:0 0 16px rgba(0,184,255,.20);
}

/* ==============================
   OPTION PANEL
   ============================== */

.m-design__options{
    background:
        linear-gradient(160deg,rgba(8,26,51,.94),rgba(3,13,28,.97)) !important;
    border:1px solid rgba(0,170,255,.19);
    padding:20px !important;
    box-shadow:
        0 20px 45px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.m-cart-config__select-label,
.m-cart-config__color-label{
    color:#f1f8ff !important;
    font-weight:700 !important;
}

.m-cart-config__color-name{
    color:#73d5ff !important;
}

/* option selectors */
.radio-selector__select,
.form__control,
select{
    border-radius:10px !important;
    border:1px solid rgba(0,169,255,.25) !important;
    background:#08172b !important;
    color:#fff !important;
}

.radio-selector__radio{
    border-radius:10px !important;
}

.radio-selector__radio:hover{
    border-color:#00afff !important;
}

/* ==============================
   MAIN BUTTON
   ============================== */

.m-design__cart-add,
.btn--cta{
    position:relative;
    overflow:hidden;
    border:0 !important;
    border-radius:12px !important;
    background:
        linear-gradient(135deg,#087cff 0%,#00c6ff 100%) !important;
    color:#fff !important;
    font-weight:900 !important;
    letter-spacing:.35px;
    box-shadow:
        0 10px 26px rgba(0,135,255,.30),
        inset 0 1px 0 rgba(255,255,255,.25);
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.m-design__cart-add:hover,
.btn--cta:hover{
    color:#fff !important;
    transform:translateY(-2px);
    background:
        linear-gradient(135deg,#006fff,#00baff) !important;
    box-shadow:
        0 14px 34px rgba(0,150,255,.40),
        inset 0 1px 0 rgba(255,255,255,.28);
}

/* ==============================
   DESCRIPTION
   ============================== */

.m-design-details__description{
    margin-top:22px;
    padding:20px !important;
    border-radius:16px;
    background:
        linear-gradient(145deg,rgba(10,30,57,.73),rgba(4,16,32,.83));
    border:1px solid rgba(0,166,255,.17);
}

.m-design-details__description-title{
    color:#fff !important;
    font-weight:800 !important;
}

.m-design-details__description-text{
    color:#c9d9ec !important;
    line-height:1.75 !important;
}

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

.m-design__ratings{
    margin-top:40px !important;
    padding:28px !important;
    border-radius:20px;
    background:
        linear-gradient(145deg,rgba(7,24,48,.96),rgba(3,13,27,.96));
    border:1px solid rgba(0,176,255,.18);
    box-shadow:0 16px 40px rgba(0,0,0,.22);
}

.m-design__ratings-heading{
    color:#fff !important;
    text-align:center;
    font-weight:900 !important;
}

.m-design__ratings-services{
    gap:15px;
}

.m-design__ratings-service{
    background:
        linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025)) !important;
    border:1px solid rgba(0,174,255,.13) !important;
    border-radius:15px !important;
    padding:18px !important;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.m-design__ratings-service:hover{
    transform:translateY(-3px);
    border-color:rgba(0,187,255,.40) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.20);
}

.m-design__ratings-service-name{
    color:#53d2ff !important;
    font-weight:800 !important;
}

.m-design__ratings-service.review-text{
    color:#dce9f8 !important;
    line-height:1.65;
}

.m-design__ratings-details{
    color:#9ab4cf !important;
}

/* ==============================
   INFORMATION
   ============================== */

.m-design-product-info{
    margin-top:35px;
}

.m-design-product-info--product-quality{
    padding:25px !important;
    border-radius:18px !important;
    background:
        linear-gradient(145deg,#091d37,#04101f) !important;
    border:1px solid rgba(0,166,255,.17);
    box-shadow:0 15px 38px rgba(0,0,0,.20);
}

.m-design-product-info--product-quality h4{
    color:#fff !important;
    font-weight:800;
}

.m-design-product-info--product-quality p{
    color:#bed0e5 !important;
    line-height:1.7;
}

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

.m-design-product-info--faq-container{
    margin-top:22px;
}

.m-design-product-info--faqs .tp-accordion{
    margin-bottom:10px !important;
    border:1px solid rgba(0,172,255,.15) !important;
    border-radius:13px !important;
    overflow:hidden;
    background:rgba(5,20,39,.80) !important;
    transition:.2s ease;
}

.m-design-product-info--faqs .tp-accordion:hover{
    border-color:rgba(0,184,255,.38) !important;
    background:rgba(6,26,50,.92) !important;
}

.m-design-product-info--faqs .tp-accordion__button{
    background:transparent !important;
}

.m-design-product-info--faqs .tp-accordion__button-text{
    color:#f2f8ff !important;
    font-weight:750 !important;
}

.m-design-product-info--faqs .tp-accordion__content{
    color:#bcd0e6 !important;
    line-height:1.7;
}

/* ==============================
   ADDITIONAL INFO / TAGS
   ============================== */

.m-design__additional-info-container{
    margin-top:35px;
    padding:25px !important;
    border-radius:18px;
    background:
        linear-gradient(150deg,rgba(5,22,43,.90),rgba(3,12,25,.90));
    border:1px solid rgba(0,177,255,.15);
}

.m-design__h2{
    color:#fff !important;
    font-weight:900 !important;
    line-height:1.35;
}

.m-design__subtitles{
    color:#77d8ff !important;
}

.m-design__additional-info-list a,
.m-design__additional-info a{
    color:#acd9ff !important;
    transition:.2s ease;
}

.m-design__additional-info-list a:hover,
.m-design__additional-info a:hover{
    color:#fff !important;
}

.m-design__additional-info-note{
    color:#9fb5cb !important;
}

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

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

a:hover{
    text-decoration:none;
}

/* ==============================
   FOOTER
   ============================== */

.m-footer{
    margin-top:45px;
    background:#020711 !important;
    border-top:1px solid rgba(0,177,255,.16);
}

.m-footer-sitemap{
    background:
        linear-gradient(180deg,#061326,#020914) !important;
}

.m-footer-sitemap-container{
    color:#c5d7ea !important;
}

.m-footer h4,
.m-footer__social-links-header,
.m-footer__payment-methods-header,
.link-collection__header{
    color:#fff !important;
}

.m-footer a{
    color:#9fb7d1 !important;
}

.m-footer a:hover{
    color:#52d1ff !important;
}

.m-footer__legal-bar{
    background:#01050c !important;
    border-top:1px solid rgba(255,255,255,.06);
}

.m-footer__legal-bar-container{
    color:#8198b3 !important;
}

/* ==============================
   PILLS / BADGES
   ============================== */

.vc-pill{
    border-radius:999px !important;
}

.vc-pill--on-light,
.vc-pill--on-dark{
    border-color:rgba(0,177,255,.22) !important;
}

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

::selection{
    background:#087cff;
    color:#fff;
}

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

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

::-webkit-scrollbar-track{
    background:#020812;
}

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(#087cff,#00b7ff);
    border-radius:10px;
    border:2px solid #020812;
}

/* ==============================
   FOCUS ACCESSIBILITY
   ============================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible{
    outline:2px solid #00b7ff !important;
    outline-offset:3px;
}

/* ==============================
   RESPONSIVE
   ============================== */

@media(max-width:991px){

    .m-design{
        padding-top:15px;
    }

    .m-design__options{
        padding:16px !important;
        border-radius:16px !important;
    }

    .m-design__ratings{
        padding:18px !important;
    }

    .m-design__additional-info-container{
        padding:18px !important;
    }

    .vc-header-logo__image{
        max-width:135px !important;
    }
}

@media(max-width:767px){

    body{
        background:
            radial-gradient(circle at 50% 0%,rgba(0,130,255,.13),transparent 30%),
            linear-gradient(180deg,#020711,#061326 55%,#020711) !important;
    }

    .wrapper{
        padding-left:14px !important;
        padding-right:14px !important;
    }

    .m-top-banner{
        font-size:12px !important;
    }

    .vc-header__container{
        box-shadow:0 7px 24px rgba(0,0,0,.32);
    }

    .vc-header-logo__image{
        max-width:120px !important;
    }

    .m-design-details__title{
        font-size:24px !important;
        line-height:1.3 !important;
    }

    .m-product-preview__main{
        border-radius:16px !important;
    }

    .m-design__options,
    .m-design-details__description,
    .m-design__ratings,
    .m-design-product-info--product-quality,
    .m-design__additional-info-container{
        border-radius:14px !important;
    }

    .m-design__ratings{
        margin-top:25px !important;
    }

    .m-design__cart-add{
        min-height:50px;
        font-size:16px !important;
    }
}

/* ==============================
   REDUCED MOTION
   SEO / UX FRIENDLY
   ============================== */

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}