/* =========================================================
   SWAYAMTASK COLLEGE REGISTRATION
   BUILD 03.0 — REVISED REGISTRATION UI
========================================================= */

html,
body {
    margin: 0;
    padding: 0;
}

body.swayamtask-college-registration {
    margin: 0;
    background: #F5F8FA;
    color: #24313A;

    font-family:
        Manrope,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


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

.st-college-header {
    height: 76px;
    padding: 0 6vw;

    background: #FFFFFF;

    border-bottom: 1px solid #E4EAEE;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-sizing: border-box;
}

.st-college-logo-link {
    display: flex;
    align-items: center;

    line-height: 0;
    text-decoration: none;
}

.st-college-logo {
    width: 168px;
    height: auto;

    display: block;
}

.st-college-header-label {
    font-size: 11px;
    letter-spacing: .16em;
    font-weight: 700;

    color: #64717A;
}


/* =========================================================
   MAIN
========================================================= */

.st-college-main {
    width: 100%;
    max-width: 1040px;

    margin: 0 auto;

    padding: 54px 24px 80px;

    box-sizing: border-box;
}


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

.st-college-intro,
.st-college-success {
    background: #FFFFFF;

    border: 1px solid #E1E8EC;

    border-radius: 14px;

    padding: 38px 42px;

    box-sizing: border-box;
}

.st-college-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 40px;

    margin-bottom: 22px;
}

.st-college-eyebrow {
    margin-bottom: 10px;

    color: #005F9C;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .15em;

    text-transform: uppercase;
}

.st-college-intro h1,
.st-college-success h1 {
    margin: 0;

    color: #1E2C35;

    font-size: 34px;
    line-height: 1.15;

    letter-spacing: -.03em;

    font-weight: 800;
}

.st-college-intro p,
.st-college-success p {
    margin: 12px 0 0;

    max-width: 700px;

    color: #5B6871;

    line-height: 1.7;

    font-size: 15px;
}

