/* ═══════════════════════════════════════════════════════════════
   WOOKIT CORE — Buttons
   All button variants. Theme-friendly: no !important so the
   site's own styles can override when needed.
   ═══════════════════════════════════════════════════════════════ */


/* ── wookit-btn-primary ──────────────────────────────────────── */
.wookit-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
}
.wookit-btn-primary:hover {
    text-decoration: none;
}
.wookit-btn-primary:disabled,
.wookit-btn-primary[disabled] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}
.wookit-btn-primary.wookit-btn-block {
    display: flex;
    width: 100%;
}
.wookit-btn-primary.wookit-btn-loading-state {
    cursor: wait;
    opacity: .85;
}


/* ── wookit-btn-secondary ────────────────────────────────────── */
.wookit-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}
.wookit-btn-secondary:hover {
    text-decoration: none;
}
.wookit-btn-secondary:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }


/* ── wookit-btn-ghost ────────────────────────────────────────── */
.wookit-btn-ghost,
.wookit-btn-ghost:visited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: transparent;
    color: var(--wookit-body);
    border: 1px solid transparent;
    border-radius: var(--wookit-radius-sm);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--wookit-font);
    cursor: pointer;
    text-decoration: none;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: none;
    transition: background .15s, color .15s, border-color .15s;
    min-height: unset;
    line-height: 1.4;
    white-space: nowrap;
}
.wookit-btn-ghost:hover {
    background: var(--wookit-accent-soft);
    color: var(--wookit-accent);
    border-color: var(--wookit-accent-soft);
    text-decoration: none;
}
.wookit-btn-ghost--active,
.wookit-btn-ghost--active:hover {
    background: var(--wookit-accent);
    color: var(--wookit-accent-fg, #fff);
    border-color: var(--wookit-accent);
}


/* ── wookit-btn-icon ─────────────────────────────────────────── */
.wookit-btn-icon,
.wookit-btn-icon:visited,
.wookit-btn-icon:hover,
.wookit-btn-icon:focus,
.wookit-btn-icon:active,
.wookit-btn-icon:focus-visible {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    background: transparent;
    background-color: transparent;
    color: var(--wookit-muted);
    border: none;
    border-radius: var(--wookit-radius-sm);
    cursor: pointer;
    line-height: 0;
    transition: background .15s, color .15s;
    box-shadow: none;
    outline: none;
    min-height: unset;
    min-width: unset;
    flex-shrink: 0;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
}
.wookit-btn-icon:hover  { background: var(--wookit-surface-alt); color: var(--wookit-body); }
.wookit-btn-icon--danger:hover  { background: var(--wookit-danger-soft); color: var(--wookit-danger-text); }
.wookit-btn-icon--qty           { border-radius: 0; color: var(--wookit-body); }
.wookit-btn-icon--qty:hover     { background: var(--wookit-surface-alt); color: var(--wookit-text); }
.wookit-btn-icon--lg            { width: 40px; height: 40px; }


/* ── wookit-btn-link ─────────────────────────────────────────── */
.wookit-btn-link,
.wookit-btn-link:visited {
    display: inline;
    padding: 0;
    margin: 0;
    background: transparent;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: var(--wookit-muted);
    font-size: inherit;
    font-weight: 500;
    font-family: var(--wookit-font);
    cursor: pointer;
    box-shadow: none;
    min-height: unset;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    transition: color .15s;
    line-height: inherit;
}
.wookit-btn-link:hover { color: var(--wookit-text); text-decoration: underline; }
.wookit-btn-link--accent,
.wookit-btn-link--accent:visited { color: var(--wookit-accent); font-weight: 600; }
.wookit-btn-link--accent:hover   { opacity: .75; color: var(--wookit-accent); }


/* ── wookit-btn-logout ───────────────────────────────────────── */
.wookit-btn-logout,
.wookit-btn-logout:visited,
.wookit-btn-logout:hover,
.wookit-btn-logout:focus,
.wookit-btn-logout:active {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    margin: 0;
    background: transparent;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: var(--wookit-logout);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--wookit-font);
    cursor: pointer;
    box-shadow: none;
    min-height: unset;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    transition: color .15s;
}
.wookit-btn-logout:hover { color: var(--wookit-logout-hover); }


/* ── Spinner inside buttons ──────────────────────────────────── */
.wookit-btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wookit-spin .6s linear infinite;
    flex-shrink: 0;
}