/*
 * GOONDEX — BUTTONS
 * Modern neon-subtle buttons using Flamingo Pink brand theme.
 * Compatible with GX_Button + theme variables.
 */

/* ================================
 *   BASE BUTTON STYLE
 *   ================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.85rem 1.8rem;
    border-radius: var(--radius);

    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;

    color: var(--color-text-primary);
    background: var(--color-bg-elevated);

    border: 1px solid var(--color-border-soft);

    transition: background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition-fast);
}

/* Hover glow (SUBTLE, medium intensity) */
.btn:hover {
    background: var(--color-bg-card);
    border-color: var(--color-brand);
    box-shadow: var(--shadow-glow-pink-soft);
    transform: translateY(-2px);
}

/* Active press */
.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Disabled */
.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}


/* ================================
 *   PRIMARY BUTTON
 *   ================================ */
.btn-primary,
.btn.brand,
.btn.pink {
    background: linear-gradient(
        135deg,
        var(--color-brand) 0%,
                                var(--color-brand-hover) 90%
    );
    border: none;
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

.btn-primary:hover,
.btn.brand:hover,
.btn.pink:hover {
    box-shadow: var(--shadow-glow-pink);
    transform: translateY(-2px);
}


/* ================================
 *   SECONDARY BUTTON
 *   ================================ */
.btn-secondary {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-primary);
}

.btn-secondary:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
    box-shadow: var(--shadow-glow-pink-soft);
}


/* ================================
 *   SMALL BUTTONS (STAT CARDS)
 *   ================================ */
.btn-small {
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    border-radius: calc(var(--radius) - 4px);
}

.btn-small:hover {
    transform: translateY(-1px);
}


/* ================================
 *   FULL-WIDTH BUTTONS
 *   ================================ */
.btn-block {
    display: flex;
    width: 100%;
}


/* ================================
 *   GHOST BUTTON
 *   (transparent, subtle neon edges)
 *   ================================ */
.btn-ghost {
    background: transparent;
    border: 1px solid var(--color-border-soft);
    color: var(--color-text-secondary);
}

.btn-ghost:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
    box-shadow: var(--shadow-glow-pink-soft);
}


/* ================================
 *   DANGER BUTTON (warning orange)
 *   ================================ */
.btn-danger {
    background: var(--color-warning);
    color: #000;
    border: none;
}

.btn-danger:hover {
    background: #ffc7a8;
}


/* ================================
 *   BUTTON HOVER EFFECT (GX-style)
 *   ================================ */
.btn .hoverEffect,
.btn-secondary .hoverEffect,
.btn-small .hoverEffect {
    position: relative;
    pointer-events: none;
}

.btn .hoverEffect div,
.btn-secondary .hoverEffect div,
.btn-small .hoverEffect div {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(circle,
                                var(--color-brand-glow) 0%,
                                transparent 80%
    );
    transition: opacity 0.35s ease;
}

.btn:hover .hoverEffect div,
.btn-secondary:hover .hoverEffect div,
.btn-small:hover .hoverEffect div {
    opacity: 1;
}