/**
 * Frontend Styles for Hotel Booking Plugin (Dark Premium Theme)
 */

.hbe-booking-wrapper {
    background: #121212;
    /* Dark Background */
    color: #e0e0e0;
    padding: 30px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    max-width: 100%;
    /* Was 100%, but constrained by parent probably */
    width: 100%;
    /* Was 90% */
    margin: 0 auto;
    overflow: visible;
    /* Prevent clipping */
    box-sizing: border-box;
}

h3 {
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 18px;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
    font-weight: 500;
}

/* Steps Indicator */
.hbe-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
}

.hbe-step {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #333;
    color: #777;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 2;
    margin: 0 10px;
}

.hbe-step.active {
    background: #e0e0e0;
    color: #121212;
}

.hbe-step-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 2px;
    background: #333;
    z-index: 1;
}

/* Form Layout */
.hbe-booking-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hbe-form-row {
    display: flex;
    gap: 15px;
}

.hbe-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hbe-label {
    margin-bottom: 12px;
    /* Increased from 8px */
    font-size: 13px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hbe-input {
    background: #e0e0e0;
    /* Light gray input as per image */
    color: #000;
    border: none;
    padding: 12px;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
}

.hbe-input:focus {
    outline: 2px solid #888;
}

/* Calendar Wrapper */
.hbe-calendar-container {
    background: transparent;
    margin: 10px 0;
    display: flex;
    justify-content: center;
}

/* Guest Inputs */
.hbe-guest-section {
    margin-top: 10px;
    border-top: 1px solid #333;
    padding-top: 10px;
}

.hbe-guest-row {
    margin-bottom: 10px;
}

/* Dynamic Guest Details */
.hbe-guest-detail-row {
    background: #1e1e1e;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.hbe-guest-detail-title {
    font-size: 12px;
    color: #888;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.hbe-guest-inputs-wrapper {
    display: flex;
    gap: 10px;
}

/* Payment Options */
.hbe-payment-options {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.hbe-payment-option {
    display: flex;
    align-items: center;
    gap: 5px;
}

.hbe-payment-option input {
    margin: 0;
}

.hbe-payment-option label {
    font-size: 14px;
}

/* Buttons */
.hbe-form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    text-align: right;
    /* Fallback */
    width: 100%;
}

.hbe-action-buttons {
    display: flex;
    justify-content: space-between;
    /* Prev/Next spread apart or modify if needed */
    gap: 10px;
}

.hbe-submit-btn {
    width: auto;
    min-width: 200px;
    padding: 15px 30px;
    background: #d4a373;
    /* Gold/Bronze accent */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.hbe-submit-btn:hover {
    background: #c29263;
}

/* Messages */
.hbe-message {
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
    display: none;
    text-align: center;
    font-size: 14px;
}

.hbe-success {
    background: #d4edda;
    color: #155724;
}

.hbe-error {
    background: #f8d7da;
    color: #721c24;
}

/* Flatpickr Dark Theme Overrides */
.flatpickr-calendar,
.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer {
    width: 100% !important;
    max-width: 100% !important;
}

.flatpickr-innerContainer {
    justify-content: center;
}

/* Use GRID for perfect 7-col alignment */
.flatpickr-days {
    padding: 0 5px;
    /* Optional safe padding */
}

.dayContainer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
    /* Spacing between days */
    justify-items: center !important;
    padding: 0 !important;
}

/* Align Weekdays using Grid too */
.flatpickr-weekdays {
    width: 100% !important;
}

.flatpickr-weekdaycontainer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px !important;
    padding: 0 5px;
    /* Match days padding if any */
}

span.flatpickr-weekday {
    display: block !important;
    text-align: center !important;
}

.flatpickr-day {
    border-radius: 4px !important;
    /* Slightly rounded */
    background: #E09E65; /* Free days color */
    color: #fff; /* White text */
    margin: 0 !important;
    /* Reset margin, use gap */
    border: none !important;
    width: 100% !important;
    /* Fill grid cell */
    max-width: none !important;
    font-weight: 500;
    /* Height handled by basic Flatpickr or override below */
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: #000;
    color: #fff;
    border-color: #000;
}

