/**
 * ==============================================
 * TEMPLATE FACTORY — COMPONENTS: PHASE 1 BUTTONS
 * ==============================================
 * 
 * Complete button system with:
 * - Base button styles
 * - Shape modifiers (pill, circle, sharp, etc)
 * - Size modifiers (xs to xl)
 * - Variants (solid, outline, ghost, soft, etc)
 * - Icon buttons
 * - Button groups
 * - Loading states
 * 
 * Uses tokens from tokens.css:
 * --btn-bg, --btn-fg, --btn-border
 * --btn-hover-bg, --btn-hover-fg
 * --radius-*, --shadow-*
 * 
 * @version 1.0
 * @updated February 2026
 */

/* ============================================================================
   PHASE 1: BUTTONS
   ============================================================================
   
   Structure:
   - Base .btn class
   - Shapes: --sharp, --rounded (default), --pill
   - Sizes: --xs, --sm, --md (default), --lg, --xl
   - Variants: solid (primary), outline (secondary), ghost, soft, danger
   - Hover effects: 18 different animations
   - Icons: --icon-left, --icon-right, --icon-only
   - States: loading, disabled
   - Presets: .btn-primary, .btn-secondary, .btn-ghost, .btn-cta, etc.
   
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. BASE BUTTON
   ---------------------------------------------------------------------------- */

.btn {
    /* Reset */
    appearance: none;
    border: none;
    background: none;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;

    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;

    /* Default size (md) */
    height: 2.5rem;
    padding: 0 var(--space-5);
    font-size: var(--text-base);

    /* Default shape (rounded) */
    border-radius: var(--radius-lg);

    /* Typography */
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;

    /* Transitions */
    transition:
        background-color var(--duration-normal) var(--ease-in-out),
        color var(--duration-normal) var(--ease-in-out),
        border-color var(--duration-normal) var(--ease-in-out),
        box-shadow var(--duration-normal) var(--ease-in-out),
        transform var(--duration-normal) var(--ease-in-out),
        opacity var(--duration-normal) var(--ease-in-out);

    /* Prevent text selection on double-click */
    user-select: none;

    /* For positioned children (loading spinner, effects) */
    position: relative;
    overflow: hidden;

    /* Isolation for blend modes and z-index */
    isolation: isolate;
}

/* Focus state — keyboard only */
.btn:focus {
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid var(--focus-ring, var(--primary));
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   2. SHAPES
   ---------------------------------------------------------------------------- */

.btn--sharp {
    border-radius: 0;
}

.btn--rounded {
    border-radius: var(--radius-lg);
}

.btn--pill {
    border-radius: var(--radius-full);
}

/* ----------------------------------------------------------------------------
   3. SIZES
   ---------------------------------------------------------------------------- */

.btn--xs {
    height: 1.75rem;
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
    gap: 0.4em;
}

.btn--sm {
    height: 2rem;
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
}

.btn--md {
    height: 2.5rem;
    padding: 0 var(--space-5);
    font-size: var(--text-base);
}

.btn--lg {
    height: 3rem;
    padding: 0 1.75rem;
    font-size: var(--text-lg);
}

.btn--xl {
    height: 3.5rem;
    padding: 0 var(--space-8);
    font-size: var(--text-xl);
    gap: 0.6em;
}

/* ----------------------------------------------------------------------------
   4. VARIANTS (using tokens from tokens.css)
   ---------------------------------------------------------------------------- */

/* 4.1 Solid / Primary — filled button */
.btn--solid,
.btn--primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    border: 2px solid var(--btn-primary-border);
}

.btn--solid:hover,
.btn--primary:hover {
    background-color: var(--btn-primary-hover-bg);
    border-color: var(--btn-primary-hover-border);
    color: var(--btn-primary-hover-fg);
}

.btn--solid:active,
.btn--primary:active {
    background-color: var(--btn-primary-active-bg);
    border-color: var(--btn-primary-active-border);
}

/* 4.2 Outline / Secondary — border only */
.btn--outline,
.btn--secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-fg);
    border: 2px solid var(--btn-secondary-border);
}

.btn--outline:hover,
.btn--secondary:hover {
    background-color: var(--btn-secondary-hover-bg);
    border-color: var(--btn-secondary-hover-border);
    color: var(--btn-secondary-hover-fg);
}

.btn--outline:active,
.btn--secondary:active {
    background-color: var(--btn-secondary-active-bg);
    border-color: var(--btn-secondary-active-border);
}

