/* defines reusable UI elements such as cards, buttons, inputs, balance pills, and notifs */

.card {
    padding: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-small);
}

.card.interactive {
    transition:
        transform var(--transition-normal),
        border-color var(--transition-normal),
        background var(--transition-normal);
}

.card.interactive:hover {
    background: var(--color-surface-light);
    border-color: var(--color-border-light);
    transform: translateY(-3px);
}

.button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;

    background: var(--color-surface-light);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);

    cursor: pointer;
    font-weight: 750;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.button:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border-light);
    transform: translateY(-1px);
}

.button:active {
    transform: translateY(1px);
}

.button.primary {
    background: var(--color-primary);
    color: var(--color-text-dark);
    border-color: transparent;
}

.button.primary:hover {
    background: var(--color-primary-hover);
}

.button.danger {
    background: rgb(239 91 104 / 14%);
    color: var(--color-danger);
    border-color: rgb(239 91 104 / 32%);
}

.balance-pill {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 0 15px;

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-round);
    box-shadow: var(--shadow-small);
}

.balance-pill strong {
    font-size: 0.98rem;
}

.form-group {
    display: grid;
    gap: 8px;
}

.form-label {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.input {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;

    background: var(--color-background);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    outline: none;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(75 185 233 / 12%);
}

.toast-container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;

    display: grid;
    width: min(380px, calc(100vw - 40px));
    gap: 10px;
}

.toast {
    padding: 14px 16px;

    background: var(--color-surface-light);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-medium);

    animation: toast-enter 200ms ease both;
}

.toast.success {
    border-left: 4px solid var(--color-success);
}

.toast.error {
    border-left: 4px solid var(--color-danger);
}

@keyframes toast-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}