/* Manzo account sub-module. Cascade order is enforced by inc/assets.php. */

/* =========================================================
   My Account — small-screen adaptations
   Device-context fixes layered on top of the base breakpoints
   already defined per component.
   ========================================================= */

/* iOS Safari auto-zooms when a focused input has font-size < 16px.
   Bump form fields to 16px below the desktop breakpoint. */
@media (max-width: 767px) {
  .mz-account-form input[type="text"],
  .mz-account-form input[type="email"],
  .mz-account-form input[type="password"],
  .mz-account-form input[type="tel"],
  .mz-account-form select,
  .mz-account-form textarea,
  .mz-app__field select,
  .mz-app__field input[type="text"] {
    font-size: 16px;
  }
}

/* Tighter page padding on phones — desktop top spacing is heavy at 360px. */
@media (max-width: 600px) {
  .mz-account { padding: var(--s-5) 0 var(--s-7); }
  .mz-account--auth { padding: var(--s-7) 0; }
  .mz-account__pane > * + * { margin-top: var(--s-7); }
  .mz-account__head + * { margin-top: var(--s-5); }
}

/* Section header: stack section-link below title on narrow screens. */
@media (max-width: 560px) {
  .mz-account__block-head {
    grid-template-columns: 1fr;
    grid-template-areas: "idx" "title" "link";
    gap: var(--s-2);
  }
  .mz-account__block-head .mz-section-head__link {
    align-self: start;
    margin-top: var(--s-1);
  }
}

/* Resume panel: align to the 720px panel breakpoint used by b2bdesk/auth-public. */
@media (max-width: 720px) {
  .mz-resume__link { padding: var(--s-5); }
}

/* Resume card: tighten padding and let the inline model-code wrap on tiny phones. */
@media (max-width: 480px) {
  .mz-resume__link { padding: var(--s-5) var(--s-4); gap: var(--s-3); }
  .mz-resume__title { font-size: 18px; }
  .mz-resume__title .mz-mono {
    display: block;
    margin-left: 0;
    margin-top: 2px;
    font-size: 15px;
  }
}

/* Inline appliance "add" form is a wide composition; let it span full grid width
   so its 3-cell field row doesn't get crammed into a 1/2-card cell at mid widths. */
.mz-app-grid--full > .mz-app--form { grid-column: 1 / -1; }

/* "Rimuovi" needs a real touch target without becoming a button visually. */
.mz-app__remove button {
  min-height: 24px;
  padding: 4px 0;
  color: var(--ink-3);
}
.mz-app__remove button:hover { color: var(--brand); }

/* Order-table action link: ensure the row-spanning "Dettagli →" clears the tap-target floor on mobile. */
@media (max-width: 720px) {
  .mz-acct-table__act .mz-acct-link {
    min-height: 32px;
    padding-top: var(--s-1);
    padding-bottom: var(--s-1);
  }
}

/* View-order strip: status pill, tracking, count — wrap the count below on narrow. */
@media (max-width: 480px) {
  .mz-order__strip { gap: var(--s-2) var(--s-3); }
  .mz-order__count { margin-left: 0; flex-basis: 100%; }
}

/* Auth columns: keep single-column auth tighter on small screens. */
@media (max-width: 480px) {
  .mz-account--auth { padding: var(--s-6) 0; }
  .mz-auth { max-width: 100%; }
  .mz-auth-form__remember {
    flex-wrap: wrap;
    row-gap: var(--s-2);
  }
}