/* Shared mobile accessibility defaults.
   1rem remains tied to the user's browser font setting, so controls and text
   continue to scale when the user increases the default font size or zooms. */
:root {
  font-size: 100%;
  --a11y-target-size: 2.75rem;
  --a11y-field-size: 2.875rem;
  --a11y-control-gap: 0.5rem;
}

/* Keep interactive controls usable at the WCAG touch-target size while
   preserving the visual size of inline icons and badges. */
:where(
  .ui-button,
  .primary-button,
  .secondary-button,
  .danger-button,
  .menu-card__cta,
  .order-package,
  .payment-method,
  .category-tab,
  .sidebar-item,
  .ui-toggle,
  .menu-bottom-nav__item,
  .modifier-option,
  .future-order-field,
  .future-order-calendar__day,
  .future-order-time,
  .landing-page button,
  .landing-lang__trigger,
  .landing-lang__option,
  .language-switch,
  .counter-item,
  .counter-cart-bar__button,
  .bo-primary-button,
  .bo-secondary-button,
  .bo-subtab,
  .bo-nav__item,
  .bo-search-toggle,
  .bo-report-date-picker__trigger,
  .bo-layout-option,
  .bo-workflow-station,
  .kds-item-ready
) {
  min-block-size: var(--a11y-target-size);
}

:where(
  .ui-button--icon,
  .orders-menu-back,
  .orders-screen-topbar__action,
  .orders-cart-control .ui-button,
  .qty-stepper button,
  .summary-row__actions button,
  .floating-cart__button,
  .landing-page button,
  .landing-lang__trigger,
  .landing-lang__option,
  .language-switch,
  .counter-cart__line-actions button,
  .bo-icon-button,
  .bo-insert-button,
  .bo-mobile-nav-toggle,
  .bo-report-calendar__nav,
  .bo-report-calendar__day,
  .bo-status-color-select__trigger,
  .bo-status-color-option,
  .kds-actions button,
  .station-toolbar button
) {
  min-inline-size: var(--a11y-target-size);
  min-block-size: var(--a11y-target-size);
}

/* Text-entry controls must remain large enough to tap and inherit the user's
   preferred text scale instead of introducing fixed-pixel text. */
:where(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .bo-disabled-field
) {
  min-block-size: var(--a11y-field-size);
  font-size: 1rem;
}

/* The visual checkbox/switch can stay compact, but its label remains a full
   size hit area. */
:where(.bo-checkbox, .bo-switch, .bo-workflow-step__toggle, .bo-workflow-station) {
  min-inline-size: var(--a11y-target-size);
  min-block-size: var(--a11y-target-size);
}

:where(
  .card-actions,
  .landing-actions,
  .modal-actions,
  .dialog-actions,
  .toolbar__group,
  .bo-row-actions,
  .bo-branding-actions,
  .bo-counter-slideshow__fields,
  .counter-order-header__actions,
  .counter-success__actions,
  .counter-inactivity__actions,
  .kds-actions
) {
  gap: var(--a11y-control-gap);
}

/* Prevent long localized labels from clipping inside a fixed-height control. */
:where(button, input, select, textarea, [role="button"]) {
  line-height: 1.25;
}

:where(button, a, input, select, textarea, [role="button"]) {
  overflow-wrap: anywhere;
}

/* App-specific controls that are generated outside the shared component
   helpers. */
body:has(.bo-shell) button,
body:has(.app-frame--kds) button,
body:has(.counter-order-shell) button,
body:has(.app-frame--orders) button {
  min-inline-size: var(--a11y-target-size);
  min-block-size: var(--a11y-target-size);
}

body:has(.bo-shell) :where(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body:has(.app-frame--kds) :where(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body:has(.counter-order-shell) :where(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body:has(.app-frame--orders) :where(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  min-block-size: var(--a11y-field-size);
  font-size: 1rem;
}

body:has(.bo-shell) :where(.dt-mgmt-wrapper, .dt-expand-group-actions, .dt-dropdown-content) {
  gap: var(--a11y-control-gap);
}

@media (max-width: 30rem) {
  :where(.dialog-actions, .counter-success__actions, .counter-inactivity__actions) {
    flex-wrap: wrap;
  }

  :where(.dialog-actions > *, .counter-success__actions > *, .counter-inactivity__actions > *) {
    flex: 1 1 100%;
  }
}