/* ==========================================================================
   Booking Date Picker – Pikaday Custom Theme
   Matches the "booking-pikaday" theme class.
   Designed as an INLINE full-width calendar to match the mockup perfectly.
   ========================================================================== */

/* ── Wrapper & Hidden Input ──────────────────────────────────────────────── */
.booking-datepicker__wrapper {
    position: relative;
    width: 100%;
    margin-top: 10px;
    display: block;
}

/* Hide the actual text input and icon wrapper since we want an inline calendar */
.booking-datepicker__wrapper .booking-datepicker__input,
.booking-datepicker__wrapper .booking-datepicker__icon {
    display: none !important;
}

/* ── Pikaday container ────────────────────────────────────────────────────── */
.pika-single.booking-pikaday {
    display: block;
    width: 100%;
    max-width: 100%;
    font-family: inherit;
    background: #fff;
    /* Give it a subtle outline to match design */
    border: 1px solid #d6dce5;
    border-radius: 4px;
    box-shadow: none;
    /* No shadow needed for static inline */
    padding: 0;
    margin: 0;
    clear: both;
}

/* Force Pikaday's inner table wrapper to span full width */
.pika-single.booking-pikaday .pika-lendar {
    float: none;
    width: 100%;
    margin: 0;
}

/* ── Header (Month + Nav) ─────────────────────────────────────────────────── */
.pika-single.booking-pikaday .pika-title {
    position: relative;
    background: transparent;
    padding: 24px 20px 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

/* Month & Year wrapper */
.pika-single.booking-pikaday .pika-label {
    display: inline-block;
    background: transparent;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 4px;
    padding: 0;
}

/* Hide the dropdown selects inside labels – use label text only */
.pika-single.booking-pikaday .pika-title select {
    display: none;
}

/* ── Prev / Next navigation ───────────────────────────────────────────────── */
/* Place absolute left/right within the relative .pika-title */
.pika-single.booking-pikaday .pika-prev,
.pika-single.booking-pikaday .pika-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    /* Collapse the node holding default button text but don't clip before */
    font-size: 0;
    line-height: 0;
    color: transparent;
    padding: 10px;
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    opacity: 1;
}

.pika-single.booking-pikaday .pika-prev {
    left: 20px;
}

.pika-single.booking-pikaday .pika-next {
    right: 20px;
}

/* Re-render styled labels via ::before */
.pika-single.booking-pikaday .pika-prev::before,
.pika-single.booking-pikaday .pika-next::before {
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    color: #2782B8;
    line-height: 1;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.2s ease;
}

.pika-single.booking-pikaday .pika-prev::before {
    content: '← Prev';
}

.pika-single.booking-pikaday .pika-next::before {
    content: 'Next →';
}

.pika-single.booking-pikaday .pika-prev:hover::before,
.pika-single.booking-pikaday .pika-next:hover::before {
    text-decoration-color: #2782B8;
}

.pika-single.booking-pikaday .pika-prev.is-disabled,
.pika-single.booking-pikaday .pika-next.is-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* ── Table / Grid ─────────────────────────────────────────────────────────── */
.pika-single.booking-pikaday .pika-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    margin-bottom: 20px;
}

/* Day-of-week header row – full width blue bar touching edges */
.pika-single.booking-pikaday .pika-table thead th {
    background: #2782B8;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    padding: 16px 0;
    border: none;
}

.pika-single.booking-pikaday .pika-table thead th abbr {
    text-decoration: none;
    border: none;
    cursor: default;
}

/* ── Day Cells ────────────────────────────────────────────────────────────── */
.pika-single.booking-pikaday .pika-table tbody td {
    padding: 10px;
    text-align: center;
}

.pika-single.booking-pikaday .pika-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.05rem;
    color: #1a1a2e;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
    font-family: inherit;
    margin: 0 auto;
}

.pika-single.booking-pikaday .pika-button:hover {
    background: #f0f6ff;
    color: #2782B8;
}

/* Today highlight (subtle bold) */
.pika-single.booking-pikaday .is-today .pika-button {
    font-weight: 700;
}

/* Selected date – solid blue box */
.pika-single.booking-pikaday .is-selected .pika-button,
.pika-single.booking-pikaday .is-selected .pika-button:hover {
    background: #2782B8;
    color: #fff;
    font-weight: 700;
    border-radius: 4px;
}

/* ── Disabled / Blocked dates – Match original design ───────────────── */
.pika-single.booking-pikaday .is-disabled .pika-button {
    color: #1a1a2e;
    /* Black text still */
    cursor: not-allowed;
    background: transparent;
    pointer-events: none;
    position: relative;
}

/* Literal strikethrough line over the text for blocked dates */
.pika-single.booking-pikaday .is-disabled .pika-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1.5px;
    background-color: #1a1a2e;
    /* Dark black strikethrough */
    transform: translateY(-50%);
}

/* Outside-month dates (padding dates from previous/next month) */
.pika-single.booking-pikaday .is-outside-current-month .pika-button {
    color: #b0b8c2;
}

.pika-single.booking-pikaday .is-outside-current-month.is-disabled .pika-button::after {
    background-color: #b0b8c2;
    /* Light grey strikethrough for out of month */
}

/* Strip popup animations */
.pika-single.booking-pikaday {
    animation: none;
}