/* ===========================
   COMPONENTS
   =========================== */

/* Cards */
.card,
.profile-card,
.post-card,
.gift-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

/* Buttons */
button,
.btn,
.btn-like,
.btn-message,
.btn-buy-coins,
.btn-send-gift {
    padding: 10px 18px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

.btn-secondary {
    background: var(--accent-soft);
    color: var(--accent-hover);
}

/* Inputs */
input,
textarea,
select {
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-size: 15px;
    transition: var(--transition);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    outline: none;
}