/*
 * yeshi-buttons.css — global button interaction system (user site copy).
 *
 * One consistent experience for every action button:
 *   • hover  → subtle lift (scale 1.03) + elevation (desktop, fine pointers)
 *   • press  → red background + scale(0.97) pressed feel (200–300ms ease)
 *   • busy   → stays red, spinner rotates INSIDE the button, click-guarded
 *   • done   → original look restored (success/error handled by app code)
 *
 * States are driven by classes set from yeshi-buttons.js:
 *   .yeshi-btn-pressed   — momentary "clicked" feedback (auto-released)
 *   .yeshi-btn-busy      — button is awaiting a real request (spinner shown)
 *
 * Opt a button OUT of the busy/pressed treatment with:
 *   data-btn-fx="off"   (e.g. nav toggles, tabs, chat composer send, filters)
 *
 * Respect prefers-reduced-motion: no lift/press movement, spinner replaced
 * by a static dot ring.
 */

/* ── Design tokens (fall back to the Yeshi palette) ──────────────────────── */
:root {
    --ybtn-busy-bg: #c0392b;
    --ybtn-busy-bg-strong: #a93226;
    --ybtn-busy-border: #922b21;
    --ybtn-press-scale: 0.97;
    --ybtn-hover-scale: 1.03;
    --ybtn-speed: 220ms;
}

/* ── Transitions every participating button gets ───────────────────────────
   !important is deliberate: many buttons carry Tailwind utilities that set
   their own transition-property; ours must win to keep one consistent feel. */
button,
.btn {
    transition: transform var(--ybtn-speed) ease,
        background-color var(--ybtn-speed) ease,
        border-color var(--ybtn-speed) ease,
        box-shadow var(--ybtn-speed) ease !important;
}

/* ── Hover: desktop-only subtle lift + elevation ────────────────────────────
   Never applies while busy/pressed so the red state stays dominant. */
@media (hover: hover) and (pointer: fine) {
    button:not(:disabled):not(.yeshi-btn-busy):not(.yeshi-btn-pressed):hover,
    .btn:not(:disabled):not(.yeshi-btn-busy):not(.yeshi-btn-pressed):hover {
        transform: scale(var(--ybtn-hover-scale));
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
        z-index: 1;
    }
}

/* ── Pressed: red flash + squeezed (set ~350ms on click by yeshi-buttons.js) */
button.yeshi-btn-pressed,
.btn.yeshi-btn-pressed {
    background-color: var(--ybtn-busy-bg) !important;
    background-image: none !important;
    border-color: var(--ybtn-busy-border) !important;
    color: #fff !important;
    transform: scale(var(--ybtn-press-scale));
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ── Busy: stays red while the real request runs ─────────────────────────── */
button.yeshi-btn-busy,
.btn.yeshi-btn-busy {
    background-color: var(--ybtn-busy-bg) !important;
    background-image: none !important;
    border-color: var(--ybtn-busy-border) !important;
    color: #fff !important;
    cursor: wait;
    opacity: 0.92;
    pointer-events: none;   /* belt-and-braces with disabled — no duplicate clicks */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transform: none;
}

/* Non-button elements made busy via the shared API (e.g. file inputs) —
   their spinner renders through ::before because they cannot hold children. */
.yeshi-btn-busy:not(button):not(.btn) {
    background-color: var(--ybtn-busy-bg) !important;
    background-image: none !important;
    color: #fff !important;
    cursor: wait;
    opacity: 0.92;
    pointer-events: none;
}

input.yeshi-btn-busy::before,
.yeshi-btn-busy:not(button):not(.btn)::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    min-width: 14px;
    min-height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: yeshi-btn-spin 0.7s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
    flex: none;
}

/* ── Spinner: rotates inside the button only ──────────────────────────────── */
.yeshi-btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    min-width: 14px;
    min-height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: yeshi-btn-spin 0.7s linear infinite;
    flex: none;
    /* Buttons keep their text — the spinner slots in before the label. */
}

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

/* Legacy class kept working: old markup/JS still uses these names. */
.yeshi-order-loading {
    background-color: var(--ybtn-busy-bg) !important;
    background-image: none !important;
    border-color: var(--ybtn-busy-border) !important;
    color: #fff !important;
    cursor: wait;
    opacity: 0.92;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ── Variants for buttons that manage their own busy markup ─────────────
 * .yeshi-btn-busy-plain — red busy, page provides its own spinner element
 * .yeshi-btn-busy-soft  — red busy + ::before spinner (page swaps text only)
 * button.is-loading     — the auth pages' existing helper class, now styled
 */
.yeshi-btn-busy-plain,
.yeshi-btn-busy-soft,
button.is-loading,
.btn.is-loading,
.publish-btn-publishing {
    background-color: var(--ybtn-busy-bg) !important;
    background-image: none !important;
    border-color: var(--ybtn-busy-border) !important;
    color: #fff !important;
    cursor: wait;
    opacity: 0.92;
    pointer-events: none;
    transform: none;
}

.yeshi-btn-busy-soft::before,
button.is-loading::before,
.btn.is-loading::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    min-width: 14px;
    min-height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: yeshi-btn-spin 0.7s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
    flex: none;
}

/* ── Accessibility ────────────────────────────────────────────────────────── */
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid #745b18;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    button,
    .btn {
        transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    }

    @media (hover: hover) and (pointer: fine) {
        button:not(:disabled):not(.yeshi-btn-busy):not(.yeshi-btn-pressed):hover,
        .btn:not(:disabled):not(.yeshi-btn-busy):not(.yeshi-btn-pressed):hover {
            transform: none;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
        }
    }

    button.yeshi-btn-pressed,
    .btn.yeshi-btn-pressed,
    button.yeshi-btn-busy,
    .btn.yeshi-btn-busy {
        transform: none;
        box-shadow: none;
    }

    .yeshi-btn-spinner {
        animation-duration: 1.6s; /* slow, calm rotation instead of none */
        animation-timing-function: steps(8);
    }
}

/* Tiny screens: never let a busy button overflow its row. */
@media (max-width: 420px) {
    button.yeshi-btn-busy,
    .btn.yeshi-btn-busy {
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}