/**

 * SayWOW Button System

 * Brand Design System v2.0 — SPEC Section 4

 *

 * Base class: .sw-btn

 * Sizes: .sw-btn-lg, .sw-btn-md (default), .sw-btn-sm, .sw-btn-xs, .sw-btn-full

 * Variants: .sw-btn-primary, .sw-btn-secondary, .sw-btn-outline, .sw-btn-ghost,

 *           .sw-btn-success, .sw-btn-gold, .sw-btn-white-outline, .sw-btn-disabled

 *

 * @package SayWOW_Admin_Pro

 * @since 19.7.0

 */



/* ============================================

   BASE BUTTON

   ============================================ */



.sw-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-family: var(--sw-font);

    font-weight: var(--sw-fw-bold);

    text-decoration: none;

    text-align: center;

    white-space: nowrap;

    cursor: pointer;

    border: none;

    outline: none;

    transition: var(--sw-transition);

    -webkit-appearance: none;

    appearance: none;

    box-sizing: border-box;

    line-height: 1;

}



.sw-btn:focus-visible {

    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.3);

    outline: none;

}



/* ============================================

   SIZES — SPEC Section 4.1

   ============================================ */



/* Large */

.sw-btn-lg {

    height: 52px;

    padding: 0 32px;

    min-width: 180px;

    font-size: 1rem;

    font-weight: var(--sw-fw-bold);

    border-radius: var(--sw-radius-lg);

}



/* Medium (default) */

.sw-btn-md,

.sw-btn:not(.sw-btn-lg):not(.sw-btn-sm):not(.sw-btn-xs) {

    height: 44px;

    padding: 0 24px;

    min-width: 140px;

    font-size: 0.875rem;

    font-weight: var(--sw-fw-bold);

    border-radius: var(--sw-radius-md);

}



/* Small */

.sw-btn-sm {

    height: 36px;

    padding: 0 16px;

    min-width: 100px;

    font-size: 0.8rem;

    font-weight: var(--sw-fw-semibold);

    border-radius: 8px;

}



/* Extra Small */

.sw-btn-xs {

    height: 28px;

    padding: 0 12px;

    min-width: 70px;

    font-size: 0.75rem;

    font-weight: var(--sw-fw-semibold);

    border-radius: var(--sw-radius-sm);

}



/* Full Width */

.sw-btn-full {

    width: 100%;

    min-width: unset;

}



/* ============================================

   VARIANTS — SPEC Section 4.2

   ============================================ */



/* Primary — Action Red CTAs */

.sw-btn-primary {

    background-color: var(--sw-red);

    color: var(--sw-white);

    border: none;

}



.sw-btn-primary:hover {

    background-color: var(--sw-red-hover);

    color: var(--sw-white);

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.35);

}



.sw-btn-primary:active {

    background-color: var(--sw-red-active);

    color: var(--sw-white);

    transform: translateY(0);

    box-shadow: none;

}



/* Secondary — SayWOW Blue */

.sw-btn-secondary {

    background-color: var(--sw-blue);

    color: var(--sw-white);

    border: none;

}



.sw-btn-secondary:hover {

    background-color: var(--sw-blue-dark);

    color: var(--sw-white);

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.35);

}



.sw-btn-secondary:active {

    background-color: var(--sw-blue-darkest);

    color: var(--sw-white);

    transform: translateY(0);

    box-shadow: none;

}



/* Outline — Blue border, transparent bg */

.sw-btn-outline {

    background-color: transparent;

    color: var(--sw-blue);

    border: 2px solid var(--sw-blue);

}



.sw-btn-outline:hover {

    background-color: var(--sw-blue);

    color: var(--sw-white);

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.35);

}



.sw-btn-outline:active {

    background-color: var(--sw-blue-dark);

    color: var(--sw-white);

    transform: translateY(0);

    box-shadow: none;

}



/* Ghost — No border, transparent bg */

.sw-btn-ghost {

    background-color: transparent;

    color: var(--sw-blue);

    border: none;

}



.sw-btn-ghost:hover {

    background-color: rgba(0, 82, 204, 0.08);

    color: var(--sw-blue);

}



.sw-btn-ghost:active {

    background-color: rgba(0, 82, 204, 0.15);

    color: var(--sw-blue);

}



/* Success — Green confirm */

.sw-btn-success {

    background-color: var(--sw-green);

    color: var(--sw-white);

    border: none;

}



.sw-btn-success:hover {

    background-color: #218838;

    color: var(--sw-white);

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.35);

}



.sw-btn-success:active {

    background-color: #1E7E34;

    color: var(--sw-white);

    transform: translateY(0);

    box-shadow: none;

}



/* Gold — Claim Prize */

.sw-btn-gold {

    background: linear-gradient(135deg, var(--sw-gold), var(--sw-gold-dark));

    color: var(--sw-grey-900);

    border: none;

}



.sw-btn-gold:hover {

    background: linear-gradient(135deg, #FFE033, var(--sw-gold));

    color: var(--sw-grey-900);

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.35);

}



.sw-btn-gold:active {

    background-color: #E6C200;

    color: var(--sw-grey-900);

    transform: translateY(0);

    box-shadow: none;

}



/* White Outline — On dark/blue backgrounds */

.sw-btn-white-outline {

    background-color: transparent;

    color: var(--sw-white);

    border: 2px solid var(--sw-white);

}



.sw-btn-white-outline:hover {

    background-color: var(--sw-white);

    color: var(--sw-blue);

    transform: translateY(-1px);

}



.sw-btn-white-outline:active {

    background-color: var(--sw-white);

    color: var(--sw-blue-dark);

    transform: translateY(0);

}



/* Disabled — Sold Out */

.sw-btn-disabled,

.sw-btn[disabled],

.sw-btn.disabled {

    background-color: var(--sw-grey-200);

    color: var(--sw-grey-300);

    border: none;

    cursor: not-allowed;

    pointer-events: none;

    transform: none !important;

    box-shadow: none !important;

}



/* ============================================

   BUTTON WITH ICON

   ============================================ */



.sw-btn .sw-btn-icon {

    width: 1em;

    height: 1em;

    flex-shrink: 0;

}



.sw-btn-icon-only {

    min-width: unset;

    padding: 0;

    width: 44px;

}



.sw-btn-icon-only.sw-btn-lg { width: 52px; }

.sw-btn-icon-only.sw-btn-sm { width: 36px; }

.sw-btn-icon-only.sw-btn-xs { width: 28px; }



/* ============================================

   BUTTON GROUP

   ============================================ */



.sw-btn-group {

    display: inline-flex;

    gap: 8px;

    flex-wrap: wrap;

}



.sw-btn-group--stack {

    flex-direction: column;

}



/* ============================================

   MOBILE RESPONSIVE

   ============================================ */



@media (max-width: 768px) {

    .sw-btn-mobile-full {

        width: 100%;

        min-width: unset;

    }



    .sw-btn-group--mobile-stack {

        flex-direction: column;

    }



    .sw-btn-group--mobile-stack .sw-btn {

        width: 100%;

    }

}