/* Stripe's card form for saving a card (static/js/card-setup.js): the sign-up card step
   (new-design/partials/card-step.html, a dialog built on insurance-step.css) and the card page
   (user/stripe-cards.html). Canvas boards "K1 · Card step" and "K1 · Card page". */

/* What saving a card means (new-design/partials/card-promise.html). */
.card-promise {
    display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px;
    background: #F4F1FC; color: #19284A; font-size: 13px; line-height: 19px;
}
.card-promise__head { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.card-promise__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.card-promise__list li { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.card-promise__list svg { flex-shrink: 0; margin-top: 1px; color: #5B2FC9; }

/* The card step's body is a scrolling flex column: with a min-height set, the form's box would shrink below Stripe's
   form, which then runs under the error after it. */
.card-setup__element { min-height: 120px; flex-shrink: 0; }
/* Google Pay and Apple Pay above Stripe's form (card-setup.js WALLET_BUTTONS), then "or enter a card". It keeps its
   height in the card step's scrolling body too. */
.card-express { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.card-express[hidden] { display: none; }
.card-express__or {
    display: flex; align-items: center; gap: 12px; margin: 0; color: #5B6478; font-size: 13px; line-height: 18px;
}
.card-express__or::before, .card-express__or::after { content: ""; flex: 1 1 0; height: 1px; background: #E3E6EC; }
.card-setup__error {
    display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px;
    background: #FDE7EA; color: #A3122A; font-size: 14px; line-height: 20px; font-weight: 500;
}
.card-setup__error svg { flex-shrink: 0; margin-top: 1px; }
.card-setup__error[hidden] { display: none; }

/* Save card, and its "Saving…" while Stripe confirms the card (aria-busy, set by card-setup.js). */
.card-save {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin: 0;
    padding: 0 20px; border: 0; border-radius: 12px; background: #5B2FC9; color: #FFFFFF; cursor: pointer;
    font-family: inherit; font-size: 16px; line-height: 22px; font-weight: 600; text-transform: none;
}
.card-save:hover { background: #4A23AE; }
.card-save:focus-visible { outline: 3px solid rgba(91, 47, 201, 0.4); outline-offset: 2px; }
.card-save:disabled { background: #C9BEEB; cursor: default; }
.card-save[aria-busy="true"] { background: #8C74D8; cursor: progress; }
.card-save__busy { display: none; align-items: center; gap: 8px; }
.card-save[aria-busy="true"] .card-save__label { display: none; }
.card-save[aria-busy="true"] .card-save__busy { display: inline-flex; }
.card-save__busy svg { animation: card-spin 0.8s linear infinite; }
@keyframes card-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .card-save__busy svg { animation: none; } }

/* The sign-up card step: the close button sits on the title row. */
.card-step .card-step__top { align-items: flex-start; }
.card-step .card-step__intro { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* card-step.js moves focus to the title when the step opens; a heading takes no ring. */
.card-step #card-step-title:focus { outline: none; }
.card-step [data-card-next-show] { display: none; }
.card-step[data-card-next="id"] [data-card-next-show="id"],
.card-step[data-card-next="done"] [data-card-next-show="done"] { display: block; }
.card-alert {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px;
    background: #E7F6EE; color: #19284A; font-size: 14px; line-height: 20px;
}
.card-alert svg { flex-shrink: 0; margin-top: 1px; color: #0F6B3E; }
.card-alert__text { display: flex; flex-direction: column; }
.card-alert__text b { font-weight: 600; }
.card-alert__text > span { color: #4A5468; }
.card-alert[hidden] { display: none; }

/* The card page. */
.card-page { max-width: 640px; margin: 24px auto 40px; display: flex; flex-direction: column; gap: 20px; color: #19284A; }
.card-page [hidden] { display: none !important; }
/* The settings page lays every list in its tabs out as a grid of four (main.css "body .vfinder .tab-pane ul"). */
.vfinder .tab-pane .card-page .card-promise__list { display: flex; flex-direction: column; gap: 6px; }
.vfinder .tab-pane .card-page .card-page__list { display: flex; flex-direction: column; gap: 10px; }
.card-page__head { display: flex; flex-direction: column; gap: 4px; }
.card-page__title { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; color: #19284A; }
.card-page__note { margin: 0; color: #4A5468; font-size: 15px; line-height: 22px; }
.card-page__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.card-page__card {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0;
    border: 1.5px solid #E3E6EC; border-radius: 14px; background: #FFFFFF;
}
.card-page__brand {
    flex-shrink: 0; width: 52px; height: 34px; border-radius: 6px; border: 1px solid #E3E6EC; background: #FFFFFF;
    color: #5B6478; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.card-page__brand--amex { background: #006FCF; border-color: #006FCF; }
.card-page__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card-page__label { font-size: 15px; line-height: 21px; font-weight: 600; color: #19284A; }
.card-page__expires { font-size: 13px; line-height: 18px; color: #4A5468; }
.card-page__remove {
    flex-shrink: 0; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 10px; background: none;
    color: #A3122A; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.card-page__remove:hover { background: #FDE7EA; }
.card-page__remove:disabled { opacity: .5; cursor: default; }
.card-page__add {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin: 0;
    border: 1.5px solid #5B2FC9; border-radius: 12px; background: #FFFFFF; color: #5B2FC9;
    font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.card-page__add:hover { background: #F4F1FC; }
.card-page__private {
    display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0;
    font-size: 12px; line-height: 17px; color: #4A5468; text-align: center;
}
.card-page__private svg { flex-shrink: 0; }
.card-page__form {
    display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 16px;
    border: 1.5px solid #E3E6EC; background: #FFFFFF;
}
.card-page__form-title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; color: #19284A; }
.card-page__form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-page__form-foot .card-page__private { justify-content: flex-start; text-align: left; }
.card-page__cancel {
    flex-shrink: 0; margin: 0; padding: 6px 10px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 600; color: #19284A; text-decoration: underline;
}
@media (max-width: 575px) {
    .card-page { margin-top: 16px; gap: 16px; }
    .card-page__form { padding: 16px; }
    /* The settings page leaves the list about 270 px on a phone, so Remove goes under the card's name and the name
       keeps the row's width. */
    .card-page__card { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; padding: 12px 14px; }
    .card-page__brand { grid-row: 1 / span 2; align-self: start; }
    .card-page__remove { grid-column: 2; justify-self: start; margin: -6px 0 -12px -12px; }
}