/*
 * WooCommerce front end — brand styling for the WCPA option fields.
 *
 * Loaded on product, cart and checkout: the same plugin renders the option pickers on the product
 * page and the chosen values in the order summary, so both live here rather than in two files.
 *
 * WCPA (Acowebs Custom Product Addons) themes itself through CSS custom properties it prints on
 * :root, so the first block below just re-points those at the Fan Pajamas palette instead of
 * fighting the plugin's rules one by one. They are declared on the field wrapper rather than on
 * :root because the plugin's own :root block is inline in the page and would otherwise win on
 * load order; custom properties inherit, so declaring them here reaches every field inside.
 *
 * The selected state is then written out explicitly. The plugin marks a chosen option with only
 * `outline: solid 2px var(--wcpacheckbuttonselectioncolor)` — a light grey ring on a light blue
 * chip, which on this site was almost invisible: selected and unselected computed to the same
 * background and the same border, so nothing on the page showed which size was picked.
 */

.wcpa_wrap,
.wcpa_form_outer {
  /* option chips (Department, Size) */
  --wcpacheckbuttoncolor: #ffffff;
  --wcpacheckbuttonbordercolor: #d8e1f0;
  --wcpacheckbuttonborder: 1px;
  --wcpacheckbuttonradius: 10px;
  --wcpachecklabelcolor: #061e4a;
  --wcpachecklabelsize: 14px;
  /* our own selected style replaces the outline, so it is turned off here */
  --wcpacheckbuttonselectioncolor: transparent;

  /* field labels, text inputs, focus ring */
  --wcpalabelcolor: #061e4a;
  --wcpainputcolor: #24334d;
  --wcpainputbgcolor: #ffffff;
  --wcpabordercolor: #d8e1f0;
  --wcpabordercolorfocus: #061e4a;
  --wcpaborderradius: 10px;
  --wcpadesccolor: #5c6d8c;
  --wcpaerrorcolor: #f7192d;

  /* radios/checkboxes that are NOT in button mode, and the qty stepper */
  --wcpacheckbgcolor: #061e4a;
  --wcparadiobgcolor: #061e4a;
  --wcparadiobordercolor: #d8e1f0;
  --wcparadioselbordercolor: #061e4a;
  --wcpacheckbordercolor: #d8e1f0;
  --wcpabuttoncolor: #061e4a;
  --wcpabuttontextcolor: #ffffff;
  --wcpaqtybuttoncolor: #e9eff9;
  --wcpaqtybuttonhovercolor: #d8e1f0;
  --wcpaqtybuttontextcolor: #061e4a;
  --wcpaimageselectionoutline: #061e4a;
  --wcpaimagetickbg: #061e4a;
  --wcpaimagemagnifierbg: #061e4a;
}

/* ---------- option chips ---------- */

