/* DMC 9.10B - shared saved-content button. */
[data-saved-content] {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem 1rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid rgba(0, 157, 94, .24);
    border-radius: 18px;
    background: linear-gradient(135deg, #f7fffb 0%, #eefaf4 100%);
    color: #082f26;
}

.saved-content-control__copy {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.saved-content-control__copy > span:first-child {
    display: grid;
    flex: 0 0 2.6rem;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 22px rgba(4, 83, 55, .08);
}

.saved-content-control__copy span:last-child {
    display: grid;
    gap: .18rem;
    min-width: 0;
}

.saved-content-control__copy strong,
.saved-content-control__copy small {
    overflow-wrap: anywhere;
}

.saved-content-control__copy strong {
    font-size: .96rem;
    color: #006b45;
}

.saved-content-control__copy small {
    color: #5f726b;
    line-height: 1.4;
}

.saved-content-control__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .68rem 1rem;
    border: 1px solid #00a866;
    border-radius: 999px;
    background: #fff;
    color: #00784b;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease, color .16s ease;
}

.saved-content-control__button:not(:disabled):hover {
    transform: translateY(-1px);
}

.saved-content-control__button:focus-visible {
    outline: 3px solid rgba(0, 168, 102, .24);
    outline-offset: 3px;
}

.saved-content-control__button:disabled {
    cursor: wait;
    opacity: .65;
}

[data-saved-content].is-saved .saved-content-control__button {
    background: #009d5e;
    color: #fff;
}

[data-saved-content].is-saved .saved-content-control__icon {
    color: #fff;
}

.saved-content-control__feedback {
    grid-column: 1 / -1;
    margin: 0;
    color: #526860;
    font-size: .86rem;
}

.saved-content-control__feedback.is-error {
    color: #b4232c;
}

@media (max-width: 620px) {
    [data-saved-content] {
        grid-template-columns: minmax(0, 1fr);
        padding: .9rem;
    }

    .saved-content-control__button {
        width: 100%;
    }
}