/* ============================================================
   Villa Pietra di Mare – Modern Booking Calendar Styles
   ============================================================ */

/* ── Selected dates bar ──────────────────────────────────── */

.vp-dates-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: #fff;
    border: 1.5px solid #e0d8cc;
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.vp-dates-bar-slots {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.vp-dates-slot {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vp-dates-slot-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #999;
}

.vp-dates-slot-val {
    font-size: 15px;
    font-weight: 500;
    color: #aaa;
}

.vp-dates-slot-val--set {
    color: #222 !important;
    font-weight: 600 !important;
}

.vp-dates-arrow {
    font-size: 18px;
    color: #ccc;
    align-self: center;
    margin-top: 14px;
}

.vp-dates-nights {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #8a6a2a;
    padding: 4px 12px;
    border-radius: 20px;
    align-self: center;
    margin-top: 12px;
    display: none;
}

/* Change dates button */
.vp-change-dates-btn {
    display: none;
    align-items: center;
    gap: 7px;
    background: transparent;
    color: #8a6a2a;
    border: 1.5px solid #8a6a2a;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

/* Only show via JS when dates are set – use flex when visible */
#vp-change-btn[style*="display: block"],
#vp-change-btn[style*="display:block"],
#vp-change-btn[style*="display: inline"],
#vp-change-btn[style*="display:inline"] {
    display: inline-flex !important;
}

.vp-change-dates-btn:hover {
    background: #8a6a2a;
    color: #fff;
}

/* ── Booking form section refinements ────────────────────── */

/* Remove old grey box style from booking terms */
#booking-form-calendar .text-wrap.booking_terms > div {
    background: #faf9f7;
    border: 1px solid #ebe5db;
    border-radius: 8px;
    padding: 14px 18px;
}

/* Colour legend row */
.calendar-colors {
    margin-bottom: 12px;
}

.calendar-colors .today,
.calendar-colors .selected,
.calendar-colors .available,
.calendar-colors .unavailable {
    font-size: 12.5px;
    color: #555;
}

/* Summary/total table */
#booking-form-calendar table.summary th {
    font-weight: 600;
    color: #555;
    font-size: 13px;
}

/* Reset / Clear dates button – hide it from the bottom bar since
   we expose it via the "Change dates" button in the top bar.
   Keep it in the DOM for JS but visually subtle. */
.book-accommodation-reset {
    font-size: 12px !important;
    padding: 8px 14px !important;
    opacity: 0.6;
    border-radius: 6px !important;
}

.book-accommodation-reset:hover {
    opacity: 1 !important;
}

/* Proceed button */
.book-accommodation-proceed {
    border-radius: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    padding: 12px 28px !important;
}

/* ── jQuery UI Datepicker – modern override ──────────────── */

/* Container */
.ui-datepicker.ui-widget {
    background: #fff !important;
    border: 1px solid #e8e3db !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
    font-family: inherit !important;
    padding: 12px 16px 16px !important;
    width: auto !important;
}

/* Multi-month wrapper */
.ui-datepicker-multi .ui-datepicker-group {
    padding: 0 8px;
}

/* Header (month + year + prev/next) */
.ui-datepicker-header {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f0ebe3 !important;
    border-radius: 0 !important;
    padding: 6px 0 10px !important;
    margin-bottom: 8px;
}

.ui-datepicker-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #2a2a2a !important;
    letter-spacing: 0.3px;
}

/* Prev / Next arrows */
.ui-datepicker-prev,
.ui-datepicker-next {
    top: 6px !important;
    width: 28px !important;
    height: 28px !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    border: 1px solid #e5e0d8 !important;
    background: #fff !important;
    transition: background 0.15s, border-color 0.15s !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background: #f5efe4 !important;
    border-color: #c8a96b !important;
    top: 6px !important;
}

/* Replace jQuery UI icons with CSS arrows */
.ui-datepicker-prev span,
.ui-datepicker-next span {
    background-image: none !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

.ui-datepicker-prev span::before,
.ui-datepicker-next span::before {
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #666;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ui-datepicker-prev span::before { content: '‹'; }
.ui-datepicker-next span::before { content: '›'; }

/* Day-of-week header row */
.ui-datepicker-calendar thead th {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    letter-spacing: 0.5px;
    padding: 4px 0 6px !important;
    border: none !important;
    background: transparent !important;
}

/* Date cells – only override padding/border, NOT width/height/display/border-radius
   so the theme's connected range-pill shapes are preserved */
.ui-datepicker-calendar tbody td {
    padding: 1px !important;
    border: none !important;
}

/* Typography only – do NOT set display/width/height/border-radius
   (those break the theme's pill-range connector styles) */
.ui-datepicker-calendar tbody td a,
.ui-datepicker-calendar tbody td span {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: background 0.15s, color 0.15s !important;
}

/* Unavailable / disabled – muted, no strikethrough (theme handles shape) */
td.unavailable > a,
td.unavailable > span,
td.ui-datepicker-unselectable > span {
    color: #bbb !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* Today – gold border hint (theme may override, but this adds a subtle cue) */
td.ui-datepicker-today > a {
    font-weight: 700 !important;
    outline: 2px solid rgba(138, 106, 42, 0.5) !important;
    outline-offset: -2px;
}

/* Inline calendar background (cells with no status) */
td:not(.available):not(.unavailable):not(.ui-datepicker-unselectable) > a.ui-state-default {
    color: #444 !important;
}

/* ── Calendar colour legend ───────────────────────────────── */

.calendar-colors > div > div span {
    border-radius: 4px !important;
    width: 14px !important;
    height: 14px !important;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 768px) {
    .vp-dates-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .vp-change-dates-btn {
        width: 100%;
        justify-content: center;
    }
    .vp-dates-bar-slots {
        gap: 10px;
    }
    /* Stack two-month calendar to single on mobile */
    .ui-datepicker-multi-2 .ui-datepicker-group {
        float: none !important;
        width: 100% !important;
    }
}