/* form.css - Styles for the booking form */

/* Form Container Positioning */
.booking-container {
    /* --- POSITIONING --- */
    position: absolute;
    top: 70px; /* Increased slightly to add space below header */
    left: 352px;
    z-index: 900;
    /* --- POSITIONING END --- */

    max-width: 277px;
    width: calc(100% - 367px);
    min-width: 250px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);

    /* --- SIZE REDUCTION FOR DESKTOP --- */
    /* Reduced vertical padding/sizes to make it shorter */
}

/* Price Info Area */
.price-info {
    background-color: #33333366;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
    padding: 8px 15px; /* Reduced vertical padding */
    font-size: 0.9em; /* Reduced font size */
    font-weight: bold;
    text-align: center;
}

/* Form Content Area */
.form-content {
     background-color: #33333366;
     padding: 12px 15px; /* Reduced vertical padding */
}

/* Grid Structure (for Inputs) */
.input-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
    gap: 8px; /* Slightly reduced gap */
    margin-bottom: 5px;
}

/* Input Groups (Label + Input) */
.input-group label {
    display: block;
    margin-bottom: 3px; /* Reduced margin */
    font-size: 0.75em; /* Reduced font size */
    font-weight: 600;
    color: #f0f0f0;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.input-group input[type="date"],
.input-group select {
    width: 100%;
    padding: 6px 5px; /* Reduced vertical padding */
    font-size: 0.85em; /* Reduced font size */
    border: 1px solid #888;
    background-color: #ffffff;
    color: #333;
    border-radius: 5px;
    box-sizing: border-box;
}
.input-group input[type="date"]:invalid {
   color: #888;
}


/* Nights Info */
.nights-info {
    color: #f0f0f0;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    padding: 6px 0 10px 0; /* Reduced padding */
    font-size: 0.8em; /* Reduced font size */
    text-align: left;
}

/* Search Button */
.search-button {
    display: block;
    width: 100%;
    background-color: #f37e20;
    color: white;
    padding: 8px 15px; /* Reduced padding */
    border: none;
    border-radius: 5px;
    font-size: 0.9em; /* Reduced font size */
    font-weight: bold;
    cursor: pointer;
    margin-top: 8px; /* Reduced margin */
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.search-button:hover {
    background-color: #e06f1a;
}
.search-button:active {
     transform: scale(0.98);
}

/* Green Info Box (Optional, if needed) */
.extra-info-box {
    background-color: #e0f2e9;
    color: #333;
    padding: 10px; /* Reduced padding */
    text-align: center;
}

.extra-info-box .arrow {
    font-size: 1em; /* Reduced icon size */
    line-height: 1;
    margin-bottom: 3px; /* Reduced margin */
    color: #008000;
}

.extra-info-box p {
    margin: 3px 0; /* Reduced margin */
    font-size: 0.8em; /* Reduced font size */
    line-height: 1.4;
}

.extra-info-box strong {
   color: #006400;
   font-weight: 600;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .booking-container:not(.mobile-layout) { /* Apply only if not mobile layout */
        left: 250px;
        max-width: 260px;
    }
}

/* --- MOBILE LAYOUT REORDERING & FULL WIDTH --- */
@media (max-width: 767px) {
    .main-layout-wrapper {
        display: flex;
        flex-direction: column;
        margin-top: 60px; /* Keep space for fixed header */
    }

    .booking-container {
        order: 2; /* Form comes after hero */
        position: relative !important; /* Override absolute, ensure it's in flow */
        top: auto !important;
        left: auto !important;
        /* --- UPDATED FOR MOBILE FULL WIDTH --- */
        margin: 0 !important; /* Remove top/bottom/auto margins */
        width: 100% !important; /* Make it full width */
        max-width: none !important; /* Remove max-width restriction */
        border-radius: 0 !important; /* Remove rounded corners for full-width */
        box-shadow: none !important; /* Optional: Remove shadow if desired for full-width block */
        /* --- END UPDATES --- */
        z-index: auto !important; /* Reset z-index */
        min-width: unset; /* Reset min-width */
        /* Internal padding is handled by .form-content */
    }

    .hero {
        order: 1; /* Hero comes first */
        margin-top: 0; /* Reset margin-top as wrapper handles spacing */
    }

     /* Ensure grid still stacks nicely if needed */
     .input-grid {
         grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
     }

     /* Ensure internal content padding remains on mobile */
     .form-content {
         padding: 15px; /* Adjust mobile padding if needed */
     }
     .price-info {
         padding: 10px 15px; /* Adjust mobile padding if needed */
     }
     .extra-info-box {
          padding: 12px 15px; /* Adjust mobile padding if needed */
          border-radius: 0; /* Ensure info box also has square corners */
     }
}
/* --- END MOBILE LAYOUT REORDERING & FULL WIDTH --- */

/* Very small screens (if needed, refine grid further) */
@media (max-width: 300px) {
     .input-grid {
         grid-template-columns: 1fr; /* Force single column */
     }
     .form-content {
         padding: 10px; /* Adjust padding for very small screens */
     }
}