/*
=========================================================
Prayer Schedule Pro
CSS V2 - PART A
BHICreat Framework
=========================================================
*/

:root{

    --psp-primary:#184D47;
    --psp-accent:#D4AF37;

    --psp-text:#1F2937;
    --psp-muted:#6B7280;

    --psp-bg:#FFFFFF;

    --psp-border:#E5E7EB;

    --psp-radius:4px;

    --psp-shadow:
        0 10px 28px rgba(0,0,0,.05);

}

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

#psp-app,
#psp-app *{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

#psp-app{

    width:100%;

    font-family:"Roboto Slab",serif;

    color:var(--psp-text);

}

/*======================================================
CONTAINER
======================================================*/

.psp-container{

    display:grid;

    grid-template-columns:300px 1fr;

    column-gap:20px;

    align-items:start;

}
/*======================================================
SIDEBAR
======================================================*/

.psp-sidebar{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding-right:8px;

}

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

.psp-header{

    display:flex;

    align-items:center;

    gap:14px;

}

.psp-logo{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    flex:none;

    border:1px solid rgba(212,175,55,.25);

    border-radius:4px;

    background:#FFFEFA;

    color:var(--psp-accent);

}

.psp-logo svg{

    width:22px;

    height:22px;

    stroke:currentColor;

}

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

.psp-title{

    font-size:20px;

    font-weight:700;

    color:var(--psp-primary);

    line-height:1.1;

}

.psp-subtitle{

    margin-top:4px;

    font-size:12px;

    line-height:1.5;

    color:var(--psp-muted);

}

/*======================================================
META
======================================================*/

.psp-meta{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.psp-meta-item{

    display:flex;

    align-items:center;

    gap:10px;

    min-height:42px;

    padding:0 12px;

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

    border-radius:4px;

    background:#fff;

    transition:.25s;

}

.psp-meta-item:hover{

    border-color:rgba(212,175,55,.35);

}

.psp-meta-icon{

    width:18px;

    height:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--psp-primary);

}

.psp-meta-icon svg{

    width:18px;

    height:18px;

    stroke:currentColor;

}

.psp-meta-item span:last-child{

    font-size:12px;

    font-weight:600;

}

/*======================================================
LIVE PANEL
======================================================*/

.psp-live{

    margin-top:6px;

    padding:14px;

    border:1px solid rgba(212,175,55,.25);

    border-left:4px solid var(--psp-accent);

    border-radius:4px;

    background:#FFFDF8;

}

.psp-live-label{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:8px;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.8px;

    color:var(--psp-primary);

}

.psp-live-label svg{

    width:16px;

    height:16px;

    color:var(--psp-accent);

}

.psp-current-prayer{

    font-size:18px;

    font-weight:700;

    color:var(--psp-primary);

    margin-bottom:6px;

}

.psp-countdown{

    font-size:15px;

    font-weight:600;

    color:var(--psp-accent);

    font-variant-numeric:tabular-nums;

}

/*======================================================
GRID
======================================================*/

.psp-grid{

    display:grid;

    grid-template-columns:repeat(6,minmax(110px,1fr));

    gap:12px;

    align-items:start;

    padding:0 12px;

}

/*======================================================
CSS V2 PART B
PRAYER CARD
======================================================*/

.psp-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:120px;

    padding:16px 12px;

    background:#FFFFFF;

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

    border-radius:4px;

    overflow:hidden;

    transition:
        transform .20s ease,
        border-color .20s ease,
        box-shadow .20s ease;

}

/*======================================
TOP ACCENT
======================================*/

.psp-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:2px;

    background:transparent;

    transition:.20s;

}

.psp-card:hover::before{

    background:var(--psp-accent);

}

/*======================================
HOVER
======================================*/

.psp-card:hover{

    transform:translateY(-2px);

    border-color:rgba(212,175,55,.35);

    box-shadow:

        0 8px 18px rgba(0,0,0,.05);

}

/*======================================
ACTIVE
======================================*/

.psp-card.active{

    background:#FFFDF8;

    border-color:rgba(212,175,55,.55);

}

.psp-card.active::before{

    background:var(--psp-accent);

}

/*======================================
ICON BOX
======================================*/

.psp-card-icon{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:10px;

    border:1px solid rgba(212,175,55,.20);

    border-radius:4px;

    background:#FFFEFA;

    color:var(--psp-accent);

    transition:.20s;

}

.psp-card:hover .psp-card-icon{

    transform:scale(1.06);

}

.psp-card.active .psp-card-icon{

    background:var(--psp-accent);

    color:#FFFFFF;

    border-color:var(--psp-accent);

}

.psp-card-icon svg{

    width:20px;

    height:20px;

    stroke:currentColor;

    fill:none;

    stroke-width:1.8;

}

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

.psp-card-title{

    margin-bottom:8px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.4px;

    color:var(--psp-text);

}

/*======================================
TIME
======================================*/

