/**
 * Base theme for the Jalali (Shamsi) calendar popup produced by
 * jalali-datepicker.js (a self-contained fork of jQuery UI Datepicker 1.8.14
 * that keeps the classic "ui-datepicker-*" markup/classes).
 *
 * Gravity Forms 3.0 no longer ships a matching jQuery UI Datepicker theme
 * (its own calendar uses a different, unrelated markup/CSS), so without this
 * file the popup renders as an unstyled table. This stylesheet is
 * self-contained (no image sprites) and RTL-first.
 */

#ui-datepicker-div,
.ui-datepicker {
    z-index: 9999;
    direction: rtl;
    text-align: right;
    width: 17.5em;
    padding: 0 0 .4em;
    display: none;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.6;
    background: #fff;
    border: 1px solid #e1e1e8;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 33, 116, .15);
    overflow: hidden;
}

.ui-datepicker * {
    box-sizing: border-box;
}

.ui-datepicker table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

/* Header: month/year + prev/next navigation */
.ui-datepicker-header {
    position: relative;
    background: #1f2174;
    color: #fff;
    padding: .6em 2.4em;
    text-align: center;
}

.ui-datepicker-title {
    font-weight: 700;
    line-height: 1.8em;
}

.ui-datepicker-title select {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 4px;
    padding: .1em .3em;
    margin: 0 .2em;
    font-size: 12px;
}

.ui-datepicker-title select option {
    color: #1f2174;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    position: absolute;
    top: .4em;
    width: 1.9em;
    height: 1.9em;
    line-height: 1.9em;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color .15s ease;
}

/*
 * This picker is always used RTL (Persian). "prev" (earlier month) sits at
 * the visual right (the RTL start edge), "next" (later month) at the left,
 * with arrow glyphs pointing toward the edge each button is docked to.
 */
.ui-datepicker-prev { right: .3em; }
.ui-datepicker-next { left: .3em; }

.ui-datepicker-prev span,
.ui-datepicker-next span {
    display: none;
}

.ui-datepicker-prev:before,
.ui-datepicker-next:before {
    font-family: inherit;
    font-size: 14px;
}

.ui-datepicker-prev:before { content: "\203A"; }
.ui-datepicker-next:before { content: "\2039"; }

.ui-datepicker-prev-hover,
.ui-datepicker-next-hover {
    background: rgba(255, 255, 255, .18);
}

.ui-datepicker-unselectable {
    cursor: default;
}

/* Calendar grid */
.ui-datepicker-calendar {
    table-layout: fixed;
}

.ui-datepicker-calendar th {
    padding: .6em 0 .3em;
    color: #8a8ba3;
    font-weight: 600;
    font-size: 11px;
    text-align: center;
}

/*
 * jalali-datepicker.js's own "week-end" class always marks Saturday/Sunday
 * (it's hardcoded to that regardless of the firstDay option) - that's the
 * Western weekend, not Iran's. Cancel it here and highlight Friday instead:
 * with firstDay:6 (week starts Saturday, set in init-datepicker-fa.js),
 * Friday always lands in the last (7th) column of every week row, so
 * :nth-child(7) reliably targets it without touching the picker's JS.
 */
.ui-datepicker-calendar th.ui-datepicker-week-end {
    color: #8a8ba3;
}

.ui-datepicker-calendar th:nth-child(7) {
    color: #c0392b;
}

.ui-datepicker-calendar td {
    padding: 1px;
    text-align: center;
}

.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
    display: block;
    width: 2.1em;
    height: 2.1em;
    line-height: 2.1em;
    margin: 1px auto;
    border-radius: 50%;
    color: #333;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.ui-datepicker-calendar td:nth-child(7) a,
.ui-datepicker-calendar td:nth-child(7) span {
    color: #c0392b;
}

.ui-datepicker-calendar td a:hover,
.ui-datepicker-calendar td .ui-state-hover {
    background: #eceafb;
    color: #1f2174;
}

.ui-datepicker-calendar td.ui-datepicker-today a {
    border: 1px solid #1f2174;
}

.ui-datepicker-calendar td a.ui-state-active,
.ui-datepicker-calendar td.ui-datepicker-current-day a {
    background: #1f2174;
    color: #fff;
}

.ui-datepicker-calendar td.ui-datepicker-other-month a,
.ui-datepicker-calendar td.ui-datepicker-other-month span {
    color: #c9c9d6;
}

.ui-datepicker-calendar td .ui-state-disabled,
.ui-datepicker-calendar td.ui-datepicker-unselectable span {
    color: #ddd;
    background: none;
}

/*
 * Today / Close buttons row. The close button is rendered first in the
 * markup (RTL), so it floats to the left edge; "Today" floats to the right.
 */
.ui-datepicker-buttonpane {
    padding: .5em .8em 0;
    overflow: hidden;
    border-top: 1px solid #eee;
    margin-top: .4em;
}

.ui-datepicker-buttonpane button {
    float: left;
    margin: 0 .5em 0 0;
    padding: .35em .9em;
    border: 1px solid #d7d7e2;
    border-radius: 5px;
    background: #f7f7fb;
    color: #1f2174;
    font-size: 12px;
    cursor: pointer;
}

.ui-datepicker-buttonpane button:hover {
    background: #eceafb;
}

.ui-datepicker-buttonpane button.ui-datepicker-current {
    float: right;
    margin: 0 0 0 .5em;
    background: #1f2174;
    color: #fff;
    border-color: #1f2174;
}

.ui-datepicker-buttonpane button.ui-datepicker-current:hover {
    background: #171a5c;
}