/* Owner gift pop-up (client/gift-popup.js), on top of the offer pop-up styles (offers.css). */
.gp-card { max-height: calc(100vh - 32px); overflow-y: auto; }
.gp-ribbon { background: linear-gradient(#3fa04a, #1f6a2a); }
.gp-card h2 { font-size: 22px; }
.gp-body { white-space: pre-line; text-align: left; font-size: 14px; line-height: 1.45; }
.gp-from { position: relative; justify-self: end; font: italic 800 14px/1 system-ui; color: #ffd27a; }
.gp-tiles .of-tile small { font-size: 9px; line-height: 1.1; color: #e8d6b0; max-width: 70px; }
.gp-claim { background: linear-gradient(#7fdc6a, #2f9a35); }

/* Free Store cards (gift-popup.js cards()): the two cards fly in and flip, a light sweeps over them, FREE slams on the price. */
.gc-card { width: min(380px, 100%); }
html.land .gc-card { width: min(560px, 100%); }
.gc-ribbon { background: linear-gradient(#e7b53c, #9a6514); color: #2a1600; }
.gc-row { position: relative; width: 100%; justify-self: stretch; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 6px 0 2px; perspective: 900px; }
.gc-slot { animation: gcIn .8s cubic-bezier(.2, 1.4, .4, 1) calc(.25s + var(--i) * .25s) both; }
@keyframes gcIn { from { transform: translateY(-60px) rotateY(180deg) scale(.6); opacity: 0; } 60% { opacity: 1; } }
.gc-pass { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 12px; text-align: center;
  border: 2px solid var(--edge); background: radial-gradient(circle at 50% 0, var(--glow), transparent 70%), linear-gradient(160deg, var(--a), var(--b));
  box-shadow: 0 0 0 1px #0008, 0 8px 22px #000a, 0 0 26px var(--glow); animation: gcFloat 3.2s ease-in-out calc(1.4s + var(--i, 0) * .4s) infinite; }
.gc-premium { --a: #5a1f73; --b: #22092e; --edge: #d9a0ff; --glow: #c86bff88; }
.gc-weekly { --a: #1f4f80; --b: #0b1d33; --edge: #8cc8ff; --glow: #5fb4ff88; }
@keyframes gcFloat { 50% { transform: translateY(-4px); } }
.gc-shine { position: absolute; inset: -40% auto -40% -60%; width: 40%; transform: rotate(20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff8, transparent); animation: gcShine 3s ease-in-out 1.3s infinite; }
@keyframes gcShine { 0% { left: -60%; } 45%, 100% { left: 130%; } }
.gc-ic { font-size: 36px; line-height: 1.1; filter: drop-shadow(0 3px 8px #000c); }
.gc-ic img { width: 44px; height: 44px; }
.gc-nm { font: 900 14px/1.15 system-ui; color: #fff3d6; text-shadow: 0 2px 3px #000; }
.gc-days { font: 800 11px/1 system-ui; letter-spacing: .5px; color: #9ff2a4; text-transform: uppercase; }
.gc-pass ul { margin: 4px 0 2px; padding: 0; list-style: none; font-size: 11px; line-height: 1.4; color: #e8dcff; }
.gc-price { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; margin-top: 2px; }
.gc-price s { font: 800 15px/1 system-ui; color: #ffffffa0; text-decoration-thickness: 2px; text-decoration-color: #ff5a4a; }
.gc-stamp { padding: 5px 12px; border: 3px solid #7fe08a; border-radius: 8px; transform: rotate(-12deg); font: 900 17px/1 system-ui; letter-spacing: 2px; color: #7fe08a;
  background: #0f2d14d0; text-shadow: 0 0 10px #7fe08a; box-shadow: 0 0 14px #7fe08a80; animation: gcStamp .45s cubic-bezier(.3, 1.8, .5, 1) calc(1.05s + var(--i) * .25s) both; }
@keyframes gcStamp { from { transform: rotate(-12deg) scale(3); opacity: 0; } }
.gc-body { position: relative; margin-top: 4px; font-size: 13px; }
.gc-now { position: relative; font: 800 12px/1 system-ui; color: #ffd27a; text-align: center; margin-top: 4px; }
.gc-claim { background: linear-gradient(#ffd86b, #d58a14); color: #fff; text-shadow: 0 2px 0 #6a3a00, 1px 0 0 #6a3a00, -1px 0 0 #6a3a00, 0 -1px 0 #6a3a00; box-shadow: 0 4px 0 #8a5208, 0 0 18px #ffc04a80; }
.gc-flash { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 35%, #fff6d8, #ffd36b70 15%, transparent 60%); animation: gcFlash 1.4s .2s both; }
@keyframes gcFlash { from { opacity: 0; } 25% { opacity: 1; } to { opacity: 0; } }
.gc-confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.gc-confetti i { position: absolute; left: var(--x); top: -20px; width: 7px; height: 12px; border-radius: 2px; background: var(--c); box-shadow: 0 0 6px var(--c);
  transform: rotate(var(--r)); animation: gcFall 3.4s ease-in calc(.4s + var(--d)) both; }
@keyframes gcFall { to { transform: translateY(105vh) rotate(calc(var(--r) + 540deg)); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .gc-ov *, .gc-ov { animation: none !important; } .gc-confetti, .gc-flash { display: none; } }