/* Last Modified: 2025-07-26
   Git Commit (for UI Project): "Debug Informative UIs"
   Original File Name: block.css */

html,
body {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.modal-backdrop {
    background-color: transparent !important;
}

.responsive-background {
    background-color: #F8F8F8 !important;
    min-height: 100vh !important;
}

.bg-bottom-navigation {
    background-color: #E6E6E6 !important;
}

.container-raw {
    max-width: 512px;
    min-height: 100vh !important;
}

.container-raw main {
    padding-top: 3rem !important;
}

.container-informative {
    width: 100% !important;
    max-width: 1440px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.container-informative-padding {
    padding-inline: 1.5rem !important;
}

@media (min-width: 992px) and (max-width: 1200px) {
    .container-informative-padding {
        padding-inline: 3rem !important;
    }
}

@media (min-width: 1200px) {
    .container-informative-padding {
        padding-inline: 5rem !important;
    }
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: #D7D8D8 !important;
}


/*
    =======================================
    ====    INFORMATIVE HEADER (NAV BAR)
    =======================================
*/
header.customized {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--bs-light);
    z-index: 99999;
}

@media (min-width: 992px) {
    header.customized {
        border-bottom: 1px solid var(--Gray-Gray100, #FDFDFD);
        background: var(--Gray-Gray100, #FDFDFD);
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05);
    }
}

.customized-navbar {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}

.customized-navbar .app-bar-icon {
    width: 2rem;
    height: 2rem;
    padding-inline: 0;
}


.customized-navbar .navbar-collapse .navbar-nav {
    padding-inline: 0;
}

.dropdown-toggle.customized-dropdown-toggle {
    color: var(--Gray-Gray800, #051214);
}

.dropdown-toggle.customized-dropdown-toggle.show {
    color: var(--bs-primary);
    text-shadow: 0 0 var(--bs-primary-light);
}

.dropdown-toggle.customized-dropdown-toggle::after {
    display: none;
}

.dropdown-toggle.customized-dropdown-toggle:after {
    display: none;
}

.dropdown-toggle.customized-dropdown-toggle i {
    transition: transform 0.3s ease;
    font-size: smaller;
    margin-inline-start: 0.5rem;
}

.dropdown-toggle.customized-dropdown-toggle.show i {
    transform: rotate(180deg);
}

.customized-navbar .navbar-collapse .navbar-nav .nav-item .nav-link:focus {
    outline: none;
    box-shadow: none;
}

.customized-navbar .navbar-collapse .navbar-nav .nav-item .nav-link:focus-visible {
    outline: none;
    box-shadow: none;
}

.customized-navbar .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-menu .dropdown-item:focus,
.dropdown-item:hover {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}

@media (max-width: 992px) {
    .customized-navbar .logo-icon img {
        height: 2rem !important;
    }
}

@media (min-width: 992px) {
    .customized-navbar .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        width: 12.5rem;
    }

    .customized-navbar .logo-icon img {
        height: 2.5rem !important;
    }
}

.customized-navbar .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}


/*
    =======================================
    ====    INFORMATIVE HEADER (SIDE BAR)
    =======================================
*/
#sidebarBackdrop {
    position: fixed;
    top: 3rem;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--Overlay-deactive-overlay, rgba(136, 136, 136, 0.60));
    padding: 0;
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}


#sidebarMenu {
    position: fixed;
    right: -16.25rem;
    height: 100%;
    width: 16.25rem;
    background: var(--Gray-Gray150, #F4F4F4);
    padding-inline: 1.5rem;
    z-index: 99998;
    transition: right 0.3s ease-in-out;
}

/* Active States */
#sidebarMenu.active {
    right: 0 !important;
    /* Slide in */
}

#sidebarBackdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
}


#sidebarToggler a {
    text-decoration: none !important;
}

#sidebarToggler .accordion-item {
    background-color: var(--Gray-Gray150, #F4F4F4);
    border: none !important;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    --bs-accordion-btn-icon-width: 1.5rem !important;
}

