/* Delivery Site Details - optional single-column cart and checkout layout.
   Everything is scoped to body.wcdsd-styled, so turning the setting off in
   WooCommerce > Delivery Details removes all of it. Colours and width come
   from the custom properties set inline by the plugin. */

body.wcdsd-styled.woocommerce-cart .woocommerce,
body.wcdsd-styled.woocommerce-checkout .woocommerce {
  max-width: var(--wcdsd-max-width, 1100px);
  margin: 0 auto;
  padding: 40px 24px 72px;
  color: #1f2a30;
}

.wcdsd-styled .wcdsd-page-title { font-size: 2rem; line-height: 1.2; margin: 0 0 6px; font-weight: 700; }
.wcdsd-styled .wcdsd-page-sub { margin: 0 0 28px; color: #5c6670; font-size: .95rem; }

/* WOOCOMMERCE'S OWN CART LAYOUT, WHICH PUTS THIS PLUGIN'S BLOCK IN A 48% COLUMN.
   WooCommerce ships `.cart-collaterals .cart_totals { float: right; width: 48% }`, and the delivery
   questions are rendered INSIDE .cart_totals -- deliberately, because WooCommerce replaces that
   whole element on every cart refresh and a block moved into it by script would be destroyed. So
   the theme's own stylesheet decides how wide this plugin's fields are, and on a stock cart that is
   under half the page: two dropdowns, a search box and a button in a column meant for a totals
   table.

   This had to be pasted into each site's custom CSS to fix, once per site, by hand -- and only
   works if the site HAS somewhere to paste custom CSS.

   !important IS DELIBERATE, and is the same judgement as the Calculate button in core.css. The
   selector below already outranks WooCommerce's own by a class, but this is a fight with stylesheets
   we do not control and have not seen: themes restate this float constantly, often more specifically
   than core does, and losing silently means a cramped cart on a site nobody is looking at. Blank is
   not an option here -- either this plugin lays the cart out or it does not, and .wcdsd-styled is
   exactly the switch that says which.

   Scoped to .wcdsd-styled, so a site that turns this plugin's cart styling off keeps its theme's
   layout untouched, floats and all. */
.wcdsd-styled.woocommerce-cart .cart-collaterals,
.wcdsd-styled.woocommerce-page .cart-collaterals {
  width: 100% !important;
  float: none !important;
}
.wcdsd-styled.woocommerce-cart .cart-collaterals .cart_totals,
.wcdsd-styled.woocommerce-page .cart-collaterals .cart_totals {
  width: 100% !important;
  float: none !important;
  max-width: none !important;
}
/* Cross-sells sit in the other half of that same float pair. Left floated beside a now-full-width
   totals card, they overlap it. */
.wcdsd-styled.woocommerce-cart .cart-collaterals .cross-sells,
.wcdsd-styled.woocommerce-page .cart-collaterals .cross-sells {
  width: 100% !important;
  float: none !important;
}
/* Whatever the float leaves behind, so the next section does not ride up into the card. */
.wcdsd-styled.woocommerce-cart .cart-collaterals::after,
.wcdsd-styled.woocommerce-page .cart-collaterals::after {
  content: "";
  display: table;
  clear: both;
}

/* cards */
.wcdsd-styled .cart_totals,
.wcdsd-styled.woocommerce-checkout #customer_details,
.wcdsd-styled.woocommerce-checkout #order_review,
.wcdsd-styled.woocommerce-checkout .woocommerce-additional-fields {
  background: #fff; border: 1px solid #e6eaee; border-radius: 12px;
  padding: 24px; margin: 0 0 22px; box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

/* the cards have to measure the same, so padding goes inside the width */
.wcdsd-styled .cart_totals,
.wcdsd-styled.woocommerce-checkout #customer_details,
.wcdsd-styled.woocommerce-checkout #order_review,
.wcdsd-styled.woocommerce-checkout .woocommerce-additional-fields,
.wcdsd-styled .cart_totals * { box-sizing: border-box; }

/* A panel rather than a rule down the side. The bar was doing the job of separating this from the
   totals beside it; a filled card does that better and does not need the column to start with a
   hard edge. Padding is even now that nothing is anchored to the left. */
.wcdsd-styled #wcdsd-cart-questions {
  background: var(--wcdsd-card, #f4f7f7);
  border-radius: 10px;
  /* Padding follows the panel. With no panel to sit inside, twenty pixels of nothing would just
     indent the block away from everything it lines up with. */
  padding: var(--wcdsd-card-pad, 20px 22px 24px); margin: 0 0 22px;
}

.wcdsd-styled .coupon { display: flex; gap: 10px; align-items: center; margin: 18px 0 0; }
.wcdsd-styled .coupon #coupon_code { flex: 1 1 auto; width: auto !important; min-width: 0; }

.wcdsd-styled .wcdsd-q-title,
.wcdsd-styled .cart_totals h2,
.wcdsd-styled #order_review_heading,
.wcdsd-styled .woocommerce-billing-fields h3,
.wcdsd-styled .woocommerce-shipping-fields h3,
.wcdsd-styled #wcdsd-delivery-heading h3 {
  font-size: 1.1rem; font-weight: 700; margin: 0 0 16px; padding-bottom: 12px;
  border-bottom: 1px solid #eef1f4;
}
.wcdsd-styled #order_review_heading { padding-left: 0; margin: 28px 0 12px; }

/* one column */
.wcdsd-styled.woocommerce-checkout .col2-set,
.wcdsd-styled.woocommerce-checkout .col2-set .col-1,
.wcdsd-styled.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; margin: 0; }
.wcdsd-styled.woocommerce-checkout .col2-set .col-2 { margin-top: 24px; }

