/* ============================================================
   RnB Range Datepicker — Flying Carpet dark-cinematic theme
   ============================================================ */

:root {
    --rnb-bg:       #0f0f0f;
    --rnb-bg2:      #151515;
    --rnb-bg3:      #1c1c1c;
    --rnb-gold:     #D4A017;
    --rnb-gold-lt:  #e0b84a;
    --rnb-gold-dim: rgba(212,160,23,0.15);
    --rnb-gold-bdr: rgba(212,160,23,0.35);
    --rnb-white:    #ffffff;
    --rnb-gray:     #888888;
    --rnb-gray2:    #555555;
    --rnb-border:   rgba(255,255,255,0.08);
    --rnb-font-ui:  'Barlow Condensed', sans-serif;
    --rnb-font-hd:  'Bebas Neue', sans-serif;
}

/* ============================================================
   Widget overlay — opened by [rnb_date_widget] button
   ============================================================ */

/* Backdrop — shared by widget overlay (#rnb-widget-backdrop)
   and product-page calendar overlay (#rnb-cal-backdrop) */
#rnb-widget-backdrop,
#rnb-cal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    z-index: 9998;
    backdrop-filter: blur(4px);
}

/* Overlay panel — shared by both calendars */
#rnb-widget-overlay,
#rnb-cal-overlay {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--rnb-bg);
    border: 1px solid var(--rnb-gold-bdr);
    box-shadow: 0 0 0 1px rgba(212,160,23,0.08), 0 24px 60px rgba(0,0,0,0.8);
    z-index: 9999;
    width: 740px;
    max-width: 97vw;
    font-family: var(--rnb-font-ui);
    font-size: 14px;
    color: var(--rnb-white);
    box-sizing: border-box;
    border-radius: 0;
}

/* ---- Header ---- */
.rnb-cal-header {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--rnb-border);
    padding: 14px 20px 10px;
    gap: 8px;
    background: var(--rnb-bg2);
}

.rnb-cal-field-label {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    min-width: 0;
}

.rnb-cal-field-label:hover {
    background: var(--rnb-bg3);
}

.rnb-cal-field-label.active {
    border-color: var(--rnb-gold-bdr);
    background: var(--rnb-gold-dim);
}

.rnb-cal-field-label-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--rnb-gold);
    margin-bottom: 5px;
    font-family: var(--rnb-font-ui);
}

.rnb-cal-field-label-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rnb-cal-field-label-value {
    font-size: 16px;
    font-weight: 500;
    color: var(--rnb-white);
    white-space: nowrap;
    font-family: var(--rnb-font-ui);
    letter-spacing: 0.3px;
}

.rnb-cal-field-label-value.placeholder {
    color: var(--rnb-gray);
    font-weight: 400;
}

.rnb-cal-field-time {
    font-size: 13px;
    font-weight: 600;
    color: var(--rnb-gold);
    background: var(--rnb-gold-dim);
    padding: 3px 8px;
    border: 1px solid var(--rnb-gold-bdr);
    white-space: nowrap;
    font-family: var(--rnb-font-ui);
}

.rnb-cal-field-time.placeholder {
    color: var(--rnb-gray2);
    background: rgba(255,255,255,0.04);
    border-color: var(--rnb-border);
    font-weight: 400;
}

.rnb-cal-divider {
    display: flex;
    align-items: center;
    color: var(--rnb-gold);
    font-size: 18px;
    flex-shrink: 0;
    padding: 0 4px;
    opacity: 0.6;
}

/* ---- Hint line ---- */
.rnb-cal-hint {
    margin: 0;
    padding: 8px 22px 4px;
    font-size: 12px;
    color: var(--rnb-gray);
    letter-spacing: 0.5px;
    font-family: var(--rnb-font-ui);
    text-transform: uppercase;
}

/* ---- Months container ---- */
.rnb-cal-months {
    display: flex;
    align-items: flex-start;
    padding: 18px 48px 16px;
    gap: 40px;
    position: relative;
}