#sidebarToggler .accordion-button {
    background-color: var(--Gray-Gray150, #F4F4F4);
    color: var(--bs-black);
    border: none !important;
    padding: 0;
    box-shadow: none;
    font-size: inherit;
    text-align: right;
}

#sidebarToggler .accordion-button::after {
    margin-left: 0;
    margin-right: auto;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTIuMDAyNCAxMi45NDM3TDE2LjYwMjQgOC4zNDM3NUwxNy42NTYyIDkuMzk3NThMMTIuMDAyNCAxNS4wNTE0TDYuMzQ4NiA5LjM5NzU4TDcuNDAyNDIgOC4zNDM3NUwxMi4wMDI0IDEyLjk0MzdaIiBmaWxsPSIjN0Q4Mzg0Ii8+PC9zdmc+');
}

#sidebarToggler .accordion-button:after {
    margin-left: 0;
    margin-right: auto;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTIuMDAyNCAxMi45NDM3TDE2LjYwMjQgOC4zNDM3NUwxNy42NTYyIDkuMzk3NThMMTIuMDAyNCAxNS4wNTE0TDYuMzQ4NiA5LjM5NzU4TDcuNDAyNDIgOC4zNDM3NUwxMi4wMDI0IDEyLjk0MzdaIiBmaWxsPSIjN0Q4Mzg0Ii8+PC9zdmc+');

}

#sidebarToggler .accordion-body {
    padding: 0;
    padding-top: 1rem;
    padding-right: 1rem;
}

#sidebarToggler.show {
    opacity: 1;
    transition: right 0.5s ease-in-out;
}


/*
   ==================================
   ====   INFORMATIVE MAIN CONTENT
   ==================================
*/
@media (min-width: 992px) {
    .informative-main {
        margin-top: 5rem;
        flex-grow: 1 !important;
    }
}

@media (max-width: 992px) {
    .informative-main {
        margin-top: 3rem;
        flex-grow: 1 !important;
    }
}


/*
   ===============================
   ====   FOOTER
   ===============================
*/

.footer-container-padding {
    padding-inline: 0.75rem !important;
}

@media (min-width: 340px) and (max-width: 992px) {
    .footer-container-padding {
        padding-inline: 1.5rem !important;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .footer-container-padding {
        padding-inline: 3rem !important;
    }
}

@media (min-width: 1200px) {
    .footer-container-padding {
        padding-inline: 5rem !important;
    }
}

.footer-img-content {
    max-width: 25%;
    height: 5.3125rem;
    margin: auto;
    padding-inline: 2px;
    text-decoration: none;
}

@media (max-width: 400px) {
    .footer-img-content {
        max-width: 25%;
        height: 4rem;
        margin: auto;
        padding-inline: 2px;
        text-decoration: none;
    }
}

.footer-img-content img {
    max-width: 100%;
    height: 100%;
    width: auto;
}


/*
    ===============================
    ====    HEADER(TOP APP BAR)
    ===============================
*/

header.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 512px;
    margin: auto;
    z-index: 99999;
    height: 3rem;
    padding: 0.5rem 0.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

nav a.app-bar-icon {
    width: 2rem;
    height: 2rem;
    z-index: 999999;
}

nav h1 {
    margin-bottom: 0 !important;
}

.logo-icon img {
    height: 2rem !important;
}

/*
    ===============================
    ====    BOTTOM NAVIGATION BAR
    ===============================
*/

nav.bottom-navbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 512px;
    margin: auto;
    z-index: 999999;
    height: 80px;
}

.nav-link img {
    width: 35px;
    height: 35px;
}

.icon-item .icon-label {
    display: none;
}

.navbar .icon-item.active {
    background-color: var(--bs-primary);
    color: var(--bs-light);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 6.3125rem;
    gap: 0.25rem;
    border-radius: 2.8125rem;
}

.navbar .icon-item.active svg path {
    fill: var(--bs-light);
    /* Change SVG color */
}

.icon-item {
    background-color: transparent;
    color: var(--bs-primary);
    /* رنگ پیش‌فرض آیکن */
    transition: all 0.3s ease;
    position: relative;
}

