/* ==========================================================
   HERITAGE COLLECTION™
   BUTTONS
========================================================== */

/* ==========================================================
   BUTTON BASE
========================================================== */

.btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:56px;

    padding:0 32px;

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

    font-size:15px;

    font-weight:700;

    letter-spacing:.02em;

    white-space:nowrap;

    overflow:hidden;

    transition:all var(--transition);

    cursor:pointer;

    user-select:none;

}

/* ==========================================================
   SHINE EFFECT
========================================================== */

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:120%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.28),

        transparent

    );

    transition:left .9s ease;

}

.btn:hover::before{

    left:120%;

}

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

.btn-primary{

    color:#111;

    background:linear-gradient(

        180deg,

        var(--color-primary-light),

        var(--color-primary)

    );

    box-shadow:

        0 12px 28px rgba(212,175,55,.28);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

        0 20px 40px rgba(212,175,55,.40);

}

.btn-primary:active{

    transform:translateY(-1px);

}

/* ==========================================================
   SECONDARY
========================================================== */

.btn-secondary{

    color:var(--color-white);

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(14px);

}

.btn-secondary:hover{

    background:rgba(255,255,255,.07);

    border-color:rgba(212,175,55,.25);

    transform:translateY(-4px);

}

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

.btn-outline{

    color:var(--color-primary);

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

    background:transparent;

}

.btn-outline:hover{

    background:rgba(212,175,55,.08);

}

/* ==========================================================
   GHOST
========================================================== */

.btn-ghost{

    color:var(--color-white);

    background:transparent;

}

.btn-ghost:hover{

    background:rgba(255,255,255,.05);

}

/* ==========================================================
   SIZES
========================================================== */

.btn-sm{

    min-height:44px;

    padding:0 20px;

    font-size:14px;

}

.btn-lg{

    min-height:64px;

    padding:0 42px;

    font-size:17px;

}

/* ==========================================================
   FULL WIDTH
========================================================== */

.btn-block{

    width:100%;

}

/* ==========================================================
   DISABLED
========================================================== */

.btn:disabled{

    opacity:.45;

    pointer-events:none;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){

    .btn{

        width:100%;

    }

}