/* =========================================
   Persian Datepicker - Modern Compact Theme
   ========================================= */

jdp-overlay {
    width: 0;
    height: 0;
}

@media only screen and (max-width: 481px) {
    jdp-overlay {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(15, 23, 42, 0.35);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        display: none;
        z-index: 9998;
    }
}

/* Main Calendar */
jdp-container {
    position: absolute;
    width: 292px;
    min-width: 292px;
    max-width: 292px;
    background: #ffffff;
    display: none;
    direction: rtl;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12), 0 3px 8px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    font-family: Vazirmatn, Vazir, Tahoma, Arial, sans-serif;
    color: #334155;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    animation: jdpOpenAnimation 220ms ease-out;
    z-index: 9999;
}

    /* Box sizing */
    jdp-container,
    jdp-container *,
    jdp-container *::after,
    jdp-container *::before {
        box-sizing: border-box;
    }


        /* =========================================
   Header - Month / Year
   ========================================= */

        jdp-container .jdp-months,
        jdp-container .jdp-years {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin: 0;
            font-size: 14px;
            font-weight: 600;
            color: #1e293b;
        }

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

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

        jdp-container .jdp-year,
        jdp-container .jdp-month,
        jdp-container .jdp-time {
            background: #f8fafc;
            border: 1px solid #eef2f7;
            border-radius: 8px;
            padding: 2px;
            transition: all 0.15s ease;
        }

            jdp-container .jdp-year:hover,
            jdp-container .jdp-month:hover,
            jdp-container .jdp-time:hover {
                background: #f1f5f9;
                border-color: #e2e8f0;
            }

            jdp-container .jdp-year input,
            jdp-container .jdp-year select,
            jdp-container .jdp-month input,
            jdp-container .jdp-month select,
            jdp-container .jdp-time input,
            jdp-container .jdp-time select {
                width: 100%;
                height: 32px;
                padding: 4px 6px;
                margin: 0;
                border: none;
                outline: none;
                background: transparent;
                text-align: center;
                font-family: inherit;
                font-size: 13px;
                font-weight: 600;
                color: #334155;
                cursor: pointer;
            }


        /* =========================================
   Plus / Minus Buttons
   ========================================= */

        jdp-container .jdp-icon-plus,
        jdp-container .jdp-icon-minus {
            display: inline-flex;
            width: 30px;
            height: 30px;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #f8fafc;
            transition: all 0.15s ease;
        }

            jdp-container .jdp-icon-plus:hover,
            jdp-container .jdp-icon-minus:hover {
                background: #eff6ff;
                border-color: #bfdbfe;
                transform: none;
            }

            jdp-container .jdp-icon-plus svg,
            jdp-container .jdp-icon-minus svg {
                width: 17px;
                height: 17px;
                padding: 3px;
                fill: #475569;
            }

            jdp-container .jdp-icon-plus.not-in-range,
            jdp-container .jdp-icon-minus.not-in-range {
                opacity: 0.35;
                cursor: not-allowed;
            }


        /* =========================================
   Days Area
   ========================================= */

        jdp-container .jdp-days {
            width: 100%;
            padding: 8px 0 4px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1px;
            text-align: center;
            outline: none;
        }


        /* Day + Day Name */
        jdp-container .jdp-day,
        jdp-container .jdp-day-name {
            width: 34px;
            height: 34px;
            margin: 1px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 9px;
            border: none;
            background: transparent;
            color: #334155;
            font-size: 13px;
            transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
        }


        /* Week Days */
        jdp-container .jdp-day-name {
            height: 27px;
            font-size: 11px;
            font-weight: 700;
            color: #94a3b8;
            cursor: default;
        }


        /* Today */
        jdp-container .jdp-day.today {
            border: 1.5px solid #3b82f6;
            color: #2563eb;
            font-weight: 700;
            background: #eff6ff;
        }


        /* Selected */
        jdp-container .jdp-day.selected {
            background: #2563eb !important;
            color: #ffffff !important;
            font-weight: 700;
            box-shadow: 0 3px 7px rgba(37, 99, 235, 0.22);
        }


        /* Holiday */
        jdp-container .jdp-day.last-week,
        jdp-container .jdp-day.holly-day {
            color: #ef4444;
            font-weight: 600;
        }


        /* Other Month */
        jdp-container .jdp-day.not-in-month {
            opacity: 0.25;
            color: #94a3b8;
        }


        /* Disabled */
        jdp-container .jdp-day.disabled-day {
            opacity: 0.18;
            cursor: not-allowed;
            background: transparent;
        }


        /* Hover */
        jdp-container .jdp-day:not(.disabled-day) {
            cursor: pointer;
        }

            jdp-container .jdp-day:not(.disabled-day):hover {
                background: #f1f5f9;
                color: #2563eb;
                transform: scale(1.05);
            }


        /* Selected hover */
        jdp-container .jdp-day.selected:hover {
            background: #1d4ed8 !important;
            color: #fff !important;
        }


        /* =========================================
   Footer
   ========================================= */

        jdp-container .jdp-footer {
            width: 100%;
            display: flex;
            gap: 6px;
            padding: 9px 0 0;
            margin-top: 5px;
            border-top: 1px solid #eef2f7;
            outline: none;
        }


        /* Footer Buttons */
        jdp-container .jdp-btn-today,
        jdp-container .jdp-btn-empty,
        jdp-container .jdp-btn-close {
            flex: 1;
            min-height: 34px;
            padding: 6px 8px;
            border-radius: 8px;
            font-family: inherit;
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s ease;
        }


        /* Today */
        jdp-container .jdp-btn-today {
            background: #2563eb;
            color: #ffffff;
            border: 1px solid #2563eb;
            box-shadow: 0 3px 6px rgba(37, 99, 235, 0.18);
        }

            jdp-container .jdp-btn-today:hover {
                background: #1d4ed8;
            }


        /* Empty */
        jdp-container .jdp-btn-empty {
            background: #ffffff;
            color: #64748b;
            border: 1px solid #e2e8f0;
        }

            jdp-container .jdp-btn-empty:hover {
                background: #f8fafc;
                color: #334155;
            }


        /* Close */
        jdp-container .jdp-btn-close {
            background: #f8fafc;
            color: #475569;
            border: 1px solid #e2e8f0;
        }

            jdp-container .jdp-btn-close:hover {
                background: #f1f5f9;
            }


            /* Disabled Buttons */
            jdp-container .jdp-btn-today.disabled-btn,
            jdp-container .jdp-btn-empty.disabled-btn,
            jdp-container .jdp-btn-close.disabled-btn {
                opacity: 0.3;
                cursor: not-allowed;
                pointer-events: none;
            }


        /* =========================================
   Time Picker
   ========================================= */

        jdp-container .jdp-time-container {
            display: flex;
            gap: 10px;
            padding: 7px 0;
            justify-content: center;
            align-items: center;
        }

            jdp-container .jdp-time-container .jdp-time {
                flex: 1;
                position: relative;
                max-width: 72px;
            }

                jdp-container .jdp-time-container .jdp-time select {
                    height: 38px;
                    padding: 5px 8px;
                    background: #f8fafc;
                    border: 1px solid #e2e8f0;
                    border-radius: 9px;
                    font-size: 13px;
                    font-weight: 600;
                    text-align: center;
                    cursor: pointer;
                    width: 100%;
                    appearance: none;
                    -webkit-appearance: none;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364758b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-position: left 6px center;
                    background-size: 14px;
                }

                jdp-container .jdp-time-container .jdp-time:first-child select {
                    background-position: right 6px center;
                }

                jdp-container .jdp-time-container .jdp-time:after {
                    content: ":";
                    position: absolute;
                    left: -8px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-size: 17px;
                    color: #94a3b8;
                    font-weight: 700;
                }

                jdp-container .jdp-time-container .jdp-time:first-child:after {
                    display: none;
                }


            /* Only Time */
            jdp-container .jdp-time-container.jdp-only-time {
                padding: 10px 0;
            }

                jdp-container .jdp-time-container.jdp-only-time .jdp-time select {
                    height: 42px;
                    padding: 7px;
                    font-size: 16px;
                    font-weight: 700;
                    color: #1e293b;
                }


        /* =========================================
   RTL
   ========================================= */

        jdp-container[direction="rtl"]
        .jdp-time-container
        .jdp-time
        select {
            background-position: right 6px center;
        }

        jdp-container[direction="rtl"]
        .jdp-time-container
        .jdp-time:after {
            right: -8px;
            left: auto;
        }

        jdp-container[direction="rtl"]
        .jdp-time-container
        .jdp-time:first-child:after {
            display: none;
        }


/* =========================================
   Animation
   ========================================= */

@keyframes jdpOpenAnimation {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-6px);
    }

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


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

@media only screen and (max-width: 481px) {

    jdp-container {
        width: 100%;
        max-width: 100%;
        min-width: 280px;
        left: 50% !important;
        bottom: 0 !important;
        top: unset !important;
        transform: translateX(-50%) !important;
        border-radius: 20px 20px 0 0;
        padding: 14px 12px 18px;
        box-shadow: 0 -5px 20px rgba(15, 23, 42, 0.12);
        animation: jdpOpenAnimationMobile 250ms ease-out;
    }

        jdp-container .jdp-day,
        jdp-container .jdp-day-name {
            width: 38px;
            height: 38px;
        }

        jdp-container .jdp-footer {
            margin-top: 7px;
            padding-top: 9px;
        }

        jdp-container .jdp-btn-today,
        jdp-container .jdp-btn-empty,
        jdp-container .jdp-btn-close {
            min-height: 40px;
            font-size: 13px;
        }
}


@keyframes jdpOpenAnimationMobile {

    from {
        transform: translateX(-50%) translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}