/* product.css - cleaned main styles + tested gallery CSS
   Replace your old product.css with this file (it includes the working gallery CSS). */

/* root palette */
:root{
  --um-bg:#0e1712;
  --um-panel:rgba(255,255,255,0.03);
  --um-accent:#2ea44f;
  --um-muted:#9fbf9d;
  --um-radius:10px;
}

/* base */
html,body{height:100%;margin:0;background:var(--um-bg);color:#e8f0ea;font-family: 'Roboto', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
.container-ed{max-width:1200px;margin:0 auto;padding:16px;}
.breadcrumbs{font-size:13px;color:var(--um-muted);margin-bottom:12px}

/* grid */
.um-prod-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:992px){ .um-prod-grid{grid-template-columns:55% 45%;gap:24px} }

/* left / right columns helpers */
.left-col{padding-right:12px}
.right-col{padding-left:12px}

/* product card (right) */
.um-prod-card{padding:8px}
.um-title{font-size:28px;font-weight:800;margin:0 0 6px;color:#fff}
.um-sub{color:var(--um-muted);margin-bottom:10px}
.um-rating-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.um-big{font-size:34px;font-weight:800;color:#fff}
.um-price-row{display:flex;align-items:baseline;gap:12px;margin:8px 0}
.um-price{font-size:28px;font-weight:800}
.um-mrp{font-size:14px;color:rgba(255,255,255,0.5);text-decoration:line-through}
.um-saving{background:rgba(46,164,79,0.1);color:var(--um-accent);padding:4px 8px;border-radius:999px;font-weight:700}

/* bullets */
.um-features{margin:12px 0;color:var(--um-muted);list-style:none;padding:0}
.um-features li{margin:6px 0;padding-left:18px;position:relative}
.um-features li:before{content:'✓';position:absolute;left:0;color:var(--um-accent);font-weight:700;font-size:13px}

/* CTA */
.um-cta{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.um-qty{display:flex;align-items:center;gap:6px}
.um-qty button{width:36px;height:36px;border-radius:8px;border:none;background:rgba(255,255,255,0.04);color:#fff}
.um-qty input{width:56px;text-align:center;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff;padding:6px}
.um-btn{padding:10px 16px;border-radius:10px;border:none;cursor:pointer}
.um-btn-primary{background:linear-gradient(180deg,var(--um-accent),#1f8a3a);color:#04200b;box-shadow:0 6px 18px rgba(46,164,79,0.12);font-weight:700}
.um-btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff}

/* trust row & pin */
.um-trust{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0;color:var(--um-muted)}
.um-trust .item{background:rgba(255,255,255,0.02);padding:8px;border-radius:8px;font-size:13px;display:flex;gap:8px;align-items:center}

/* banner & features */
.um-banner{width:100%;border-radius:10px;overflow:hidden;margin:18px 0}
.um-feature-block{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:768px){ .um-feature-block{grid-template-columns:1fr 1fr} }

/* specs */
.um-specs{background:var(--um-panel);padding:12px;border-radius:10px;margin-top:18px;color:var(--um-muted)}
.um-specs table{width:100%;color:var(--um-muted);border-collapse:collapse}
.um-specs td{padding:8px;border-bottom:1px solid rgba(255,255,255,0.02)}

/* reviews */
.um-reviews{margin-top:18px}
.um-review-card{background: rgba(255,255,255,0.03) !important;
  padding: 10px !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important; border: none !important;}

/* recommended */
.um-reco .swiper-slide{width:260px}
.um-reco .um-reco-card{background:var(--um-panel);padding:12px;border-radius:10px;text-align:center}

/* helper */
.small-muted{color:var(--um-muted);font-size:13px}
.um-toaster{position:fixed;right:18px;top:86px;background:var(--um-accent);color:#07210b;padding:8px 12px;border-radius:8px;display:none;z-index:3000}

/* sticky mobile CTA */
.um-sticky-cta{position:fixed;bottom:12px;left:12px;right:12px;background:rgba(4,10,8,0.96);padding:12px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:4000}
@media(min-width:992px){ .um-sticky-cta{display:none} }

/* ===========================
   WORKING TEST: Amazon-style gallery (exact classes)
   These selectors are independent (gallery uses test class names)
   =========================== */
.gallery { display:flex; gap:16px; align-items:flex-start; }
@media(max-width:991px){ .gallery { flex-direction:column; } }

.main-wrap { position:relative; flex:1; background:#0f1411; border-radius:8px; padding:12px; }
.main { position:relative; width:100%; aspect-ratio:1/1; background:#000; border-radius:8px; display:flex; align-items:center; justify-content:center; }
.main img { max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; }

.thumbs { display:flex; gap:10px; }
.thumbs img { width:72px; height:72px; object-fit:cover; border-radius:6px; border:2px solid transparent; cursor:pointer; background:#101312; }
.thumbs img.active { border-color:var(--um-accent); }

@media(min-width:992px){ .thumbs { flex-direction:column; width:72px } }
@media(max-width:991px){ .thumbs { flex-direction:row; overflow-x:auto; padding:8px 0; order:2 } .main-wrap { order:1 } .thumbs img { flex:0 0 auto } }

.lens { position:absolute; display:none; width:150px; height:150px; border:2px solid var(--um-accent); border-radius:6px; background-repeat:no-repeat; pointer-events:none; z-index:1200; background-color:rgba(255,255,255,0.02); box-shadow:0 8px 28px rgba(0,0,0,0.6); }

.zoom-pane { position:fixed; display:none; width:420px; height:420px; border-radius:8px; z-index:1300; border:1px solid rgba(255,255,255,0.06); background:#071008 no-repeat center/contain; box-shadow:0 18px 60px rgba(0,0,0,0.6); }
@media(max-width:1199px){ .zoom-pane{display:none!important;} }

#zoomModal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:2200; align-items:center; justify-content:center; padding:16px; }
#zoomModal img { max-width:95%; max-height:95%; object-fit:contain; border-radius:8px; }
#zoomClose { position:absolute; top:20px; right:20px; background:rgba(255,255,255,0.06); color:#fff; border:none; padding:8px 12px; border-radius:8px; cursor:pointer; }

/* safety: ensure gallery images not transformed by other CSS */
.gallery .main img { transform:none!important; }

/* end product.css */
/* ===== pincode row, extra bullets, description styles ===== */
.um-pin-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.um-pin-row input { width:160px; padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:#fff; }
.um-pin-row .um-btn { padding:8px 12px; border-radius:8px; }

/* extra bullets (matches um-features style) */
.um-extra-bullets { margin-top:10px; color:var(--um-muted); list-style:none; padding-left:0; }
.um-extra-bullets li { margin:6px 0; padding-left:20px; position:relative; }
.um-extra-bullets li:before { content:'✓'; position:absolute; left:0; color:var(--um-accent); font-weight:700; font-size:13px; }

/* description paragraph */
.um-desc h6 { margin:0 0 6px; color:#fff; }
.um-desc .small-muted { color:var(--um-muted); line-height:1.5; }
.review-modal {
  position: fixed; top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.7); display:none;
  align-items:center; justify-content:center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}
.review-modal-content {
  background:#fff; padding:22px; border-radius:12px;
  max-width:500px; width:92%; color:#000;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  position: relative;
  animation: slideUp 0.3s ease;
}
.review-title { margin-top:0; margin-bottom:12px; font-weight:700; font-size:20px; text-align:center; color:#222; }
.review-close {
  position:absolute; top:12px; right:16px;
  font-size:26px; cursor:pointer; color:#333; font-weight:bold;
}
.um-review-form textarea,
.um-review-form input[type="text"],
.um-review-form select,
.um-review-form input[type="file"] {
  width:100%; margin-bottom:12px; padding:10px;
  border:1px solid #ddd; border-radius:8px;
  font-size:14px;
}
.review-modal-img {
  max-width:90%; max-height:80vh;
  border-radius:10px; background:#fff; padding:10px;
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes slideUp { from{transform:translateY(20px);} to{transform:translateY(0);} }
/* === Review Modal Styling === */
#writeReviewModal .modal-content {
  border-radius: 14px;
  border: none;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  overflow: hidden;
  background: #1c1f24; /* dark theme base */
  color: #e8f0ea;
}

#writeReviewModal .modal-header {
  background: linear-gradient(135deg, #2e9d63, #1f6f47) !important;
  color: #fff;
  border-bottom: none;
  padding: 14px 20px;
}

#writeReviewModal .modal-title {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .3px;
}

#writeReviewModal .close {
  color: #fff;
  font-size: 1.4rem;
  opacity: 0.9; margin-top: none;
}

#writeReviewModal .modal-body {
  padding: 20px;
  background: #23272e;
}

#writeReviewModal .um-review-form label {
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 4px;
  color: #cfd8dc;
}

#writeReviewModal .um-review-form input[type="text"],
#writeReviewModal .um-review-form textarea,
#writeReviewModal .um-review-form input[type="file"] {
  background: #2b3038;
  border: 1px solid #394046;
  border-radius: 8px;
  padding: 10px;
  color: #e8f0ea;
  font-size: 0.95rem;
}

#writeReviewModal .um-review-form input[type="text"]::placeholder,
#writeReviewModal .um-review-form textarea::placeholder {
  color: #7a8891;
}

#writeReviewModal .modal-footer {
  border-top: none;
  background: #1c1f24 !important;
  padding: 14px 20px;
}

#submitReviewBtn {
  background: linear-gradient(135deg, #2e9d63, #1f6f47);
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 600;
  transition: all .2s ease;
}

#submitReviewBtn:hover {
  background: linear-gradient(135deg, #34b36f, #258c57);
  transform: translateY(-1px);
}

/* Star rating polish */
#writeReviewModal .star-rating label {
  font-size: 30px;
  transition: transform .15s;
}
#writeReviewModal .star-rating label:hover {
  transform: scale(1.2);
}

/* Entrance animation */
#writeReviewModal .modal-dialog {
  transform: translateY(30px);
  transition: transform .25s ease-out, opacity .25s ease-out;
}
#writeReviewModal.show .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}
/* Recommendation Carousel Styling */
.um-reco {
  margin-top: 24px;
}

.um-reco .um-reco-card {
  background: #1a1a1a; /* dark theme card */
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.um-reco .um-reco-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

/* Image block */
.um-reco .um-reco-card img {
  width: 100%;
  height: 160px; /* fixed height */
  object-fit: contain; /* keeps ratio without stretching */
  border-radius: 8px;
  background: #fff; /* fallback for transparent PNG */
  padding: 6px;
}

/* Product name */
.um-reco .um-reco-card .prod-title {
  font-size: 14px;
  font-weight: 500;
  color: #eee;
  margin-top: 10px;
  line-height: 1.3;
  min-height: 38px; /* keeps cards aligned */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
}

/* Price */
.um-reco .um-reco-card .prod-price {
  font-size: 15px;
  font-weight: 600;
  color: #4caf50;
  margin-top: 6px;
}
/* Rating stars */
.um-reco .star-row {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 6px;
}

.um-reco .star-row i {
  font-size: 13px;
  color: #f6c84c; /* gold */
}