/* Delivery Site Details - the question block and the shipping notes.
   Loaded whether or not the optional cart/checkout layout is switched on. */

.wcdsd-delivery-questions { margin: .5em 0 1em; font-weight: 400; }
.wcdsd-delivery-questions .wcdsd-q-intro { margin: 0 0 .75em; opacity: .85; }
.wcdsd-delivery-questions .wcdsd-q-row { margin: 0 0 .85em; }
.wcdsd-delivery-questions label { display: block; margin-bottom: .25em; font-weight: 600; }
.wcdsd-delivery-questions select { width: 100%; max-width: 100%; }
.wcdsd-delivery-questions .wcdsd-q-help { display: block; margin-top: .35em; font-size: .85em; opacity: .75; }
.wcdsd-q-title { display: block; margin-bottom: .25em; }
.wcdsd-q-note { font-size: .9rem; opacity: .8; margin: 0; }

.wcdsd-q-place { display: flex; gap: 24px; flex-wrap: wrap; }
.wcdsd-q-place .wcdsd-q-half { flex: 1 1 150px; }

#wcdsd-delivery-heading h3 { margin-bottom: .25em; }
#wcdsd-delivery-heading .wcdsd-delivery-intro { margin: 0 0 1em; opacity: .8; font-size: .9em; }
#wcdsd_forklift_field .description { display: block; margin-top: .35em; font-size: .85em; opacity: .8; }
#wcdsd_address_type_field .optional,
#wcdsd_forklift_field .optional,
#wcdsd_opening_hours_field .optional { display: none; }

/* Two ordinary fields, both the customer's to fill in. The suburb has suggestions attached; the
   postcode is typed. Nothing is locked, because nothing is derived. */
.wcdsd-delivery-questions .wcdsd-q-city,
.wcdsd-delivery-questions .wcdsd-q-postcode { width: 100%; max-width: 100%; }

/* What was actually accepted, so a wrong suburb can be seen rather than discovered on delivery. */
.wcdsd-q-dest { margin: -.35em 0 .85em; font-size: .9em; opacity: .85; }

