/* Gift vouchers: the voucher itself (invitation + bookmark) shared by the
   compose preview, the order page and the print page, and the compose form.
   The voucher is sized by its container (cqw), so the same markup is a small
   preview on a phone and exactly A5 on paper. */

.gift-invite {
    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: 1748 / 2480;
    background: #f4efe4 center / cover no-repeat;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
}
.gift-invite .gi-text {
    position: absolute;
    left: var(--gi-side, 10%);
    right: var(--gi-side, 10%);
    top: var(--gi-top, 9%);
    height: var(--gi-height, 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--gi-ink, #24324a);
    gap: calc(1.6cqw * var(--gi-scale, 1));
}
.gi-kicker { font-size: calc(3.4cqw * var(--gi-scale, 1)); letter-spacing: .5cqw; text-transform: uppercase; opacity: .8; }
.gi-to { font-size: calc(7.2cqw * var(--gi-scale, 1)); font-style: italic; line-height: 1.1; overflow-wrap: anywhere; }
.gi-what { font-size: calc(6cqw * var(--gi-scale, 1)); font-weight: 700; line-height: 1.15; }
.gi-perk { font-size: calc(3.1cqw * var(--gi-scale, 1)); line-height: 1.35; max-width: 92%; opacity: .85; }
.gi-msg { font-size: calc(3.6cqw * var(--gi-scale, 1)); font-style: italic; line-height: 1.4; max-width: 94%; white-space: pre-line; overflow-wrap: anywhere; }
.gi-msg-long { font-size: calc(2.9cqw * var(--gi-scale, 1)); line-height: 1.35; }
.gi-from { font-size: calc(3.6cqw * var(--gi-scale, 1)); }
.gi-code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: calc(5.6cqw * var(--gi-scale, 1)); letter-spacing: .6cqw; font-weight: 700;
    padding: 1.2cqw 3cqw; border: .35cqw solid currentColor; border-radius: 1.6cqw;
    background: rgba(255, 255, 255, .55); margin-top: 1cqw;
}
.gi-how { font-size: calc(2.7cqw * var(--gi-scale, 1)); opacity: .8; }
.gi-empty { opacity: .45; }

.gift-bookmark {
    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: 600 / 2160;
    background: #f4efe4 center / cover no-repeat;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
    color: #24324a;
}
.gift-bookmark .gb-mid {
    position: absolute; left: 8%; right: 8%; top: 30%; height: 42%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 4cqw;
}
.gb-to { font-size: 11cqw; font-style: italic; line-height: 1.15; overflow-wrap: anywhere; }
.gb-what { font-size: 10cqw; font-weight: 700; line-height: 1.2; }
.gb-brand { font-size: 7cqw; letter-spacing: 1.5cqw; text-transform: uppercase; opacity: .75; }
.gift-bookmark .gb-foot {
    position: absolute; left: 8%; right: 8%; bottom: 3.5%;
    display: flex; flex-direction: column; align-items: center; gap: 2.5cqw;
}
.gb-qr { width: 46%; aspect-ratio: 1; background: #fff; padding: 2cqw; border-radius: 2cqw; }
.gb-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 9.5cqw; font-weight: 700; letter-spacing: .8cqw; }
.gb-how { font-size: 6cqw; opacity: .8; text-align: center; }

/* ── Compose page ─────────────────────────────────────────────────────── */
.gift-page { max-width: 1060px; margin: 0 auto; }
.gift-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.gift-preview { max-width: 340px; width: 78%; margin: 0 auto; }
.gift-preview-note { text-align: center; font-size: 13px; color: var(--muted); margin: 10px 0 0; }
@media (min-width: 860px) {
    .gift-grid { grid-template-columns: 360px minmax(0, 1fr); gap: 36px; align-items: start; }
    .gift-side { position: sticky; top: 18px; }
    .gift-preview { width: 100%; }
}
.gift-step { margin: 0 0 22px; }
.gift-step h2 { font-size: 17px; margin: 0 0 10px; display: flex; gap: 10px; align-items: center; }
.gift-step h2 .n {
    display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-size: 14px; flex: 0 0 26px;
}
.gift-choices { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .gift-choices.cols { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.gift-choice { position: relative; display: block; cursor: pointer; }
.gift-choice input { position: absolute; opacity: 0; pointer-events: none; }
.gift-choice .box {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    border: 2px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--card);
    min-height: 54px; transition: border-color .15s, background .15s;
}
.gift-choice input:checked + .box { border-color: var(--accent); background: rgba(99, 102, 241, .12); }
.gift-choice input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 2px; }
.gift-choice .box > .what { flex: 1 1 auto; min-width: 0; }
.gift-choice .price { font-weight: 800; white-space: nowrap; flex: 0 0 auto; }
.gift-choice .gift-tag { font-size: 12.5px; color: #fbbf24; display: block; margin-top: 3px; line-height: 1.35; }
.gift-design .box { flex-direction: column; padding: 8px; gap: 8px; justify-content: flex-start; }
.gift-design img { width: 100%; aspect-ratio: 1748 / 2480; object-fit: cover; border-radius: 8px; display: block; }
.gift-design .name { font-size: 14px; }
.gift-designs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gift-fields { display: grid; gap: 12px; }
.gift-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.gift-fields input, .gift-fields textarea {
    padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: #0f131b; color: var(--fg);
    font-size: 16px; /* 16px: iOS does not zoom into the field */ font-family: inherit; width: 100%; box-sizing: border-box;
}
.gift-fields textarea { min-height: 96px; resize: vertical; }
.gift-fields input:focus, .gift-fields textarea:focus { outline: none; border-color: var(--accent); }
.gift-count { font-size: 12px; color: var(--muted); text-align: right; margin-top: -2px; }
@media (min-width: 560px) { .gift-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } }
.gift-submit { width: 100%; padding: 15px; font-size: 17px; font-weight: 700; border-radius: 12px; }
.gift-how { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-top: 26px; background: var(--card); }
.gift-how ol { margin: 8px 0 0; padding-left: 20px; line-height: 1.6; color: var(--muted); }
.gift-error { border: 1px solid var(--danger); color: var(--danger); border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; }
.gift-ok { border: 1px solid #34d399; border-radius: 12px; padding: 16px 18px; margin: 0 0 18px; }

/* ── Order page ───────────────────────────────────────────────────────── */
.gift-order { max-width: 760px; margin: 0 auto; }
.gift-codes { display: grid; gap: 10px; margin: 14px 0; }
.gift-code-row {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: clamp(20px, 6vw, 28px); font-weight: 700;
    letter-spacing: 2px; text-align: center; padding: 12px; border: 2px dashed var(--accent); border-radius: 12px;
}
.gift-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.gift-actions .btn { flex: 1 1 200px; padding: 13px 16px; font-weight: 700; }
.gift-summary { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin: 14px 0; }
.gift-summary .thumb { width: 92px; flex: 0 0 92px; }
.gift-summary .what { flex: 1 1 200px; }
.gift-summary .what strong { font-size: 17px; }

/* ── Redeem page ──────────────────────────────────────────────────────── */
.gift-redeem { max-width: 520px; margin: 0 auto; }
.gift-redeem .code-input {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 22px; letter-spacing: 3px; text-align: center;
    text-transform: lowercase;
}