.gift-dialog { --accent: var(--groom); --accent-hover: var(--groom-hover); width: min(90%, 760px); max-width: calc(100vw - 16px); max-height: 92dvh; border: 0; border-radius: 24px; padding: 0; color: var(--ink); background: var(--ivory); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.gift-dialog[data-side=bride] { --accent: var(--bride); --accent-hover: var(--bride-hover); }
.gift-dialog::backdrop { background: rgba(17,34,58,.55); }
.gift-dialog[open] { display: flex; flex-direction: column; overflow: hidden; animation: panel-in var(--entry); }
.gift-dialog.keyboard-open { height: min(1000px, 94dvh); max-height: 94dvh; }
.flow-toolbar { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.flow-toolbar p { font-size: 14px; color: var(--secondary); }
.icon-button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: var(--space-3); border: 0; border-radius: 12px; color: var(--ink); background: transparent; }
.icon-button:hover { background: var(--line); }
.icon-button svg { width: 20px; height: 20px; }
.flow-body { padding: clamp(24px, 5vw, 40px); min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.flow-family { color: var(--accent); font-weight: 600; margin-bottom: var(--space-3); font-size: 16px; }
.flow-body h2 { font-size: clamp(23px, 3.5vw, 32px); font-weight: 500; line-height: 1.45; letter-spacing: -.04em; margin-bottom: var(--space-8); outline-offset: 8px; }
.flow-body section { animation: panel-in var(--entry); }
.recipient-list { display: grid; gap: var(--space-3); }
.recipient-button { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); width: 100%; min-height: 100px; text-align: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
.recipient-button:hover { background: var(--line); }
.recipient-person { display: grid; gap: var(--space-2); }
.recipient-relation { font-size: 14px; color: var(--secondary); }
.recipient-name { font-size: 25px; font-weight: 500; }
.recipient-action { display: grid; gap: var(--space-2); justify-items: end; font-size: 14px; color: var(--accent); }
.recipient-action svg { width: 24px; height: 24px; }
.selected-recipient { padding-bottom: var(--space-5); color: var(--accent); font-size: 17px; }
.gift-dialog[data-step=amount] .flow-body h2 { margin-bottom: var(--space-5); }
label { display: block; font-size: 16px; margin-bottom: var(--space-3); }
.optional { font-size: 13px; color: var(--secondary); margin-inline-start: var(--space-2); }
input { width: 100%; min-height: 60px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); caret-color: var(--accent); padding: var(--space-4); font-size: 20px; }
input::placeholder { color: var(--secondary); opacity: 1; font-size: 16px; }
#sender { margin-bottom: var(--space-6); }
.phone-hint { margin-bottom: var(--space-6); }
.form-error { color: var(--bride-hover); font-size: 14px; line-height: 1.5; margin-bottom: var(--space-4); }
.form-error:empty { display: none; }
.installment-select { width: 100%; min-height: 60px; padding: var(--space-4); border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); font: inherit; font-size: 20px; }
.installment-select:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.card-terms { margin-top: calc(-1 * var(--space-4)); margin-bottom: var(--space-6); color: var(--secondary); font-size: 17px; text-align: center; }
.amount-input { position: relative; }
.amount-input input { padding-inline-end: 52px; font-size: 28px; font-variant-numeric: tabular-nums; }
.amount-input span { position: absolute; inset-inline-end: var(--space-5); top: 50%; transform: translateY(-50%); font-size: 18px; }
.field-hint { font-size: 13px; color: var(--secondary); margin-top: var(--space-2); }
.amount-presets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-2); margin-block: var(--space-4) var(--space-6); }
.amount-presets button { min-height: 48px; padding: var(--space-2); color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 12px; font-size: 16px; white-space: nowrap; }
.amount-presets button:hover { background: var(--line); }
.amount-presets button[aria-pressed=true] { color: var(--white); background: var(--accent); border-color: transparent; }
.primary-action { display: flex; align-items: center; justify-content: center; gap: var(--space-4); width: 100%; min-height: 64px; padding: var(--space-4) var(--space-6); color: var(--white); background: var(--accent); border: 0; border-radius: var(--radius); font-size: 20px; font-weight: 500; }
.primary-action:hover:not(:disabled) { background: var(--accent-hover); }
.primary-action svg { width: 24px; height: 24px; }
.text-button { display: block; min-height: 48px; margin: var(--space-3) auto 0; padding: var(--space-3); background: transparent; color: var(--secondary); border: 0; text-decoration: underline; text-underline-offset: 4px; }
.text-button:hover { color: var(--ink); }
.gift-summary { margin: 0 0 var(--space-6); }
.gift-summary > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-5); }
#review-step .gift-summary > div { padding-block: 8px; }
#review-step .gift-summary > .summary-charge { padding-block: 5px; }
#review-step .gift-summary > .summary-charge dd { font-size: 18px; }
#review-step .gift-summary > .summary-total { padding-block: 12px; margin-top: 8px; }
#review-step .gift-summary { margin-bottom: 16px; }
#review-step .demo-note { margin-block: 12px; font-size: 13px; }
#review-step .primary-action { min-height: 56px; }
.card-breakdown { margin-top: -16px; margin-bottom: 28px; color: var(--secondary); text-align: center; font-size: 14px; line-height: 1.5; }
.gift-dialog[data-step=review] .flow-body h2 { margin-bottom: var(--space-6); }
.gift-summary dt { color: var(--secondary); font-size: 16px; }
.gift-summary dd { margin: 0; text-align: end; font-size: 20px; overflow-wrap: anywhere; }
.gift-summary .summary-total { border-top: 1px solid var(--line); margin-top: var(--space-4); align-items: center; }
.summary-total dd { font-size: 32px; color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }
.demo-note { font-size: 14px; color: var(--secondary); text-align: center; line-height: 1.8; margin-block: var(--space-5); }
.card-illustration { width: 160px; color: var(--accent); margin: var(--space-4) auto var(--space-8); }
.card-instruction, .card-status, .card-amount { text-align: center; }
.card-instruction { font-size: 19px; line-height: 1.7; }
.card-status { color: var(--secondary); font-size: 15px; line-height: 1.8; margin-block: var(--space-3); min-height: 54px; }
.card-amount { font-size: 32px; font-weight: 500; margin-block: var(--space-6) var(--space-8); font-variant-numeric: tabular-nums; }
.success-mark { color: var(--accent); width: 72px; margin: var(--space-4) auto var(--space-6); }
.completion-description { text-align: center; font-size: 18px; line-height: 1.8; }
.completion-amount { text-align: center; font-size: 36px; font-weight: 500; margin-block: var(--space-5); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .flow-body { padding: var(--space-6); } .recipient-button { padding: var(--space-5); } .recipient-name { font-size: 23px; } .recipient-action { font-size: 12px; } .gift-dialog { width: 94%; } .amount-presets { gap: var(--space-1); } .amount-presets button { font-size: 14px; } }