/* ============================================================
   Concordia Colleges - Login (new landing design)
   Brand: Pantone 144C #F7941E | Pantone 732C #603713 | #FFFFFF
   All geometry is derived from the 1920x1080 design comp and
   expressed proportionally so the layout holds at any size.
   Everything is scoped under .cc-login / .cc-* - nothing here
   can leak into app.css or bootstrap.
   ============================================================ */

:root {
    --cc-orange: #F7941E;
    --cc-orange-btn: #F08900;
    --cc-brown: #603713;
    --cc-cream: #F6F3EE;
    --cc-ink: #3A3A3A;
    --cc-font: "Gill Sans", "Gill Sans MT", "Gill Sans Nova", Calibri, "Trebuchet MS", "Segoe UI", sans-serif;
}

body.cc-login-body {
    margin: 0;
    padding: 0;
    background: #EFEEEC;
    font-family: var(--cc-font);
    -webkit-font-smoothing: antialiased;
}

.cc-login,
.cc-login *,
.cc-login *::before,
.cc-login *::after {
    box-sizing: border-box;
}

/* ---------- stage ---------- */
.cc-login {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(78% 68% at 50% 46%, #FBFAF9 0%, #F3F2F0 46%, #E9E7E3 100%);
}

/* ---------- decorative geometry (measured from the comp) ---------- */
.cc-deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

    .cc-deco span {
        position: absolute;
        display: block;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

/* top-right: grey disc  (comp: centre 1979,-99  r 440) */
.cc-deco .tr-grey {
    width: 45.83vw;
    height: 45.83vw;
    left: 103.07vw;
    top: -9.17vh;
    background: linear-gradient(135deg, #DCDCDC 0%, #EDEDED 100%);
}

/* top-right: hairline orange arc (comp: centre 1952,-49  r 436) */
.cc-deco .tr-arc {
    width: 45.42vw;
    height: 45.42vw;
    left: 101.67vw;
    top: -4.54vh;
    border: 1.5px solid var(--cc-orange);
    background: transparent;
}

/* bottom-left: three same-sized discs, each offset (all fitted to <1px)
   grey    c=(96,976)   r=443
   line    c=(81,1022)  r=436  (hairline only)
   orange  c=(2,1091)   r=437 */
.cc-deco .bl-grey {
    width: 46.11vw;
    height: 46.11vw;
    left: 5.00vw;
    top: 90.39vh;
    background: linear-gradient(180deg, #E6E6E6 0%, #D3D3D3 65%, #CFCFCF 100%);
}

.cc-deco .bl-line {
    width: 45.38vw;
    height: 45.38vw;
    left: 4.23vw;
    top: 94.62vh;
    border: 2px solid var(--cc-orange);
    background: transparent;
}

.cc-deco .bl-orange {
    width: 45.47vw;
    height: 45.47vw;
    left: 0.10vw;
    top: 101.05vh;
    background: linear-gradient(180deg, #F6AD3E 0%, #F4A03D 48%, #F29A3A 100%);
}

/* ---------- brand lockup ---------- */
.cc-brand {
    position: absolute;
    top: 1.71vh;
    left: 0.72vw;
    z-index: 3;
}

    .cc-brand img {
        display: block;
        width: 23.37vw;
        max-width: 449px;
        min-width: 180px;
        height: auto;
    }

/* ---------- card ---------- */
.cc-stage {
    position: relative;
    z-index: 2;
    width: clamp(320px, 41.67vw, 800px);
    margin-top: -2.3vh; /* comp centres the card slightly above mid-height */
}

.cc-card-wrap {
    /* matched to the comp's measured shadow profile (peak ~23% under the
       bottom edge and inside the notch, much lighter down the sides) */
    filter: drop-shadow(0 30px 20px rgba(0, 0, 0, .26)) drop-shadow(0 2px 5px rgba(0, 0, 0, .07));
}

.cc-card {
    /* concave corner the C4 mark sits in.
       comp: a circle of r=135 centred on the card's bottom-right corner,
       i.e. 16.875% of the 800px card width. --cc-cut is restated at every
       breakpoint below because the card's own width formula changes. */
    --cc-cut: clamp(54px, 7.03vw, 135px);
    --cc-radius: clamp(18px, 2.5vw, 48px);
    position: relative;
    background: var(--cc-cream);
    border-radius: var(--cc-radius) var(--cc-radius) 0 var(--cc-radius);
    /* comp: 124 / 108 / 101 on an 800px card */
    padding: 15.5% 13.5% 12.6%;
    -webkit-mask-image: radial-gradient(circle var(--cc-cut) at 100% 100%, transparent calc(100% - 1px), #000 100%);
    mask-image: radial-gradient(circle var(--cc-cut) at 100% 100%, transparent calc(100% - 1px), #000 100%);
}

/* C4 mark overlapping the bottom-right corner (comp: 290x217 at 1265,655) */
.cc-mark {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 36.25%;
    height: auto;
    transform: translate(67.9%, 42.5%);
    z-index: 4;
    pointer-events: none;
    user-select: none;
}

/* ---------- form ---------- */
.cc-form {
    margin: 0;
}

.cc-field {
    display: flex;
    align-items: flex-end;
    gap: clamp(12px, 1.6vw, 31px);
}

    .cc-field + .cc-field {
        margin-top: clamp(16px, 2.7vw, 52px);
    }

.cc-field-icon {
    flex: 0 0 auto;
    width: clamp(26px, 2.2vw, 42px);
    height: clamp(26px, 2.2vw, 42px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cc-brown);
    margin-bottom: 4px;
}

    .cc-field-icon svg {
        width: 100%;
        height: 100%;
        display: block;
    }

.cc-field-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cc-label {
    display: block;
    margin: 0 0 clamp(4px, 0.42vw, 8px);
    font-family: var(--cc-font);
    font-size: clamp(12px, 0.99vw, 19px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2F2F2F;
}

.cc-control {
    position: relative;
}

.cc-input {
    display: block;
    width: 100%;
    height: clamp(36px, 2.6vw, 50px);
    padding: 0 16px;
    border: 1px solid #D9D4CC;
    border-radius: 6px;
    background: #FFFFFF;
    color: var(--cc-ink);
    font-family: var(--cc-font);
    font-size: clamp(13px, 0.94vw, 18px);
    line-height: normal;
    outline: none;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
    -webkit-appearance: none;
    appearance: none;
}

    .cc-input:focus {
        border-color: var(--cc-orange);
        box-shadow: 0 0 0 3px rgba(247, 148, 30, .18);
    }

    .cc-input::placeholder {
        color: #B7B2AA;
    }

    .cc-input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 40px #FFFFFF inset;
        -webkit-text-fill-color: var(--cc-ink);
    }

/* password reveal */
.cc-control--pwd .cc-input {
    padding-right: 52px;
}

.cc-eye {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: #5F5F5F;
    cursor: pointer;
    outline: none;
}

    .cc-eye:hover,
    .cc-eye:focus-visible {
        color: var(--cc-orange);
    }

    .cc-eye svg {
        width: 24px;
        height: 24px;
        display: block;
    }

    .cc-eye .cc-eye-off {
        display: none;
    }

    .cc-eye.is-visible .cc-eye-on {
        display: none;
    }

    .cc-eye.is-visible .cc-eye-off {
        display: block;
    }

/* ---------- remember me / forgot ---------- */
.cc-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    /* line up with the input column: icon width + flex gap */
    padding-left: calc(clamp(26px, 2.2vw, 42px) + clamp(12px, 1.6vw, 31px));
    margin: clamp(10px, 1.1vw, 21px) 0 0;
}

.cc-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: clamp(11px, 0.78vw, 15px);
    font-weight: 500;
    color: #4A4A4A;
    cursor: pointer;
    user-select: none;
}

    .cc-check input {
        width: 15px;
        height: 15px;
        margin: 0;
        accent-color: var(--cc-orange);
        cursor: pointer;
    }

.cc-forgot {
    font-size: clamp(11px, 0.78vw, 15px);
    font-weight: 600;
    color: var(--cc-orange);
    text-decoration: none;
}

    .cc-forgot:hover,
    .cc-forgot:focus {
        color: var(--cc-brown);
        text-decoration: underline;
    }

/* ---------- login button (comp: 575 x 62, radius ~10) ---------- */
.cc-submit {
    display: block;
    width: 100%;
    height: clamp(44px, 3.23vw, 62px);
    margin-top: clamp(12px, 1.4vw, 27px);
    border: 0;
    border-radius: 10px;
    background: var(--cc-orange-btn);
    color: #FFFFFF;
    font-family: var(--cc-font);
    font-size: clamp(15px, 1.15vw, 22px);
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    text-align: center;
    line-height: clamp(44px, 3.23vw, 62px);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(240, 137, 0, .25);
    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}

    .cc-submit:hover,
    .cc-submit:focus {
        color: #FFFFFF;
        text-decoration: none;
        filter: brightness(1.05);
        box-shadow: 0 10px 22px rgba(240, 137, 0, .34);
    }

    .cc-submit:active {
        transform: translateY(1px);
        box-shadow: 0 5px 12px rgba(240, 137, 0, .28);
    }

    .cc-submit.is-busy {
        pointer-events: none;
        opacity: .7;
    }

/* ---------- inline error ---------- */
.cc-error {
    display: none;
    margin: clamp(10px, 1.1vw, 20px) 0 0;
    padding: 9px 14px;
    border-radius: 6px;
    background: #FDECEA;
    border: 1px solid #F0B5AE;
    color: #A8261A;
    font-size: clamp(11px, 0.78vw, 15px);
    line-height: 1.35;
}

    .cc-error.is-shown {
        display: block;
    }

/* ---------- vendor footer ---------- */
.cc-footer {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    opacity: .9;
}

    .cc-footer img {
        height: 32px;
        width: auto;
        display: block;
    }

.cc-footer-text h6 {
    margin: 0;
    font-family: var(--cc-font);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--cc-brown);
}

.cc-footer-text p {
    margin: 1px 0 0;
    font-size: 12px;
    color: #6B6B6B;
}

    .cc-footer-text p i {
        color: var(--cc-orange);
        margin-right: 6px;
    }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
    .cc-stage {
        width: min(62vw, 620px);
    }

    .cc-card {
        --cc-cut: min(10.46vw, 104.6px);
    }

    .cc-card-wrap {
        filter: drop-shadow(0 22px 16px rgba(0, 0, 0, .24)) drop-shadow(0 2px 5px rgba(0, 0, 0, .07));
    }

    .cc-brand img {
        width: 28vw;
    }
}

@media (max-width: 991.98px) {
    .cc-login {
        padding: 150px 16px 140px;
    }

    .cc-stage {
        width: min(86vw, 560px);
        margin-top: 0;
    }

    .cc-card-wrap {
        filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .22)) drop-shadow(0 2px 4px rgba(0, 0, 0, .07));
    }

    .cc-card {
        --cc-cut: min(14.51vw, 94.5px);
        --cc-radius: 28px;
        padding: 44px 44px 46px;
    }

    .cc-brand img {
        width: 236px;
        min-width: 0;
    }

    .cc-mark {
        width: 28%;
        transform: translate(26%, 30%);
    }

    .cc-deco .bl-grey,
    .cc-deco .bl-line,
    .cc-deco .bl-orange,
    .cc-deco .tr-grey,
    .cc-deco .tr-arc {
        width: 80vw;
        height: 80vw;
    }

    .cc-deco .tr-grey {
        left: 108vw;
        top: -10vh;
    }

    .cc-deco .tr-arc {
        left: 105vw;
        top: -4vh;
    }

    .cc-deco .bl-grey {
        left: 9vw;
        top: 92vh;
    }

    .cc-deco .bl-line {
        left: 7vw;
        top: 96vh;
    }

    .cc-deco .bl-orange {
        left: 0;
        top: 103vh;
    }
}

@media (max-width: 575.98px) {
    .cc-login {
        padding: 104px 16px 118px;
    }

    .cc-stage {
        width: 90vw;
    }

    .cc-card-wrap {
        filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .20)) drop-shadow(0 1px 3px rgba(0, 0, 0, .06));
    }

    .cc-card {
        --cc-cut: 15.19vw;
        --cc-radius: 22px;
        padding: 30px 22px 32px;
    }

    .cc-field {
        gap: 12px;
    }

    .cc-field-icon {
        width: 28px;
        height: 28px;
    }

    .cc-field + .cc-field {
        margin-top: 20px;
    }

    .cc-input {
        height: 44px;
        font-size: 15px;
    }

    .cc-label {
        font-size: 12px;
    }

    .cc-meta {
        padding-left: 40px;
    }

    .cc-submit {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
    }

    .cc-mark {
        width: 25%;
        transform: translate(14%, 26%);
    }

    .cc-brand {
        top: 8px;
        left: 6px;
    }

        .cc-brand img {
            width: 172px;
        }

    .cc-footer {
        bottom: 14px;
        gap: 9px;
    }

        .cc-footer img {
            height: 24px;
        }

    .cc-footer-text h6 {
        font-size: 11px;
    }

    .cc-footer-text p {
        font-size: 10px;
    }
}

@media (max-height: 760px) and (min-width: 992px) {
    .cc-card {
        padding: 10% 13.5% 8%;
    }

    .cc-field + .cc-field {
        margin-top: clamp(14px, 1.9vw, 34px);
    }
}
@supports (appearance: base-select) {
    #ddlSchools,
    #ddlSchools::picker(select) {
        appearance: base-select;
    }

    #ddlSchools {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        #ddlSchools::picker-icon {
            content: "\25BE";
            color: #444;
            margin-left: auto;
            transition: none;
        }

        #ddlSchools::picker(select) {
            padding: 0;
            margin: 2px 0 0 0;
            background: #fff;
            border: 1px solid #aaa;
            border-radius: 4px;
            box-shadow: 0 4px 8px rgba(0,0,0,.15);
            position-area: block-end;
            position-try-fallbacks: none;
            inset: auto;
            top: anchor(bottom);
            left: anchor(left);
        }

        #ddlSchools option {
            padding: 8px 12px;
            background: #fff;
            color: #444;
            white-space: normal;
        }

            #ddlSchools option:hover,
            #ddlSchools option:focus,
            #ddlSchools option:checked {
                background: #F7941E;
                color: #fff;
            }

            #ddlSchools option::checkmark {
                display: none;
            }
}