@font-face{font-family:'VazirmatnLocal';src:url('../assets/fonts/Vazirmatn-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'VazirmatnLocal';src:url('../assets/fonts/Vazirmatn-Bold.ttf') format('truetype');font-weight:700 900;font-style:normal;font-display:swap}

.ebs-wrap,.ebs-single{font-family:VazirmatnLocal,Vazirmatn,Tahoma,sans-serif}
.ebs-wrap{max-width:1080px;margin:24px auto;padding:0 16px;color:#172033}
.ebs-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#172033,#334155);color:#fff;border-radius:24px;padding:30px;display:flex;justify-content:space-between;gap:24px;align-items:center;box-shadow:0 14px 40px rgba(15,23,42,.12)}
.ebs-hero h1{margin:7px 0;font-size:28px;line-height:1.5;font-weight:800}
.ebs-hero p{margin:0;color:#dbe4ef;font-size:14px;line-height:2}
.ebs-kicker{font-size:12px;color:#cbd5e1}
.ebs-city{min-width:170px;background:#fff;padding:4px;border:1px solid rgba(255,255,255,.12);border-radius:16px}
.ebs-city label{display:block;font-size:12px;margin-bottom:7px;color:#e2e8f0}
.ebs-city select{width:100%;border:0;border-radius:10px;background:#f7f9fb;color:#172033;padding:10px;font-family:inherit}
.ebs-prayer{margin-top:18px;background:#fff;border:1px solid #e7ebf0;border-radius:20px;padding:20px}
.ebs-prayer h2{font-size:18px;margin:0 0 14px}
.ebs-times{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px}
.ebs-times div{background:#f7f9fb;border-radius:14px;padding:12px 8px;text-align:center}
.ebs-times span{display:block;color:#667085;font-size:11px;white-space:nowrap}
.ebs-times b{display:block;margin-top:6px;font-size:16px}
.ebs-group{margin-top:26px}
.ebs-group-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ebs-group-title h2{color:#ed1b35;font-size:20px;margin:0;font-weight:800}
.ebs-group-title span{font-size:11px;color:#667085}
.ebs-card{background:#fff;border:1px solid #e7ebf0;border-radius:16px;margin:9px 0;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ebs-card:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(15,23,42,.07);border-color:#d7dde6}
.ebs-action-link{display:flex;align-items:center;gap:12px;padding:17px 18px;color:#172033;text-decoration:none}
.ebs-action-link h3{font-size:16px;margin:0;font-weight:700;flex:1}
.ebs-action-dot{width:8px;height:8px;border-radius:50%;background:#64748b;flex:none}
.ebs-arrow{color:#98a2b3;font-size:18px}
.ebs-empty{padding:42px 20px;text-align:center;border:1px dashed #cbd5e1;border-radius:18px;color:#667085;background:#fff}
.ebs-today-link{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ebs-single{max-width:900px;margin:40px auto;padding:0 16px}
.ebs-single .ebs-card{padding:26px}
.ebs-single h1{font-size:28px;margin-top:0}
.ebs-single-type{display:inline-block;background:#f1f5f9;padding:7px 12px;border-radius:10px;font-size:12px;margin-bottom:15px}
.ebs-single-content{font-size:17px;line-height:2.2}
.ebs-back{display:inline-block;margin-bottom:16px;color:#334155;text-decoration:none}
@media(max-width:900px){.ebs-times{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){
 .ebs-wrap{margin:12px auto;padding:0 10px}
 .ebs-hero{display:block;padding:22px;border-radius:20px}
 .ebs-hero h1{font-size:22px}
 .ebs-city{margin-top:17px}
 .ebs-prayer{padding:14px;border-radius:18px}
  /* 
 .ebs-times{grid-template-columns:repeat(2,1fr);gap:7px}
 .ebs-times div{padding:11px 6px}
  */
  
 .ebs-times {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    box-sizing: border-box;
}

.ebs-times > div {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 6px;
} 
 .ebs-group-title h2{font-size:18px}
 .ebs-action-link{padding:15px}
 .ebs-action-link h3{font-size:15px}
}

.ebs-weekdays{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ebs-weekdays label{min-width:90px}
















/* =====================================================
   EBS - Force Vazir Font
   ===================================================== */

.ebs-wrap,
.ebs-wrap *,
.ebs-wrap input,
.ebs-wrap select,
.ebs-wrap button,
.ebs-wrap textarea,
.ebs-wrap option,
.ebs-wrap h1,
.ebs-wrap h2,
.ebs-wrap h3,
.ebs-wrap h4,
.ebs-wrap h5,
.ebs-wrap h6,
.ebs-wrap p,
.ebs-wrap span,
.ebs-wrap a,
.ebs-wrap label,
.ebs-wrap div,
.ebs-wrap section,
.ebs-wrap article,
.ebs-wrap form {
    font-family: "Vazir", Tahoma, Arial, sans-serif !important;
}











.ebs-single,
.ebs-single *,
.ebs-single h1,
.ebs-single h2,
.ebs-single h3,
.ebs-single h4,
.ebs-single h5,
.ebs-single h6,
.ebs-single p,
.ebs-single span,
.ebs-single a,
.ebs-single div,
.ebs-single article,
.ebs-single details,
.ebs-single summary {
    font-family: "Vazir", Tahoma, Arial, sans-serif !important;
}







/* =====================================================
   EBS - Center Header Text
   انتخاب شهر بدون تغییر باقی می‌ماند
   ===================================================== */

.ebs-hero > div:first-child {
    flex: 1;
    text-align: center;
}

.ebs-hero h1,
.ebs-hero p,
.ebs-hero .ebs-kicker {
    text-align: center;
}


.ebs-hero p {
    font-size:28px;
}














/* =====================================================
   EBS - Day Timeline
   ===================================================== */

.ebs-day-timeline {
    margin-top: 22px;
    margin-bottom: 28px;
    width: 100%;
    overflow: hidden;
}

.ebs-day-track {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px 2px 12px;

    scrollbar-width: thin;
    scroll-behavior: smooth;
}

.ebs-day-track::-webkit-scrollbar {
    height: 5px;
}

.ebs-day-track::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 20px;
}


/* هر روز */

.ebs-day-tab {
    position: relative;

    flex: 0 0 135px;

    min-height: 105px;

    border: 1px solid #e7ebf0;
    border-radius: 17px;

    background: #fff;

    padding: 13px 10px;

    cursor: pointer;

    text-align: center;

    font-family: inherit;

    transition:
        .2s ease;

    box-shadow:
        0 4px 15px rgba(15,23,42,.04);
}


.ebs-day-tab:hover {
    transform: translateY(-2px);

    border-color: #cbd5e1;

    box-shadow:
        0 7px 20px rgba(15,23,42,.08);
}


/* روز انتخاب شده */

.ebs-day-tab.active {
    background: #172033;

    border-color: #172033;

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 9px 25px rgba(15,23,42,.15);
}


/* نام روز */

.ebs-day-weekday {
    display: block;

    font-size: 14px;

    font-weight: 800;

    margin-bottom: 6px;
}


/* تاریخ شمسی */

.ebs-day-solar {
    display: block;

    font-size: 12px;

    font-weight: 600;

    opacity: .9;
}


/* تاریخ قمری */

.ebs-day-hijri {
    display: block;

    font-size: 10px;

    margin-top: 5px;

    opacity: .65;

    white-space: nowrap;
}


/* برچسب امروز */

.ebs-day-today {
    position: absolute;

    top: 7px;
    left: 7px;

    background: #ed1b35;

    color: #fff;

    padding: 3px 6px;

    border-radius: 6px;

    font-size: 9px;

    font-weight: 700;
}


/* =====================================================
   محتوای روز
   ===================================================== */

.ebs-day-content {
    display: none;

    animation:
        ebsDayFade
        .22s
        ease;
}

.ebs-day-content.active {
    display: block;
}


@keyframes ebsDayFade {

    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =====================================================
   موبایل
   ===================================================== */

@media (max-width: 640px) {

    .ebs-day-timeline {
        margin-top: 18px;
        margin-bottom: 22px;
    }

    .ebs-day-tab {
        flex-basis: 112px;

        min-height: 96px;

        padding: 11px 7px;

        border-radius: 14px;
    }

    .ebs-day-weekday {
        font-size: 13px;
    }

    .ebs-day-solar {
        font-size: 11px;
    }

    .ebs-day-hijri {
        font-size: 9px;
    }

}

















.ebs-prayer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.ebs-prayer-header h2 {
    margin: 0;
    flex: 1;
}

.ebs-prayer-header .ebs-city {
    flex: 0 0 auto;
    margin-right: auto;
}


@media (max-width: 640px) {

    .ebs-prayer-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .ebs-prayer-header h2 {
        text-align: right;
    }

    .ebs-prayer-header .ebs-city {
        margin-right: 0;
        width: 100%;
    }

    .ebs-prayer-header .ebs-city select {
        width: 100%;
    }

}
















/* =====================================================
   EBS - Fix Mobile Horizontal Overflow
   
   
   مقداری به چپ و راست اسکرول میشد که با این کد حل شد
   ===================================================== */

.ebs-wrap {
    width: 100%;
    max-width: 1080px;
    box-sizing: border-box;
}

.ebs-wrap *,
.ebs-wrap *::before,
.ebs-wrap *::after {
    box-sizing: border-box;
}

@media (max-width: 640px) {

    .ebs-wrap {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 10px;
        padding-right: 10px;
        overflow-x: hidden;
    }

    .ebs-hero,
    .ebs-prayer,
    .ebs-day-timeline,
    .ebs-day-contents {
        width: 100%;
        max-width: 100%;
    }

    .ebs-prayer-header {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .ebs-prayer-header .ebs-city {
        max-width: 100%;
        min-width: 0;
    }

    .ebs-times {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .ebs-times > div {
        min-width: 0;
        max-width: 100%;
    }

    .ebs-day-track {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

}

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

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




































/* =====================================================
   EBS - Single Ibadah Navigation
   Desktop + Mobile
   ===================================================== */

.ebs-single-navigation {
    width: 100%;
    margin: 18px 0;
    box-sizing: border-box;
}


.ebs-nav-inner {
    display: grid;

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

    align-items: center;

    gap: 12px;

    width: 100%;
}


/* =====================================================
   Previous / Next
   ===================================================== */

.ebs-nav-side {
    min-width: 0;
}


.ebs-nav-button {

    display: flex;

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

    gap: 10px;

    min-height: 52px;

    box-sizing: border-box;

    padding: 10px 14px;

    background: #f7f9fb;

    border: 1px solid #e7ebf0;

    border-radius: 14px;

    color: #172033;

    text-decoration: none;

    transition:
        .18s ease;

}


.ebs-nav-button:hover {

    border-color: #cbd5e1;

    box-shadow:
        0 6px 18px rgba(15,23,42,.07);

    transform:
        translateY(-1px);
}


.ebs-nav-button span {

    font-size: 12px;

    color: #667085;

    white-space: nowrap;
}


.ebs-nav-button strong {

    flex: 1;

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 13px;

    font-weight: 700;

}


.ebs-nav-prev {

    text-align: right;
}


.ebs-nav-next {

    text-align: left;

    flex-direction: row-reverse;
}


/* =====================================================
   Disabled
   ===================================================== */

.ebs-nav-disabled {

    opacity: .35;

    pointer-events: none;

    cursor: default;
}


/* =====================================================
   Center
   ===================================================== */

.ebs-nav-center {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 150px;

    min-height: 52px;

    padding: 8px 18px;

    box-sizing: border-box;

    border: 1px solid #e7ebf0;

    border-radius: 14px;

    background: #f8fafc;

    color: #172033;

    text-decoration: none;

    text-align: center;

    transition:
        .18s ease;
}


.ebs-nav-center:hover {

    background: #f1f5f9;

    border-color: #cbd5e1;

    transform:
        translateY(-1px);
}


.ebs-nav-list-title {

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;
}


.ebs-nav-position {

    margin-top: 3px;

    color: #667085;

    font-size: 11px;

    font-weight: 600;

    white-space: nowrap;
}


/* =====================================================
   Mobile
   ===================================================== */

@media (max-width: 640px) {

    /*
     * هر دو ناوبری بالا و پایین
     * در حالت موبایل به نوار ثابت تبدیل نمی‌شوند.
     *
     * فقط ناوبری آخر صفحه ثابت می‌شود.
     */

    .ebs-single-navigation {

        margin: 0;

    }


    /*
     * ناوبری اول صفحه مخفی
     */

    .ebs-single-navigation:first-of-type {

        display: none;
    }


    /*
     * ناوبری دوم صفحه
     * تبدیل به نوار پایین
     */

    .ebs-single-navigation:last-of-type {

        display: block;

        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 99999;

        width: 100%;

        padding:
            7px 8px
            calc(7px + env(safe-area-inset-bottom))
            8px;

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

        border-top:
            1px solid #e7ebf0;

        box-shadow:
            0 -5px 20px rgba(15,23,42,.12);

        backdrop-filter:
            blur(10px);

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

        box-sizing: border-box;
    }


    .ebs-single-navigation:last-of-type
    .ebs-nav-inner {

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

        gap: 6px;
    }


    /*
     * دکمه‌های قبلی و بعدی
     */

    .ebs-single-navigation:last-of-type
    .ebs-nav-button {

        min-height: 40px;

        padding: 7px 6px;

        border-radius: 9px;

        justify-content: center;

        gap: 3px;

        background: #f7f9fb;

    }


    .ebs-single-navigation:last-of-type
    .ebs-nav-button span {

        font-size: 9px;

        white-space: nowrap;
    }


    /*
     * عنوان عمل قبلی/بعدی
     * روی موبایل نمایش داده نشود
     */

    .ebs-single-navigation:last-of-type
    .ebs-nav-button strong {

        display: none;
    }


    /*
     * وسط
     */

    .ebs-single-navigation:last-of-type
    .ebs-nav-center {

        min-width: 90px;

        min-height: 40px;

        padding: 5px 7px;

        border-radius: 9px;

        background: #f8fafc;
    }


    .ebs-single-navigation:last-of-type
    .ebs-nav-list-title {

        font-size: 9px;
    }


    .ebs-single-navigation:last-of-type
    .ebs-nav-position {

        margin-top: 2px;

        font-size: 8px;
    }


    /*
     * فضای پایین صفحه
     * چون نوار fixed است
     */

    .ebs-single {

        padding-bottom: 75px;
    }

}

/* =====================================================
   EBS - Ibadah Playlist
   ===================================================== */

.ebs-nav-playlist {
    position: relative;
    min-width: 170px;
}


.ebs-nav-center {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 52px;

    padding: 8px 18px;

    box-sizing: border-box;

    border: 1px solid #e7ebf0;

    border-radius: 14px;

    background: #f8fafc;

    color: #172033;

    cursor: pointer;

    font-family: inherit;

    text-align: center;

    transition: .18s ease;
}


.ebs-nav-center:hover {
    background: #f1f5f9;
}


.ebs-nav-list-title {
    font-size: 12px;
    font-weight: 800;
}


.ebs-nav-position {

    margin-top: 3px;

    color: #667085;

    font-size: 11px;

    font-weight: 600;
}


/* =====================================================
   Playlist Dropdown
   ===================================================== */

.ebs-playlist-dropdown {

    position: absolute;

    left: 50%;

    bottom: calc(100% + 9px);

    transform:
        translateX(-50%)
        translateY(5px);

    width: 300px;

    max-width: 90vw;

    max-height: 360px;

    overflow-y: auto;

    background: #fff;

    border: 1px solid #e7ebf0;

    border-radius: 16px;

    box-shadow:
        0 15px 40px rgba(15,23,42,.16);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;

    z-index: 100000;
}


.ebs-nav-playlist.open
.ebs-playlist-dropdown {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =====================================================
   Playlist Header
   ===================================================== */

.ebs-playlist-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 13px 15px;

    border-bottom: 1px solid #edf0f3;

    background: #fafbfc;

    border-radius:
        16px 16px 0 0;
}


.ebs-playlist-header strong {
    font-size: 13px;
}


.ebs-playlist-header span {

    font-size: 10px;

    color: #667085;
}


/* =====================================================
   Playlist Items
   ===================================================== */

.ebs-playlist-items {
    padding: 6px;
}


.ebs-playlist-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px 9px;

    margin: 2px 0;

    border-radius: 10px;

    color: #172033;

    text-decoration: none;

    transition: .15s ease;
}


.ebs-playlist-item:hover {
    background: #f5f7fa;
}


.ebs-playlist-item.active {

    background: #172033;

    color: #fff;
}


.ebs-playlist-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 27px;

    height: 27px;

    flex: 0 0 27px;

    border-radius: 8px;

    background: #f1f5f9;

    color: #475467;

    font-size: 10px;

    font-weight: 800;
}


.ebs-playlist-item.active
.ebs-playlist-number {

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

    color: #fff;
}


.ebs-playlist-title {

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 12px;

    font-weight: 600;
}