/**
 * Blije Schaap Core - Booking Calendar Widget Styles
 */

/* ==========================================================================
   Widget Container
   ========================================================================== */

.bsc-booking-calendar-wrapper {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Calendar Legend
   ========================================================================== */

.bsc-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.bsc-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: #666;
}

.bsc-legend-color {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.bsc-legend-available .bsc-legend-color {
    background: #d4edda;
}

.bsc-legend-unavailable .bsc-legend-color {
    /* Diagonal stripes like calendar unavailable dates */
    background: linear-gradient(
        to bottom right,
        #f8d7da 0%,
        #f8d7da 50%,
        #dc3545 50%,
        #dc3545 100%
    );
}

.bsc-legend-selected .bsc-legend-color {
    /* Dark green to match calendar selected state on hover */
    background: #28a745;
}

.bsc-legend-halfday .bsc-legend-color {
    position: relative;
    background: linear-gradient(
        to bottom right,
        #f8d7da 0%,
        #f8d7da 50%,
        #d4edda 50%,
        #d4edda 100%
    );
}

/* ==========================================================================
   Calendar Container
   ========================================================================== */

.bsc-calendar-container {
    margin-bottom: 25px;
}

/* ==========================================================================
   MPHB Calendar - Side by Side Months
   ========================================================================== */

/* Calendar wrapper takes full width */
.bsc-booking-calendar-wrapper .mphb-calendar {
    width: 100%;
}

/* Datepick container */
.bsc-booking-calendar-wrapper .datepick {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
}

/* Month row - flex container for side by side months */
.bsc-booking-calendar-wrapper .datepick-month-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px;
    width: 100% !important;
    float: none !important;
}

