/*
 * The design system's date picker (assets/controllers/datepicker_controller.js),
 * shared by the homepage hero, the booking page and every backoffice date field.
 *
 * Only the chrome lives here: the grid itself is the public availability
 * calendar's (availability.css), because it is the same calendar, drawn from
 * the same shared source, and a visitor must not have to learn it twice.
 *
 * Nothing here is set from JavaScript. The CSP forbids inline styles, so the
 * popover is a child of the field it belongs to, placed by these rules alone;
 * the controller only ever toggles the two modifier classes below when the
 * default placement would leave the viewport.
 */

.vo-dp--popover,
.vo-dp-field {
    position: relative;
}

/* A field in a plain block container keeps a text control's intrinsic width
   (CLAUDE.md), which is narrower than the card it sits in. */
.vo-dp-field .vo-admin-field__input {
    width: 100%;
}

/* The field is a button now, not a text box: it opens the picker and refuses
   everything else. The native indicator would open a second, competing
   calendar, and `readonly` alone leaves it there. */
.vo-dp input[type='date'] {
    cursor: pointer;
}

.vo-dp input[type='date']::-webkit-calendar-picker-indicator {
    display: none;
}

/* ==========================================================================
   Popover
   ========================================================================== */

.vo-dp__popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 0;
    width: 320px;
    max-width: calc(100vw - 24px);
    border-radius: 16px;
    box-shadow: 0 26px 48px -26px rgba(33, 28, 23, .55);
}

.vo-dp__popover .vo-avail {
    border-color: var(--vo-hairline);
}

/* Anchored on the field's right edge instead of its left: the picker is wider
   than most fields, and a field in the right-hand column of a two-column form
   has nothing to its right. */
.vo-dp__popover--right {
    left: auto;
    right: 0;
}

/* Last resort, on a screen where the picker fits neither way round: it spans
   the field and takes whatever width that leaves. */
.vo-dp__popover--wide {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
}

@media (max-width: 480px) {
    .vo-dp__popover {
        left: 0;
        right: 0;
        width: auto;
    }
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 768px) {
    /* The free days of a picker are real controls (tabindex, role="button"),
       so CLAUDE.md's 40px touch target applies to them, on top of
       availability.css's own mobile padding. */
    .vo-dp .vo-avail__day {
        padding-block: 14px;
    }
}