/*
 * Woo Custom Product Addons (WCPA) forms, restyled to match the POD Marketplace theme:
 * teal action color, 8px radius, 48px controls, round color swatches, button-style sizes.
 * Loaded only when "Match Woo Custom Product Addons forms to the theme" is on (Settings > POD Style).
 * Colors come from the theme's tokens, with the same values as fallbacks so it also works on other themes.
 */

.wcpa_form_outer {
  --podc-action: var(--action, #00806b);
  --podc-ink: var(--ink-900, #11161c);
  --podc-ink-soft: var(--ink-600, #3c4552);
  --podc-meta: var(--text-meta, #636b7a);
  --podc-border: var(--border-strong, #d7dbe3);
  --podc-focus: var(--focus-ring, #6d4aff);
  --podc-radius: var(--radius-control, 8px);
  --podc-error: var(--promo, #b3261e);
  margin: 0 0 20px;
  font-family: inherit;
  color: var(--podc-ink);
}
.wcpa_form_outer .wcpa_wrap,
.wcpa_form_outer .wcpa_section,
.wcpa_form_outer .wcpa_section_body { margin: 0; padding: 0; border: 0; }

/* One field per row, label above */
.wcpa_form_outer .wcpa_row { margin: 0 0 20px; padding: 0; }
.wcpa_form_outer .wcpa_field_wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Labels: bold name, then the chosen value in regular weight (" · Black") */
.wcpa_form_outer .wcpa_field_label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--podc-ink);
}
.wcpa_form_outer .wcpa_required_ast { color: var(--podc-meta); font-weight: 600; }
.wcpa_form_outer .wcpa_selected_items { display: inline; font-weight: 500; color: var(--podc-ink-soft); }
.wcpa_form_outer .wcpa_wrap .wcpa_field_label .wcpa_selected_items span { color: var(--podc-ink-soft); font-weight: 500; }
.wcpa_form_outer .wcpa_selected_items::before { content: "\00B7\00A0"; }
.wcpa_form_outer .wcpa_selected_items:empty { display: none; }
.wcpa_form_outer .wcpa_field_desc { margin: 0; font-size: 13px; color: var(--podc-meta); }

/* Select, text and number fields */
.wcpa_form_outer select.wcpa_field,
.wcpa_form_outer input.wcpa_field[type="text"],
.wcpa_form_outer input.wcpa_field[type="number"],
.wcpa_form_outer input.wcpa_field[type="email"],
.wcpa_form_outer textarea.wcpa_field {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--podc-border);
  border-radius: var(--podc-radius);
  background-color: #fff;
  color: var(--podc-ink);
  font-family: inherit;
  font-size: 15px;
  box-shadow: none;
}
.wcpa_form_outer textarea.wcpa_field { padding: 12px 14px; min-height: 96px; }
.wcpa_form_outer select.wcpa_field:focus-visible,
.wcpa_form_outer input.wcpa_field:focus-visible,
.wcpa_form_outer textarea.wcpa_field:focus-visible { outline: 3px solid var(--podc-focus); outline-offset: 2px; }

/* Groups of choices sit in a wrapping row */
.wcpa_form_outer .wcpa_group_field { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.wcpa_form_outer .wcpa_group_field.wcpa_disp_circle { gap: 9px; }

/* Hide the native radio inputs; the styled element after each one shows the state */
.wcpa_form_outer .wcpa_color_wrap { position: relative; }
.wcpa_form_outer .wcpa_color input[type="radio"],
.wcpa_form_outer .wcpa_color input[type="checkbox"],
.wcpa_form_outer .wcpa_radio input[type="radio"],
.wcpa_form_outer .wcpa_radio input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.wcpa_form_outer .wcpa_color label { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; cursor: pointer; }

/*
 * Color swatches and size buttons. The plugin draws its own outline and check mark for the chosen item and gives
 * each swatch an inline background, so these rules are written one step stronger than the plugin's and use
 * !important only where the plugin sets a value directly on the element.
 */
.wcpa_form_outer .wcpa_wrap .wcpa_color_wrap .wcpa_color_bg::after { display: none !important; }
.wcpa_form_outer .wcpa_wrap .wcpa_color_wrap input:checked ~ .wcpa_color_bg { outline: 0; }

/* Color swatches: round, light grey edge; chosen = teal ring with a white gap */
/* The plugin writes a swatch size (width and height) straight onto each swatch; a fixed 40px keeps them round. */
.wcpa_form_outer .wcpa_wrap .wcpa_disp_circle .wcpa_color_wrap { width: 40px !important; height: 40px !important; min-height: 40px; border-radius: 50%; }
.wcpa_form_outer .wcpa_wrap .wcpa_disp_circle .wcpa_color_wrap .wcpa_color_bg {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid var(--podc-border);
  border-radius: 50%;
  outline: 0;
  box-shadow: none;
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out;
}
.wcpa_form_outer .wcpa_wrap .wcpa_disp_circle .wcpa_color_wrap input:checked ~ .wcpa_color_bg {
  border: 2px solid var(--podc-action);
  box-shadow: inset 0 0 0 3px #fff;
}
.wcpa_form_outer .wcpa_wrap .wcpa_disp_circle .wcpa_color_wrap input:focus-visible ~ .wcpa_color_bg { outline: 3px solid var(--podc-focus); outline-offset: 2px; }
/* The chosen color's name is already in the heading, so the names under the swatches stay out of sight */
.wcpa_form_outer .wcpa_disp_circle .wcpa_color_label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sizes and other text choices: buttons, chosen = teal fill with white text */
.wcpa_form_outer .wcpa_wrap .wcpa_disp_squircle .wcpa_color_wrap { width: auto !important; min-width: 52px !important; height: 44px !important; min-height: 44px; border-radius: var(--podc-radius); }
.wcpa_form_outer .wcpa_wrap .wcpa_disp_squircle .wcpa_color_wrap .wcpa_color_bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--podc-border);
  border-radius: var(--podc-radius);
  outline: 0;
  box-shadow: none;
  background-color: #fff !important;
  color: var(--podc-ink) !important;
  transition: border-color 140ms ease-out, background-color 140ms ease-out, color 140ms ease-out;
}
.wcpa_form_outer .wcpa_wrap .wcpa_disp_squircle .wcpa_color_label,
.wcpa_form_outer .wcpa_wrap .wcpa_disp_squircle .wcpa_color_label span {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: inherit !important;
}
.wcpa_form_outer .wcpa_wrap .wcpa_disp_squircle .wcpa_color_wrap:hover .wcpa_color_bg { border-color: var(--podc-ink); }
.wcpa_form_outer .wcpa_wrap .wcpa_disp_squircle .wcpa_color_wrap input:checked ~ .wcpa_color_bg {
  border-color: var(--podc-action);
  background-color: var(--podc-action) !important;
  color: #fff !important;
}
.wcpa_form_outer .wcpa_wrap .wcpa_disp_squircle .wcpa_color_wrap input:focus-visible ~ .wcpa_color_bg { outline: 3px solid var(--podc-focus); outline-offset: 2px; }

/* Radio and checkbox lists (print side, extras) */
.wcpa_form_outer .wcpa_radio,
.wcpa_form_outer .wcpa_checkbox { position: relative; margin: 0; }
.wcpa_form_outer .wcpa_radio label,
.wcpa_form_outer .wcpa_checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-height: 44px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--podc-border);
  border-radius: var(--podc-radius);
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: var(--podc-ink);
  cursor: pointer;
  transition: border-color 140ms ease-out;
}
.wcpa_form_outer .wcpa_radio label:hover,
.wcpa_form_outer .wcpa_checkbox label:hover { border-color: var(--podc-ink); }
.wcpa_form_outer .wcpa_radio input,
.wcpa_form_outer .wcpa_checkbox input { inset: 0; }
/*
 * The plugin draws the radio dot and the check mark itself, with colors taken from its own settings; these rules
 * (one step stronger) put the theme's teal in their place.
 */
.wcpa_form_outer .wcpa_wrap .wcpa_radio .wcpa_radio_custom,
.wcpa_form_outer .wcpa_wrap .wcpa_checkbox .wcpa_checkbox_custom {
  position: relative;
  display: flex;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  box-sizing: border-box;
  border: 1.5px solid var(--podc-border);
  border-radius: 50%;
  background-color: #fff;
  box-shadow: none;
}
.wcpa_form_outer .wcpa_wrap .wcpa_checkbox .wcpa_checkbox_custom { border-radius: 4px; }
/* !important: the dot's color and size come from the plugin's settings and, on some sites, from extra CSS. */
.wcpa_form_outer .wcpa_wrap .wcpa_radio .wcpa_radio_custom::after { width: 8px !important; height: 8px !important; background-color: var(--podc-action) !important; }
.wcpa_form_outer .wcpa_wrap .wcpa_radio input:checked ~ .wcpa_radio_custom {
  border-color: var(--podc-action);
  background-color: #fff;
  box-shadow: none;
}
.wcpa_form_outer .wcpa_wrap .wcpa_checkbox input:checked ~ .wcpa_checkbox_custom {
  border-color: var(--podc-action);
  background-color: var(--podc-action);
}
.wcpa_form_outer .wcpa_wrap .wcpa_checkbox .wcpa_checkbox_custom::after { border-color: #fff; }
.wcpa_form_outer .wcpa_radio:has(input:checked) label,
.wcpa_form_outer .wcpa_checkbox:has(input:checked) label { border-color: var(--podc-action); }
.wcpa_form_outer .wcpa_wrap .wcpa_radio input:focus-visible ~ .wcpa_radio_custom,
.wcpa_form_outer .wcpa_wrap .wcpa_checkbox input:focus-visible ~ .wcpa_checkbox_custom { outline: 3px solid var(--podc-focus); outline-offset: 2px; }

/* Validation message and the price summary the plugin adds */
.wcpa_form_outer .wcpa_field_bottom { margin: 0; padding: 0; }
.wcpa_form_outer .wcpa_field_error { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--podc-error); }
.wcpa_form_outer .wcpa_field_error:empty { display: none; }
.wcpa_form_outer .wcpa_price_summary { margin: 0; font-size: 14px; color: var(--podc-ink-soft); }
.wcpa_form_outer .wcpa_tooltip_icon { color: var(--podc-meta); }

/*
 * Compact spacing. The plugin adds its own margins (15px under every field, 8px under every label, 5px above the
 * error line) on top of the theme's, so each row sat about 40px from the next; these rules, one step stronger,
 * bring it down to 16px.
 */
.wcpa_form_outer .wcpa_wrap .wcpa_row { margin: 0 0 16px; padding: 0; }
.wcpa_form_outer .wcpa_wrap .wcpa_row:last-child { margin-bottom: 0; }
.wcpa_form_outer .wcpa_wrap .wcpa_row .wcpa_field_wrap { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.wcpa_form_outer .wcpa_wrap .wcpa_row .wcpa_field_label { margin: 0; }
.wcpa_form_outer .wcpa_wrap .wcpa_row .wcpa_field_bottom { margin: 0; min-height: 0; }
.wcpa_form_outer .wcpa_wrap .wcpa_group_field { gap: 6px; }
.wcpa_form_outer .wcpa_wrap .wcpa_group_field.wcpa_disp_circle { gap: 8px; }
.wcpa_form_outer .wcpa_wrap select.wcpa_field,
.wcpa_form_outer .wcpa_wrap input.wcpa_field[type="text"] { min-height: 44px; }
.wcpa_form_outer .wcpa_wrap .wcpa_radio label,
.wcpa_form_outer .wcpa_wrap .wcpa_checkbox label { min-height: 40px; }

@media (prefers-reduced-motion: reduce) {
  .wcpa_form_outer * { transition: none !important; }
}