/**
 * A.M TRADERS - Reusable Button Component Styles
 * Strict 3-Color Palette: White (#FFFFFF) | Royal Blue (#3858e9) | Deep Charcoal (#151516)
 * Features:
 *  - 100% Stationary Stability (Zero translateY, zero scale, zero layout shift)
 *  - Full Anti-Jitter Protection (pointer-events: none on all children)
 *  - Smooth Diagonal Sweep (In and Out transition with customizable --am-btn-speed)
 *  - Dead-Center Arrow Rotation: Right (→) on normal, Top-Right (↗) on hover
 */

:root {
    --am-btn-speed: 1.5s;
    --am-blue: #3858e9;
    --am-blue-dark: #2643cb;
    --am-dark: #151516;
    --am-white: #ffffff;
    --am-font-body: 'Raleway', sans-serif;
}

/* =========================================================
   BASE BUTTON COMPONENT (.am-btn)
   ========================================================= */
.am-btn {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    height: 52px !important;
    padding: 6px 8px 6px 26px !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    font-family: var(--am-font-body) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    outline: none !important;
    border: none;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    /* Absolute stability: No jump, no scale */
    transform: none !important;
    transition: border-color var(--am-btn-speed, 1.5s) ease;
    isolation: isolate;
    pointer-events: auto;
}

/* 
 * ZERO JITTER GUARANTEE:
 * Prevents hover event bubbling/flicker from child elements
 */
.am-btn * {
    pointer-events: none !important;
}

/* Button Text */
.am-btn .am-btn-text {
    position: relative;
    z-index: 2;
    transition: color var(--am-btn-speed, 1.5s) ease;
}

/* Right-Side Circular Arrow Badge */
.am-btn .am-btn-circle {
    position: relative;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--am-btn-speed, 1.5s) ease, color var(--am-btn-speed, 1.5s) ease;
}

/* 
 * Static Upper-Sided Diagonal Arrow (↗)
 * Zero rotation animation, 100% stationary stability, zero wobble/shake
 */
.am-btn .am-btn-arrow {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    pointer-events: none !important;
    transform: none !important;
    transition: color var(--am-btn-speed, 1.5s) ease;
}

/* 
 * Diagonal Sweep Layer:
 * Smoothly slides in from left to right on hover,
 * and smoothly slides back on leave with no glitching
 */
.am-btn .am-btn-sweep {
    position: absolute;
    top: -25%;
    left: -35%;
    width: 170%;
    height: 150%;
    z-index: 1;
    transform: translateX(-115%) skewX(-25deg);
    transition: transform var(--am-btn-speed, 1.5s) cubic-bezier(0.25, 1, 0.35, 1);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 0;
}

.am-btn:hover .am-btn-sweep {
    transform: translateX(0%) skewX(-25deg);
}

/* =========================================================
   VARIANT 1: BLUE BUTTON (.am-btn-blue)
   ========================================================= */
.am-btn-blue {
    background: linear-gradient(135deg, #3858e9 0%, #2643cb 100%) !important;
    border: 2px solid var(--am-blue) !important;
}

.am-btn-blue .am-btn-text {
    color: var(--am-white) !important;
}

.am-btn-blue .am-btn-circle {
    background-color: var(--am-white) !important;
    color: var(--am-blue) !important;
}

.am-btn-blue .am-btn-sweep {
    background: var(--am-white) !important;
}

.am-btn-blue:hover {
    border-color: var(--am-blue) !important;
}

.am-btn-blue:hover .am-btn-text {
    color: var(--am-blue) !important;
}

.am-btn-blue:hover .am-btn-circle {
    background-color: var(--am-blue) !important;
    color: var(--am-white) !important;
}

/* =========================================================
   VARIANT 2: WHITE BUTTON (.am-btn-white)
   ========================================================= */
.am-btn-white {
    background: var(--am-white);
    border: 2px solid var(--am-white);
}

.am-btn-white .am-btn-text {
    color: var(--am-dark);
}

.am-btn-white .am-btn-circle {
    background-color: var(--am-dark);
    color: var(--am-white);
}

.am-btn-white .am-btn-sweep {
    background: linear-gradient(135deg, #3858e9 0%, #2643cb 100%);
}

.am-btn-white:hover {
    border-color: var(--am-blue);
}

.am-btn-white:hover .am-btn-text {
    color: var(--am-white);
}

.am-btn-white:hover .am-btn-circle {
    background-color: var(--am-white);
    color: var(--am-blue);
}

/* =========================================================
   VARIANT 3: DARK BUTTON (.am-btn-dark)
   ========================================================= */
.am-btn-dark {
    background: var(--am-dark);
    border: 2px solid var(--am-dark);
}

.am-btn-dark .am-btn-text {
    color: var(--am-white);
}

.am-btn-dark .am-btn-circle {
    background-color: var(--am-white);
    color: var(--am-dark);
}

.am-btn-dark .am-btn-sweep {
    background: linear-gradient(135deg, #3858e9 0%, #2643cb 100%);
}

.am-btn-dark:hover {
    border-color: var(--am-blue);
}

.am-btn-dark:hover .am-btn-text {
    color: var(--am-white);
}

.am-btn-dark:hover .am-btn-circle {
    background-color: var(--am-white);
    color: var(--am-blue);
}