/* 4.3 Ghost — transparent, text only */
.btn--ghost {
    background-color: var(--btn-ghost-bg);
    color: var(--btn-ghost-fg);
    border: 2px solid var(--btn-ghost-border);
}

.btn--ghost:hover {
    background-color: var(--btn-ghost-hover-bg);
    color: var(--btn-ghost-hover-fg);
    border-color: var(--btn-ghost-hover-border);
}

.btn--ghost:active {
    background-color: var(--btn-ghost-active-bg);
    color: var(--btn-ghost-active-fg);
}

/* 4.4 Soft — subtle primary background */
.btn--soft {
    background-color: var(--primary-soft);
    color: var(--on-primary-soft);
    border: 2px solid transparent;
}

.btn--soft:hover {
    background-color: var(--primary);
    color: var(--on-primary);
}

.btn--soft:active {
    background-color: var(--primary-hover);
}

/* 4.5 Danger — destructive actions */
.btn--danger {
    background-color: var(--btn-danger-bg);
    color: var(--btn-danger-fg);
    border: 2px solid var(--btn-danger-border);
}

.btn--danger:hover {
    background-color: var(--btn-danger-hover-bg);
}

.btn--danger:active {
    background-color: var(--btn-danger-active-bg);
}

/* 4.6 Danger Outline */
.btn--danger-outline {
    background-color: transparent;
    color: var(--error);
    border: 2px solid var(--error);
}

.btn--danger-outline:hover {
    background-color: var(--error);
    color: var(--on-error);
}

/* 4.7 On-Primary — white outline, for use on primary-colored backgrounds */
.btn--on-primary {
    background-color: transparent;
    color: var(--on-primary);
    border: 2px solid var(--on-primary);
}

.btn--on-primary:hover {
    background-color: var(--on-primary);
    color: var(--primary);
}

.btn--on-primary:active {
    background-color: var(--on-primary);
    color: var(--primary);
    opacity: 0.9;
}

/* ----------------------------------------------------------------------------
   5. HOVER EFFECTS (18 variations)
   ---------------------------------------------------------------------------- */

/* 
 * Hover effects are additive — apply on top of variant.
 * Example: <button class="btn btn--primary btn--hover-lift">
 * 
 * Only apply effects on devices with hover capability.
 */

