/* =============================================================
   CB Product Enhancer — Frontend Styles v1.0
   chefbakers.com
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=DM+Sans:wght@400;500;600&display=swap');

.cbpe-product-enhancer {
  font-family: 'DM Sans', sans-serif;
  color: #3D1A0E;
  margin-bottom: 16px;
}

/* ── 1. Social Proof ── */
.cbpe-social-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.cbpe-stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cbpe-star { font-size: 18px; line-height: 1; }
.cbpe-star.full  { color: #F5A623; }
.cbpe-star.half  { color: #F5A623; opacity: 0.6; }
.cbpe-star.empty { color: #D8C8B8; }

.cbpe-rating-num {
  font-size: 14px;
  font-weight: 600;
  color: #3D1A0E;
  margin-left: 2px;
}

.cbpe-review-count {
  font-size: 13px;
  color: #8A6A5A;
}

.cbpe-sold-badge {
  font-size: 12px;
  color: #7A5A40;
  padding: 2px 10px;
  background: #FFF0DC;
  border-radius: 20px;
  font-weight: 500;
  border: 1px solid #F5D9A8;
}

/* ── 2. Price Block ── */
.cbpe-price-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.cbpe-regular-price {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #B8A898;
  text-decoration: line-through;
  line-height: 1;
}

.cbpe-current-price {
  font-family: 'Playfair Display', serif;
  font-size: 38px;
  font-weight: 700;
  color: #3D1A0E;
  line-height: 1;
  transition: all 0.3s ease;
}

.cbpe-price-note {
  font-size: 13px;
  color: #8A6A5A;
  font-weight: 400;
}

/* ── 3. Savings Badge ── */
.cbpe-savings-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  background: #E8F5E9;
  color: #2E7D32;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  border: 1px solid #A5D6A7;
}

/* ── 4. Stock Bar ── */
.cbpe-stock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 14px;
}

.cbpe-stock-bar.in-stock {
  background: #F0FAF0;
  color: #2E7D32;
  border: 1px solid #C8E6C9;
}

.cbpe-stock-bar.out-of-stock {
  background: #FFF3F3;
  color: #C62828;
  border: 1px solid #FFCDD2;
}

.cbpe-stock-icon { font-size: 16px; }

/* ── 5. Trust Box ── */
.cbpe-trust-box {
  border: 1.5px solid #EAD8CC;
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: #FFFAF7;
}

.cbpe-trust-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #3D1A0E;
  margin-bottom: 12px;
}

.cbpe-trust-badge-icon { font-size: 18px; }

.cbpe-trust-badge-img {
  height: 24px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

.cbpe-trust-item-img {
  height: 20px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
}

.cbpe-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.cbpe-trust-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #5A3A2A;
}

.cbpe-trust-icon { font-size: 16px; flex-shrink: 0; }

/* ── 6. Flavour Carousel ── */
.cbpe-flavour-section {
  margin-bottom: 14px;
  width: 100%;
  position: relative;
}

.cbpe-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 700;
  color: #3D1A0E;
  margin: 0 0 10px;
  text-align: center;
}

.cbpe-flavour-carousel-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  width: 100%;
  /* Do NOT put overflow:hidden here — it clips the right arrow button */
}

.cbpe-flavour-carousel-track {
  flex: 1;
  min-width: 0;
  overflow: hidden; /* clips cards only, arrows remain visible */
}

.cbpe-flavour-carousel {
  display: flex;
  gap: 8px;
  will-change: transform;
  transition: transform 0.3s ease;
}

.cbpe-flavour-card {
  flex: 0 0 calc(25% - 6px);
  min-width: 80px;
  border: 2px solid #E8E0D8;
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.22s cubic-bezier(0.34,1.56,0.64,1);
  background: #FFFFFF;
}

.cbpe-flavour-card:hover {
  border-color: #F0B97D;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(232,130,58,0.15);
}

.cbpe-flavour-card.selected {
  border-color: #E8823A;
  border-width: 2px;
  background: #FFF8F0;
  box-shadow: 0 4px 14px rgba(232,130,58,0.2);
}

.cbpe-flavour-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.cbpe-flavour-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: #FFF0E0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.cbpe-flavour-name {
  font-size: 12px;
  font-weight: 600;
  color: #3D1A0E;
  margin-top: 6px;
  line-height: 1.2;
}

.cbpe-flavour-card.selected .cbpe-flavour-name {
  color: #C05010;
}

.cbpe-flavour-weight {
  font-size: 11px;
  color: #9A7A6A;
  margin-top: 2px;
}

.cbpe-carousel-btn {
  background: #FFFFFF;
  border: 2px solid #8A5A3A;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #8A5A3A;
  transition: all 0.18s ease;
  padding: 0;
  position: relative;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

.cbpe-carousel-btn:hover {
  background: #FFF0E0;
  border-color: #E8823A;
  color: #E8823A;
}

.cbpe-carousel-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* ── 7. Weight Selector ── */
.cbpe-weight-section {
  margin-bottom: 14px;
}

.cbpe-weight-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cbpe-weight-btn {
  padding: 8px 16px;
  border: 1.5px solid #E8D8CC;
  border-radius: 8px;
  background: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #5A3A2A;
  cursor: pointer;
  transition: all 0.18s ease;
}

.cbpe-weight-btn:hover {
  border-color: #F0B97D;
  background: #FFF8F0;
}

.cbpe-weight-btn.selected {
  border-color: #E8823A;
  border-width: 2px;
  background: #FFF0DC;
  color: #C05010;
  font-weight: 600;
}

/* ── 8. Egg Toggle ── */
.cbpe-egg-section {
  margin-bottom: 14px;
}

.cbpe-egg-options {
  display: flex;
  gap: 10px;
}

.cbpe-egg-btn {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid #E8D8CC;
  border-radius: 10px;
  background: #FFFFFF;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #5A3A2A;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.cbpe-egg-btn:hover {
  border-color: #F0B97D;
  background: #FFF8F0;
}

.cbpe-egg-btn.selected {
  border-color: #E8823A;
  border-width: 2px;
  background: #FFF0DC;
  color: #C05010;
  font-weight: 600;
}

.cbpe-egg-extra {
  font-size: 12px;
  opacity: 0.8;
}

/* ── 9. Delivery Footer ── */
.cbpe-delivery-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  background: #FFFAF5;
  border: 1px dashed #EAD8CC;
  border-radius: 12px;
  margin-bottom: 14px;
  font-size: 13px;
}

.cbpe-earliest-delivery,
.cbpe-urgency-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5A3A2A;
}

.cbpe-delivery-icon,
.cbpe-timer-icon { font-size: 15px; }

#cbpe-countdown {
  color: #C05010;
  font-variant-numeric: tabular-nums;
}

/* ── Price change animation ── */
@keyframes cbpe-price-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); color: #E8823A; }
  100% { transform: scale(1); }
}

.cbpe-price-pop {
  animation: cbpe-price-pop 0.35s ease;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .cbpe-trust-grid { grid-template-columns: 1fr; }
  .cbpe-flavour-card { flex: 0 0 calc(33.333% - 6px); }
  .cbpe-current-price { font-size: 30px; }
  .cbpe-delivery-footer { flex-direction: column; align-items: flex-start; }
}