/* Apply Now lead form. All rules scoped to .guLeadCard / .guLeadForm. */

/* The banner card sits directly under the fixed header at these widths
   (style.css sets top:150px at <=1600px, top:200px above it), which leaves no
   gap between the nav and the card. Push it clear so the rounded top corners
   are visible against the banner. Mobile (<=991px) already uses its own
   top:0 / margin-top:20px rule and is left alone. */
@media (min-width: 992px) {
    .formBnr {
        margin-top: 70px;
    }
}

/* The card owns the padding. Its white background and corner radius come from
   the surrounding container (.formBnr on the banner, .modal-content in the
   footer modal), which already supply them. */
.guLeadCard {
    padding: 38px 40px 40px;
}

/* Bootstrap's .modal-body already pads, so don't pad twice in the modal. */
.modal-body .guLeadCard {
    padding: 8px 14px 14px;
}

.guLeadCard .guLeadHeading {
    margin: 0 0 26px;
    line-height: 1.15;
}

.guLeadForm {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.guLeadForm .guLeadField {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
}

.guLeadForm .guLeadRow {
    display: flex;
    gap: 16px;
}

.guLeadForm input[type="text"],
.guLeadForm input[type="email"],
.guLeadForm input[type="tel"],
.guLeadForm select {
    width: 100%;
    padding: 15px 18px;
    font-size: 17px;
    color: #1a1a1a;
    background: #fff;
    border: 1px solid #dfe1f3;
    border-bottom-color: #b9bde8;
    border-radius: 8px;
    outline: none;
    appearance: none;
}

.guLeadForm input::placeholder {
    color: #4a4a4a;
    opacity: 1;
}

.guLeadForm select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23555' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
}

.guLeadForm input:focus,
.guLeadForm select:focus {
    border-color: #a51c1c;
    box-shadow: 0 0 0 2px rgba(165, 28, 28, .12);
}

.guLeadForm select:disabled {
    background-color: #f4f4f4;
    color: #999;
    cursor: not-allowed;
}

.guLeadForm .guLeadPhone {
    display: flex;
    align-items: stretch;
    border: 1px solid #dfe1f3;
    border-bottom-color: #b9bde8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.guLeadForm .guLeadPhone:focus-within {
    border-color: #a51c1c;
    box-shadow: 0 0 0 2px rgba(165, 28, 28, .12);
}

.guLeadForm .guLeadDial {
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 17px;
    color: #1a1a1a;
    background: #fafafa;
    border-right: 1px solid #dfe1f3;
    white-space: nowrap;
}

.guLeadForm .guLeadPhone input {
    border: none;
    border-radius: 0;
    flex: 1 1 auto;
}

.guLeadForm .guLeadPhone input:focus {
    box-shadow: none;
}

.guLeadForm .guLeadConsent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
    color: #333;
    cursor: pointer;
}

.guLeadForm .guLeadConsent input {
    margin-top: 3px;
    flex: 0 0 auto;
}

.guLeadForm .guLeadSubmit {
    width: 100%;
    margin-top: 6px;
    padding: 16px 18px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    background: #a51c1c;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.guLeadForm .guLeadSubmit:hover:not(:disabled) {
    background: #8c1717;
}

.guLeadForm .guLeadSubmit:disabled {
    opacity: .65;
    cursor: wait;
}

.guLeadForm .guLeadError {
    display: none;
    margin-top: 5px;
    font-size: 12.5px;
    color: #c0392b;
}

.guLeadForm .guLeadError.is-visible {
    display: block;
}

.guLeadForm .guLeadStatus {
    display: none;
    padding: 12px 14px;
    font-size: 14.5px;
    border-radius: 6px;
}

.guLeadForm .guLeadStatus.is-success {
    display: block;
    color: #14612b;
    background: #e6f4ea;
    border: 1px solid #b7dfc3;
}

.guLeadForm .guLeadStatus.is-error {
    display: block;
    color: #8c1717;
    background: #fdecea;
    border: 1px solid #f2c2bd;
}

@media (max-width: 575px) {
    .guLeadForm .guLeadRow {
        flex-direction: column;
    }
}