@media (hover: hover) {

    /* -------------------------------------------------------------------------
     5.1 SIMPLE EFFECTS (5)
     ------------------------------------------------------------------------ */

    /* Darken — default, already handled by variant :hover */
    .btn--hover-darken:hover {
        filter: brightness(0.95);
    }

    /* Lighten */
    .btn--hover-lighten:hover {
        filter: brightness(1.1);
    }

    /* Lift — rises up with enhanced shadow */
    .btn--hover-lift {
        transition:
            background-color var(--duration-normal) var(--ease-in-out),
            color var(--duration-normal) var(--ease-in-out),
            border-color var(--duration-normal) var(--ease-in-out),
            box-shadow 0.25s var(--ease-in-out),
            transform 0.25s var(--ease-in-out);
    }

    .btn--hover-lift:hover {
        transform: translateY(-2px);
        box-shadow:
            0 4px 8px rgba(0, 0, 0, 0.1),
            0 6px 20px rgba(0, 0, 0, 0.08);
    }

    .btn--hover-lift:active {
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* Press — sinks down */
    .btn--hover-press:hover {
        transform: translateY(1px);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .btn--hover-press:active {
        transform: translateY(2px);
    }

    /* Scale — grows slightly */
    .btn--hover-scale {
        transition:
            background-color var(--duration-normal) var(--ease-in-out),
            color var(--duration-normal) var(--ease-in-out),
            border-color var(--duration-normal) var(--ease-in-out),
            transform var(--duration-normal) var(--ease-in-out);
    }

    .btn--hover-scale:hover {
        transform: scale(1.03);
    }

    .btn--hover-scale:active {
        transform: scale(0.98);
    }

    /* -------------------------------------------------------------------------
     5.2 FILL ANIMATIONS (6)
     Uses ::before pseudo-element for the fill effect
     ------------------------------------------------------------------------ */

    /* Base setup for all fill effects */
    .btn--hover-fill-left,
    .btn--hover-fill-right,
    .btn--hover-fill-up,
    .btn--hover-fill-down,
    .btn--hover-fill-center,
    .btn--hover-fill-corners {
        z-index: 1;
    }

    .btn--hover-fill-left::before,
    .btn--hover-fill-right::before,
    .btn--hover-fill-up::before,
    .btn--hover-fill-down::before,
    .btn--hover-fill-center::before,
    .btn--hover-fill-corners::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        transition: transform var(--duration-normal) var(--ease-in-out);
    }

    /* Fill from Left */
    .btn--hover-fill-left::before {
        background: var(--primary-hover, var(--btn-primary-hover-bg));
        transform: scaleX(0);
        transform-origin: left center;
    }

    .btn--hover-fill-left:hover::before {
        transform: scaleX(1);
    }

    /* Fill from Right */
    .btn--hover-fill-right::before {
        background: var(--primary-hover, var(--btn-primary-hover-bg));
        transform: scaleX(0);
        transform-origin: right center;
    }

    .btn--hover-fill-right:hover::before {
        transform: scaleX(1);
    }

    /* Fill from Bottom Up */
    .btn--hover-fill-up::before {
        background: var(--primary-hover, var(--btn-primary-hover-bg));
        transform: scaleY(0);
        transform-origin: bottom center;
    }

    .btn--hover-fill-up:hover::before {
        transform: scaleY(1);
    }

    /* Fill from Top Down */
    .btn--hover-fill-down::before {
        background: var(--primary-hover, var(--btn-primary-hover-bg));
        transform: scaleY(0);
        transform-origin: top center;
    }

    .btn--hover-fill-down:hover::before {
        transform: scaleY(1);
    }

    /* Fill from Center */
    .btn--hover-fill-center::before {
        background: var(--primary-hover, var(--btn-primary-hover-bg));
        transform: scale(0);
        transform-origin: center center;
        border-radius: inherit;
    }

    .btn--hover-fill-center:hover::before {
        transform: scale(1);
    }

    /* Fill from Corners (diagonal) */
    .btn--hover-fill-corners::before {
        background: var(--primary-hover, var(--btn-primary-hover-bg));
        transform: scale(0);
        transform-origin: top left;
        transition: transform var(--duration-normal) var(--ease-in-out);
    }

    .btn--hover-fill-corners:hover::before {
        transform: scale(1.5);
    }

    /* -------------------------------------------------------------------------
     5.3 LIGHT EFFECTS (4)
     ------------------------------------------------------------------------ */

    /* Glow — expanding colored shadow */
    .btn--hover-glow {
        transition:
            background-color var(--duration-normal) var(--ease-in-out),
            color var(--duration-normal) var(--ease-in-out),
            border-color var(--duration-normal) var(--ease-in-out),
            box-shadow var(--duration-normal) var(--ease-in-out);
    }

    .btn--hover-glow:hover {
        box-shadow:
            0 0 20px rgba(var(--primary-rgb, 13, 148, 136), 0.4),
            0 0 40px rgba(var(--primary-rgb, 13, 148, 136), 0.2);
    }

    /* Shine — diagonal light sweep */
    .btn--hover-shine {
        overflow: hidden;
    }

    .btn--hover-shine::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -100%;
        width: 50%;
        height: 200%;
        background: linear-gradient(90deg,
                transparent,
                rgba(255, 255, 255, 0.3),
                transparent);
        transform: skewX(-25deg);
        transition: left var(--duration-slow) var(--ease-in-out);
    }

    .btn--hover-shine:hover::after {
        left: 150%;
    }

    /* Pulse — subtle pulsing glow */
    @keyframes btn-pulse {

        0%,
        100% {
            box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 13, 148, 136), 0.4);
        }

        50% {
            box-shadow: 0 0 0 8px rgba(var(--primary-rgb, 13, 148, 136), 0);
        }
    }

    .btn--hover-pulse:hover {
        animation: btn-pulse 1.5s ease infinite;
    }

    /* Shimmer — gradient sweep */
    .btn--hover-shimmer {
        overflow: hidden;
    }

    .btn--hover-shimmer::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.2) 50%,
                transparent 100%);
        transition: left var(--duration-slow) var(--ease-in-out);
    }

    .btn--hover-shimmer:hover::after {
        left: 100%;
    }

    /* -------------------------------------------------------------------------
     5.4 BORDER EFFECTS (3)
     ------------------------------------------------------------------------ */

    /* Border Grow — border gets thicker */
    .btn--hover-border-grow {
        border-width: 2px;
        transition:
            background-color var(--duration-normal) var(--ease-in-out),
            color var(--duration-normal) var(--ease-in-out),
            border-width var(--duration-normal) var(--ease-in-out),
            padding var(--duration-normal) var(--ease-in-out);
    }

    .btn--hover-border-grow:hover {
        border-width: 3px;
        /* Compensate for border growth */
        padding-left: calc(var(--space-5) - 1px);
        padding-right: calc(var(--space-5) - 1px);
    }

    /* Underline — line appears below text */
    .btn--hover-underline {
        position: relative;
    }

    .btn--hover-underline::after {
        content: '';
        position: absolute;
        bottom: var(--space-1);
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - var(--space-6));
        height: 2px;
        background: currentColor;
        opacity: 0;
        transition: opacity var(--duration-normal) var(--ease-in-out);
    }

    .btn--hover-underline:hover::after {
        opacity: 1;
    }

    /* Underline Slide — line slides in from center */
    .btn--hover-underline-slide {
        position: relative;
    }

    .btn--hover-underline-slide::after {
        content: '';
        position: absolute;
        bottom: var(--space-1);
        left: 50%;
        width: 0;
        height: 2px;
        background: currentColor;
        transition: width var(--duration-normal) var(--ease-in-out), left var(--duration-normal) var(--ease-in-out);
    }

    .btn--hover-underline-slide:hover::after {
        width: calc(100% - var(--space-6));
        left: var(--space-3);
    }

}