/* ---- Navigation arrows ---- */
.rnb-cal-nav {
    position: absolute;
    top: 20px;
    background: transparent;
    border: 1px solid var(--rnb-border);
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: var(--rnb-gray);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    z-index: 10;
    padding: 0;
    border-radius: 0;
    font-family: var(--rnb-font-ui);
}

.rnb-cal-nav:hover:not(:disabled) {
    border-color: var(--rnb-gold-bdr);
    color: var(--rnb-gold);
    background: var(--rnb-gold-dim);
}

.rnb-cal-nav:disabled,
.rnb-cal-nav.disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.rnb-cal-nav.prev { left: 10px; }
.rnb-cal-nav.next { right: 10px; }

/* ---- Time panel — full width, replaces calendar when active ---- */
.rnb-cal-time-panel {
    width: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: none;
    padding-right: 0;
    max-height: 340px;
}

.rnb-cal-time-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--rnb-gold);
    margin-bottom: 10px;
    flex-shrink: 0;
    font-family: var(--rnb-font-ui);
}

.rnb-cal-time-slots {
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,160,23,0.3) rgba(255,255,255,0.04);
}

.rnb-cal-time-slots::-webkit-scrollbar { width: 4px; }
.rnb-cal-time-slots::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.rnb-cal-time-slots::-webkit-scrollbar-thumb { background: rgba(212,160,23,0.3); }

.rnb-cal-time-slot {
    display: block;
    padding: 7px 4px;
    border: 1px solid var(--rnb-border);
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--rnb-white);
    background: transparent;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
    font-family: var(--rnb-font-ui);
    line-height: 1.2;
    border-radius: 0;
}

.rnb-cal-time-slot:hover {
    background: var(--rnb-gold-dim);
    border-color: var(--rnb-gold-bdr);
    color: var(--rnb-gold-lt);
}

.rnb-cal-time-slot.selected {
    background: var(--rnb-gold);
    color: #000;
    border-color: var(--rnb-gold);
    font-weight: 700;
}

.rnb-cal-time-empty {
    color: var(--rnb-gray2);
    font-size: 12px;
    padding: 8px 0;
    margin: 0;
}

/* When time panel is visible — keep standard padding, no gap needed (only time panel shown) */
.rnb-cal-months.has-time-panel {
    padding-left: 24px;
    padding-right: 24px;
    gap: 0;
}

/* ---- Single month ---- */
.rnb-cal-month {
    flex: 1;
    min-width: 0;
}

.rnb-cal-month-title {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
    color: var(--rnb-white);
    font-family: var(--rnb-font-hd);
}

/* ---- Weekday header ---- */
.rnb-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 2px;
}

.rnb-cal-weekday {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--rnb-gold);
    padding: 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: var(--rnb-font-ui);
}

/* ---- Days grid ---- */
.rnb-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.rnb-cal-day {
    position: relative;
    text-align: center;
    padding: 2px 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--rnb-white);
    user-select: none;
    background: transparent;
    font-family: var(--rnb-font-ui);
}

.rnb-cal-day.empty {
    cursor: default;
    pointer-events: none;
}

/* Inner square (matches FCR aesthetic — no circle, sharp square highlight) */
.rnb-cal-day-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 0;
    position: relative;
    z-index: 1;
    transition: background 0.1s, color 0.1s;
}

/* ---- Range fill ---- */
.rnb-cal-day.in-range {
    background: var(--rnb-gold-dim);
}

.rnb-cal-day.range-start:not(.range-end) {
    background: linear-gradient(to right, transparent 50%, var(--rnb-gold-dim) 50%);
}

.rnb-cal-day.range-end:not(.range-start) {
    background: linear-gradient(to left, transparent 50%, var(--rnb-gold-dim) 50%);
}

.rnb-cal-day.range-start.range-end {
    background: transparent;
}