/* Each month takes ~50% (minus gap) */
.bsc-booking-calendar-wrapper .datepick-month {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: 280px;
    max-width: calc(50% - 10px);
    float: none !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

/* Month header styling */
.bsc-booking-calendar-wrapper .datepick-month-header {
    background: #1b3254 !important;
    color: #fff !important;
    padding: 12px 15px !important;
    font-size: 1.1em;
    text-align: center;
    border-radius: 7px 7px 0 0;
    overflow: visible !important;
    height: auto !important;
    min-height: 44px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px;
}

/* Month and year select dropdowns */
.bsc-booking-calendar-wrapper .datepick-month-header select {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    font-size: 1em;
    cursor: pointer;
    padding: 0 2px !important;
    margin: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Month select - align text properly */
.bsc-booking-calendar-wrapper .datepick-month-header select.datepick-month-year {
    text-align: center !important;
    text-align-last: center !important;
}

/* Space between month name and year */
.bsc-booking-calendar-wrapper .datepick-month-header span,
.bsc-booking-calendar-wrapper .datepick-month-header .datepick-month-year {
    margin: 0 2px !important;
}

/* Calendar table */
.bsc-booking-calendar-wrapper .datepick-month table {
    width: 100%;
    border-collapse: collapse;
}

/* Day headers */
.bsc-booking-calendar-wrapper .datepick-month th {
    background: #f5f5f5 !important;
    color: #333 !important;
    padding: 8px 4px;
    font-weight: 600;
    font-size: 0.85em;
    border: 1px solid #e0e0e0 !important;
}

/* Day cells */
.bsc-booking-calendar-wrapper .datepick-month td {
    padding: 0;
    border: 1px solid #e0e0e0 !important;
    background: #fff;
}

.bsc-booking-calendar-wrapper .datepick-month td a,
.bsc-booking-calendar-wrapper .datepick-month td span {
    display: block;
    padding: 10px 4px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s;
}

/* Available dates */
.bsc-booking-calendar-wrapper .mphb-available-date {
    background-color: #d4edda !important;
    color: #155724 !important;
    cursor: pointer;
}

/* Available date hover - dark green to match half-day hover */
.bsc-booking-calendar-wrapper a.mphb-available-date:hover,
.datepick .datepick-month table td a.mphb-available-date:hover,
.datepick .datepick-month table td a.mphb-date-cell:hover:not(.mphb-booked-date):not(.mphb-past-date):not(.mphb-mark-as-unavailable),
.mphb-calendar td a.mphb-available-date:hover,
.mphb-calendar td .mphb-selectable-date--check-in:hover,
.mphb-calendar td .mphb-selectable-date--check-out:hover,
.datepick .datepick-month table td .mphb-selectable-date--check-in:hover,
.datepick .datepick-month table td .mphb-selectable-date--check-out:hover {
    background-color: #28a745 !important;
    background: #28a745 !important;
    color: #fff !important;
}

/* Selected dates */
.bsc-booking-calendar-wrapper .mphb-selected-date,
.bsc-booking-calendar-wrapper .mphb-selected-date--check-in,
.bsc-booking-calendar-wrapper .mphb-selected-date--check-out,
.bsc-booking-calendar-wrapper .datepick-selected,
.datepick .datepick-month table td .mphb-selected-date,
.datepick .datepick-month table td .datepick-selected,
.datepick .datepick-month table td .datepick-highlight {
    background-color: #1b3254 !important;
    background: #1b3254 !important;
    color: #fff !important;
}

/* Selected dates hover - dark green
   Override Albatross theme which uses .mphb-check-in-date for selected dates */
.bsc-booking-calendar-wrapper a.mphb-selected-date:hover,
.bsc-booking-calendar-wrapper a.mphb-selected-date--check-in:hover,
.bsc-booking-calendar-wrapper a.mphb-selected-date--check-out:hover,
.bsc-booking-calendar-wrapper a.datepick-selected:hover,
.bsc-booking-calendar-wrapper a.mphb-check-in-date:hover,
.datepick .datepick-month table td a.mphb-selected-date:hover,
.datepick .datepick-month table td a.datepick-selected:hover,
.datepick .datepick-month table td a.datepick-highlight:hover,
.datepick .datepick-month table td a.mphb-check-in-date:hover,
.datepick .datepick-month table td span.mphb-check-in-date:hover,
.mphb-calendar td a.mphb-selected-date:hover,
.mphb-calendar td a.mphb-selected-date--check-in:hover,
.mphb-calendar td a.mphb-selected-date--check-out:hover,
.mphb-calendar td a.mphb-check-in-date:hover {
    background-color: #28a745 !important;
    background: #28a745 !important;
    color: #fff !important;
}

/* Extra specificity for Albatross theme override */
.datepick.datepick .datepick-month table td a.mphb-selected-date:hover,
.datepick.datepick .datepick-month table td a.datepick-selected:hover,
.datepick.datepick .datepick-month table td a.datepick-highlight:hover,
.datepick.datepick .datepick-month table td a.mphb-check-in-date:hover {
    background-color: #28a745 !important;
    background: #28a745 !important;
    color: #fff !important;
}

/* Booked/unavailable dates */
.bsc-booking-calendar-wrapper .mphb-booked-date,
.bsc-booking-calendar-wrapper .mphb-mark-as-unavailable {
    background-color: #f8d7da !important;
    color: #721c24 !important;
}

/* ==========================================================================
   Half-Day Dates (Check-in/Check-out available)
   These days have someone checking out, so you can check in on the same day.
   Styled with diagonal split: green for available part, red for occupied part

   Override MPHB's default gray/green split AND Albatross theme's striped pattern
   ========================================================================== */

/* Override MPHB CSS variables for half-day colors */
.mphb-calendar,
.bsc-booking-calendar-wrapper .mphb-calendar,
.datepick {
    --mphb-booked-date-bg: #f8d7da !important;
    --mphb-available-date-bg: #d4edda !important;
    --mphb-not-available-date-bg: #f8d7da !important;
}

/* ==========================================================================
   Override Albatross theme striped pattern for half-day dates
   The theme uses: .datepick .datepick-month table td .mphb-mark-as-unavailable--check-in
   We need equal or higher specificity to override
   ========================================================================== */

/* Check-in day (someone checks IN here) - morning available, afternoon occupied
   Top-left = GREEN (available morning), Bottom-right = RED (occupied afternoon) */
.datepick .datepick-month table td .mphb-mark-as-unavailable--check-in,
.datepick .datepick-month table td a.mphb-mark-as-unavailable--check-in,
.datepick .datepick-month table td span.mphb-mark-as-unavailable--check-in,
.mphb-calendar td .mphb-mark-as-unavailable--check-in,
.mphb-calendar td a.mphb-mark-as-unavailable--check-in,
.bsc-booking-calendar-wrapper .mphb-mark-as-unavailable--check-in,
.datepick-month td .mphb-mark-as-unavailable--check-in {
    background: linear-gradient(
        to bottom right,
        #d4edda 0%,
        #d4edda 50%,
        #f8d7da 50%,
        #f8d7da 100%
    ) !important;
    background-size: 100% 100% !important;
    color: #155724 !important;
    cursor: pointer;
}

/* Check-out day (someone checks OUT here) - morning occupied, afternoon available
   Top-left = RED (occupied morning), Bottom-right = GREEN (available afternoon) */
.datepick .datepick-month table td .mphb-mark-as-unavailable--check-out,
.datepick .datepick-month table td a.mphb-mark-as-unavailable--check-out,
.datepick .datepick-month table td span.mphb-mark-as-unavailable--check-out,
.mphb-calendar td .mphb-mark-as-unavailable--check-out,
.mphb-calendar td a.mphb-mark-as-unavailable--check-out,
.bsc-booking-calendar-wrapper .mphb-mark-as-unavailable--check-out,
.datepick-month td .mphb-mark-as-unavailable--check-out {
    background: linear-gradient(
        to bottom right,
        #f8d7da 0%,
        #f8d7da 50%,
        #d4edda 50%,
        #d4edda 100%
    ) !important;
    background-size: 100% 100% !important;
    color: #155724 !important;
    cursor: pointer;
}

/* Also handle mphb-date-check-in and mphb-date-check-out classes */
/* Check-in day: morning available (GREEN top-left), afternoon occupied (RED bottom-right) */
.datepick .datepick-month table td .mphb-date-check-in,
.datepick .datepick-month table td a.mphb-date-check-in,
.mphb-calendar td .mphb-date-check-in,
.mphb-calendar td a.mphb-date-check-in,
.bsc-booking-calendar-wrapper .mphb-date-check-in,
.datepick-month td .mphb-date-check-in {
    background: linear-gradient(
        to bottom right,
        #d4edda 0%,
        #d4edda 50%,
        #f8d7da 50%,
        #f8d7da 100%
    ) !important;
    background-size: 100% 100% !important;
    color: #155724 !important;
    cursor: pointer;
}

/* Check-out day: morning occupied (RED top-left), afternoon available (GREEN bottom-right) */
.datepick .datepick-month table td .mphb-date-check-out,
.datepick .datepick-month table td a.mphb-date-check-out,
.mphb-calendar td .mphb-date-check-out,
.mphb-calendar td a.mphb-date-check-out,
.bsc-booking-calendar-wrapper .mphb-date-check-out,
.datepick-month td .mphb-date-check-out {
    background: linear-gradient(
        to bottom right,
        #f8d7da 0%,
        #f8d7da 50%,
        #d4edda 50%,
        #d4edda 100%
    ) !important;
    background-size: 100% 100% !important;
    color: #155724 !important;
    cursor: pointer;
}

/* ==========================================================================
   CRITICAL: Remove Albatross theme ::before pseudo-elements
   The theme adds a ::before that creates a half-overlay on check-in/check-out dates
   ========================================================================== */
.datepick .datepick-month table td .mphb-mark-as-unavailable--check-in::before,
.datepick .datepick-month table td .mphb-mark-as-unavailable--check-out::before,
.datepick .datepick-month table td .mphb-date-check-in::before,
.datepick .datepick-month table td .mphb-date-check-out::before,
.datepick .datepick-month table td .mphb-out-of-season-date--check-in::before,
.datepick .datepick-month table td .mphb-out-of-season-date--check-out::before,
.mphb-calendar td .mphb-date-check-in::before,
.mphb-calendar td .mphb-date-check-in::after,
.mphb-calendar td .mphb-date-check-out::before,
.mphb-calendar td .mphb-date-check-out::after,
.mphb-calendar td .mphb-mark-as-unavailable--check-in::before,
.mphb-calendar td .mphb-mark-as-unavailable--check-in::after,
.mphb-calendar td .mphb-mark-as-unavailable--check-out::before,
.mphb-calendar td .mphb-mark-as-unavailable--check-out::after,
.bsc-booking-calendar-wrapper .mphb-date-check-in::before,
.bsc-booking-calendar-wrapper .mphb-date-check-in::after,
.bsc-booking-calendar-wrapper .mphb-date-check-out::before,
.bsc-booking-calendar-wrapper .mphb-date-check-out::after,
.bsc-booking-calendar-wrapper .mphb-mark-as-unavailable--check-in::before,
.bsc-booking-calendar-wrapper .mphb-mark-as-unavailable--check-in::after,
.bsc-booking-calendar-wrapper .mphb-mark-as-unavailable--check-out::before,
.bsc-booking-calendar-wrapper .mphb-mark-as-unavailable--check-out::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Hover effect for half-day dates - brighten the available part */
/* Check-in day hover: dark green top-left (available morning), darker red bottom-right */
.datepick .datepick-month table td a.mphb-mark-as-unavailable--check-in:hover,
.datepick .datepick-month table td a.mphb-date-check-in:hover,
.mphb-calendar td a.mphb-date-check-in:hover,
.mphb-calendar td a.mphb-mark-as-unavailable--check-in:hover,
.bsc-booking-calendar-wrapper a.mphb-date-check-in:hover,
.bsc-booking-calendar-wrapper a.mphb-mark-as-unavailable--check-in:hover {
    background: linear-gradient(
        to bottom right,
        #28a745 0%,
        #28a745 50%,
        #f5c6cb 50%,
        #f5c6cb 100%
    ) !important;
    background-size: 100% 100% !important;
    color: #fff !important;
}

/* Check-out day hover: darker red top-left, dark green bottom-right (available afternoon) */
.datepick .datepick-month table td a.mphb-mark-as-unavailable--check-out:hover,
.datepick .datepick-month table td a.mphb-date-check-out:hover,
.mphb-calendar td a.mphb-date-check-out:hover,
.mphb-calendar td a.mphb-mark-as-unavailable--check-out:hover,
.bsc-booking-calendar-wrapper a.mphb-date-check-out:hover,
.bsc-booking-calendar-wrapper a.mphb-mark-as-unavailable--check-out:hover {
    background: linear-gradient(
        to bottom right,
        #f5c6cb 0%,
        #f5c6cb 50%,
        #28a745 50%,
        #28a745 100%
    ) !important;
    background-size: 100% 100% !important;
    color: #fff !important;
}

/* ==========================================================================
   Selected half-day dates - dark green for the available part
   IMPORTANT: Only target dates that have BOTH selected AND half-day classes
   .mphb-selected-date--check-in alone = just the selected check-in date (could be full day)
   .mphb-date-check-in = half-day where check-in is available
   ========================================================================== */

/* Selected + half-day check-in (has both classes)
   Include mphb-check-in-date which Albatross uses for selected check-in
   Also include span variants with datepick-selected/datepick-highlight
   IMPORTANT: Also handle when a check-in half-day is selected as CHECKOUT date (mphb-selected-date--check-out) */
.datepick .datepick-month table td a.mphb-date-check-in.datepick-selected,
.datepick .datepick-month table td a.mphb-date-check-in.datepick-highlight,
.datepick .datepick-month table td a.mphb-date-check-in.mphb-check-in-date,
.datepick .datepick-month table td a.mphb-date-check-in.mphb-selected-date,
.datepick .datepick-month table td a.mphb-date-check-in.mphb-selected-date--check-out,
.datepick .datepick-month table td a.mphb-mark-as-unavailable--check-in.datepick-selected,
.datepick .datepick-month table td a.mphb-mark-as-unavailable--check-in.datepick-highlight,
.datepick .datepick-month table td a.mphb-mark-as-unavailable--check-in.mphb-check-in-date,
.datepick .datepick-month table td a.mphb-mark-as-unavailable--check-in.mphb-selected-date,
.datepick .datepick-month table td a.mphb-mark-as-unavailable--check-in.mphb-selected-date--check-out,
.datepick .datepick-month table td span.mphb-date-check-in.datepick-selected,
.datepick .datepick-month table td span.mphb-date-check-in.datepick-highlight,
.datepick .datepick-month table td span.mphb-date-check-in.mphb-check-in-date,
.datepick .datepick-month table td span.mphb-date-check-in.mphb-selected-date,
.datepick .datepick-month table td span.mphb-date-check-in.mphb-selected-date--check-out,
.datepick .datepick-month table td span.mphb-mark-as-unavailable--check-in.datepick-selected,
.datepick .datepick-month table td span.mphb-mark-as-unavailable--check-in.datepick-highlight,
.datepick .datepick-month table td span.mphb-mark-as-unavailable--check-in.mphb-check-in-date,
.datepick .datepick-month table td span.mphb-mark-as-unavailable--check-in.mphb-selected-date,
.datepick .datepick-month table td span.mphb-mark-as-unavailable--check-in.mphb-selected-date--check-out,
.mphb-calendar td a.mphb-date-check-in.mphb-selected-date,
.mphb-calendar td a.mphb-date-check-in.mphb-selected-date--check-out,
.mphb-calendar td a.mphb-mark-as-unavailable--check-in.mphb-selected-date,
.mphb-calendar td a.mphb-mark-as-unavailable--check-in.mphb-selected-date--check-out,
.mphb-calendar td span.mphb-date-check-in.mphb-selected-date,
.mphb-calendar td span.mphb-date-check-in.mphb-selected-date--check-out,
.mphb-calendar td span.mphb-mark-as-unavailable--check-in.mphb-selected-date,
.mphb-calendar td span.mphb-mark-as-unavailable--check-in.mphb-selected-date--check-out,
.bsc-booking-calendar-wrapper a.mphb-date-check-in.datepick-selected,
.bsc-booking-calendar-wrapper a.mphb-date-check-in.mphb-check-in-date,
.bsc-booking-calendar-wrapper a.mphb-date-check-in.mphb-selected-date--check-out,
.bsc-booking-calendar-wrapper a.mphb-mark-as-unavailable--check-in.datepick-selected,
.bsc-booking-calendar-wrapper a.mphb-mark-as-unavailable--check-in.mphb-check-in-date,
.bsc-booking-calendar-wrapper a.mphb-mark-as-unavailable--check-in.mphb-selected-date--check-out,
.bsc-booking-calendar-wrapper span.mphb-date-check-in.datepick-selected,
.bsc-booking-calendar-wrapper span.mphb-date-check-in.mphb-check-in-date,
.bsc-booking-calendar-wrapper span.mphb-date-check-in.mphb-selected-date--check-out,
.bsc-booking-calendar-wrapper span.mphb-mark-as-unavailable--check-in.datepick-selected,
.bsc-booking-calendar-wrapper span.mphb-mark-as-unavailable--check-in.mphb-check-in-date,
.bsc-booking-calendar-wrapper span.mphb-mark-as-unavailable--check-in.mphb-selected-date--check-out {
    background: linear-gradient(
        to bottom right,
        #28a745 0%,
        #28a745 50%,
        #f8d7da 50%,
        #f8d7da 100%
    ) !important;
    background-size: 100% 100% !important;
    color: #fff !important;
}

/* Selected + half-day check-out (has both classes)
   Check-out day selected: morning occupied (RED top-left), afternoon available (dark GREEN bottom-right) */
.datepick .datepick-month table td a.mphb-date-check-out.datepick-selected,
.datepick .datepick-month table td a.mphb-date-check-out.datepick-highlight,
.datepick .datepick-month table td a.mphb-date-check-out.mphb-selected-date,
.datepick .datepick-month table td a.mphb-mark-as-unavailable--check-out.datepick-selected,
.datepick .datepick-month table td a.mphb-mark-as-unavailable--check-out.datepick-highlight,
.datepick .datepick-month table td a.mphb-mark-as-unavailable--check-out.mphb-selected-date,
.datepick .datepick-month table td span.mphb-date-check-out.datepick-selected,
.datepick .datepick-month table td span.mphb-date-check-out.datepick-highlight,
.datepick .datepick-month table td span.mphb-mark-as-unavailable--check-out.datepick-selected,
.datepick .datepick-month table td span.mphb-mark-as-unavailable--check-out.datepick-highlight,
.mphb-calendar td a.mphb-date-check-out.mphb-selected-date,
.mphb-calendar td a.mphb-mark-as-unavailable--check-out.mphb-selected-date,
.bsc-booking-calendar-wrapper a.mphb-date-check-out.datepick-selected,
.bsc-booking-calendar-wrapper a.mphb-date-check-out.datepick-highlight,
.bsc-booking-calendar-wrapper a.mphb-mark-as-unavailable--check-out.datepick-selected,
.bsc-booking-calendar-wrapper a.mphb-mark-as-unavailable--check-out.datepick-highlight,
.bsc-booking-calendar-wrapper span.mphb-date-check-out.datepick-selected,
.bsc-booking-calendar-wrapper span.mphb-date-check-out.datepick-highlight,
.bsc-booking-calendar-wrapper span.mphb-mark-as-unavailable--check-out.datepick-selected,
.bsc-booking-calendar-wrapper span.mphb-mark-as-unavailable--check-out.datepick-highlight {
    background: linear-gradient(
        to bottom right,
        #f8d7da 0%,
        #f8d7da 50%,
        #28a745 50%,
        #28a745 100%
    ) !important;
    background-size: 100% 100% !important;
    color: #fff !important;
}

/* Selected half-day dates hover - full green */
.datepick .datepick-month table td a.mphb-date-check-in.datepick-selected:hover,
.datepick .datepick-month table td a.mphb-date-check-out.datepick-selected:hover,
.datepick .datepick-month table td a.mphb-mark-as-unavailable--check-in.datepick-selected:hover,
.datepick .datepick-month table td a.mphb-mark-as-unavailable--check-out.datepick-selected:hover,
.mphb-calendar td a.mphb-date-check-in.mphb-selected-date:hover,
.mphb-calendar td a.mphb-date-check-out.mphb-selected-date:hover,
.bsc-booking-calendar-wrapper a.mphb-date-check-in.datepick-selected:hover,
.bsc-booking-calendar-wrapper a.mphb-date-check-out.datepick-selected:hover {
    background: #28a745 !important;
    background-color: #28a745 !important;
    color: #fff !important;
}

/* Other month dates (dimmed) */
.bsc-booking-calendar-wrapper .datepick-other-month {
    background-color: #fafafa !important;
    color: #ccc !important;
}

/* Today */
.bsc-booking-calendar-wrapper .datepick-today {
    font-weight: bold;
}

/* Weekend styling */
.bsc-booking-calendar-wrapper .datepick-weekend {
    background-color: #f9f9f9;
}

/* Navigation controls */
.bsc-booking-calendar-wrapper .datepick-nav {
    background: #f5f5f5 !important;
    padding: 10px !important;
    border-radius: 6px 6px 0 0;
}

.bsc-booking-calendar-wrapper .datepick-cmd {
    color: #333 !important;
    padding: 5px 10px;
}

.bsc-booking-calendar-wrapper .datepick-cmd:hover {
    background: #e0e0e0 !important;
    border-radius: 4px;
}

/* Control bar (clear button) */
.bsc-booking-calendar-wrapper .datepick-ctrl {
    background: #f5f5f5 !important;
    padding: 12px 15px !important;
    margin-top: 15px;
    border-radius: 6px;
    clear: both;
}

.bsc-booking-calendar-wrapper .datepick-cmd-clear {
    background: #1b3254 !important;
    color: #fff !important;
    padding: 8px 16px !important;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
}

.bsc-booking-calendar-wrapper .datepick-cmd-clear:hover {
    background: #2a4a7a !important;
}

/* ==========================================================================
   Booking Form
   ========================================================================== */

.bsc-booking-form-section {
    padding-top: 20px;
    border-top: 2px solid #1b3254;
    margin-top: 20px;
}

.bsc-booking-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bsc-date-selection,
.bsc-guests-selection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.bsc-form-field {
    display: flex;
    flex-direction: column;
}

.bsc-form-field label {
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
    font-size: 0.95em;
}

.bsc-form-field input,
.bsc-form-field select {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}

.bsc-form-field input:focus,
.bsc-form-field select:focus {
    outline: none;
    border-color: #1b3254;
    box-shadow: 0 0 0 3px rgba(27, 50, 84, 0.1);
}

.bsc-form-field input.bsc-datepicker {
    cursor: pointer;
    background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>') no-repeat right 12px center;
    padding-right: 40px;
}

.bsc-form-field input.bsc-has-value {
    background-color: #f0f7f0;
    border-color: #1b3254;
}

/* ==========================================================================
   Submit Button
   ========================================================================== */

.bsc-submit-wrapper {
    margin-top: 10px;
    text-align: center;
}

.bsc-book-now-btn {
    display: inline-block;
    width: 100%;
    padding: 15px 30px;
    background: #1b3254;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bsc-book-now-btn:hover:not(:disabled) {
    background: #2a4a7a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(27, 50, 84, 0.3);
}

.bsc-book-now-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

.bsc-select-dates-hint {
    margin: 10px 0 0;
    font-size: 0.9em;
    color: #888;
    font-style: italic;
}

.bsc-book-now-btn:not(:disabled) + .bsc-select-dates-hint {
    display: none;
}

/* ==========================================================================
   Error States
   ========================================================================== */

.bsc-widget-error {
    padding: 20px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #721c24;
    text-align: center;
}

.bsc-form-errors {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #721c24;
    padding: 15px;
    margin-bottom: 20px;
}

.bsc-form-errors ul {
    margin: 0;
    padding-left: 20px;
}

.bsc-form-errors li {
    margin: 5px 0;
}

/* ==========================================================================
   Editor Placeholder
   ========================================================================== */

.bsc-calendar-placeholder {
    background: #f5f5f5;
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    color: #888;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .bsc-booking-calendar-wrapper {
        padding: 15px;
    }

    .bsc-calendar-legend {
        flex-direction: column;
        gap: 10px;
    }

    /* Stack months on mobile */
    .bsc-booking-calendar-wrapper .datepick-month-row {
        flex-direction: column;
    }

    .bsc-booking-calendar-wrapper .datepick-month {
        flex: 1 1 100% !important;
        max-width: 100%;
    }

    .bsc-date-selection,
    .bsc-guests-selection {
        grid-template-columns: 1fr;
    }

    .bsc-booking-form-section {
        padding-top: 15px;
    }
}

@media (max-width: 480px) {
    .bsc-form-field input,
    .bsc-form-field select {
        padding: 10px 12px;
    }

    .bsc-book-now-btn {
        padding: 12px 20px;
        font-size: 1em;
    }

    /* Prevent horizontal overflow on very narrow screens */
    .bsc-booking-calendar-wrapper .datepick-month {
        min-width: unset;
    }

    .bsc-booking-calendar-wrapper .datepick-month td a,
    .bsc-booking-calendar-wrapper .datepick-month td span {
        padding: 8px 2px;
        font-size: 0.85em;
    }

    .bsc-booking-calendar-wrapper .datepick-month th {
        padding: 6px 2px;
        font-size: 0.8em;
    }
}

/* ==========================================================================
   Animation
   ========================================================================== */

@keyframes bsc-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(27, 50, 84, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(27, 50, 84, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(27, 50, 84, 0);
    }
}

.bsc-form-field input.bsc-has-value {
    animation: bsc-pulse 0.5s ease;
}

/* ==========================================================================
   FALLBACK: Ultra high-specificity rule for selected half-day dates
   This catches any cases where a half-day is selected but not caught by above rules
   ========================================================================== */

/* Any selected date that's also a check-in half-day
   Check-in day = morning available (dark GREEN), afternoon occupied (RED) */
.datepick.datepick .datepick-month table td .mphb-date-check-in[class*="selected"],
.datepick.datepick .datepick-month table td .mphb-date-check-in[class*="highlight"],
.datepick.datepick .datepick-month table td .mphb-mark-as-unavailable--check-in[class*="selected"],
.datepick.datepick .datepick-month table td .mphb-mark-as-unavailable--check-in[class*="highlight"] {
    background: linear-gradient(
        to bottom right,
        #28a745 0%,
        #28a745 50%,
        #f8d7da 50%,
        #f8d7da 100%
    ) !important;
    background-size: 100% 100% !important;
    color: #fff !important;
}

/* Any selected date that's also a check-out half-day
   Check-out day = morning occupied (RED), afternoon available (dark GREEN) */
.datepick.datepick .datepick-month table td .mphb-date-check-out[class*="selected"],
.datepick.datepick .datepick-month table td .mphb-date-check-out[class*="highlight"],
.datepick.datepick .datepick-month table td .mphb-mark-as-unavailable--check-out[class*="selected"],
.datepick.datepick .datepick-month table td .mphb-mark-as-unavailable--check-out[class*="highlight"] {
    background: linear-gradient(
        to bottom right,
        #f8d7da 0%,
        #f8d7da 50%,
        #28a745 50%,
        #28a745 100%
    ) !important;
    background-size: 100% 100% !important;
    color: #fff !important;
}