/* Mobile forms and tables guard (all pages).
   Loaded after tmc-owner-clean-ui (see functions.php). Only touches form controls, tap targets,
   prices and the checkout payment box; it does not touch the hero/slider, the activity ticker or
   the ticket-issuing screen. Desktop (> 1100px) is unchanged.
   Why !important: the existing layers (style.css, cart-readable-type.css, Additional CSS in the
   database) set these properties with !important, so a lower layer cannot win without it. */

/* ------------------------------------------------------------------ *
 * A. Layout fixes that also hit tablets / the ~920px two-column layouts
 * ------------------------------------------------------------------ */

/* Checkout payment box: radio in column 1, label in column 2 (the label used to land in the 22px radio
   column and break "TEST / SIMULATION" one letter per line); box under both. */
html body.tmc24-theme.tmc24-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
}

html body.tmc24-theme.tmc24-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input.input-radio {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: static !important;
  width: 22px !important;
  height: 22px !important;
}

html body.tmc24-theme.tmc24-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow-wrap: anywhere;
  white-space: normal !important;
}

html body.tmc24-theme.tmc24-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > div.payment_box {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Account preference checkboxes: a checkbox is a checkbox, not an 870px-wide field (a global input width:100% rule made
   its hit area and focus ring overflow the card) */
html body.tmc24-theme.tmc24-theme form.tmc-marketing-preferences label {
  overflow: visible;
}

html body.tmc24-theme.tmc24-theme form.tmc-marketing-preferences input[type="checkbox"] {
  width: auto !important;
  min-height: 0 !important;
  margin: 0 10px 0 0;
}

/* Basket table beside the totals (769-1100px): price/quantity/subtotal cells never split mid-value */
@media (min-width: 769px) {
  html body.tmc24-theme.tmc24-theme.woocommerce-cart table.shop_table :is(th, td):is(.product-price, .product-subtotal, .product-quantity) {
    white-space: nowrap;
  }
}

/* Guest ticket strip on the competition page: wrap instead of clipping with an ellipsis (<= 760px already wraps) */
@media (min-width: 761px) and (max-width: 1100px) {
  body.tmc24-theme.single-product .tmc144-ticket-strip p {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* ------------------------------------------------------------------ *
 * B. Phones and small tablets (<= 768px)
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
  /* 1. Text entry: 16px (no iOS focus-zoom) and a 44px target, never wider than its column */
  html body.tmc24-theme.tmc24-theme :is(
    input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"],
    input[type="search"], input[type="url"], input[type="date"], input[type="datetime-local"], select
  ):not(.tmc25-qty-input):not([class*="tmc24-mobile-buy"] *) {
    box-sizing: border-box;
    max-width: 100%;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  html body.tmc24-theme.tmc24-theme textarea {
    box-sizing: border-box;
    max-width: 100%;
    min-height: 96px;
    font-size: 16px !important;
  }

  html body.tmc24-theme.tmc24-theme .select2-container .select2-selection--single {
    box-sizing: border-box;
    min-height: 44px !important;
    border: 1px solid #d8e0eb !important; /* same hairline and radius as the text inputs (was a dark, square box) */
    border-radius: 9px !important;
  }

  html body.tmc24-theme.tmc24-theme .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 16px !important;
    line-height: 42px !important;
  }

  html body.tmc24-theme.tmc24-theme .select2-container .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
  }

  html body.tmc24-theme.tmc24-theme input[type="range"] {
    min-height: 44px;
  }

  /* 2. Checkboxes and radios: the whole label is a 44px target */
  html body.tmc24-theme.tmc24-theme :is(label:has(> input[type="checkbox"]), label:has(> input[type="radio"]), label.woocommerce-form__label-for-checkbox) {
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 44px !important;
  }

  html body.tmc24-theme.tmc24-theme :is(label:has(> input[type="checkbox"]), label:has(> input[type="radio"])) > input[type="checkbox"],
  html body.tmc24-theme.tmc24-theme :is(label:has(> input[type="checkbox"]), label:has(> input[type="radio"])) > input[type="radio"] {
    flex: 0 0 22px;
    width: 22px !important;
    height: 22px !important;
    min-height: 0 !important;
    margin: 0 !important;
    accent-color: #147cff;
  }

  /* registration age/terms checkbox: the checkbox is a sibling of its label, so give the row and the label a 44px target */
  html body.tmc24-theme.tmc24-theme .tmc-register-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  html body.tmc24-theme.tmc24-theme .tmc-register-confirmation > input[type="checkbox"] {
    flex: 0 0 22px;
    width: 22px !important;
    height: 22px !important;
    margin: 11px 0 0 !important;
    accent-color: #147cff;
  }

  html body.tmc24-theme.tmc24-theme .tmc-register-confirmation__copy label[for] {
    display: inline-block;
    margin-block: -13px;
    padding-block: 13px;
  }

  /* 3. Buttons and button-like links in the shop, cart, checkout and account areas */
  html body.tmc24-theme.tmc24-theme:is(.woocommerce-account, .woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) :is(
    a.button, button.button, input.button, button[type="submit"], .tmc-card-cta, .tmc-button, .woocommerce-Button,
    .tmc-wallet-credit-panel__button, a.showcoupon
  ),
  html body.tmc24-theme.tmc24-theme .tmc-contact-form :is(button, input[type="submit"]) {
    box-sizing: border-box;
    min-height: 44px !important;
  }

  html body.tmc24-theme.tmc24-theme:is(.woocommerce-account, .woocommerce-cart, .woocommerce-checkout, .woocommerce-order-received) :is(a.button, a.showcoupon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* password reveal sits inside its field: 44px target, centred on the field. The owner layer anchors it at top:50% with translateY(-50%);
     top:0 here left that shift in place and lifted the button half its height above the field, so keep the centre anchor. */
  html body.tmc24-theme.tmc24-theme .password-input .show-password-input {
    top: 50% !important;
    transform: translateY(-50%) !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  /* cart: remove (x) keeps its small red disc but gets a 44px target */
  html body.tmc24-theme.tmc24-theme .woocommerce-cart-form .product-remove a.remove {
    box-sizing: border-box;
    width: 44px !important;
    height: 44px !important;
    padding: 10px;
    background-clip: content-box;
    line-height: 24px !important;
  }

  /* product page quantity stepper */
  html body.tmc24-theme.tmc24-theme .tmc25-stepper button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* 4. Prices and short numeric values never split mid-token */
  html body.tmc24-theme.tmc24-theme :is(.woocommerce-Price-amount, .amount, bdi) {
    white-space: nowrap !important;
  }

  html body.tmc24-theme.tmc24-theme.woocommerce-checkout .woocommerce-checkout-review-order-table :is(.product-total, tfoot td) {
    text-align: right;
  }

  html body.tmc24-theme.tmc24-theme.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total :is(td, strong) {
    font-size: 20px !important;
  }

  /* 5. Checkout payment method rows: a 44px target for the whole label */
  html body.tmc24-theme.tmc24-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  /* first/last name style pairs stack on phones; every field is the width of its column */
  html body.tmc24-theme.tmc24-theme:is(.woocommerce-checkout, .woocommerce-account, .woocommerce-cart) form .form-row-first,
  html body.tmc24-theme.tmc24-theme:is(.woocommerce-checkout, .woocommerce-account, .woocommerce-cart) form .form-row-last {
    float: none !important;
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  /* login / register / lost-password: the panel is already a card, drop the inner second frame
     that cost ~50px of input width */
  html body.tmc24-theme.tmc24-theme:is(.woocommerce-account, .woocommerce-checkout) .woocommerce :is(
    form.woocommerce-form-login, form.woocommerce-form-register, form.lost_reset_password
  ) {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
}