/*
 Theme Name:   Grassmere
 Theme URI:    https://www.elegantthemes.com/gallery/divi/
 Description:  Grassmere Child Theme for Divi
 Author:       Elegant Themes
 Author URI:   https://www.elegantthemes.com
 Template:     Divi
 Version:      1.0.0
*/






/* --- Nav Bar Widget --- */
.grassmere-nav-widget {
    background: #2c3e50;
    padding: 10px 20px;
    border-radius: 50px; /* Rounded pill shape */
    display: inline-block;
    position: relative; /* For the popup positioning */
}

.grassmere-nav-widget form {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-group {
    display: flex;
    flex-direction: column;
}

.nav-group label {
    font-size: 10px;
    color: #bdc3c7;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.grassmere-nav-widget input[type="date"] {
    background: transparent;
    border: 1px solid #7f8c8d;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-family: inherit;
}

.nav-check-btn {
    background: #27ae60;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

.nav-check-btn:hover {
    background: #2ecc71;
}

/* --- The Popup Result --- */
#availability-result {
    position: absolute;
    top: 110%; /* Shows just below the bar */
    left: 0;
    right: 0;
    z-index: 999;
}

.popover-error {
    background: #e74c3c;
    color: white;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.popover-success {
    background: #fff;
    color: #2c3e50;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border: 1px solid #2ecc71;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-book-now {
    background: #27ae60;
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    display: inline-block;
}





/* =========================================
   2. MODAL POPUP STYLES
   ========================================= */
#modal-overlay { 
    position: fixed; 
    top: 0; left: 0; right: 0; bottom: 0; 
    background: rgba(0,0,0,0.5); 
    z-index: 10000; 
    display: none; 
    align-items: center; 
    justify-content: center; 
}

#modal-overlay.active { display: flex; }

.modal-box { 
    background: #fff; 
    padding: 30px; 
    border-radius: 8px; 
    width: 400px; 
    max-width: 90%; 
    position: relative; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
}

.close-modal { 
    position: absolute; 
    top: 10px; 
    right: 15px; 
    cursor: pointer; 
    font-size: 20px; 
}

/* =========================================
   3. BOOKING WIDGET (DESKTOP)
   ========================================= */
.grassmere-booking-container form {
    display: flex;
    align-items: flex-end; /* Aligns inputs and button on bottom edge */
    gap: 15px;
    width: 100%;
}

.gb-item {
    display: flex;
    flex-direction: column;
}

/* Make inputs grow to fill empty space */
.gb-checkin, .gb-checkout {
    flex-grow: 1; 
}

/* Input Styling */
.gb-item input[type="date"] {
    background: #fdfdfd;
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 6px;
    width: 100%;
    font-size: 14px;
    min-width: 130px; /* Prevents squishing on small laptops */
}

/* Label Styling */
.gb-item label {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: #555;
    margin-bottom: 4px;
    display: block;
}

/* Button Styling */
.gb-check-btn {
    background: #27ae60;
    color: white;
    border: none;
    padding: 13px 25px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s;
}

.gb-check-btn:hover { background: #219150; }

/* =========================================
   4. BOOKING WIDGET (MOBILE OPTIMIZATION)
   ========================================= */
@media (max-width: 768px) {
    .grassmere-booking-container form {
        display: grid !important;
        /* Layout: Top row split 50/50, Bottom row full width */
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
        width: 100%;
    }

    /* Force dates to sit side-by-side */
    .gb-checkin { grid-column: 1 / 2; }
    .gb-checkout { grid-column: 2 / 3; }

    /* Force button to full width below */
    .gb-button { grid-column: 1 / 3; }

    /* Larger touch targets for thumbs */
    .gb-item input[type="date"] {
        height: 50px;
        font-size: 16px; /* Prevents iOS auto-zoom */
        text-align: center;
    }

    .gb-check-btn {
        width: 100%;
        height: 52px;
        font-size: 18px;
    }
}

/* =========================================
   5. RESULTS POPOVER (Success/Error Messages)
   ========================================= */
#availability-result {
    margin-top: 10px;
    position: relative;
    z-index: 999;
}

.popover-error {
    background: #e74c3c;
    color: white;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
}

.popover-success {
    background: #fff;
    color: #2c3e50;
    padding: 15px;
    border-radius: 6px;
    text-align: center;
    border: 1px solid #2ecc71;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-book-now {
    background: #27ae60;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
}





/* --- HIT AREA OPTIMIZATION --- */

/* 1. Make the Input relative so we can stretch the picker inside it */
.gb-item input[type="date"] {
    position: relative;
    /* Existing styles... */
    background: #fdfdfd;
    border: 1px solid #ccc;
    padding: 12px;
    border-radius: 6px;
    width: 100%;
    font-size: 16px; /* Prevents zoom on iPhone */
}

/* 
   Stretch the clickable "Calendar Icon" area to cover the WHOLE input.
*/
.gb-item input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Make it invisible */
    cursor: pointer;
}

/* 3. Make the Label feel actionable */
.gb-item label {
    cursor: pointer; /* Shows the hand icon on desktop */
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: #555;
    margin-bottom: 4px;
    display: block;
}