/* css/cart.css — cart lines, discount chrome. (The upsell rules moved to
 * css/upsell.css with plan 17 WP-8, when the surfaces became a modal.)
 *
 * OWNER: W4 (W6 coordinates its discount rules through this sheet — W5/W6 have
 * no sheet of their own). Created by W0 (00-contracts.md §5 [A3]).
 *
 * style.css is FROZEN — put every new cart/upsell/discount rule here. This
 * sheet is linked AFTER style.css in index.html, so a rule here wins by cascade
 * order without needing !important.
 *
 * W0 only ships the guards below. Option/deposit sub-lines, the sold-out
 * reconciliation banner, the two upsell screens and the discount banner are
 * W4/W6's.
 */

/* Reserved by W0 in #screen-cart — invisible while empty so the pre-v6 layout
 * is byte-identical. */
#cart-notice:empty,
#cart-summary:empty,
#discount-banner:empty {
  display: none;
}

/* ===== SOLD-OUT RECONCILIATION (§6.2 A10) ===== */

/* The "tell the guest plainly" banner (#cart-notice), rendered by
 * lib/ui/cart.mjs whenever a cart line is currently sold_out. */
.soldout-notice {
  margin: 16px 32px 0;
  padding: 18px 22px;
  border-radius: var(--radius-card);
  background: #FCEEEC;
  border: 2px solid var(--red);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.soldout-notice-text {
  /* 16px was sized to sit next to an action button. The banner is now the
     whole message, and it explains why the total dropped — it has to be
     readable at 1080x1920 without leaning in (same lesson as F3). */
  font-size: 19px;
  line-height: 1.5;
  color: var(--dark);
}
/* .soldout-notice-btn is GONE: the guest is no longer asked to remove anything.
 * The line stays, marked, and payableLines() keeps it out of the money. */

/* A sold-out line stays in the basket permanently, marked. It must read as
 * "not part of this order" at a glance and never as merely dimmed: the guest
 * has to be able to tell, without counting, which lines they are paying for.
 * Struck-through price + a muted card, with the "Elfogyott" badge still at
 * full strength so the reason stays legible. */
.cart-item-card.cart-item-soldout {
  opacity: 0.7;
  background: var(--light-gray, #f2f2f0);
  border: 2px dashed var(--red);
}
/* The money on a cart card is the .cart-item-price column in both the priced
 * and the legacy renderer — struck through, because that amount is NOT in the
 * total any more. (Was .cart-qty-badge, the pill over the photo, until the
 * per-line price column replaced it.) */
.cart-item-card.cart-item-soldout .cart-item-price {
  text-decoration: line-through;
}
.cart-item-card.cart-item-soldout .cart-line-badge-soldout {
  opacity: 1;
}
.cart-line-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
}
.cart-line-badge-soldout {
  background: var(--red);
  color: var(--white);
}

/* ===== PER-LINE PRICE (field report 2026-08-10) =====
 *
 * A guest could not reconstruct an 11 170 Ft basket: the only price on a card
 * was a 15px pill sitting over the corner of the photo, where it read as a
 * label on the image rather than as money. Now every card states its own total
 * on the right — the side the eye already searches for amounts — and the
 * option/deposit sub-lines carry legible amounts of their own, so each card
 * adds up on its face and the cards add up to the footer.
 *
 * The photo pill (.cart-qty-badge, style.css:606) is no longer rendered by
 * either renderer. Its rules stay in the frozen sheet, dead. */
.cart-item-price {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  padding: 22px 28px 22px 14px;
  min-width: 200px;
}
.cart-line-total {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--dark);
  white-space: nowrap;
}
/* Only rendered when qty > 1, i.e. when the total is not self-explanatory. */
.cart-line-unit {
  margin-top: 6px;
  font-size: 17px;
  color: var(--mid-gray);
  white-space: nowrap;
}
/* Amounts inside the grey sub-line list: same size as the text around them,
 * but dark and semibold so the numbers can be picked out at a glance. */
.cart-extra-amount {
  color: var(--dark);
  font-weight: 600;
}
/* A sold-out line is struck through as a whole (see the rule above), so its
 * sub-line amounts must not fight that with their own emphasis. */
.cart-item-card.cart-item-soldout .cart-extra-amount {
  color: var(--mid-gray);
  font-weight: 500;
}

/* ===== CART LINE QUANTITY STEPPER (plan 17 WP-5a, T9) =====
 * The same shape as the confirm screen's #confirm-qty (style.css), sized to sit
 * in the action row between MÓDOSÍTÁS and TÖRLÉS. Disabled at the ends of the
 * range, never hidden. */
.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
}
.cart-qty-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--hairline);
  background: var(--white);
  color: var(--dark);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.cart-qty-btn:active { background: var(--light-gray); transform: scale(0.92); }
.cart-qty-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.cart-qty-btn:disabled:active { transform: none; background: var(--white); }
.cart-qty-count {
  min-width: 36px;
  text-align: center;
  font-size: 24px;
  font-weight: 800;
}

/* ===== DISCOUNT BANNER (W6) — the single applied discount, e.g.
 * "Diákkedvezmény -15%". #discount-dialog needs no rules of its own: it
 * reuses the frozen .overlay/.dialog/.dialog-btn classes from style.css, same
 * as back-dialog / mode-switch-dialog. */
.discount-banner {
  margin: 0 24px 16px;
  padding: 16px 22px;
  border-radius: var(--radius-card);
  background: rgba(26, 159, 216, 0.12);
  border: 1px solid var(--blue);
  color: var(--blue-dark);
  font-size: 19px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.discount-banner-icon { font-size: 22px; }

/* ===== CART BOTTOM BAR: count vs total (F2) =====
 * The bar used to read "🍽 5   22 950 Ft" as a single text node. Hungarian
 * formats thousands with a space, so a guest deciding whether to pay could
 * parse it as 5 22 950 Ft — reported from the field on 2026-07-29. Spacing
 * alone is what failed, so the separation here is a filled badge, a vertical
 * rule and a caption; none of it depends on the gap between glyphs.
 *
 * .cart-summary-bar / .cart-tray-badge / .cart-count-badge already existed in
 * the frozen style.css but nothing rendered them — the markup had regressed to
 * a plain span. These rules revive that design and add what it was missing.
 * style.css is frozen (00-contracts.md [A3]); everything new lives here. */
.cart-summary-bar {
  /* style.css sets display:flex + gap:12px; a smaller gap is right now that
     the groups are separated by a rule rather than by space. */
  gap: 10px;
  white-space: nowrap;
}
.cart-total-sep {
  width: 2px;
  height: 34px;
  background: var(--light-gray, #e3e3e3);
  border-radius: 1px;
  margin: 0 4px;
}
.cart-total-caption {
  font-size: 17px;
  font-weight: 600;
  color: var(--mid-gray);
  letter-spacing: 0.3px;
  /* .total-label on the parent is 27px/800; the caption must read as a label,
     not as part of the amount. */
  text-transform: uppercase;
}
.cart-total-amount {
  font-size: 27px;
  font-weight: 800;
}