.btn:disabled {
    cursor: wait;
    opacity: .75;
    transform: none;
}

.button-spinner {
    display: inline-block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: button-spin .75s linear infinite;
}

.feedback-modal {
    width: min(440px, calc(100% - 32px));
    max-height: calc(100svh - 40px);
    padding: 0;
    color: #203d35;
    background: #fcfdf9;
    border: 1px solid #e0e7d7;
    border-radius: 24px;
    box-shadow: 0 24px 90px #123d3540;
}

.feedback-modal::backdrop {
    background: #102e286b;
    backdrop-filter: blur(5px);
}

.feedback-content {
    padding: clamp(26px, 6vw, 40px);
    text-align: center;
}

.feedback-symbol {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    background: #e6efce;
    color: #385f34;
    border-radius: 50%;
    font-size: 30px;
    font-weight: 600;
}

.feedback-modal[data-status="error"] .feedback-symbol {
    background: #fae9df;
    color: #9b4a2d;
}

.feedback-content h2 {
    margin: 0 0 14px;
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: -.8px;
}

.feedback-content p {
    color: #6b7d70;
    font-size: 14px;
    line-height: 1.8;
    margin: 0 0 26px;
}

.feedback-content .btn {
    width: 100%;
}

@keyframes button-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .button-spinner { animation: none; }
}
