/* static/css/components/buttons.css */
/* Единая система кнопок проекта */

/* ===== БАЗОВЫЕ КНОПКИ ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs, 4px);
    padding: 8px 16px;
    border-radius: var(--radius-md, 8px);
    font-size: var(--font-size-base, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base, 0.3s ease);
    border: none;
    background: transparent;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.5;
}

.btn i,
.btn .bi {
    font-size: 1rem;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== РАЗМЕРЫ КНОПОК ===== */
.btn-sm {
    padding: 4px 12px;
    font-size: var(--font-size-sm, 12px);
}

.btn-md {
    padding: 8px 16px;
    font-size: var(--font-size-base, 14px);
}

.btn-lg {
    padding: 12px 24px;
    font-size: var(--font-size-md, 16px);
}

/* ===== КНОПКИ С ЗАЛИВКОЙ ===== */
.btn-primary,
.btn-dark {
    background: var(--color-primary, #000000);
    color: var(--color-white, #ffffff);
    border: none;
}

.btn-primary:hover:not(:disabled),
.btn-dark:hover:not(:disabled) {
    background: var(--color-primary-hover, #333333);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--color-muted, #6c757d);
    color: var(--color-white, #ffffff);
    border: none;
}

.btn-secondary:hover:not(:disabled) {
    background: #5a6268;
}

.btn-success {
    background: var(--color-success, #28a745);
    color: var(--color-white, #ffffff);
    border: none;
}

.btn-success:hover:not(:disabled) {
    opacity: 0.85;
}

.btn-danger {
    background: var(--color-danger, #dc3545);
    color: var(--color-white, #ffffff);
    border: none;
}

.btn-danger:hover:not(:disabled) {
    background: var(--color-danger-hover, #c82333);
}

.btn-warning {
    background: var(--color-warning, #ffc107);
    color: var(--color-dark, #212529);
    border: none;
}

.btn-warning:hover:not(:disabled) {
    opacity: 0.85;
}

.btn-info {
    background: var(--color-info, #17a2b8);
    color: var(--color-white, #ffffff);
    border: none;
}

.btn-info:hover:not(:disabled) {
    opacity: 0.85;
}

/* ===== КНОПКИ С ОБВОДКОЙ ===== */
.btn-outline-primary,
.btn-outline-dark {
    background: transparent;
    border: 1px solid var(--color-primary, #000000);
    color: var(--color-primary, #000000);
}

.btn-outline-primary:hover:not(:disabled),
.btn-outline-dark:hover:not(:disabled) {
    background: var(--color-primary, #000000);
    color: var(--color-white, #ffffff);
}

.btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--color-muted, #6c757d);
    color: var(--color-muted, #6c757d);
}

.btn-outline-secondary:hover:not(:disabled) {
    background: var(--color-muted, #6c757d);
    color: var(--color-white, #ffffff);
}

.btn-outline-success {
    background: transparent;
    border: 1px solid var(--color-success, #28a745);
    color: var(--color-success, #28a745);
}

.btn-outline-success:hover:not(:disabled) {
    background: var(--color-success, #28a745);
    color: var(--color-white, #ffffff);
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid var(--color-danger, #dc3545);
    color: var(--color-danger, #dc3545);
}

.btn-outline-danger:hover:not(:disabled) {
    background: var(--color-danger, #dc3545);
    color: var(--color-white, #ffffff);
}

.btn-outline-warning {
    background: transparent;
    border: 1px solid var(--color-warning, #ffc107);
    color: var(--color-warning, #ffc107);
}

.btn-outline-warning:hover:not(:disabled) {
    background: var(--color-warning, #ffc107);
    color: var(--color-dark, #212529);
}

.btn-outline-light {
    background: transparent;
    border: 1px solid var(--color-white, #ffffff);
    color: var(--color-white, #ffffff);
}

.btn-outline-light:hover:not(:disabled) {
    background: var(--color-white, #ffffff);
    color: var(--color-primary, #000000);
}

/* ===== КНОПКИ-ИКОНКИ (КРУГЛЫЕ) ===== */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-round, 50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon-sm {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: var(--radius-round, 50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm, 12px);
}

/* ===== ССЫЛОЧНЫЕ КНОПКИ ===== */
.btn-link {
    background: none;
    color: var(--color-primary, #000000);
    text-decoration: underline;
    padding: 4px 8px;
}

.btn-link:hover:not(:disabled) {
    opacity: 0.7;
    transform: none;
}

/* ===== КНОПКИ В МОДАЛЬНЫХ ОКНАХ ===== */
.modal-footer .btn,
.edit-modal-footer .btn {
    min-width: 100px;
}

/* ===== ШИРИНА ===== */
.btn-block,
.w-100 {
    width: 100%;
}

/* ===== КНОПКА ПОИСКА (СПЕЦИАЛЬНАЯ ДЛЯ ХЕДЕРА) ===== */
/* Используем .btn-dark, но добавляем специфичные стили для поиска */
.header-search .btn {
    padding: 10px 20px;
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
}

/* ===== КНОПКИ В КАРТОЧКАХ ТОВАРОВ ===== */
.card-footer .btn {
    border-radius: var(--radius-md, 8px);
}

/* ===== КНОПКИ ИЗБРАННОГО ===== */
.favorite-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid var(--color-border, #dee2e6);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    transition: all var(--transition-fast, 0.2s ease);
}

.favorite-btn:hover:not(:disabled) {
    transform: scale(1.1);
    background: var(--color-danger, #dc3545);
    border-color: var(--color-danger, #dc3545);
    color: var(--color-white, #ffffff);
}

.favorite-btn.active {
    background: var(--color-danger, #dc3545);
    border-color: var(--color-danger, #dc3545);
    color: var(--color-white, #ffffff);
}

.favorite-btn.active:hover:not(:disabled) {
    background: var(--color-danger-hover, #c82333);
    border-color: var(--color-danger-hover, #c82333);
}

/* ===== КНОПКА УДАЛЕНИЯ ИЗ ИЗБРАННОГО (НА СТРАНИЦЕ ИЗБРАННОГО) ===== */
/* .favorite-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid var(--color-border, #dee2e6);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    transition: all var(--transition-fast, 0.2s ease);
}

.favorite-remove-btn:hover:not(:disabled) {
    transform: scale(1.1);
    background: var(--color-danger, #dc3545);
    border-color: var(--color-danger, #dc3545);
    color: var(--color-white, #ffffff);
} */



.drawing-card {
    position: relative;
}

.favorite-remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid var(--color-border, #dee2e6);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
    transition: all var(--transition-fast, 0.2s ease);
    cursor: pointer;
    font-size: 14px;
}

.favorite-remove-btn:hover:not(:disabled) {
    transform: scale(1.1);
    background: var(--color-danger, #dc3545);
    border-color: var(--color-danger, #dc3545);
    color: var(--color-white, #ffffff);
}

.favorite-remove-btn i {
    font-size: 14px;
    line-height: 1;
}




/* ===== ДОПОЛНИТЕЛЬНЫЕ УТИЛИТЫ ===== */
.d-flex .btn + .btn {
    margin-left: var(--spacing-sm, 8px);
}