/* ==========================================
   BUTTON SYSTEM
========================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border:none;

    border-radius:var(--radius-pill);

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

    text-decoration:none;

    white-space:nowrap;

    position:relative;

    overflow:hidden;
}
.btn{
    padding:12px 22px;
    border-radius:999px;
    font-weight:600;
    transition:.3s;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.btn-primary{
    background:var(--primary);
    color:#fff;
    box-shadow:var(--shadow-sm);
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
}

.btn-outline{
    border:1px solid var(--border);
    background:#fff;
}

.btn-outline:hover{
    background:var(--primary);
    color:#fff;
}
/* Shine Effect */

.btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:translateX(-120%);

    transition:.7s;
}

.btn:hover::before{

    transform:translateX(120%);
}

.btn i{

    transition:var(--transition);
}

.btn:hover i{

    transform:translateX(5px);
}

/* ==========================================
   PRIMARY
========================================== */

.btn-primary{

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary),
        var(--accent)
    );

    color:var(--white);

    box-shadow:var(--shadow-md);
}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-lg);
}

/* ==========================================
   OUTLINE
========================================== */

.btn-outline{

    background:var(--white);

    color:var(--primary);

    border:2px solid var(--primary);
}

.btn-outline:hover{

    background:var(--primary);

    color:var(--white);

    transform:translateY(-3px);
}

/* ==========================================
   LIGHT
========================================== */

.btn-light{

    background:#F5F0FF;

    color:var(--primary);
}

.btn-light:hover{

    background:var(--primary);

    color:white;
}

/* ==========================================
   ICON BUTTON
========================================== */

.btn-icon{

    width:52px;

    height:52px;

    padding:0;

    border-radius:50%;

    background:white;

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

    color:var(--primary);

    box-shadow:var(--shadow-sm);
}

.btn-icon:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);
}
/* buttons micro interaction */
.btn:active{
    transform:scale(.97);
}

/* images */
img{
    transition:.4s ease;
}

img:hover{
    transform:scale(1.02);
}
.btn{
    position:relative;
    overflow:hidden;
    transition:all .35s ease;
    transform:translateY(0);
}

/* hover lift */
.btn:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(0,0,0,.08);
}

/* click effect */
.btn:active{
    transform:scale(.97);
}

/* glow effect */
.btn::after{
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );
    transition:.5s;
}

.btn:hover::after{
    left:100%;
}
.btn-primary{
    background:linear-gradient(90deg,#7C3AED,#EC4899);
    color:#fff;
    border:none;
}

.btn-primary:hover{
    filter:brightness(1.05);
}