/* fields */
.wcdsd-styled .woocommerce form .form-row { width: 100%; float: none; margin: 0 0 18px; padding: 0; }
.wcdsd-styled .woocommerce form .form-row label {
  display: block; font-weight: 600; margin-bottom: 6px; font-size: .9rem;
}
.wcdsd-styled .woocommerce form .form-row input.input-text,
.wcdsd-styled .woocommerce form .form-row textarea,
.wcdsd-styled .woocommerce form .form-row select,
.wcdsd-styled .wcdsd-delivery-questions select,
.wcdsd-styled .wcdsd-delivery-questions input[type="text"] {
  width: 100%; padding: 12px 14px; border: 1px solid #d6dbe0; border-radius: 8px;
  background: #fff; font-size: 15px; line-height: 1.4; color: #1f2a30;
}
.wcdsd-styled .woocommerce form .form-row input.input-text:focus,
.wcdsd-styled .woocommerce form .form-row textarea:focus,
.wcdsd-styled .woocommerce form .form-row select:focus,
.wcdsd-styled .wcdsd-delivery-questions select:focus,
.wcdsd-styled .wcdsd-delivery-questions input[type="text"]:focus {
  border-color: var(--wcdsd-accent, #10707d);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
  outline: none;
}
.wcdsd-styled .woocommerce form .form-row textarea { border: 1px solid #d6dbe0; min-height: 96px; }
.wcdsd-styled .woocommerce form .form-row abbr.required {
  color: var(--wcdsd-action, #c8102e); text-decoration: none;
}

/* helper text should read as helper text, not as a tooltip banner */
.wcdsd-styled.woocommerce-checkout .form-row .description {
  position: static !important; float: none !important;
  background: none !important; background-color: transparent !important;
  color: #5c6670 !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; margin: .35em 0 0 !important; font-size: .85rem !important;
  border-radius: 0 !important; width: auto !important; max-width: none !important;
}
.wcdsd-styled.woocommerce-checkout .form-row .description::before,
.wcdsd-styled.woocommerce-checkout .form-row .description::after { display: none !important; }

@media (min-width: 600px) {
  .wcdsd-styled .woocommerce form .form-row-first,
  .wcdsd-styled .woocommerce form .form-row-last {
    width: calc(50% - 9px); display: inline-block; vertical-align: top;
  }
  .wcdsd-styled .woocommerce form .form-row-first { margin-right: 14px; }
}

@media (min-width: 782px) {
  .wcdsd-styled #billing_city_field, .wcdsd-styled #billing_state_field, .wcdsd-styled #billing_postcode_field,
  .wcdsd-styled #shipping_city_field, .wcdsd-styled #shipping_state_field, .wcdsd-styled #shipping_postcode_field {
    width: calc(33.333% - 10px); display: inline-block; vertical-align: top; margin-right: 14px;
  }
  .wcdsd-styled #billing_postcode_field, .wcdsd-styled #shipping_postcode_field { margin-right: 0; }
  .wcdsd-styled #billing_phone_field, .wcdsd-styled #billing_email_field {
    width: calc(50% - 9px); display: inline-block; vertical-align: top;
  }
  .wcdsd-styled #billing_phone_field { margin-right: 14px; }
}

/* shipping options */
.wcdsd-styled #shipping_method { margin: 0; padding: 0; }
.wcdsd-styled #shipping_method li {
  list-style: none; margin: 0 0 10px; padding: 12px 14px;
  border: 1px solid #e6eaee; border-radius: 10px; background: #fbfcfd;
}
.wcdsd-styled #shipping_method li label { font-weight: 600; }

