/*
 * autowiper.com.ua — cart.css (D48)
 * ---------------------------------------------------------------------------
 * THE CART'S OWN STYLESHEET, and nothing else.
 *
 * `public/assets/site.css` is the reverse-engineered visual source of truth for
 * the whole site — every value in it was measured off the live legacy theme —
 * and it is owned elsewhere. Nothing here may be moved into it and nothing
 * there is duplicated here: this file uses site.css's own custom properties
 * (--c-green-600, --radius, --shadow-inset, …) and its own classes (.btn,
 * .field, .cf__row) so the popup inherits the site's look rather than restating
 * it.
 *
 * Unhashed on purpose. `publishCss()` in bin/build.php content-hashes site.css
 * only; the .htaccess it writes already gives unhashed CSS/JS the HTML cache
 * lifetime (1 hour) rather than a year, which is exactly right for a file whose
 * URL does not change when its bytes do.
 *
 * Layout target: the legacy popup was an 830px-wide fixed iframe centred in the
 * viewport over a dark overlay, capped at the viewport height, and full-bleed
 * below 768px. Same here, without the iframe.
 */

/* The page behind the popup must not scroll while it is open. */
.cart-open,
.cart-open body {
  overflow: hidden;
}

.cart[hidden] {
  display: none;
}

.cart__overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.55);
}

.cart__dialog {
  position: fixed;
  z-index: 91;
  top: 50%;
  left: 50%;
  width: 830px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  transform: translate(-50%, -50%);
  padding: 20px 24px 24px;
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
  font-size: 14px;
  color: var(--c-ink);
}

.cart__x {
  float: right;
  margin: -6px -8px 0 0;
  padding: 0 6px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--c-rule);
  cursor: pointer;
}
.cart__x:hover {
  color: var(--c-ink);
}

.cart__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--c-heading);
}

.cart__empty {
  margin: 0;
  padding: 18px 0;
  color: var(--c-ink-strong);
}
.cart__empty[hidden] {
  display: none;
}

/* --- the line table ------------------------------------------------------ */

.cart__table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
}
.cart__table[hidden] {
  display: none;
}

.cart__table th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--c-rule-green);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-heading);
  text-align: left;
}
.cart__col-unit,
.cart__col-qty,
.cart__col-line {
  text-align: right;
}

.cart__row td {
  padding: 8px;
  border-bottom: 1px solid #e6e6e6;
  vertical-align: middle;
}

.cart__cell-img {
  width: 70px;
}
.cart__cell-img img {
  display: block;
  width: 60px;
  height: auto;
}

.cart__cell-name a {
  color: var(--c-green-700);
  text-decoration: none;
}
.cart__cell-name a:hover {
  text-decoration: underline;
}

.cart__cell-unit,
.cart__cell-line {
  white-space: nowrap;
  text-align: right;
}
.cart__cell-line {
  font-weight: 700;
}

.cart__cell-qty {
  width: 80px;
  text-align: right;
}
.cart__qty {
  width: 60px;
  text-align: center;
}

.cart__cell-del {
  width: 34px;
  text-align: right;
}
.cart__del {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: #f2f2f2;
  font-size: 17px;
  line-height: 1;
  color: #777;
  cursor: pointer;
}
.cart__del:hover {
  background: var(--c-alert);
  color: #fff;
}

.cart__grand-label {
  padding: 12px 8px;
  font-family: var(--font-display);
  font-weight: 600;
  text-align: right;
}
.cart__grand {
  padding: 12px 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--c-green-700);
  text-align: right;
  white-space: nowrap;
}

/* --- the checkout form --------------------------------------------------- */

.cart__form[hidden] {
  display: none;
}

.cart__form-head {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--c-heading);
}

.cart__items {
  display: none;
}

.cart__delivery {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--c-rule-green);
  border-radius: var(--radius);
}
.cart__delivery legend {
  padding: 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-heading);
}

