/* Juzo Dynamic Options Stylesheet */

/* Color variables from tailwind.config.ts */
:root {
  --primary-bg: #009999;
  --primary-bg-hover: #007b7f;
  --primary-bg-pressed: #00404b;
  --border-gray-300: #d1d5db;
  --background: #f9fafa;
  --foreground: #161718;
  --foreground-muted: #4d5053;
}

.page-wrapper {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Open Sans", Arial, sans-serif;
  padding: 0;
  margin: 0;
}

/* Base container */
.product-options-wrapper {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Open Sans", Arial, sans-serif;
}

/* Section headers - matching text-title-medium from Section.tsx */
.product-options-wrapper .dynamic-options_headline,
.product-options-wrapper h2.legend.dynamic-options_headline,
.product-options-wrapper .fieldset-section > h2,
.product-options-wrapper .fieldset-section > .legend {
  font-family: "Open Sans", "Open Sans Fallback", Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 400;
  color: rgb(77 80 83 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  margin: 0 0 var(--spacing-s-3, 12px) 0;
  padding: 0;
  background-color: transparent !important;
  background: transparent !important;
}

/* Fieldset sections */
.product-options-wrapper .fieldset-section {
  margin-bottom: 1.5rem;
  background-color: transparent !important;
  background: transparent !important;
}

/* Form list tables - target all option field column layouts dynamically */
.product-options-wrapper [class*="option-fields-cols"] {
  width: 100%;
  border-collapse: collapse;
}

.product-options-wrapper [class*="option-fields-cols"] tbody tr {
  border-bottom: 1px solid #f0f1f1; /* border-subtle */
}

.product-options-wrapper [class*="option-fields-cols"] td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  text-align: left;
}

/* Option labels - matching text-body-medium from form labels */
.product-options-wrapper [class*="option-fields-cols"] label,
.product-options-wrapper [class*="option-fields-cols"] td:first-child,
.product-options-wrapper [class*="option-fields-cols"] td {
  font-size: 16px;
  line-height: 120%; /* 19.2px */
  font-weight: 400;
  color: var(--colors-foreground-muted);
}

/* Checkbox styling - matching Checkbox.tsx exactly */
.product-options-wrapper input[type="checkbox"] {
  width: 1em;
  height: 1em;
  min-width: 1em;
  min-height: 1em;
  max-width: 1em;
  max-height: 1em;
  flex-shrink: 0;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background-color: var(--background);
  cursor: pointer;
  transition: all 200ms ease-in-out;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  box-sizing: content-box;
  /* Prevent double rendering - ensure no pseudo-elements */
  background-clip: padding-box;
}

/* Remove any pseudo-elements that might create double checkboxes */
.product-options-wrapper input[type="checkbox"]::before,
.product-options-wrapper input[type="checkbox"]::after {
  display: none !important;
  content: none !important;
}

