/* ================================================================
   استایل‌های جلالی دیت‌پیکر با متغیرهای سفارشی
   فقط رنگ‌ها با متغیرهای :root جایگزین شده‌اند
   ================================================================ */

/* ==================== 1. استایل اوورلی (پس‌زمینه محو) ==================== */
/* حالت عادی: مخفی و بدون ابعاد */
jdp-overlay {
    height: 0;
    width: 0;
}

/* حالت موبایل: اوورلی تمام صفحه با تاری */
@media only screen and (max-width:481px) {
    jdp-overlay {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        background-color: var(--dark-color); /* رنگ پس‌زمینه از متغیر */
        display: none;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
    }
}

/* ==================== 2. کانتینر اصلی تقویم ==================== */
jdp-container {
    /* انیمیشن باز شدن */
    -moz-animation: jdpOpenAnimation .3s cubic-bezier(.23,1,.32,1);
    -webkit-animation: jdpOpenAnimation .3s cubic-bezier(.23,1,.32,1);
    animation: jdpOpenAnimation .3s cubic-bezier(.23,1,.32,1);
    /* رنگ‌ها */
    background: var(--dark-color); /* پس‌زمینه از متغیر */
    /* ظاهر */
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.24);
    direction: rtl;
    display: none;
    max-width: 307.875px;
    min-width: 307.875px;
    overflow: hidden;
    padding: .5rem 0;
    position: absolute;
    /* تعامل با کاربر */
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* حالت موبایل: کانتینر در پایین صفحه */
@media only screen and (max-width:481px) {
    jdp-container {
        -moz-animation: jdpOpenAnimationMobile .3s cubic-bezier(.23,1,.32,1);
        -webkit-animation: jdpOpenAnimationMobile .3s cubic-bezier(.23,1,.32,1);
        animation: jdpOpenAnimationMobile .3s cubic-bezier(.23,1,.32,1);
        border-radius: 4px 4px 0 0;
        bottom: 0 !important;
        left: 50% !important;
        max-width: 100%;
        min-width: 280px;
        top: unset !important;
        transform: translateX(-50%) !important;
        width: 100%;
    }
}

