/*
 * Plugin: Streamline API Plugin (Elementor Component Styles)
 * Version: 2.9 - Stable Base
 */

/* =========================================
   Homepage Property Grid
   ========================================= */
.property-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.property-card-link { text-decoration: none; }
.property-card { border: 1px solid #eee; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: all 0.3s ease; display: flex; flex-direction: column; background: #fff; overflow: hidden; height: 100%; }
.property-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.property-card-image-wrapper { position: relative; }
.property-card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.property-card-price { position: absolute; bottom: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 5px 12px; border-radius: 20px; font-size: 0.9em; font-weight: 600; }
.property-card-price span { font-weight: 700; font-size: 1.1em; }
.property-card-content { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.property-card-content h3 { margin: 0 0 10px 0; font-size: 1.25em; color: #333; line-height: 1.3; }
.property-card-content p { margin: 0; color: #666; font-size: 0.9em; flex-grow: 1; }

/* =========================================
   Property Details Page Components
   ========================================= */
.property-main-title { font-size: 2.8em; margin-bottom: 10px; color: #2c3e50; line-height: 1.2; }
.property-nightly-rate { font-size: 1.2em; color: #555; margin: 10px 0; }
.property-nightly-rate span { color: #b67b00; font-weight: bold; }
.property-key-info { display: flex; flex-wrap: wrap; gap: 25px; font-size: 1.1em; color: #555; margin: 15px 0 25px 0; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.property-key-info span { display: flex; align-items: center; gap: 8px; }
.property-key-info .fas { color: #b67b00; }
.property-ratings { color: #666; font-size: 1em; }
.property-address { color: #666; font-style: italic; }
.property-description { line-height: 1.8; font-size: 1.1em; margin: 20px 0; }
.property-amenities-section h3 { font-size: 1.8em; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.property-amenities-list { display: flex; flex-wrap: wrap; gap: 10px; }
.amenity-tag { background-color: #f5f5f5; color: #555; padding: 8px 16px; border-radius: 20px; font-size: 0.9em; }
.property-virtual-tour { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 30px 0; border-radius: 12px; }
.property-virtual-tour iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Splide Carousel */
.streamline-splide-wrapper { margin-bottom: 30px; }
.main-carousel .splide__slide img { border-radius: 12px; }
.thumb-carousel { margin-top: 15px; }
.thumb-carousel .splide__slide { opacity: 0.5; transition: opacity 0.3s; cursor: pointer; border-radius: 8px; }
.thumb-carousel .splide__slide.is-active { opacity: 1; border: 2px solid #b67b00; }
.thumb-carousel .splide__slide img { border-radius: 6px; }

/* Booking Form */
.booking-form-container { background-color: #f9f9f9; border: 1px solid #ddd; padding: 30px; border-radius: 12px; }
.booking-form-container h3 { margin-top: 0; text-align: center; font-size: 1.6em; }
.booking-form-container p { margin-bottom: 15px; }
.booking-form-container label { font-weight: 600; display: block; margin-bottom: 5px; font-size: 0.9em; }
.booking-form-container input, .booking-form-container select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; }
.booking-form-container .form-row-split { display: flex; gap: 15px; }
.booking-form-container .form-row-split p { flex: 1; }
.booking-form-container button { background-color: #b67b00; color: white !important; padding: 15px; border: none; border-radius: 8px; font-weight: bold; width: 100%; font-size: 1.1em; cursor: pointer; transition: background-color 0.3s ease; }
.booking-form-container button:hover { background-color: #a26d00; }
.price-summary { background: #fff; padding: 20px; border-radius: 8px; margin-bottom: 25px; border: 1px solid #e0e0e0; }
.price-summary ul { list-style: none; padding: 0; margin: 10px 0 0 0; }
.price-summary li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee; }
.price-summary li:last-child { border-bottom: none; }
.price-summary .total-price { font-size: 1.3em; font-weight: bold; text-align: right; margin-top: 10px; color: #333; }
.booking-success, .booking-error { padding: 15px; border-radius: 8px; margin: 10px 0; text-align: center; }
.booking-success { background-color: #d4edda; color: #155724; }
.booking-error { background-color: #f8d7da; color: #721c24; }

/* =========================================
   Custom Streamline Calendar Styles
   ========================================= */

/* General Calendar Appearance */
.streamline-custom-calendar {
    max-width: 915px;
    margin: 40px auto;
    /* Add a nice rounded border and shadow to match screenshot style */
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 15px; /* Inner padding for the calendar grid */
    background: #fff;
}

/* Day Cell Styling */
/* This ensures the day numbers are always visible */
.fc .fc-daygrid-day-number {
    position: relative;
    z-index: 2; 
    font-weight: 600;
}

/* Unavailable Days (The main block color) */
/* This is the background color for all booked days (will be visually overridden by diagonals) */
.fc .fc-daygrid-event-harness .booked-day {
    background-color: #f7f7f7 !important; /* Unavailable (Light Gray) */
    border-color: #f7f7f7 !important;
}

/* ---------------------------------
   CHECK-IN/CHECK-OUT STYLING (Diagonal Effect)
   --------------------------------- */

/* The Check-In Day (Color diagonal for the arrival date) */
/* White corner is top-right, Blue corner is bottom-left */
.fc-daygrid-day-frame .check-in-day {
    /* background: linear-gradient(to bottom left, #ffffff 50%, #38c5f5 50%) !important; */
    opacity: 1 !important;
}

/* The Check-Out Day (Color diagonal for the departure date) */
/* Gray corner is top-left, Blue corner is bottom-right */
.fc-daygrid-day-frame .check-out-day {
    /* background: linear-gradient(to top right, #f7f7f7 50%, #38c5f5 50%) !important; */
    opacity: 1 !important;
}

/* =========================================
   Payment Form Enhancements
   ========================================= */
.payment-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}
.payment-section h3 {
    font-size: 1.6em;
    margin-bottom: 20px;
    text-align: left;
}
.expiry-fields {
    display: flex;
    gap: 10px;
}
.expiry-fields select {
    flex: 1;
}
#payment-errors {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

/* =========================================
   Booking Status Messages
   ========================================= */
.booking-pending {
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    text-align: center;
    background-color: #fff3cd; /* Light yellow */
    color: #856404; /* Dark yellow text */
    border: 1px solid #ffeeba;
}


/* ---------------------------------
   Legend Styling
   --------------------------------- */
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    justify-content: center;
    margin: 30px 0;
    padding: 15px 0;
}
.legend-item {
    display: flex;
    align-items: center;
    font-size: 1em;
    color: #333;
}
/* Legend Boxes */
.legend-box {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    margin-right: 8px;
    border: 1px solid #dddddd;
}
.available-box {
    /* background-color: #38c5f5; /* Full available color (Blue) */ */
    opacity: 0.8;
    background: #fff !important;
}
.booked-box {
    background-color: #e6d0b0 !important; /* Unavailable color (Light Gray) */
}

/* Legend Diagonal Boxes (to visualize Check-in/out) */
.legend-checkin, .legend-checkout {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    margin-right: 8px;
    position: relative;
    overflow: hidden;
}
/* Check-In Legend (White on top-right, Blue on bottom-left) */
.legend-checkin {
    background: #bf760d !important;
}
/* Check-Out Legend (Gray on top-left, Blue on bottom-right) */
.legend-checkout {
    background: #bf760d !important;
}




/* Per-day classes added by JS */
.streamline-custom-calendar .fc-daygrid-day.available-day { background: #ffffff; }
.streamline-custom-calendar .fc-daygrid-day.unavailable-day { background: #e53e3e; color: #fff; }
.streamline-custom-calendar .fc-daygrid-day.check-in-day { background: rgba(193,119,2,0.18); color: #fff; }
.streamline-custom-calendar .fc-daygrid-day.check-out-day { background: rgba(193,119,2,0.12); color: #fff; }

/* Ensure day number is visible on colored backgrounds */
.streamline-custom-calendar .fc-daygrid-day.unavailable-day .fc-daygrid-day-number,
.streamline-custom-calendar .fc-daygrid-day.check-in-day .fc-daygrid-day-number,
.streamline-custom-calendar .fc-daygrid-day.check-out-day .fc-daygrid-day-number {
    color: #fff !important;
}

/* Keep available days dark text */
.streamline-custom-calendar .fc-daygrid-day.available-day .fc-daygrid-day-number {
    color: #545454;
}

/* selected circle still works */
.streamline-custom-calendar .fc-daygrid-day.selected .fc-daygrid-day-number::before {
    background: #c17702;
}


.booked-day, .streamline-custom-calendar .fc-daygrid-day.unavailable-day {
    background: #f7f7f7 !important;
}

.fc-daygrid-day-frame .check-in-day, .fc-daygrid-day-frame .check-out-day, .fc .fc-daygrid-day-bg .fc-bg-event {
    color: #000;
    background: #BF760D !important;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.fc .fc-bg-event .fc-event-title {
    font-size: 12px !important;
    font-weight: 600;
    text-align: center;
}

.streamline-custom-calendar .fc-daygrid-day.unavailable-day .fc-daygrid-day-number, .streamline-custom-calendar .fc-daygrid-day.check-in-day .fc-daygrid-day-number, .streamline-custom-calendar .fc-daygrid-day.check-out-day .fc-daygrid-day-number {
    color: #000 !important;
    opacity: .3;
}

.fc-daygrid-day-top {
    display: flex !important;
    height: 100% !important;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.fc .fc-button-group > .fc-button {
    background: #bf760d !important;
    border: 1px solid #fff;
}

.fc-direction-ltr .fc-toolbar > * > :not(:first-child) {background: #bf760d !important;border: 1px solid #fff;opacity: 1 !important;}

button.fc-today-button.fc-button.fc-button-primary {
    text-transform: uppercase !important;
}