.psp-card-time{

    font-size:18px;

    font-weight:700;

    color:var(--psp-primary);

    line-height:1;

    font-variant-numeric:tabular-nums;

    letter-spacing:.5px;

}

.psp-card.active .psp-card-time{

    color:var(--psp-primary);

}

/*======================================
SMALL ANIMATION
======================================*/

.psp-card{

    animation:pspFade .35s ease;

}

@keyframes pspFade{

    from{

        opacity:0;

        transform:translateY(6px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*======================================================
CSS V2 PART C
HORIZONTAL LAYOUT
======================================================*/

/*======================================
GRID
======================================*/

.psp-grid{

    display:grid;

    grid-template-columns:repeat(6,minmax(110px,1fr));

    gap:12px;

    align-items:stretch;

}

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

.psp-card{

    min-height:96px;

    padding:14px 10px;

}

/*======================================
ICON
======================================*/

.psp-card-icon{

    width:36px;

    height:36px;

    margin-bottom:8px;

}

.psp-card-icon svg{

    width:18px;

    height:18px;

}

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

.psp-card-title{

    margin-bottom:6px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}

/*======================================
TIME
======================================*/

.psp-card-time{

    font-size:16px;

    font-weight:700;

    line-height:1;

}

/*======================================
SIDEBAR
======================================*/

.psp-sidebar{

    justify-content:flex-start;

}

/*======================================
LIVE PANEL
======================================*/

.psp-live{

    padding:12px;

}

.psp-current-prayer{

    font-size:16px;

}

.psp-countdown{

    font-size:14px;

}

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

.psp-header{

    margin-bottom:2px;

}

.psp-title{

    font-size:18px;

}

.psp-subtitle{

    font-size:11px;

}

/*======================================
META
======================================*/

.psp-meta{

    gap:6px;

}

.psp-meta-item{

    min-height:38px;

    padding:0 10px;

}

.psp-meta-item span:last-child{

    font-size:11px;

}

/*======================================
DESKTOP XL
======================================*/

@media(min-width:1400px){

    .psp-container{

        grid-template-columns:320px 1fr;

    }

}

/*======================================
LAPTOP
======================================*/

@media(max-width:1200px){

    .psp-grid{

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

    }

}

/*======================================
TABLET
======================================*/

@media(max-width:900px){

    .psp-container{

        grid-template-columns:1fr;

    }

    .psp-grid{

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

    }

}

/*======================================
PHONE
======================================*/

@media(max-width:640px){

    .psp-grid{

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

    }

}

/*======================================================
CSS V2 PART D
FINAL POLISH
BHICreat UI
======================================================*/

/*======================================
GLOBAL SMOOTH
======================================*/

#psp-app *{

    transition:

        background-color .20s ease,

        border-color .20s ease,

        color .20s ease,

        box-shadow .20s ease,

        transform .20s ease;

}

/*======================================
CONTAINER
======================================*/

.psp-container{

    backdrop-filter:blur(8px);

}

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

.psp-title{

    letter-spacing:.2px;

}

.psp-subtitle{

    opacity:.82;

}

/*======================================
META
======================================*/

.psp-meta-item{

    background:#FFF;

}

.psp-meta-item:hover{

    background:#FFFEFB;

}

/*======================================
LIVE
======================================*/

.psp-live{

    box-shadow:

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

}

.psp-current-prayer{

    letter-spacing:.4px;

}

.psp-countdown{

    font-feature-settings:"tnum";

}

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

.psp-card{

    background:

        linear-gradient(

            180deg,

            #FFFFFF,

            #FCFCFC

        );

}

.psp-card:hover{

    box-shadow:

        0 12px 26px rgba(15,23,42,.06);

}

/*======================================
ACTIVE
======================================*/

.psp-card.active{

    background:

        linear-gradient(

            180deg,

            #FFFDF7,

            #FFFBEF

        );

}

.psp-card.active .psp-card-title{

    color:var(--psp-primary);

}

/*======================================
ICON
======================================*/

.psp-card-icon{

    background:#FFFFFF;

}

.psp-card.active .psp-card-icon{

    color:#FFFFFF;

}

/*======================================
NUMBER
======================================*/

.psp-card-time{

    font-variant-numeric:tabular-nums;

    font-feature-settings:"tnum";

}

/*======================================
SCROLLBAR
======================================*/

#psp-app ::-webkit-scrollbar{

    width:6px;

    height:6px;

}

#psp-app ::-webkit-scrollbar-thumb{

    background:#D4AF37;

    border-radius:20px;

}

#psp-app ::-webkit-scrollbar-track{

    background:#F4F4F4;

}

/*======================================
SELECTION
======================================*/

#psp-app ::selection{

    background:#D4AF37;

    color:#FFF;

}

/*======================================
FOCUS
======================================*/

#psp-app :focus{

    outline:none;

}

/*======================================
PRINT
======================================*/

@media print{

    .psp-container{

        box-shadow:none;

        border:1px solid #DDD;

    }

}