/* End @media (hover: hover) */

/* Touch devices — apply hover styles on active */
@media (hover: none) {
    .btn:active {
        transform: scale(0.98);
    }

    .btn--hover-lift:active {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
}

/* ----------------------------------------------------------------------------
   6. ICONS
   ---------------------------------------------------------------------------- */

/* Icon styling within buttons */
.btn i,
.btn svg,
.btn .btn__icon {
    flex-shrink: 0;
    font-size: 1.1em;
    line-height: 1;
    vertical-align: middle;
}

/* SVG specific */
.btn svg {
    width: 1.1em;
    height: 1.1em;
    fill: currentColor;
}

/* Icon positions */
.btn--icon-left i,
.btn--icon-left svg,
.btn--icon-left .btn__icon {
    margin-right: 0.25em;
    margin-left: -0.25em;
}

.btn--icon-right i,
.btn--icon-right svg,
.btn--icon-right .btn__icon {
    margin-left: 0.25em;
    margin-right: -0.25em;
}

/* Icon only — square button */
.btn--icon-only {
    aspect-ratio: 1;
    padding: 0;
    gap: 0;
}

.btn--icon-only i,
.btn--icon-only svg,
.btn--icon-only .btn__icon {
    margin: 0;
    font-size: 1.2em;
}

/* Icon only sizes */
.btn--icon-only.btn--xs {
    width: 1.75rem;
    height: 1.75rem;
}

.btn--icon-only.btn--sm {
    width: 2rem;
    height: 2rem;
}

.btn--icon-only.btn--md {
    width: 2.5rem;
    height: 2.5rem;
}

.btn--icon-only.btn--lg {
    width: 3rem;
    height: 3rem;
}

.btn--icon-only.btn--xl {
    width: 3.5rem;
    height: 3.5rem;
}

/* Icon only with pill shape = circle */
.btn--icon-only.btn--pill {
    border-radius: 50%;
}

/* ----------------------------------------------------------------------------
   7. STATES
   ---------------------------------------------------------------------------- */

/* 7.1 Disabled */
.btn:disabled,
.btn[disabled],
.btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Disabled with specific styling (overrides opacity method) */
.btn--solid:disabled,
.btn--solid[disabled],
.btn--primary:disabled,
.btn--primary[disabled] {
    background-color: var(--btn-primary-disabled-bg);
    color: var(--btn-primary-disabled-fg);
    border-color: var(--btn-primary-disabled-border);
    opacity: 1;
}

.btn--outline:disabled,
.btn--outline[disabled],
.btn--secondary:disabled,
.btn--secondary[disabled] {
    background-color: var(--btn-secondary-disabled-bg);
    color: var(--btn-secondary-disabled-fg);
    border-color: var(--btn-secondary-disabled-border);
    opacity: 1;
}

.btn--ghost:disabled,
.btn--ghost[disabled] {
    background-color: var(--btn-ghost-disabled-bg);
    color: var(--btn-ghost-disabled-fg);
    border-color: var(--btn-ghost-disabled-border);
    opacity: 1;
}

.btn--danger:disabled,
.btn--danger[disabled] {
    background-color: var(--btn-danger-disabled-bg);
    color: var(--btn-danger-disabled-fg);
    opacity: 1;
}

/* 7.2 Loading */
.btn--loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}

