/* css/upsell.css — the upsell modal (plan 17 WP-8, Tamás's T8 / decision D5-A).
 *
 * style.css is FROZEN — linked after it and after css/browse.css (the tiles)
 * in index.html. Rendered by lib/ui/upsell.mjs into #upsell-dialog, which sits
 * OVER the product list (ADDCART) or the cart (PAYMENT); `.open` mounts it.
 *
 * "Visually straightforward" (the decision): a clear red border, the screen
 * behind it blurred. The chrome is the suggestion's own name / description /
 * image (06-upsell-redesign.md U3.7); the products are WP-3's .product-tile,
 * 3 across, at most six (shown_max / UPSELL_MAX). */

.upsell-overlay {
  /* .overlay (style.css) is display:none with a light scrim; this one dims and
     blurs harder so the offer is unmistakably ON TOP of the list, not part of it. */
  background: rgba(20, 20, 18, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 90; /* under the service lock / dialogs (100), over the screens */
}
.upsell-overlay.open { display: flex; }

.upsell-dialog {
  width: 920px;
  max-height: 88vh;
  padding: 28px 28px 24px;
  border: 4px solid var(--red);
  border-radius: var(--radius-card);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}
.upsell-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.3px;
  text-align: center;
}
.upsell-subtitle {
  color: var(--mid-gray);
  font-size: 22px;
  line-height: 1.35;
  text-align: center;
}
.upsell-subtitle:empty,
.upsell-banner:empty { display: none; }
.upsell-banner {
  border-radius: 14px;
  overflow: hidden;
}
.upsell-banner img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}
/* The tile grid: three across inside the 920 px dialog (WP-3's .menu-grid
   rules apply; the padding is the dialog's own). Scrolls if six tiles are
   taller than the dialog allows. */
.upsell-grid.menu-grid {
  padding: 0;
  overflow-y: auto;
  flex: 0 1 auto;
}
.upsell-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--mid-gray);
  font-size: 20px;
  grid-column: 1 / -1;
}
/* The one way out besides a tile: full width at the bottom. */
.upsell-skip {
  width: 100%;
  justify-content: center;
  flex-shrink: 0;
}