/* ===============================
   GLOBAL BRAND COLOR OVERRIDE
================================ */

/* Main Theme Color */
:root{
    --primary:#0062bd !important;
    --yellow:#0062bd !important;
}

/* Buttons */
.btn-primary,
.btn-warning,
.btn-outline-warning{
    background:#0062bd !important;
    border-color:#0062bd !important;
    color:#fff !important;
}

/* Hover buttons */
.btn-primary:hover,
.btn-warning:hover{
    background:#004a91 !important;
    border-color:#004a91 !important;
}

/* Links */
a,
.text-primary{
    color:#0062bd !important;
}

/* Background yellow areas */
.bg-warning,
.bg-primary{
    background:#0062bd !important;
}

/* Panels / badges */
.badge-warning,
.badge-primary{
    background:#0062bd !important;
}

/* Newsletter section */
.newsletter,
.newsletter-form,
.newsletter-block{
    background:#0062bd !important;
}

/* Slider handles */
.irs--flat .irs-bar,
.irs--flat .irs-handle{
    background:#0062bd !important;
}




/* ===== CART ICON COLOR ===== */

.header-cart i,
.header-cart svg,
.ec-shopping-bag,
.ec-shopping-cart,
.u-header .cart-price {
    color: #ffffff !important;
}

/* ===== CART PRICE COLOR ===== */

.header-cart .cart-price,
.header-cart .text-gray-90,
.header-cart .font-weight-bold {
    color: #ffffff !important;
}

/* ===== CART BADGE ===== */

.header-cart .badge,
.header-cart .count {
    background: #ffffff !important;
    color: #0b5ed7 !important; /* blue text */
}

.section-title__sm::after {
  background-color: #0062bd;
}


.u-range-slider .irs-slider {
  background-color: #0062bd;
  box-shadow: none;
}

.u-range-slider .irs-slider.to {
  background-color: #fff;
  border: 3px solid #0062bd;
}



/* ===============================
   MOBILE HEADER PANEL OVERRIDE
================================ */
@media (max-width: 991.98px) { /* lg breakpoint and below */
    /* Mobile header background */
    .bg-primary-down-lg {
        background-color: var(--primary) !important; /* your theme color */
    }

    /* User sign and cart price in white */
    .header-cart .cart-price,
    .header-cart i,
    .header-cart svg {
        color: #ffffff !important;
    }

    /* Account icon, cart icon, cart price, and search lens */
    .d-flex.list-unstyled.mb-0.align-items-center li a i,
    .d-flex.list-unstyled.mb-0.align-items-center li a span.d-xl-block,
    #searchClassicInvoker span.ec-search {
        color: #ffffff !important; /* white for icons and cart price */
    }

    /* Badge inside cart (number) stays white text on dark bg) */
    .d-flex.list-unstyled.mb-0.align-items-center li a span.width-22.height-22 {
        color: #ffffff !important;
        background-color: #004a91 !important; /* optional: dark theme bg for badge */
    }

    /* Hamburger menu (three lines) */    
    .u-hamburger__inner,
    .u-hamburger__inner::before,
    .u-hamburger__inner::after {
        background-color: #ffffff !important;
    }
}

/* ===============================
   GO TO TOP BUTTON THEME COLOR
================================ */
.u-go-to {
    background-color: var(--primary) !important; /* button background */
    border-color: var(--primary) !important;     /* if it has border */
}

.u-go-to__inner {
    color: #ffffff !important; /* arrow icon in white for contrast */
}

/* Optional: hover effect */
.u-go-to:hover {
    background-color: #004a91 !important; /* darker shade on hover */
    border-color: #004a91 !important;
}

/* ===============================
   FOOTER NEWSLETTER ICON & TEXT
================================ */
.bg-primary .ec-newsletter,
.bg-primary h2 {
    color: #ffffff !important; /* white icon and text */
}




/* ===============================
   PAGINATION FULL THEME FIX
================================ */
.pagination .page-item > .page-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;         /* circular */
    border: 2px solid #0062bd !important;  /* inactive border */
    background-color: #ffffff !important;  /* inactive background */
    color: #0062bd !important;             /* inactive number color */
    margin: 0 4px !important;
    padding: 0 !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* ACTIVE PAGE — overrides everything */
