:root {
  --turbo_bundles_primary_color: #2a2a2a;
  --turbo_bundles_secondary_color: #7e8494;
  --turbo_bundles_highlight_color: #ffc107;
  --turbo_bundles_selection_highlight_color: #ff6f00;
  --turbo_bundles_ribbon_background_color: #ff6f00;
  --turbo_bundles_ribbon_color: #ffffff;
  --turbo_bundles_ribbon-font-size: 14px;
  --turbo_bundles_variant_border_color: #e0e0e0;
  --turbo_bundles_variant_background_color: #ffffff;
  --turbo_bundles_variant_title_color: #333333;
  --turbo_bundles_variant_value_color: #555555;
  --turbo_bundles_variant_title-font-size: 16px;
  --turbo_bundles_variant_value-font-size: 14px;
  --turbo_bundles_variant_border-radius: 8px;
  --turbo_bundles_background_color: #fafafa;
  --turbo_bundles_item-font-size: 18px;
  --turbo_bundles_item-font-weight: 600;
  --turbo_bundles_description-font-size: 15px;
  --turbo_bundles_description-font-weight: 400;
  --turbo_bundles_price-font-size: 20px;
  --turbo_bundles_price-font-weight: 600;
  --turbo_bundles_font-family: 'Helvetica Neue', sans-serif;
  --turbo_bundles_border-radius: 8px;
  --turbo_bundles_border-width: 1px;
  --turbo_bundles_border-style: solid;
  --turbo_bundles_border-color: #e0e0e0;
  --turbo_bundles_selected-border-width: 2px;
  --turbo_bundles_selected-border-style: solid;
  --turbo_bundles_selected-border-color: #ff6f00;
  --turbo_bundles_selected-background-color: #ffffff;
  --turbo_bundles_box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  --turbo_bundles_min-height: auto;
  --turbo_bundles_item_padding: 16px;
}

.turbo-bundles-app {
  width: 100%;
}

.hidden-turbo-bundles-extension {
  display: none;
}

.turbo-bundles-wrapper {
  width: 100%;
  margin: 24px 0;
  line-height: 1.4;
}

.turbo-bundles-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.turbo-bundles-item {
  display: flex;
  border-width: var(--turbo_bundles_border-width);
  border-style: var(--turbo_bundles_border-style);
  border-color: var(--turbo_bundles_border-color);
  border-radius: var(--turbo_bundles_border-radius);
  background-color: var(--turbo_bundles_background_color);
  padding: var(--turbo_bundles_item_padding);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  font-family: var(--turbo_bundles_font-family);
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-height: var(--turbo_bundles_min-height);
  text-align: left;
}

.turbo-bundles-variant-line {
  display: flex;
  align-items: center;
}

.turbo-bundles-variant-number {
  margin-right: 8px;
}

.turbo-bundles-variant-selects {
  display: flex;
  gap: 8px;
}

.turbo-bundles-variant-select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--turbo_bundles_variant_border-radius);
  border: none;
  box-shadow: 0 0 0 1px var(--turbo_bundles_variant_border_color);
  color: var(--turbo_bundles_variant_value_color);
  font-size: var(--turbo_bundles_variant_value-font-size);
  height: auto;
  line-height: normal !important;
  margin: 2.5px 0 !important;
  min-width: 80px;
  max-width: 120px;
  min-height: auto;
  outline: none;
  padding: 8px 28px 8px 8px !important;
  text-overflow: ellipsis;
  width: auto;
  background-image: url("data:image/svg+xml;utf8,<svg width='10' height='4' viewBox='0 0 10 4' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M5 4L0.669872 0.25L9.33013 0.249999L5 4Z' fill='black'/></svg>");
  background-color: var(--turbo_bundles_variant_background_color);
  background-position: right 8px center !important;
  background-repeat: no-repeat !important;
  background-size: initial;
}

.turbo-bundles-variant-select option {
  white-space: pre-wrap;
  text-wrap-style: initial;
  word-break: break-all;
}

/* HTML: <div class="ribbon">Your text content</div> */
.turbo-bundles-ribbon {
  font-size: var(--turbo_bundles_ribbon-font-size);
  font-weight: var(--turbo_bundles_item-font-weight);
  font-family: var(--turbo_bundles_font-family);
  color: var(--turbo_bundles_ribbon_color);
}

