/**
 * HavenJapan Booking System - Styles
 * Clean, minimal design matching the site aesthetic
 */

/* ===== Variables ===== */
:root {
    --hjb-primary: #313131;
    --hjb-secondary: #6b6b6b;
    --hjb-border: #e6e6e6;
    --hjb-bg-light: #f9f9f9;
    --hjb-success: #0a7a2a;
    --hjb-error: #b00020;
    --hjb-radius: 12px;
    --hjb-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ===== v7.49.19 UI-only refinements =====
   1) Promo "Apply" button: ensure it never stretches to full width.
   2) Calendar header: pixel-perfect vertical alignment for Month + Year.
   3) Passenger number selector: vertically centered content.
*/

/* Promo Apply button safeguard (in case other rules win) */
#hjb-booking-container #hjb-apply-promo.hjb-btn {
    width: auto !important;
    min-width: max-content !important;
}

/* Calendar header alignment (scoped) - v7.49.22 hard reset for Flatsome select styles */
#hjb-booking-container .flatpickr-current-month {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: 34px !important;
    line-height: 34px !important;
}

/* Reset ALL selects inside the flatpickr header (Flatsome adds padding/min-height/margin-bottom etc.) */
#hjb-booking-container .flatpickr-current-month select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;

    height: 28px !important;
    line-height: 28px !important;
    padding: 0 8px !important;

    margin: 0 !important;
    margin-bottom: 0 !important;

    font: inherit !important;
    color: #fff !important;
    cursor: pointer !important;
}

/* Ensure month + year are treated identically */
#hjb-booking-container .flatpickr-current-month select.flatpickr-monthDropdown-months,
#hjb-booking-container .flatpickr-current-month select.hjb-year-select {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    vertical-align: middle !important;
}


/* Passenger number selector - ensure vertical centering */
#hjb-booking-container .hjb-number-selector {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#hjb-booking-container .hjb-number-input {
    height: 36px !important;
    line-height: 36px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}


/* ===== Container ===== */
.hjb-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* ===== Booking Widget ===== */
.hjb-booking-widget {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    padding: 16px 20px 20px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 100px;
    transition: box-shadow 0.3s ease;
}

.hjb-booking-widget:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Shell wrapper for smart-sticky positioning (keeps layout space) */
.hjb-booking-shell,
.hjb-sticky-shell-active {
    position: relative;
}

/* v7.49.27: Desktop-only sticky behavior */
@media (min-width: 969px) {
    .hjb-booking-widget {
        position: sticky;
        top: 100px;
        z-index: 10;
        transition: box-shadow 0.3s ease;
    }
    
    /* When locked (reached stop point), widget uses absolute positioning */
    .hjb-booking-widget.hjb-sticky-locked {
        position: absolute;
        width: 100%;
    }
    
    /* Ensure the shell container stretches to contain the left column content */
    .tour-right,
    .booking-widget-area {
        align-self: start;
    }
}

/* Ensure mobile/tablet never gets sticky behavior from JS overrides */
@media (max-width: 968px) {
    .hjb-booking-widget {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    .hjb-sticky-shell-active {
        position: static !important;
        min-height: auto !important;
    }
}

.hjb-widget-inner {
    position: relative;
}

/* v7.49: First step has no title, reduce spacing */
#hjb-step-1 .hjb-currency-selector-group {
    margin-top: 0;
}

.hjb-widget-title {
    font-family: 'IvyOra Display', serif;
    font-size: 22px;
    font-weight: 500;
    color: var(--hjb-primary);
    margin: 0 0 24px 0;
    letter-spacing: -0.02em;
}

/* ===== Steps ===== */
.hjb-step {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hjb-step-header {
    margin-bottom: 14px;
}

.hjb-btn-back {
    background: none;
    border: none;
    color: #6b6b6b;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 10px 6px 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    border-radius: 6px;
}

.hjb-btn-back:hover {
    color: var(--hjb-primary);
    background: #f5f5f5;
}

/* ===== Form Elements ===== */
.hjb-form-group {
    margin-bottom: 16px;
}

.hjb-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--hjb-primary);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-size: 11px;
}

.hjb-form-group label .required {
    color: var(--hjb-error);
}

.hjb-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .hjb-form-row {
        grid-template-columns: 1fr;
    }
}

.hjb-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    font-family: 'IvyOra Text', sans-serif;
    transition: all 0.2s ease;
    background: #fff;
}

.hjb-input:hover {
    border-color: #d0d0d0;
}

