/* Extended Warranty Clickbump Styles */
.checkout-bumps {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: column;
  display: flex;
  margin-bottom: 1rem;
}

.upsell-limos {
  border-radius: var(--radius--cards, 8px);
  border: 1px solid #bbb;
  position: relative;
  overflow: hidden;
}

.upsell__header-left {
  background-color: var(--brand--color--surface, #fafcff);
  cursor: pointer;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: .75rem;
  display: flex;
}

.upsell__header-left.next-active {
  background-color: var(--brand--color--primary-light, #e0ebff);
}

.upsell__header-content {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  align-items: center;
  display: flex;
  position: relative;
}

.upsell-checkbox {
  background-color: #fff;
  border: 1px solid #9b9b9b;
  border-radius: 4px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
}

.upsell-checkbox.cc-limos {
  width: 1.625rem;
  height: 1.625rem;
}

.checkbox__icon {
  color: #000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  display: none;
}

.upsell__title {
  font-weight: 700;
}

.upsell__title.cc-limos {
  font-size: 1.125rem;
}

.upsell__body {
  padding: 1rem;
}

.upsell__body.cc-limos {
  background-color: #fff;
}

.upsell__content-limos {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.upsell-content__wrap {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  text-align: left;
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  display: flex;
}

.upsell-content__price {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  align-items: center;
  font-size: 1.375rem;
  font-weight: 700;
  display: flex;
}

.upsell-content__price-reg {
  font-weight: 400;
  text-decoration: line-through;
  color: #888;
}

.upsell-content__price-sale {
  color: #000;
}

.upsell__image {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  object-fit: contain;
  background-color: #f0f0f0;
  border-radius: 4px;
}

.upsell__image.cc-bump-limos {
  width: 135px;
  min-width: 135px;
  max-width: 135px;
  height: 135px;
  min-height: 135px;
  max-height: 135px;
}

/* List styles for warranty features */
.list-container.cc-2xs {
  font-size: 0.875rem;
}

.list.w-list-unstyled {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.list__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.list_icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: #0b975f;
}

.list_icon.cc-custom {
  color: #0b975f;
}

/* Responsive styles */
@media screen and (max-width: 767px) {
  .upsell-content__price {
    font-size: 1.25rem;
  }
  
  .upsell__image.cc-bump-limos {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
  }
  
  .upsell-limos {
    border-radius: .25rem;
  }
}

/* ==================================================================
   PRE-SELECTION SUMMARY BAR
   When ?pkg=X is in the URL, the inline pre-selector script (in
   buzzerbeater.html ~line 398) adds body.has-preselection. That hides
   the full bundle selector and shows a compact "Your Selection"
   summary + Change button — same pattern as NailScience checkout.
   ================================================================== */
.selection-summary {
  display: none;
  margin: 0 0 1rem;
  padding: 1rem 1.125rem;
  background: #faf6f0;            /* warm cream — matches PDP cc-card */
  border: 1px solid #ead9c3;      /* gold-cream border */
  border-radius: 12px;
}
body.has-preselection .selection-summary { display: block; }
body.has-preselection .form-section--first > .form-section__title,
body.has-preselection .form-section--first > .os-option { display: none !important; }

.selection-summary__badge {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #017186;                 /* BB --color-primary */
  margin-bottom: 0.375rem;
}
.selection-summary__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.selection-summary__text { flex: 1; min-width: 0; }
.selection-summary__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #020B1E;                 /* BB --color-text */
  line-height: 1.2;
}
.selection-summary__meta {
  font-size: 0.8125rem;
  color: #4A3340;
  margin-top: 0.1875rem;
}
.selection-summary__change {
  flex-shrink: 0;
  background: transparent;
  color: #017186;                 /* BB --color-primary */
  border: 1px solid #017186;
  border-radius: 8px;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.selection-summary__change:hover,
.selection-summary__change:focus {
  background: #017186;
  color: #fff;
  outline: none;
}