/* Overlay */
.quickview-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.80);
  z-index: 99998;
  justify-content: center;
  align-items: center;
  padding: 20px;
  overflow-y: auto;
}
.quickview-overlay.active { display: flex; }

/* Modal Box */
.quickview-box {
  background: #fff;
  border-radius: 16px;
  max-width: 1000px;
  width: 95%;
  max-height: 95vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scrollbar */
.quickview-box::-webkit-scrollbar { width: 6px; }
.quickview-box::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.quickview-box::-webkit-scrollbar-thumb { background: #aaa; border-radius: 10px; }
.quickview-box::-webkit-scrollbar-thumb:hover { background: #888; }

/* Close Button */
.close-btn {
  position: absolute;
  top: 15px; right: 15px;
  font-size: 30px;
  cursor: pointer;
  color: #333;
  z-index: 10;
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  line-height: 1;
}
.close-btn:hover {
  background: #5c45bf;
  color: white;
  transform: rotate(90deg);
}

/* Inner padding */
.quickview-box .types-con {
  padding: 40px 30px;
}

/* Rating */
.quickview-box .rating { margin-bottom: 10px; }
.quickview-box .rating i { color: #ffc107; font-size: 15px; }
.quickview-box .rating span { margin-left: 6px; color: #666; font-weight: 500; font-size: 14px; }

/* Product name */
.quickview-box .types_content h3 { font-size: 26px; font-weight: 700; margin-bottom: 8px; color: #222; }

/* Price range */
.quickview-box .price { font-size: 28px; font-weight: 700; color: #5c45bf; display: block; margin-bottom: 10px; }

/* Description */
.quickview-box .text-size-16 { color: #666; line-height: 1.6; margin-bottom: 12px; font-size: 14px; }

/* Category badge */
.qv-category-row { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 14px; }
.qv-category-label { font-weight: 600; color: #555; }
.qv-category-value { background: #f0ecfc; color: #5c45bf; font-weight: 600; padding: 3px 12px; border-radius: 20px; font-size: 13px; }

/* Brand selector */
.variations-section { margin: 12px 0; }
.brand-selector { border-bottom: 2px solid #e8e6f0; padding-bottom: 12px; margin-bottom: 12px; }
.brand-label { font-size: 14px; font-weight: 600; color: #333; display: block; margin-bottom: 8px; }
.brand-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.brand-tab-btn {
    padding: 3px 12px;        
    border: 1px solid #5c45bf; 
    background: #fff;
    color: #5c45bf;
    font-weight: 400;          
    font-size: 11px;           
    border-radius: 15px;       
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.brand-tab-btn:hover { background: #f0ecfc; }
.brand-tab-btn.active { background: #5c45bf; color: #fff; box-shadow: 0 3px 10px rgba(92,69,191,0.3); }

/* Variation table */
.variations-table { width: 100%; border-collapse: collapse; margin: 0; }
.variations-table thead { background: #5c45bf; }
.variations-table th {
  padding: 12px 15px; font-weight: 600; font-size: 14px; color: #fff;
  text-align: left; border-right: 1px solid rgba(255,255,255,0.2);
}
.variations-table th:last-child { border-right: none; }
.variations-table td { padding: 12px; border-bottom: 1px solid #e8e6e9; background: #fff; vertical-align: middle; }
.variations-table tbody tr:last-child td { border-bottom: none; }
.shipment-cell { font-weight: 600; color: #5c45bf; width: 30%; font-size: 15px; vertical-align: middle; }

.quantity-cell {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}
.quantity-btn {
  padding: 5px 12px !important;
  margin: 0 !important;
  border: 2px solid #5c45bf !important;
  background: #fff !important;
  color: #5c45bf !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  min-width: 80px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
}
.quantity-btn:hover { background: #f7f5fc !important; transform: translateY(-2px) !important; }
.quantity-btn.active { background: #5c45bf !important; color: #fff !important; border-color: #5c45bf !important; box-shadow: 0 3px 10px rgba(92,69,191,0.3) !important; }

.qv-per-pill-row { text-align: right; font-weight: 600; font-size: 15px; color: #000; margin-bottom: 10px; min-height: 18px; }
.per-pill-price { display: none !important; }

.qv-total-price { font-size: 22px; font-weight: 700; color: #5c45bf; min-width: 90px; text-align: center; }

.qv-terms-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; color: #555; }
.qv-terms-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #5c45bf; cursor: pointer; flex-shrink: 0; }
.qv-terms-row label { margin: 0; cursor: pointer; }
.qv-terms-row a { color: #5c45bf; font-weight: 600; text-decoration: none; }
.qv-terms-row a:hover { text-decoration: underline; }

.qv-buy-now-btn {
  width: 100%; padding: 12px; background: #222; color: #fff;
  border: none; border-radius: 35px; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: all 0.3s ease; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.qv-buy-now-btn:hover:not(:disabled) { background: #333; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.qv-buy-now-btn:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 991px) {
  .quickview-box .types-con { padding: 30px 20px; }
  .quickview-box .types_content { padding: 15px 0 0 0; }
}
@media (max-width: 767px) {
  .quickview-box .types-con { padding: 20px 15px; }
  .quickview-box .single-product-image img { max-height: 250px; }
  .quickview-box .types_content h3 { font-size: 20px; }
  .quickview-box .price { font-size: 22px; }
  .qv-buy-now-btn { font-size: 14px; padding: 10px; }
  .variations-table th, .variations-table td { padding: 10px; font-size: 12px; }
  .quantity-btn { min-width: 70px !important; font-size: 11px !important; padding: 6px 10px !important; }
  .shipment-cell { width: 35%; font-size: 13px; }
  .brand-tab-btn { padding: 3px 10px; font-size: 10px; }
}



#quickViewModal .single-product-image,
#quickViewModal .single-product-image figure,
#quickViewModal .auction-img {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}
#quickViewModal .single-product-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
}
#quickViewModal .single-product-image img {
  width: 100% !important;
  max-width: 380px !important;
  height: auto !important;
  max-height: 380px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  background: transparent !important;
}

#quickViewModal .quatity_button_wrapper,
#quickViewModal .types_content .quatity_button_wrapper {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding-top: 0 !important;
  border-top: none !important;
}
@media screen and (max-width: 767px) {
  #quickViewModal .quatity_button_wrapper {
    align-self: center;
    align-items: center;
    justify-content: center;
  }
}
#quickViewModal .quantity-field {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #8d8e8f !important;
  border-radius: 35px !important;
  overflow: hidden !important;
}
#quickViewModal .quantity-field button {
  width: 42px !important; height: 42px !important;
  cursor: pointer !important; font-size: 18px !important;
}
#quickViewModal .quantity-field button:hover 
#quickViewModal .quantity-field .number {
  width: 50px !important; text-align: center !important;
  font-weight: 600 !important; font-size: 15px !important;
  border-right: 1px solid #8d8e8f !important;
  border-left: 1px solid #8d8e8f !important;
  padding: 10px 0 !important;
}

#quickViewModal .types_content {
  padding: 10px 0 10px 20px !important;
}