/* =========================
   MOSQUE HERO
========================= */

.mosque-hero {

    position:relative;

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:100px 0 60px;

    background:url("/assets/images/star.png")
    center/cover no-repeat;

    overflow:hidden;

}



.mosque-hero .hero-overlay {

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(3,7,30,.22),
        rgba(3,7,30,1)
    );

}



.mosque-hero .container {

    position:relative;

    z-index:1;

}





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


.mosque-hero .hero-logo i {

    font-size:40px;

    color:#ffd86b;

}



.mosque-hero .hero-text {

    max-width:650px;

    margin:10px auto 0;

    font-size:17px;

    opacity:.85;

    line-height:1.8;

}





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


.hero-location {

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

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

    border:1px solid rgba(255,255,255,.2);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-radius:30px;

    padding:35px;

    box-shadow:
    0 25px 60px rgba(0,0,0,.25);

}






/* =========================
   HELP BUTTON
========================= */


.btn-help {


    position:absolute;


    top:18px;


    right:18px;



    width:42px;

    height:42px;



    display:flex;

    align-items:center;

    justify-content:center;



    border:none;


    border-radius:50%;



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


    color:#ffd86b;



    font-size:20px;


    cursor:pointer;


    transition:.25s;


}



.btn-help:hover {


    background:rgba(255,255,255,.25);


    color:white;


    transform:scale(1.08);


}



.btn-help:focus,

.btn-help:active {

    outline:none;

    box-shadow:none;

}





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


.location-icon i {
    display:flex;

    justify-content:center;

    align-items:center;

    font-size:55px;


    color:#ffd86b;


}



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


#getLocation {


    background:#198754;


    height:58px;


    padding:0 35px;



    border:none;


    border-radius:16px;



    font-weight:600;


    font-size:16px;



    box-shadow:none;


    transition:none;


}




#getLocation:hover,

#getLocation:focus,

#getLocation:active {


    background:#157347;


    box-shadow:none;


    transform:translateY(1px);


}





/* =========================
   RESULT STATUS
========================= */


#locationResult {

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    padding:10px 22px;

    border-radius:50px;

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

    color:white;

    font-weight:600;

    min-height:45px;

}





#locationResult i {


    color:#ffd86b;


}





/* =========================
   MODAL GUIDE
========================= */


#mosqueGuide .modal-content {


    border-radius:25px;


}



#mosqueGuide .modal-body {


    line-height:1.8;


}



#mosqueGuide li {


    margin-bottom:10px;


}



#mosqueGuide .alert {


    border-radius:15px;


}





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


.mosque-content {


    padding:80px 0;


    background:#f5f7fb;


}





.mosque-wrapper {


    background:white;


    border-radius:28px;


    overflow:hidden;


    box-shadow:

    0 15px 40px rgba(0,0,0,.08);


}





/* HEADER */


.mosque-header {


    position:relative;


    padding:45px;


    color:white;


    background:url("/assets/images/star.png")

    center/cover no-repeat;


}



.mosque-header::before {


    content:"";


    position:absolute;


    inset:0;


    background:rgba(3,7,30,.65);


}



.mosque-header>* {


    position:relative;


    z-index:1;


}



.mosque-header h2 {


    font-size:36px;


    font-weight:700;


}





/* BODY */


.mosque-body {


    padding:40px;


}





/* =========================
   STATUS
========================= */


.location-status {


    background:#f8f9fa;


    padding:18px;


    border-radius:15px;


    text-align:center;


    color:#555;


}





/* =========================
   MAP
========================= */


.map-container {


    border-radius:25px;


    overflow:hidden;


    box-shadow:

    0 15px 35px rgba(0,0,0,.08);


}



#map {


    width:100%;


    height:450px;


}



.map-loading {


    height:450px;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    background:#f8f9fa;


    color:#888;


}



.leaflet-container {


    border-radius:25px;


}





/* =========================
   MOSQUE LIST
========================= */


#mosqueList .card {


    border:none;


    border-radius:22px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.06);


    transition:.3s;


}



#mosqueList .card:hover {


    transform:translateY(-5px);


}



#mosqueList h5 {


    font-size:20px;


    font-weight:700;


}



#mosqueList h5 i {


    color:#198754;


}






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


@media(max-width:992px){


    .mosque-hero {


        padding-top:150px;


    }



    .mosque-hero .headline {


        font-size:42px;


    }


}





@media(max-width:576px){


    .mosque-hero {


        padding-top:110px;


        padding-bottom:80px;


    }



    .mosque-hero .headline {


        font-size:32px;


    }



    .mosque-hero .hero-text {


        font-size:15px;


    }



    .hero-location {


        padding:25px;


        border-radius:24px;


    }



    .location-icon i {


        font-size:45px;


    }



    #getLocation {


        width:100%;


    }



    .mosque-body {


        padding:20px;


    }



    #map {


        height:350px;


    }

}