/* Gifts: the send dialog, the accept dialog and the Gifts page. */
.gift-flow,.gift-accept,.gift-answer{display:grid;gap:16px;font-size:14px}
.gift-step{display:grid;gap:16px}
.gift-step[hidden],.gift-flow [hidden]{display:none!important}
.gift-loading{margin:8px 0;color:var(--muted)}
.gift-error{display:flex;align-items:center;gap:9px;margin:0;padding:12px 14px;border:1px solid color-mix(in srgb,#ef5364 40%,transparent);border-radius:11px;background:color-mix(in srgb,#ef5364 10%,var(--theme-surface));color:#ffb1b9;font-size:13px}
.gift-error .icon{flex:none;width:17px;height:17px}
.gift-question{margin:0;font-size:16px;font-weight:600;color:var(--text)}

/* Who it's for */
.gift-recipient{display:grid;gap:8px}
.gift-recipient>label{font-size:13px;font-weight:600;color:var(--text)}
.gift-recipient-input{display:flex;align-items:stretch;gap:8px}
.gift-recipient-input>span{display:grid;place-items:center;width:40px;flex:none;border:1px solid var(--theme-border);border-radius:10px;background:var(--theme-raised);color:var(--muted);font-weight:700}
.gift-recipient-input input{flex:1;min-width:0;min-height:42px;padding:0 13px;border:1px solid var(--theme-border);border-radius:10px;background:var(--theme-surface);color:var(--text);font:inherit}
.gift-recipient-input input:focus-visible{outline:2px solid var(--theme-primary);outline-offset:1px}
.gift-recipient-input .button{min-width:76px}
.gift-recipient-status{margin:0;font-size:12px;color:var(--muted)}
.gift-recipient-status.is-error{color:#ff9aa5}
.gift-recipient-card{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--theme-primary) 40%,var(--theme-border));border-radius:12px;background:color-mix(in srgb,var(--theme-primary) 9%,var(--theme-surface));animation:gift-rise .32s cubic-bezier(.2,.7,.2,1) both}
.gift-recipient-card>div{display:grid;flex:1;min-width:0}
.gift-recipient-card span{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gift-recipient-card strong{overflow:hidden;font-size:15px;color:var(--text);text-overflow:ellipsis;white-space:nowrap}
.gift-link{padding:4px 2px;border:0;background:none;color:var(--theme-accent);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.gift-link:hover{text-decoration:underline}
.gift-avatar{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--theme-raised)}
.gift-avatar.is-empty{display:grid;place-items:center;color:var(--muted)}
.gift-avatar.is-empty .icon{width:20px;height:20px}

/* The item */
.gift-item{display:grid;grid-template-columns:76px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px;border:1px solid var(--theme-border);border-radius:14px;background:var(--theme-raised)}
.gift-item-art{display:grid;place-items:center;width:76px;height:76px;overflow:hidden;border-radius:11px;background:color-mix(in srgb,var(--theme-surface) 70%,#000)}
.gift-item-art img{width:100%;height:100%;object-fit:contain}
.gift-item-copy{display:grid;gap:6px;min-width:0}
.gift-item-copy h3{margin:0;overflow:hidden;font-size:15px;line-height:1.3;color:var(--text);text-overflow:ellipsis;white-space:nowrap}
.gift-kicker{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--theme-accent)}
.gift-item-meta{display:flex;flex-wrap:wrap;gap:6px}
.gift-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border:1px solid var(--theme-border);border-radius:999px;background:var(--theme-surface);color:var(--muted);font-size:11px;font-weight:600;white-space:nowrap}
.gift-chip .icon{width:13px;height:13px}
.gift-item-price{font-size:19px;font-weight:750;color:var(--text);white-space:nowrap}

/* What happens next */
.gift-points{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.gift-points li{display:grid;grid-template-columns:30px 1fr;align-items:start;gap:11px;font-size:13px;line-height:1.5;color:var(--muted)}
.gift-points li>.icon{width:30px;height:30px;padding:7px;box-sizing:border-box;border-radius:9px;background:color-mix(in srgb,var(--theme-accent) 13%,var(--theme-surface));color:var(--theme-accent)}
.gift-points strong{color:var(--text);font-weight:600}
.gift-balance{margin:0;font-size:13px;color:var(--muted)}
.gift-balance strong{color:var(--text)}
.gift-balance.is-short{padding:10px 12px;border:1px solid color-mix(in srgb,#f0b35a 40%,transparent);border-radius:10px;background:color-mix(in srgb,#f0b35a 9%,var(--theme-surface));color:#f6cf8f}
.gift-balance a{color:inherit;font-weight:700}

/* Confirmations */
.gift-confirm{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border:1px solid var(--theme-border);border-radius:12px;background:var(--theme-surface);font-size:13px;line-height:1.55;color:var(--muted);cursor:pointer;transition:border-color .2s,background-color .2s}
.gift-confirm strong{color:var(--text)}
.gift-confirm input{flex:none;width:17px;height:17px;margin:2px 0 0;accent-color:var(--theme-primary);cursor:pointer}
.gift-confirm input:disabled{cursor:not-allowed}
.gift-confirm:has(input:checked){border-color:color-mix(in srgb,var(--theme-primary) 60%,transparent);background:color-mix(in srgb,var(--theme-primary) 9%,var(--theme-surface))}
.gift-confirm:has(input:disabled){opacity:.6;cursor:not-allowed}
.gift-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.gift-actions .button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
.gift-actions .button .icon{width:17px;height:17px}
.gift-button-quiet{background:color-mix(in srgb,#ef5364 16%,var(--theme-raised));color:#ffc3ca;border-color:color-mix(in srgb,#ef5364 35%,transparent)}
.gift-button-quiet:hover{background:color-mix(in srgb,#ef5364 26%,var(--theme-raised))}
.gift-status{margin:0;min-height:1.4em;font-size:13px;color:var(--muted)}
.gift-status:empty{display:none}

/* Second confirmation and done */
.gift-confirm-hero,.gift-done{display:grid;justify-items:center;gap:10px;text-align:center}
.gift-confirm-hero h3,.gift-done h3{margin:4px 0 0;font-size:19px;line-height:1.3;color:var(--text)}
.gift-confirm-hero p,.gift-done p{max-width:400px;margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.gift-hero-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,var(--theme-primary),var(--theme-accent));color:#fff;box-shadow:0 10px 26px color-mix(in srgb,var(--theme-primary) 35%,transparent)}
.gift-hero-icon .icon{width:28px;height:28px}
.gift-hero-icon.is-done{background:linear-gradient(145deg,#3ccf6e,#1f9b52);box-shadow:0 10px 26px rgb(60 207 110 / 28%);animation:gift-pop .5s cubic-bezier(.3,1.4,.5,1) both}
.gift-summary{display:grid;gap:0;margin:0;border:1px solid var(--theme-border);border-radius:12px;overflow:hidden}
.gift-summary div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 14px;background:var(--theme-surface)}
.gift-summary div+div{border-top:1px solid var(--theme-border)}
.gift-summary dt{font-size:13px;color:var(--muted)}
.gift-summary dd{display:flex;align-items:center;gap:8px;margin:0;min-width:0;overflow:hidden;font-size:14px;font-weight:600;color:var(--text);text-overflow:ellipsis;white-space:nowrap}
.gift-summary dd .gift-avatar{width:24px;height:24px}
.gift-summary dd strong{font-size:17px}
.gift-done .gift-actions{justify-content:center;margin-top:6px}

/* Accepting */
.gift-from{display:flex;align-items:center;gap:11px;margin:0;font-size:15px;color:var(--muted)}
.gift-from strong{color:var(--text)}
.gift-accept form{display:grid;gap:12px;margin:0}
.gift-accept form>h3{margin:4px 0 0;font-size:15px;color:var(--text)}
.gift-hint{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.gift-accept .buy-order-receiver{margin-top:0;padding-top:0;border-top:0}
.gift-accept .gift-confirm.gift-liability{display:flex;font-weight:400}
.gift-answer>p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
.gift-answer>p strong{color:var(--text)}

/* Checkout: send it as a gift instead */
.gift-instead{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 4px;padding:12px 14px;border:1px dashed color-mix(in srgb,var(--theme-accent) 45%,var(--theme-border));border-radius:12px;background:color-mix(in srgb,var(--theme-accent) 6%,var(--theme-surface));color:var(--muted);font:inherit;font-size:13px;text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s}
.gift-instead>.icon:first-child{flex:none;width:34px;height:34px;padding:8px;box-sizing:border-box;border-radius:10px;background:color-mix(in srgb,var(--theme-accent) 16%,var(--theme-surface));color:var(--theme-accent)}
.gift-instead span{display:grid;flex:1;gap:2px;line-height:1.45}
.gift-instead strong{font-size:14px;color:var(--text)}
.gift-instead>.icon:last-child{flex:none;width:16px;height:16px;color:var(--theme-accent);transition:transform .2s}
.gift-instead:hover{border-style:solid;background:color-mix(in srgb,var(--theme-accent) 11%,var(--theme-surface))}
.gift-instead:hover>.icon:last-child{transform:translateX(3px)}
.gift-instead:focus-visible{outline:2px solid var(--theme-primary);outline-offset:2px}

/* Wishlist cards */
.gift-wish-button{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:36px;margin-top:10px;border:1px solid color-mix(in srgb,var(--theme-accent) 40%,var(--theme-border));border-radius:9px;background:color-mix(in srgb,var(--theme-accent) 10%,var(--theme-surface));color:var(--text);font:inherit;font-size:12px;font-weight:650;cursor:pointer;transition:background-color .2s,border-color .2s}
.gift-wish-button .icon{width:15px;height:15px;color:var(--theme-accent)}
.gift-wish-button:hover{border-color:color-mix(in srgb,var(--theme-accent) 70%,transparent);background:color-mix(in srgb,var(--theme-accent) 18%,var(--theme-surface))}
.gift-wish-button:focus-visible{outline:2px solid var(--theme-primary);outline-offset:2px}

/* The Gifts page */
.gifts-page{display:grid;gap:20px;width:min(940px,100%);margin:0 auto;padding:32px 0 56px}
.gifts-heading{display:flex;align-items:center;gap:16px}
.gifts-heading-icon{display:grid;flex:none;place-items:center;width:52px;height:52px;border-radius:16px;background:color-mix(in srgb,var(--theme-accent) 14%,var(--theme-surface));color:var(--theme-accent);border:1px solid color-mix(in srgb,var(--theme-accent) 30%,var(--theme-border))}
.gifts-heading-icon .icon{width:26px;height:26px}
.gifts-heading h1{margin:0;font-size:clamp(26px,3vw,32px);letter-spacing:-.02em;color:var(--text)}
.gifts-heading p{margin:4px 0 0;font-size:14px;color:var(--muted)}
.gifts-tabs{display:inline-flex;gap:4px;justify-self:start;padding:4px;border:1px solid var(--theme-border);border-radius:12px;background:var(--theme-raised)}
.gifts-tabs button{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 16px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s}
.gifts-tabs button[aria-selected=true]{background:var(--theme-surface);color:var(--text);box-shadow:0 2px 8px #0004}
.gifts-tabs button:hover:not([aria-selected=true]){color:var(--text)}
.gifts-tabs button:focus-visible{outline:2px solid var(--theme-primary);outline-offset:2px}
.gifts-tabs span{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:var(--theme-primary);color:var(--theme-on-primary,#fff);font-size:11px;font-weight:700}
.gifts-tabs span:empty{display:none}
.gifts-list{display:grid;gap:12px}
.gift-card{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px;border:1px solid var(--theme-border);border-radius:14px;background:var(--theme-surface);animation:gift-rise .35s cubic-bezier(.2,.7,.2,1) both}
.gift-card.is-pending{border-color:color-mix(in srgb,var(--theme-primary) 45%,var(--theme-border));box-shadow:0 0 0 1px color-mix(in srgb,var(--theme-primary) 12%,transparent),0 8px 24px #0003}
.gift-card-art{display:grid;place-items:center;width:84px;height:84px;overflow:hidden;border-radius:12px;background:var(--theme-raised)}
.gift-card-art img{width:100%;height:100%;object-fit:contain}
.gift-card-body{display:grid;gap:7px;min-width:0}
.gift-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gift-card-date{font-size:12px;color:var(--muted);white-space:nowrap}
.gift-card-body h3{margin:0;overflow:hidden;font-size:16px;line-height:1.3;color:var(--text);text-overflow:ellipsis;white-space:nowrap}
.gift-card-party{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--muted)}
.gift-card-party strong{color:var(--text)}
.gift-card-party .gift-avatar{width:24px;height:24px}
.gift-card-party .gift-avatar.is-empty .icon{width:14px;height:14px}
.gift-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:12px;color:var(--muted)}
.gift-card-meta span{display:inline-flex;align-items:center;gap:5px}
.gift-card-meta .icon{width:14px;height:14px}
.gift-card-actions{display:grid;gap:8px;min-width:132px}
.gift-card-actions .button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;font-size:13px}
.gift-card-actions .button .icon{width:16px;height:16px}
.gift-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.gift-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.gift-badge.is-pending{background:color-mix(in srgb,var(--theme-primary) 18%,var(--theme-surface));color:color-mix(in srgb,var(--theme-primary) 55%,#fff)}
.gift-badge.is-good{background:color-mix(in srgb,#3ccf6e 16%,var(--theme-surface));color:#7ee3a1}
.gift-badge.is-muted{background:var(--theme-raised);color:var(--muted)}
.gifts-empty{display:grid;justify-items:center;gap:10px;padding:48px 20px;border:1px dashed var(--theme-border);border-radius:16px;text-align:center;color:var(--muted)}
.gifts-empty>.icon{width:40px;height:40px;padding:10px;border-radius:14px;background:var(--theme-raised);color:var(--theme-accent)}
.gifts-empty h2{margin:4px 0 0;font-size:18px;color:var(--text)}
.gifts-empty p{max-width:380px;margin:0 0 6px;font-size:14px;line-height:1.6}

@keyframes gift-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes gift-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media(max-width:640px){
 .gifts-page{padding:20px 16px 40px}
 .gift-item{grid-template-columns:64px minmax(0,1fr)}
 .gift-item-art{width:64px;height:64px}
 .gift-item-price{grid-column:2;font-size:17px}
 .gift-card{grid-template-columns:64px minmax(0,1fr);gap:12px}
 .gift-card-art{width:64px;height:64px}
 .gift-card-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}
 .gift-actions .button{flex:1}
}
@media(prefers-reduced-motion:reduce){.gift-card,.gift-recipient-card,.gift-hero-icon.is-done{animation:none}.gift-instead,.gift-instead>.icon:last-child{transition:none}}