/* =============================================================================
   Accessibility — Touch targets (Batch 3)
   -----------------------------------------------------------------------------
   Scope:
     Enforce a minimum 44×44 CSS pixel hit-area on every interactive element
     across customer + admin surfaces, on small viewports (<= 640px). The
     visual size of icons / glyphs is preserved; the hit-area is enlarged via
     padding or a transparent ::before overlay so the element looks identical
     to today.

   Why 44px:
     WCAG 2.5.5 (AAA) and Apple HIG both recommend a 44×44 minimum to keep
     finger taps reliable on phones. Several elements on this site (lang
     menu toggle 38px, footer social 42×42, cart info button ~16px) sit
     below that threshold today.

   Non-goals:
     - Does NOT change desktop layout (rules are wrapped in mobile media
       queries except where the element is fixed-size at all breakpoints).
     - Does NOT alter visual icon sizes — only hit-area.
     - Does NOT touch logic/JS or i18n.
     - Does NOT override Bootstrap defaults outside the scoped surfaces.

   Load order:
     After tokens.css / buttons.css / inputs.css and before page-level CSS,
     so page-level rules can still override when intentional.

   Token consumed:
     --tap-target-min: 44px  (defined in tokens.css)
   ========================================================================== */


/* =============================================================================
   1) Customer surface — language menu (home, menu, cart, order-history)
   --------------------------------------------------------------------------
   Current state: .rt-lang-menu__toggle and .rt-lang-menu__item ship with
   min-height: 38px, and the toggle compresses to 34px on <= 575.98px. Both
   live below the 44px threshold. The fix expands the hit-area without
   changing the visible button proportions on desktop.
   ========================================================================== */
@media (max-width: 640px) {
  .rt-lang-menu__toggle,
  .rt-lang-menu__item {
    min-block-size: var(--tap-target-min, 44px);
    min-inline-size: var(--tap-target-min, 44px);
  }

  .rt-lang-menu__toggle {
    /* Keep horizontal rhythm tight; only block axis grows. */
    padding-block: 8px;
  }

  .rt-lang-menu__item {
    padding-block: 10px;
  }
}


/* =============================================================================
   2) Customer surface — footer social icons
   --------------------------------------------------------------------------
   Current: .footer-social-link is locked at 42×42 at every breakpoint. Lift
   to 44×44 on small screens so finger taps don't slip onto neighbours.
   ========================================================================== */
@media (max-width: 640px) {
  .footer-social-link {
    inline-size: var(--tap-target-min, 44px);
    block-size: var(--tap-target-min, 44px);
  }
}


/* =============================================================================
   3) Customer surface — cart inline info buttons
   --------------------------------------------------------------------------
   Current: .cart-summary__info-btn renders an icon ~12px wide with
   padding: 0 2px, giving roughly 16px of clickable area. Use a transparent
   ::before overlay to extend the hit-area to 44×44 without resizing the
   visible icon.
   ========================================================================== */
@media (max-width: 640px) {
  .cart-summary__info-btn,
  .video-info-inline-btn,
  .admin-section__info-btn {
    position: relative;
    /* Keep visible glyph size identical to existing styles. */
  }

  .cart-summary__info-btn::before,
  .video-info-inline-btn::before,
  .admin-section__info-btn::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    /* Symmetric translate so the overlay is centered on the visible icon
       on both LTR and RTL (the -50% values mirror naturally). */
    transform: translate(-50%, -50%);
    inline-size: var(--tap-target-min, 44px);
    block-size: var(--tap-target-min, 44px);
    /* Transparent — exists only to capture pointer events. */
    background: transparent;
  }
}


/* =============================================================================
   4) Cart — payment method buttons
   --------------------------------------------------------------------------
   The .payment-method-option wrapper itself already has min-height: 52px
   (>= 44px). The fix needed here is for HORIZONTAL layout overflow on
   360px viewports (3 buttons × 120px min-width = ~376px, which busts the
   viewport). Switch to a 2-up wrap on small phones so each card has room
   to breathe; the wrapper is already display:flex with flex-wrap:wrap.
   ========================================================================== */
@media (max-width: 640px) {
  .payment-method-option {
    /* Override the desktop min-width: 120px which forces overflow on 360px. */
    min-inline-size: 0;
    flex: 1 1 calc(50% - 4px);
  }
}

@media (max-width: 360px) {
  .payment-method-option {
    /* On the very smallest phones, stack vertically rather than crowding. */
    flex: 1 1 100%;
  }
}