.turbo-bundles-ribbon {
  --f: 12px;
  --r: 14px; /* control the cutout */
  position: absolute;
  right: 10px;
  top: -12px;
  padding-top: 6px;
  padding-bottom: 0px;
  padding-right: 10px;
  padding-left: 10px;
  border: solid #0000;
  border-width: 0 calc(2*var(--f)) var(--r) 0;
  background:
    radial-gradient(50% 100% at bottom,#0005 98%,#0000 101%)
    100% 0/calc(2*var(--f)) var(--f) no-repeat border-box;
  background-color: var(--turbo_bundles_ribbon_background_color);
  border-radius: calc(10px + var(--f)) var(--f) 0 0;
  clip-path: polygon(100% 0,0 0,0 calc(0% - var(--r)),calc(0% - var(--f)) 80%,calc(100% - 2*var(--f)) calc(100% - var(--r)),calc(100% - 2*var(--f)) var(--f),100% var(--f));
}

.turbo-bundles-ribbon-text {
  transform: rotate(-2deg);
}

.turbo-bundles-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

/* Increase border size and change border color when radio is checked */
.turbo-bundles-item.selected {
  border-width: var(--turbo_bundles_selected-border-width);
  border-style: var(--turbo_bundles_selected-border-style);
  border-color: var(--turbo_bundles_selected-border-color);
  background-color: var(--turbo_bundles_selected-background-color);
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.turbo-bundles-item.out-of-stock {
  opacity: 0.5;
  pointer-events: none;
}

.turbo-bundles-item.out-of-stock input[type="radio"] {
  disabled
  opacity: 0.5;
  pointer-events: none;
}

.turbo-bundles-item__details {
  display: flex;
  width: 100%;
  margin-right: 16px;
}

.turbo-bundles-variants-names, .turbo-bundles-variant-number {
  color: var(--turbo_bundles_variant_title_color);
  font-size: var(--turbo_bundles_variant_title-font-size);
}

.turbo-bundles-variants-block {
  display: none
}

.turbo-bundles-item.selected .turbo-bundles-variants-block {
  display: block !important;
}

/* Typography */
.turbo-bundles-item__details-title-block {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center; /* vertical alignment */
}

.turbo-bundles-item__details-title {
  font-weight: var(--turbo_bundles_item-font-weight);
  font-size: var(--turbo_bundles_item-font-size);
  color: var(--turbo_bundles_primary_color);
}

.turbo-bundles-item__details-subtitle:not(:empty) {
  margin-top: 4px;
}

.turbo-bundles-item__details-subtitle {
  font-weight: var(--turbo_bundles_description-font-weight);
  font-size: var(--turbo_bundles_description-font-size);
  color: var(--turbo_bundles_secondary_color);
}

/* Pricing block styling */
.turbo-bundles-item__details-pricing-block {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.turbo_bundles-item__details-discounted-price {
  font-size: var(--turbo_bundles_price-font-size);
  font-weight: var(--turbo_bundles_price-font-weight);
  color: var(--turbo_bundles_highlight_color);
}

.turbo_bundles-item__details-standard-price {
  font-size: var(--turbo_bundles_price-font-size);
  font-weight: var(--turbo_bundles_price-font-weight);
  color: var(--turbo_bundles_primary_color);
}

.turbo-bundles-item__details-discounted-price.active {
  color: var(--turbo_bundles_selection_highlight_color); /* Active state accent */
}

.turbo_bundles-item__details-compare_at-price {
  font-size: var(--turbo_bundles_description-font-size);
  font-weight: var(--turbo_bundles_description-font-weight);
  color: var(--turbo_bundles_secondary_color);
  text-decoration: line-through;
}

.turbo-bundles-item__badge {
  top: -25px;
  right: -15px;
  position: absolute;
  z-index: 1;
}

/* badge style */
.turbo-bundles-badge-wrapper {
  width: fit-content;
  padding: 2px 6px;
  border-radius: 6px;
  gap: 4px;
  perspective: 1000px;
  background-color: var(--turbo_bundles_badge_text_bg_color);
  display: inline-block;
}

.turbo-bundles-item__price-badge {
  color: var(--turbo_bundles_badge_text_color);
  font-size: var(--turbo_bundles_badge_text_size);
}

/* Flexbox container to align details and radio button inline */
.turbo-bundles-item__flex {
  display: flex;
  align-items: center; /* Vertically aligns items in the center */
  gap: 12px;
}

/* Bundle item custom image */
.turbo-bundles-item__custom-image {
  background-size: cover;
  background-position: center;
  display: flex;
  flex-shrink: 0;
  margin-right: 8px;
}

/* Custom Radio Button Wrapper */
.turbo-bundles-radio-button-wrapper {
  display: flex !important;
  position: relative;
  cursor: pointer;
  width: 30px; /* Fixed width */
  height: 20px; /* Fixed height */
  margin: 0 8px;
}

/* Hide the native radio button */
.turbo-bundles-radio-button {
  position: absolute;
  opacity: 0 !important;
  cursor: pointer;
  width: 30px;
  height: 20px;
}

/* Custom radio button appearance */
.turbo-bundles-radio-button-wrapper::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #999;
  background-color: #fff; /* Neutral background */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
  box-sizing: border-box;
}

.turbo-bundles-radio-button:hover~.turbo-bundles-radio-button-wrapper::before {
  box-shadow: 0 0 0 2px rgba(0,123,255,.1);
}

/* Active state for selected radio button */
.turbo-bundles-radio-button:checked ~ .turbo-bundles-radio-button-wrapper::before {
  background-color: var(--turbo_bundles_selection_highlight_color); /* Accent color when selected */
  border-color: var(--turbo_bundles_selection_highlight_color);
}

/* Circle inside the selected radio button */
.turbo-bundles-radio-button:checked ~ .turbo-bundles-radio-button-wrapper::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}

.color-picker-popover {
  padding: 10px;
}

.color-picker-input-wrapper {
  margin: 10px 5px;
  display: flex;
  justify-content: space-around;
}

.color-picker-color-value {
  width: 130px;
/*  flex: 2;*/
}

.color-picker-transparent-value {
  width: 90px;
}

.color-picker-color-block {
  height: 32px;
  width: 106px;
  border-radius: 5px;
  border: 1px lightgray solid;
  cursor: pointer;
}


.setupItem {
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
}

.setupItem:hover {
  background-color: #f7f7f7;
}

.setupItemExpanded:hover {
  background-color: inherit;
}

.completeButton {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #303030;
}

.itemContent {
  width: 100%;
  display: flex;
  gap: 8rem;
  justify-content: space-between;
}

/* These styles take into account the Shopify sidebar visibility & hides image based on window width */
@media (min-width: 48em) and (max-width: 61.871875em) {
  .itemImage {
    display: none;
  }
}

@media (max-width: 45.625em) {
  .itemImage {
    display: none;
  }
}