.icon-item.active .icon-label {
    display: inline-block;
    color: var(--bs-light);
}

/*
    =======================================
    ====    Hiding Horizontal Scrolling
    =======================================
    example:
    <div id="horizontal-scrollable-container" class="horizontal-scrollable-container">

    <script src="assets/js/horizontal-hidden-scrolling.js"></script>
*/
/* مخفی کردن نوار اسکرول */

.horizontal-scrollable-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: scroll;
}

.horizontal-scrollable-container::-webkit-scrollbar {
    display: none;
    /* برای مرورگرهای مبتنی بر WebKit */
}

/*
    ===============================
    ====    BOTTOM SHEET
    ===============================
    example:
        <!-- Open Bottom Sheet -->
        <button type="button" class="show-modal" onclick="transferContentById('id_BottomSheetContent', 'عنوان باتم شیت')">
            Open Bottom Sheet
        </button>

        <!-- Bottom sheet content after clicking "FILTER" -->
        [Change ID to desired one ]
        <div class="d-none" id="id_BottomSheetContent">
            محتوای باتم شیت
        </div>

    * Close the bottom sheet with hideBottomSheet() method.
    *** The BottomSheet Container is available in raw_template
*/

.show-modal {
    outline: none;
    border: none;
    cursor: pointer;
    background: none;
    transition: 0.3s ease;
    border: none;
}

.bottom-sheet {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 512px;
    height: 100%;
    display: flex;
    opacity: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    align-items: end;
    transition: height 0.3s linear;
    z-index: 9999;
}

.bottom-sheet.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    /* Move up to its normal position */
    background: rgba(0, 0, 0, 0.5);
}

.bottom-sheet .sheet-body {
    overflow-y: auto;
    max-height: calc(100vh - 15rem);
    height: 100%;
    margin-top: 4rem;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
    -ms-overflow-style: none;
    /* مخفی کردن نوار اسکرول در Internet Explorer 10+ */
    scrollbar-width: none;
    /* مخفی کردن نوار اسکرول در Firefox */
}

.bottom-sheet .sheet-body::-webkit-scrollbar {
    display: none;
    /* مخفی کردن نوار اسکرول در مرورگرهای Webkit (مثل Chrome, Safari) */
}

.bottom-sheet.show .sheet-content {
    transform: translateY(0%);
    max-width: 512px;
    width: 100%;
    border-radius: 1.75rem 1.75rem 0rem 0rem;
    padding-bottom: 80px;
    /* height of bottom navigation */
}

.bottom-sheet.dragging .sheet-content {
    transition: none;
}

.bottom-sheet.fullscreen .sheet-content {
    visibility: visible;
    bottom: 0;
    /* چسبیدن به پایین صفحه */
}

.sheet-header .drag-icon {
    content: '';
    display: flex;
    width: 100%;
    justify-content: center;
    height: 2rem;
}

.sheet-header .drag-icon .inner-handle {
    content: '';
    display: block;
    width: 2rem;
    /* عرض دیوایدر */
    height: 0.25rem;
    /* ارتفاع دیوایدر */
    background: rgb(125, 131, 132);
    /* رنگ دیوایدر */
    opacity: 0.4;
    border-radius: 2px;
    cursor: pointer;
    /* نشانگر موس تغییر می‌کند */
    margin-top: 1rem;
    /* فاصله از بالا */
    margin-bottom: 1rem;
}

.close-button {
    width: 1.5rem;
    height: 1.5rem;
}