.pagination .page-item.active > .page-link,
.pagination .page-item.active > .page-link:hover,
.pagination .page-item.active > .page-link:focus,
.pagination .page-item.active > .page-link:visited {
    background-color: #0062bd !important;  /* active circle filled with theme color */
    color: #ffffff !important;             /* number white */
    border-color: #0062bd !important;      /* border matches theme */
    box-shadow: none !important;           /* remove Bootstrap focus shadow */
}

/* HOVER on inactive pages */
.pagination .page-item:not(.active) > .page-link:hover,
.pagination .page-item:not(.active) > .page-link:focus {
    background-color: rgba(0, 98, 189, 0.15) !important;  /* light theme fill */
    color: #ffffff !important;                             /* number white on hover */
    border-color: #0062bd !important;
}


/* Newsletter alert small font FIX */




#newsletterAlert{
    font-size:12px !important;
    padding:4px 10px !important;
    border-radius:3px;

    margin-top:6px;
    margin-bottom:0 !important;   /* ⭐ remove bottom gap */

    line-height:1.2;              /* ⭐ compact text */
    display:inline-block;         /* ⭐ prevents full height block */
}


/* ===============================
   AMAZON STYLE PREMIUM TOAST
================================ */

#premiumToast{
    position:fixed;
    top:20px;
    right:20px;
    z-index:99999;
}

.toast-box{
    min-width:260px;
    max-width:320px;
    padding:12px 16px;
    margin-bottom:10px;
    border-radius:8px;
    color:#fff;
    font-size:13px;
    font-weight:500;
    box-shadow:0 6px 18px rgba(0,0,0,0.15);
    transform:translateX(120%);
    opacity:0;
    transition:all .4s ease;
}

/* SHOW ANIMATION */
.toast-show{
    transform:translateX(0);
    opacity:1;
}

