/* ============================================================
   LAVENDER FLOWERS — Phone & tablet touch fixes

   Loaded AFTER {% block extra_css %} in base.html on purpose: the
   storefront pages carry their own inline <style> blocks, so these
   overrides must come later in source order to win on equal
   specificity. Selectors below deliberately mirror the originals.

   Storefront only — the admin console (market/admin_base.html) has
   its own shell and does not load this file.
   ============================================================ */

/* ------------------------------------------------------------
   1. Stop iOS Safari zooming in when a field gets focus.

   Safari auto-zooms whenever a focused control's font-size is
   under 16px, and it never zooms back out — the user is left on a
   page wider than the screen and has to pinch back manually. The
   storefront forms sit at 14–15px, so every tap on search, sort,
   login, or checkout triggers it. Phones get 16px; the desktop
   sizing is untouched.
   ------------------------------------------------------------ */
@media (max-width: 768px) {

  input,
  select,
  textarea,
  .form-control,
  .form-select {
    font-size: 16px;
  }

  /* Same specificity as the page-level rules these override. */
  .field input,
  .field select,
  .field textarea,          /* checkout */
  .control input,           /* login */
  .search-box input,        /* home + product list */
  .sort-select,             /* home + product list */
  .card-textarea {          /* build-bouquet greeting card */
    font-size: 16px;
  }

  /* 16px would otherwise make these controls noticeably taller
     than the design intends, so trim the padding to compensate. */
  .search-box input,
  .sort-select {
    padding-block: 10px;
  }
}

/* ------------------------------------------------------------
   2. Touch target sizing.

   The WCAG 2.2 "Target Size (Minimum)" floor is 24px; Apple and
   Google both recommend 44px / 48dp. These controls measured
   26–42px, and the bouquet steppers are the primary interaction
   on the build page, so they matter most.
   ------------------------------------------------------------ */
@media (max-width: 768px) {

  /* Language switcher in the utility strip — was 53x26. */
  .lang-switch button {
    min-height: 44px;
    padding-inline: 16px;
    display: inline-flex;
    align-items: center;
  }

  /* Flower quantity steppers on "صمم باقتك" — were 38x38. */
  .stem-qty-ctrl button {
    min-width: 44px;
    min-height: 44px;
  }

  /* Step tabs, quick tags, and nav icon buttons. */
  .step-btn,
  .quick-tag-btn {
    min-height: 44px;
  }

  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Anything using the shared button class. */
  .btn {
    min-height: 44px;
  }

  /* Add-to-cart on the product cards — the primary action on the
     storefront, and it measured 40px. */
  .add {
    min-height: 44px;
  }

  /* Bootstrap-styled fields default to ~38px. */
  .form-control,
  .form-select {
    min-height: 44px;
  }

  /* Login: show/hide password toggle (34px) and the back link (23px). */
  .control .toggle {
    width: 44px;
    height: 44px;
  }

  .back-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Checkout: preset time/date chips (35px) and the back-to-cart link. */
  .quick-chip-btn,
  .btn-back-cart {
    min-height: 44px;
  }

  /* Flash message dismiss button (32px). */
  .flash-close {
    width: 44px;
    height: 44px;
  }

  /* Quantity steppers — product cards (32x34) and cart rows (42x38). */
  .qty button,
  .qty-stepper button {
    min-width: 44px;
    min-height: 44px;
  }

  /* Cart: remove/trash controls, 35–38px. */
  .btn-trash-item,
  .remove-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .danger-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ------------------------------------------------------------
   3. General touch behaviour (safe at every width).
   ------------------------------------------------------------ */

/* Android/iOS inflate text in some orientations unless pinned. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Removes the legacy ~300ms tap delay without disabling pinch-zoom
   (which `touch-action: none` or a maximum-scale meta tag would). */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
label {
  touch-action: manipulation;
}

/* The default grey flash is heavy over the lavender palette. */
a,
button,
[role="button"] {
  -webkit-tap-highlight-color: rgba(125, 91, 166, .18);
}

/* Long unbroken strings (URLs, order refs) must not force a
   sideways scroll on a narrow screen. */
@media (max-width: 768px) {
  body {
    overflow-wrap: break-word;
  }
}