/* ==============================================================
   Vistaarly · base/buttons.css
   ONE canonical button system reused everywhere. Uses new .btn2-*
   prefix so the older .btn / .v-btn declarations in style.css keep
   working unchanged; new pages use these where they want the new
   consistent look. Compat aliases at the bottom.
   ============================================================== */

.btn2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--sans, 'IBM Plex Sans', sans-serif);
    font-weight: 500;
    font-size: 0.92rem;
    line-height: 1;
    padding: 12px 20px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), box-shadow var(--t-fast),
                transform var(--t-fast);
    -webkit-tap-highlight-color: transparent;
    min-height: 44px; /* touch target */
    white-space: nowrap;
}

.btn2:hover { transform: translateY(-1px); }
.btn2:active { transform: translateY(0); }
.btn2:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }
.btn2:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* variants */
.btn2-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.btn2-primary:hover { background: var(--color-primary-soft); color: #fff; }

.btn2-accent, .btn2-marigold {
    background: var(--color-accent);
    color: #1a1207;
    border-color: var(--color-accent);
    font-weight: 600;
}
.btn2-accent:hover, .btn2-marigold:hover { background: var(--color-accent-hover); color: #1a1207; }

.btn2-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-border);
}
.btn2-outline:hover { background: var(--color-bg-subtle); border-color: var(--color-primary); }

.btn2-ghost {
    background: transparent;
    color: var(--color-primary);
}
.btn2-ghost:hover { background: var(--color-bg-alt); }

.btn2-danger {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}
.btn2-danger:hover { background: #b91c1c; }

/* sizes */
.btn2-sm { padding: 8px 14px; font-size: 0.82rem; min-height: 36px; }
.btn2-lg { padding: 16px 26px; font-size: 1rem; min-height: 52px; }

/* modifiers */
.btn2-block { width: 100%; }
.btn2-pill  { border-radius: var(--r-full); }

/* ==============================================================
   Compat aliases
   Several older pages (admin/*, user/my-listings.php, user/profile.php,
   user/my-wishlist.php, booking/booking-status.php, chat pages, etc.)
   were written against the legacy `.btn` / `.v-btn` classes from
   style.css using modifiers — .btn-sm, .btn-danger, .btn-marigold,
   .v-btn-sm — that were never actually defined anywhere. Buttons using
   them silently fell back to unstyled browser defaults. These aliases
   give them the same look as the equivalent .btn2-* variant above,
   without touching every page.
   ============================================================== */
.btn.btn-sm, a.btn.btn-sm { padding: 6px 12px; font-size: 12.5px; min-height: 32px; border-radius: var(--radius-sm, 8px); }
.btn.btn-danger, a.btn.btn-danger { background: var(--danger, #dc2626); color: #fff; border-color: var(--danger, #dc2626); }
.btn.btn-danger:hover, a.btn.btn-danger:hover { background: #b91c1c; color: #fff; }
.btn.btn-marigold, a.btn.btn-marigold { background: var(--accent, #f59e0b); color: var(--ink-950, #0b0f19); border-color: var(--accent, #f59e0b); font-weight: 600; }
.btn.btn-marigold:hover, a.btn.btn-marigold:hover { background: var(--accent-hover, #d97706); color: var(--ink-950, #0b0f19); }

.v-btn-sm { padding: 6px 14px; font-size: 13px; min-height: 32px; }