/* Styles for the zag.js date picker (UserControls/Calendar.ascx / Scripts/zag-date-picker.js).
 *
 * Theming: override any --zdp-* variable below from any stylesheet, e.g.
 *     .zdp { --zdp-accent: #7a1f3d; --zdp-range-bg: #f3d9e1; }
 * The defaults use :where() (zero specificity), so an override wins regardless of stylesheet order. */

:where(.zdp) {
    --zdp-accent: var(--bs-primary, #0d6efd);       /* check-in / check-out days */
    --zdp-accent-text: #fff;                        /* text on the accent color */
    --zdp-range-bg: #cfe2ff;                        /* days between check-in and check-out */
    --zdp-range-text: inherit;
    --zdp-hover-bg: #e9ecef;
    --zdp-disabled-text: #ced4da;
    --zdp-focus-ring: #212529;
    --zdp-radius: .375rem;
    --zdp-cell-size: 36px;
    --zdp-month-gap: 1rem;
    --zdp-border: 1px solid #dee2e6;
    --zdp-container-radius: .5rem;
    --zdp-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    --zdp-padding: 1rem;
}
.zdp { display: inline-block; max-width: 100%; text-align: left; }
.zdp-content {
    z-index: 1050; /* zag copies this onto the positioner */
    padding: var(--zdp-padding);
    border: var(--zdp-border);
    border-radius: var(--zdp-container-radius);
    box-shadow: var(--zdp-shadow);
    background: #fff;
}
.zdp-popup { position: relative; display: block; margin-bottom: 1em;}
.zdp-trigger { padding: 10px 30px 10px 20px; text-align: left; }
.zdp-trigger:hover { background-color: #f8f8f8; }
.zdp-trigger:focus-visible { outline: 3px solid var(--zdp-focus-ring); outline-offset: 2px; }
.zdp-months { display: flex; flex-wrap: nowrap; gap: var(--zdp-month-gap); justify-content: center; }
/* Stack the months only on narrow screens */
@media (max-width: 770px) {
    .zdp-months { flex-wrap: wrap; }
    .zdp { --zdp-cell-size: 40px; }
}
.zdp-month-title { font-weight: 600; text-align: center; margin-bottom: .25rem; }
.zdp table { border-collapse: collapse; }
.zdp th { text-align: center; font-weight: 500; font-size: .85rem; padding: .25rem; }
.zdp td { padding: 0; }
.zdp [data-part="table-cell-trigger"] { display: flex; align-items: center; justify-content: center; width: var(--zdp-cell-size); height: var(--zdp-cell-size); cursor: pointer; border-radius: var(--zdp-radius); }
.zdp [data-part="table-cell-trigger"]:hover:not([data-disabled]):not([data-selected]) { background: var(--zdp-hover-bg); }
.zdp [data-part="table-cell-trigger"][data-outside-range] { visibility: hidden; }
.zdp [data-part="table-cell-trigger"][data-disabled],
.zdp [data-part="table-cell-trigger"][data-unavailable] { color: var(--zdp-disabled-text); cursor: not-allowed; }
.zdp [data-part="table-cell-trigger"][data-today] { font-weight: 700; text-decoration: underline; }
.zdp [data-part="table-cell-trigger"][data-in-range] { background: var(--zdp-range-bg); color: var(--zdp-range-text); border-radius: 0; }
.zdp [data-part="table-cell-trigger"][data-selected] { background: var(--zdp-accent); color: var(--zdp-accent-text); }
.zdp [data-part="table-cell-trigger"][data-range-start] { border-radius: var(--zdp-radius) 0 0 var(--zdp-radius); }
.zdp [data-part="table-cell-trigger"][data-range-end] { border-radius: 0 var(--zdp-radius) var(--zdp-radius) 0; }
.zdp [data-part="table-cell-trigger"]:focus-visible,
.zdp [data-part="table-cell-trigger"][data-focus-visible] { outline: 3px solid var(--zdp-focus-ring); outline-offset: 1px; }
.zdp-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap; }