/* THE TOTALS TABLE. These four rules were once written for `table.shop_table` unqualified, which on
   a cart page is two different tables: this one, which this plugin lays out inside its own card, and
   the items table, which belongs to the theme. Splitting the items table into its own stylesheet so
   a site can decline it (see cart-items.css) meant the shared half had to be said somewhere, and
   here is where it belongs -- these are the totals card's own rules, not a cart-wide default. */
.wcdsd-styled.woocommerce-cart .cart_totals table.shop_table {
  border: none; margin: 0; width: 100%; table-layout: auto;
}
.wcdsd-styled.woocommerce-cart .cart_totals table.shop_table th {
  text-align: left; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase;
  color: #5c6670; border-bottom: 1px solid #eef1f4; padding: 0 8px 12px 0;
}
.wcdsd-styled.woocommerce-cart .cart_totals table.shop_table td {
  padding: 16px 8px 16px 0; border-bottom: 1px solid #f2f4f6; vertical-align: middle;
}

/* totals, no inner grid inside the cards */
.wcdsd-styled .cart_totals table.shop_table th { width: 45%; font-weight: 600; }
.wcdsd-styled.woocommerce-checkout #order_review table.shop_table,
.wcdsd-styled.woocommerce-checkout #order_review table.shop_table thead,
.wcdsd-styled.woocommerce-checkout #order_review table.shop_table tbody,
.wcdsd-styled.woocommerce-checkout #order_review table.shop_table tfoot,
.wcdsd-styled.woocommerce-checkout #order_review table.shop_table tr,
.wcdsd-styled .cart_totals table.shop_table,
.wcdsd-styled .cart_totals table.shop_table tbody,
.wcdsd-styled .cart_totals table.shop_table tr { border: none; }

.wcdsd-styled.woocommerce-checkout #order_review table.shop_table th,
.wcdsd-styled.woocommerce-checkout #order_review table.shop_table td,
.wcdsd-styled .cart_totals table.shop_table th,
.wcdsd-styled .cart_totals table.shop_table td {
  border: none; border-bottom: 1px solid #f2f4f6; padding: 14px 0;
}
.wcdsd-styled.woocommerce-checkout #order_review table.shop_table tfoot tr:last-child th,
.wcdsd-styled.woocommerce-checkout #order_review table.shop_table tfoot tr:last-child td,
.wcdsd-styled .cart_totals table.shop_table tr:last-child th,
.wcdsd-styled .cart_totals table.shop_table tr:last-child td { border-bottom: none; }

