/* ===== FONT IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Tiro+Bangla&display=swap');

/* ===== VARIABLES ===== */
:root {
  --bg: #f5f5f5;
  --white: #ffffff;
  --primary: #D12C62;
  --regular: #519E87;
  --bangla: 'Tiro Bangla', serif;
}

/* ===== GLOBAL ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  background: var(--bg);
}

/* ================================================= */
/* ================= MAIN LAYOUT =================== */
/* ================================================= */
.product-wrapper {
  width: 65%;
  margin: 80px auto;
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 1fr;
  gap: 20px;
}

/* ================= LEFT ================= */
.product-images {
  background: var(--white);
  padding: 15px;
}

.main-image {
  width: 100%;
  height: 400px;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: zoom-in;
}

/* ================= THUMB SLIDER ================= */
.thumbs-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
}

.thumbs-container {
  width: 300px;
  overflow: hidden;
}

.thumbs {
  display: flex;
  gap: 10px;
}

.thumbs img {
  width: 60px;
  border: 1px solid #ddd;
  cursor: pointer;
  flex-shrink: 0;
}

.thumb.active {
  border: 2px solid var(--regular);
}

.thumb-btn {
  width: 28px;
  height: 60px;
  background: #fff;
  border: 1px solid #ddd;
  cursor: pointer;
  font-size: 18px;
}
.size {
  display: flex;
  gap: 10px;
  margin: 15px 0;
}

.size .box {
  width: 60px;
  height: 50px;
  border: 1px solid #727272;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}
/* Countdown styling */
.countdown, #countdown { 
  margin-top: 5px; 
  color: red; 
  font-weight: 300;   /* <-- added */
  font-size: 14px;    /* optional: adjust size */
}
.size .box.active {
  border: 2px solid #2de71c; /* active হলে green border */



  /* Center text */
  display: flex;
  align-items: center;   /* vertical center */
  justify-content: center; /* horizontal center */
}

/* ================= MIDDLE ================= */
.product-details {
  background: var(--white);
  padding: 20px;
}

.product-details h1 {
  font-size: 20px;
  margin-bottom: 10px;
}

.rating {
  font-size: 14px;
  margin-bottom: 15px;
}

.price {
  font-size: 26px;
  color: var(--primary);
  font-weight: 700;
}

.old-price {
  margin-left: 10px;
  text-decoration: line-through;
  color: var(--regular);
}

.discount {
  margin-left: 10px;
  font-weight: 600;
}

/* ================= COLOR ================= */
.color .thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.color .thumbs img {
  height: 50px;
  object-fit: contain;
  background: #fff;
  padding: 2px;
}

/* ================= QUANTITY ================= */
.quantity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}

.quantity button {
  width: 35px;
  height: 35px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

.quantity span {
  min-width: 30px;
  text-align: center;
  font-weight: 600;
}

/* ================= TOTAL ================= */
.total-box {
  margin: 20px 0;
}

.total-box span {
  color: var(--regular);
  font-weight: 600;
}

/* ================= BUTTONS ================= */
.buttons {
  display: flex;
  gap: 15px;
}

.buy {
  flex: 1;
  padding: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
}

.cart {
  flex: 1;
  padding: 12px;
  background: #ffeadf;
  color: var(--primary);
  border: 1px solid var(--primary);
  cursor: pointer;
}

/* ================================================= */
/* ================= DELIVERY BOX ================== */
/* ================================================= */
.delivery-box {
  background: var(--white);
  padding: 22px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  font-size: 14px;
}

.delivery-box h3 {
  color: var(--primary);
  margin-bottom: 10px;
}

.delivery-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.delivery-item .highlight {
  color: var(--primary);
  font-weight: 600;
}

/* ================= PAYMENT METHODS ================= */
.payment-list {
  list-style: none;
  margin-top: 10px;
  padding: 0;
}

.payment-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed #ddd;
}

.payment-list li:last-child {
  border-bottom: none;
}

.payment-list .yes {
  color: var(--regular);
  font-weight: 600;
}

.payment-list .no {
  color: red;
  font-weight: 600;
}

/* ================= HR ================= */
hr {
  height: 1px;
  background: #ccc;
  border: none;
  margin: 15px 0;
}

/* ================================================= */
/* ================= DETAILS SECTION =============== */
/* ================================================= */
.details {
  width: 65%;
  margin: -70px auto 0;
  padding: 20px;
  background: var(--white);
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  font-family: var(--bangla);
  line-height: 1.8;
}

.details h1 {
  color: var(--primary);
  margin-bottom: 15px;
}

.details span {
  white-space: pre-line;
}

/* ================================================= */
/* ================= REVIEWS SECTION =============== */
/* ================================================= */
.reviews-section {
  width: 65%;
  margin: 5px auto;
  background: var(--white);
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  font-family: var(--bangla);
}

.reviews-section h2 {
  color: var(--primary);
  margin-bottom: 20px;
}

/* ===== Average Rating ===== */
.average-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  margin-bottom: 15px;
}

.average-rating .stars {
  color: gold;
}

/* ===== Rating Breakdown ===== */
.rating-breakdown div {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 14px;
}

.rating-breakdown .bar {
  flex: 1;
  height: 10px;
  background: #eee;
  border-radius: 5px;
  overflow: hidden;
}

.rating-breakdown .fill {
  height: 100%;
  background: gold;
}

/* ===== Individual Reviews ===== */
.product-reviews .review {
  border-top: 1px solid #eee;
  padding: 15px 0;
}

.product-reviews .review:first-child {
  border-top: none;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 5px;
}

.review-header .stars {
  color: gold;
}

.review-header .verified {
  color: green;
  font-weight: 600;
}

.review-body p {
  margin: 5px 0;
  font-family: var(--bangla);
}

/* ===== Review Images ===== */
.review-images {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.review-images img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 1px solid #ddd;
  cursor: pointer;
}

/* ================================================= */
/* ================= LIGHTBOX ====================== */
/* ================================================= */
#lightboxOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* ================================================= */
/* ================= RESPONSIVE ==================== */
/* ================================================= */
@media (max-width: 768px) {
  .product-wrapper {
    width: 100%;
    grid-template-columns: 1fr;
    margin-top: 50px;
  }
  .delivery-box{
    border-radius: 0;
  }

  .details,
  .reviews-section {
    width: 100%;
  }

  .buttons {
    flex-direction: column;
  }

  .main-image {
    height: 300px;
  }
  .reviews-section{
    margin-bottom: -10px;
  }

}