:root {
  --border-color: #ccc;
  --badge-color: #444;
  --border-rounding: 4px;
  --badge-rounding: 4px;
  --font-size-s: 12px;
  --font-size-m: 14px;
  --font-size-l: 16px;
  --select-font-size: var(--font-size-m);
  --select-padding: 13px;
  --select-padding-right: 27px; /* must keep 27px on right to not overlap with arrow */
  --background-color: #fff;
  --text-color: #000;
  --active-selection-border-color: var(--border-color);
  --active-selection-text-color: var(--text-color);
  --border-width: 1px;
  --border-width-active: 2px;
}

.elb-container {
  margin: 20px 0;
}

.elb-container,
.elb-container::before,
.elb-container::after {
  box-sizing: border-box;
}

.elb-container select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: var(--select-padding);
  padding-right: var(--select-padding-right);
  font-size: var(--select-font-size);
  border-radius: var(--border-rounding);
  border: var(--border-width) solid var(--border-color);
  width: 100%;

  background-image: url('data:image/svg+xml;utf8,<svg fill="%23444" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: auto;
  background-color: var(--background-color);
  color: var(--text-color);

  /* alternative: arrow with line left of it 
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23444" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'),
  linear-gradient(to right, #ccc 1px, transparent 1px);
  background-repeat: no-repeat, no-repeat;
  background-position: right 5px center, right 27px top 50%;
  background-size: 24px 24px, 1px 60%;
  */
}

/* Single variant styles */
.elb-single-variant {
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-rounding);
  background-color: var(--background-color);
  padding: 8px;
  margin-bottom: 12px;
  width: 100%;
}

.elb-single-variant__content {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.elb-single-variant__image {
  /*flex-shrink: 0;*/
  border-radius: var(--border-rounding);
  overflow: hidden;
}

.elb-single-variant__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elb-single-variant__text {
  flex-grow: 1;
  color: var(--text-color);
}

.elb-single-variant__heading {
  font-size: var(--font-size-m);
  font-weight: 600;
  margin: 0 0 4px 0;
  color: var(--text-color);
}

.elb-single-variant__body {
  font-size: var(--font-size-m);
  color: var(--text-color);
  margin: 0;
}

.elb-single-variant__title {
  font-size: var(--font-size-m);
  margin-top: 8px;
}

/*
.elb-single-variant--sold-out {
  opacity: 0.7;
}
*/

.elb-container select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

.elb-container option:disabled {
  color: #999;
}

.elb-container label {
  display: block;
  font-size: var(--font-size-m);
  color: var(--text-color);
  margin-bottom: 6px;
}

.elb-badge {
  color: white;
  background-color: var(--badge-color);
  padding: 4px 13px 5px 13px;
  font-size: var(--font-size-s);
  margin-left: 8px;
  border-radius: var(--badge-rounding);
}

.elb-container .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Common List Styles */
.elb-list-input-list {
  margin-bottom: 1rem;
}

.elb-list-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.elb-list-option {
  position: relative;
}

/* Text specific styling - wider items */
.elb-list-option--text {
  /*flex: 1 0 auto; /* could be made optional */
}

.elb-list-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Base label styles */
.elb-list-label {
  display: block;
  cursor: pointer;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-rounding);
  transition: border-color 0.2s ease, background-color 0.2s ease;
  position: relative;
  background-color: var(--background-color);
}

/* Image specific label */
.elb-list-label--image {
  /* Image labels just need to display the image properly */
}

/* Text specific label */
.elb-list-label--text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  text-align: center;
}

/* Selected state using ::before pseudo-element */
.elb-list-input:checked + .elb-list-label::before {
  content: "";
  border-radius: inherit;
  opacity: 1;
  will-change: transform;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 0 2px var(--active-selection-border-color);
}

.elb-list-input:checked + .elb-list-label {
  border-color: var(--active-selection-border-color);
  color: var(--active-selection-text-color);
}
/*
.elb-list-input:focus + .elb-list-label {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
*/

.elb-list-input:disabled + .elb-list-label {
  cursor: not-allowed;
}

/* Image styles */
.elb-list-option-img {
  display: block;
  object-fit: cover;
  border-radius: var(--border-rounding);
}

/* Text content styles */
/*
.elb-list-option-content {
  font-size: var(--font-size-m);
  color: var(--text-color);
}*/

/* Sold out indicator - hidden by default */
.elb-list-option-sold-out {
  display: none;
}

/* Sold out state */
.elb-list-option--sold-out .elb-list-label {
  opacity: 0.7;
  position: relative;
}

/* Add diagonal line for sold out items */
.elb-list-option--sold-out .elb-list-label::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    var(--border-color) calc(50%),
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}

/* Legacy Image Input List styles - for backward compatibility */
.elb-image-input-list {
  margin-bottom: 1rem;
}

.elb-image-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.elb-image-option {
  position: relative;
}

.elb-image-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* label wraps the image */
.elb-image-label {
  display: block;
  cursor: pointer;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-rounding);
  transition: border-color 0.2s ease;
  position: relative;
}

/* Selected state using ::before pseudo-element */
.elb-image-input:checked + .elb-image-label::before {
  content: "";
  border-radius: inherit;
  opacity: 1;
  will-change: transform;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 4px 1px var(--active-selection-border-color);
}

/*
.elb-image-input:checked + .elb-image-label {
  border-color: var(--border-color);
}
  */
/*
.elb-image-input:focus + .elb-image-label {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}
*/

.elb-image-input:disabled + .elb-image-label {
  cursor: not-allowed;
}

.elb-image-option-img {
  display: block;
  object-fit: cover;
  border: none;
  border-radius: var(--border-rounding);
}

.elb-image-option-sold-out {
  /*
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 5px;
  font-size: var(--font-size-s);
  white-space: nowrap;
  */
  display: none; /* Hide sold out text overlay */
}

.elb-image-option--sold-out .elb-image-label {
  opacity: 0.7;
  position: relative;
}

/* Add diagonal line for sold out items */
.elb-image-option--sold-out .elb-image-label::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    var(--border-color) calc(50%),
    transparent calc(50% + 1px)
  );
  pointer-events: none;
}

/* Dropdown with Image */
.elb-dropdown-container {
  display: flex;
  align-items: center; /* Vertically center items */
  gap: 10px; /* Space between image and select */
  margin-bottom: 12px; /* Maintain original bottom margin */
}

.elb-dropdown-image-wrapper {
  flex-shrink: 0; /* Prevent image from shrinking */
  border-radius: var(--border-rounding);
  overflow: hidden; /* Ensure image respects border radius */
}

.elb-dropdown-image {
  display: block; /* Remove extra space below image */
  object-fit: cover;
}

.elb-dropdown-select {
  flex-grow: 1; /* Allow select to take remaining space */
  width: auto; /* Override default 100% width */
  margin-bottom: 0; /* Remove bottom margin as it's now on the container */
}