.hjb-input:focus {
    outline: none;
    border-color: var(--hjb-primary);
    box-shadow: 0 0 0 4px rgba(49, 49, 49, 0.08);
}

.hjb-help-text {
    font-size: 13px;
    color: var(--hjb-secondary);
    margin-top: 8px;
}

/* ===== Number Selector ===== */
.hjb-number-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--hjb-bg-light);
    border: 1px solid var(--hjb-border);
    border-radius: 8px;
    padding: 4px;
    width: fit-content;
}

.hjb-btn-minus,
.hjb-btn-plus {
    width: 36px;
    height: 36px;
    border: none;
    background: #fff;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.hjb-btn-minus:hover,
.hjb-btn-plus:hover {
    background: var(--hjb-border);
}

.hjb-number-input {
    width: 50px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
}

/* ===== Date Selector ===== */
.hjb-date-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--hjb-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
    background: #fff;
}

.hjb-date-display:hover {
    border-color: var(--hjb-primary);
}

.hjb-date-display.selected {
    border-color: var(--hjb-primary);
    background: var(--hjb-bg-light);
}

.hjb-date-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.hjb-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

#hjb-selected-date-text {
    flex: 1;
    font-size: 16px;
    color: var(--hjb-primary);
}

/* ===== Time Option ===== */
.hjb-time-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 2px solid var(--hjb-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.hjb-time-option.selected {
    border-color: var(--hjb-primary);
    background: var(--hjb-bg-light);
}

.hjb-time-option span {
    font-size: 16px;
    font-weight: 500;
    color: var(--hjb-primary);
}

/* ===== Vehicle Options ===== */
.hjb-vehicle-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.hjb-vehicle-option {
    padding: 18px;
    border: 2px solid var(--hjb-border);
    border-radius: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
}

.hjb-vehicle-option:hover {
    border-color: var(--hjb-secondary);
}

/* Disabled vehicle option (when party size exceeds capacity) */
.hjb-vehicle-option.hjb-vehicle-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.hjb-vehicle-option.hjb-vehicle-disabled:hover {
    border-color: var(--hjb-border);
}

.hjb-vehicle-disabled-msg {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #a11;
}

.hjb-vehicle-option.selected {
    border-color: var(--hjb-primary);
    background: var(--hjb-bg-light);
    position: relative;
}

.hjb-vehicle-option.selected::after {
    content: 'Selected ✓';
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--hjb-primary);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.hjb-vehicle-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 8px;
}

.hjb-vehicle-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--hjb-primary);
    flex: 1;
    line-height: 1.4;
}

.hjb-vehicle-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--hjb-primary);
    white-space: nowrap;
    padding-left: 12px;
}

.hjb-vehicle-features {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}

.hjb-vehicle-features li {
    font-size: 14px;
    color: var(--hjb-secondary);
    padding: 4px 0;
    padding-left: 24px;
    position: relative;
}

.hjb-vehicle-features li::before {
    content: '•';
    position: absolute;
    left: 8px;
    color: var(--hjb-primary);
}

/* ===== Promo Code ===== */

/* Promo Code input + Apply button alignment */
#hjb-booking-container .hjb-promo-input{
    display:flex;
    gap: 10px;
    align-items: stretch;
}
#hjb-booking-container #hjb-promo-code{
    flex: 1 1 auto;
    min-width: 0;
}
#hjb-booking-container #hjb-apply-promo{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 18px; /* match input vertical rhythm */
    line-height: normal;
    white-space: nowrap;
    width: auto !important; /* override .hjb-btn { width: 100% } */
    height: auto;
}

.hjb-promo-message {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
}

.hjb-promo-message.success {
    background: #e8f5e9;
    color: var(--hjb-success);
    border-left: 3px solid var(--hjb-success);
}

.hjb-promo-message.error {
    background: #ffebee;
    color: var(--hjb-error);
    border-left: 3px solid var(--hjb-error);
}

/* ===== Buttons ===== */
.hjb-btn {
    width: 100%;
    padding: 12px 18px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'IvyOra Text', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: inline-block;
    letter-spacing: 0.01em;
}

.hjb-btn-primary {
    background: var(--hjb-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(49, 49, 49, 0.12);
}

.hjb-btn-primary:hover:not(:disabled) {
    background: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(49, 49, 49, 0.16);
}

.hjb-btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.hjb-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}


.hjb-btn-secondary {
    background: var(--hjb-bg-light);
    color: var(--hjb-primary);
    border: 1px solid var(--hjb-border);
    padding: 12px 20px;
    width: auto;
}