.wcpa_wrap .wcpa_check_ui_button .wcpa_checkbox label,
.wcpa_wrap .wcpa_check_ui_button .wcpa_radio label {
  padding: 9px 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.wcpa_wrap .wcpa_check_ui_button .wcpa_checkbox:not(.wcpa_selected) label:hover,
.wcpa_wrap .wcpa_check_ui_button .wcpa_radio:not(.wcpa_selected) label:hover {
  border-color: #061e4a;
  background: #f4f7fc;
}

/*
 * Selected: filled navy, matching the ADD TO CART button. Written at `body .wcpa_wrap …` so it
 * outranks the plugin's own `.wcpa_wrap .wcpa_check_ui_button .wcpa_radio label` background.
 */
body .wcpa_wrap .wcpa_check_ui_button .wcpa_checkbox.wcpa_selected label,
body .wcpa_wrap .wcpa_check_ui_button .wcpa_radio.wcpa_selected label {
  border-color: #061e4a;
  background: #061e4a;
  color: #ffffff;
  outline: none;
}

/* The real <input> is visually hidden, so the keyboard ring has to be drawn on its label. */
.wcpa_wrap .wcpa_check_ui_button .wcpa_checkbox label:has(input:focus-visible),
.wcpa_wrap .wcpa_check_ui_button .wcpa_radio label:has(input:focus-visible) {
  outline: 3px solid rgba(6, 30, 74, .28);
  outline-offset: 2px;
}

/* Size chips read as a set when they share a width; Department is left to size to its text. */
.wcpa_wrap .wcpa_type_radio-group .wcpa_fl_inline { display: flex; flex-wrap: wrap; gap: 8px; }
.wcpa_wrap .wcpa_type_radio-group .wcpa_radio { margin: 0; }

/* ---------- field labels ---------- */

.wcpa_wrap .wcpa_field_label {
  color: #061e4a;
  font-weight: 700;
}
.wcpa_wrap .wcpa_required_ast { color: #f7192d; }

/* ---------- text inputs (Custom Name / Custom Number) ---------- */

.wcpa_wrap input[type="text"],
.wcpa_wrap input[type="number"],
.wcpa_wrap textarea,
.wcpa_wrap select {
  border-radius: 10px;
  color: #24334d;
}
.wcpa_wrap input[type="text"]:focus,
.wcpa_wrap input[type="number"]:focus,
.wcpa_wrap textarea:focus,
.wcpa_wrap select:focus {
  border-color: #061e4a;
  box-shadow: 0 0 0 3px rgba(6, 30, 74, .12);
  outline: none;
}

/* ---------- WCPA option meta in the cart / checkout order summary ----------------------------
 * Each option renders as
 *   <li class="wcpa_cart_meta_item"><p class="…-label">Size:</p><div class="…-value"><p>XL</p></div></li>
 * and the plugin sets the row to `flex-wrap: wrap` with a 5px bottom margin under the label. In a
 * narrow order column that pushed the longer labels' values ("Custom Name Here:") onto a second
 * line, so half the options read as two lines and half as one.
 *
 * The selectors below mirror the plugin's own depth on purpose: it styles these through
 * `.wcpa_cart_meta .wcpa_cart_meta_item` and
 * `.wcpa_cart_meta .wcpa_cart_meta_item .wcpa_cart_meta_item-label`, which out-rank a single class.
 * Written flat, the rules looked applied but lost — the rows only happened to fit because the
 * smaller font made them narrow enough, and a longer name would have broken them again.
 *
 * Wrapping is left ON. With the label's margin gone and the type at 12px, ordinary values sit
 * inline — which is the point — and only a value too long for the remaining space drops to a
 * second line. Forcing `nowrap` instead looked fine until a long custom name was tried on a
 * phone: the row could not break, so flex squeezed the value box to 20px and stacked the name one
 * character per line, 297px tall, and pushed the page into horizontal scroll.
 *
 * `overflow-wrap: break-word`, not `anywhere`: `anywhere` also drops the box's min-content width
 * to a single character, which is what let flex collapse it that far.
 */
.wcpa_cart_meta {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wcpa_cart_meta .wcpa_cart_meta_item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  margin: 0 0 3px;
  font-size: 12px;
  line-height: 1.45;
}
.wcpa_cart_meta .wcpa_cart_meta_item .wcpa_cart_meta_item-label {
  flex: 0 0 auto;
  margin: 0;
  color: #061e4a;
  font-size: 12px;
  font-weight: 700;
}

/*
 * Keeping the label on one line is only safe where there is room for it. In the checkout summary
 * on a phone the meta sits in a 129px column beside the 60px thumbnail, and the longest label
 * ("Custom Number Here:") measures 129px on its own — so `nowrap` raised the cell's min-content
 * width until the whole order table grew to 366px and pushed the page into horizontal scroll.
 * Above 640px the column is wide enough and the labels hold their line.
 */
@media (min-width: 641px) {
  .wcpa_cart_meta .wcpa_cart_meta_item .wcpa_cart_meta_item-label { white-space: nowrap; }
}
.wcpa_cart_meta .wcpa_cart_meta_item .wcpa_cart_meta_item-value {
  flex: 1 1 auto;
  font-size: 12px;
}
.wcpa_cart_meta .wcpa_cart_meta_item .wcpa_cart_meta_item-value p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: break-word;
}
.wcpa_cart_meta .wcpa_cart_meta_item-value span { font-size: inherit; }
.wcpa_cart_meta .wcpa_cart_price { color: #5c6d8c; }

/* ---------- Checkout order row on phones ------------------------------------------------------
 * The theme lays each order row out as [60px thumbnail | info], and on a 390px screen the table
 * only gives the whole cell ~150px — so the info column ends up around 51px and the product title
 * breaks mid-word ("Custo / m"). That is the theme's own layout, not the option meta: measuring
 * with this stylesheet disabled gives an even narrower 51px against 61px with it on.
 *
 * Letting the info block wrap onto its own full-width line under the thumbnail takes it to ~134px,
 * which is enough for the title to break on word boundaries and for the shorter option rows
 * ("Department:", "Size:") to sit inline.
 */
@media (max-width: 640px) {
  .woocommerce-checkout-review-order-table .co-wrap-item,
  .shop_table .co-wrap-item {
    flex-wrap: wrap;
  }
  .woocommerce-checkout-review-order-table .co-wrap-info,
  .shop_table .co-wrap-info {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }
}

/* ---------- Checkout order table column split on phones ---------------------------------------
 * With `table-layout: auto` the browser sizes the two columns by how much text each wants, and the
 * shipping line — "Standard Shipping (5-14 business days): $5.99" — is far longer than anything on
 * the left. That handed the price column 148px of a 299px table, an even split for a column whose
 * widest real content is "$51.99", and squeezed the product column to 151px: the title broke
 * mid-word and the option rows had nowhere to sit inline.
 *
 * Pinning the split puts the space where the content is. Measured at 390px: product column
 * 151 -> 208px, price column 148 -> 107px (still comfortable for the totals, the shipping phrase
 * simply wraps), and all four option rows fit on one line.
 */
@media (max-width: 640px) {
  .order-review {
    padding-left: 12px;
    padding-right: 12px;
  }
  .woocommerce-checkout-review-order-table {
    width: 100%;
    table-layout: fixed;
  }
  .woocommerce-checkout-review-order-table th:first-child,
  .woocommerce-checkout-review-order-table td:first-child { width: 66%; }
  .woocommerce-checkout-review-order-table th:last-child,
  .woocommerce-checkout-review-order-table td:last-child { width: 34%; }
  /* Fixed layout cannot widen a column to fit an over-long word, so let words break instead. */
  .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout-review-order-table td { overflow-wrap: break-word; }

  /* Room recovered above is enough to hold the labels on one line again. */
  .wcpa_cart_meta .wcpa_cart_meta_item .wcpa_cart_meta_item-label { white-space: nowrap; }

  /*
   * The narrower price column costs the two text-heavy cells their comfortable width: the header
   * split "SUBTOTAL" into "SUBT / OTAL", and the shipping line came apart into six one-word rows.
   * Dropping their type a step — and the header's tracking, which alone was worth several
   * characters — fits both back together without touching the column split.
   */
  /* `body` prefix on purpose: style-woo-pages.css sets `.woocommerce-checkout-review-order thead
     th { font-size: 105% }` at the same specificity and loads after this file, so a flat selector
     lost the tie and the header stayed at 16.8px. */
  body .woocommerce-checkout-review-order-table thead th {
    font-size: 11px;
    letter-spacing: 0;
  }
  .woocommerce-checkout-review-order-table tfoot th,
  .woocommerce-checkout-review-order-table tfoot td {
    font-size: 13px;
    line-height: 1.5;
  }
}