.flatpickr-day.inRange {
    background: #333;
    color: #fff;
    box-shadow: none;
    border-color: #333;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.hbe-reserved {
    background-image: repeating-linear-gradient(45deg, var(--hbe-occ-c1, #000), var(--hbe-occ-c1, #000) 5px, var(--hbe-occ-c2, #222) 5px, var(--hbe-occ-c2, #222) 10px) !important;
    background-color: transparent !important;
    color: var(--hbe-occ-color, #fff) !important;
    opacity: var(--hbe-occ-opacity, 0.8) !important;
}

.flatpickr-months {
    background: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 5px;
    color: #000;
    position: relative !important;
    /* Ensure context for arrows */
}

.flatpickr-current-month,
.flatpickr-monthDropdown-months {
    color: #000 !important;
}

/* Ciphered Dates (Next/Prev Month) - CROSSED OUT */
/* Ciphered Dates (Next/Prev Month) - CROSSED OUT */
/* Styles removed as they were empty */

.flatpickr-day.prevMonthDay::after,
.flatpickr-day.nextMonthDay::after {
    content: none !important;
}


/* Navigation Arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    position: absolute !important;
    top: 5px !important;
    padding: 5px !important;
    height: 30px !important;
    width: 30px !important;
    z-index: 2 !important; /* Reduced from 100 to prevent overlapping site navigation */
    cursor: pointer !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    width: 14px;
    height: 14px;
    fill: #000 !important;
    /* Make sure they are visible on light bg */
    transition: fill 0.2s;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: #d4a373 !important;
    /* Hover color */
}

/* Position them explicitly if needed to be "links und rechts" more clearly */
.flatpickr-prev-month {
    left: 10px !important;
}

.flatpickr-next-month {
    right: 10px !important;
}

span.flatpickr-weekday {
    color: #aaa !important;
}

/* V4: Calendar Prices */
.hbe-day-price {
    display: block;
    font-size: 11px;
    /* Increased from 10px */
    line-height: 1;
    color: #888;
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    text-align: center;
    pointer-events: none;
    font-weight: bold;
}

.flatpickr-day {
    position: relative;
    /* Ensure relative for absolute child */
    height: 60px !important;
    /* INCREASED from 45px */
    display: flex !important;
    align-items: flex-start !important;
    /* Align date number to top */
    padding-top: 5px !important;
    justify-content: center !important;
    line-height: normal !important;
}

.flatpickr-day.selected .hbe-day-price {
    color: #fff;
}

/* V4: Reserved Dates Distinct Style (Now combined with disabled) */

/* Rule Restrictions */
.flatpickr-calendar.picking-start .flatpickr-day.hbe-no-checkin {
    opacity: 0.2 !important;
    pointer-events: none !important;
    background: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(255, 0, 0, 0.1) 5px, rgba(255, 0, 0, 0.1) 10px);
    color: #888 !important;
}

.flatpickr-calendar.picking-end .flatpickr-day.hbe-no-checkout {
    /* Safe to disable pointer events? 
       If disabled, hovering over it generally doesn't trigger 'mouseover' on the element.
       Flatpickr relies on mouseover for range.
       However, testing often shows it works if only one day is skipped.
       Let's try pointer-events: none to satisfy "cannot select".
    */
    opacity: 0.2 !important;
    pointer-events: none !important;
    background: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(255, 0, 0, 0.1) 5px, rgba(255, 0, 0, 0.1) 10px);
    color: #888 !important;
}

/* V4: Services List */
.hbe-services-list {
    margin-bottom: 20px;
    background: #1e1e1e;
    padding: 10px;
    border-radius: 4px;
}

.hbe-service-item {
    margin-bottom: 5px;
}

.hbe-service-item label {
    font-size: 14px;
    color: #ddd;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* V4.13: Price Breakdown */
.hbe-price-breakdown-container {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hbe-price-breakdown {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
}

.hbe-price-breakdown td {
    padding: 8px 10px;
    color: #ccc;
}

.hbe-price-breakdown .hbe-price-col {
    text-align: right;
    color: #fff;
}

.hbe-breakdown-total td {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 5px;
    margin-top: 5px;
    color: #d4a373;
    /* Gold accent */
    font-size: 15px;
}