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

/* 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;
    }
}

/* --- Apply Now gate modal --- */

/* Blur the page behind the modal. Bootstrap renders .modal-backdrop as a
   sibling of .modal, so the blur goes on the backdrop itself. */
body.guApplyOpen .modal-backdrop.show {
    opacity: .5;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.guApplyModal .modal-dialog {
    max-width: 560px;
}

.guApplyModal .modal-content {
    border: none;
    border-radius: 22px;
    overflow: hidden;
}

.guApplyModal .modal-body {
    position: relative;
    padding: 0;
}

/* modal-body is flush here, so the card supplies the whole inset. */
.guApplyModal .modal-body .guLeadCard {
    padding: 34px 36px 36px;
}

.guApplyModal .btn-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
}

/* Program is fixed by the link the user clicked — show it, don't let it change. */
.guApplyModal .guLeadForm select:disabled[data-gu-locked] {
    background-color: #f4f4f4;
    color: #1a1a1a;
    cursor: default;
    opacity: 1;
}

/* --- Homepage banner: stack below 1100px --- */

/* style.css switches the banner to a stacked layout at <=991px, where the form
   sits in normal flow and the section grows around it. Raise that boundary to
   1100px. Above it the original side-by-side layout is untouched.
   .formBnr is first in the DOM, so column-reverse is what keeps the banner on
   top. Program pages (.bnrMBA) excluded. */
@media (min-width: 992px) and (max-width: 1100px) {
    .bnrHome:not(.bnrMBA) {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }

    .bnrHome:not(.bnrMBA) > .formBnr {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        width: 100%;
        margin-top: 20px;
    }

    .bnrHome:not(.bnrMBA) > .containers {
        width: 100%;
    }
}

/* --- Program pages: let the grid column hold the form --- */

/* Program pages put the form in a real Bootstrap column:
     .row > .col-lg-7 (text) + .col-lg-5 > .formBnr
   But .formBnr inherits the homepage rules — position:absolute, width:500px,
   right:-50px — so it is lifted out of its column and floats over the page.
   That is why it covers the body text and clips the Fee Structure corner.

   Drop the absolute positioning and let it fill its column. The row then sizes
   itself to the taller of the two columns, so nothing can overlap. Below 992px
   Bootstrap stacks the columns and style.css already handles the form. */
@media (min-width: 992px) {
    .bnrHome.bnrMBA .formBnr {
        position: static;
        width: 100%;
        min-height: 0;
        top: auto;
        right: auto;
        left: auto;
        margin-left: 0;
    }
}

/* --- Contact page: give the form a card --- */

/* .formSec has no rules in style.css at all — the NoPaperForms iframe it
   replaced carried its own white panel, so the wrapper never needed any. The
   form is already in flow inside its col-lg-5; it just has no surface, so the
   fields sit directly on the page gradient.

   .row has align-items:center on this page, which floats the form against the
   taller text column; flex-start lines its top edge up with the heading. */
@media (min-width: 992px) {
    .contactSec .row {
        align-items: flex-start;
    }
}

.formSec {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, .07);
}

/* --- Contact page: clear the footer graphic --- */

/* The student photo at the bottom is .ftrTopRowImg in the FOOTER —
   position:absolute, bottom:0 inside .ftrTopRow. The image is taller than that
   row, so its top edge overflows upward into the section above. .prgrmList's
   140px bottom padding was enough for the 480px NoPaperForms iframe but not
   for this taller form, so the card ran into her head. */
@media (min-width: 992px) {
    .contactSec.prgrmList {
        padding-bottom: 260px;
    }
}

/* --- Narrow grid columns: fit the select labels without stacking --- */

/* In a col-lg-5 the card is only ~400px wide around 1100px, so each select in
   a pair gets ~190px. At 17px text plus the 38px arrow gutter, "Select State *"
   truncated to "Select Sta". Shrink the text and the gutter so both fit side
   by side — stacking them instead made the card far too tall. */
@media (min-width: 992px) and (max-width: 1250px) {
    .formSec .guLeadForm select,
    .bnrHome.bnrMBA .guLeadForm select {
        font-size: 15px;
        padding-left: 14px;
        padding-right: 28px;
        background-position: right 10px center;
        background-size: 14px;
    }

    .formSec .guLeadForm .guLeadRow,
    .bnrHome.bnrMBA .guLeadForm .guLeadRow {
        gap: 12px;
    }
}

/* --- Contact page: keep long emails inside their box --- */

/* The addresses are longer than the red panel at narrower widths and spilled
   past its right edge. */
.contactSec .ctctUl li,
.contactSec .ctctUl li a {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

/* --- Contact page: stack below 1200px --- */

/* Bootstrap stacks col-lg-* at <992px, but the 5/12 column is already too
   narrow for the form well before that — labels truncate and the card gets
   cramped. Stack the two columns from 1200px down instead, so the form sits
   full width beneath the contact details. */
@media (min-width: 992px) and (max-width: 1199px) {
    .contactSec .row > [class*="col-lg-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .contactSec .formSec {
        margin-top: 32px;
    }
}

/* --- Brochure modal: inline status message --- */

.guBrochureStatus {
    display: none;
    margin-top: 14px;
    padding: 12px 14px;
    font-size: 14.5px;
    line-height: 1.45;
    border-radius: 6px;
}

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

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