/*
    ===============================================
    ====    PROGRESS BAR (In Making Apointments)
    ===============================================
    example:
        <!-- PROGRESS BAR -->
        <div class="fixed-progress-bar">
            <div class="reservation-progress-bar-container">

                <div class="step completed">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="25" viewBox="0 0 26 25"
                            fill="#FFFFFF">
                            <circle cx="13" cy="12.5" r="11.5" fill="#FFFFFF" stroke-width="2" />
                            <path
                                d="M13.0018 24.5189C11.3394 24.5189 9.7769 24.2035 8.31418 23.5726C6.85144 22.9417 5.57906 22.0855 4.49705 21.0039C3.41502 19.9224 2.55842 18.6506 1.92724 17.1885C1.29606 15.7264 0.980469 14.1642 0.980469 12.5018C0.980469 10.8394 1.29597 9.2769 1.92699 7.81418C2.558 6.35144 3.41437 5.07906 4.4961 3.99705C5.57784 2.91502 6.84987 2.05842 8.31222 1.42724C9.77454 0.79606 11.337 0.480469 12.9997 0.480469C14.3324 0.480469 15.5934 0.68079 16.7827 1.08143C17.9719 1.48207 19.0628 2.04086 20.0555 2.7578L18.6833 4.16165C17.8658 3.59881 16.9803 3.16086 16.0267 2.84779C15.0731 2.53474 14.0641 2.37822 12.9997 2.37822C10.1952 2.37822 7.80717 3.36401 5.83559 5.33559C3.86401 7.30717 2.87822 9.69521 2.87822 12.4997C2.87822 15.3042 3.86401 17.6922 5.83559 19.6638C7.80717 21.6354 10.1952 22.6212 12.9997 22.6212C15.8042 22.6212 18.1922 21.6354 20.1638 19.6638C22.1354 17.6922 23.1212 15.3042 23.1212 12.4997C23.1212 12.0553 23.092 11.6157 23.0336 11.1811C22.9752 10.7464 22.8876 10.3239 22.7708 9.91334L24.3036 8.3684C24.5355 9.01883 24.7128 9.68793 24.8352 10.3757C24.9577 11.0635 25.0189 11.7715 25.0189 12.4997C25.0189 14.1624 24.7035 15.7249 24.0726 17.1872C23.4417 18.6495 22.5855 19.9216 21.5039 21.0033C20.4224 22.085 19.1506 22.9414 17.6885 23.5724C16.2264 24.2034 14.6642 24.5189 13.0018 24.5189ZM11.2041 17.8816L6.26505 12.9425L7.59834 11.6092L11.2041 15.215L23.6856 2.71403L25.0189 4.04731L11.2041 17.8816Z"
                                fill="#8BC53E" />
                        </svg>
                    </div>
                    <div class="title text-label-medium gray-400">
                        ثبت اطلاعات
                    </div>
                </div>

                <div class="step completed">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="25" viewBox="0 0 26 25"
                            fill="#FFFFFF">
                            <circle cx="13" cy="12.5" r="11.5" fill="#FFFFFF" stroke-width="2" />
                            <path
                                d="M13.0018 24.5189C11.3394 24.5189 9.7769 24.2035 8.31418 23.5726C6.85144 22.9417 5.57906 22.0855 4.49705 21.0039C3.41502 19.9224 2.55842 18.6506 1.92724 17.1885C1.29606 15.7264 0.980469 14.1642 0.980469 12.5018C0.980469 10.8394 1.29597 9.2769 1.92699 7.81418C2.558 6.35144 3.41437 5.07906 4.4961 3.99705C5.57784 2.91502 6.84987 2.05842 8.31222 1.42724C9.77454 0.79606 11.337 0.480469 12.9997 0.480469C14.3324 0.480469 15.5934 0.68079 16.7827 1.08143C17.9719 1.48207 19.0628 2.04086 20.0555 2.7578L18.6833 4.16165C17.8658 3.59881 16.9803 3.16086 16.0267 2.84779C15.0731 2.53474 14.0641 2.37822 12.9997 2.37822C10.1952 2.37822 7.80717 3.36401 5.83559 5.33559C3.86401 7.30717 2.87822 9.69521 2.87822 12.4997C2.87822 15.3042 3.86401 17.6922 5.83559 19.6638C7.80717 21.6354 10.1952 22.6212 12.9997 22.6212C15.8042 22.6212 18.1922 21.6354 20.1638 19.6638C22.1354 17.6922 23.1212 15.3042 23.1212 12.4997C23.1212 12.0553 23.092 11.6157 23.0336 11.1811C22.9752 10.7464 22.8876 10.3239 22.7708 9.91334L24.3036 8.3684C24.5355 9.01883 24.7128 9.68793 24.8352 10.3757C24.9577 11.0635 25.0189 11.7715 25.0189 12.4997C25.0189 14.1624 24.7035 15.7249 24.0726 17.1872C23.4417 18.6495 22.5855 19.9216 21.5039 21.0033C20.4224 22.085 19.1506 22.9414 17.6885 23.5724C16.2264 24.2034 14.6642 24.5189 13.0018 24.5189ZM11.2041 17.8816L6.26505 12.9425L7.59834 11.6092L11.2041 15.215L23.6856 2.71403L25.0189 4.04731L11.2041 17.8816Z"
                                fill="#8BC53E" />
                        </svg>
                    </div>
                    <div class="title text-label-medium gray-400">
                        دریافت نوبت
                    </div>
                </div>

                <div class="step completed">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="25" viewBox="0 0 26 25"
                            fill="none">
                            <circle cx="13" cy="12.5" r="11.5" stroke="#8BC53E" fill="#FFFFFF" stroke-width="2" />
                        </svg>
                    </div>
                    <div class="title text-label-medium gray-400">
                        تشکیل پرونده
                    </div>
                </div>

                <div class="step">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="25" viewBox="0 0 26 25"
                            fill="none">
                            <circle cx="12.666" cy="12.5" r="11.5" stroke="#9BA0A0" fill="#FFFFFF"
                                stroke-width="2" />
                        </svg>
                    </div>
                    <div class="title text-label-medium gray-400">
                        پرداخت
                    </div>
                </div>

                <!-- Bar Line-->
                <div class="reservation-progress-bar-line">
                    <div class="progress w-100" role="progressbar" aria-label="Basic example" aria-valuenow="66.6"
                        aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar" style="width: 66.6%"></div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Page Actual Content-->
        <div class="reservation-content mx-4">
            ...
        </div>
*/

