/**
 * F5.8 — Member save control.
 * Theme owns presentation only; state mutations remain in clube-member REST.
 */

.cdc-member-save-region {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    inline-size: min(68rem, calc(100% - (2 * var(--cdc-page-gutter))));
    margin-block: -0.45rem 1.4rem;
    margin-inline: auto;
}

.cdc-member-save {
    align-items: center;
    background: var(--wp--preset--color--surface, #fff);
    border: 1px solid var(--wp--preset--color--line, #d7deda);
    border-radius: 999px;
    color: var(--wp--preset--color--ink, #1e2623);
    display: inline-flex;
    font-size: 0.96rem;
    font-weight: 760;
    gap: 0.55rem;
    min-block-size: 3rem;
    padding: 0.68rem 1.05rem;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.cdc-member-save:hover {
    background: var(--wp--preset--color--brand-soft, #ddeae4);
    border-color: color-mix(in srgb, var(--cdc-zone-accent, var(--wp--preset--color--brand-main, #2f6b57)) 42%, transparent);
    text-decoration: none;
}

.cdc-member-save:active {
    transform: translateY(1px);
}

.cdc-member-save__icon {
    block-size: 1.1rem;
    display: inline-grid;
    inline-size: 1.1rem;
    place-items: center;
}

.cdc-member-save__icon svg {
    block-size: 100%;
    fill: none;
    inline-size: 100%;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
}

.cdc-member-save[data-state="saved"] {
    background: var(--wp--preset--color--brand-soft, #ddeae4);
    border-color: transparent;
    color: var(--cdc-zone-accent, var(--wp--preset--color--brand-main, #2f6b57));
}

.cdc-member-save[data-state="saved"] .cdc-member-save__icon svg {
    fill: currentColor;
}

.cdc-member-save[data-state="loading"] {
    cursor: progress;
    opacity: 0.72;
    pointer-events: none;
}

.cdc-member-save__feedback {
    color: var(--wp--preset--color--ink-muted, #5f6b66);
    font-size: 0.82rem;
    line-height: 1.35;
    min-block-size: 1.1em;
}

.cdc-member-save__feedback[data-tone="error"] {
    color: #8a2f2f;
}

@media (max-width: 42rem) {
    .cdc-member-save-region {
        inline-size: calc(100% - 2rem);
        margin-block: -0.25rem 1.1rem;
    }

    .cdc-member-save {
        min-block-size: 3rem;
        padding-inline: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cdc-member-save {
        transition: none;
    }
}