.atom-discount-offer-block {
  max-width: 44rem;
}

.atom-bmsm-options-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.atom-bmsm-label-container {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 5px;
}

.atom-bmsm-tier {
  position: relative;
  /* ensure badges can be positioned absolutely */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 15px;
  /* consistent padding */
  border-radius: 5px;
  border: 1px solid #ccc;
  /* base border */
  background-color: var(--atom-default-tier-color);
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover state: stays 1px border, but changes color */
.atom-bmsm-tier:hover {
  border-color: #aaa;
}

/* Selected state: keep the same padding & border thickness,
   but add a box-shadow or outline for emphasis.
*/
.atom-bmsm-tier.selected {
  border-color: var(--atom-selected-tier-border-color, #000);
  box-shadow: 0 0 0 2px var(--atom-selected-tier-border-color, #000);
  background-color: var(--atom-selected-tier-color, #f05050);
  transition: all 0.3s ease;
}

.atom-bmsm-tier input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.atom-variant-select {
  /* Remove default arrow in some browsers */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Set box-sizing for consistent sizing calculations */
  box-sizing: border-box;

  /* Basic layout styles */
  width: 100%;
  max-width: 250px;
  padding: 0.75rem 3rem 0.75rem 1rem;
  margin: 0.5rem 0;

  /* Typography */
  font-size: 1.5rem !important;
  font-family: inherit;
  line-height: 1.2rem;

  /* Border & background */
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='16' height='10' viewBox='0 0 16 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23999' d='M1.41.86L8 7.44l6.59-6.58L16 2.27 8 10 .01 2.27z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 10px;

  /* Use a consistent outline style when focused */
  outline: none;
}

.atom-variant-dropdown {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0px;
}

.atom-tier-savings {
  font-weight: 400;
}

.atom-variant-select:focus {
  border-color: #666;
}

.atom-variant-options {
  margin-left: 33px;
}

.atom-tier-title {
  font-weight: semibold;
  margin-right: 10px;
}

.atom-tier-subtitle {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  background-color: #eee;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 4px;
  text-transform: uppercase;
}
.atom-bmsm-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
}

.atom-bmsm-label-text {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
}

.atom-price-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* Align prices to the right */
  font-size: 14px;
  margin-top: 5px;
  margin-left: 15px;
}

.atom-bmsm-label-badge-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.atom-original-price {
  text-decoration: line-through;
  color: #999;
}

.atom-discounted-price {
  color: #28a745;
  font-weight: bold;
}

/* Badges */
.atom-best-savings-badge,
.atom-bmsm-badge-top-right {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 8px;
  font-weight: bold;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  text-transform: uppercase;
}

.atom-best-savings-badge {
  outline: none;
}

.atom-bmsm-badge-top-right {
  position: absolute;
  top: -15px;
  right: 20px;
}

/* Button styling */
.atom-discount-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.atom-discount-button:hover {
  filter: brightness(90%);
}

.atom-discount-button.loading {
  pointer-events: none;
  opacity: 0.8;
}

.atom-discount-button.loading .button-content {
  visibility: hidden;
}

.atom-spinner-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  display: none;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.5);
  border-top-color: white;
  border-radius: 50%;
  animation: atom-spin 0.8s linear infinite;
  pointer-events: none;
}

.atom-discount-button.loading .atom-spinner-icon {
  display: block;
}

.atom-bmsm-radio {
  display: inline-block !important;
  min-width: 20px;
  min-height: 20px;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  box-sizing: content-box;
  position: relative;
  flex-shrink: 0;
  margin-right: 10px;
  background-color: white;
  padding: 0;
}

.atom-bmsm-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--atom-selected-tier-border-color, #000);
  opacity: 0;
  transition: opacity 0.3s;
}

input[type="radio"]:checked + label .atom-bmsm-radio {
  border-color: #f05050;
  box-shadow: 0 0 0 2px #f050504d inset;
}

input[type="radio"]:checked + label .atom-bmsm-radio::after {
  opacity: 1;
}
/* Spinner on the button */
.atom-discount-button.atom-spinner {
  position: relative;
  pointer-events: none;
  /* Prevent multiple clicks */
  opacity: 0.8;
  /* Slight dimming to show it's busy */
}

/* We use a pseudo-element for the spinner graphic */
.atom-discount-button.atom-spinner::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  /* Use the button’s text color for the ring */
  border-top-color: transparent;
  /* Make top transparent for the spin illusion */
  border-radius: 50%;
  animation: atom-spin 0.8s linear infinite;
  margin-left: 0.5em;
  /* Space between button text and spinner ring */
  vertical-align: middle;
}

/* Keyframe for the spinner rotation */
@keyframes atom-spin {
  to {
    transform: rotate(360deg);
  }
}