.wcdsd-styled .order-total .amount,
.wcdsd-styled .cart-subtotal .amount { color: var(--wcdsd-action, #c8102e); font-weight: 700; }

/* buttons */
.wcdsd-styled .woocommerce #place_order,
.wcdsd-styled .woocommerce .checkout-button,
.wcdsd-styled .woocommerce button.button.alt {
  background: var(--wcdsd-action, #c8102e); color: #fff; border: none; border-radius: 8px;
  padding: 13px 22px; font-weight: 700; font-size: .95rem; width: 100%; cursor: pointer;
}
.wcdsd-styled .woocommerce #place_order:hover,
.wcdsd-styled .woocommerce .checkout-button:hover,
.wcdsd-styled .woocommerce button.button.alt:hover { background: var(--wcdsd-action-hover, #a60d26); }
.wcdsd-styled .woocommerce button.button { border-radius: 8px; padding: 12px 18px; }
.wcdsd-styled .woocommerce .checkout-button,
.wcdsd-styled .woocommerce a.checkout-button.button.alt { background: var(--wcdsd-accent, #10707d); }
.wcdsd-styled .woocommerce .checkout-button:hover,
.wcdsd-styled .woocommerce a.checkout-button.button.alt:hover { background: var(--wcdsd-accent-hover, #0c5a64); }

.wcdsd-styled .woocommerce-info,
.wcdsd-styled .woocommerce-message {
  border-top-color: var(--wcdsd-accent, #10707d); border-radius: 8px;
}

/* small print you may have in the page content */
.wcdsd-styled .wcdsd-fine-print,
.wcdsd-styled .srk-paypal-note { font-size: .78rem; color: #6b7680; line-height: 1.5; margin: 14px 0 0; }

/* ---------- phones ---------- */
@media (max-width: 768px) {

  /* WooCommerce zebra-stripes stacked rows - the cards supply their own background */
  .wcdsd-styled.woocommerce-cart .cart_totals table.shop_table_responsive tr td,
  .wcdsd-styled.woocommerce-cart .cart_totals table.shop_table_responsive tr:nth-child(2n) td {
    background-color: transparent !important;
  }

  .wcdsd-styled.woocommerce-cart .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals td {
    text-align: left !important; padding: 0 !important;
  }
  .wcdsd-styled.woocommerce-cart .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals td::before {
    float: none !important; display: block !important; margin: 0 0 8px !important;
  }

  /* checkout: ordinary rows keep two columns, the shipment row goes full width.
     tbody must be a block or the browser wraps that row in an anonymous table
     cell that inherits the first column's width. */
  .wcdsd-styled.woocommerce-checkout table.shop_table thead,
  .wcdsd-styled.woocommerce-checkout table.shop_table tbody,
  .wcdsd-styled.woocommerce-checkout table.shop_table tfoot { display: block !important; width: 100% !important; }
  .wcdsd-styled.woocommerce-checkout table.shop_table tr {
    display: table !important; width: 100% !important; table-layout: fixed !important;
  }
  .wcdsd-styled.woocommerce-checkout table.shop_table tr > th:first-child,
  .wcdsd-styled.woocommerce-checkout table.shop_table tr > td:first-child { width: 60% !important; }
  .wcdsd-styled.woocommerce-checkout table.shop_table tr.woocommerce-shipping-totals { display: block !important; }
  .wcdsd-styled.woocommerce-checkout table.shop_table tr.woocommerce-shipping-totals th,
  .wcdsd-styled.woocommerce-checkout table.shop_table tr.woocommerce-shipping-totals td {
    display: block !important; width: 100% !important; text-align: left !important;
  }
  .wcdsd-styled.woocommerce-checkout table.shop_table tr.woocommerce-shipping-totals th { padding-bottom: 8px !important; }

  /* stacked suburb / postcode do not need the two-column gap */
  .wcdsd-styled .wcdsd-q-place { row-gap: 0 !important; }

  /* delivery options read left to right on a phone */
  .wcdsd-styled #shipping_method li,
  .wcdsd-styled #shipping_method label { text-align: left !important; }
}

/* ---------------------------------------------------------------- two columns

   The delivery questions and the totals side by side on a wide screen, stacked
   on a narrow one. Both already live inside .cart_totals -- the block hooks onto
   woocommerce_before_cart_totals, which fires inside that container -- so this
   is a layout on what is already there rather than any moving of markup.

   WHY THE DELIVERY BLOCK SPANS THE ROWS. The other side is not one element: it
   is the heading, the totals table and the Proceed to checkout button, three
   siblings. Putting them in a column each would leave the block in row one only,
   and row one grows to the block's full height -- so the totals would start well
   below it and the two would not read as columns at all. Spanning lets the
   right-hand column stack its three rows against the block's full height.

   row-gap is 0 deliberately: the span creates empty implicit rows, and a row gap
   would be multiplied across every one of them and blow the card open.

   Scoped to body.wcdsd-two-column, which the plugin adds only when the setting
   is on, so a theme that would rather lay this out itself is left alone. */
@media (min-width: 900px) {
  /* wcdsd-two-column-fits is added by fitTwoColumn() only when .cart_totals is actually wide
     enough to hold two columns. A theme that already lays the cart out as table-left/totals-right
     makes .cart_totals a narrow sidebar, and a grid inside that gives two 140px columns with the
     delivery questions concertina'd into one. CSS cannot measure the element it is styling, so the
     measurement happens in script and arrives as this class.

     :has() makes this self-guarding. A theme that overrides cart-totals.php and fires
     woocommerce_before_cart_totals somewhere else would leave the block outside this
     container -- and then a grid here would put an empty column beside a half-width
     totals card. No block inside, no grid, and the stacked layout stands. A browser
     too old for :has() drops the whole rule and gets the same stacked layout. */
  .wcdsd-two-column.wcdsd-two-column-fits.wcdsd-styled.woocommerce-cart .cart_totals:has(> #wcdsd-cart-questions) {
    display: grid;
    /* The delivery card takes its settable share and the totals take what is left. A percentage
       rather than two fr values so the number in the settings means what it says: 40 is 40% of the
       row, whatever the gap and whatever the totals card would rather be.

       minmax(0, ...) on both, still, so a long suburb name or a wide totals table cannot push a
       column past its share -- grid tracks size to their content by default, and that is what put
       the shipping options into a narrow column before. */
    grid-template-columns: minmax(0, var(--wcdsd-delivery-width, 50%)) minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 0;
    align-items: start;
  }
  .wcdsd-two-column.wcdsd-two-column-fits.wcdsd-styled.woocommerce-cart .cart_totals > #wcdsd-cart-questions {
    grid-column: 1;
    grid-row: 1 / span 30;
    margin-bottom: 0;
  }
  .wcdsd-two-column.wcdsd-two-column-fits.wcdsd-styled.woocommerce-cart .cart_totals > *:not(#wcdsd-cart-questions) {
    grid-column: 2;
  }
  /* The heading sat against the top of the card when it was the only thing in
     the column; beside a bordered block it needs to line up with it instead. */
  .wcdsd-two-column.wcdsd-two-column-fits.wcdsd-styled.woocommerce-cart .cart_totals > h2 { margin-top: 0; }
}

/* ------------------------------------------------------- tightened, desktop

   The default scale is drawn for a phone, where a 48px control is a thumb
   target and generous spacing is what makes a form usable one-handed. On a
   1400px monitor the same numbers read as a form built for someone with poor
   eyesight -- and once the card is two columns, half the width, it is worse.

   So the sizes come down ABOVE 900px only. Phones and small tablets keep every
   pixel of the current scale; nothing below the breakpoint is touched.

   Every value that changes is in this one block on purpose. Tightening is a
   judgement, not a fact, and the next person to think it is a notch too far
   should be able to find all of it in one place rather than hunting a percentage
   through four hundred lines. */
@media (min-width: 900px) {

  /* cards */
  .wcdsd-styled .cart_totals,
  .wcdsd-styled.woocommerce-checkout #customer_details,
  .wcdsd-styled.woocommerce-checkout #order_review,
  .wcdsd-styled.woocommerce-checkout .woocommerce-additional-fields {
    padding: 18px; margin-bottom: 16px;
  }

  /* Tightened, but still a panel. This rule was left over from the vertical-rule version -- no
     right padding at all, because there was no right edge to keep away from -- and being inside the
     desktop breakpoint it quietly overrode the panel padding on every screen the panel is actually
     seen on. The forklift question ran into the edge of the card.

     Same variable as the base rule, so "no panel" still means no padding at either width. */
  .wcdsd-styled #wcdsd-cart-questions { padding: var(--wcdsd-card-pad, 18px 20px 20px); }

  /* headings */
  .wcdsd-styled .wcdsd-q-title,
  .wcdsd-styled .cart_totals h2,
  .wcdsd-styled #order_review_heading,
  .wcdsd-styled .woocommerce-billing-fields h3,
  .wcdsd-styled .woocommerce-shipping-fields h3,
  .wcdsd-styled #wcdsd-delivery-heading h3 {
    font-size: 1rem; margin-bottom: 12px; padding-bottom: 9px;
  }

  /* fields */
  .wcdsd-styled .woocommerce form .form-row { margin-bottom: 12px; }
  .wcdsd-styled .woocommerce form .form-row label { font-size: .85rem; margin-bottom: 4px; }
  .wcdsd-styled .woocommerce form .form-row input.input-text,
  .wcdsd-styled .woocommerce form .form-row textarea,
  .wcdsd-styled .woocommerce form .form-row select,
  .wcdsd-styled .wcdsd-delivery-questions select,
  .wcdsd-styled .wcdsd-delivery-questions input[type="text"] {
    padding: 9px 12px; font-size: 14px; border-radius: 6px;
  }
  .wcdsd-styled .wcdsd-delivery-questions .wcdsd-q-row { margin-bottom: .6em; }
  .wcdsd-styled .wcdsd-delivery-questions label { font-size: .85rem; margin-bottom: 4px; }
  .wcdsd-styled .wcdsd-delivery-questions .wcdsd-q-intro { margin-bottom: .5em; font-size: .9em; }
  .wcdsd-styled .wcdsd-delivery-questions .wcdsd-q-help { font-size: .8em; margin-top: .25em; }
  .wcdsd-styled .wcdsd-q-dest { margin: -.2em 0 .6em; font-size: .85em; }
  .wcdsd-styled .wcdsd-q-msg { padding: .4em .6em; margin-bottom: .6em; font-size: .85em; }

  /* buttons */
  .wcdsd-styled.woocommerce-cart .wcdsd-delivery-questions button.wcdsd-q-calc,
  .wcdsd-styled.woocommerce-checkout .wcdsd-delivery-questions button.wcdsd-q-calc {
    padding: 9px 16px; font-size: .95em;
  }
  .wcdsd-styled .woocommerce #place_order,
  .wcdsd-styled .woocommerce .checkout-button,
  .wcdsd-styled .woocommerce button.button.alt {
    padding: 10px 18px; font-size: .9rem;
  }

  /* shipping options */
  .wcdsd-styled #shipping_method li { margin-bottom: 7px; padding: 9px 12px; }

  /* totals */
  .wcdsd-styled.woocommerce-checkout #order_review table.shop_table th,
  .wcdsd-styled.woocommerce-checkout #order_review table.shop_table td,
  .wcdsd-styled .cart_totals table.shop_table th,
  .wcdsd-styled .cart_totals table.shop_table td { padding: 9px 0; }

  /* The label column was 45% of a full-width card. At half the width that leaves
     the shipping options squeezed into the remainder, and TOTAL -- four
     characters -- sitting in a column three times wider than it needs. */
  .wcdsd-styled .cart_totals table.shop_table th { width: 34%; padding-right: 12px; }

  /* "$513.70 (includes $46.70 Tax)" is one cell. Left inline it collided with the
     label and then wrapped across three lines in the narrower column; on its own
     line under the amount it reads as the aside it actually is. */
  .wcdsd-styled .cart_totals .order-total td small.includes_tax,
  .wcdsd-styled.woocommerce-checkout #order_review .order-total td small.includes_tax {
    display: block; margin-top: 2px; font-size: .8rem; font-weight: 400; color: #5c6670;
  }
}