/* ===========================================================================
   Mobile UX corrections — loaded on EVERY route (see GLOBAL_STYLESHEETS in
   overrides/brand.mjs), unlike the light theme which is clinique-only.

   Everything is inside a max-width query, so desktop rendering — and therefore
   desktop pixel parity with the original WordPress site — is untouched.

   Findings these address come from qa/mobile-audit.mjs, run on iPhone 13 (390)
   and Galaxy S9+ (360). Note what was NOT wrong: there is no horizontal scroll
   and no element wider than the viewport on any audited page.
   =========================================================================== */

@media (max-width: 1024px) {
  /* -------------------------------------------------------------------------
     1. iOS zooms the whole page when a focused input has a font-size under
        16px. The booking form fields were 14px, so tapping "Nume" jerked the
        layout. This is the single most felt mobile defect on the site.
     ---------------------------------------------------------------------- */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Comfortable field height without changing the visual language. */
  #agenda-booking input,
  .wpcf7 input,
  .forminator-input {
    min-height: 44px;
  }

  /* -------------------------------------------------------------------------
     2. Tap targets. 44x44 CSS px is the Apple HIG / WCAG 2.5.5 floor.
        Applied to controls where a miss is costly — header icons, the booking
        calendar, slot pickers and buy buttons.
     ---------------------------------------------------------------------- */
  .wd-header-mobile-nav > a,
  .wd-tools-element > a,
  .cart-widget-opener,
  .wd-header-cart > a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  #smx-cal .smx-day {
    width: 44px !important;
    height: 44px !important;
  }
  #smx-cal .smx-nav button {
    width: 44px !important;
    height: 44px !important;
  }

  #ab-slots button {
    min-height: 44px;
    padding: 10px 14px;
  }

  /* NOTE the display declaration: these are <a> elements, and min-height has no
     effect on an inline box — the buy button stayed 36px tall until this was
     added. */
  .single_add_to_cart_button,
  .add_to_cart_button,
  .elementor-button,
  .btn,
  .smx-btn,
  .wd-nav-link,
  button[type="submit"],
  #ab-submit {
    /* !important is needed: Woodmart sets an explicit height on the loop buy
       button, which beat a plain min-height and left it at 36px. */
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Product titles, category links and contact links are small text targets.
     The hit area is extended with a pseudo-element so the product grid and the
     contact block do not reflow. */
  .woocommerce-loop-product__title a,
  .wd-entities-title a,
  .product-category a,
  .wd-product-cats a,
  a[href^="mailto:"],
  a[href^="tel:"],
  a[href*="wa.me"],
  a[href*="whatsapp"] {
    position: relative;
    display: inline-block;
  }
  .woocommerce-loop-product__title a::after,
  .wd-entities-title a::after,
  .product-category a::after,
  .wd-product-cats a::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after,
  a[href*="wa.me"]::after,
  a[href*="whatsapp"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  /* -------------------------------------------------------------------------
     3. Small inline links (footer nav, contact details) sat at 24–32px tall.
        The hit area is extended with a pseudo-element rather than padding, so
        nothing reflows and the mirrored layout stays put.
     ---------------------------------------------------------------------- */
  footer a,
  .wd-nav-mobile a,
  .mobile-nav a,
  .wd-sub-menu a {
    position: relative;
  }
  footer a::after,
  .wd-nav-mobile a::after,
  .mobile-nav a::after,
  .wd-sub-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    /* purely a hit area — never paints, never intercepts scrolling */
    pointer-events: auto;
  }

  /* Calendar footer action ("Astăzi") and the off-canvas close links. */
  #smx-cal .smx-foot button,
  #smx-cal .smx-foot a {
    min-height: 44px;
    padding-inline: 12px;
  }
  .mobile-nav a[class*="close"],
  .cart-widget-side a[class*="close"],
  .login-form-side a[class*="close"],
  .wd-side-hidden a[class*="close"] {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
  }

  /* Standalone controls that were genuinely undersized. */
  .scrollToTop {
    width: 44px !important;
    height: 44px !important;
  }
  .wd-close-side-widget,
  .close-side-widget,
  .wd-close-side-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Footer nav links sat at 26px tall. They are full-width, so horizontal aim
     is easy — this just buys vertical room. Applied to the closing Elementor
     sections rather than every <a>: inflating inline links inside body copy
     would overlap neighbouring lines and cause mis-taps, which is worse than a
     slightly short target. */
  .elementor-widget-text-editor a,
  .wd-footer a,
  footer a {
    display: inline-block;
    padding-block: 9px;
  }

  /* -------------------------------------------------------------------------
     4. Comfort details.
     ---------------------------------------------------------------------- */
  /* Stop iOS auto-inflating body copy in landscape. */
  body { -webkit-text-size-adjust: 100%; }

  /* The booking calendar is a fixed-width grid; let it use the screen. */
  #smx-cal { max-width: 100%; }

  /* The hero copy panel needs tighter padding on a phone, or it eats the fold. */
  body.smx-light .elementor-element-8e860d7 {
    padding: 20px 18px !important;
    border-radius: 16px;
  }

  /* Long email addresses and URLs were the only wrap risk in the audit. */
  a[href^="mailto:"],
  a[href^="tel:"] { word-break: break-word; }
}

/* Phones specifically: give the booking form and cart buttons full width so
   they are reachable with a thumb rather than centred small targets. */
@media (max-width: 600px) {
  #ab-submit,
  .smx-btn,
  .single_add_to_cart_button {
    width: 100%;
    justify-content: center;
  }
}

/* --- EUR pricing ----------------------------------------------------------
   public/brand/prices.js rewrites the mirrored WooCommerce price labels from
   /api/products: the euro figure is the price, the lei line is the amount that
   will actually be charged at today's BNR rate. The lei line is deliberately
   quiet — it is information, not a second price competing for attention. */
.smx-lei-equiv {
  display: block;
  margin-top: 2px;
  font-size: 0.78em;
  font-weight: 400;
  opacity: 0.72;
  white-space: nowrap;
}

/* The billing period, shown next to the euro price on subscription products.
   Deliberately not .wps_sfw_interval: the theme sets that class to display:none,
   which was harmless while nothing was for sale, but with weekly billing an
   unlabelled "112 €" understates the real cost by roughly four times. */
.smx-interval {
  font-size: 0.62em;
  font-weight: 500;
  opacity: 0.85;
  white-space: nowrap;
}