/* =========================================================
   UNIVERSITY SHORTLIST
   PREMIUM UI
   Font: Plus Jakarta Sans
========================================================= */

.usw-widget {
    --usw-primary: #4b3cff;
    --usw-primary-2: #8a3ffc;
    --usw-text: #15142b;
    --usw-heading: #24204f;
    --usw-muted: #77758d;
    --usw-border: #e3e2eb;
    --usw-soft: #f8f8fc;
    --usw-purple-soft: #f1efff;

    width: 100%;
    max-width: 820px;

    margin: 40px auto;

    background: #fff;

    border: 1px solid #e3e2ea;

    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(34, 29, 74, 0.08);

    overflow: hidden;

    font-family:
        "Plus Jakarta Sans",
        sans-serif;

    color: var(--usw-text);
}


/* =========================================================
   RESET
========================================================= */

.usw-widget *,
.usw-widget *::before,
.usw-widget *::after {
    box-sizing: border-box;
}

.usw-widget button,
.usw-widget input,
.usw-widget select {
    font-family:
        "Plus Jakarta Sans",
        sans-serif;
}


/* =========================================================
   HEADER
========================================================= */

.usw-header {
    min-height: 86px;

    padding:
        17px 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    background:
        linear-gradient(
            105deg,
            #ffffff 0%,
            #f3f1ff 100%
        );

    border-bottom:
        1px solid #eceaf5;
}


.usw-header-title {
    display: flex;

    align-items: center;

    gap: 11px;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.4;

    letter-spacing:
        -0.35px;

    color: #10101b;
}


.usw-header-title strong {
    color:
        var(--usw-primary);
}


.usw-graduation-icon {
    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 25px;
}


/* =========================================================
   PROGRESS
========================================================= */

.usw-progress {
    width: 56px;

    height: 56px;

    flex-shrink: 0;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--usw-primary) 0deg,
            var(--usw-primary) 0deg,
            #c9c7f2 0deg
        );

    transition:
        background .45s ease;
}


.usw-progress::after {
    content: "";

    position: absolute;

    inset: 6px;

    border-radius: 50%;

    background: #fff;
}


.usw-progress span {
    position: relative;

    z-index: 2;

    font-size: 12px;

    font-weight: 800;

    color:
        #252346;
}


/*
   IMPORTANT:
   Explicit progress classes.
*/

.usw-progress.progress-0 {
    background:
        conic-gradient(
            var(--usw-primary) 0deg,
            #c9c7f2 0deg
        );
}


.usw-progress.progress-33 {
    background:
        conic-gradient(
            var(--usw-primary) 118.8deg,
            #c9c7f2 118.8deg
        );
}


.usw-progress.progress-67 {
    background:
        conic-gradient(
            var(--usw-primary) 241.2deg,
            #c9c7f2 241.2deg
        );
}


.usw-progress.progress-100 {
    background:
        conic-gradient(
            var(--usw-primary) 360deg,
            #c9c7f2 360deg
        );
}


/* =========================================================
   BODY
========================================================= */

.usw-body {
    position: relative;

    overflow: hidden;
}


/* =========================================================
   STEP
========================================================= */

.usw-step {
    display: none;

    padding:
        28px 28px 30px;

    opacity: 0;

    transform:
        translateX(25px);
}


.usw-step.active {
    display: block;

    animation:
        uswStepIn
        .38s
        cubic-bezier(.22,.61,.36,1)
        forwards;
}


