/* ==========================================================================
   Footer Booking Form (Gravity Forms)
   ========================================================================== */

#booking {
    background-color: #0452aa;
    padding: 3.5rem 0;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

#booking .row {
    margin-left: auto;
    margin-right: auto;
    max-width: 70.58824rem;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    box-sizing: border-box;
}

/* Reset default Gravity Forms wrapping margins & Orbital theme overrides */
#booking .gform_wrapper {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

#booking .gform_wrapper form {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Hide all field labels, descriptions, and required markers */
#booking .gfield_label,
#booking .gform-field-label,
#booking .gfield_required,
#booking .gfield_description,
#booking .screen-reader-text,
#booking .gform-field-label__text {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Reset fields and containers */
#booking .gfield {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    box-sizing: border-box !important;
}

#booking .ginput_container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* Base input, select, and textarea styling matching design */
#booking input[type="text"],
#booking input[type="tel"],
#booking input[type="email"],
#booking select,
#booking textarea {
    display: block !important;
    width: 100% !important;
    height: 38px !important;
    padding: 0 12px !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    font-size: 13.5px !important;
    font-family: inherit !important;
    border: 1px solid transparent !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    outline: none !important;
    box-sizing: border-box !important;
    line-height: 38px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#booking input[type="text"]:focus,
#booking input[type="tel"]:focus,
#booking input[type="email"]:focus,
#booking select:focus,
#booking textarea:focus {
    border-color: #ffd34f !important;
    box-shadow: 0 0 0 2px rgba(255, 211, 79, 0.45) !important;
}

/* Placeholders - crisp, subtle light gray as in design */
#booking input::placeholder,
#booking textarea::placeholder {
    color: #b5b5b5 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
    font-size: 13.5px !important;
}

#booking input::-webkit-input-placeholder,
#booking textarea::-webkit-input-placeholder {
    color: #b5b5b5 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

#booking input::-moz-placeholder,
#booking textarea::-moz-placeholder {
    color: #b5b5b5 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Select dropdown */
#booking select {
    cursor: pointer !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444444'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-position: right 8px center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    padding-right: 30px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    height: 38px !important;
    line-height: 38px !important;
}

/* Textarea in right column */
#booking textarea {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 8px 12px !important;
    line-height: 1.45 !important;
    resize: none !important;
    box-sizing: border-box !important;
}

#booking .gf-message {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

#booking .gf-message .ginput_container,
#booking .gf-message .ginput_container_textarea {
    height: 100% !important;
    display: flex !important;
    flex: 1 1 auto !important;
}

/* Submit button in right column */
#booking .gform_footer {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 38px !important;
    display: flex !important;
}

#booking .gform_footer .gform_button,
#booking .gform_footer button[type="submit"],
#booking .gform_footer input[type="submit"] {
    width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    background-color: #ffd34f !important;
    color: #263238 !important;
    border: none !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

#booking .gform_footer .gform_button:hover,
#booking .gform_footer button[type="submit"]:hover,
#booking .gform_footer input[type="submit"]:hover {
    background-color: #fbc02d !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25) !important;
}

#booking .gform_footer .gform_button:active,
#booking .gform_footer button[type="submit"]:active,
#booking .gform_footer input[type="submit"]:active {
    transform: translateY(1px) !important;
}

/* ==========================================================================
   Desktop Grid Layout (screens >= 1024px / 64em)
   ========================================================================== */
@media screen and (min-width: 64em) {
    #booking form {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        grid-template-rows: repeat(4, 38px) !important;
        gap: 10px 16px !important;
        align-items: stretch !important;
    }

    #booking .gform-body,
    #booking .gform_body,
    #booking .gform_fields {
        display: contents !important;
    }

    /* Column 1 */
    #booking .gf-tripdate {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #booking .gf-amount {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #booking .gf-phone {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    /* Column 2 */
    #booking .gf-tripdatealt {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #booking .gf-name {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    #booking .gf-email {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    /* Bottom row spanning columns 1 & 2 */
    #booking .gf-tripschoice {
        grid-column: 1 / span 2 !important;
        grid-row: 4 !important;
    }

    /* Column 3 - Textarea spanning top 3 rows */
    #booking .gf-message {
        grid-column: 3 !important;
        grid-row: 1 / span 3 !important;
    }

    /* Column 3 - Submit button on bottom row */
    #booking .gform_footer {
        grid-column: 3 !important;
        grid-row: 4 !important;
    }
}

/* ==========================================================================
   Tablet Grid Layout (640px to 1023px / 40em to 63.9375em)
   ========================================================================== */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    #booking form {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px 14px !important;
    }

    #booking .gform-body,
    #booking .gform_body,
    #booking .gform_fields {
        display: contents !important;
    }

    #booking .gf-tripdate {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    #booking .gf-tripdatealt {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    #booking .gf-amount {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    #booking .gf-name {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    #booking .gf-phone {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    #booking .gf-email {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }

    #booking .gf-tripschoice {
        grid-column: 1 / span 2 !important;
        grid-row: 4 !important;
    }

    #booking .gf-message {
        grid-column: 1 / span 2 !important;
        grid-row: 5 !important;
    }

    #booking .gf-message textarea {
        min-height: 110px !important;
    }

    #booking .gform_footer {
        grid-column: 1 / span 2 !important;
        grid-row: 6 !important;
    }
}

/* ==========================================================================
   Mobile Layout (< 640px / 40em)
   ========================================================================== */
@media screen and (max-width: 39.9375em) {
    #booking {
        padding: 2rem 0.75rem !important;
    }

    #booking form {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    #booking .gform-body,
    #booking .gform_body,
    #booking .gform_fields {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    #booking .gf-tripdate { order: 1 !important; }
    #booking .gf-tripdatealt { order: 2 !important; }
    #booking .gf-amount { order: 3 !important; }
    #booking .gf-name { order: 4 !important; }
    #booking .gf-phone { order: 5 !important; }
    #booking .gf-email { order: 6 !important; }
    #booking .gf-tripschoice { order: 7 !important; }
    #booking .gf-message { order: 8 !important; }
    #booking .gf-message textarea { min-height: 110px !important; }
    #booking .gform_footer { order: 9 !important; }
}

/* ==========================================================================
   Confirmation and Validation Feedback
   ========================================================================== */
#booking .gform_confirmation_message {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    padding: 2.5rem 1rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 4px !important;
}

#booking .gform_validation_errors {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-left: 4px solid #ffd34f !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1rem !important;
    border-radius: 3px !important;
    font-size: 0.85rem !important;
}

#booking .gform_validation_errors h2,
#booking .gform_submission_error {
    color: #ffffff !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
}

#booking .gfield_validation_message {
    color: #ffd34f !important;
    font-size: 0.75rem !important;
    margin-top: 3px !important;
    font-weight: 500 !important;
}

#booking .gfield_error input,
#booking .gfield_error select,
#booking .gfield_error textarea {
    border-color: #ffd34f !important;
}