/* Checkbox checked state */
.product-options-wrapper input[type="checkbox"]:checked {
  background-color: var(--colors-primary-bg-default, #009999);
  border-color: var(--colors-primary-bg-default, #009999);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Checkbox hover state */
.product-options-wrapper input[type="checkbox"]:hover:not(:disabled) {
  border-color: var(--primary-bg-hover);
}

.product-options-wrapper input[type="checkbox"]:checked:hover:not(:disabled) {
  background-color: var(--primary-bg-hover);
  border-color: var(--primary-bg-hover);
}

/* Checkbox active/pressed state */
.product-options-wrapper input[type="checkbox"]:active:not(:disabled) {
  background-color: var(--primary-bg-pressed);
  border-color: var(--primary-bg-pressed);
}

/* Checkbox focus state */
.product-options-wrapper input[type="checkbox"]:focus {
  outline: 2px solid var(--primary-bg);
  outline-offset: 2px;
}

.product-options-wrapper input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--primary-bg);
  outline-offset: 2px;
}

/* Checkbox disabled state */
.product-options-wrapper input[type="checkbox"]:disabled {
  background-color: #1118271f; /* background-disabled */
  border-color: #11182733; /* border-disabled */
  cursor: not-allowed;
  opacity: 0.6;
}

/* Radio button styling - matching TableCellSelect.tsx and general patterns */
.product-options-wrapper input[type="radio"] {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  border: 1px solid var(--border-gray-300);
  border-radius: 4px; /* rounded-xxs */
  background-color: var(--background);
  cursor: pointer;
  transition: all 200ms ease-in-out;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  box-sizing: content-box;
  padding: 8px;
  margin: -8px;
}

/* Radio button checked state - white inner circle */
.product-options-wrapper input[type="radio"]:checked {
  background-color: var(--primary-bg);
  border-color: var(--primary-bg);
  border: none;
  background-image: radial-gradient(circle, white 30%, transparent 30%);
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Radio button hover state */
.product-options-wrapper input[type="radio"]:hover:not(:disabled) {
  border-color: var(--primary-bg-hover);
}

.product-options-wrapper input[type="radio"]:checked:hover:not(:disabled) {
  background-color: var(--primary-bg-hover);
}

/* Radio button active/pressed state */
.product-options-wrapper input[type="radio"]:active:not(:disabled) {
  background-color: var(--primary-bg-pressed);
}

/* Radio button focus state */
.product-options-wrapper input[type="radio"]:focus {
  outline: 2px solid var(--primary-bg);
  outline-offset: 2px;
}

.product-options-wrapper input[type="radio"]:focus-visible {
  outline: 2px solid var(--primary-bg);
  outline-offset: 2px;
}

/* Radio button disabled state */
.product-options-wrapper input[type="radio"]:disabled {
  background-color: #1118271f; /* background-disabled */
  border-color: #11182733; /* border-disabled */
  cursor: not-allowed;
  opacity: 0.6;
}

/* Hidden sections */
.product-options-wrapper .ihidden {
  display: none !important;
}

/* Label text styling */
.product-options-wrapper label {
  color: var(--colors-foreground, #161718);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 19.2px */
  cursor: pointer;
}

/* Ensure labels next to inputs are properly spaced */
.product-options-wrapper label:has(input[type="checkbox"]),
.product-options-wrapper label:has(input[type="radio"]) {
  display: inline-flex;
  min-height: 44px;
  padding: var(--spacing-s-3, 12px) 0 var(--spacing-s-3, 12px)
    var(--spacing-s-3, 12px);
  align-items: center;
  gap: var(--spacing-s-2, 8px);
  border: none;
  background: transparent;
}

/* Prevent labels from creating visual artifacts around checkboxes */
.product-options-wrapper [class*="option-fields-cols"] label {
  padding-bottom: 10px;
}

/* Table cell styling for option fields */
.product-options-wrapper [class*="option-fields-cols"] td {
  color: var(--colors-foreground, #161718);
  font-size: 16px;
  line-height: 120%; /* 19.2px */
}

/* Align checkbox and radio inputs to the left in their table cells */
.product-options-wrapper
  [class*="option-fields-cols"]
  td:has(input[type="checkbox"]),
.product-options-wrapper
  [class*="option-fields-cols"]
  td:has(input[type="radio"]) {
  text-align: left;
  margin: 0;
  padding: 0;
}

/* Alternative selector for browsers that don't support :has() - align inputs to left */
.product-options-wrapper
  [class*="option-fields-cols"]
  td
  input[type="checkbox"],
.product-options-wrapper [class*="option-fields-cols"] td input[type="radio"] {
  vertical-align: middle;
}

/* Subsection headers - bold text labels within form sections */
.product-options-wrapper [class*="option-fields-cols"] td strong,
.product-options-wrapper [class*="option-fields-cols"] td b,
.product-options-wrapper [class*="option-fields-cols"] tr:first-child td {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
  background-color: transparent !important;
  background: transparent !important;
  padding: 0;
  margin-top: 4px;
  margin-bottom: 8px;
}

/* Add spacing after section headers - target first row after a section header */
.product-options-wrapper
  .fieldset-section
  + .fieldset-section
  [class*="option-fields-cols"]
  tbody
  tr:first-child
  td,
.product-options-wrapper
  .dynamic-options_headline
  + *
  [class*="option-fields-cols"]
  tbody
  tr:first-child
  td {
  padding-top: 4px;
  padding-bottom: 8px;
}

/* Additional spacing for form elements */
.product-options-wrapper .form-list {
  margin: 0;
  border-spacing: 0;
}
.product-options-wrapper_label {
  margin-top: 18px;
  margin-bottom: 8px;
}