/*
Copyright © Wild Rose Devs. & Alberta Lynx 2025. All rights reserved.

This software and its source code are proprietary and confidential.
Unauthorized copying, distribution, modification, or use in whole or in part
is strictly prohibited and may result in civil and/or criminal penalties.

No license or rights are granted by implication or otherwise under any
intellectual property rights.

For licensing inquiries, contact: https://wildrosedevs.ca
*/

/*********************************
  HERO SECTION
**********************************/
.hero {
    background:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../images/enquiries-hero.png") no-repeat center center / cover !important;
    height: 40vh;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 3rem;
    z-index: 1;
}

.hero-content {
    width: 100%;
    position: relative;
    max-width: 1280px;
    margin-top: 40px;
    padding-left: 60px;
    padding-right: 60px;
    text-align: left;
}

.hero-label {
    font-size: 3.2rem;
    font-weight: 900;
    color: #0c81f7;
    margin: 0 0 20px;
    margin-bottom: 0;
}

.hero-subtext {
    display: flex;
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 500;
    gap: 20px;
    margin-top: 0;
}

@media (max-width: 768px) {
    .hero {
        padding: 0;
        display: flex;
        align-items: flex-end;
    }

    .hero-content {
        width: 100%;
        padding: 1rem 1.25rem;
        margin: 0;
        position: relative;
        bottom: 0;
        text-align: left;
    }

    .hero-label {
        font-size: 2rem;
        margin-bottom: 0.25rem;
        color: #0c81f7;
    }

    .hero-subtext {
        font-size: 1rem;
        color: white;
        line-height: 1.4;
        margin: 0;
    }
}

/* =============== Glass‑card container =============== */
.support-form-container {
    max-width: 800px;
    margin: 3rem auto;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    color: #333;
}

/* Section heading */
.support-form-container .section-title {
    font-size: 2rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 0.5rem;
}

/* CONTACT DETAILS as a separate row */
.support-form-container .contact-subtitle {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #1c74d9;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Utility: hide labels but keep them accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============== Form layout =============== */
.support-form-container .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.support-form-container .form-row.two-col .form-group {
    flex: 1 1 calc(50% - 1rem);
}

.support-form-container .form-group {
    flex: 1;
    min-width: 180px;
}

.support-form-container .full-width {
    flex: 2;
}

/* =============== Inputs (always bordered) =============== */
.support-form-container input[type="text"],
.support-form-container input[type="email"],
.support-form-container input[type="tel"],
.support-form-container textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    color: #333;
    box-sizing: border-box;
}

.support-form-container input::placeholder,
.support-form-container textarea::placeholder {
    color: #666;
}

/* =============== Question titles =============== */
.support-form-container .form-title {
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    color: #1c74d9;
}

/* Force the .form-title to span 100% of the row */
.support-form-container .form-row>.form-title {
    /* in a flex container, flex‑basis:100% makes it break onto its own line */
    flex: 0 0 100%;
    margin-bottom: 1rem;
    /* optional spacing */
}

/* =============== Option grids (3 columns) =============== */
.support-form-container .option-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 0.5rem;
    column-gap: 1.5rem;
    margin-bottom: 1rem;
}

.support-form-container .option-group label {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: #333;
}

.support-form-container .option-group input {
    margin-right: 0.5rem;
    accent-color: #f44336;
}

/* =============== Submit button =============== */
.support-form-container .submit-footer {
    text-align: center;
}

.support-form-container #submit-button {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border: 1px solid #f44336;
    background: #fff;
    color: #f44336;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.support-form-container #submit-button:hover {
    background: #f44336;
    color: #fff;
}

#form-status {
    margin-bottom: 1rem;
    font-weight: bold;
}

#form-status.success {
    color: rgb(27, 255, 27);
}

#form-status.error {
    color: #eb0b4d;
}