/* OPO200 Date Module V8
   Exact UX:
   [ DD/MM/YYYY ][ calendar icon ]
   Calendar icon opens a small date picker popup. */

.opo8-date-field {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.opo8-date-input {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    box-sizing: border-box !important;
    direction: ltr !important;
    padding-inline-end: 48px !important;
}

html[dir="rtl"] .opo8-date-input {
    text-align: right;
}

.opo8-calendar-button {
    position: absolute !important;
    z-index: 10 !important;
    inset-inline-end: 7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: currentColor !important;
    cursor: pointer !important;
}

.opo8-calendar-button:hover {
    background: rgba(37, 99, 235, .10) !important;
}

.opo8-calendar-button:disabled {
    opacity: .35 !important;
    cursor: not-allowed !important;
}

.opo8-calendar-button svg {
    width: 19px !important;
    height: 19px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.opo8-popup {
    position: fixed !important;
    z-index: 2147483000 !important;
    width: 320px;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    background: #ffffff;
    color: #172033;
    box-shadow: 0 18px 55px rgba(15, 23, 42, .22);
    direction: rtl;
    font-family: Arial, sans-serif;
}

.opo8-popup[hidden] {
    display: none !important;
}

.opo8-popup-header {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.opo8-nav {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #d8e0ec;
    border-radius: 9px;
    background: #f8fafc;
    color: #172033;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.opo8-month {
    text-align: center;
    font-size: 15px;
    font-weight: 800;
}

.opo8-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.opo8-weekday {
    padding: 4px;
    text-align: center;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.opo8-spacer {
    height: 34px;
}

.opo8-day {
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #172033;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.opo8-day:hover {
    background: #e8f1ff;
}

.opo8-day.is-today {
    box-shadow: inset 0 0 0 1px #2563eb;
}

.opo8-day.is-selected {
    background: #2563eb;
    color: #ffffff;
    font-weight: 900;
}

.opo8-day:disabled {
    opacity: .28;
    cursor: not-allowed;
}

.opo8-footer {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}

.opo8-today {
    padding: 8px 18px;
    border: 0;
    border-radius: 9px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

html.dark-mode .opo8-popup,
body.dark .opo8-popup,
[data-theme="dark"] .opo8-popup {
    border-color: #334155;
    background: #101827;
    color: #e5edf8;
}

html.dark-mode .opo8-nav,
body.dark .opo8-nav,
[data-theme="dark"] .opo8-nav {
    border-color: #334155;
    background: #182338;
    color: #e5edf8;
}

html.dark-mode .opo8-day,
body.dark .opo8-day,
[data-theme="dark"] .opo8-day {
    color: #e5edf8;
}

html.dark-mode .opo8-day:hover,
body.dark .opo8-day:hover,
[data-theme="dark"] .opo8-day:hover {
    background: #1e3a5f;
}