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

CTM PATH™ Guided Journey v1.0

File
css/foundation/buttons.css

Purpose
Premium Button System

Responsibility
• Primary CTA
• Secondary CTA
• Hover experience
• Premium interaction states
• Responsive behaviour

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


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

.btn{


    position:relative;


    display:inline-flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;



    gap:8px;



    min-width:340px;



    min-height:72px;



    padding:

        20px 48px;



    border-radius:

        var(--radius-button);



    cursor:pointer;



    overflow:hidden;



    user-select:none;



    text-align:center;



    font-family:

        var(--font-ui);



    transition:


        transform .45s var(--ease-premium),

        box-shadow .45s var(--ease-premium),

        background .45s var(--ease-premium),

        border-color .45s var(--ease-premium);



}



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


.btn::before{


    content:"";


    position:absolute;



    top:0;



    left:-120%;



    width:50%;



    height:100%;



    background:


        linear-gradient(

            90deg,

            transparent,

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

            transparent

        );



    transform:

        skewX(-25deg);



    transition:

        left 1s var(--ease-premium);



}



.btn:hover::before{


    left:150%;



}



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


.btn-primary{


    color:

        var(--color-white);



    background:


        linear-gradient(

            180deg,

            #23AF72 0%,

            #1A865B 50%,

            #125D41 100%

        );



    border:

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



    box-shadow:


        var(--shadow-premium),

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



}



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


.btn-primary:hover{


    transform:


        translateY(-5px);



    box-shadow:


        0 35px 80px rgba(0,0,0,.60),


        0 0 45px rgba(24,166,109,.35),


        0 0 30px rgba(217,181,106,.20);



}



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


.btn-primary:active{


    transform:


        translateY(1px);



}



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


.btn-secondary{


    color:

        var(--color-white);



    background:


        rgba(255,255,255,.06);



    border:


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



    backdrop-filter:

        blur(20px);



}



.btn-secondary:hover{


    background:


        rgba(255,255,255,.12);



    transform:


        translateY(-3px);



}



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


.btn-title{


    font-size:

        1.15rem;



    font-weight:

        700;



    letter-spacing:

        .05em;



    line-height:

        1.3;



}



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


.btn-subtitle{


    font-family:

        var(--font-display);



    font-size:

        .85rem;



    font-weight:

        400;



    letter-spacing:

        .10em;



    color:

        rgba(255,255,255,.82);



}



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


.btn-block{


    width:100%;



}



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


.btn:focus-visible{


    outline:none;



    box-shadow:


        0 0 0 4px rgba(217,181,106,.30),


        0 0 40px rgba(217,181,106,.30);



}



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


.btn:disabled,


.btn.disabled{


    opacity:.45;



    cursor:not-allowed;



    pointer-events:none;



}



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


@media(max-width:768px){



    .btn{


        width:100%;



        min-width:100%;



        min-height:64px;



        padding:

            18px 28px;



    }



    .btn-title{


        font-size:

            1.05rem;



    }



}



@media(max-width:480px){



    .btn{


        min-height:

            60px;



        padding:

            16px 22px;



    }



    .btn-title{


        font-size:

            1rem;



    }



}