/*
-------------------------------------------------------
Solat Tracker
Version : 1.0.0-alpha3
File    : style.css
-------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Root
|--------------------------------------------------------------------------
*/

:root{

    --bg:#10141d;

    --card:#1b2233;

    --card-hover:#242d42;

    --primary:#7c3aed;

    --primary-hover:#8b5cf6;

    --text:#f5f7fa;

    --muted:#a5adbb;

    --success:#16a34a;

    --warning:#eab308;

    --danger:#dc2626;

    --border:#313c55;

    --radius:16px;

    --transition:.25s ease;

    --shadow:
        0 10px 30px rgba(0,0,0,.30);

}


/*
|--------------------------------------------------------------------------
| Global Reset
|--------------------------------------------------------------------------
*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    background:var(--bg);

    color:var(--text);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    line-height:1.6;

}


a{

    color:inherit;

    text-decoration:none;

}


button{

    font:inherit;

    cursor:pointer;

}


input,
textarea,
select,
button{

    outline:none;

}


img{

    max-width:100%;

    display:block;

}


/*
|--------------------------------------------------------------------------
| Login Header
|--------------------------------------------------------------------------
*/

.login-header{

    text-align:center;

    margin-bottom:30px;

}


.login-logo{

    font-size:60px;

    line-height:1;

    margin-bottom:14px;

}


.login-header h2{

    margin:0;

}


.login-header p{

    color:var(--muted);

    margin-top:8px;

}


/*
|--------------------------------------------------------------------------
| Login Form
|--------------------------------------------------------------------------
*/

.login-form{

    width:100%;

}


.login-form .form-group{

    width:100%;

}


.login-submit{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:52px;

}


/*
|--------------------------------------------------------------------------
| Login Navigation
|--------------------------------------------------------------------------
|
| IMPORTANT:
| Use CSS Grid instead of flex here.
|
| Desktop:
|   2 buttons side-by-side
|
| Mobile:
|   2 buttons stacked
|
|--------------------------------------------------------------------------
*/

.login-links{

    display:grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:10px;

    width:100%;

    margin-top:12px;

}


/*
|--------------------------------------------------------------------------
| Authentication Navigation Buttons
|--------------------------------------------------------------------------
*/

.auth-nav-button{

    width:100%;

    min-width:0;

    min-height:52px;

    padding:
        10px 14px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    border-radius:var(--radius);

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

    background:var(--primary);

    color:#fff;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);

}


.auth-nav-button:hover{

    background:var(--primary-hover);

    border-color:var(--primary-hover);

}


/*
|--------------------------------------------------------------------------
| Main Site Button
|--------------------------------------------------------------------------
|
| The second button is intentionally slightly darker.
|
|--------------------------------------------------------------------------
*/

.auth-nav-button:last-child{

    background:#1b2230;

    border-color:var(--border);

    color:var(--text);

}


.auth-nav-button:last-child:hover{

    background:var(--card-hover);

    border-color:var(--primary);

}


/*
|--------------------------------------------------------------------------
| Mobile Login
|--------------------------------------------------------------------------
*/

@media (max-width:600px){

    /*
    |--------------------------------------------------------------------------
    | Login navigation becomes vertical
    |--------------------------------------------------------------------------
    */

    .login-links{

        grid-template-columns:1fr;

        gap:10px;

        margin-top:12px;

    }


    /*
    |--------------------------------------------------------------------------
    | Full-width buttons
    |--------------------------------------------------------------------------
    */

    .auth-nav-button{

        width:100%;

        min-width:100%;

        min-height:52px;

        white-space:nowrap;

    }

}


/*
|--------------------------------------------------------------------------
| Very Small Screens
|--------------------------------------------------------------------------
*/

@media (max-width:380px){

    .auth-nav-button{

        font-size:14px;

        padding:
            10px 12px;

    }

}


/*
|--------------------------------------------------------------------------
| Yesterday Prayer Reminder
|--------------------------------------------------------------------------
*/

.solat-reminder{

    width:100%;

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin-bottom:20px;

    padding:16px 18px;

    border:1px solid rgba(234,179,8,.45);

    border-left:4px solid var(--warning);

    border-radius:14px;

    background:#292315;

    color:var(--text);

    box-shadow:0 8px 22px rgba(0,0,0,.18);

}

.solat-reminder[hidden]{

    display:none;

}

.solat-reminder-icon{

    flex:0 0 auto;

    font-size:24px;

    line-height:1.2;

}

.solat-reminder-content{

    min-width:0;

}

.solat-reminder-content strong{

    display:block;

    font-size:16px;

    margin-bottom:4px;

}

.solat-reminder-content p{

    margin:0;

    color:#f5e7b2;

    font-size:14px;

    line-height:1.5;

}

@media(max-width:600px){

    .solat-reminder{

        gap:10px;

        padding:14px;

        margin-bottom:15px;

    }

    .solat-reminder-icon{

        font-size:21px;

    }

    .solat-reminder-content strong{

        font-size:15px;

    }

    .solat-reminder-content p{

        font-size:13px;

    }

}