/* =========================================
   RESET
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    background:#0c4b54;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{
    color:#fff;
    overflow:hidden;
}

/* =========================================
   LOADING SCREEN
========================================= */

.loading-overlay{
    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#0c4b54;

    z-index:99999;

    opacity:1;
    visibility:visible;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.loading-overlay.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.loading-logo{
    display:block;

    width:auto;
    height:50px;
    max-height:50px;
    max-width:80vw;

    object-fit:contain;

    animation:loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse{

    0%{
        transform:scale(.95);
        opacity:.7;
    }

    50%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(.95);
        opacity:.7;
    }

}

/* =========================================
   LAYOUT
========================================= */

.wrapper{
    height:100dvh;
    padding:10px;
}

.card-main{

    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

    gap:10px;

    padding:14px;

    background:#1f5c63;
    border-radius:20px;

    color:#fff;
}

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

.header{

    display:grid;
    grid-template-columns:1fr auto 1fr;

    align-items:center;

    width:100%;
    padding:10px 5px;
}

/* LEFT */

.status{

    justify-self:start;

    display:flex;
    align-items:center;
}

/* CENTER */

.header-logo{

    justify-self:center;

    display:flex;
    align-items:center;
}

.header-logo img{

    display:block;

    width:auto;
    height:clamp(45px,6vh,75px);
}

/* RIGHT */

.weather{

    justify-self:end;

    display:flex;
    flex-direction:column;
    align-items:flex-end;

    text-align:right;
}

.weather-top{

    display:flex;
    align-items:center;

    gap:6px;
}

.weather-icon{

    width:clamp(22px,4vw,34px);
    height:auto;
}

.weather-temp{

    font-size:clamp(.9rem,2.5vw,1.2rem);
    font-weight:700;
}

.weather-desc{

    font-size:clamp(.7rem,2vw,.9rem);
    opacity:.9;
}

.weather-location,
.city-name{

    font-size:clamp(.65rem,1.8vw,.85rem);
    opacity:.8;
}

/* =========================================
   ICONS
========================================= */

.icon{

    width:18px;
    height:18px;

    fill:#666;
}

.icon.success{

    fill:#4caf50;
}

.icon.error{

    fill:#f44336;
}

.spinner{

    fill:#2196f3;
    animation:spin 1.5s linear infinite;
}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

img{

    display:block;
    max-width:100%;
    height:auto;
}
/* =========================================
   DATE & TIME
========================================= */

.time-section{

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:6px;
}

/* Date */

.date-line{

    display:flex;
    justify-content:center;
    align-items:center;

    gap:6px;

    font-size:clamp(.9rem,2vw,1.2rem);
}

/* Clock */

.clock-line{

    display:flex;
    justify-content:center;
    align-items:center;

    gap:14px;
}

.clock{
    text-align:center;
    font-weight:bold;
    line-height:1;
    font-size:clamp(55px,14vw,95px);
    margin:20px 0;

    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.clock span{

    font-size:35%;
    vertical-align:top;
}

/* AM / PM */

.ampm{

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    padding:6px 10px;

    border-radius:10px;

    font-size:clamp(1rem,2vw,1.4rem);

    font-weight:700;

    line-height:1;
}

.ampm span{

    display:block;
}

.arabic-date{

    text-align:center;
    opacity:.8;
}

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

.table-header{

    display:grid;
    grid-template-columns:1fr 1fr 1fr;

    text-align:center;

    font-size:clamp(.8rem,2vw,1.2rem);

    font-weight:600;
}

.table-header > div:first-child{

    text-align:left;

    padding-left:1rem;
}
/* =========================================
   PRAYER TABLE
========================================= */

.prayers{

    flex:1;

    display:grid;

    grid-template-rows:repeat(5,1fr);

    gap:8px;

    min-height:0;
}

.prayer-row{

    display:grid;

    grid-template-columns:1fr 1fr 1fr;

    align-items:center;

    padding:.75rem 1rem;

    background:#3d6d73;

    border-radius:14px;

    transition:
        background .25s ease,
        transform .25s ease;
}

/* Current / Next Prayer */

.nextPrayer{

    position:relative;

    z-index:1;
}

.nextPrayer::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(199,143,4,.45);

    border-radius:14px;

    z-index:-1;
}

.name{
    font-size:clamp(1.2rem,3.5vw,2rem);
    font-weight:600;
}

.time{
    font-size:clamp(1.6rem,5vw,3rem);
    font-weight:700;
    text-align:center;
    font-variant-numeric:tabular-nums;
    font-feature-settings:"tnum";
}
/* =========================================
   FOOTER
========================================= */

.footer{

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:8px;
}

.footer-box{

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    padding:10px;

    background:#2f6870;

    border-radius:14px;
}

.footer-title{

    font-size:clamp(.75rem,2vw,1rem);
}

.footer-time{
    font-size:clamp(1rem,3.5vw,1.8rem);
    font-weight:700;

    font-variant-numeric: tabular-nums;
    font-feature-settings:"tnum";
}

/* =========================================
   SMALL SCREENS
========================================= */

@media (max-height:700px){

    .card-main{

        gap:6px;
        padding:10px;
    }

    .header{

        padding:6px 4px;
    }

    .header-logo img{

        height:50px;
    }

    .weather-temp{

        font-size:.9rem;
    }

    .weather-desc,
    .weather-location,
    .city-name{

        font-size:.7rem;
    }

    .weather-icon{

        width:22px;
    }

    .clock{

        font-size:3rem;
        margin:10px 0;
    }

    .prayer-row{

        padding:.55rem .8rem;
    }

    .time{

        font-size:1.2rem;
    }
}

/* =========================================
   VERY SMALL SCREENS
========================================= */

@media (max-height:620px){

    .card-main{

        gap:5px;
        padding:8px;
    }

    .header-logo img{

        height:42px;
    }

    .clock{

        font-size:2.5rem;
        margin:8px 0;
    }

    .date-line{

        font-size:.8rem;
    }

    .name{

        font-size:.9rem;
    }

    .time{

        font-size:1rem;
    }

    .footer-title{

        font-size:.65rem;
    }

    .footer-time{

        font-size:.9rem;
    }
}

/* =========================================
   SMALL WIDTH DEVICES
========================================= */

@media (max-width:576px){

    .table-header{

        font-size:.8rem;
    }

    .prayer-row{

        padding:10px 8px;
    }

    .footer{

        gap:6px;
    }

    .footer-box{

        padding:8px;
    }
}