/* /shop/gifts/item-gift.css — the gift card + one-shot gift intro on /i/{serial}. */
.igift { position: relative; overflow: hidden; }
.igift__head { display: flex; gap: 14px; align-items: center; }
.igift__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.igift__photo--blank { display: grid; place-items: center; font-size: 24px; background: rgba(127, 127, 127, 0.15); }
.igift__eyebrow { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.igift h2 { margin: 2px 0 0; font-size: 18px; line-height: 1.25; }
.igift__date { margin: 2px 0 0; font-size: 12px; opacity: 0.65; }
.igift__msg {
  margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid currentColor; font-size: 15px; line-height: 1.55;
  white-space: normal; overflow-wrap: anywhere;
}
.igift__sealed { margin: 14px 0 0; font-size: 14px; opacity: 0.8; }
.igift__history { margin: 14px 0 0; padding-left: 18px; font-size: 13px; opacity: 0.85; }
.igift__history time { opacity: 0.65; margin-left: 4px; }
.igift__own { margin: 12px 0 0; font-size: 12.5px; opacity: 0.8; }
.igift__own a { color: inherit; }

/* Profile: Gifts Received / Gifts Given (my-gifts.js) */
.mg-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.mg-tabs button { padding: 7px 12px; border: 1px solid rgba(127, 127, 127, 0.45); border-radius: 999px; background: transparent; color: inherit; font: 600 13px/1 inherit; cursor: pointer; }
.mg-tabs button[aria-selected="true"] { border-color: currentColor; font-weight: 800; }
.mg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mg-row { padding: 12px 14px; border: 1px solid rgba(127, 127, 127, 0.3); border-radius: 8px; display: grid; gap: 8px; }
.mg-main { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; color: inherit; text-decoration: none; }
.mg-main time { opacity: 0.6; font-size: 12px; }
.mg-badge { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(127, 127, 127, 0.2); text-transform: uppercase; letter-spacing: 0.05em; }
.mg-msg { margin: 0; font-size: 13.5px; opacity: 0.85; white-space: pre-line; overflow-wrap: anywhere; }
.mg-privacy { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.mg-claim { justify-self: start; }
.mg-status { margin: 8px 0 0; font-size: 13px; }

.igift-intro {
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
  background: rgba(10, 10, 14, 0.62); overflow: hidden; transition: opacity 0.6s ease; cursor: pointer;
}
.igift-intro.is-out { opacity: 0; }
.igift-intro__card {
  position: relative; display: grid; gap: 6px; justify-items: center; padding: 22px 30px; border-radius: 14px;
  background: #fff; color: #111; font: 400 15px/1.3 Inter, Arial, sans-serif; text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); animation: igiftPop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.igift-intro__card span { font-size: 42px; }
.igift-intro__card strong { font-size: 20px; font-weight: 800; }
.igift-intro__card em { font-style: normal; opacity: 0.7; }
.igift-intro i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: igiftFall linear forwards; }
.igift-intro--confetti i:nth-child(3n) { background: #ff4d6d; }
.igift-intro--confetti i:nth-child(3n + 1) { background: #ffd23f; }
.igift-intro--confetti i:nth-child(3n + 2) { background: #3ec1d3; }
.igift-intro--snow i { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.igift-intro--hearts i { width: 12px; height: 12px; background: #ff4d6d; border-radius: 50% 50% 0 50%; transform: rotate(45deg); }
.igift-intro--sparkle i { width: 6px; height: 6px; border-radius: 50%; background: #ffe58a; box-shadow: 0 0 10px #ffe58a; }
@keyframes igiftFall { to { transform: translateY(110vh) rotate(540deg); } }
@keyframes igiftPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .igift-intro i { display: none; }
  .igift-intro__card { animation: none; }
}