.hjb-btn-secondary:hover:not(:disabled) {
    background: var(--hjb-border);
}

/* ===== Booking Summary ===== */
.hjb-booking-summary {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 2px solid var(--hjb-border);
}

.hjb-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.hjb-summary-item strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--hjb-primary);
    flex: 1;
}

.hjb-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--hjb-primary);
}

.hjb-summary-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: var(--hjb-secondary);
}

.hjb-booking-summary-mini {
    background: var(--hjb-bg-light);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.hjb-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 15px;
}

.hjb-summary-row.hjb-summary-total {
    border-top: 2px solid var(--hjb-border);
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 700;
    font-size: 16px;
}

.hjb-discount-amount {
    color: var(--hjb-success);
    font-weight: 600;
}

/* ===== Payment Element ===== */
#hjb-payment-element {
    margin-bottom: 20px;
}

/* ===== Messages ===== */
.hjb-message {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 12px;
}

.hjb-message.success {
    background: #e8f5e9;
    color: var(--hjb-success);
    border-left: 3px solid var(--hjb-success);
}

.hjb-message.error {
    background: #ffebee;
    color: var(--hjb-error);
    border-left: 3px solid var(--hjb-error);
}

/* Hide unwanted error messages from other plugins */
.hjb-booking-widget .error:not(.hjb-message) {
    display: none !important;
}

