/* ==========================================================================
   99-mobile-d-account.css — mobile QA lane D
   Account, sign-in, registration and the booking/checkout chrome, on phones.
   Every rule below is commented with the page, the viewport and the defect it
   fixes. Measured on riverhousecreate.com with Playwright at 375x667, 390x844,
   430x932 and 768x1024 (see /root/mobile-qa-d/).
   Nothing here is a redesign: each rule restores an intended behavior that a
   base rule broke at phone width.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. iOS Safari zooms the whole page when a form field is focused.
   Pages: /my-account/ (sign in + create an account), /my-account/lost-password/,
          /my-account/edit-account/, /my-account/edit-address/
   Viewports: 375, 390, 430 (any iPhone).
   Defect: every text field computes to 15.5px. Mobile Safari auto-zooms on
   focus for anything under 16px, so the moment a customer taps "Email address"
   the page jumps and scales up and they have to pinch back out to see the rest
   of the form. 16px is the documented threshold.
   Cause: 80-account.css `body.woocommerce-account .woocommerce form .form-row
   input.input-text {font-size:15.5px}` and the same declaration in
   phase3-plugin-styling.css. Matched here at equal specificity; this file loads
   later, so it wins. Desktop is untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 781px), (pointer: coarse) {
  body.woocommerce-account .woocommerce form .form-row input.input-text,
  body.woocommerce-account .woocommerce form .form-row textarea,
  body.woocommerce-account .woocommerce form .form-row select,
  body.woocommerce-account .woocommerce-page form .form-row input.input-text,
  body.woocommerce-account .woocommerce-page form .form-row textarea,
  body.woocommerce-account .woocommerce-page form .form-row select {
    font-size: 16px;
  }

  /* the register-address block and any plain input on an account page */
  body.woocommerce-account .woocommerce input[type="text"],
  body.woocommerce-account .woocommerce input[type="email"],
  body.woocommerce-account .woocommerce input[type="tel"],
  body.woocommerce-account .woocommerce input[type="password"],
  body.woocommerce-account .woocommerce input[type="number"],
  body.woocommerce-account .woocommerce input[type="search"],
  body.woocommerce-account .woocommerce select,
  body.woocommerce-account .woocommerce textarea {
    font-size: 16px;
  }
}


/* --------------------------------------------------------------------------
   2. HANDED TO LANE B - the chosen credit pack is narrower than the ones
   under it, on /book/?item=credit as well as /book/?session=NN.
   Measured 375/390/430: the "Single class credit - $80" card is 287px wide and
   inset ~24px on each side while the four cards under it fill the column.
   Cause (confirmed independently here and by lane B): style.css, inside
   @media (max-width:599px), `main#riverhouse-public-main :where(... label ...)
   {margin-left:auto;margin-right:auto}`. The pack cards are <label> grid items,
   an auto inline margin cancels grid stretch, so a card whose text is shorter
   than the column shrinks to fit and centers.
   /book/?item=credit and /book/?session=NN are structurally identical - same
   body classes, same .rhbk-page > .rhbk-packs > .rhbk-pack - so there is no way
   to scope a fix to one of them. Lane B owns the .rhbk-pack width fix and its
   rule covers both pages; a duplicate !important rule here would only make the
   cascade harder to read. No rule in this file.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   3. Orders list does not say which order is which.
   Page: /my-account/orders/ signed in.
   Viewports: 375, 390, 430, 768.
   Defect: on a phone the table stacks into cards reading only
   "Date / Status / Total / View". The order number is dropped, so seven orders
   placed on the same day are indistinguishable and the customer cannot quote a
   number to the studio.
   Cause: WooCommerce woocommerce-smallscreen.css
   `.woocommerce table.shop_table_responsive tbody th {display:none}`. The order
   number lives in a <th scope="row">, not a <td>, so Woo's own responsive
   treatment hides it. The cell already carries data-title="Order", so it is
   restored with exactly the presentation Woo gives the sibling <td>s.
   Scoped to 768px to match the media attribute on woocommerce-smallscreen.css;
   above that the table is a real table again and must not be touched.

   3b. The same list only uses half the width of the phone.
   Defect: every order card stops about 55% of the way across (190px of the
   350px available at 390) with a wide empty strip down the right inside the
   frame, so the list looks unfinished and the dates and totals are squeezed.
   Cause: the responsive treatment sets display:block on the <table>, the <tr>
   and the <td>, but leaves <tbody> as display:table-row-group. A row group
   inside a block box gets wrapped in an anonymous table box, which is
   shrink-to-fit - so the rows size to their longest line, not to the column.
   Measured before 190px, after 348px.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .woocommerce-account table.woocommerce-orders-table.shop_table_responsive tbody {
    display: block;
    width: auto;
  }

  .woocommerce-account table.woocommerce-orders-table.shop_table_responsive tbody tr th.woocommerce-orders-table__cell,
  .woocommerce-account table.woocommerce-orders-table.shop_table_responsive tbody tr th.woocommerce-orders-table__cell-order-number {
    display: block;
    text-align: right;
    font-weight: 400;
    font-size: 13.6px;
    /* the theme puts small caps on <th>; the stacked cells must read like the
       <td> rows above and below, not like a table header */
    text-transform: none;
    letter-spacing: normal;
    padding: 13.6px;
    border: 1px solid var(--rule, #d6cbb6);
  }

  .woocommerce-account table.woocommerce-orders-table.shop_table_responsive tbody tr th.woocommerce-orders-table__cell::before {
    content: attr(data-title) ": ";
    float: left;
    font-weight: 700;
    font-size: 13.6px;
    text-transform: none;
    letter-spacing: normal;
  }
}


