/* =========================================================
   FX AUTOMATION
   REQUEST A QUOTE
   quote.css
========================================================= */


/* =========================================================
   QUOTE HERO
========================================================= */

.quote-hero {
    padding: 150px 0 90px;
    background: #ffffff;
}

.quote-hero .section-container {
    max-width: 1000px;
}

.quote-hero h1 {
    margin: 18px 0 24px;
    max-width: 900px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #101828;
}

.quote-hero h1 span {
    display: block;
    color: #1557c7;
}

.quote-hero p {
    max-width: 760px;
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
    color: #667085;
}


/* =========================================================
   QUOTE SECTION
========================================================= */

.quote-section {
    padding: 90px 0 120px;
    background: #f7f9fc;
}

.quote-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(500px, 1.25fr);
    gap: 80px;
    align-items: start;
}


/* =========================================================
   LEFT INFORMATION
========================================================= */

.quote-info {
    position: sticky;
    top: 120px;
}

.quote-info h2 {
    margin: 18px 0 25px;
    max-width: 500px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: #101828;
}

.quote-info p {
    max-width: 500px;
    margin: 0 0 35px;
    font-size: 16px;
    line-height: 1.8;
    color: #667085;
}


/* =========================================================
   FEATURES
========================================================= */

.quote-features {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.quote-features div {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #344054;
}

.quote-features i {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1557c7;
    font-size: 20px;
}


/* =========================================================
   FORM CONTAINER
========================================================= */

.quote-form-container {
    padding: 45px;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-radius: 4px;
    box-shadow: 0 12px 40px rgba(16, 24, 40, 0.06);
}

#quoteForm {
    display: flex;
    flex-direction: column;
    gap: 42px;
}


/* =========================================================
   FORM GROUPS
========================================================= */

.quote-group {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-bottom: 38px;
    border-bottom: 1px solid #eaecf0;
}

.quote-group:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
}

.quote-group h3 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #101828;
}


/* =========================================================
   FORM GRID
========================================================= */

.quote-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}


/* =========================================================
   FORM FIELDS
========================================================= */

.quote-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.quote-field label {
    font-size: 13px;
    font-weight: 600;
    color: #344054;
}

.quote-field input,
.quote-field select,
.quote-field textarea {
    width: 100%;
    padding: 13px 15px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: #101828;
    background: #ffffff;
    border: 1px solid #d0d5dd;
    border-radius: 3px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.quote-field input,
.quote-field select {
    height: 48px;
}

.quote-field textarea {
    min-height: 170px;
    resize: vertical;
    line-height: 1.6;
}

.quote-field input::placeholder,
.quote-field textarea::placeholder {
    color: #98a2b3;
}

.quote-field input:hover,
.quote-field select:hover,
.quote-field textarea:hover {
    border-color: #98a2b3;
}

.quote-field input:focus,
.quote-field select:focus,
.quote-field textarea:focus {
    border-color: #1557c7;
    box-shadow: 0 0 0 3px rgba(21, 87, 199, 0.10);
}


/* =========================================================
   SELECT
========================================================= */

.quote-field select {
    cursor: pointer;
}


/* =========================================================
   CHECKBOXES
========================================================= */

.quote-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.quote-checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 50px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #344054;
    background: #f9fafb;
    border: 1px solid #eaecf0;
    border-radius: 3px;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.quote-checkbox-grid label:hover {
    border-color: #1557c7;
    background: #f5f8ff;
}

.quote-checkbox-grid input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #1557c7;
    cursor: pointer;
}


/* =========================================================
   FILE INPUT
========================================================= */

.quote-field input[type="file"] {
    height: auto;
    padding: 11px 13px;
    cursor: pointer;
    color: #667085;
    background: #ffffff;
}

.quote-field input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 13px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #344054;
    background: #f2f4f7;
    border: 1px solid #d0d5dd;
    border-radius: 3px;
    cursor: pointer;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

#quoteForm .btn-primary {
    align-self: flex-start;
    min-width: 190px;
    margin-top: -5px;
    justify-content: center;
}


/* =========================================================
   VALIDATION
========================================================= */

.quote-field input:invalid:not(:placeholder-shown),
.quote-field select:invalid:not(:focus),
.quote-field textarea:invalid:not(:placeholder-shown) {
    border-color: #d92d20;
}

.quote-field input:valid:not(:placeholder-shown),
.quote-field textarea:valid:not(:placeholder-shown) {
    border-color: #12b76a;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .quote-layout {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .quote-info {
        position: static;
    }

    .quote-info h2,
    .quote-info p {
        max-width: 750px;
    }

}


@media (max-width: 768px) {

    .quote-hero {
        padding: 120px 0 65px;
    }

    .quote-hero h1 {
        font-size: 42px;
    }

    .quote-hero p {
        font-size: 16px;
        line-height: 1.7;
    }

    .quote-section {
        padding: 65px 0 80px;
    }

    .quote-form-container {
        padding: 30px 24px;
    }

    .quote-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .quote-checkbox-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 480px) {

    .quote-hero {
        padding: 105px 0 55px;
    }

    .quote-hero h1 {
        font-size: 36px;
    }

    .quote-info h2 {
        font-size: 34px;
    }

    .quote-form-container {
        padding: 25px 18px;
        border-radius: 3px;
    }

    #quoteForm {
        gap: 32px;
    }

    .quote-group {
        gap: 18px;
        padding-bottom: 30px;
    }

    .quote-group h3 {
        font-size: 19px;
    }

    #quoteForm .btn-primary {
        width: 100%;
    }

}