/* ===== Mobile Responsive ===== */
/* v7.49.26: Mobile bottom bar → openable drawer (improved bar sizing + WebView-safe positioning)
   - Closed state shows only a sticky "Book this tour" bar
   - Open state expands into a bottom sheet (scrolls inside)
   - Closed state does NOT block clicks on the page
*/
@media (max-width: 968px) {
    /* v7.49.36: When the drawer is open, lock the background to prevent the page
       from being draggable (common in iOS/WebViews on Step 2). */
    html.hjb-drawer-open,
    body.hjb-drawer-open {
        overflow: hidden;
        width: 100%;
    }

    body.hjb-drawer-open {
        /* body is set to position:fixed in JS to fully lock scroll */
        touch-action: none;
    }

    /* Prevent iOS zoom on input focus - minimum 16px font-size */
    .hjb-booking-widget input,
    .hjb-booking-widget select,
    .hjb-booking-widget textarea {
        font-size: 16px !important;
        /* Smooth transitions when focusing/blurring */
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    
    /* Prevent any transform/scale on focus that could cause zoom-like effect */
    .hjb-booking-widget input:focus,
    .hjb-booking-widget select:focus,
    .hjb-booking-widget textarea:focus {
        transform: none !important;
        outline: none;
    }
    
    /* Ensure currency select doesn't zoom */
    .hjb-booking-widget #hjb-currency-select {
        font-size: 16px !important;
        -webkit-appearance: none;
        appearance: none;
    }
    
    /* Flatpickr calendar - ensure 16px minimum on all interactive elements */
    .flatpickr-calendar {
        font-size: 16px !important;
    }
    
    .flatpickr-calendar input,
    .flatpickr-calendar select,
    .flatpickr-current-month,
    .flatpickr-current-month input,
    .flatpickr-current-month select,
    .flatpickr-monthDropdown-months,
    .cur-year,
    .numInputWrapper input,
    .hjb-year-select {
        font-size: 16px !important;
    }
    
    .flatpickr-day,
    .flatpickr-weekday {
        font-size: 14px !important;
    }
    
    /* Prevent the hidden date input from triggering zoom */
    #hjb-booking-date {
        font-size: 16px !important;
    }
    
    .hjb-booking-widget {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;

        /* v7.49.36: Prevent horizontal panning of the widget on iOS/WebViews */
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;

        /* Lift slightly to avoid in-app browser toolbars (WP preview / WebView)
           Safe on all devices; env() adds extra on iOS when relevant. */
        bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);

        border-radius: 16px 16px 0 0;
        z-index: 1000;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
        background: #fff;

        /* CLOSED by default: bar only */
        max-height: 96px;
        overflow: hidden;
        transition: max-height 0.25s ease;
        padding: 0;
        
        /* Prevent dragging/moving the widget */
        touch-action: pan-y;
        -webkit-user-drag: none;
        user-select: none;
    }

    /* The injected sticky bar (button) */
    .hjb-mobile-bar {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;

        border: 0;
        border-radius: 16px 16px 0 0;
        background: #313131;
        color: #fff;

        font-weight: 800;
        font-size: 17px;
        letter-spacing: 0.02em;

        cursor: pointer;
        touch-action: manipulation;

        /* Make it a proper rectangle and safe-area aware */
        padding: 18px 20px calc(env(safe-area-inset-bottom, 0px) + 18px);
        line-height: 1;
    }

    .hjb-mobile-bar:focus { outline: none; }
    .hjb-mobile-bar-icon { font-size: 16px; opacity: 0.9; }

    /* OPEN state */
    .hjb-booking-widget.hjb-mobile-open {
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;

        /* Restore widget padding when open */
        padding: 20px 16px;
    }

    /* When closed: disable interactions inside the widget, except the bar */
    .hjb-booking-widget:not(.hjb-mobile-open) .hjb-widget-inner {
        pointer-events: none;
        opacity: 0;
    }
    .hjb-booking-widget.hjb-mobile-open .hjb-widget-inner {
        pointer-events: auto;
        opacity: 1;
    }

    /* Keep inner containers from creating sideways scroll */
    .hjb-booking-widget .hjb-widget-inner,
    .hjb-vehicle-list,
    .hjb-vehicle-option {
        overflow-x: hidden;
    }

    .hjb-vehicle-list {
        max-height: 300px;
    }
}
@media (max-width: 640px) {
    .hjb-booking-widget {
        padding: 20px 16px;
    }

    .hjb-widget-title {
        font-size: 18px;
    }

    .hjb-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* ===== Loading States ===== */
.hjb-loading {
    pointer-events: none;
    opacity: 0.6;
    position: relative;
}

.hjb-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--hjb-border);
    border-top-color: var(--hjb-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== Scrollbar Styling ===== */
.hjb-vehicle-list::-webkit-scrollbar {
    width: 8px;
}

.hjb-vehicle-list::-webkit-scrollbar-track {
    background: var(--hjb-bg-light);
    border-radius: 4px;
}

.hjb-vehicle-list::-webkit-scrollbar-thumb {
    background: var(--hjb-border);
    border-radius: 4px;
}

.hjb-vehicle-list::-webkit-scrollbar-thumb:hover {
    background: var(--hjb-secondary);
}

/* ===== Flatpickr Customization ===== */
.flatpickr-calendar {
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e0e0e0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    padding: 0 !important;
    width: 320px !important;
    overflow: hidden !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    display: none !important;
}

.flatpickr-months {
    background: #313131 !important;
    padding: 16px 12px !important;
    border-radius: 12px 12px 0 0 !important;
}

.flatpickr-month {
    height: 32px !important;
}

.flatpickr-current-month {
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    height: 32px !important;
    line-height: 32px !important;
}

/* Flatpickr header alignment fixes (month + custom year dropdown) */
#hjb-booking-container .flatpickr-current-month{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap: 10px !important;
    height: 42px !important;
    line-height: normal !important;
    padding: 0 44px !important; /* keep room for arrows */
    box-sizing: border-box !important;
}
#hjb-booking-container .flatpickr-current-month .cur-month,
#hjb-booking-container .flatpickr-current-month .flatpickr-monthDropdown-months{
    margin: 0 !important;
    line-height: normal !important;
    padding: 4px 8px !important;
}
#hjb-booking-container .flatpickr-current-month .hjb-year-select{
    margin: 0 !important;
    line-height: normal !important;
    padding: 4px 8px !important;
    display:inline-flex !important;
    align-items:center !important;
}

/* Month dropdown - white text */
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding: 4px 8px !important;
    border: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px !important;
}

/* v7.49.7 UI ONLY: custom year dropdown injected into the header */
.flatpickr-current-month select.hjb-year-select {
    background: transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    border: none !important;
    margin-left: 6px !important;
    padding: 4px 8px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
}

.flatpickr-current-month select.hjb-year-select:hover,
.flatpickr-current-month select.hjb-year-select:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px !important;
    outline: none !important;
}

/*
  Calendar header (UI-only)
  IMPORTANT:
  - We inject a custom year dropdown (select.hjb-year-select).
  - Previous versions forced Flatpickr's default year input (.numInputWrapper/input.cur-year)
    to be visible with !important, which caused duplicated year UI and layout bugs.
  - We remove those forcing rules and instead:
      (a) stabilize the header layout (month + year on one line)
      (b) hide the default year input ONLY when our custom dropdown exists
*/

/* Prevent clipping of header controls */
.flatpickr-months,
.flatpickr-month,
.flatpickr-current-month {
    overflow: visible !important;
}