/* ==================== 3. باکس‌سایزینگ ==================== */
/* اعمال box-sizing به همه عناصر داخل کانتینر */
jdp-container,
jdp-container *,
jdp-container :after,
jdp-container :before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    /* ==================== 4. دکمه‌های + و - (تغییر ماه/سال) ==================== */
    jdp-container .jdp-icon-minus,
    jdp-container .jdp-icon-plus {
        border: 1px solid var(--mid-color); /* حاشیه از متغیر */
        border-radius: 4px;
        cursor: pointer;
        display: inline-block;
        flex: none;
        overflow: hidden;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
    }

        /* آیکون‌های داخل دکمه‌ها */
        jdp-container .jdp-icon-minus svg,
        jdp-container .jdp-icon-plus svg {
            height: 1.5rem;
            padding: .25rem;
            vertical-align: middle;
            width: 1.5rem;
            fill: var(--text-color); /* رنگ آیکون از متغیر */
        }

        /* حالت غیرفعال دکمه‌ها */
        jdp-container .jdp-icon-minus.not-in-range,
        jdp-container .jdp-icon-plus.not-in-range {
            cursor: not-allowed;
        }

            jdp-container .jdp-icon-minus.not-in-range svg,
            jdp-container .jdp-icon-plus.not-in-range svg {
                opacity: .3;
            }

    /* ==================== 5. بخش انتخاب ماه و سال ==================== */
    jdp-container .jdp-months,
    jdp-container .jdp-years {
        fill: var(--text-color); /* رنگ از متغیر */
        color: var(--text-color); /* رنگ از متغیر */
        display: -webkit-inline-box;
        display: -webkit-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        font-size: 120%;
        margin: 0 2.5%;
    }

    jdp-container .jdp-months {
        width: 50%;
    }

    jdp-container .jdp-years {
        width: 40%;
    }

    /* ==================== 6. فیلدهای انتخاب ماه، سال و زمان ==================== */
    jdp-container .jdp-month,
    jdp-container .jdp-month input,
    jdp-container .jdp-month select,
    jdp-container .jdp-time,
    jdp-container .jdp-time input,
    jdp-container .jdp-time select,
    jdp-container .jdp-year,
    jdp-container .jdp-year input,
    jdp-container .jdp-year select {
        background: var(--darker-color); /* پس‌زمینه از متغیر */
        border: none;
        border-radius: 0;
        color: var(--text-color); /* رنگ متن از متغیر */
        display: inline-block;
        font-family: inherit;
        font-size: inherit;
        font-weight: 300;
        height: auto;
        line-height: inherit;
        margin: 0;
        outline: none;
        padding: 0;
        text-align: center;
        vertical-align: initial;
        width: 100%;
    }

        /* حذف اوتلاین در حالت فوکوس */
        jdp-container .jdp-month:active,
        jdp-container .jdp-month:focus,
        jdp-container .jdp-month input:active,
        jdp-container .jdp-month input:focus,
        jdp-container .jdp-month select:active,
        jdp-container .jdp-month select:focus,
        jdp-container .jdp-time:active,
        jdp-container .jdp-time:focus,
        jdp-container .jdp-time input:active,
        jdp-container .jdp-time input:focus,
        jdp-container .jdp-time select:active,
        jdp-container .jdp-time select:focus,
        jdp-container .jdp-year:active,
        jdp-container .jdp-year:focus,
        jdp-container .jdp-year input:active,
        jdp-container .jdp-year input:focus,
        jdp-container .jdp-year select:active,
        jdp-container .jdp-year select:focus {
            outline: none;
        }

        /* استایل گزینه‌های سلکت‌ها */
        jdp-container .jdp-month input option,
        jdp-container .jdp-month option,
        jdp-container .jdp-month select option,
        jdp-container .jdp-time input option,
        jdp-container .jdp-time option,
        jdp-container .jdp-time select option,
        jdp-container .jdp-year input option,
        jdp-container .jdp-year option,
        jdp-container .jdp-year select option {
            font-size: 95%;
            min-height: 1.3rem;
            outline: none;
            padding: 0;
            background: var(--darker-color); /* پس‌زمینه از متغیر */
            color: var(--text-color); /* رنگ متن از متغیر */
        }

        /* هاور روی سلکت‌ها */
        jdp-container .jdp-month:hover,
        jdp-container .jdp-time:hover,
        jdp-container .jdp-year:hover {
            filter: brightness(.9);
        }

        /* استایل اینپوت‌های عددی */
        jdp-container .jdp-month input,
        jdp-container .jdp-time input,
        jdp-container .jdp-year input {
            -webkit-appearance: none;
            -moz-appearance: textfield;
            cursor: text;
        }

            /* حذف دکمه‌های اسپینر در مرورگرهای وب‌کیت */
            jdp-container .jdp-month input::-webkit-inner-spin-button,
            jdp-container .jdp-month input::-webkit-outer-spin-button,
            jdp-container .jdp-time input::-webkit-inner-spin-button,
            jdp-container .jdp-time input::-webkit-outer-spin-button,
            jdp-container .jdp-year input::-webkit-inner-spin-button,
            jdp-container .jdp-year input::-webkit-outer-spin-button {
                -webkit-appearance: none;
            }

        /* استایل سلکت‌ها */
        jdp-container .jdp-month select,
        jdp-container .jdp-time select,
        jdp-container .jdp-year select {
            -webkit-appearance: menulist;
            -moz-appearance: menulist;
            cursor: pointer;
            position: relative;
        }

    /* ==================== 7. جدول روزهای ماه ==================== */
    jdp-container .jdp-days {
        -ms-flex-pack: justify;
        display: inline-block;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        justify-content: space-around;
        outline: 0;
        padding: .5rem 0 0;
        text-align: left;
        width: 100%;
    }

    /* ==================== 8. سلول‌های روزها و نام روزها ==================== */
    jdp-container .jdp-day,
    jdp-container .jdp-day-name {
        background: none;
        border: 1px solid transparent;
        color: var(--text-color); /* رنگ متن از متغیر */
        display: inline-block;
        flex-basis: 14.2857143%;
        font-weight: 400;
        height: 31px;
        justify-content: center;
        line-height: 31px;
        margin: 2px 0;
        position: relative;
        text-align: center;
        width: 14.2857143%;
    }

        /* ==================== 9. روز امروز ==================== */
        jdp-container .jdp-day-name.today,
        jdp-container .jdp-day.today {
            border-color: var(--light-color); /* رنگ حاشیه از متغیر */
        }

        /* ==================== 10. روز انتخاب شده ==================== */
        jdp-container .jdp-day-name.selected,
        jdp-container .jdp-day.selected {
            background-color: var(--light-color) !important; /* پس‌زمینه از متغیر */
            color: var(--darker-color) !important; /* رنگ متن از متغیر */
            opacity: 1 !important;
        }

        /* ==================== 11. روزهای تعطیل ==================== */
        jdp-container .jdp-day-name.holly-day,
        jdp-container .jdp-day-name.last-week,
        jdp-container .jdp-day.holly-day,
        jdp-container .jdp-day.last-week {
            color: var(--error-color); /* رنگ از متغیر */
        }

        /* ==================== 12. روزهای ماه قبل/بعد ==================== */
        jdp-container .jdp-day.not-in-month {
            opacity: .4;
        }

        /* ==================== 13. روزهای غیرفعال ==================== */
        jdp-container .jdp-day.disabled-day {
            cursor: not-allowed;
            opacity: .15;
        }

        /* ==================== 14. هاور روی روزها ==================== */
        jdp-container .jdp-day:not(.disabled-day) {
            border-radius: 4px;
            cursor: pointer;
            transition: .1s linear;
        }

            jdp-container .jdp-day:not(.disabled-day):hover {
                background: var(--mid-color); /* پس‌زمینه از متغیر */
                transform: scale(1.15);
                z-index: 1;
            }

    /* ==================== 15. نام روزهای هفته (ردیف بالایی) ==================== */
    jdp-container .jdp-day-name {
        background-color: var(--darker-color); /* پس‌زمینه از متغیر */
        border-radius: 0;
        cursor: default;
        font-size: 90%;
        font-weight: 900;
        color: var(--light-color); /* رنگ متن از متغیر */
    }

    /* ==================== 16. فوتر (دکمه‌های پایین) ==================== */
    jdp-container .jdp-footer {
        -ms-flex-pack: justify;
        display: inline-block;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        justify-content: space-between;
        outline: 0;
        padding: .5rem .5rem 0;
        width: 100%;
        border-top: 1px solid var(--mid-color); /* حاشیه از متغیر */
    }

