.optionflex-product-options {
  margin-block: 20px;
  padding: 18px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  color: inherit;
  background: rgba(255, 255, 255, 0.72);
}

.optionflex-heading { margin: 0 0 16px; font: inherit; font-size: 18px; font-weight: 700; }
.optionflex-fields { display: grid; gap: 16px; }
.optionflex-field { display: grid; gap: 7px; }
.optionflex-field[hidden] { display: none !important; }
.optionflex-label { font-size: 14px; font-weight: 650; }
.optionflex-label span { color: #d72c0d; }
.optionflex-field input[type="text"],
.optionflex-field input[type="number"],
.optionflex-field select {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 7px;
  color: inherit;
  background: #fff;
  font: inherit;
}
.optionflex-field input[type="text"]:focus,
.optionflex-field input[type="number"]:focus,
.optionflex-field select:focus {
  border-color: #5c3cc4;
  outline: none;
  box-shadow: 0 0 0 1px #5c3cc4;
}
.optionflex-field input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0; }
.optionflex-text-input-wrapper { position: relative; }
.optionflex-text-input-wrapper input[type="text"] { padding-right: 58px; }
.optionflex-text-counter { position: absolute; top: 50%; right: 12px; color: #6d7175; font-size: 12px; line-height: 1; pointer-events: none; transform: translateY(-50%); }
.optionflex-radio-group { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.optionflex-radio-option { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; font-size: 14px; }
.optionflex-radio-option input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: #5c3cc4; cursor: pointer; }
.optionflex-radio-option span { line-height: 1.4; }
.optionflex-radio-group:has([aria-invalid="true"]) { padding: 8px; border: 1px solid #d72c0d; border-radius: 7px; }
.optionflex-image-select { position: relative; }
.optionflex-image-select-trigger { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border: 1px solid rgba(0,0,0,.28); border-radius: 7px; color: inherit; background: #fff; font: inherit; cursor: pointer; text-align: left; }
.optionflex-image-select-trigger>span:first-child { min-width: 0; display: flex; align-items: center; gap: 9px; }
.optionflex-image-select-trigger img { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; }
.optionflex-image-select-arrow { width: 8px; height: 8px; flex: none; margin: -4px 2px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform .2s ease; transform: rotate(45deg); transform-origin: center; }
.optionflex-image-select-trigger[aria-expanded="true"] .optionflex-image-select-arrow { margin-top: 4px; transform: rotate(225deg); }
.optionflex-image-select-clear { position: absolute; z-index: 2; top: 50%; right: 10px; width: 24px; height: 24px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; border-radius: 50%; color: #202223; background: #f1f2f3; font-size: 20px; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.optionflex-image-select-clear:hover { color: #111213; background: #e1e3e5; }
.optionflex-image-select-clear[hidden] { display: none; }
.optionflex-image-select-arrow[hidden] { display: none; }
.optionflex-image-select.has-value .optionflex-image-select-trigger>span:first-child { padding-right: 32px; }
.optionflex-image-select-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 280px; padding: 6px; border: 1px solid rgba(0,0,0,.16); border-radius: 9px; background: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.14); overflow: auto; }
.optionflex-image-select-option { width: 100%; min-height: 44px; display: grid; grid-template-columns: 36px minmax(0,1fr) 18px; align-items: center; gap: 8px; margin: 0; padding: 4px 8px; border: 0; border-radius: 7px; color: inherit; background: transparent; font: inherit; cursor: pointer; text-align: left; }
.optionflex-image-select-option:hover { background: #f6f6f7; }
.optionflex-image-select-option img { width: 36px; height: 36px; border-radius: 5px; object-fit: cover; background: #f4f4f4; }
.optionflex-image-select-option.is-selected { color: #4f2dbd; background: #f1edff; }
.optionflex-image-select-option.is-selected .optionflex-image-select-check::after { content: '✓'; font-weight: 700; }
.optionflex-image-select:has([aria-invalid="true"]) .optionflex-image-select-trigger { border-color: #d72c0d; box-shadow: 0 0 0 1px #d72c0d; }
.optionflex-text-select-option { min-height: 38px; grid-template-columns: minmax(0,1fr) 18px; padding: 7px 10px; }
.optionflex-text-select-option>span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.optionflex-field [aria-invalid="true"] { border-color: #d72c0d; box-shadow: 0 0 0 1px #d72c0d; }
.optionflex-field-error,.optionflex-error { margin: 0; color: #b42318; font-size: 13px; }
.optionflex-loading { color: rgba(0, 0, 0, 0.6); font-size: 14px; }
.optionflex-length-hint {
  margin: 6px 0 0;
  color: #6d7175;
  font-size: 12px;
  line-height: 1.4;
}