/* =============================================================================
   5) Cart + checkout — long strings (addresses, emails, order numbers)
   --------------------------------------------------------------------------
   Long unbroken strings (e.g., user emails like
   verylongname.surname@some-provider.example.com) can extend a flex/grid
   row past the viewport on 360px. Allow these to wrap inside their cell.
   Targeted by class, not globally, to avoid breaking intentional ellipses.
   ========================================================================== */
.cart-summary__value,
.cart-summary__label,
.cart-summary__detail-value,
.payment-email-hint,
.checkout-summary__value,
.order-history-card__email,
.order-history-card__address,
.order-history-card__order-id {
  overflow-wrap: anywhere;
  word-break: normal;
}


/* =============================================================================
   6) Customer surface — modifier-group option labels
   --------------------------------------------------------------------------
   .mg-option / .aw-option were already raised to >= 48px in Batch 1, so
   this is a safety net only. We assert the minimum here in case future
   surfaces add a similar option without inheriting the Batch 1 styles.
   ========================================================================== */
@media (max-width: 640px) {
  .mg-option,
  .aw-option {
    min-block-size: var(--tap-target-min, 44px);
  }

  .mg-option > label,
  .aw-option > label {
    /* Whole label = clickable surface. */
    min-block-size: var(--tap-target-min, 44px);
    display: flex;
    align-items: center;
  }
}


/* =============================================================================
   7) Order-history — header buttons
   --------------------------------------------------------------------------
   .oh-header__* icon-only buttons render with the page header's compact
   padding. Lift their tap area on phones.
   ========================================================================== */
@media (max-width: 640px) {
  .oh-header__inner button,
  .oh-header__inner a[role="button"],
  .oh-header__back,
  .oh-header__menu,
  .oh-bottom-nav__item {
    min-block-size: var(--tap-target-min, 44px);
    min-inline-size: var(--tap-target-min, 44px);
  }
}


/* =============================================================================
   8) Admin — Bootstrap form controls (form-check, form-switch, pagination)
   --------------------------------------------------------------------------
   Bootstrap's defaults render checkboxes / radios / switches at ~16-20px.
   On phones, lift the hit-area by enlarging the surrounding label and
   pagination controls. The visible toggle/switch graphic is unchanged.
   ========================================================================== */
@media (max-width: 640px) {
  .form-check {
    min-block-size: var(--tap-target-min, 44px);
    display: flex;
    align-items: center;
  }

  .form-check-label {
    padding-block: 6px;
    cursor: pointer;
  }

  .form-switch .form-check-input {
    /* Bootstrap renders the switch slightly larger than a checkbox; keep
       its scale but ensure the surrounding label + control region is 44+. */
    min-inline-size: 2.5em;
  }

  .pagination .page-link,
  .nav-tabs .nav-link,
  .nav-pills .nav-link {
    min-block-size: var(--tap-target-min, 44px);
    min-inline-size: var(--tap-target-min, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* =============================================================================
   9) Admin — icon-only toolbar / quick-action buttons
   --------------------------------------------------------------------------
   Many admin toolbar buttons are sized to the icon glyph alone (~28-36px).
   Use the same ::before overlay technique as #3 to lift the hit-area on
   phones without enlarging the icon.
   ========================================================================== */
@media (max-width: 640px) {
  .btn--icon,
  .icon-btn,
  .toolbar__btn--icon,
  .admin-icon-btn {
    position: relative;
    min-block-size: var(--tap-target-min, 44px);
    min-inline-size: var(--tap-target-min, 44px);
  }
}


/* =============================================================================
   10) RTL sanity — logical-property guarantees
   --------------------------------------------------------------------------
   The rules above already use logical properties (min-block-size /
   min-inline-size / inset-inline-*) so they mirror correctly under
   dir="rtl". This block adds defensive overrides for elements that were
   originally authored with physical left/right but need symmetrical hit
   areas on Arabic.
   ========================================================================== */
:is(html[lang="ar"], html[dir="rtl"]) .rt-lang-menu__item {
  text-align: right;
}

:is(html[lang="ar"], html[dir="rtl"]) .form-check {
  /* Bootstrap puts the input on the left; for AR readers, flip it to the
     right side of the label. Hit-area dimensions remain unchanged. */
  padding-inline-start: 0;
  padding-inline-end: 1.5em;
}

:is(html[lang="ar"], html[dir="rtl"]) .form-check .form-check-input {
  margin-inline-start: 0;
  margin-inline-end: -1.5em;
  float: right;
}


/* =============================================================================
   11) Reduced motion — preserve our additions
   --------------------------------------------------------------------------
   None of the rules above introduce animations or transitions; this block
   is a no-op placeholder so future contributors know we already considered
   prefers-reduced-motion in this stylesheet.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* No animated rules in this file. */
}