.root {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32);
}

.block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

.submitGroup {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-18);
}

.cardLabelRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8);
}

.cardBrands {
    display: flex;
    align-items: center;
}

.sectionLabel {
    font-family: var(--font-decorative);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-xxl);
    color: var(--color-text-primary);
}

.slot {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.cardStack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

/* Collapsed "+ Add new card" — a full-width bordered box matching the saved-card row
   (Figma node 343:5714 "Input": 1px neutral border, 12px radius, 18px padding, label left). */
.addCardButton {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--spacing-18);
    border: var(--border-width-sm) solid var(--border-color-light);
    border-radius: var(--border-radius-sm);
    background: var(--color-bg-base-light);
    text-align: left;
    cursor: pointer;
}

.addCardLabel {
    color: var(--color-text-primary);
}

/* Expanded "add new card" panel: the same box with a blue-active border, holding the
   "+ Add new card" / CANCEL header and the new-card slot. */
.addCardBox {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    padding: var(--spacing-18);
    border: var(--border-width-sm) solid var(--border-color-indigo);
    border-radius: var(--border-radius-sm);
}

.addCardHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-8);
}

/* Inline card-field error (danger icon + message) beneath the card input — Figma 569:12568. */
.cardError {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.cardErrorIcon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--color-text-danger-light);
}

.cardErrorText {
    color: var(--color-text-danger-light);
}