/* Stable header layout */
.flatpickr-current-month {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 44px !important; /* leave space for prev/next */
}



/* v7.49.21: hard reset Flatsome select styles inside the calendar header */
#hjb-booking-container .flatpickr-current-month .flatpickr-monthDropdown-months,
#hjb-booking-container .flatpickr-current-month select.hjb-year-select {
    height: 32px !important;
    line-height: 32px !important;
    min-height: 0 !important;
    padding: 0 8px !important;
    margin: 0 !important;

    width: auto !important;
    max-width: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    background-color: transparent !important;
    background-image: none !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}
/* Keep month visible (text or dropdown) */
.flatpickr-current-month .cur-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 60% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Custom year dropdown sizing */
.flatpickr-current-month select.hjb-year-select {
    flex: 0 0 auto !important;
    max-width: 40% !important;
    z-index: 10 !important;
}

/* Hide Flatpickr's default year UI ONLY when custom dropdown exists */
.flatpickr-current-month:has(select.hjb-year-select) .numInputWrapper {
    display: none !important;
}

/* Navigation arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    fill: #fff !important;
    padding: 10px !important;
    transition: opacity 0.2s !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    opacity: 0.7 !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    width: 14px !important;
    height: 14px !important;
    fill: #fff !important;
}

/* Weekdays header */
.flatpickr-weekdays {
    background: #fff !important;
    padding: 12px 16px 8px 16px !important;
}

.flatpickr-weekday {
    color: #999 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
}

/* Days container */
.flatpickr-innerContainer {
    padding: 0 !important;
}

.flatpickr-rContainer {
    width: 100% !important;
}

.flatpickr-days {
    width: 100% !important;
    padding: 8px 16px 16px 16px !important;
}

.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

/* Individual days - properly sized and spaced */
.flatpickr-day {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    max-width: 36px !important;
    flex: 0 0 36px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #313131 !important;
    border: none !important;
    transition: all 0.15s ease !important;
}

.flatpickr-day:hover {
    background: #f0f0f0 !important;
    border: none !important;
}

.flatpickr-day.today {
    background: transparent !important;
    border: 2px solid #313131 !important;
    font-weight: 700 !important;
}

.flatpickr-day.today:hover {
    background: #f0f0f0 !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #313131 !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
}

.flatpickr-day.disabled,
.flatpickr-day.flatpickr-disabled {
    color: #ccc !important;
    background: transparent !important;
    text-decoration: line-through !important;
    cursor: not-allowed !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #ccc !important;
}

.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: #f5f5f5 !important;
}

/* Datepicker input styling */
.hjb-datepicker {
    background: #fff !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.hjb-datepicker::placeholder {
    color: #9b9b9b !important;
}

.hjb-datepicker:focus {
    outline: none !important;
    border-color: #313131 !important;
    box-shadow: 0 0 0 3px rgba(49, 49, 49, 0.1) !important;
}

/* ===== v7.43: Currency Selector (original styling) ===== */
.hjb-currency-selector-group {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hjb-border);
}

.hjb-currency-selector-group label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--hjb-primary);
    margin-bottom: 10px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.hjb-currency-dropdown {
    position: relative;
}

.hjb-currency-select {
    width: 100%;
    padding: 12px 36px 12px 12px;
    border: 1px solid var(--hjb-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--hjb-primary);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.2s;
}

.hjb-currency-select:hover {
    border-color: var(--hjb-secondary);
}

.hjb-currency-select:focus {
    outline: none;
    border-color: var(--hjb-primary);
    box-shadow: 0 0 0 3px rgba(49, 49, 49, 0.1);
}

.hjb-currency-select option {
    padding: 8px;
}

/* Currency indicator in summary */
.hjb-currency-badge {
    display: inline-block;
    background: var(--hjb-bg-light);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--hjb-secondary);
    margin-left: 8px;
}

/* ===== v7.49: Inline Error Toast ===== */
.hjb-error-toast {
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    z-index: 10001;
    animation: hjb-toast-slide-in 0.3s ease-out;
    padding: 0 12px;
}

/* Position toast relative to widget */
.hjb-booking-widget {
    position: relative;
    overflow: visible;
}

@keyframes hjb-toast-slide-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hjb-toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1a1a1a;
    color: #fff;
    padding: 14px 18px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    font-size: 14px;
    font-weight: 500;
    max-width: 100%;
}

.hjb-toast-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: #ff6b6b;
}

#hjb-toast-message {
    flex: 1;
    line-height: 1.4;
}

