/* ────────────────────────────────────────────────────────────────
   La Bussola — Mezzo Metro · Bevanda in Omaggio (reward moment)
   Visual language: Warm Noir / Muted Brass / Playfair + Inter,
   same border, shadow and motion philosophy as the existing modals.
   ──────────────────────────────────────────────────────────────── */

/* ---------- overlay shell ---------- */
.lb-rew { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.lb-rew-bd { position: absolute; inset: 0; background: rgba(7, 6, 5, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: lbReveFade .32s ease both; }

.lb-rew-card {
  position: relative; width: 100%; max-width: 720px; max-height: calc(100dvh - 2.5rem);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: linear-gradient(168deg, #171310 0%, #0d0b08 55%, #0a0806 100%);
  border: 1px solid rgba(217, 163, 95, .28); border-radius: 24px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .75), 0 0 90px rgba(217, 163, 95, .10), inset 0 1px 0 rgba(246, 226, 187, .07);
  padding: 2.4rem 2.25rem 1.6rem; text-align: center;
  animation: lbReveUp .46s cubic-bezier(.22, 1, .36, 1) both;
}
.lb-rew-x {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px;
  border-radius: 9999px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(7, 6, 5, .5);
  color: var(--color-warm-gray, #a89f92); font-size: 13px; line-height: 1; cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.lb-rew-x:hover { border-color: rgba(217, 163, 95, .6); color: var(--color-cream, #fbf7ee); }

/* ---------- headline ---------- */
.lb-rew-medal {
  width: 52px; height: 52px; margin: 0 auto .95rem; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(217, 163, 95, .55); border-radius: 9999px; color: var(--color-gold-light, #f6e2bb);
  font-size: 20px; background: radial-gradient(circle at 50% 35%, rgba(217, 163, 95, .18), rgba(217, 163, 95, .03) 70%);
  box-shadow: 0 0 26px rgba(217, 163, 95, .22);
  animation: lbRevePop .7s .1s cubic-bezier(.22, 1, .36, 1) both;
}
.lb-rew-medal-lg { width: 64px; height: 64px; font-size: 26px; box-shadow: 0 0 40px rgba(217, 163, 95, .35); animation-delay: .05s; }
.lb-rew-eyebrow {
  font-size: 10px; font-weight: 500; letter-spacing: .38em; text-transform: uppercase;
  color: var(--color-gold, #d9a35f); margin: 0 0 .6rem; animation: lbReveFadeUp .5s .18s both;
}
.lb-rew-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 600;
  font-size: clamp(1.35rem, 4.6vw, 1.9rem); line-height: 1.14; color: var(--color-cream, #fbf7ee);
  margin: 0 0 .65rem; padding: 0 .5rem; animation: lbReveFadeUp .5s .24s both;
}
.lb-rew-title em {
  font-style: italic; background: linear-gradient(120deg, #f6e2bb, #d9a35f 48%, #c0492b);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.lb-rew-sub {
  font-size: 13px; font-weight: 300; color: var(--color-warm-gray, #a89f92);
  margin: 0 auto 1.35rem; max-width: 42ch; animation: lbReveFadeUp .5s .3s both;
}

/* ---------- beverage grid ---------- */
.lb-rew-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; text-align: left; animation: lbReveFadeUp .45s .32s both; }
@media (min-width: 768px) { .lb-rew-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } }

.lb-rew-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: .95rem .55rem .8rem; min-width: 0;
  background: rgba(255, 255, 255, .028); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px;
  cursor: pointer; font-family: inherit;
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
  animation: lbReveIn .5s cubic-bezier(.22, 1, .36, 1) both;
}
.lb-rew-item:hover { border-color: rgba(217, 163, 95, .45); transform: translateY(-2px); }
.lb-rew-item:focus-visible { outline: 2px solid rgba(217, 163, 95, .7); outline-offset: 2px; }
.lb-rew-item img { width: 96px; height: 96px; object-fit: contain; transition: transform .3s ease; flex-shrink: 0; }
.lb-rew-item:hover img { transform: scale(1.06); }
.lb-rew-item .lb-rew-name {
  font-family: 'Playfair Display', Georgia, serif; font-size: 12.5px; line-height: 1.28;
  color: var(--color-cream, #fbf7ee); min-height: 1.28em; display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.lb-rew-item .lb-rew-size {
  font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-gold, #d9a35f); opacity: .85; margin-top: -3px;
}
.lb-rew-gratis {
  font-size: 9px; font-weight: 600; letter-spacing: .22em; color: var(--color-gold, #d9a35f);
  border: 1px solid rgba(217, 163, 95, .45); border-radius: 9999px; padding: 3px 9px 3px 11px;
}
.lb-rew-tick {
  position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 9999px;
  background: linear-gradient(135deg, #f6e2bb, #d9a35f); color: #070605; font-size: 10px;
  display: none; align-items: center; justify-content: center;
}
.lb-rew-item.is-sel {
  border-color: rgba(217, 163, 95, .85);
  background: linear-gradient(180deg, rgba(217, 163, 95, .13), rgba(217, 163, 95, .04));
  box-shadow: 0 0 0 1px rgba(217, 163, 95, .35), 0 10px 30px rgba(217, 163, 95, .14);
  transform: translateY(-2px);
}
.lb-rew-item.is-sel .lb-rew-name { color: var(--color-gold-light, #f6e2bb); }
.lb-rew-item.is-sel .lb-rew-tick { display: flex; animation: lbRevePop .35s both; }

/* ---------- CTA + secondary ---------- */
.lb-rew-cta {
  margin-top: 1.4rem; width: 100%; padding: 1rem 1rem; border: none; border-radius: 9999px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; font-family: inherit;
  background: linear-gradient(90deg, #f6e2bb, #d9a35f); color: #070605;
  box-shadow: 0 0 34px rgba(217, 163, 95, .35);
  transition: box-shadow .3s ease, transform .3s ease, background .3s ease, color .3s ease;
  animation: lbReveFadeUp .5s .46s both;
}
.lb-rew-cta:disabled { background: rgba(255, 255, 255, .06); color: rgba(251, 247, 238, .32); box-shadow: none; cursor: not-allowed; }
.lb-rew-cta:not(:disabled):hover { box-shadow: 0 0 48px rgba(217, 163, 95, .55); transform: translateY(-1px); }
.lb-rew-cta:not(:disabled):active { transform: scale(.985); }
.lb-rew-cta:focus-visible { outline: 2px solid rgba(246, 226, 187, .8); outline-offset: 3px; }

.lb-rew-later {
  margin-top: .7rem; background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 10.5px; letter-spacing: .06em; color: var(--color-warm-gray, #a89f92);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(168, 159, 146, .4);
  padding: .35rem .5rem; animation: lbReveFadeUp .5s .54s both;
}
.lb-rew-later:hover { color: var(--color-cream, #fbf7ee); }
.lb-rew-note { margin: .95rem 0 0; font-size: 9.5px; font-weight: 300; letter-spacing: .03em; color: rgba(168, 159, 146, .62); animation: lbReveFadeUp .5s .6s both; }

/* ---------- confirmation phase ---------- */
.lb-rew-ctitle {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 600;
  font-size: clamp(1.5rem, 5vw, 2.05rem); margin: .95rem 0 .35rem;
  background: linear-gradient(120deg, #f6e2bb, #d9a35f 48%, #c0492b);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: lbReveFadeUp .5s .26s both;
}
.lb-rew-cname { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.18rem; color: var(--color-cream, #fbf7ee); margin: 0 0 .45rem; animation: lbReveFadeUp .5s .36s both; }
.lb-rew-csub { font-size: 11.5px; font-weight: 300; color: var(--color-warm-gray, #a89f92); margin: 0; animation: lbReveFadeUp .5s .44s both; }

/* ---------- nested reward presentation in the cart drawer ----------
   Two-level parent→child block: label + name + GRATIS badge stacked,
   so it reads identically at any column width (mobile ≈123 px included). */
.lb-rew-cart {
  margin-top: .6rem; padding: .55rem .6rem .6rem .8rem;
  border-left: 1px solid rgba(217, 163, 95, .5);
  background: linear-gradient(90deg, rgba(217, 163, 95, .07), rgba(217, 163, 95, 0) 80%);
  animation: lbReveFadeUp .35s ease both;
}
.lb-rew-line { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; margin: 0; }
.lb-rew-line + .lb-rew-line { margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed rgba(217, 163, 95, .2); }
.lb-rew-line-label { font-size: 8px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-gold, #d9a35f); white-space: nowrap; }
.lb-rew-line-name { font-family: 'Playfair Display', Georgia, serif; font-size: 13px; line-height: 1.3; color: var(--color-gold-light, #f6e2bb); }
.lb-rew-line-gratis {
  font-size: 8.5px; font-weight: 600; letter-spacing: .24em; color: var(--color-gold-light, #f6e2bb);
  border: 1px solid rgba(217, 163, 95, .5); border-radius: 9999px; padding: 2.5px 8px 2.5px 11px;
  background: rgba(217, 163, 95, .08);
}
.lb-rew-claim {
  margin-top: .55rem; padding: .5rem .85rem; border-radius: 9999px; text-align: left;
  border: 1px dashed rgba(217, 163, 95, .55); background: rgba(217, 163, 95, .05);
  color: var(--color-gold-light, #f6e2bb); font-size: 10px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; cursor: pointer; font-family: inherit;
  transition: background .25s ease, border-color .25s ease;
}
.lb-rew-claim:hover { background: rgba(217, 163, 95, .14); border-color: rgba(217, 163, 95, .8); }

/* ---------- Mezzo Metro special-request popup · benefit band ----------
   The benefit is presented as an intentional, quiet "advantage" card at the
   top of the popup body — visible before the customer reads the form. */
.lb-mmp-omaggio {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .85rem; padding: .58rem .7rem;
  border: 1px solid rgba(217, 163, 95, .3); border-radius: 12px;
  background: linear-gradient(100deg, rgba(217, 163, 95, .09), rgba(217, 163, 95, .025) 75%);
  font-size: 10.5px; font-weight: 400; line-height: 1.5; letter-spacing: .015em;
  color: var(--color-gold-light, #f6e2bb); text-align: left;
}
.lb-mmp-omaggio-mark {
  flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(217, 163, 95, .5); border-radius: 9999px; color: var(--color-gold, #d9a35f);
  font-size: 10px; background: radial-gradient(circle at 50% 35%, rgba(217, 163, 95, .22), rgba(217, 163, 95, .05) 70%);
}

/* ---------- motion ---------- */
@keyframes lbReveFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbReveUp { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lbReveFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lbReveIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lbRevePop { 0% { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }

@media (max-width: 480px) {
  .lb-rew { padding: .9rem; }
  .lb-rew-card { padding: 1.9rem 1.15rem 1.35rem; border-radius: 20px; }
  .lb-rew-item { padding: .8rem .45rem .7rem; }
  .lb-rew-item img { width: 86px; height: 86px; }
}
/* ---------- header cart nudge after "OMAGGIO AGGIUNTO" (drawer closed) ---------- */
.lb-rew-nudge { position: relative; }
.lb-rew-nudge::after {
  content: ''; position: absolute; inset: -5px; border-radius: 9999px; pointer-events: none;
  border: 2px solid rgba(217, 163, 95, .65); animation: lbReveNudge 1.15s ease-out 2 both;
}
.lb-rew-dot {
  position: absolute; top: -3px; left: -2px; width: 14px; height: 14px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f6e2bb, #d9a35f); color: #070605;
  font-size: 8px; line-height: 1; box-shadow: 0 0 10px rgba(217, 163, 95, .8);
  animation: lbRevePop .4s both;
}
@keyframes lbReveNudge { 0% { opacity: .95; transform: scale(.88); } 100% { opacity: 0; transform: scale(1.28); } }

@media (prefers-reduced-motion: reduce) {
  .lb-rew, .lb-rew *, .lb-rew-cart, .lb-rew-line, .lb-rew-nudge::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}

/* ---------- Smart offer button inside the Mezzo Metro section ---------- */
.lb-rew-open-wrap { margin: 1.4rem 0 .35rem; }
.lb-rew-open {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; padding: .78rem 1.2rem;
  border-radius: 9999px;
  border: 1px solid rgba(217, 163, 95, .35);
  background: linear-gradient(135deg, rgba(217, 163, 95, .10), rgba(217, 163, 95, .03));
  color: var(--color-gold, #d9a35f);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.lb-rew-open:hover { border-color: rgba(217, 163, 95, .7); background: linear-gradient(135deg, rgba(217, 163, 95, .18), rgba(217, 163, 95, .06)); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(217, 163, 95, .15); }
.lb-rew-open:active { transform: translateY(0); }
.lb-rew-open-star { font-size: 12px; line-height: 1; }
.lb-rew-hint {
  max-height: 0; opacity: 0; overflow: hidden;
  margin: 0; padding: 0 .75rem;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic;
  font-size: 12px; color: rgba(217, 163, 95, .75);
  text-align: center;
  transition: max-height .3s ease, opacity .3s ease, margin .3s ease;
}
.lb-rew-hint.is-on { max-height: 3em; opacity: 1; margin: .55rem 0 0; }
@media (prefers-reduced-motion: reduce) { .lb-rew-open, .lb-rew-hint { transition: none; } }