.btn--loading::after {
    content: '';
    position: absolute;
    width: 1.2em;
    height: 1.2em;
    top: 50%;
    left: 50%;
    margin-top: -0.6em;
    margin-left: -0.6em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spinner 0.8s linear infinite;
}

/* Restore color for spinner visibility */
.btn--loading.btn--solid::after,
.btn--loading.btn--primary::after {
    border-color: var(--btn-primary-fg);
    border-top-color: transparent;
}

.btn--loading.btn--outline::after,
.btn--loading.btn--secondary::after {
    border-color: var(--btn-secondary-fg);
    border-top-color: transparent;
}

.btn--loading.btn--ghost::after {
    border-color: var(--btn-ghost-fg);
    border-top-color: transparent;
}

.btn--loading.btn--danger::after {
    border-color: var(--btn-danger-fg);
    border-top-color: transparent;
}

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

/* 7.3 Full width */
.btn--full,
.btn--block {
    width: 100%;
}

/* ----------------------------------------------------------------------------
   8. PRESETS (ready-to-use combinations)
   ---------------------------------------------------------------------------- */

/* Primary CTA — main action */
.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    border: 2px solid var(--btn-primary-border);
    border-radius: var(--radius-lg);
    height: 2.5rem;
    padding: 0 var(--space-5);
    font-size: var(--text-base);
    font-weight: 500;
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover-bg);
    border-color: var(--btn-primary-hover-border);
}

/* Secondary — less prominent */
.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-fg);
    border: 2px solid var(--btn-secondary-border);
    border-radius: var(--radius-lg);
    height: 2.5rem;
    padding: 0 var(--space-5);
    font-size: var(--text-base);
    font-weight: 500;
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-hover-bg);
    border-color: var(--btn-secondary-hover-border);
}

/* Ghost — minimal */
.btn-ghost {
    background-color: transparent;
    color: var(--primary);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    height: 2.5rem;
    padding: 0 var(--space-5);
    font-size: var(--text-base);
    font-weight: 500;
}

.btn-ghost:hover {
    background-color: var(--primary-soft);
}

/* Soft — gentle primary */
.btn-soft {
    background-color: var(--primary-soft);
    color: var(--on-primary-soft);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    height: 2.5rem;
    padding: 0 var(--space-5);
    font-size: var(--text-base);
    font-weight: 500;
}

.btn-soft:hover {
    background-color: var(--primary);
    color: var(--on-primary);
}

/* Danger — destructive */
.btn-danger {
    background-color: var(--error);
    color: var(--on-error);
    border: 2px solid var(--error);
    border-radius: var(--radius-lg);
    height: 2.5rem;
    padding: 0 var(--space-5);
    font-size: var(--text-base);
    font-weight: 500;
}

.btn-danger:hover {
    background-color: var(--btn-danger-hover-bg);
}

/* CTA — hero call-to-action, large and prominent */
.btn-cta {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    border: 2px solid var(--btn-primary-border);
    border-radius: var(--radius-full);
    height: 3.5rem;
    padding: 0 var(--space-8);
    font-size: var(--text-lg);
    font-weight: 600;
    transition:
        background-color var(--duration-fast) var(--ease-in-out),
        color var(--duration-fast) var(--ease-in-out),
        border-color var(--duration-fast) var(--ease-in-out),
        box-shadow var(--duration-normal) var(--ease-in-out),
        transform var(--duration-fast) var(--ease-in-out);
}

.btn-cta:hover {
    background-color: var(--btn-primary-hover-bg);
    border-color: var(--btn-primary-hover-border);
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(var(--primary-rgb, 13, 148, 136), 0.3),
        0 8px 24px rgba(var(--primary-rgb, 13, 148, 136), 0.15);
}

.btn-cta:active {
    transform: translateY(0);
}