.hjb-toast-close {
    background: none;
    border: none;
    color: #888;
    font-size: 18px;
    cursor: pointer;
    padding: 0 0 0 8px;
    line-height: 1;
    transition: color 0.2s;
}

.hjb-toast-close:hover {
    color: #fff;
}

/* Toast on mobile - fixed at top of screen for visibility */
@media (max-width: 968px) {
    .hjb-error-toast {
        position: fixed;
        top: 50%;
        bottom: auto;
        left: 16px;
        right: 16px;
        transform: translateY(-50%);
        padding: 0;
        z-index: 10002;
    }
}

/* =====================================================================
   v7.49.18 UI POLISH (SAFE OVERRIDES)
   - Calendar header: align Month + Year on the same baseline.
   - Passenger selector: make the grey box symmetric and center controls.
   Scoped to #hjb-booking-container only.
===================================================================== */

/* 1) Calendar: baseline alignment for Month + custom Year dropdown */
#hjb-booking-container .flatpickr-current-month{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

#hjb-booking-container .flatpickr-current-month .flatpickr-monthDropdown-months,
#hjb-booking-container .flatpickr-current-month .cur-month,
#hjb-booking-container .flatpickr-current-month select.hjb-year-select{
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

/* Avoid the year looking "higher" due to native select rendering */
#hjb-booking-container .flatpickr-current-month select.hjb-year-select{
    position: relative !important;
    top: 0 !important;
}

/* 2) Passenger selector: full-width + centered controls inside grey box */
#hjb-booking-container .hjb-number-selector{
    width: 100% !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    gap: 14px !important;
    box-sizing: border-box !important;
}

#hjb-booking-container .hjb-number-input{
    width: 56px !important;
}


/* ===== v7.49.20 UI FIXES (Flatsome-safe) =====
   Goals:
   - Calendar header: Month + Year perfectly aligned on the same baseline.
   - Passenger selector: full-width grey box with controls perfectly centered (both axes).
   Note: These are scoped to #hjb-booking-container to avoid theme-wide side effects.
*/

/* 1) Flatpickr header (Month + Year alignment) */
#hjb-booking-container .flatpickr-months .flatpickr-current-month{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: 42px !important;
    line-height: 42px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* Force both dropdowns to behave like identical inline-flex controls */
#hjb-booking-container .flatpickr-current-month .flatpickr-monthDropdown-months,
#hjb-booking-container .flatpickr-current-month select.hjb-year-select{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    vertical-align: middle !important;
    position: relative !important;
    top: 0 !important;
    transform: translateY(0) !important;
}

/* Some themes add weird select line-heights / font rendering offsets */
#hjb-booking-container .flatpickr-current-month select.hjb-year-select{
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* 2) Passenger selector centering */
#hjb-booking-container .hjb-number-selector{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    min-height: 72px !important; /* keeps the grey box consistent */
    box-sizing: border-box !important;
}

/* Reset any theme button defaults that can push content off-center */
#hjb-booking-container .hjb-number-selector .hjb-btn-minus,
#hjb-booking-container .hjb-number-selector .hjb-btn-plus{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    height: 44px !important;
    width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Center the number perfectly */
#hjb-booking-container .hjb-number-selector .hjb-number-input{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 44px !important;
    height: 44px !important;
    width: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* =====================================================================
   v7.49.23 CALENDAR HEADER ALIGNMENT (FINAL)
   Problem: Flatpickr calendar is often appended to <body>, so styles scoped
   to #hjb-booking-container don't apply.
   Fix: we add .hjb-flatpickr to the calendarContainer in JS and target it.
===================================================================== */

.hjb-flatpickr .flatpickr-months,
.hjb-flatpickr .flatpickr-month,
.hjb-flatpickr .flatpickr-current-month {
    overflow: visible !important;
}

/* Remove Flatpickr's default absolute positioning that causes offset */
.hjb-flatpickr .flatpickr-current-month {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;

    width: 100% !important;
    padding: 0 44px !important; /* room for arrows */
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* Hard reset theme styles on the dropdowns inside the header */
.hjb-flatpickr .flatpickr-current-month select,
.hjb-flatpickr .flatpickr-current-month .cur-month {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    height: 32px !important;
    line-height: 32px !important;
    min-height: 0 !important;
    padding: 0 10px !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* Ensure our injected year select is identical to the month control */
.hjb-flatpickr .flatpickr-current-month select.hjb-year-select {
    font-size: inherit !important;
    font-weight: inherit !important;
}