/* ==========================================================================
   MAKINA.az — Shared components (loaded AFTER main.css, before page CSS)
   Canonical, token-based button system. Old class names keep working and
   modern `.btn--*` aliases are provided so new markup uses one vocabulary.
   Served statically (no Vite build required).
   ========================================================================== */

/* --- Canonical button base ------------------------------------------------ */
.btn,
.btn--base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    line-height: 1;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
    -webkit-appearance: none;
    appearance: none;
}

.btn:focus-visible,
.btn--base:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-ring);
}

.btn:disabled,
.btn[disabled],
.btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Variants (legacy single-dash + modern double-dash share styles) ------ */
.btn-primary,
.btn--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.btn-primary:hover,
.btn--primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
}
.btn-primary:active,
.btn--primary:active {
    background: var(--primary-darker);
    border-color: var(--primary-darker);
}

.btn-secondary,
.btn--secondary {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}
.btn-secondary:hover,
.btn--secondary:hover {
    background: #243342;
    border-color: #243342;
    color: var(--white);
}

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

.btn--ghost {
    background: var(--gray-100);
    border-color: var(--gray-100);
    color: var(--secondary);
}
.btn--ghost:hover {
    background: var(--gray-200);
    border-color: var(--gray-200);
}

.btn--success {
    background: var(--success);
    border-color: var(--success);
    color: var(--white);
}
.btn--success:hover { filter: brightness(0.95); color: var(--white); }

.btn--danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--white);
}
.btn--danger:hover { filter: brightness(0.95); color: var(--white); }

.btn--whatsapp {
    background: #25d366;
    border-color: #25d366;
    color: var(--white);
}
.btn--whatsapp:hover { background: #1ebe5d; border-color: #1ebe5d; color: var(--white); }

/* --- Sizes ---------------------------------------------------------------- */
.btn--sm {
    padding: 8px 14px;
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
}
.btn--lg {
    padding: 15px 30px;
    font-size: var(--fs-md);
    border-radius: var(--radius);
}
.btn-block,
.btn--block {
    width: 100%;
}

/* --- Icon-only round button (normalizes card .btn-round look) ------------- */
.btn--icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--radius-pill);
}

/* --- Empty state (global fallback; listings.css may refine on its pages) -- */
.listings-empty-state {
    grid-column: 1 / -1;
    padding: var(--space-12) var(--space-6);
    text-align: center;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.listings-empty-state__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-100);
    color: var(--primary);
    font-size: var(--fs-xl);
}
.listings-empty-state__title {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-xl);
    color: var(--secondary);
}
.listings-empty-state__text {
    margin: 0 auto var(--space-5);
    max-width: 420px;
    color: var(--gray-700);
    line-height: var(--lh-normal);
}
.listings-empty-state__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    font-size: 12px;
    font-weight: 700;
}
.lang-switcher__link {
    color: #64748b;
    text-decoration: none;
}
.lang-switcher__link.is-active,
.lang-switcher__link:hover {
    color: var(--primary, #f7971c);
}
.lang-switcher__sep {
    color: #cbd5e1;
}