/* Extracted from assets/modal.css — Personal Training form (#pt-request) — Step 1 */

@media (max-width: 768px) {

  /* form root */
  #pt-request {
    display: block;
  }

  /* main grid wrapper if present */
  #pt-request .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    /* consistent rhythm */
  }

  /* labels and inputs */
  #pt-request label {
    font-size: 0.95rem;
    margin-bottom: 6px;
    display: block;
  }

  #pt-request input,
  #pt-request select,
  #pt-request textarea,
  #pt-request .chip {
    width: 100%;
    min-height: 44px;
    /* Use height instead of min-height for date inputs to match text inputs */
    height: 44px !important;
    max-height: 44px !important;
    font-size: 1rem;
    border-radius: 10px;
  }

  /* Keep the policy checkbox row inline (label rule above makes it block). */
  #pt-request .agree-policy {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    white-space: nowrap;
  }

  /* iOS date input specific fix */
  #pt-request input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    padding: 8px 12px !important;
  }

  /* Textarea needs auto height */
  #pt-request textarea {
    height: auto !important;
    max-height: none !important;
  }

  /* Correction: don't apply tall height to policy checkbox */
  #pt-request .agree-policy input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    max-height: 16px !important;
    min-height: 0;
  }

  #pt-request textarea {
    min-height: 120px;
  }

  /* availability wizard block: give breathing room */
  #pt-request #wizAvail,
  #pt-request .wiz-step,
  #pt-request .wiz-recap {
    margin-top: 10px;
  }

  /* submit button */
  #pt-request .actions .primary,
  #pt-request button[type="submit"] {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
  }

  /* Only show an outline when the invalid control is actually focused */
  #pt-request input:invalid,
  #pt-request select:invalid,
  #pt-request textarea:invalid {
    outline: none;
  }

  #pt-request input:invalid:focus-visible,
  #pt-request select:invalid:focus-visible,
  #pt-request textarea:invalid:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

}

/* Desktop: PT — span both columns and center */
@media (min-width: 769px) {
  #pt-request .form-grid>.actions {
    grid-column: 1 / -1;
    justify-content: center;
  }
}