/* Basket and order dialog: hover, press and selection feedback. Visual only, the layout does not change. */

/* Main basket actions: "Оформить заказ" and "Подтвердить заказ" (.btn-submit is used only there). */
.btn-submit {
  cursor: pointer;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, filter 180ms ease-out;
  will-change: transform;
}

/* Quantity +/- inside the basket. */
#basket .goods-calc__btn {
  transition: transform 150ms ease-out, background-color 150ms ease-out;
}

/* Hover only for a real mouse: on touch screens :hover would stick after a tap. */
@media (hover: hover) and (pointer: fine) {
  .btn-submit:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 5px 0 0 #C06B2C;
    filter: brightness(1.04) saturate(1.05);
  }

  .btn-submit:focus-visible:hover {
    box-shadow: 0 5px 0 0 #C06B2C, 0 0 0 3px #FFFFFF, 0 0 0 6px #04812C;
  }

  #basket .goods-calc__btn:hover {
    transform: scale(1.08);
    background-color: #EAEAEA;
  }
}

/* Press: after the hover rules so it wins while the button is held. */
.btn-submit:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 1px 0 0 #C06B2C;
  filter: brightness(0.98);
  transition-duration: 90ms;
}

#basket .goods-calc__btn:active {
  transform: scale(0.92);
  transition-duration: 80ms;
}

/* The theme removes outlines on a:focus / div:focus with !important, so the keyboard focus ring is a box-shadow. */
.btn-submit:focus-visible {
  box-shadow: 0 3px 0 0 #C06B2C, 0 0 0 3px #FFFFFF, 0 0 0 6px #04812C;
}

.btn-submit:focus-visible:active {
  box-shadow: 0 1px 0 0 #C06B2C, 0 0 0 3px #FFFFFF, 0 0 0 6px #04812C;
}

/* Delivery and payment radios: the green indicator fades and grows in; the white dot stays on top. */
.order__type-radio {
  cursor: pointer;
}

.order__type-radio input:checked + .order__type-custom {
  background: #D9D9D9;
}

.order__type-custom::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100%;
  background: linear-gradient(88.61deg, #04812C -3.94%, #0AC346 117.26%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.order__type-radio input:checked + .order__type-custom::before {
  opacity: 1;
  transform: scale(1);
}

.order__type-custom::after {
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .btn-submit,
  #basket .goods-calc__btn,
  .order__type-custom::before {
    transition: none;
  }

  .btn-submit:hover,
  .btn-submit:active,
  #basket .goods-calc__btn:hover,
  #basket .goods-calc__btn:active {
    transform: none;
  }
}