/**
 * @file entities/webform.commerce-restore.css
 * The restoration donation form (commerce_restore), which renders in the hero
 * aside of an action page and, once that scrolls away, inside the shortcut
 * panel. Styled here rather than in the hero so it looks the same in both.
 *
 * The panel moves the price, the tax note, the quantity and the submit out of
 * the <form> into its own slot, so every rule scoped to the form also names
 * that slot, recognized by the price it holds. The .js- prefix there outranks
 * the module's flattening of the moved controls.
 *
 * Must stay UNLAYERED: it overrides unlayered module styles (webform_shortcut)
 * and unlayered rules win over any @layer.
 *
 * Attached by wwf_tw_form_webform_submission_commerce_restore_form_alter().
 */

/* Unit price: the card leads with what one unit costs, in the display face, and
   states the unit under it in small caps. */
.wwf-restore-price__amount {
  margin: 0;
  font-family: var(--wwf-font-display);
  font-size: 6rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--wwf-color-foreground);
}

.wwf-restore-price__unit {
  margin: 0.25rem 0 0;
  font-family: var(--wwf-font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.0625rem;
  text-transform: uppercase;
  color: var(--wwf-color-foreground);
}

/* Tax relief note: how much one unit lets the donor deduct, between the unit
   price it qualifies and the quantity, set as the adoption cards set theirs:
   an info icon and small copy on the palette's light tint. */
.wwf-restore-tax {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: var(--wwf-radius-md, 0.375rem);
  background: var(--wwf-color-light);
  color: var(--wwf-color-darkest);
  font-size: 0.8rem;
  line-height: 1.35;
}

.wwf-restore-tax > .inline-flex {
  flex: none;
  margin-top: 0.05rem;
}

.wwf-restore-tax__text {
  margin: 0;
}

/* The trigger reads as a link inside the sentence, not as a form button. */
.wwf-restore-tax__link {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--wwf-color-accent);
  text-decoration-thickness: 2px;
}

.wwf-restore-tax__link:hover {
  text-decoration: none;
}

/* Quantity row: label on the left and the stepper on the right, separated from
   the unit price by the design rule. On a screen too narrow for both the
   stepper drops under the label rather than running into it. */
:is(
  .webform-submission-commerce-restore-form,
  .js-webform-shortcut .webform-shortcut__moved:has(.wwf-restore-price)
)
  .js-form-item-quantity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1.625rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(
    in srgb,
    var(--wwf-color-dark) 50%,
    transparent
  );
}

:is(
  .webform-submission-commerce-restore-form,
  .js-webform-shortcut .webform-shortcut__moved:has(.wwf-restore-price)
)
  .js-form-item-quantity > label {
  font-family: var(--wwf-font-body);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

/* Restore-specific stepper overrides. The shared stepper stays untouched for
   its other consumers. */
:is(
  .webform-submission-commerce-restore-form,
  .js-webform-shortcut .webform-shortcut__moved:has(.wwf-restore-price)
)
  .tw-stepper__btn {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 9999px;
}

:is(
  .webform-submission-commerce-restore-form,
  .js-webform-shortcut .webform-shortcut__moved:has(.wwf-restore-price)
)
  .tw-stepper__btn[data-stepper-step="down"] {
  border: 0.1rem solid var(--wwf-color-surface-foreground);
  background: transparent;
  color: var(--wwf-color-surface-foreground);
}

:is(
  .webform-submission-commerce-restore-form,
  .js-webform-shortcut .webform-shortcut__moved:has(.wwf-restore-price)
)
  .tw-stepper__btn[data-stepper-step="up"] {
  border: 0.075rem solid var(--wwf-color-accent);
  background: var(--wwf-color-accent);
  color: var(--wwf-color-accent-foreground);
}

:is(
  .webform-submission-commerce-restore-form,
  .js-webform-shortcut .webform-shortcut__moved:has(.wwf-restore-price)
)
  input.tw-stepper {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--wwf-font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

/* On mobile the number sits right against its buttons: the room the field
   keeps around a digit is already the gap the design draws there. */
@media (max-width: 47.99rem) {
  :is(
    .webform-submission-commerce-restore-form,
    .js-webform-shortcut .webform-shortcut__moved:has(.wwf-restore-price)
  )
    .tw-stepper__wrap {
    gap: 0;
  }
}

/* Submit: the card's one action, so it takes the full width as an accent pill
   in the display face. The chevron is a child of the <button> the input
   suggestion swaps in (see input--submit--wwf-chevron.html.twig). */
:is(
  .webform-submission-commerce-restore-form,
  .js-webform-shortcut .webform-shortcut__moved:has(.wwf-restore-price)
)
  .form-actions {
  margin-top: 1.25rem;
}

:is(
  .webform-submission-commerce-restore-form,
  .js-webform-shortcut .webform-shortcut__moved:has(.wwf-restore-price)
)
  .form-actions .form-submit {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  border: 0;
  border-radius: 9999px;
  background-color: var(--wwf-color-accent);
  color: var(--wwf-color-accent-foreground);
  font-family: var(--wwf-font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transition: background-color 0.15s ease;
}

.wwf-chevron-submit__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

@media (hover: hover) {
  :is(
    .webform-submission-commerce-restore-form,
    .js-webform-shortcut .webform-shortcut__moved:has(.wwf-restore-price)
  )
    .form-actions .form-submit:hover {
    background-color: color-mix(
      in srgb,
      var(--wwf-color-accent) 92%,
      #000
    );
  }
}

/* The shortcut panel holding the form turns into the hero card it stands in
   for: the same surface and inset, its bottom corners rounded like the card's,
   and on tablet up the card's width, flush with the flag it hangs from. The
   inset reaches the block axis only once the panel opens, since the collapsed
   panel never shrinks below its padding. */
.webform-shortcut.js-webform-shortcut
  .webform-shortcut__panel:has(.wwf-restore-price) {
  --wfs-bg: var(--wwf-color-surface);
  --wfs-fg: var(--wwf-color-surface-foreground);
  padding-inline: 2rem;
  border-end-start-radius: 2rem;
  border-end-end-radius: 2rem;
}

.webform-shortcut.js-webform-shortcut.webform-shortcut--open
  .webform-shortcut__panel:has(.wwf-restore-price) {
  padding: 2rem;
}

/* The slot takes the whole panel and stacks the card's rows, where the
   module would line the moved controls up in one row. */
.webform-shortcut__panel:has(.wwf-restore-price) .webform-shortcut__moved {
  flex: 1;
  min-width: 0;
  display: block;
  gap: 0;
}

@media (min-width: 48rem) {
  .wwf-header .js-webform-shortcut.webform-shortcut--inline
    .webform-shortcut__panel:has(.wwf-restore-price) {
    left: auto;
    width: clamp(20rem, 26vw, 24rem);
  }
}