/* حالت موبایل: فاصله بیشتر */
@media only screen and (max-width:481px) {
    jdp-container .jdp-footer {
        margin: .5rem 0;
    }
}

/* ==================== 17. دکمه‌های امروز، خالی، بستن ==================== */
jdp-container .jdp-btn-close,
jdp-container .jdp-btn-empty,
jdp-container .jdp-btn-today {
    background: var(--light-color); /* پس‌زمینه از متغیر */
    border-radius: 5px;
    color: var(--darker-color); /* رنگ متن از متغیر */
    cursor: pointer;
    display: inline-block;
    font-size: 90%;
    font-weight: 400;
    padding: .3em .6em;
    text-align: center;
}

/* حالت موبایل: دکمه‌ها بزرگ‌تر */
@media only screen and (max-width:481px) {
    jdp-container .jdp-btn-close,
    jdp-container .jdp-btn-empty,
    jdp-container .jdp-btn-today {
        font-size: 100%;
        padding: .5em .8em;
    }
}

/* دکمه‌های غیرفعال */
jdp-container .jdp-btn-close.disabled-btn,
jdp-container .jdp-btn-empty.disabled-btn,
jdp-container .jdp-btn-today.disabled-btn {
    cursor: not-allowed;
    opacity: .2;
}

/* فاصله دکمه‌ها در موبایل */
@media only screen and (max-width:481px) {
    jdp-container .jdp-btn-today ~ .jdp-btn-empty {
        margin-left: auto;
        margin-right: 1em;
    }
}

/* ==================== 18. بخش انتخاب زمان (ساعت و دقیقه) ==================== */
jdp-container .jdp-time-container {
    display: flex;
    padding: 0;
    border-top: 1px solid var(--mid-color); /* حاشیه از متغیر */
}

    jdp-container .jdp-time-container .jdp-time {
        flex: auto;
        margin: 0 .5rem;
        position: relative;
    }

        /* سلکت‌های زمان */
        jdp-container .jdp-time-container .jdp-time select {
            background: var(--darker-color); /* پس‌زمینه از متغیر */
            border-radius: 5px;
            padding: .5rem 1rem .5rem 7px;
            color: var(--text-color); /* رنگ متن از متغیر */
            border: 1px solid var(--mid-color); /* حاشیه از متغیر */
        }

            /* گزینه‌های سلکت زمان */
            jdp-container .jdp-time-container .jdp-time select option {
                background: var(--darker-color); /* پس‌زمینه از متغیر */
                color: var(--text-color); /* رنگ متن از متغیر */
            }

                /* گزینه انتخاب شده در زمان */
                jdp-container .jdp-time-container .jdp-time select option:checked {
                    background: var(--light-color); /* پس‌زمینه از متغیر */
                    color: var(--darker-color); /* رنگ متن از متغیر */
                }

        /* جداکننده : بین ساعت و دقیقه */
        jdp-container .jdp-time-container .jdp-time:after {
            content: ":";
            font-size: 1.5rem;
            height: 100%;
            position: absolute;
            right: -.7rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-color); /* رنگ از متغیر */
        }

        /* حذف جداکننده برای اولین عنصر (ساعت) */
        jdp-container .jdp-time-container .jdp-time:first-child:after {
            display: none;
        }

    /* حالت فقط زمان (بدون تاریخ) */
    jdp-container .jdp-time-container.jdp-only-time .jdp-time select {
        font-size: 1.5rem;
        padding: .8rem 1rem .8rem 7px;
    }

    jdp-container .jdp-time-container.jdp-only-time .jdp-time:after {
        font-size: 2.3rem;
        position: absolute;
        right: -.8rem;
    }

/* ==================== 19. انیمیشن‌ها ==================== */

/* انیمیشن باز شدن در دسکتاپ */
@-webkit-keyframes jdpOpenAnimation {
    0% {
        opacity: 0;
        transform: scale(.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes jdpOpenAnimation {
    0% {
        opacity: 0;
        transform: scale(.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* انیمیشن باز شدن در موبایل (از پایین صفحه) */
@-webkit-keyframes jdpOpenAnimationMobile {
    0% {
        bottom: -10%;
        opacity: 0;
    }

    to {
        bottom: 0;
        opacity: 1;
    }
}

@keyframes jdpOpenAnimationMobile {
    0% {
        margin-bottom: -20%;
        opacity: 0;
    }

    to {
        margin-bottom: 0;
        opacity: 1;
    }
}