/* POOQ shipping messaging - cart, checkout, fly cart, rate labels, address fields.
   Managed as a file: wp-content/mu-plugins/05-pooq-shipping/pooq-shipping.css
   Palette and font follow pooq-nav.css: brown #876333, cream #f3efea, copper #B66C40, Play. */

:root {
  --pooq-ship-brown: #876333;
  --pooq-ship-cream: #f3efea;
  --pooq-ship-copper: #B66C40;
  --pooq-ship-green: #2e7d4f;
}

/* ---------------------------------------------------------------- message */

.pooq-ship-msg {
  font-family: Play, sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  padding: 10px 12px;
  border-left: 3px solid var(--pooq-ship-copper);
  background: var(--pooq-ship-cream);
  color: #5c4a33;
}

.pooq-ship-msg strong { color: var(--pooq-ship-brown); font-weight: 700; }

.pooq-ship-msg .amount,
.pooq-ship-msg .woocommerce-Price-amount {
  font-weight: 700;
  color: var(--pooq-ship-brown);
  white-space: nowrap;
}

.pooq-ship-msg.is-reached {
  border-left-color: var(--pooq-ship-green);
  color: #2b4d39;
}

.pooq-ship-msg.is-reached strong { color: var(--pooq-ship-green); }

.pooq-ship-tick {
  display: inline-block;
  margin-right: 6px;
  font-weight: 700;
  color: var(--pooq-ship-green);
}

/* Progress bar. Fly cart only - the cart and checkout messages live in a table row where a bar
   reads as clutter next to the totals. */
.pooq-ship-track {
  display: block;
  height: 4px;
  margin-top: 8px;
  background: rgba(135, 99, 51, .16);
  overflow: hidden;
}

.pooq-ship-fill {
  display: block;
  height: 100%;
  background: var(--pooq-ship-copper);
  transition: width .3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .pooq-ship-fill { transition: none; }
}

/* ---------------------------------------------------------------- placements */

/* Cart + checkout totals tables. The row is injected into an existing <table>, so it has to
   neutralise the theme's cell borders to avoid reading as a totals line of its own. */
.pooq-ship-tr td {
  padding: 0 0 12px !important;
  border: 0 !important;
  background: transparent !important;
}

.pooq-ship-flycart {
  padding: 0 15px 12px;
}

.pooq-ship-flycart .pooq-ship-msg {
  padding: 9px 11px;
  font-size: 13px;
}

/* ---------------------------------------------------------------- rate labels */

.pooq-ship-logo {
  height: 16px;
  width: auto;
  max-width: 58px;
  margin-right: 7px;
  vertical-align: -3px;
  display: inline-block;
}

.pooq-ship-free {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-family: Play, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--pooq-ship-green);
}

/* NOTE: the layout of the shipping rows themselves now belongs to the pooq-checkout plugin, which
   is loaded on exactly the two pages where #shipping_method appears. The rules that used to live
   here were written with an id selector (#shipping_method li) and therefore beat pooq-checkout's
   class-scoped ones, silently overriding its padding. Do not reintroduce them; style the rows in
   pooq-checkout/assets/css/pooq-checkout.css. What stays here is only what decorates the LABEL,
   because the label content is produced by this plugin. */

/* ---------------------------------------------------------------- fly cart upsell button */

/* The suggested-products "add to cart" button is WooCommerce's [add_to_cart] shortcode, so it
   carries .button .add_to_cart_button and picks up whichever of the theme's or the plugin's link
   colours wins. woo-fly-cart paints it #222 on #ffffff, but .woofc-area .woofc-suggested a sets
   colour:#fff on the same element, and Impreza styles a.add_to_cart_button too - the outcome
   depends on load order and has been reported as white text on a white button.
   The fly cart panel (.woofc-inner) is brand brown #876333, so pin the button to cream-on-brown
   in every state and stop depending on that race. */
.woofc-area .woofc-suggested .woofc-suggested-product-atc a.button,
.woofc-area .woofc-suggested .woofc-suggested-product-atc .button,
.woofc-area .woofc-suggested .woofc-suggested-product-atc a.add_to_cart_button {
  background-color: var(--pooq-ship-cream);
  color: var(--pooq-ship-brown);
  border: 1px solid var(--pooq-ship-cream);
  font-family: Play, sans-serif;
  font-weight: 700;
  text-decoration: none;
  opacity: 1;
}

.woofc-area .woofc-suggested .woofc-suggested-product-atc a.button:hover,
.woofc-area .woofc-suggested .woofc-suggested-product-atc .button:hover,
.woofc-area .woofc-suggested .woofc-suggested-product-atc a.button:focus,
.woofc-area .woofc-suggested .woofc-suggested-product-atc a.add_to_cart_button:hover {
  background-color: #fff;
  color: #6f5129;
  border-color: #fff;
}

/* The "loading" and "added" states swap classes rather than markup, so they need the same pin or
   the label disappears mid-interaction. */
.woofc-area .woofc-suggested .woofc-suggested-product-atc .button.loading,
.woofc-area .woofc-suggested .woofc-suggested-product-atc .button.added {
  background-color: var(--pooq-ship-cream);
  color: var(--pooq-ship-brown);
}

/* WooCommerce appends a "View cart" link after a successful ajax add. It inherits the panel's
   white link colour, which is correct on brown - just make it read as secondary. */
.woofc-area .woofc-suggested .woofc-suggested-product-atc a.added_to_cart {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  text-decoration: underline;
  color: #fff;
}

/* ---------------------------------------------------------------- checkout notice */

.pooq-ship-notice {
  font-family: Play, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b6157;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: rgba(135, 99, 51, .06);
}

.pooq-ship-notice a { color: var(--pooq-ship-brown); text-decoration: underline; }
.pooq-ship-notice a:hover { color: #6f5129; }

/* ---------------------------------------------------------------- address fields */

/* The store sells and ships to Greece only, so WooCommerce core already renders the country as a
   single-option locked <select> carrying .country_to_state--single. It only LOOKS like a live
   dropdown here because us-core dequeues every WooCommerce stylesheet
   (us-core/plugins-support/woocommerce.php: woocommerce_enqueue_styles -> empty array), so Woo's
   own rule never loads. This restores exactly that rule. */
.woocommerce form .form-row .country_to_state--single,
.woocommerce-page form .form-row .country_to_state--single {
  background: 0 0;
  background-image: none;
  border: 0;
  padding: 0;
  width: auto;
  font: inherit;
  font-weight: 700;
  color: inherit;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}