/* =====================================================================
   Gift card purchase page (Phase 44A). Loaded alongside menu.css, which
   already supplies .co-card/.co-h/.btn-primary/.btn-secondary/.alert/
   .alert-error/.req and the shared design tokens — this file only adds
   the amount-picker grid and confirmation code box, matching how
   pay-at-table.css stays small and page-specific rather than growing
   menu.css.
   ===================================================================== */

.gc-intro {
    color: var(--ink-muted);
    font-size: var(--size-body-sm, 14px);
    margin: 0 0 var(--space-6, 20px);
}

.gc-amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.gc-amount-btn {
    padding: 14px 8px;
    border-radius: var(--radius-card, 10px);
    border: 1px solid var(--border-subtle, #DFE2DB);
    background: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    cursor: pointer;
}
.gc-amount-btn.is-active {
    border-color: var(--brand-color);
    background: var(--brand-color-soft, rgba(0, 0, 0, 0.04));
    color: var(--brand-color);
}

.gc-field {
    display: block;
    margin-top: 14px;
}
.gc-field:first-child { margin-top: 0; }
.gc-field[hidden] { display: none; }
.gc-field > span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-muted);
    margin-bottom: 4px;
}
.gc-field input[type="text"],
.gc-field input[type="email"],
.gc-field input[type="number"],
.gc-field textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle, #DFE2DB);
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
}
.gc-field textarea { resize: vertical; }

.gc-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}
.gc-checkbox > span { margin: 0; font-weight: 500; color: var(--ink); }
.gc-checkbox input { width: 17px; height: 17px; }

.gc-conf-headline {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 16px;
}
.gc-code-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 18px;
    border-radius: var(--radius-card, 10px);
    background: var(--brand-color-soft, rgba(0, 0, 0, 0.04));
    margin-bottom: 16px;
}
.gc-code-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
}
.gc-code {
    font-family: var(--font-mono, monospace);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--brand-color);
}
.gc-conf-sub {
    color: var(--ink-muted);
    font-size: 13.5px;
}