/* Selected square */
.rnb-cal-day.range-start .rnb-cal-day-inner,
.rnb-cal-day.range-end .rnb-cal-day-inner,
.rnb-cal-day.selected .rnb-cal-day-inner {
    background: var(--rnb-gold);
    color: #000;
    font-weight: 700;
}

/* Today */
.rnb-cal-day.today .rnb-cal-day-inner {
    font-weight: 700;
    color: var(--rnb-gold);
    box-shadow: inset 0 0 0 1px var(--rnb-gold-bdr);
}

.rnb-cal-day.today.range-start .rnb-cal-day-inner,
.rnb-cal-day.today.range-end .rnb-cal-day-inner,
.rnb-cal-day.today.selected .rnb-cal-day-inner {
    color: #000;
    box-shadow: none;
}

/* Hover */
.rnb-cal-day:not(.disabled):not(.empty):hover .rnb-cal-day-inner {
    background: var(--rnb-gold-dim);
    color: var(--rnb-gold-lt);
}

.rnb-cal-day.range-start:hover .rnb-cal-day-inner,
.rnb-cal-day.range-end:hover .rnb-cal-day-inner,
.rnb-cal-day.selected:hover .rnb-cal-day-inner {
    background: var(--rnb-gold-lt);
    color: #000;
}

.rnb-cal-day.in-range:hover .rnb-cal-day-inner {
    background: rgba(212,160,23,0.25);
    color: var(--rnb-gold-lt);
}

/* Disabled */
.rnb-cal-day.disabled {
    color: var(--rnb-gray2);
    cursor: not-allowed;
    pointer-events: none;
}

.rnb-cal-day.disabled .rnb-cal-day-inner {
    background: transparent !important;
    color: var(--rnb-gray2) !important;
    text-decoration: line-through;
    opacity: 0.4;
}

/* ---- Footer ---- */
.rnb-cal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 14px;
    border-top: 1px solid var(--rnb-border);
    background: var(--rnb-bg2);
}

.rnb-cal-btn-clear {
    background: none;
    border: none;
    color: var(--rnb-gray);
    font-size: 13px;
    cursor: pointer;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 8px 4px;
    font-family: var(--rnb-font-ui);
    transition: color 0.15s;
    text-decoration: none;
}

.rnb-cal-btn-clear:hover {
    color: var(--rnb-white);
}

.rnb-cal-btn-close {
    background: var(--rnb-gold);
    color: #000;
    border: none;
    border-radius: 0;
    padding: 11px 28px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    font-family: var(--rnb-font-ui);
    transition: background 0.15s, color 0.15s;
}

.rnb-cal-btn-close:hover {
    background: var(--rnb-gold-lt);
}

/* ---- Input cursor ---- */
#pickup-date,
#dropoff-date {
    cursor: pointer !important;
}

/* ============================================================
   Widget button & panel — [rnb_date_widget] shortcode
   ============================================================ */

.rnb-date-widget {
    display: block;
    width: 100%;
}

/* Panel mode (used in hero section) */
.rnb-date-widget--panel {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--rnb-gold-bdr);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.rnb-dp-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--rnb-border);
    font-family: var(--rnb-font-ui);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--rnb-gold);
}

.rnb-dp-panel-head svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    flex-shrink: 0;
}

/* Date fields row */
.rnb-dp-fields {
    display: flex;
    align-items: stretch;
    cursor: pointer;
}

.rnb-dp-field {
    flex: 1;
    padding: 16px 20px;
    transition: background 0.15s;
    min-width: 0;
}

.rnb-dp-field:hover {
    background: rgba(212,160,23,0.07);
}

.rnb-dp-field + .rnb-dp-field {
    border-left: 1px solid var(--rnb-border);
}

.rnb-dp-field-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--rnb-gold);
    margin-bottom: 5px;
    font-family: var(--rnb-font-ui);
}

