/* ============================================================
   CHECKOUT STEPS — акордеон кроків оформлення
   1. Контактні дані · 2. Доставка · 3. Оплата
   ============================================================ */

.checkout__steps {
  background: var(--color-payment-bg);
  border-radius: var(--radius-m);
  padding: clamp(1.25rem, 1rem + 1.25vw, 2rem)
    clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

.checkout-step {
  padding-block: clamp(1.125rem, 0.9rem + 1.125vw, 1.75rem);
}

.checkout-step:first-child {
  padding-top: 0;
}

.checkout-step:last-child {
  padding-bottom: 0;
}

.checkout-step + .checkout-step {
  border-top: 1px solid var(--color-border);
}

/* ---------- Header ---------- */
.checkout-step__heading {
  margin: 0;
  font: inherit;
}

.checkout-step__toggle {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
  width: 100%;
  text-align: left;
  color: var(--color-primary);
}

.checkout-step__status {
  flex-shrink: 0;
  display: none;
  width: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  height: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  color: var(--color-payments);
}

.checkout-step.is-done .checkout-step__status {
  display: block;
}

.checkout-step__name {
  flex-shrink: 0;
  font-family: var(--font-body-bold);
  font-size: clamp(1rem, 0.925rem + 0.375vw, 1.375rem);
  line-height: clamp(1.375rem, 1.275rem + 0.5vw, 1.875rem);
}

.checkout-step__summary {
  display: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-body-regular);
  font-size: clamp(0.8125rem, 0.7625rem + 0.25vw, 1.0625rem);
  line-height: clamp(1.125rem, 1.0625rem + 0.3125vw, 1.4375rem);
  color: var(--color-primary-soft);
}

.checkout-step.is-done:not(.is-open) .checkout-step__summary {
  display: block;
}

.checkout-step__chevron {
  flex-shrink: 0;
  width: 0.875rem;
  height: auto;
  margin-left: auto;
  transition: transform 0.25s ease;
}

.checkout-step.is-open .checkout-step__chevron {
  transform: rotate(180deg);
}

/* ---------- Body ---------- */
.checkout-step__body {
  padding-top: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
}

.checkout-step__form {
  display: grid;
  gap: var(--space-s);
}

/* ---------- Field (floating label) ---------- */
.field {
  position: relative;
  display: block;
}

.field__input {
  width: 100%;
  padding: 1.6rem 1.1rem 0.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-s);
  background: var(--color-bg);
  font-family: var(--font-body-semibold);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--color-primary);
  transition: border-color 0.2s ease;
}

.field__input::placeholder {
  color: transparent;
}

.field__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.field__label {
  position: absolute;
  left: 1.1rem;
  top: 1.15rem;
  font-family: var(--font-body-regular);
  font-size: 1rem;
  color: var(--color-primary-soft);
  pointer-events: none;
  transition:
    transform 0.15s ease,
    font-size 0.15s ease;
}

.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  transform: translateY(-0.72rem);
  font-size: 0.75rem;
}

.field__req {
  color: var(--color-accent-red);
}

.field__error {
  display: none;
  margin-top: var(--space-3xs);
  font-family: var(--font-body-regular);
  font-size: 0.8125rem;
  color: var(--color-accent-red);
}

.field.is-error .field__input {
  border-color: var(--color-accent-red);
}

.field.is-error .field__error {
  display: block;
}

/* ---------- Checkbox ---------- */
.checkout-check {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
  font-family: var(--font-body-regular);
  font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
  color: var(--color-primary);
}

.checkout-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.checkout-check__box {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-s);
  background: var(--color-bg);
  transition: background-color 0.2s ease;
}

.checkout-check__box img {
  width: 0.75rem;
  height: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.checkout-check input:checked + .checkout-check__box {
  background: var(--color-primary);
}

.checkout-check input:checked + .checkout-check__box img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.checkout-check input:focus-visible + .checkout-check__box {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------- Radio pills (доставка / оплата) ---------- */
.pay-group {
  display: grid;
  gap: var(--space-xs);
  border: none;
}

.pay-group__legend {
  padding: 0;
  margin-bottom: var(--space-3xs);
  font-family: var(--font-body-bold);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  color: var(--color-primary);
}

.pay-option {
  display: flex;
  align-items: center;
  gap: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
  padding: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem)
    clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  border: 2px solid transparent;
  border-radius: var(--radius-m);
  background: var(--color-bg);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

/* Підсвічування вибраної опції — прогресивне покращення.
   Базовий стан (крапка радіо) працює нижче через `~ .pay-option__mark`. */
@supports selector(:has(*)) {
  .pay-option:has(.pay-option__input:checked) {
    border-color: var(--color-primary);
    background: var(--color-payment-bg);
  }
}

.pay-option__mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid var(--color-primary-soft);
  border-radius: 50%;
  transition: border-color 0.2s ease;
}

.pay-option__mark::after {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--color-primary);
  transform: scale(0);
  transition: transform 0.2s ease;
}

.pay-option__input:checked ~ .pay-option__mark {
  border-color: var(--color-primary);
}

.pay-option__input:checked ~ .pay-option__mark::after {
  transform: scale(1);
}

.pay-option__input:focus-visible ~ .pay-option__mark {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pay-option__text {
  font-family: var(--font-body-semibold);
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
  line-height: clamp(1.1875rem, 1.1125rem + 0.375vw, 1.5625rem);
}

/* ---------- Comment toggle ---------- */
.checkout-comment__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body-semibold);
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  color: var(--color-primary);
}

.checkout-comment__chevron {
  width: 0.875rem;
  height: auto;
  transition: transform 0.25s ease;
}

.checkout-comment__toggle[aria-expanded="true"] .checkout-comment__chevron {
  transform: rotate(180deg);
}

.checkout-comment__box {
  margin-top: var(--space-xs);
}

.checkout-comment__field {
  width: 100%;
  padding: 1rem 1.1rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-s);
  background: var(--color-bg);
  font-family: var(--font-body-regular);
  font-size: 1rem;
  color: var(--color-primary);
  resize: vertical;
}

.checkout-comment__field:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* ---------- Next / submit button ---------- */
.checkout-step__next {
  display: block;
  width: 100%;
  margin-top: var(--space-3xs);
  padding-block: clamp(1rem, 0.9375rem + 0.3125vw, 1.3125rem);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  font-family: var(--font-body-bold);
  font-size: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.25rem);
  line-height: clamp(1.25rem, 1.1625rem + 0.4375vw, 1.6875rem);
  color: var(--color-text-invert);
  text-align: center;
  transition: background-color 0.2s ease;
}

.checkout-step__next:hover {
  background: var(--color-btn-hover);
}

@media (min-width: 768px) {
  .checkout-step__submit {
    width: fit-content;
    padding-inline: clamp(2.0625rem, 1.3875rem + 3.375vw, 5.4375rem);
  }
}