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

    CTM PATH™
    FROM SURVIVAL TO LIVING™

    FILE
    app.css

    PURPOSE

    Global Application Components

    RESPONSIBILITIES

    • Application Wrapper
    • Header
    • Logo
    • Buttons
    • Cards
    • Progress
    • Loading State
    • Animations

    NOTE

    NO PAGE-SPECIFIC STYLES

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


/*=============================================================================
    APPLICATION
=============================================================================*/

.app{

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

}


/*=============================================================================
    PAGE
=============================================================================*/

.page{

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

}


/*=============================================================================
    HEADER
=============================================================================*/

.app-header{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:

        var(--space-5)

        var(--page-padding);

}


.app-logo{

    width:180px;

    height:auto;

}


/*=============================================================================
    PAGE CONTENT
=============================================================================*/

.page-content{

    flex:1;

    width:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


/*=============================================================================
    CARD
=============================================================================*/

.card{

    background:

        var(--background-card);

    border:

        1px solid

        var(--border-color);

    border-radius:

        var(--radius-lg);

    padding:

        var(--space-8);

    box-shadow:

        var(--shadow-md);

}


/*=============================================================================
    BUTTONS
=============================================================================*/

.btn{

    min-width:220px;

    min-height:56px;

    padding:

        0

        var(--space-8);

    border-radius:

        var(--radius-round);

    font-size:

        var(--font-md);

    font-weight:

        var(--weight-bold);

    transition:

        var(--transition-normal);

}


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

.btn-primary{

    background:

        var(--color-gold);

    color:

        var(--color-primary);

}


.btn-primary:hover{

    background:

        var(--color-gold-light);

    transform:

        translateY(-2px);

    box-shadow:

        var(--shadow-gold);

}


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

.btn-secondary{

    background:transparent;

    color:

        var(--color-gold);

    border:

        1px solid

        var(--color-gold);

}


.btn-secondary:hover{

    background:

        rgba(216,176,76,.10);

}


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

.btn:disabled{

    opacity:.45;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}


/*=============================================================================
    TITLE
=============================================================================*/

.page-title{

    color:

        var(--color-gold);

    font-size:

        var(--font-4xl);

    font-weight:

        var(--weight-extrabold);

    text-align:center;

}


.page-subtitle{

    color:

        var(--color-text-secondary);

    font-size:

        var(--font-lg);

    text-align:center;

}


/*=============================================================================
    SECTION TITLE
=============================================================================*/

.section-title{

    color:

        var(--color-gold);

    font-size:

        var(--font-2xl);

    font-weight:

        var(--weight-bold);

}


.section-subtitle{

    color:

        var(--color-text-secondary);

}


/*=============================================================================
    PROGRESS
=============================================================================*/

.progress{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:

        var(--space-2);

}


.progress-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:

        rgba(255,255,255,.15);

}


.progress-dot.active{

    background:

        var(--color-gold);

}


/*=============================================================================
    DIVIDER
=============================================================================*/

.divider{

    width:100%;

    height:1px;

    background:

        var(--border-color);

}


/*=============================================================================
    LOADER
=============================================================================*/

.loader{

    width:48px;

    height:48px;

    border-radius:50%;

    border:

        4px solid

        rgba(255,255,255,.15);

    border-top-color:

        var(--color-gold);

    animation:

        spin

        1s linear infinite;

}


/*=============================================================================
    FADE IN
=============================================================================*/

.fade-in{

    animation:

        fadeIn

        .40s ease;

}


/*=============================================================================
    SLIDE UP
=============================================================================*/

.slide-up{

    animation:

        slideUp

        .45s ease;

}


/*=============================================================================
    KEYFRAMES
=============================================================================*/

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


@keyframes slideUp{

    from{

        opacity:0;

        transform:

            translateY(20px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}


@keyframes spin{

    from{

        transform:

            rotate(0deg);

    }

    to{

        transform:

            rotate(360deg);

    }

}


/*=============================================================================
    MOBILE
=============================================================================*/

@media (max-width:768px){

    .app-header{

        padding:

            var(--space-4);

    }

    .app-logo{

        width:140px;

    }

    .card{

        padding:

            var(--space-6);

    }

    .btn{

        width:100%;

        min-width:unset;

    }

    .page-title{

        font-size:

            var(--font-3xl);

    }

}


/*=============================================================================
    END OF FILE
=============================================================================*/