/* The festive gift strip (js/giftbanner.js). Small on purpose: it's a nudge,
   not the page. Own colours like the gift card itself. */
.gbanner {
  --gb-bg: #24263A; --gb-a: #7A5BC0;
  position: relative; z-index: 40;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px;
  padding: 10px 48px 10px 16px;
  background: radial-gradient(120% 220% at 15% 0%, var(--gb-a) 0%, transparent 55%), var(--gb-bg);
  color: #F4F2FA; font: 600 13.5px/1.4 var(--sans); text-align: center;
}
.gbanner-diwali    { --gb-bg: #2A1B12; --gb-a: #B86A12; }
.gbanner-christmas { --gb-bg: #10261E; --gb-a: #8E2A33; }
.gbanner-new_year  { --gb-bg: #121A33; --gb-a: #2F64A8; }
.gbanner-birthday  { --gb-bg: #2B1530; --gb-a: #A8436F; }
.gbanner-emoji { font-size: 17px; line-height: 1; }
.gbanner-cta {
  color: #fff; text-decoration: none; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35);
  transition: background-color 160ms ease, border-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .gbanner-cta:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }
}
.gbanner-x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: rgba(255, 255, 255, .7); font-size: 20px; line-height: 1; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .gbanner-x:hover { color: #fff; background: rgba(255, 255, 255, .1); } }
/* Inside the app it sits in the page column, like a card. */
.wrap > .gbanner { border-radius: var(--r-md); margin-bottom: 16px; }