/**
 * Personalization field styling.
 *
 * Every rule is scoped under `#po-personalization` — an id, specificity 100,
 * which beats the class selectors themes reach for without a single
 * `!important`. Properties are declared rather than inherited for the same
 * reason: a theme's `input { }` rule is what makes this look broken on someone
 * else's site, and there is no way to know which theme that is.
 *
 * Colours derive from `currentColor` instead of naming any, so the block reads
 * correctly on a light theme, a dark theme, and the one the seller built
 * themselves. Nothing here paints a brand colour on someone's storefront.
 */

/* The margin is the fix for touching the add-to-cart button: the only thing
   between the two is a hidden input, which takes up no space.

   The mount point sits inside `.woocommerce-variation-add-to-cart`, which
   themes routinely turn into a flex row or column (Bricks child themes do
   both). As a flex item with no width it shrinks to the input's intrinsic
   size and lands wherever the container's alignment puts it — a 270px box
   floating mid-page on bigdripedu. Claim the full row, in every axis a parent
   could offer, so the block always reads as its own section. */
#po-personalization {
  box-sizing: border-box;
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 100%;
  align-self: stretch;
  justify-self: stretch;
  grid-column: 1 / -1;
  margin: 1.5rem 0;
  padding: 0;
  transform: none;
  text-align: left;
  text-indent: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: inherit;
}

#po-personalization .po-personalization__label {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  font: inherit;
  font-size: 16px;
  color: currentColor;
}

#po-personalization .po-personalization__toggle {
  box-sizing: border-box;
  display: inline-block;
  width: auto;
  margin: 0;
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  font: inherit;
  font-size: calc(1rem + 2px);
  font-weight: 600;
  line-height: 1.2;
  color: currentColor;
  background: transparent;
  border: 1.5px solid color-mix(in srgb, currentColor 60%, transparent);
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}

#po-personalization .po-personalization__toggle:hover,
#po-personalization .po-personalization__toggle:focus-visible {
  border-color: currentColor;
  outline: none;
}

#po-personalization .po-personalization__toggle--open {
  margin-bottom: 0.75rem;
}

#po-personalization .po-personalization__panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

#po-personalization .po-personalization__panel[hidden] {
  display: none;
}

#po-personalization .po-personalization__field {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 26rem;
  min-height: 48px;
  margin: 0;
  padding: 0.875rem 1rem;
  font: inherit;
  font-size: calc(1.0625rem + 2px);
  line-height: 1.4;
  color: currentColor;
  background: transparent;
  border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 10px;
  box-shadow: none;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

#po-personalization .po-personalization__field::placeholder {
  color: currentColor;
  opacity: 0.45;
}

#po-personalization .po-personalization__field:focus,
#po-personalization .po-personalization__field:focus-visible {
  border-color: color-mix(in srgb, currentColor 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}

/* Reserves its own height so the field below never jumps as it appears. */
#po-personalization .po-personalization__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.25rem;
  margin: 0;
  font-size: calc(0.8125rem + 2px);
  color: currentColor;
  opacity: 0;
  transition: opacity 120ms ease;
}

#po-personalization .po-personalization__status[data-busy="1"] {
  opacity: 0.7;
}

#po-personalization .po-personalization__spinner {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  flex: none;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: po-personalization-spin 700ms linear infinite;
}

/* Vestibular disorders: a spinning ring is exactly the motion to drop. */
@media (prefers-reduced-motion: reduce) {
  #po-personalization .po-personalization__spinner {
    animation-duration: 2400ms;
  }
}

@keyframes po-personalization-spin {
  to {
    transform: rotate(360deg);
  }
}

#po-personalization .po-personalization__preview {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  margin: 0;
  border-radius: 8px;
}

#po-personalization .po-personalization__preview[hidden] {
  display: none;
}

/* The gallery image being repainted, while its replacement decodes. */
.po-personalization-loading {
  opacity: 0.55;
  transition: opacity 120ms ease;
}