/* Datepicker styling for rental period selection */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    color: var(--theme-color, #1f6fb2) !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::before,
.ui-datepicker .ui-datepicker-next::after {
    content: none !important;
    display: none !important;
}

.ui-datepicker .ui-datepicker-prev span.ui-icon,
.ui-datepicker .ui-datepicker-next span.ui-icon {
    background-image: none !important;
    background: none !important;
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    color: var(--theme-color, #1f6fb2) !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    text-indent: 0 !important;
    overflow: visible !important;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
    font-family: inherit !important;
}

/* Porto calendar.css draws orange triangles via borders directly on span elements */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    background-image: none !important;
    background: none !important;
    border: 0 !important;
    color: var(--theme-color, #1f6fb2) !important;
    font-size: 18px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    text-indent: 0 !important;
    overflow: visible !important;
}

/* Porto/theme often injects arrow icons via pseudo-elements on the ui-icon class */
.ui-datepicker .ui-datepicker-prev span.ui-icon::before,
.ui-datepicker .ui-datepicker-prev span.ui-icon::after,
.ui-datepicker .ui-datepicker-next span.ui-icon::before,
.ui-datepicker .ui-datepicker-next span.ui-icon::after,
.ui-datepicker .ui-icon-circle-triangle-w::before,
.ui-datepicker .ui-icon-circle-triangle-w::after,
.ui-datepicker .ui-icon-circle-triangle-e::before,
.ui-datepicker .ui-icon-circle-triangle-e::after {
    content: none !important;
    display: none !important;
}

.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-active:hover,
.ui-datepicker td .ui-state-active:focus {
    background: var(--theme-color, #1f6fb2) !important;
    border-color: var(--theme-color, #1f6fb2) !important;
    color: #fff !important;
}

.ui-datepicker td.odd-mietartikel-date-in-range a,
.ui-datepicker td.odd-mietartikel-date-in-range a:hover,
.ui-datepicker td.odd-mietartikel-date-in-range a:focus {
    background: color-mix(in srgb, var(--theme-color, #1f6fb2) 18%, white) !important;
    border-color: color-mix(in srgb, var(--theme-color, #1f6fb2) 28%, white) !important;
    color: var(--theme-color, #1f6fb2) !important;
}

.ui-datepicker td.odd-mietartikel-date-disabled span,
.ui-datepicker td.odd-mietartikel-date-disabled .ui-state-default {
    opacity: 0.55;
}

.odd-mietartikel-return-label-notice {
    margin-top: 6px;
    padding: 8px 10px;
    border-left: 3px solid var(--theme-color, #1f6fb2);
    background: rgba(0, 0, 0, 0.03);
    font-size: 0.95em;
    line-height: 1.35;
}

@media (max-width: 480px) {
    body .ui-datepicker {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        box-sizing: border-box;
        padding: 6px;
        font-size: 12px;
        overflow: hidden;
    }

    /* Porto/mobile table-responsive rules can break jQuery UI datepicker into a vertical list */
    body .ui-datepicker .ui-datepicker-calendar {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse;
        margin: 0.3em 0 0 !important;
    }

    body .ui-datepicker .ui-datepicker-calendar thead {
        display: table-header-group !important;
    }

    body .ui-datepicker .ui-datepicker-calendar tbody {
        display: table-row-group !important;
    }

    body .ui-datepicker .ui-datepicker-calendar tr {
        display: table-row !important;
    }

    body .ui-datepicker .ui-datepicker-calendar th,
    body .ui-datepicker .ui-datepicker-calendar td {
        display: table-cell !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 1px !important;
        vertical-align: middle;
    }

    body .ui-datepicker .ui-datepicker-calendar th span {
        display: block !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        text-align: center;
    }

    body .ui-datepicker .ui-datepicker-calendar td a,
    body .ui-datepicker .ui-datepicker-calendar td span {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        line-height: 1.25 !important;
        padding: 0.35em 0 !important;
        text-align: center !important;
        box-sizing: border-box;
    }

    body .ui-datepicker .ui-datepicker-header {
        padding: 0.2em 0;
    }

    body .ui-datepicker .ui-datepicker-title {
        margin: 0 1.8em;
        font-size: 14px;
        line-height: 1.4;
    }

    body .ui-datepicker .ui-datepicker-prev,
    body .ui-datepicker .ui-datepicker-next {
        top: 4px;
        width: 1.4em;
        height: 1.4em;
    }
}