/* --------------------------------------------------------------------------
   4. "Your details" links on the account dashboard are a 25px sliver.
   Page: /my-account/ signed in (the "Your details" list: Riverhouse profile &
   password / Orders / Addresses / Payment methods / Credit help).
   Viewports: 375, 390, 430.
   Defect: each row is 54px tall but only the middle 25px is tappable, and the
   rows are only 54px apart, so a thumb aimed at "Orders" lands on "Addresses".
   Cause: the 14px of breathing room is padding on the <li>, and the <a> inside
   is left at its text height. Moving that padding onto the anchor makes the
   whole row tappable. Height, spacing and rules are unchanged - this is a
   hit-area fix only, nothing moves.
   -------------------------------------------------------------------------- */
@media (max-width: 781px), (pointer: coarse) {
  /* 80-account.css puts the 14px on the <li> at (0,3,2); these selectors carry
     body.woocommerce-account so they outrank it without !important. */
  body.woocommerce-account .rhc-wallet-hub .rhc-wallet-hub__links > li {
    padding-top: 0;
    padding-bottom: 0;
  }

  body.woocommerce-account .rhc-wallet-hub .rhc-wallet-hub__links > li > a {
    display: block;
    padding-top: 14px;
    padding-bottom: 14px;
    min-height: 44px;
  }
}


/* --------------------------------------------------------------------------
   5. The show/hide password eye is a 22x22 target.
   Pages: /my-account/ (sign in + create an account), /my-account/edit-account/.
   Viewports: 375, 390, 430.
   Defect: the eye that reveals the password is half the size a thumb needs, and
   it sits right on the edge of the field, so tapping it often just puts the
   cursor in the password box instead.
   Fix: an invisible ::after grows the hit area to 44x44 around the icon. The
   button has no ::after of its own (its icon is drawn by ::before), and nothing
   moves on screen.
   -------------------------------------------------------------------------- */
@media (max-width: 781px), (pointer: coarse) {
  .woocommerce form .password-input button.show-password-input::after {
    content: "";
    position: absolute;
    top: -11px;
    right: -11px;
    bottom: -11px;
    left: -11px;
  }
}


/* --------------------------------------------------------------------------
   6. Consent and "remember me" checkboxes are 18x18.
   Pages: /my-account/ (create an account: SMS consent, save-a-card consent,
   Remember me), /my-account/edit-account/ (SMS consent).
   Viewports: 375, 390, 430.
   Defect: the boxes a customer has to tick to agree to text messages or to save
   a card are smaller than a fingertip. These are consent controls - a mis-tap
   here is a customer agreeing, or failing to agree, to something by accident.
   Fix: 22px box, which is the size Woo's own cookie banner uses, with the label
   text still doing most of the work.
   -------------------------------------------------------------------------- */
@media (max-width: 781px), (pointer: coarse) {
  body.woocommerce-account .woocommerce form input[type="checkbox"],
  body.woocommerce-account .woocommerce form input[type="radio"],
  body.woocommerce-account .woocommerce-page form input[type="checkbox"],
  body.woocommerce-account .woocommerce-page form input[type="radio"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    /* 80-account.css also pins the flex basis, so it has to be released here */
    flex: 0 0 22px;
  }
}


/* --------------------------------------------------------------------------
   7. "Edit" on the Addresses page is a 26px-tall link.
   Page: /my-account/edit-address/ signed in.
   Viewports: 375, 390, 430.
   Defect: the only control on the page is a short underlined "Edit" link that
   is under the 44px a thumb needs.
   Fix: vertical padding on the link. It stays a link, it just gets a body.
   -------------------------------------------------------------------------- */
@media (max-width: 781px), (pointer: coarse) {
  .woocommerce-account .woocommerce-Addresses .woocommerce-Address-title a.edit {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}


/* --------------------------------------------------------------------------
   8. NOT FIXED HERE - the cookie banner covers the Sign in button.
   Page: /my-account/ signed out, first visit, 375x667 (iPhone SE / mini).
   Measured: the banner is fixed, 142px tall, top at y=525 of 667, and its box
   overlaps the "Sign in" submit button, the "Remember me" checkbox and
   "Forgot your password?". A first-time visitor on a small iPhone cannot press
   Sign in until they answer the banner. At 390x844 it takes the bottom 17% and
   at 430x932 the bottom 12%.
   Padding our own form would not help - the banner is fixed to the viewport, so
   the button is covered wherever it sits. This belongs to lane A (chrome), and
   is reported to the coordinator rather than patched here.
   Once the Crisp bubble ships it will land in the same corner; re-measure then.
   -------------------------------------------------------------------------- */