/*
 * TackQuote storefront: LAYOUT (always loaded, 1.10.0).
 *
 * Only what the controls need to work: where the launcher, drawer, modal and
 * fixed cart bar sit, that `hidden` hides, and that a floating panel has an
 * opaque surface and readable text. Colour, type, borders and spacing are in
 * tack-quotes.css, which "Use the theme's styles only" switches off.
 *
 * Every colour here is a fallback inside var(): the panels take the theme's
 * own palette (theme.json presets `base` / `contrast`, emitted by WordPress as
 * --wp--preset--color--*), and a merchant overrides any --tackquote-* property
 * from Customizer > Additional CSS, the Site Editor's custom CSS, or a theme.
 * Physical sides are written as logical properties, so right-to-left stores are
 * mirrored without a second stylesheet. See docs/CUSTOMISATION.md.
 */

/* `hidden` must win over every display rule below. (Not inside the modal: its
 * error and success lines are shown with jQuery .show(), an inline style.) */
.tack-quote-modal-overlay[hidden],
.tack-quote-list-widget[hidden],
.tack-quote-list-drawer[hidden],
.tack-quote-company-section[hidden],
.tack-quote-page [hidden] {
  display: none !important;
}

/* ── Product page buttons ──────────────────────────────────────────────────── */
.tack-quote-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tackquote-gap, var(--wp--preset--spacing--20, 0.625rem));
  margin-block-start: var(--tackquote-gap, var(--wp--preset--spacing--20, 0.625rem));
}

.tack-quote-buttons > .button {
  margin: 0;
}

/*
 * The quote quantity the plugin prints itself (1.12.0): beside the buttons for a
 * quote-only, out-of-stock or external product, and for a quote-only child in the Add
 * to Cart with Options block's grouped list. Outside WooCommerce's form no theme rule
 * for `form.cart .quantity .qty` reaches it, so it is sized here: as tall as the
 * buttons beside it, and wide enough for a few digits.
 */
.tack-quote-buttons > .quantity {
  display: flex;
  align-self: stretch;
  margin: 0;
}

.tack-quote-buttons > .quantity input.qty,
.wc-block-add-to-cart-with-options-grouped-product-item-selector input.qty[name^="tack_quantity"] {
  box-sizing: border-box;
  width: 4.5em;
  max-width: 100%;
  min-height: 2.6em;
  padding: 0.4em 0.5em;
  border: 1px solid color-mix(in srgb, currentcolor 25%, transparent);
  border-radius: 2px;
  text-align: center;
}

/* A note at the top of the quote list (a grouped product removed, 1.12.0). */
.tack-quote-list-notice {
  margin: 0 0 0.5em;
  font-size: 0.875em;
}

/* "Please choose the quantity …" under the buttons (grouped products, 1.12.0). */
.tack-quote-buttons-notice {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.875em;
}

/* ── Floating launcher + drawer ────────────────────────────────────────────── */
.tack-quote-list-widget {
  position: fixed;

  /* The merchant's offsets (settings) arrive as --tack-fab-x/-y on the element. */
  inset-inline-end: var(--tackquote-launcher-offset-x, var(--tack-fab-x, 20px));
  inset-block-end: var(--tackquote-launcher-offset-y, var(--tack-fab-y, 20px));
  z-index: var(--tackquote-z-index, 99999);
}

.tack-quote-list-widget.tack-fab-left {
  inset-inline-end: auto;
  inset-inline-start: var(--tackquote-launcher-offset-x, var(--tack-fab-x, 20px));
}

.tack-quote-list-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: var(--tackquote-launcher-size, auto);
  margin: 0;
}

.tack-fab-icon {
  display: none;
  flex: 0 0 auto;
}

.tack-fab-icon-only .tack-fab-icon {
  display: inline-block;
}

/* The text stays in the DOM for assistive technology; only the pixels go. */
.tack-fab-icon-only .tack-fab-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tack-fab-no-count .tack-fab-count {
  display: none;
}

