/*======================================================================

CTM PATH™ Guided Journey v6.0

Purpose
Premium Button System

Responsibility
• Primary Buttons
• Secondary Buttons
• Outline Buttons
• Navigation Buttons
• Icon Buttons
• Hover Effects
• Active States
• Disabled States
• Responsive Behaviour

======================================================================*/


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

.btn{

    position:relative;

    display:inline-flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

    min-width:360px;

    min-height:68px;

    padding:22px 54px;

    border:1px solid transparent;

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

    cursor:pointer;

    user-select:none;

    text-decoration:none;

    overflow:hidden;

    white-space:nowrap;

    font-family:var(--font-ui);

    transition:

        transform var(--speed-normal) var(--ease-premium),

        box-shadow var(--speed-normal) var(--ease-premium),

        background var(--speed-normal) var(--ease-premium),

        border-color var(--speed-normal) var(--ease-premium),

        color var(--speed-normal) var(--ease-premium),

        opacity var(--speed-normal) var(--ease-premium);

}


/*==================================================
Button Shine
==================================================*/

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:55%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.30),

            transparent

        );

    transform:skewX(-22deg);

    transition:left 1.20s var(--ease-premium);

}


/*==================================================
Hover Shine
==================================================*/

.btn:hover::before{

    left:150%;

}


/*==================================================
Primary Button
==================================================*/

.btn-primary{

    color:var(--color-white);

    background:

        linear-gradient(

            180deg,

            #23AF72 0%,

            #1A865B 46%,

            #125D41 100%

        );

    border:

        1px solid rgba(217,181,106,.46);

    box-shadow:

        var(--shadow-button),

        inset 0 1px 0 rgba(255,255,255,.10),

        0 0 0 1px rgba(255,255,255,.04);

}

/*==================================================
Primary Hover
==================================================*/

.btn-primary:hover{

    transform:

        translateY(-4px)

        scale(1.02);

    background:

        linear-gradient(

            180deg,

            #2AC17C 0%,

            #209669 46%,

            #166A49 100%

        );

    border:

        1px solid rgba(217,181,106,.62);

    box-shadow:

        0 28px 64px rgba(0,0,0,.56),

        0 0 42px rgba(217,181,106,.18),

        0 0 36px rgba(24,166,109,.20),

        inset 0 1px 0 rgba(255,255,255,.12);

}


/*==================================================
Primary Active
==================================================*/

.btn-primary:active{

    transform:

        translateY(1px)

        scale(.985);

    box-shadow:

        0 12px 28px rgba(0,0,0,.40);

}


/*==================================================
Secondary Button
==================================================*/

.btn-secondary{

    color:var(--text-primary);

    background:

        rgba(255,255,255,.045);

    border:

        1px solid rgba(217,181,106,.28);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:

        var(--shadow-sm),

        inset 0 1px 0 rgba(255,255,255,.05);

}


.btn-secondary:hover{

    transform:

        translateY(-2px);

    background:

        rgba(255,255,255,.075);

    border-color:

        rgba(217,181,106,.46);

}


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

.btn-outline{

    color:var(--text-primary);

    background:transparent;

    border:

        1px solid rgba(217,181,106,.42);

}


.btn-outline:hover{

    transform:

        translateY(-2px);

    background:

        rgba(217,181,106,.08);

    border-color:

        rgba(217,181,106,.60);

}


/*==================================================
Button Title
==================================================*/

.btn-title{

    display:block;

    font-family:var(--font-ui);

    font-size:1.24rem;

    font-weight:600;

    letter-spacing:.06em;

    line-height:1.15;

    color:var(--color-white);

}


/*==================================================
Button Subtitle
==================================================*/

.btn-subtitle{

    display:block;

    font-size:.90rem;

    font-weight:400;

    line-height:1.4;

    letter-spacing:.05em;

    color:rgba(255,255,255,.84);

}

/*==================================================
Navigation Button
==================================================*/

.btn-nav{

    min-width:200px;

    min-height:60px;

    padding:18px 34px;

}


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

.btn-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:60px;

    height:60px;

    border-radius:50%;

    background:

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

    border:

        1px solid rgba(217,181,106,.30);

    transition:

        transform var(--speed-normal) var(--ease-premium),

        background var(--speed-normal) var(--ease-premium),

        border-color var(--speed-normal) var(--ease-premium),

        box-shadow var(--speed-normal) var(--ease-premium);

}


.btn-icon:hover{

    transform:

        translateY(-2px);

    background:

        rgba(255,255,255,.08);

    border-color:

        rgba(217,181,106,.48);

    box-shadow:

        var(--shadow-sm),

        var(--shadow-gold);

}


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

.btn:disabled,

.btn.disabled{

    opacity:var(--opacity-disabled);

    cursor:not-allowed;

    pointer-events:none;

    transform:none;

    box-shadow:none;

}


/*==================================================
Focus
==================================================*/

.btn:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 3px rgba(217,181,106,.28),

        0 0 36px rgba(217,181,106,.18);

}


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

.btn-block{

    width:100%;

}


/*==================================================
Spacing Utility
==================================================*/

.mt-48{

    margin-top:48px;

}

/*==================================================
Tablet
==================================================*/

@media (max-width:768px){

    .btn{

        width:100%;

        min-width:100%;

        min-height:62px;

        padding:18px 30px;

        gap:8px;

    }

    .btn-title{

        font-size:1.10rem;

    }

    .btn-subtitle{

        font-size:.82rem;

    }

}


/*==================================================
Small Mobile
==================================================*/

@media (max-width:480px){

    .btn{

        min-height:58px;

        padding:16px 24px;

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

    }

    .btn-title{

        font-size:1rem;

        letter-spacing:.05em;

    }

    .btn-subtitle{

        font-size:.76rem;

        letter-spacing:.04em;

    }

}