/**
 * Buy More, Save More - Mini Cart Promo Bar Styles
 * Tiered shipping discount progress bar for mini cart drawer
 * 
 * @see a:\cart\buy-more-save-more\buy-more-save-more.js
 */

/* ===== Container ===== */
.bmsm {
  padding: 12px 16px;
  background: transparent;
  margin: 8px 0;
  font-family: var(--galls-font-gt-america-standard, 'Lato', sans-serif);
}

/* ===== Header (Icon + Message) ===== */
.bmsm__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.bmsm__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2e7d32;
  flex-shrink: 0;
}

.bmsm__icon svg {
  width: 20px;
  height: 20px;
}

.bmsm__message {
  font-size: 13px;
  font-weight: 600;
  color: #2e7d32;
  line-height: 1.4;
  text-transform: uppercase;
}

.bmsm__message strong {
  font-weight: 700;
  color: #2e7d32;
}

/* ===== Progress Bar Container ===== */
.bmsm__bar-container {
  position: relative;
  padding-bottom: 20px; /* Space for checkpoint labels */
}

/* ===== Progress Bar ===== */
.bmsm__bar {
  position: relative;
  height: 12px;
  background-color: #e0e0e0;
  border-radius: 6px;
  overflow: visible;
  /* Mask to create 3 rounded segments with 6px gaps (approx 1.5% each) */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0%25' width='32.3%25' height='100%25' rx='6' fill='black'/%3E%3Crect x='33.8%25' width='32.3%25' height='100%25' rx='6' fill='black'/%3E%3Crect x='67.6%25' width='32.4%25' height='100%25' rx='6' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0%25' width='32.3%25' height='100%25' rx='6' fill='black'/%3E%3Crect x='33.8%25' width='32.3%25' height='100%25' rx='6' fill='black'/%3E%3Crect x='67.6%25' width='32.4%25' height='100%25' rx='6' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.bmsm__progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(to right, #23c229, #20ad27, #1c8623);
  border-radius: 6px;
  transition: width 0.8s ease-in-out;
  z-index: 1;
}

/* ===== Segments (Visual dividers) ===== */
.bmsm__segments {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 6px;
  z-index: 5;
  pointer-events: none;
}

.bmsm__segment {
  flex: 1;
  position: relative;
  border-radius: 6px;
}

/* White gap masks between segments - covers the green */
.bmsm__segment:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -6px;
  top: -2px;
  width: 6px;
  height: calc(100% + 4px);
  background-color: #fff;
  z-index: 10;
}

/* ===== Discount Labels (in middle of segments) ===== */
.bmsm__discount-labels {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  pointer-events: none;
}

.bmsm__discount-label {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.bmsm__discount-label--reached {
  color: #fff;
  font-weight: 700;
}

/* ===== Amount Markers (at vertical dividers) ===== */
.bmsm__amount-markers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  z-index: 3;
  pointer-events: none;
}

.bmsm__amount-marker {
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  padding-top: 4px;
  font-size: 10px;
  font-weight: 500;
  color: #888;
  white-space: nowrap;
}

.bmsm__amount-marker--reached {
  color: #2e7d32;
  font-weight: 600;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 480px) {
  .bmsm {
    padding: 10px 12px;
  }

  .bmsm__message {
    font-size: 12px;
  }

  .bmsm__icon svg {
    width: 18px;
    height: 18px;
  }

  .bmsm__marker-discount {
    font-size: 9px;
  }
}

/* ===== Legacy Overrides ===== */
/* Hide the old shipping threshold bar when new one is present */
#thresholdShippingBar .sidecart-shipping {
  display: none;
}

#thresholdShippingBar:has(.bmsm) .sidecart-shipping {
  display: none;
}

/* Ensure new bar shows in legacy container */
#thresholdShippingBar .bmsm {
  display: block;
}