.tack-quote-list-drawer {
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: calc(100% + 12px);
  box-sizing: border-box;
  width: var(--tackquote-drawer-width, 22rem);
  max-width: calc(100vw - 40px);
  background-color: var(--tackquote-surface, var(--wp--preset--color--base, #fff));
  color: var(--tackquote-text, var(--wp--preset--color--contrast, #1e1e1e));
}

.tack-fab-left .tack-quote-list-drawer {
  inset-inline-end: auto;
  inset-inline-start: 0;
}

.tack-quote-list-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}

.tack-quote-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
}

.tack-quote-list-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.tack-quote-list-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tack-quote-list-checkout {
  display: block;
  width: 100%;
  text-align: center;
}

@media (max-width: 768px) {

  .tack-quote-list-widget.tack-fab-hide-mobile {
    display: none;
  }
}

/* Narrow phones: always compact, at least 48px tall, lifted above the home
 * indicator; the label stays for assistive technology (aria-label carries it too). */
@media (max-width: 480px) {

  .tack-quote-list-widget {
    inset-block-end: calc(var(--tackquote-launcher-offset-y, var(--tack-fab-y, 20px)) + env(safe-area-inset-bottom, 0px));
  }

  .tack-quote-list-toggle {
    min-width: var(--tackquote-launcher-size, 48px);
    min-height: var(--tackquote-launcher-size, 48px);
  }

  .tack-quote-list-widget .tack-fab-icon {
    display: inline-block;
  }

  .tack-quote-list-widget .tack-fab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ── Request modal ─────────────────────────────────────────────────────────── */
.tack-quote-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: calc(var(--tackquote-z-index, 99999) + 1);
  background-color: var(--tackquote-overlay, rgb(0 0 0 / 0.5));
}

body.tack-quote-modal-open {
  overflow: hidden;
}

.tack-quote-modal {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--tackquote-modal-width, 30rem);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background-color: var(--tackquote-surface, var(--wp--preset--color--base, #fff));
  color: var(--tackquote-text, var(--wp--preset--color--contrast, #1e1e1e));
}

.tack-quote-modal-close {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
}

.tack-quote-field input:not([type="checkbox"]):not([type="radio"]),
.tack-quote-field textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.tack-quote-field-row {
  display: flex;
  gap: 0.75rem;
}

.tack-quote-field-half {
  flex: 1 1 0;

  /* Without min-width:0 a long placeholder makes a flex item refuse to shrink and
     the row overflows the modal on narrow screens. */
  min-width: 0;
}

@media (max-width: 480px) {

  .tack-quote-field-row {
    flex-direction: column;
    gap: 0;
  }
}

.tack-quote-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--tackquote-gap, var(--wp--preset--spacing--20, 0.625rem));
}

.tack-quote-modal-actions .button {
  margin: 0;
}

/* ── Cart page ─────────────────────────────────────────────────────────────── */
.wc-proceed-to-checkout .tack-quote-cart-btn {
  display: block;
  width: 100%;
  text-align: center;
}

/* The Cart block has no server-side slot beside its Proceed button, so the
 * control is fixed to the bottom of the cart page. */
.tack-quote-cart-fixed {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: calc(var(--tackquote-z-index, 99999) - 1);
  padding: 12px 16px;
  padding-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background-color: var(--tackquote-surface, var(--wp--preset--color--base, #fff));
  color: var(--tackquote-text, var(--wp--preset--color--contrast, #1e1e1e));
}

.tack-quote-cart-fixed .tack-quote-cart-btn {
  margin: 0;
}

/* The launcher sits above the fixed cart control. */
body:has(.tack-quote-cart-fixed) .tack-quote-list-widget {
  inset-block-end: calc(var(--tackquote-launcher-offset-y, var(--tack-fab-y, 20px)) + 72px);
}

/* ── Quote page ([tackquote_quote_page]) ───────────────────────────────────── */
.tack-quote-page-table input[type="number"] {
  width: 5.5em;
}

.tack-quote-page-table input.tack-quote-page-target {
  width: 7.5em;
}

/* WooCommerce hides the stacked heading of its own remove cell; a theme that
 * styles only `.product-remove` in the cart table is covered by this too. */
.woocommerce table.shop_table_responsive tr td.tack-quote-page-col-remove::before {
  display: none;
}

.tack-quote-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tackquote-gap, var(--wp--preset--spacing--20, 0.625rem));
}

.tack-quote-page-actions .button {
  margin: 0;
}

/* ── Product cards ─────────────────────────────────────────────────────────── */
.tack-card-quote-btn,
.tack-card-quote-link {
  display: inline-block;
}

/* ── 1.12.0: Cart block control (ExperimentalOrderMeta slot, above Proceed) ── */
.tack-quote-cart-block {
  margin-block: var(--wp--preset--spacing--20, 0.75em) 0;
}

.tack-quote-cart-block .tack-quote-cart-btn {
  display: block;
  width: 100%;
}

/* ── 1.12.0: quick order ─────────────────────────────────────────────────────── */
.tack-quick-order [hidden],
.tack-quick-order-results[hidden],
.tack-quick-order-message[hidden] {
  display: none !important;
}

.tack-quick-order-entry input {
  width: 100%;
  box-sizing: border-box;
}

.tack-quick-order-tools,
.tack-quick-order-actions,
.tack-quick-order-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20, 0.5em);
}

.tack-quick-order-tools .button,
.tack-quick-order-actions .button,
.tack-quick-order-result-actions .button {
  margin: 0;
}

.tack-quick-order-note {
  font-size: var(--wp--preset--font-size--small, 0.875em);
  opacity: 0.8;
}

.tack-quick-order-not_found td,
.tack-quick-order-needs_options td {
  opacity: 0.85;
}

.tack-quick-order-message {
  margin-block: var(--wp--preset--spacing--20, 0.75em);
}

.tack-quick-order-error {
  font-weight: 600;
}

/* ── Product Button block grids: the card control follows the card's button ── */

/* The wrapper wears the Product Button block's own alignment and font-size classes
 * (Tack_Widget::card_wrapper_class()); this mirrors WooCommerce's own layout rules for
 * that block (product-button.css: a centred column, align-left / align-right). */
.wp-block-button.tack-card-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-start: var(--wp--preset--spacing--20, 0.5em);
}

.wp-block-button.tack-card-quote.align-left {
  align-items: flex-start;
}

.wp-block-button.tack-card-quote.align-right {
  align-items: flex-end;
}

/* WooCommerce's own Product Button rules (product-button.css, 11.2.1), so the control
 * sits and sizes like the card's Add to cart: centred inline-flex, the card's line
 * height, normal wrapping (a long label wraps to a second line rather than being cut:
 * a call to action is never truncated), never wider than the card, no extra top margin
 * inside the wrapper. Padding, font and colours are the theme's button, as on Add to
 * cart; the aria-label carries the full text either way. */
.wp-block-button.tack-card-quote > :is(.tack-card-quote-btn, .tack-card-quote-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  margin-block-start: 0;
  line-height: inherit;
  text-align: center;
  white-space: normal;
  word-break: normal;
}

/* 1.13.0: at phone widths a theme with wide button padding (Twenty Twenty-Five: 2.25rem
 * a side) leaves "Add to Quote", longer than "Add to cart", too little room in a card, so
 * it wrapped to two lines and stood taller than the card's own button. At phone widths
 * the card controls only (block grids and the classic loop) take 1em side padding. A
 * viewport query sizes nothing and contains nothing, so it cannot change any layout;
 * wider screens are as in 1.12.0.
 *
 * 768px is the default of WooCommerce's small-screen breakpoint (woocommerce-smallscreen.css
 * is enqueued for `only screen and (max-width: 768px)`). WooCommerce lets a site change
 * that server-side with the `woocommerce_style_smallscreen_breakpoint` filter; a static
 * stylesheet cannot follow the filter, so this uses the default.
 *
 * The selectors carry their own weight rather than relying on which stylesheet prints
 * last: the block-grid control inside its wrapper, and the classic-loop control inside
 * WooCommerce's product list (as specific as WooCommerce's own `ul.products li.product`
 * button rules). */
@media only screen and (max-width: 768px) {
  .wp-block-button.tack-card-quote > :is(.tack-card-quote-btn, .tack-card-quote-link),
  .woocommerce ul.products li.product :is(.tack-card-quote-btn, .tack-card-quote-link) {
    padding-inline: 1em;
  }
}

/* ── Quick order on block themes: inputs take the theme's form styling ───────── */

/* Zero specificity (:where), so any theme or WooCommerce rule for inputs wins; this
 * only replaces the browser's small default inputs that block themes leave unstyled. */
:where(.tack-quick-order) :where(input.input-text, textarea.input-text) {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.5em;
  padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 0.75em);
  font: inherit;
  color: inherit;
  background-color: var(--wp--preset--color--base, transparent);
  border: 1px solid color-mix(in srgb, currentcolor 35%, transparent);
  border-radius: var(--wp--custom--form--border-radius, 0);
}

/* On a narrow screen WooCommerce's responsive tables float each cell's label
 * (`td::before { content: attr(data-title); float: … }`): a cell with no value then
 * collapses and the next row's label rides up over it. The cell contains its float,
 * and an empty one shows a dash. */
@media (max-width: 768px) {

  .tack-quick-order-table td {
    overflow: hidden;
  }
}

.tack-quick-order-table td:empty::after {
  content: "\2013";
}

/* ── Storefront's handheld footer bar (fixed, below 768px) ───────────────────── */

/* Storefront fixes a bar of links to the bottom of small screens (woocommerce.scss,
 * `.storefront-handheld-footer-bar`, links ms(7) = 4.236em tall, hidden from 768px):
 * the launcher sits above it rather than over its cart link. */
@media (max-width: 767px) {

  body:has(.storefront-handheld-footer-bar) {
    --tackquote-bottom-bar: var(--tackquote-bottom-bar-height, 4.236em);
  }

  body:has(.storefront-handheld-footer-bar) .tack-quote-list-widget {
    inset-block-end: calc(var(--tackquote-launcher-offset-y, var(--tack-fab-y, 20px)) + var(--tackquote-bottom-bar) + env(safe-area-inset-bottom, 0px));
  }

  /* The fixed cart control sits on the bar, and the launcher above both. */
  body:has(.storefront-handheld-footer-bar) .tack-quote-cart-fixed {
    inset-block-end: var(--tackquote-bottom-bar);
  }

  body:has(.storefront-handheld-footer-bar):has(.tack-quote-cart-fixed) .tack-quote-list-widget {
    inset-block-end: calc(var(--tackquote-launcher-offset-y, var(--tack-fab-y, 20px)) + 72px + var(--tackquote-bottom-bar) + env(safe-area-inset-bottom, 0px));
  }
}