@keyframes uswStepIn {

    from {
        opacity: 0;

        transform:
            translateX(24px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


/* =========================================================
   STEP 1 QUESTION
========================================================= */

.usw-question {
    margin-bottom: 17px;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.5;

    color:
        var(--usw-heading);
}


/* =========================================================
   COUNTRY GRID
========================================================= */

.usw-countries {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 11px;
}


.usw-country {
    min-height: 57px;

    padding:
        0 15px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid var(--usw-border);

    border-radius: 11px;

    background:
        #ffffff;

    color:
        #252434;

    font-size: 13px;

    font-weight: 500;

    text-align: left;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.usw-country:hover {
    border-color: #81a8ff !important;

    color: #1559ed !important;

    background: #fcfbff;

    box-shadow: 0 5px 15px rgba(60, 125, 255, .08) !important;

    transform: translateY(-1px) !important;
}


.usw-country.selected {
    border-color: #1559ed;
    color: #1559ed !important;
    background: #f4f6ff;
    box-shadow: 0 0 0 2px rgba(60, 105, 255, .08);
}


.usw-flag {
    width: 25px;

    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 21px;
}


/* =========================================================
   FIELD GROUP
========================================================= */

.usw-field-group {
    margin-bottom: 24px;
}


.usw-field-group > label {
    display: block;

    margin-bottom: 10px;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.5;

    color:
        var(--usw-heading);
}


/* =========================================================
   OPTIONS
========================================================= */

.usw-option-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}


.usw-intake-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


.usw-option {
    min-height: 48px;

    padding:
        10px 14px;

    position: relative;

    border:
        1px solid var(--usw-border);

    border-radius: 10px;

    background:
        #fff;

    color:
        #1e1d2b;

    font-size: 12px;

    font-weight: 500;

    cursor: pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.usw-option:hover {
    background: #1559ed;
    border-color: #1559ed;
}


.usw-option.selected {
    border-color: #3c79ff;
    background: #f4f4ff;
    box-shadow: 0 0 0 2px rgba(60, 94, 255, 0.07);
    color: #254fb9;
}


/* =========================================================
   RECOMMENDED
========================================================= */

.usw-recommended {
    position: absolute;

    top: -9px;

    left: 50%;

    transform:
        translateX(-50%);

    padding:
        3px 9px;

    white-space: nowrap;

    border-radius: 20px;

    background:
        #e8f8ef;

    color:
        #14945a;

    font-size: 9px;

    font-weight: 700;

    letter-spacing:
        .1px;
}


/* =========================================================
   SEARCH
========================================================= */

.usw-search-wrapper {
    position: relative;

    width: 100%;
}


.usw-search-input-wrapper {
    position: relative;
}


.usw-search-icon {
    position: absolute;

    left: 15px;

    top: 50%;

    transform:
        translateY(-50%);

    color:
        #9997aa;

    font-size: 21px;

    pointer-events: none;

    line-height: 1;
}


.usw-course-input,
.usw-city-input {
    width: 100%;

    height: 50px;

    padding:
        0 15px;

    border:
        1px solid var(--usw-border);

    border-radius: 10px;

    background:
        #ffffff;

    outline: none;

    color:
        #22212f;

    font-size: 12px;

    font-weight: 500;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.usw-course-input {
    padding-left:
        43px;
}


.usw-course-input:focus,
.usw-city-input:focus {
    border-color:
        var(--usw-primary);

    box-shadow:
        0 0 0 3px
        rgba(75, 60, 255, .07);
}


.usw-course-input::placeholder,
.usw-city-input::placeholder {
    color:
        #aaa8b9;

    font-weight:
        400;
}


/* =========================================================
   SEARCH RESULTS
========================================================= */

.usw-course-results,
.usw-city-results {
    display: none;

    position: absolute;

    z-index: 100;

    top:
        calc(100% + 6px);

    left: 0;

    right: 0;

    max-height: 220px;

    overflow-y: auto;

    padding: 5px;

    background:
        #ffffff;

    border:
        1px solid #dedde8;

    border-radius:
        10px;

    box-shadow:
        0 14px 30px
        rgba(30, 26, 70, .14);
}


.usw-search-result-item {
    padding:
        10px 11px;

    border-radius:
        7px;

    color:
        #302e47;

    font-size:
        12px;

    font-weight:
        500;

    cursor:
        pointer;

    transition:
        background .15s ease;
}


.usw-search-result-item:hover {
    background:
        #f3f1ff;

    color:
        #3325b9;
}


.usw-no-results {
    padding:
        12px;

    color:
        #9997a8;

    font-size:
        12px;
}


/* =========================================================
   NAVIGATION
========================================================= */

.usw-navigation {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top:
        27px;
}


.usw-navigation-center {
    justify-content:
        center;
}




.usw-back {
    width: 38px;

    height: 38px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    padding: 0;

    border-radius: 50%;

    background:
        #f3f3f7;

    color:
        #403e52;

    font-size:
        25px;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background .2s ease;
}


.usw-back:hover {
    background:
        #e8e7ee;
}


/* =========================================================
   CONTACT STEP
========================================================= */

.usw-contact-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 11px;
}


.usw-input-wrapper,
.usw-phone-wrapper {
    height: 50px;

    display: flex;

    align-items: center;

    overflow: hidden;

    border:
        1px solid var(--usw-border);

    border-radius:
        10px;

    background:
        #ffffff;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.usw-input-wrapper:focus-within,
.usw-phone-wrapper:focus-within {
    border-color:
        var(--usw-primary);

    box-shadow:
        0 0 0 3px
        rgba(75, 60, 255, .07);
}


.usw-input-wrapper input {
    width: 100%;

    height: 100%;

    padding:
        0 14px;

    border: 0;

    outline: 0;

    background:
        transparent;

    font-size:
        12px;

    font-weight:
        500;

    color:
        #22212f;
}


.usw-input-wrapper input::placeholder {
    color:
        #aaa8b9;

    font-weight:
        400;
}


.usw-country-code {
    height: 100%;

    padding:
        0 10px;

    border: 0;

    border-right:
        1px solid #e7e6ed;

    outline: 0;

    background:
        transparent;

    color:
        #504d63;

    font-size:
        11px;

    font-weight:
        500;
}


.usw-phone {
    min-width: 0;

    flex: 1;

    height: 100%;

    padding:
        0 10px;

    border: 0;

    outline: 0;

    background:
        transparent;

    font-size:
        12px;

    color:
        #22212f;
}


.usw-phone::placeholder {
    color:
        #aaa8b9;
}


/* =========================================================
   BENEFITS
========================================================= */

.usw-benefits {
    margin-top:
        21px;

    padding:
        18px 20px;

    border:
        1px solid #e3e0ff;

    border-radius:
        17px;

    background:
        linear-gradient(
            120deg,
            #fbfbff,
            #f9f8ff
        );
}


.usw-benefits h3 {
    margin:
        0 0 14px;

    font-size:
        12px;

    font-weight:
        700;

    color:
        #292654;
}


.usw-benefit {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        11px;

    font-size:
        11px;

    font-weight:
        500;

    color:
        #302d65;
}


.usw-benefit:last-child {
    margin-bottom:
        0;
}


.usw-benefit-icon {
    width:
        29px;

    height:
        29px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        #e8e5ff;

    color:
        #4b3cff;

    font-size:
        13px;
}


/* =========================================================
   SUCCESS
========================================================= */

.usw-success {
    padding:
        48px 30px 52px;

    text-align:
        center;
}


.usw-success-icon {
    width:
        66px;

    height:
        66px;

    margin:
        0 auto 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #e8f8ef;

    color:
        #18a15b;

    font-size:
        29px;

    font-weight:
        800;
}


.usw-success h2 {
    margin:
        0 0 7px;

    font-size:
        24px;

    font-weight:
        800;

    letter-spacing:
        -.5px;

    color:
        #17152d;
}


.usw-success-title {
    margin:
        0 0 9px;

    font-size:
        13px;

    font-weight:
        600;

    color:
        #38364d;
}


.usw-success-description {
    max-width:
        540px;

    margin:
        0 auto 23px;

    font-size:
        12px;

    line-height:
        1.7;

    color:
        #77748a;
}


.usw-success-box {
    max-width:
        520px;

    margin:
        0 auto;

    padding:
        13px 17px;

    border-radius:
        12px;

    background:
        #f8f8fc;

    text-align:
        left;
}


.usw-success-box div {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        6px 0;

    font-size:
        11px;

    color:
        #38355c;
}


.usw-success-box span {
    color:
        #4b3cff;

    font-weight:
        800;
}


/* =========================================================
   ERROR
========================================================= */

.usw-error {
    display:
        none;

    margin:
        12px 28px;

    padding:
        10px 12px;

    border-radius:
        8px;

    background:
        #fff1f1;

    color:
        #c53c3c;

    font-size:
        11px;

    font-weight:
        500;
}


/* =========================================================
   LOADING
========================================================= */

.usw-submit.loading {
    pointer-events:
        none;

    opacity:
        .72;
}


.usw-submit.loading::after {
    content:
        "";

    display:
        inline-block;

    width:
        14px;

    height:
        14px;

    margin-left:
        8px;

    vertical-align:
        -2px;

    border:
        2px solid rgba(255,255,255,.45);

    border-top-color:
        #fff;

    border-radius:
        50%;

    animation:
        uswSpin .7s linear infinite;
}


@keyframes uswSpin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .usw-widget {
        max-width:
            100%;
    }

    .usw-countries {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .usw-contact-grid {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .usw-widget {
        margin:
            25px 0;

        border-radius:
            14px;
    }


    .usw-header {
        min-height:
            72px;

        padding:
            13px 15px;
    }


    .usw-header-title {
        font-size:
            14px;

        gap:
            7px;
    }


    .usw-graduation-icon {
        width:
            30px;

        height:
            30px;

        font-size:
            21px;
    }


    .usw-progress {
        width:
            48px;

        height:
            48px;
    }


    .usw-progress::after {
        inset:
            5px;
    }


    .usw-step {
        padding:
            22px 15px 23px;
    }


    .usw-countries {
        grid-template-columns:
            1fr;
    }


    .usw-option-grid,
    .usw-intake-grid {
        grid-template-columns:
            1fr 1fr;
    }


    .usw-navigation {
        margin-top:
            22px;
    }


    .usw-continue,
    .usw-submit {
        min-width:
            0;

        flex:
            1;
    }


    .usw-success {
        padding:
            38px 18px 42px;
    }

}


@media (max-width: 420px) {

    .usw-option-grid,
    .usw-intake-grid {
        grid-template-columns:
            1fr;
    }


    .usw-recommended {
        position:
            static;

        display:
            inline-block;

        transform:
            none;

        margin:
            0 0 4px;
    }

}

/* =========================================================
   PROMO CTA - REFERENCE MATCH
========================================================= */

section.usw-promo-cta:not(.hero, .about-hero, .sb-hero) {
    --cta-bg: #fff4f4;
    --cta-accent: #df2835;

    width: 100%;
    margin-top: 32px !important;
    margin-bottom: 32px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;

    background: var(--cta-bg);

    border: 1px solid #e7dddd;
    border-radius: 20px;

    font-family: "Plus Jakarta Sans", sans-serif;
    color: #111;

    box-sizing: border-box;
}

.usw-promo-cta *,
.usw-promo-cta *::before,
.usw-promo-cta *::after {
    box-sizing: border-box;
}

/* Main layout */

.usw-promo-top {
    display: grid;

    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(0, .49fr)
        minmax(0, 1.72fr);

    gap: 30px;

    align-items: center;
}

/* Image */

.usw-promo-image {
    width: 100%;
    height: 193px;

    overflow: hidden;

    border-radius: 23px;
}

.usw-promo-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border: 0;
    border-radius: inherit;
}

/* Statistics */

.usw-promo-stat {
    position: relative;

    min-height: 189px;

    padding: 17px 12px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    background: #fce0e1;

    border-radius: 20px;

    color: var(--cta-accent);
}

.usw-promo-number {
    display: block;

    font-size: 25px;
    font-weight: 800;
    line-height: 1.15;

    letter-spacing: -1.5px;

    color: var(--cta-accent);
}

.usw-promo-stat-label {
    display: block;

    margin-top: 3px;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;

    color: var(--cta-accent);
}

.usw-promo-stat p {
    margin: 5px 0 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;

    color: var(--cta-accent) !important;
}

/* Content */

.usw-promo-content {
    min-width: 0;
}

.usw-promo-content h3 {
    margin: 0 0 9px !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;

    font-size: 20px !important;
    font-weight: 800 !important;

    line-height: 1.35 !important;
    letter-spacing: -.5px !important;

    color: #111 !important;
}

.usw-promo-description {
    margin: 0 0 12px !important;

    font-size: 16px !important;
    font-weight: 400;

    line-height: 1.55 !important;

    color: #191919 !important;
}

.usw-promo-content ul {
    margin: 0 !important;

    padding-left: 30px !important;

    list-style: disc !important;
}

.usw-promo-content ul li {
    margin: 0 0 5px !important;

    padding: 0 !important;

    font-size: 15px !important;
    font-weight: 400;

    line-height: 1.55 !important;

    color: #171717 !important;
}

.usw-promo-content ul li:last-child {
    margin-bottom: 0 !important;
}

/* Full width button */

.usw-promo-button {
    width: 100%;

    min-height: 49px;

    margin-top: 24px;

    padding: 12px 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 10px;

    background: var(--cta-accent);

    color: #fff !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    line-height: 1.4;

    text-align: center;
    text-decoration: none !important;

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.usw-promo-button:hover {
    color: #fff !important;

    background: #bd202c;

    transform: translateY(-2px);

    box-shadow: 0 7px 18px rgba(223, 40, 53, .18);
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .usw-promo-cta {
        padding: 17px;
    }

    .usw-promo-top {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, .55fr);

        gap: 18px;
    }

    .usw-promo-image {
        height: 190px;
    }

    .usw-promo-stat {
        min-height: 190px;
    }

    .usw-promo-content {
        grid-column: 1 / -1;
    }

    .usw-promo-content h3 {
        font-size: 19px !important;
    }

    .usw-promo-button {
        margin-top: 20px;
    }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

    .usw-promo-cta {
        padding: 14px;

        margin: 25px 0;

        border-radius: 15px;
    }

    .usw-promo-top {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .usw-promo-image {
        height: 145px;
        border-radius: 14px;
    }

    .usw-promo-stat {
        min-height: 145px;
        padding: 12px 8px;
        border-radius: 14px;
    }

    .usw-promo-number {
        font-size: 28px;
    }

    .usw-promo-stat-label {
        font-size: 15px;
    }

    .usw-promo-stat p {
        font-size: 11px;
    }

    .usw-promo-content {
        grid-column: 1 / -1;
        padding-top: 5px;
    }

    .usw-promo-content h3 {
        font-size: 17px !important;
        line-height: 1.4 !important;
    }

    .usw-promo-description {
        font-size: 14px !important;
    }

    .usw-promo-content ul {
        padding-left: 22px !important;
    }

    .usw-promo-content ul li {
        font-size: 13px !important;
        margin-bottom: 7px !important;
    }

    .usw-promo-button {
        min-height: 47px;
        margin-top: 18px;
        font-size: 13px !important;
    }

}

/* Very small screens */

@media (max-width: 360px) {

    .usw-promo-top {
        grid-template-columns: 1fr;
    }

    .usw-promo-image {
        height: 190px;
    }

    .usw-promo-stat {
        min-height: 125px;
    }

}