.fixed-progress-bar {
    position: fixed;
    max-width: 512px;
    left: 0;
    right: 0;
    top: 3rem;
    margin: auto;
    background-color: var(--bs-light);
    z-index: 10;
}

.reservation-content {
    margin-top: 6.0625rem;
    margin-bottom: 9.0625rem;
    z-index: 5;
}

.reservation-progress-bar-container {
    display: flex;
    flex-direction: row;
    align-items: start;
    margin: 1.5rem 0;
    background-color: var(--bs-light);
    max-width: 100%;
    position: relative;
}

.reservation-progress-bar-container .step {
    text-align: center;
    position: relative;
    z-index: 9999;
    flex: 0 0 auto;
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-inline: 0.1rem;
}

.reservation-progress-bar-container .step.step-3 {
    width: 33.3% !important;
}

.reservation-progress-bar-container .step .title {
    text-align: center;
    justify-content: center;
    color: var(--bs-primary);
}

.reservation-progress-bar-container .step.completed .title {
    color: var(--bs-primary) !important;
}

.reservation-progress-bar-line {
    position: absolute;
    top: 12px;
    width: 100%;
    height: 0.125rem !important;
    z-index: 9998;
    padding: 0 12%;
}

.reservation-progress-bar-line.step-3 {
    padding: 0 15% !important;
}

.reservation-progress-bar-line .progress {
    background-color: #9BA0A0 !important;
    opacity: 1 !important;
    height: 0.125rem !important;
}

.reservation-progress-bar-line .progress .progress-bar {
    background-color: var(--bs-primary) !important;
    height: 0.125rem !important;
}


/*
    ===============================================
    ====    Fixed Button[s] from Bottom
    ===============================================
    USE CASES:
        * Submit Button above Bottom Navigation
*/

.fixed-above-bottom-navigation {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 5rem;
    margin-inline: auto;
    max-width: 512px;
    z-index: 2;
    padding: 1.5rem;
    background-color: var(--bs-light);
}