/* Link style — looks like a text link */
.btn-link {
    background: transparent;
    color: var(--link, var(--primary));
    border: none;
    padding: 0;
    height: auto;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-link:hover {
    color: var(--link-hover, var(--primary-hover));
}

/* ----------------------------------------------------------------------------
   9. BUTTON GROUPS
   ---------------------------------------------------------------------------- */

.btn-group {
    display: inline-flex;
    flex-wrap: wrap;
}

.btn-group>.btn {
    border-radius: 0;
}

.btn-group>.btn:first-child {
    border-top-left-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
}

.btn-group>.btn:last-child {
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

/* Remove double borders */
.btn-group>.btn:not(:first-child) {
    margin-left: -2px;
}

/* Pill group */
.btn-group--pill>.btn:first-child {
    border-top-left-radius: var(--radius-full);
    border-bottom-left-radius: var(--radius-full);
}

.btn-group--pill>.btn:last-child {
    border-top-right-radius: var(--radius-full);
    border-bottom-right-radius: var(--radius-full);
}

/* Vertical group */
.btn-group--vertical {
    flex-direction: column;
}

.btn-group--vertical>.btn {
    border-radius: 0;
    width: 100%;
}

.btn-group--vertical>.btn:first-child {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    border-bottom-left-radius: 0;
}

.btn-group--vertical>.btn:last-child {
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.btn-group--vertical>.btn:not(:first-child) {
    margin-left: 0;
    margin-top: -2px;
}

/* ----------------------------------------------------------------------------
   10. ACCESSIBILITY & MOTION
   ---------------------------------------------------------------------------- */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }

    .btn::before,
    .btn::after {
        transition: none;
        animation: none;
    }

    .btn--hover-pulse:hover {
        animation: none;
    }

    .btn--loading::after {
        animation: none;
        /* Show static indicator instead */
        border: 2px solid currentColor;
        opacity: 0.5;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .btn {
        border-width: 2px;
    }

    .btn--ghost {
        border: 2px solid currentColor;
    }
}

/* Minimum touch target size on mobile */
@media (max-width: 640px) {
    .btn {
        min-height: 2.75rem;
    }

    .btn--xs {
        min-height: 2.25rem;
    }
}

/* ----------------------------------------------------------------------------
   11. SPECIAL BUTTONS
   ---------------------------------------------------------------------------- */

/* Floating Action Button (FAB) */
.btn-fab {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--on-primary);
    border: none;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.1);
    z-index: var(--z-fixed);
    padding: 0;
    font-size: 1.5rem;
}

.btn-fab:hover {
    background-color: var(--primary-hover);
    transform: scale(1.05);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.2),
        0 12px 24px rgba(0, 0, 0, 0.15);
}

.btn-fab:active {
    transform: scale(0.95);
}

/* Small FAB */
.btn-fab--sm {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--text-lg);
}

/* Extended FAB (with text) */
.btn-fab--extended {
    width: auto;
    border-radius: var(--radius-full);
    padding: 0 var(--space-6);
    gap: var(--space-2);
}

/* Close button (X) */
.btn-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--text-muted);
    border: none;
    font-size: var(--text-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-close:hover {
    background-color: var(--bg-surface-alt);
    color: var(--text-primary);
}

/* Icon button — transparent square */
.btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: var(--radius-lg);
    background-color: transparent;
    color: var(--text-secondary);
    border: none;
    font-size: var(--text-xl);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background-color: var(--bg-surface-alt);
    color: var(--text-primary);
}

.btn-icon--sm {
    width: 2rem;
    height: 2rem;
    font-size: var(--text-base);
}

.btn-icon--lg {
    width: 3rem;
    height: 3rem;
    font-size: var(--text-2xl);
}

/* Social buttons — specific brand colors */
.btn-social {
    border: none;
    border-radius: var(--radius-lg);
    height: 2.5rem;
    padding: 0 var(--space-5);
    font-size: var(--text-sm);
    font-weight: 500;
    gap: var(--space-2);
}

.btn-social--whatsapp {
    background-color: #25D366;
    color: #fff;
}

.btn-social--whatsapp:hover {
    background-color: #20bd5a;
}

.btn-social--facebook {
    background-color: #1877F2;
    color: #fff;
}

.btn-social--facebook:hover {
    background-color: #1565d8;
}

.btn-social--google {
    background-color: #fff;
    color: #757575;
    border: 1px solid var(--border);
}

.btn-social--google:hover {
    background-color: var(--bg-surface-alt);
}

.btn-social--instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
}

.btn-social--instagram:hover {
    opacity: 0.9;
}

/* End of Phase 1: Buttons */