.namik-jalali-host {
    position: relative;
}

.namik-jalali-picker {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 6px);
    z-index: 1000;
    width: min(290px, calc(100vw - 40px));
    padding: 12px;
    border: 1px solid rgba(120, 12, 35, .15);
    border-radius: 16px 6px 16px 6px;
    direction: rtl;
    color: #241318;
    background: #fffaf7;
    box-shadow: 0 18px 45px rgba(52, 18, 20, .18);
}

.namik-jalali-picker__header,
.namik-jalali-picker__weekdays,
.namik-jalali-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: center;
    gap: 4px;
    text-align: center;
}

.namik-jalali-picker__header {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    margin-bottom: 10px;
}

.namik-jalali-picker__header strong {
    font-size: .88rem;
    white-space: nowrap;
}

.namik-jalali-picker__header button,
.namik-jalali-picker__grid button {
    display: grid;
    min-width: 32px;
    min-height: 36px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.namik-jalali-picker__header button {
    color: #8e0d2b;
    border: 1px solid rgba(142, 13, 43, .12);
    background: #fff;
    font-size: 1.4rem;
}

.namik-jalali-picker__header button:hover,
.namik-jalali-picker__header button:focus-visible,
.namik-jalali-picker__grid button:hover,
.namik-jalali-picker__grid button:focus-visible,
.namik-jalali-picker__grid button.is-selected {
    color: #fff;
    outline: none;
    background: #8e0d2b;
}

.namik-jalali-picker__grid button.is-today:not(.is-selected) {
    color: #8e0d2b;
    box-shadow: inset 0 0 0 1px #8e0d2b;
}

.namik-jalali-picker__weekdays {
    margin-bottom: 4px;
    color: #8e0d2b;
    font-size: .78rem;
}

@media (max-width: 480px) {
    .namik-jalali-picker {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }
}