.st-college-step {
    color: #005F9C;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}

.st-college-step span {
    margin-right: 8px;

    font-size: 24px;
}


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

.st-college-error {
    margin: 0 0 22px;

    padding: 15px 18px;

    border: 1px solid #EFCACA;
    border-radius: 10px;

    background: #FFF5F5;

    color: #A22D2D;

    font-size: 14px;
    line-height: 1.55;
}


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

.st-college-form {
    display: grid;
    gap: 18px;
}


/* =========================================================
   FORM SECTIONS
========================================================= */

.st-college-section,
.st-college-declaration {
    background: #FFFFFF;

    border: 1px solid #E1E8EC;

    border-radius: 14px;

    padding: 30px 34px;

    box-sizing: border-box;
}

.st-college-section-heading {
    display: flex;
    align-items: flex-start;

    gap: 16px;

    margin-bottom: 26px;
}

.st-college-section-heading > span {
    width: 30px;
    height: 30px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #EEF6FB;
    color: #005F9C;

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

    font-size: 11px;
    font-weight: 800;
}

.st-college-section-heading h2 {
    margin: 1px 0 4px;

    color: #23323B;

    font-size: 20px;
    line-height: 1.3;

    font-weight: 800;
}

.st-college-section-heading p {
    margin: 0;

    color: #7A858C;

    font-size: 13px;
    line-height: 1.55;
}


/* =========================================================
   FIELD GRID
========================================================= */

.st-college-grid {
    display: grid;

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

    gap: 20px;
}

.st-college-field {
    display: flex;
    flex-direction: column;

    gap: 7px;

    min-width: 0;
}

.st-college-field.st-full {
    grid-column: 1 / -1;
}

.st-college-field label {
    color: #43515A;

    font-size: 12px;
    line-height: 1.4;

    font-weight: 700;
}

.st-college-field label b,
.st-college-required {
    color: #D66A18;
}

.st-college-field input,
.st-college-field select,
.st-college-field textarea {
    width: 100%;

    box-sizing: border-box;

    border: 1px solid #D8E0E5;
    border-radius: 8px;

    background: #FFFFFF;
    color: #26343D;

    font: inherit;
    font-size: 14px;

    padding: 12px 13px;

    outline: none;

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

.st-college-field textarea {
    min-height: 90px;

    resize: vertical;
}

.st-college-field input[type="file"] {
    padding: 10px 12px;

    background: #FBFCFD;

    cursor: pointer;
}

.st-college-field input[type="file"]::file-selector-button {
    margin-right: 12px;

    padding: 8px 12px;

    border: 1px solid #D6E0E5;
    border-radius: 6px;

    background: #FFFFFF;
    color: #005F9C;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.st-college-field input:focus,
.st-college-field select:focus,
.st-college-field textarea:focus {
    border-color: #005F9C;

    box-shadow:
        0 0 0 3px rgba(0, 95, 156, .08);
}

.st-college-field small {
    display: block;

    color: #7A858C;

    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   PROGRAMME INTEREST
========================================================= */

.st-interest-block {
    padding-top: 2px;
}

.st-interest-block + .st-interest-block {
    margin-top: 30px;

    padding-top: 28px;

    border-top: 1px solid #E8EDF0;
}

.st-interest-block h3 {
    margin: 0 0 5px;

    color: #26343D;

    font-size: 14px;
    line-height: 1.4;

    font-weight: 800;
}

.st-interest-help {
    margin: 0 0 15px;

    color: #7A858C;

    font-size: 12px;
    line-height: 1.55;
}


/* =========================================================
   CHECKBOX GRID
========================================================= */

.st-checkbox-grid {
    display: grid;

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

    gap: 10px;

    margin-top: 12px;
}

.st-checkbox-item {
    min-height: 46px;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 11px 13px;

    box-sizing: border-box;

    border: 1px solid #DDE5E9;
    border-radius: 8px;

    background: #FFFFFF;

    color: #46545D;

    font-size: 12px;
    line-height: 1.45;

    cursor: pointer;

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

.st-checkbox-item:hover {
    border-color: rgba(0, 95, 156, .35);

    background: #FBFDFF;
}

.st-checkbox-item input {
    width: 16px;
    height: 16px;

    flex: 0 0 auto;

    margin: 1px 0 0;

    accent-color: #005F9C;

    cursor: pointer;
}

.st-checkbox-item span {
    display: block;

    color: #43515A;

    font-weight: 600;
}


/* =========================================================
   CREDIT LEVELS
========================================================= */

.st-credit-grid {
    grid-template-columns:
        repeat(6, minmax(0, 1fr));
}

.st-credit-item {
    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding: 10px;

    text-align: center;
}

.st-credit-item input {
    margin-top: 0;
}

.st-credit-item span {
    font-size: 13px;
    font-weight: 800;

    color: #005F9C;
}


/* =========================================================
   OTHER INTEREST
========================================================= */

.st-other-field {
    margin-top: 16px;

    max-width: 100%;
}


/* =========================================================
   WHY ARE WE ASKING THIS
========================================================= */

.st-why-note {
    margin-top: 20px;

    padding: 16px 18px;

    border-left: 3px solid #005F9C;

    background: #F7FAFC;

    border-radius: 0 8px 8px 0;
}

.st-why-note strong {
    display: block;

    margin-bottom: 5px;

    color: #26343D;

    font-size: 12px;
    font-weight: 800;
}

.st-why-note p {
    margin: 0;

    color: #68757D;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   DECLARATION
========================================================= */

.st-college-declaration {
    background: #F9FBFC;
}

.st-college-declaration label {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin: 0;

    color: #526069;

    font-size: 13px;
    line-height: 1.6;

    cursor: pointer;
}

.st-college-declaration label + label {
    margin-top: 14px;
}

.st-college-declaration input {
    width: 16px;
    height: 16px;

    flex: 0 0 auto;

    margin-top: 4px;

    accent-color: #005F9C;

    cursor: pointer;
}


/* =========================================================
   FORM FOOTER
========================================================= */

.st-college-form-footer {
    display: flex;

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

    gap: 20px;

    padding: 8px 2px;

    color: #7A858C;

    font-size: 12px;
}

.st-college-primary-button,
.st-college-secondary-button {
    display: inline-flex;

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

    min-height: 44px;

    box-sizing: border-box;

    padding: 0 22px;

    border-radius: 8px;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.st-college-primary-button {
    border: 1px solid #005F9C;

    background: #005F9C;
    color: #FFFFFF;
}

.st-college-primary-button:hover {
    background: #004F82;
    border-color: #004F82;

    transform: translateY(-1px);
}

.st-college-secondary-button {
    border: 1px solid #D6E0E5;

    background: #FFFFFF;
    color: #005F9C;
}

.st-college-secondary-button:hover {
    border-color: #005F9C;
}


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

.st-college-success {
    max-width: 760px;

    margin: 30px auto 0;

    text-align: center;
}

.st-college-application-card {
    max-width: 440px;

    margin: 30px auto 0;

    padding: 25px;

    box-sizing: border-box;

    border: 1px solid #DCE7ED;
    border-radius: 12px;

    background: #F8FBFD;

    text-align: left;
}

.st-college-small-label {
    color: #77848D;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .13em;
}

.st-college-application-id {
    margin-top: 7px;

    color: #005F9C;

    font-size: 25px;
    font-weight: 800;

    letter-spacing: .04em;
}

.st-college-status {
    margin-top: 14px;

    display: flex;
    align-items: center;

    gap: 8px;

    color: #6D5C1F;

    font-size: 13px;
    font-weight: 700;
}

.st-college-status-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #D59B19;
}

.st-college-note {
    margin: 20px auto 25px !important;

    font-size: 13px !important;
}


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

@media (max-width: 820px) {

    .st-college-header {
        padding: 0 24px;
    }

    .st-college-main {
        padding: 36px 18px 60px;
    }

    .st-college-section,
    .st-college-declaration {
        padding: 26px 24px;
    }

    .st-credit-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 720px) {

    .st-college-header {
        height: 70px;

        padding: 0 20px;
    }

    .st-college-logo {
        width: 150px;
    }

    .st-college-header-label {
        display: none;
    }

    .st-college-main {
        padding: 28px 14px 50px;
    }

    .st-college-intro,
    .st-college-success,
    .st-college-section,
    .st-college-declaration {
        padding: 25px 20px;
    }

    .st-college-intro {
        display: block;
    }

    .st-college-step {
        margin-top: 20px;
    }

    .st-college-grid {
        grid-template-columns: 1fr;
    }

    .st-college-field.st-full {
        grid-column: auto;
    }

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

    .st-credit-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .st-college-form-footer {
        display: block;
    }

    .st-college-primary-button {
        width: 100%;

        margin-top: 14px;
    }
}


@media (max-width: 480px) {

    .st-college-main {
        padding-left: 10px;
        padding-right: 10px;
    }

    .st-college-intro,
    .st-college-success,
    .st-college-section,
    .st-college-declaration {
        padding: 22px 17px;

        border-radius: 11px;
    }

    .st-college-intro h1,
    .st-college-success h1 {
        font-size: 28px;
    }

    .st-college-intro p,
    .st-college-success p {
        font-size: 14px;
    }

    .st-college-section-heading h2 {
        font-size: 18px;
    }

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

    .st-college-application-id {
        font-size: 21px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .st-college-field input,
    .st-college-field select,
    .st-college-field textarea,
    .st-checkbox-item,
    .st-college-primary-button,
    .st-college-secondary-button {
        transition: none;
    }
}