.wcdsd-q-msg {
  margin: 0 0 .75em; padding: .5em .7em; font-size: .9em; line-height: 1.4;
  border-left: 3px solid var(--wcdsd-action, #c8102e); background: rgba(0, 0, 0, .04);
}

/* The way out when the list does not hold somebody's suburb. A plain, quiet link rather than a
   button: it is not the thing to do, it is the thing to do when the thing to do has not worked. */
.wcdsd-q-manual-link { margin: -.5em 0 .85em; }
.wcdsd-q-manual-toggle {
  padding: 0; border: 0; background: none; font: inherit; font-size: .85em;
  color: inherit; opacity: .75; text-decoration: underline; cursor: pointer;
  /* IT IS A BUTTON, AND THEMES STYLE BUTTONS.
     This is a <button> because it performs an action rather than going anywhere, which is right for
     assistive tech and wrong for every theme that sets white-space: nowrap on buttons -- a sentence
     that cannot wrap simply leaves the card, and on a two-column cart it lands on top of the totals
     beside it. The sentence is also the longest string this plugin renders, and a theme that
     uppercases its buttons makes it longer still, so it is the first thing to overflow anywhere.
     !important because the rule it has to beat is the theme's own button styling, which is written
     however that theme writes it -- .button, .woocommerce button, a utility class -- and matching
     its specificity is not something that can be got right in advance for a theme nobody has seen.
     This is our own element and the declaration only lets text wrap, so there is nothing here for a
     theme to legitimately want otherwise. */
  white-space: normal !important;
  max-width: 100%;
  text-align: left;
  overflow-wrap: break-word;
}
.wcdsd-q-manual-toggle:hover,
.wcdsd-q-manual-toggle:focus { opacity: 1; }
.wcdsd-delivery-questions .wcdsd-q-manual .wcdsd-q-city { width: 100%; max-width: 100%; }

/* A search in flight. Shown in the field, not as a message line: a lookup running is not something
   the customer has to act on, and a line appearing and vanishing under every few keystrokes would be
   more distracting than silence.

   On a wrapper because an <input> cannot carry a pseudo-element, and because animating the input
   itself would spin the whole box. The right-hand padding is reserved whether or not it is
   spinning, so the text never jumps when the spinner appears. */
.wcdsd-q-field { display: block; position: relative; }
.wcdsd-delivery-questions .wcdsd-q-field .wcdsd-q-search { padding-right: 2.4em; }
.wcdsd-q-field.wcdsd-q-searching::after {
  content: ""; position: absolute; right: .8em; top: 50%;
  width: 1em; height: 1em; margin-top: -.5em;
  border: 2px solid var(--wcdsd-accent, #10707d); border-right-color: transparent;
  border-radius: 50%; pointer-events: none;
  animation: wcdsd-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wcdsd-q-field.wcdsd-q-searching::after { animation: none; }
}

/* Looking something up is not a problem, so it does not wear the problem colour. The red rule and
   the plain one sit in the same place and are the same shape, so the line does not jump when one
   replaces the other -- only the colour changes, and a small spinner marks it as in progress. */
.wcdsd-q-msg.wcdsd-q-msg-busy {
  border-left-color: var(--wcdsd-accent, #10707d);
  opacity: .85;
}
.wcdsd-q-msg.wcdsd-q-msg-busy::before {
  content: ""; display: inline-block; vertical-align: -.15em;
  width: .85em; height: .85em; margin-right: .5em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  /* wcdsd-spin is defined once, with the freight spinner further down. */
  animation: wcdsd-spin .7s linear infinite;
}

/* Somebody who has asked not to see motion still gets the line; it simply does not turn. */
@media (prefers-reduced-motion: reduce) {
  .wcdsd-q-msg.wcdsd-q-msg-busy::before { animation: none; }
}

/* NOT the same as Proceed to checkout, deliberately. They are not the same kind of thing: pressing
   this recalculates a price and leaves you on the cart, while Proceed to checkout is the one action
   that ends the page. Two identical buttons stacked in one view make the customer decide which is
   the real one; an outline against the filled primary answers that at a glance.

   Setting Button colour fills it back in solid -- see the --wcdsd-button-fill and -text variables,
   which the settings screen sets together when a colour is given and leaves alone when it is not.

   THE SPECIFICITY AND THE !important ARE BOTH DELIBERATE. The button carries WooCommerce's own
   "button" class so that it still looks like a button if this stylesheet never loads -- and that
   class is what themes and WooCommerce core style, through selectors like `.woocommerce
   button.button`, which outranks a two-class selector of ours however late it loads. The first
   version of this rule lost that fight silently and the button stayed whatever the theme had made
   it. Overriding a theme we do not control is what !important is actually for. */
.wcdsd-q-calc-row { margin: 0; }

.wcdsd-delivery-questions button.wcdsd-q-calc,
.woocommerce .wcdsd-delivery-questions button.wcdsd-q-calc,
.woocommerce-cart .wcdsd-delivery-questions button.wcdsd-q-calc,
.woocommerce-checkout .wcdsd-delivery-questions button.wcdsd-q-calc {
  display: block; width: 100%; margin: 0; padding: 12px 18px;
  border: 2px solid var(--wcdsd-button, var(--wcdsd-accent, #10707d)) !important; border-radius: 8px;
  background: var(--wcdsd-button-fill, transparent) !important;
  color: var(--wcdsd-button-text, var(--wcdsd-accent, #10707d)) !important;
  font-weight: 600; font-size: 1em; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer; opacity: 1;
}

/* Filled on hover, which is where it becomes the thing being pressed. */
.wcdsd-delivery-questions button.wcdsd-q-calc:hover,
.wcdsd-delivery-questions button.wcdsd-q-calc:focus,
.woocommerce .wcdsd-delivery-questions button.wcdsd-q-calc:hover,
.woocommerce .wcdsd-delivery-questions button.wcdsd-q-calc:focus {
  background: var(--wcdsd-button-hover, var(--wcdsd-accent-hover, #0c5a64)) !important;
  border-color: var(--wcdsd-button-hover, var(--wcdsd-accent-hover, #0c5a64)) !important;
  color: #fff !important;
}

.wcdsd-delivery-questions button.wcdsd-q-calc[disabled],
.wcdsd-delivery-questions button.wcdsd-q-calc[disabled]:hover,
.woocommerce .wcdsd-delivery-questions button.wcdsd-q-calc[disabled] {
  background: var(--wcdsd-button, var(--wcdsd-accent, #10707d)) !important;
  border-color: var(--wcdsd-button, var(--wcdsd-accent, #10707d)) !important;
  color: #fff !important;
  opacity: .65; cursor: progress;
}

/* Waiting on the carrier.
   Freight can take a few seconds to come back, and an unchanged page in the meantime looks like a
   button that did nothing. The options stay readable underneath -- greyed and un-clickable, so it
   is clear they are being replaced rather than gone. */
/* THE CELL, NOT THE ROW. .woocommerce-shipping-totals is a <tr>, and position:relative on a table
   row is not something browsers agree about -- it takes the cells out of the table's own sizing and
   they shrink-wrap, so the shipping options collapsed into a narrow column for exactly as long as
   the spinner was up. The <td> is an ordinary block as far as positioning goes and behaves.

   Greying the cell alone also leaves the "Shipment" label at full strength, which is right: the
   label is not what is being recalculated. */
.wcdsd-freight-loading .woocommerce-shipping-totals td,
.wcdsd-freight-loading .woocommerce-checkout-review-order-table #shipping_method {
  position: relative; opacity: .45; pointer-events: none;
}
.wcdsd-freight-loading .woocommerce-shipping-totals td::after,
.wcdsd-freight-loading .woocommerce-checkout-review-order-table #shipping_method::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px;
  margin: -11px 0 0 -11px; border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .2); border-top-color: var(--wcdsd-accent, #10707d);
  animation: wcdsd-spin .7s linear infinite;
}
@keyframes wcdsd-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .wcdsd-freight-loading .woocommerce-shipping-totals td::after,
  .wcdsd-freight-loading .woocommerce-checkout-review-order-table #shipping_method::after {
    animation: none;
  }
}

/* the note under each shipping option */
.wcdsd-ship-note {
  display: block; font-weight: 400; opacity: .75; line-height: 1.35; margin-top: .25em;
}

/* Google's own dropdown, from the legacy widget, has to clear the checkout panels */
.pac-container { z-index: 100000; }

/* Ours, from the new Places API. The widget that API ships is a web component that would replace
   the suburb input entirely, so the suggestions are drawn here instead and the field stays an
   ordinary text box -- see attachNewPlaces() for why that matters. */
.wcdsd-q-suggest {
  display: block; position: absolute; z-index: 100000; margin-top: -.5em;
  min-width: 18em; max-width: 34em; max-height: 16em; overflow-y: auto;
  background: #fff; border: 1px solid rgba(0, 0, 0, .18); border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}
.wcdsd-q-suggest[hidden] { display: none; }
.wcdsd-q-suggest-row {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: .5em .7em; border: 0; background: none; cursor: pointer;
  font: inherit; line-height: 1.35; color: inherit;
}
.wcdsd-q-suggest-row:hover,
.wcdsd-q-suggest-row:focus { background: rgba(0, 0, 0, .06); }

/* The list is positioned against the row that holds the field, so that row has to be the
   containing block. position:relative on its own moves nothing; it only gives the absolute
   positioning above something to measure from. */
.wcdsd-delivery-questions .wcdsd-q-row { position: relative; }

/* optional removals */
.woocommerce-cart.wcdsd-hide-coupon .coupon { display: none !important; }
.woocommerce-cart.wcdsd-hide-calculator .woocommerce-shipping-calculator,
.woocommerce-cart.wcdsd-hide-calculator .shipping-calculator-button,
.woocommerce-cart.wcdsd-hide-calculator .woocommerce-shipping-destination { display: none !important; }