/* TYPES */
.toast-success{ background:#2ecc71; }
.toast-error{ background:#e74c3c; }
.toast-warning{ background:#f39c12; }
.toast-info{ background:#3498db; }




/* Image wrapper */
.product-image {
  position: relative;
  display: inline-block;
  overflow: hidden; /* prevents crossing outside image */
}

/* Ribbon container */
.ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  overflow: hidden;   /* important: keeps ribbon inside image */
  pointer-events: none;
  z-index: 5;
}

/* Diagonal ribbon */
.ribbon span {
  position: absolute;
  display: block;
  width: 140px;
  background: #0d6efd;   /* Bootstrap primary blue */
  /*background: #1e3a8a;*/
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  transform: rotate(-45deg);
  top: 18px;
  left: -38px;
  line-height: 24px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Small Ribbon */
.ribbon-sm {
  width: 60px;
  height: 60px;
}

.ribbon-sm span {
  width: 85px;
  font-size: 9px;
  line-height: 16px;
  top: 10px;
  left: -24px;
}

/* Free Download */
.btn-free {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

/* Add to Cart */
.btn-cart {
    background-color: #1565c0 !important;
    border-color: #1565c0 !important;
    color: #fff !important;
}

/* Purchased */
.btn-purchased {
    background-color: #1e3a8a !important;
    border-color: #1e3a8a !important;
    color: #fff !important;
}

/* Remove */
.btn-remove {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}



.btn-free-download{
    background-color: transparent;
    border: 2px solid #0d6efd;   /* your theme blue */
    color: #0d6efd;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}

/* Hover Effect */

.btn.btn-free-download:hover,
.btn.btn-free-download:hover span,
.btn.btn-free-download:hover i {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}

/* ===============================
   ACCORDION ICON BOX THEME FIX
================================ */

.card-btn span,
.btn-link.card-btn span,
.btn-warning.card-btn span {
    background-color: #0062bd !important;  
    border-color: #0062bd !important;
    color: #ffffff !important;            
}


/* Hover darker */
.card-btn:hover span {
    background-color: #004a91 !important;
    border-color: #004a91 !important;
}

/* ===============================
   ACCORDION PLUS MINUS ICON WHITE
================================ */

.card-btn span i {
    color: #ffffff !important;   /* make + and - white */
}

/* Optional: hover state */
.card-btn:hover span i {
    color: #ffffff !important;
}

.card-btn span::before,
.card-btn span::after {
    box-shadow: none !important;
    border: none !important;
}








/* ==============================
   CUSTOM ACCORDION CLEAN STYLE
=================================*/

/* Remove all card glow / highlight */
.custom-accordion,
.custom-accordion:hover,
.custom-accordion .card-header,
.custom-accordion .card-header:hover,
.custom-accordion.card-frame-highlighted {
    box-shadow: none !important;
    border-color: #e7eaf3 !important;
    background: transparent !important;
}

/* Blue Icon Box */
.custom-accordion .accordion-icon {
    background: #1565c0;   /* your blue */
    border: none !important;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Make icons white */
.custom-accordion .accordion-icon i {
    color: #ffffff !important;
    font-size: 14px;
}

/* Default = plus */
.custom-accordion .fa-minus {
    display: none;
}

/* When expanded */
.custom-accordion .btn[aria-expanded="true"] .fa-plus {
    display: none;
}

.custom-accordion .btn[aria-expanded="true"] .fa-minus {
    display: inline-block;
}

/* Remove focus outline */
.custom-accordion .btn:focus,
.custom-accordion .btn:active {
    outline: none !important;
    box-shadow: none !important;
}







ul li, 
ol li {
    margin-bottom: 2px;
}

#formMessage{
    margin-top:15px;
    padding:12px 15px;
    border-radius:6px;
    font-size:14px;
}

.msg-success{
    background:#e6ffed;
    color:#0f5132;
    border:1px solid #badbcc;
}

.msg-error{
    background:#ffe6e6;
    color:#842029;
    border:1px solid #f5c2c7;
}










/* Change mobile header bar color #0d6efd*/
@media (max-width: 1199px) {
    .bg-primary-down-lg {
        background-color: #0062bd !important; /* your theme blue */
    }
}
@media (max-width: 1199px) {
    .bg-primary-down-lg .text-gray-90,
    .bg-primary-down-lg i {
        color: #ffffff !important;
    }
}
#cartCountMobile{
    background:#ffffff !important;
    color:#0062bd !important;
}

.bg-primary-down-lg{
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

/* Mobile hamburger icon white */
@media (max-width:1199px){
    .u-hamburger__inner,
    .u-hamburger__inner::before,
    .u-hamburger__inner::after{
        background-color:#ffffff !important;
    }
}

.nav-classic .nav-link.active {
    color: #0d6efd !important;              /* text color */
    border-bottom: 3px solid #0d6efd !important;  /* underline color */
}

.nav-classic .nav-link.active::after{
    background-color:#0d6efd !important;
}



.videoSlide,
.videoSlideThumb{
position:relative;
}

.videoSlide::after{
content:"\f04b";
font-family:"Font Awesome 5 Free";
font-weight:900;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:80px;
height:80px;
background:rgba(0,0,0,0.6);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:30px;
pointer-events:none;
}

.videoSlideThumb::after{
content:"\f04b";
font-family:"Font Awesome 5 Free";
font-weight:900;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:35px;
height:35px;
background:rgba(0,0,0,0.6);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:14px;
pointer-events:none;
}

.slick-prev,
.slick-next{
position:absolute;
top:50%;
transform:translateY(-50%);
width:40px;
height:40px;
background:rgba(0,0,0,0.5);
border-radius:50%;
border:none;
color:#fff;
z-index:999;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

.slick-prev{ left:10px; }
.slick-next{ right:10px; }

.slick-prev:hover,
.slick-next:hover{
background:#000;
}






.password-meter{
height:6px;
background:#e9ecef;
border-radius:5px;
overflow:hidden;
}

#strengthBar{
height:100%;
width:0%;
transition:0.3s;
background:#dc3545;
}

#strengthText{
font-size:13px;
}

#matchText{
font-size:13px;
}



.alert-box{
display:none;
max-width:420px;
margin:20px auto;
padding:14px 18px;
border-radius:6px;
font-size:14px;
text-align:center;
}

.alert-error{
background:#fdecea;
color:#b02a37;
border-left:4px solid #dc3545;
}

.alert-success{
background:#e9f7ef;
color:#1e7e34;
border-left:4px solid #28a745;
}





#msgBox{
display:none;
max-width:420px;
margin:25px auto;
padding:12px 18px;
border-radius:8px;
font-size:14px;
text-align:center;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

#msgBox.success{
background:#e8f7ee;
color:#1e7e34;
border-left:4px solid #28a745;
}

#msgBox.error{
background:#fdecea;
color:#b02a37;
border-left:4px solid #dc3545;
}

#msgBox a{
color:#0d6efd;
font-weight:600;
text-decoration:none;
}