.cart__radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  cursor: pointer;
}
.cart__radio input {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

.cart__np {
  margin: 10px 0 4px 26px;
}
.cart__np[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   THE NOVA POSHTA PICKER (/assets/np.js, worker/src/np.ts)

   Two comboboxes over the two plain text inputs the cart already had. Every
   rule here decorates something that is already usable without it: with np.js
   absent the listboxes stay `hidden` and empty, and the inputs are exactly the
   fields they were. Nothing below changes the inputs' own metrics, so the form
   does not reflow when the picker appears or gives up.

   Colours come from site.css's tokens — no new palette, and the active row
   borrows the same green the rest of the checkout uses for selection.
   --------------------------------------------------------------------------- */

.np__row {
  /* The anchor for the absolutely-positioned list below. */
  position: relative;
}

/* WHY 561px AND NOT THE 767px THIS FILE USES EVERYWHERE ELSE.
   `.cf__row` is a two-column grid — a 130px label beside the field — and
   site.css collapses it to one column at max-width 560px. The list has to line
   up with the FIELD, not with the row, so above that breakpoint it is placed
   into the second grid track: an absolutely-positioned grid child takes its
   named area as its containing block, so `left/right/top` then resolve against
   the input's cell. Below it there is only one track and the row already IS the
   field's width, so the plain `left:0;right:0` beneath is correct.

   The number is site.css's, and this is the coupling: if that breakpoint moves,
   this one moves with it. Stated here because a silently misaligned dropdown is
   the kind of thing nobody traces back to a media query. */
@media (min-width: 561px) {
  .np__list {
    grid-column: 2;
    grid-row: 1;
  }
}

.np__list {
  position: absolute;
  z-index: 20;               /* above the popup's own content, below its overlay */
  top: 100%;
  left: 0;
  right: 0;
  display: block;
  max-height: 260px;
  overflow-y: auto;
  /* Momentum scrolling in the list rather than the page behind it. */
  -webkit-overflow-scrolling: touch;
  margin-top: 2px;
  border: 1px solid var(--c-rule-green);
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: 0 4px 12px rgba(38, 64, 38, 0.18);
}
.np__list[hidden] {
  display: none;
}

.np__option {
  display: block;
  padding: 9px 10px;
  border-bottom: 1px solid #eef4ee;
  color: var(--c-ink);
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
  /* A long branch description must wrap, not widen the popup. */
  overflow-wrap: anywhere;
}
.np__option:last-child {
  border-bottom: 0;
}
/* `.is-active` is set by keyboard navigation as well as hover, so the two
   never disagree about which row Enter would choose. */
.np__option:hover,
.np__option.is-active {
  background: var(--c-green-050);
  color: var(--c-green-900);
}

.np__status {
  margin: 6px 0 0;
  color: var(--c-green-700);
  font-size: 12px;
  line-height: 1.4;
}
.np__status[hidden] {
  display: none;
}

.cart__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
}
.cart__submit {
  padding: 9px 18px;
  font-size: 15px;
}
.cart__more {
  border: 0;
  background: none;
  font-size: 14px;
  color: var(--c-green-700);
  text-decoration: underline;
  cursor: pointer;
}

.cart__phone {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--c-phone);
}
.cart__phone a {
  font-weight: 700;
  color: var(--c-phone);
  text-decoration: none;
}

/* --- the header indicator ------------------------------------------------ */

/* `.hd__cart a` in site.css already carries the cart icon, the padding and the
   type; the opener is an anchor for exactly that reason, so this only has to
   hide whichever of the two is not in play. */
.hd__cart [hidden] {
  display: none;
}
.hd__cart-count {
  white-space: nowrap;
}

/* --- add-to-cart controls ------------------------------------------------ */

/* They ship `hidden` and cart.js reveals them, so a no-JS visitor never sees a
   button that cannot work. */
[data-cart-add][hidden],
[data-cart-qty-field][hidden] {
  display: none;
}

.pg__add {
  margin-left: 8px;
}

.pd__qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.pd__qty input {
  width: 56px;
  text-align: center;
}

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 767px) {
  .cart__dialog {
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    transform: none;
    border-radius: 0;
    padding: 16px;
  }

  /* The image and unit-price columns are the first things a 360px screen can
     do without; the name, the quantity and the line total are not. */
  .cart__cell-img,
  .cart__col-unit,
  .cart__cell-unit {
    display: none;
  }
  .cart__col-name {
    width: auto;
  }

  /* Measured at 375px: with the default 8px cell padding, the 80px quantity
     column and the 34px delete column, the table came out 385px wide inside a
     343px content box and pushed the grand total off the right edge. These
     three reclaim ~64px, which clears it with room to spare. Do not restore
     the desktop values here without re-measuring. */
  .cart__table th,
  .cart__row td {
    padding: 6px 3px;
  }
  .cart__cell-qty {
    width: 56px;
  }
  .cart__qty {
    width: 46px;
    padding: 0 2px;
  }
  .cart__cell-del {
    width: 28px;
  }

  .cart__grand-label,
  .cart__grand {
    padding: 12px 3px;
  }
  .cart__grand-label {
    /* Two columns fewer above; right-aligning it into the gap reads as a stray
       indent, so it goes back to the left edge. */
    text-align: left;
  }
  .cart__grand {
    font-size: 18px;
  }

  .cart__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .cart__np {
    margin-left: 0;
  }
  /* A phone has less room below the field than a desktop does, and the popup
     scrolls, so a shorter list keeps the input that feeds it on screen.
     Rows grow to a 44px touch target at the same time. */
  .np__list {
    max-height: 200px;
  }
  .np__option {
    padding: 12px 10px;
    font-size: 15px;
  }
}