/*
 * سیستم مرکزی رنگ و وضعیت دکمه‌ها
 * این فایل باید بعد از تمام CSSهای قالب و صفحه بارگذاری شود تا رنگ دکمه‌ها
 * در فروشگاه، حساب مشتری و مدیریت یکسان و قابل پیش‌بینی باقی بماند.
 */
:root {
    --color-primary: #24543d;
    --color-primary-hover: #193e2c;
    --color-primary-active: #123323;
    --color-primary-text: #ffffff;
    --color-secondary: #3d4b5c;
    --color-secondary-hover: #2b3745;
    --color-secondary-active: #202a35;
    --color-secondary-text: #ffffff;
    --color-success: #19713f;
    --color-success-hover: #115b31;
    --color-success-active: #0b4927;
    --color-success-text: #ffffff;
    --color-danger: #b42318;
    --color-danger-hover: #8f1c14;
    --color-danger-active: #75160f;
    --color-danger-text: #ffffff;
    --color-warning: #7a4600;
    --color-warning-hover: #603700;
    --color-warning-active: #4d2c00;
    --color-warning-text: #ffffff;
    --color-info: #175b8f;
    --color-info-hover: #10476f;
    --color-info-active: #0b3859;
    --color-info-text: #ffffff;
    --color-surface: #ffffff;
    --color-background: #f7f7f5;
    --color-border: #c8cdd3;
    --color-text: #24231f;
    --color-focus-ring: #f4b942;
    --color-disabled: #d7dbe0;
    --color-disabled-border: #bdc3ca;
    --color-disabled-text: #3f4750;
    --button-radius: 10px;
    --button-height: 44px;
}

:is(.btn, a.btn, button.btn, input.btn) {
    align-items: center;
    background-image: none;
    border-style: solid;
    border-width: 1px;
    border-radius: var(--button-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
    cursor: pointer;
    display: inline-flex;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    line-height: 1.4;
    min-height: var(--button-height);
    opacity: 1;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    transition: background-color .16s ease, border-color .16s ease,
        box-shadow .16s ease, color .16s ease, transform .08s ease;
}

/* متن و آیکن داخلی نباید رنگ اشتباه را از Theme قدیمی به ارث ببرند. */
:is(.btn, a.btn, button.btn) :where(span, i, svg) {
    color: inherit;
}

.btn:is(.btn-main, .btn-primary) {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}
.btn:is(.btn-main, .btn-primary):hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-text);
}
.btn:is(.btn-main, .btn-primary):active,
.btn:is(.btn-main, .btn-primary).active {
    background-color: var(--color-primary-active);
    border-color: var(--color-primary-active);
    color: var(--color-primary-text);
}

.btn:is(.btn-secondary, .btn-inverse) {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-secondary-text);
}
.btn:is(.btn-secondary, .btn-inverse):hover {
    background-color: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
    color: var(--color-secondary-text);
}
.btn:is(.btn-secondary, .btn-inverse):active,
.btn:is(.btn-secondary, .btn-inverse).active {
    background-color: var(--color-secondary-active);
    border-color: var(--color-secondary-active);
    color: var(--color-secondary-text);
}

.btn.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-success-text);
}
.btn.btn-success:hover {
    background-color: var(--color-success-hover);
    border-color: var(--color-success-hover);
    color: var(--color-success-text);
}
.btn.btn-success:active,
.btn.btn-success.active {
    background-color: var(--color-success-active);
    border-color: var(--color-success-active);
    color: var(--color-success-text);
}

.btn.btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-danger-text);
}
.btn.btn-danger:hover {
    background-color: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
    color: var(--color-danger-text);
}
.btn.btn-danger:active,
.btn.btn-danger.active {
    background-color: var(--color-danger-active);
    border-color: var(--color-danger-active);
    color: var(--color-danger-text);
}

.btn.btn-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-warning-text);
}
.btn.btn-warning:hover {
    background-color: var(--color-warning-hover);
    border-color: var(--color-warning-hover);
    color: var(--color-warning-text);
}
.btn.btn-warning:active,
.btn.btn-warning.active {
    background-color: var(--color-warning-active);
    border-color: var(--color-warning-active);
    color: var(--color-warning-text);
}

.btn.btn-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-info-text);
}
.btn.btn-info:hover {
    background-color: var(--color-info-hover);
    border-color: var(--color-info-hover);
    color: var(--color-info-text);
}
.btn.btn-info:active,
.btn.btn-info.active {
    background-color: var(--color-info-active);
    border-color: var(--color-info-active);
    color: var(--color-info-text);
}

.btn:is(.btn-default, .btn-outline, .btn-outline-primary, .btn-outline-secondary,
    .btn-outline-success, .category-filter-clear) {
    background-color: var(--color-surface);
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn:is(.btn-default, .btn-outline, .btn-outline-primary, .btn-outline-secondary,
    .btn-outline-success, .category-filter-clear):hover {
    background-color: #e8f1ec;
    border-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
}
.btn:is(.btn-default, .btn-outline, .btn-outline-primary, .btn-outline-secondary,
    .btn-outline-success, .category-filter-clear):active,
.btn:is(.btn-default, .btn-outline, .btn-outline-primary, .btn-outline-secondary,
    .btn-outline-success, .category-filter-clear).active {
    background-color: #dce9e1;
    border-color: var(--color-primary-active);
    color: var(--color-primary-active);
}

.btn.btn-outline-danger {
    background-color: var(--color-surface);
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.btn.btn-outline-danger:hover,
.btn.btn-outline-danger:active {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-danger-text);
}

.btn:is(.btn-link, .btn-ghost) {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--color-primary);
}
.btn:is(.btn-link, .btn-ghost):hover {
    background-color: #e8f1ec;
    border-color: transparent;
    color: var(--color-primary-hover);
}

:is(.btn, a.btn, button.btn):focus,
:is(.btn, a.btn, button.btn):focus-visible {
    box-shadow: 0 0 0 3px var(--color-surface),
        0 0 0 6px var(--color-focus-ring);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

:is(.btn, a.btn, button.btn):active {
    box-shadow: 0 0 0 2px rgba(15, 23, 42, .18);
    transform: translateY(1px);
}

:is(.btn, a.btn, button.btn):disabled,
:is(.btn, a.btn, button.btn).disabled,
:is(.btn, a.btn, button.btn)[aria-disabled="true"] {
    background-color: var(--color-disabled);
    border-color: var(--color-disabled-border);
    box-shadow: none;
    color: var(--color-disabled-text);
    cursor: not-allowed;
    opacity: 1;
    pointer-events: none;
    transform: none;
}

:is(.btn, a.btn, button.btn).is-loading,
:is(.btn, a.btn, button.btn)[aria-busy="true"] {
    cursor: wait;
    opacity: 1;
    pointer-events: none;
    position: relative;
}
:is(.btn, a.btn, button.btn).is-loading::before,
:is(.btn, a.btn, button.btn)[aria-busy="true"]::before {
    animation: button-spin .7s linear infinite;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    content: "";
    height: 16px;
    width: 16px;
}

.btn-icon {
    aspect-ratio: 1;
    min-width: var(--button-height);
    padding: 8px;
}

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

@media (prefers-reduced-motion: reduce) {
    :is(.btn, a.btn, button.btn) { transition: none; }
    :is(.btn, a.btn, button.btn).is-loading::before,
    :is(.btn, a.btn, button.btn)[aria-busy="true"]::before { animation-duration: 1.4s; }
}