.rnb-dp-field-value {
    font-size: 17px;
    color: var(--rnb-white);
    font-family: var(--rnb-font-ui);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.rnb-dp-field-value.placeholder {
    color: var(--rnb-gray);
    font-weight: 400;
    font-size: 15px;
}

.rnb-dp-field-time {
    font-size: 12px;
    color: var(--rnb-gold);
    margin-top: 4px;
    font-family: var(--rnb-font-ui);
    letter-spacing: 0.5px;
}

.rnb-dp-field-time.placeholder {
    color: var(--rnb-gray2);
}

.rnb-dp-arrow {
    display: flex;
    align-items: center;
    padding: 0 6px;
    color: var(--rnb-gold);
    opacity: 0.5;
    font-size: 18px;
    flex-shrink: 0;
    align-self: center;
}

/* Summary line */
.rnb-dp-summary {
    padding: 8px 20px;
    font-size: 12px;
    color: var(--rnb-gray);
    font-family: var(--rnb-font-ui);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-top: 1px solid var(--rnb-border);
    min-height: 34px;
    display: flex;
    align-items: center;
}

/* CTA button inside panel */
.rnb-date-widget--panel .rnb-date-widget-btn {
    display: block;
    width: 100%;
    padding: 16px 22px;
    background: var(--rnb-gold);
    color: #000;
    border: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    font-family: var(--rnb-font-ui);
    transition: background 0.15s;
    text-align: center;
    box-sizing: border-box;
}

.rnb-date-widget--panel .rnb-date-widget-btn:hover {
    background: var(--rnb-gold-lt);
}

/* Standalone button (when NOT in panel mode) */
.rnb-date-widget:not(.rnb-date-widget--panel) .rnb-date-widget-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--rnb-gold);
    color: #000;
    border: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    font-family: var(--rnb-font-ui);
    transition: background 0.15s;
}

.rnb-date-widget:not(.rnb-date-widget--panel) .rnb-date-widget-btn:hover {
    background: var(--rnb-gold-lt);
}

.rnb-date-widget-icon {
    font-size: 16px;
    line-height: 1;
}

.rnb-date-widget-dates {
    font-weight: 500;
    font-size: 12px;
    opacity: 0.8;
    display: none;
}

/* ============================================================
   Unavailability conflict message
   ============================================================ */

.rnb-date-conflict-msg {
    display: none;
    background: rgba(212,160,23,0.1);
    border: 1px solid var(--rnb-gold-bdr);
    padding: 9px 13px;
    margin: 8px 0 4px;
    font-size: 13px;
    color: var(--rnb-gold-lt);
    line-height: 1.4;
    font-family: var(--rnb-font-ui);
}

/* ============================================================
   Responsive — mobile bottom sheet
   ============================================================ */

@media (max-width: 720px) {
    #rnb-widget-overlay {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        max-height: 92vh;
        overflow-y: auto;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-top: 1px solid var(--rnb-gold-bdr);
    }

    .rnb-cal-months {
        flex-direction: column;
        align-items: center;
        padding: 14px 16px 10px;
        gap: 0;
    }

    .rnb-cal-months.has-time-panel {
        padding: 14px 16px 10px;
    }

    .rnb-cal-time-panel {
        width: 100%;
        border-right: none;
        border-bottom: none;
        padding-right: 0;
        padding-bottom: 0;
        margin-bottom: 0;
        max-height: 260px;
    }

    .rnb-cal-time-slots {
        grid-template-columns: repeat(4, 1fr);
    }

    .rnb-cal-month:last-child {
        display: none;
    }

    .rnb-cal-nav.prev { left: 4px; }
    .rnb-cal-nav.next { right: 4px; }

    .rnb-dp-fields {
        flex-direction: column;
    }

    .rnb-dp-field + .rnb-dp-field {
        border-left: none;
        border-top: 1px solid var(--rnb-border);
    }

    .rnb-dp-arrow {
        display: none;
    }
}