/* Keep the original controls in their forms so validation, quoted prices and
   disabled states continue to use a single button on mobile and desktop. */
.mobile-action-dock { grid-column: 1 / -1; }
.mobile-action-dock > form { margin: 0; }
.student-password-form .mobile-action-dock > button { width: 100%; }
.payment-success-order { margin-top: 18px; }
.payment-success-order > summary { padding: 12px; color: #55718a; cursor: pointer; font-size: 14px; }
.payment-success-order .payment-state-details { margin-top: 8px; }

@media (max-width: 800px) {
  html:has(.mobile-action-dock) {
    scroll-padding-bottom: calc(106px + env(safe-area-inset-bottom, 0px));
  }
  body:has(.mobile-action-dock) {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  body .mobile-action-dock {
    box-sizing: border-box; position: fixed; z-index: 100;
    inset: auto 0 0; display: flex; align-items: center; justify-content: center;
    gap: 10px; width: 100%; max-width: none; margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #dce7f3; background: #fff;
    box-shadow: 0 -6px 22px #173b5910;
  }
  body .mobile-action-dock > .button,
  body .mobile-action-dock > .login-primary {
    box-sizing: border-box; display: flex; align-items: center; justify-content: center;
    flex: 1; gap: 8px; width: auto; max-width: 540px; min-width: 0;
    min-height: 52px; margin: 0; padding: 12px 14px; border-radius: 12px;
    font-size: 16px; font-weight: 800; line-height: 1.4; text-align: center;
  }
  body .mobile-action-dock > .primary,
  body .mobile-action-dock > .login-primary {
    border: 1px solid #1275ed; background: #1275ed; color: #fff;
  }
  body .mobile-action-dock > :disabled { opacity: .6; cursor: wait; }
  body .mobile-action-dock > :focus-visible { outline: 3px solid #85b9ff; outline-offset: 3px; }
  body .mobile-action-dock > form { flex: 1; max-width: 540px; }
  body .mobile-action-dock > form > .button { width: 100%; min-height: 52px; border-radius: 12px; font-size: 16px; font-weight: 800; }

  /* While typing, return the same action to the form to leave room for the
     keyboard. It becomes fixed again when the keyboard closes. */
  body.mobile-action-keyboard-open .mobile-action-dock {
    position: static; width: 100%; padding: 12px 0; border: 0;
    background: transparent; box-shadow: none;
  }
  body.mobile-action-keyboard-open .mobile-action-dock > * { max-width: none; }
  body:has(.mobile-action-dock) :is(input, textarea) { scroll-margin: 28px 0 120px; }
}