/* WooCommerce Custom CSS */
/* Untuk semua browser */
input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
    -webkit-appearance: none; /* Chrome, Safari, Edge */
    appearance: none; /* Standard CSS */
    margin: 0; /* Hilangkan margin jika ada */
}

/* Untuk memastikan Safari tidak menambahkan padding */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Styling untuk input kuantiti */
body .quantity {
    display: flex;
    align-items: center;
    gap: 5px;
}
.quantity .input-text{
    width: 50px !important;
    text-align: center;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    height: 35px;
}
.quantity .minus,
.quantity .plus {
     background-color: #ff4081;
     border: none;
     color: white;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     display: flex
 ;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     font-size: 16px;
     line-height: 1;

 }

.quantity .minus:hover,
.quantity .plus:hover {
 background-color: #e91e63;
}


/* Styling untuk slider */
.custom-product-slider {
    margin-bottom: 30px;
    width: 49%;
    float: left;
}
.slider-main img {
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.slider-thumbs {
    display: flex; /* Pastikan semua thumbnail dalam satu baris */
    justify-content: start; /* Thumbnail diatur bermula dari kiri */
    gap: 5px; /* Jarak antara thumbnail */
    margin: 0; /* Buang margin tambahan */
    padding: 0; /* Buang padding tambahan */
}

.slider-thumbs img {
    width: 100%; /* Lebar thumbnail */
    height: auto; /* Pastikan gambar maintain ratio */
    object-fit: cover; /* Pastikan gambar mengisi ruang thumbnail */
    cursor: pointer;
    border: 5px solid transparent;
    border-radius: 4px;
    transition: border 0.3s ease;
}

.slider-thumbs img:hover,
.slider-thumbs img.active {
    border: 2px solid #0073aa; /* Border bila aktif */
}

.popup-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}

.popup-link:hover .popup-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

.mfp-arrow {
    color: #fff;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease;
}

.mfp-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.mfp-arrow-left {
    left: 10px;
}

.mfp-arrow-right {
    right: 10px;
}

/* CSS untuk Styling mini cart*/
.mini-cart-quantity-control {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mini-cart-quantity-control button {
    background-color: #ff4081;
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.mini-cart-quantity-control button:hover {
    background-color: #e91e63;
}

.mini-cart-quantity-control input {
    width: 50px !important;
    text-align: center;
    border: 1px solid #ddd  !important;
    border-radius: 4px !important;
    height: 30px;
}

.mini-cart-kuantiti { width:150px }

body .mini_cart_item a.remove {
    /* display: block; */
    font-size: 28px;
    height: 35px;
    width: 35px;
    text-align: center;
    line-height: 33px;
    border-radius: 100%;
    color: red !important;
    text-decoration: none;
    font-weight: 700;
    border: 0;
    /* padding: 2px 10px 1px 10px; */
    background: #ccc;
    transform: translateX(18px);
}

.mini_cart_item a.remove:hover {
    color: #fff !important;
    background: red;
     text-decoration: none !important;
}

p.woocommerce-mini-cart__total.total {
    text-align: right;
    margin-bottom: 0;
}
.woocommerce-mini-cart__total span.woocommerce-Price-amount.amount {
    margin-left: 9px;
}

/* CSS untuk Styling  quantity order review cart*/
.review-quantity-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}

.review-quantity-wrapper button {
    background-color: #ff4081;
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.review-quantity-wrapper button:hover {
    background-color: #e91e63;
}

.review-quantity-wrapper input {
    width: 50px !important;
    text-align: center;
    border: 1px solid #ddd  !important;
    border-radius: 4px !important;
    height: 30px;
}




/* Overlay style */
.ajax-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
 display: none; 
/*    display: block !important; */
    /* Default disembunyikan */
}

.ajax-overlay-text {
    font-size: 20px;
    color: #333;
    font-weight: 500;
    letter-spacing: 1.7px;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex; /* Flexbox untuk pengaturan tengah */
    align-items: center; /* Selaraskan secara vertikal */
    justify-content: center; /* Selaraskan secara horizontal */
}
.widget_shopping_cart_content {
    position: relative;
}
.removing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Overlay gelap */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.removing-message {
    background: #ff9800; /* Warna oren */
    color: #fff;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Bila aktif, overlay akan muncul */
.removing-overlay.active {
    opacity: 1;
    visibility: visible;
}


@media (max-width: 768px) {
  .custom-product-slider {
      margin-bottom: 30px;
      width: 100%;
      float: none;
  }
  body .mini_cart_item a.remove {
    position: absolute;
        right: 18px;
        top: 0;
  }
  body .woocommerce-mini-cart td.mini-cart-remove { background-color: hsl(0deg 0% 50% / 0%); }
}