/*
 * Deliberately light: spacing and structure only. Colours, fonts and button
 * styles come from the theme, so the feature looks like part of the shop.
 */

.store-balance__hint {
    display: block;
    margin-top: 0.25em;
    font-size: 0.875em;
    opacity: 0.75;
}

.store-balance__hint[hidden] {
    display: none;
}

.store-balance__optional {
    font-weight: normal;
    opacity: 0.7;
}

/* Product page */

.store-balance-gift-card {
    margin: 0 0 1.5em;
}

.store-balance-gift-card fieldset {
    margin: 0 0 1.25em;
    padding: 0;
    border: 0;
    min-width: 0;
}

.store-balance-gift-card legend {
    padding: 0;
    margin-bottom: 0.6em;
    font-size: 1.0625em;
    font-weight: 600;
}

.store-balance-gift-card__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 1em;
}

.store-balance-gift-card__choice {
    position: relative;
    cursor: pointer;
}

.store-balance-gift-card__choice input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.store-balance-gift-card__choice-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5em;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0.4em 1.2em;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    border-radius: 999px;
    line-height: 1.2;
}

.store-balance-gift-card__choice:hover .store-balance-gift-card__choice-label {
    border-color: currentColor;
}

/*
 * The theme's primary colour where it has one (block themes expose it as a
 * preset), a dark neutral where it does not. Override with
 * --wc-store-balance-accent.
 */
.store-balance-gift-card__choice input:checked + .store-balance-gift-card__choice-label {
    border-color: var(--wc-store-balance-accent, var(--wp--preset--color--primary, #1e1e1e));
    background: var(--wc-store-balance-accent, var(--wp--preset--color--primary, #1e1e1e));
    color: var(--wc-store-balance-accent-text, #fff);
    font-weight: 600;
}

.store-balance-gift-card__choice input:focus-visible + .store-balance-gift-card__choice-label {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.store-balance-gift-card .store-balance-gift-card__custom {
    margin-top: 1.25em;
}

.store-balance-gift-card__notices {
    margin-bottom: 1.25em;
    scroll-margin-top: 6em;
}

.store-balance-gift-card__notices:focus {
    outline: none;
}

.store-balance__error {
    display: block;
    margin-top: 0.25em;
    color: #b32d2e;
    font-size: 0.9375em;
}

.store-balance-gift-card [aria-invalid='true'] {
    border-color: #b32d2e;
}

/* A long email address or an unbroken word must wrap, not widen the table. */
.store-balance-item-meta,
.store-balance-item-meta li,
.wc-item-meta {
    overflow-wrap: anywhere;
}

.store-balance-item-meta {
    margin: 0.5em 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375em;
}

.store-balance-gift-card .form-row {
    float: none;
    width: 100%;
    margin: 0 0 1.25em;
    padding: 0;
}

.store-balance-gift-card .form-row:last-child {
    margin-bottom: 0;
}

.store-balance-gift-card label {
    display: block;
    margin-bottom: 0.4em;
    font-size: 0.9375em;
    font-weight: 600;
}

.store-balance-gift-card .store-balance-gift-card__choice {
    display: inline-block;
    margin: 0;
    font-size: 1em;
    font-weight: normal;
}

/*
 * The fields fill the column they are in and share one shape. The colours are
 * the theme's own text colour, thinned; the radius and the accent can be set
 * with --wc-store-balance-radius and --wc-store-balance-accent.
 */
.store-balance-gift-card input.input-text,
.store-balance-gift-card textarea.input-text {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 48px;
    box-sizing: border-box;
    margin: 0;
    padding: 0.7em 0.9em;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: var(--wc-store-balance-radius, 8px);
    background: #fff;
    box-shadow: none;
    color: inherit;
    font: inherit;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.store-balance-gift-card textarea.input-text {
    min-height: 6.5em;
    resize: vertical;
}

.store-balance-gift-card input.input-text:hover,
.store-balance-gift-card textarea.input-text:hover {
    border-color: color-mix(in srgb, currentColor 60%, transparent);
}

.store-balance-gift-card input.input-text:focus,
.store-balance-gift-card textarea.input-text:focus {
    border-color: var(--wc-store-balance-accent, var(--wp--preset--color--primary, #1e1e1e));
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wc-store-balance-accent, var(--wp--preset--color--primary, #1e1e1e)) 20%, transparent);
}

.store-balance-gift-card input.input-text[aria-invalid='true'],
.store-balance-gift-card textarea.input-text[aria-invalid='true'] {
    border-color: #b32d2e;
}

.store-balance-gift-card input.input-text[aria-invalid='true']:focus,
.store-balance-gift-card textarea.input-text[aria-invalid='true']:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, #b32d2e 20%, transparent);
}

.store-balance-gift-card .store-balance__hint {
    margin-top: 0.4em;
    line-height: 1.4;
}

/* The details are a section of their own, set apart from the amount. */
.store-balance-gift-card .store-balance-gift-card__details {
    margin-bottom: 0;
    padding-top: 1.25em;
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.store-balance-gift-card .store-balance-gift-card__details legend {
    float: left;
    width: 100%;
    margin-bottom: 0.9em;
}

.store-balance-gift-card .store-balance-gift-card__details legend + * {
    clear: both;
}

/* My Account */

.store-balance section {
    margin-bottom: 2em;
}

.store-balance__summary {
    padding: 1.25em 1.5em;
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: 8px;
}

.store-balance__label {
    margin: 0;
    font-size: 1em;
    font-weight: normal;
    opacity: 0.75;
}

.store-balance__amount {
    margin: 0.1em 0 0.4em;
    font-size: 2em;
    font-weight: 600;
    line-height: 1.2;
}

.store-balance__plus {
    opacity: 0.5;
    font-weight: normal;
}

.store-balance__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.store-balance__form input.input-text {
    width: 100%;
    max-width: 22em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.store-balance__form input.input-text::placeholder {
    letter-spacing: 0.05em;
    opacity: 0.4;
}

.store-balance__past summary {
    cursor: pointer;
}

/* Classic cart and checkout */

.store-balance-checkout {
    margin: 0 0 1.5em;
}

.store-balance-checkout__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    align-items: flex-start;
}

.store-balance-checkout__row input.input-text {
    flex: 1 1 12em;
    min-width: 0;
    text-transform: uppercase;
}

.store-balance-checkout__message {
    margin: 0.5em 0 0;
}

.store-balance-checkout__message[data-type='error'] {
    color: #b32d2e;
}

.store-balance-checkout__applied {
    margin: 0.75em 0 0;
    padding: 0;
    list-style: none;
}

.store-balance-checkout__applied li {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    padding: 0.25em 0;
}

.store-balance-checkout__remove {
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.store-balance-checkout__balance {
    display: flex;
    gap: 0.5em;
    align-items: flex-start;
    margin-top: 0.75em;
}