/* ==========================================================
   MILX PREMIUM
   buttons.css
========================================================== */

/* ===============================
   Base Button
================================= */

.btn-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .85rem 1.8rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .35s ease;
    user-select: none;
    border: none;
    position: relative;
    overflow: hidden;
}

/* ===============================
   Gold Button
================================= */

.btn-xs-accent {
    background: var(--gold-gradient);
    color: #111;
    box-shadow: var(--shadow-gold);
}

    .btn-xs-accent:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 32px rgba(212,175,55,.35);
        color: #111;
    }

    .btn-xs-accent:active {
        transform: scale(.98);
    }

/* ===============================
   Outline Button
================================= */

.btn-xs-outline {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
}

    .btn-xs-outline:hover {
        background: var(--gold);
        color: #111;
        transform: translateY(-3px);
    }

/* ===============================
   Dark Button
================================= */

.btn-xs-dark {
    background: #171717;
    color: #fff;
    border: 1px solid #2E2E2E;
}

    .btn-xs-dark:hover {
        background: #222;
        border-color: var(--gold);
        color: var(--gold-light);
    }

/* ===============================
   Light Button
================================= */

.btn-xs-light {
    background: #fff;
    color: #111;
}

    .btn-xs-light:hover {
        background: #f3f3f3;
    }

/* ===============================
   Icon Button
================================= */

.btn-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #191919;
    border: 1px solid rgba(212,175,55,.18);
    color: var(--gold);
    transition: .35s;
}

    .btn-icon:hover {
        background: var(--gold);
        color: #111;
        transform: rotate(10deg);
    }

/* ===============================
   Small Button
================================= */

.btn-xs-sm {
    padding: .55rem 1rem;
    font-size: .82rem;
}

/* ===============================
   Large Button
================================= */

.btn-xs-lg {
    padding: 1rem 2.4rem;
    font-size: 1.05rem;
}

/* ===============================
   Ripple Effect
================================= */

.btn-xs::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    transition: .6s;
}

.btn-xs:hover::before {
    width: 320px;
    height: 320px;
}

/* ===============================
   Disabled
================================= */

.btn-xs:disabled,
.btn-xs.disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===============================
   Full Width
================================= */

.btn-block {
    width: 100%;
}

/* ===============================
   Floating Action Button
================================= */

.btn-fab {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--gold-gradient);
    color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-gold);
    transition: .35s;
}

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

/* ===============================
   Button Group
================================= */

.btn-group-xs {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ===============================
   Responsive
================================= */

@media(max-width:768px) {

    .btn-xs {
        width: 100%;
    }

    .btn-group-xs {
        flex-direction: column;
    }
}