/* ==========================================================================
   UHD Admissions Portal - design layer (login, signup, application form,
   submitted application).  Every class is prefixed "up-" so it never
   collides with the Bootstrap builds these pages also load; functional
   classes/ids used by uhd_admission_portal.js are kept untouched in the
   templates and only styled here.
   ========================================================================== */
:root {
    --up-bg: #f5f3fb;
    --up-surface: #ffffff;
    --up-line: #e8e5f0;
    --up-ink: #22233a;
    --up-muted: #74748a;
    --up-teal: #0d938f;
    --up-teal-2: #0b7d79;
    --up-plum: #8d3d73;
    --up-orange: #f2922b;
    --up-orange-2: #dd7b13;
    --up-green: #10a36f;
    --up-danger: #dd4d59;
    --up-shadow: 0 18px 50px rgba(43, 36, 69, .10);
    --up-shadow-sm: 0 8px 26px rgba(43, 36, 69, .08);
}

body.up-body,
.up-root {
    margin: 0 !important;
    color: var(--up-ink) !important;
    background:
        radial-gradient(circle at 9% 0%, rgba(13, 147, 143, .08), transparent 26%),
        radial-gradient(circle at 96% 5%, rgba(141, 61, 115, .09), transparent 28%),
        var(--up-bg) !important;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 14px;
    line-height: 1.45;
}

.up-root *,
.up-root *::before,
.up-root *::after {
    box-sizing: border-box;
}

.up-root button,
.up-root input,
.up-root select,
.up-root textarea {
    font: inherit;
}

.up-root a {
    color: inherit;
}

.up-hidden {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Auth shell (login / reset password / signup / signup success)
   -------------------------------------------------------------------------- */
.up-auth {
    min-height: 100vh;
    display: flex;
    background: linear-gradient(135deg, #f7f6fb 0%, #f3f1f8 55%, #f8f7fb 100%);
}

.up-auth-shell {
    width: 100%;
    min-height: 100vh;
    background: var(--up-surface);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(420px, 46%) minmax(0, 54%);
}

.up-brand {
    position: relative;
    isolation: isolate;
    padding: 38px clamp(46px, 4.5vw, 76px);
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 18%, rgba(255, 255, 255, .12) 0 11%, transparent 11.4%),
        radial-gradient(circle at 8% 92%, rgba(255, 255, 255, .08) 0 20%, transparent 20.4%),
        linear-gradient(155deg, #119c95 0%, #0d8885 43%, #16737f 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.up-brand::after {
    content: "";
    position: absolute;
    inset: auto -14% -22% auto;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .035);
    z-index: -1;
}

.up-brand-mark {
    display: flex;
    align-items: center;
    gap: 13px;
}

.up-crest {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    overflow: hidden;
    padding: 6px;
}

.up-crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.up-brand-name {
    font-size: 16px;
    font-weight: 850;
    line-height: 1.18;
}

.up-brand-sub {
    font-size: 11px;
    opacity: .8;
    margin-top: 3px;
}

.up-hero {
    max-width: 520px;
    margin: 42px 0 22px;
}

.up-kicker {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .2);
    padding: 7px 11px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 11px;
}

.up-hero h1 {
    color: #fff;
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.02;
    margin: 19px 0 14px;
    letter-spacing: -2.2px;
    font-weight: 800;
    max-width: 560px;
}

.up-hero p {
    font-size: 14px;
    line-height: 1.65;
    opacity: .86;
    max-width: 480px;
    margin: 0;
}

.up-journey {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
    max-width: 560px;
}

.up-journey-item {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 12px;
    align-items: start;
    padding: 14px 14px 13px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .07));
    transition: .2s;
}

.up-journey-item:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, .22);
}

.up-journey-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .15);
    display: grid;
    place-items: center;
    color: #fff;
}

.up-journey-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.up-journey-content {
    display: block;
    padding-right: 20px;
}

.up-journey-item strong {
    display: block;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 820;
    margin: 0 0 3px;
}

.up-journey-item small {
    display: block;
    font-size: 10px;
    line-height: 1.45;
    opacity: .78;
}

.up-journey-no {
    position: absolute;
    right: 11px;
    top: 11px;
    min-width: 23px;
    height: 23px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 900;
}

.up-brand-foot {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    font-size: 10px;
    opacity: .7;
    margin-top: 28px;
}

.up-panel {
    padding: 38px clamp(34px, 4.2vw, 72px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #fff 0%, #fdfcff 100%);
}

.up-panel-inner {
    width: min(560px, 100%);
    margin: 0 auto;
}

.up-panel-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 17px;
}

/* EN / Kurdish switch (uhd_portal_i18n.js) */
.up-lang-switch {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--up-line);
    border-radius: 11px;
    background: #f2f0f7;
}

.up-root .up-lang-switch button {
    border: 0;
    background: transparent;
    padding: 7px 11px;
    border-radius: 8px;
    color: var(--up-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
}

.up-root .up-lang-switch button.up-active {
    background: #fff;
    color: var(--up-ink);
    box-shadow: 0 4px 12px rgba(36, 32, 58, .08);
}

/* Language specific blocks: English until the script says otherwise. */
.up-root [data-up-lang="ku"],
.up-root[data-up-lang-active="ku"] [data-up-lang="en"] {
    display: none !important;
}

.up-root[data-up-lang-active="ku"] [data-up-lang="ku"] {
    display: block !important;
}

/* Kurdish: right-to-left text in both panels, layout itself unchanged. */
.up-root[data-up-lang-active="ku"] .up-panel-inner,
.up-root[data-up-lang-active="ku"] .up-brand {
    direction: rtl;
    text-align: right;
}

.up-root[data-up-lang-active="ku"] .up-hero h1 {
    letter-spacing: 0;
    line-height: 1.25;
    font-size: clamp(32px, 3.2vw, 46px);
}

.up-root[data-up-lang-active="ku"] .up-journey-content {
    padding-right: 0;
    padding-left: 20px;
}

.up-root[data-up-lang-active="ku"] .up-journey-no {
    right: auto;
    left: 11px;
}

.up-root[data-up-lang-active="ku"] .up-field-icon {
    left: auto;
    right: 13px;
}

.up-root[data-up-lang-active="ku"] .up-control.up-with-icon {
    padding-left: 13px;
    padding-right: 39px;
}

.up-root[data-up-lang-active="ku"] .up-control.up-with-toggle {
    padding-left: 76px;
}

.up-root[data-up-lang-active="ku"] .up-toggle {
    right: auto;
    left: 12px;
}

.up-root[data-up-lang-active="ku"] .up-quick-card {
    text-align: right;
}

.up-root[data-up-lang-active="ku"] .up-lang-switch,
.up-root[data-up-lang-active="ku"] .up-helper-contact {
    direction: ltr;
}

.up-panel h2.up-title {
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -1px;
    margin: 0;
    font-weight: 800;
    color: var(--up-ink);
}

.up-lead {
    color: var(--up-muted);
    margin: 7px 0 0;
    font-size: 13px;
}

.up-notice {
    display: flex;
    gap: 11px;
    padding: 12px 13px;
    border-radius: 13px;
    background: #fff9eb;
    border: 1px solid #f3dda3;
    color: #6e5320;
    margin: 16px 0;
    font-size: 11px;
    line-height: 1.55;
}

.up-notice-ico {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 8px;
    background: #ffedb7;
    display: grid;
    place-items: center;
    font-weight: 900;
}

.up-notice b {
    display: block;
    color: #5d4517;
}

.up-rtl {
    direction: rtl;
    text-align: right;
    margin-top: 4px;
}

.up-notice.up-notice-success {
    background: #f1fbf7;
    border-color: #bfe8d6;
    color: #24614b;
}

.up-notice.up-notice-success .up-notice-ico {
    background: #d9f4e8;
    color: var(--up-green);
}

.up-notice.up-notice-danger {
    background: #fff1f2;
    border-color: #f6c7cc;
    color: #8f2632;
}

.up-notice.up-notice-danger .up-notice-ico {
    background: #fde0e3;
    color: var(--up-danger);
}

/* Fields of the auth forms (Odoo's real login / reset / signup inputs). */
.up-group {
    margin-bottom: 11px;
}

.up-group label,
.up-root .up-group .col-form-label,
.up-root .up-group .form-label {
    display: block;
    font-weight: 800;
    margin-bottom: 6px;
    padding: 0;
    font-size: 11px;
    color: var(--up-ink);
}

.up-field {
    position: relative;
}

.up-field-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #9695a6;
    font-size: 13px;
    pointer-events: none;
}

.up-root .up-control,
.up-root .oe_reset_password_form input.form-control,
.up-root .oe_signup_form input.form-control {
    width: 100%;
    height: 44px;
    border: 1px solid #ddd9e7;
    border-radius: 11px;
    background: #fff;
    color: var(--up-ink);
    padding: 0 13px;
    outline: none;
    box-shadow: none;
    transition: .2s;
}

.up-root .up-control.up-with-icon {
    padding-left: 39px;
}

.up-root .up-control.up-with-toggle {
    padding-right: 64px;
}

.up-root .up-control:focus,
.up-root .oe_reset_password_form input.form-control:focus,
.up-root .oe_signup_form input.form-control:focus {
    border-color: rgba(13, 147, 143, .68);
    box-shadow: 0 0 0 4px rgba(13, 147, 143, .09);
}

.up-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #8e8b9c;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.up-login-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    font-size: 11px;
    margin: 2px 0 15px;
}

.up-check {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--up-muted);
    margin: 0;
    font-weight: 500;
}

.up-text-link,
.up-root a.up-text-link {
    border: 0;
    background: transparent;
    color: var(--up-teal);
    font-weight: 850;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
}

.up-root .up-primary-btn,
.up-root .oe_login_form button[type="submit"].up-primary-btn,
.up-root .oe_reset_password_form button[type="submit"],
.up-root .oe_signup_form button[type="submit"] {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--up-teal), var(--up-teal-2));
    color: #fff;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(13, 147, 143, .18);
    transition: .2s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.up-root .up-primary-btn:hover,
.up-root .oe_reset_password_form button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(13, 147, 143, .23);
    color: #fff;
}

.up-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.up-quick-card,
.up-root a.up-quick-card {
    border: 1px solid var(--up-line);
    background: #fff;
    border-radius: 13px;
    padding: 11px 12px;
    text-align: left;
    transition: .2s;
    min-height: 72px;
    text-decoration: none;
    color: var(--up-ink);
    display: block;
    cursor: pointer;
}

.up-quick-card:hover {
    transform: translateY(-1px);
    border-color: #d8d3e3;
    box-shadow: var(--up-shadow-sm);
}

.up-quick-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: #eef8f7;
    color: var(--up-teal);
    display: grid;
    place-items: center;
    font-size: 12px;
    margin-bottom: 8px;
    font-weight: 800;
}

.up-quick-card:nth-child(2) .up-quick-icon {
    background: #faf0f6;
    color: var(--up-plum);
}

.up-quick-card:nth-child(3) {
    grid-column: 1 / -1;
    min-height: auto;
    display: grid;
    grid-template-columns: 28px auto;
    column-gap: 10px;
    align-items: center;
}

.up-quick-card:nth-child(3) .up-quick-icon {
    background: #fff4e6;
    color: var(--up-orange);
    margin-bottom: 0;
    grid-row: 1 / 3;
}

.up-quick-card strong {
    display: block;
    font-size: 11px;
    margin-bottom: 2px;
}

.up-quick-card span:not(.up-quick-icon) {
    font-size: 10px;
    color: var(--up-muted);
    line-height: 1.35;
}

.up-signup-row {
    margin-top: 12px;
    padding: 13px 14px;
    border: 1px solid var(--up-line);
    background: #fbfaff;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.up-signup-row strong {
    display: block;
    font-size: 11px;
}

.up-signup-row span {
    font-size: 10px;
    color: var(--up-muted);
}

.up-root .up-secondary-btn {
    height: 38px;
    border-radius: 10px;
    border: 1px solid #d9d5e2;
    background: #fff;
    color: var(--up-plum);
    font-weight: 850;
    padding: 0 16px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}

.up-root .up-secondary-btn:hover {
    border-color: rgba(141, 61, 115, .4);
    background: #fffafe;
    color: var(--up-plum);
}

.up-helper {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    color: var(--up-muted);
    font-size: 10px;
    margin-top: 12px;
    padding-top: 13px;
    border-top: 1px solid var(--up-line);
}

.up-helper a {
    color: var(--up-teal);
    font-weight: 800;
    text-decoration: none;
}

.up-helper-contact {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    white-space: nowrap;
}

.up-root .up-helper-contact a:first-child {
    color: var(--up-muted);
    font-weight: 600;
}

.up-helper-sep {
    color: #c3c0cf;
}

/* Odoo's own login form pieces inside the new panel. */
.up-root .oe_reset_password_form .col-form-label,
.up-root .oe_reset_password_form .form-label,
.up-root .oe_signup_form .col-form-label,
.up-root .oe_signup_form .form-label {
    display: block;
    padding: 0;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--up-ink);
}

.up-root .oe_login_form,
.up-root .oe_reset_password_form {
    max-width: none;
    margin: 0;
}

.up-root .oe_login_form .alert,
.up-root .oe_reset_password_form .alert,
.up-root .oe_login_form + .alert {
    border-radius: 11px;
    font-size: 12px;
    padding: 10px 13px;
    margin: 8px 0 12px;
}

.up-root .oe_login_buttons {
    padding-top: 0 !important;
    display: block !important;
}

/* auth_signup adds its own "Don't have an account? / Reset Password" row
   after the login button; the design has both in their own places. */
.up-root .oe_login_form .oe_login_buttons > .justify-content-between.small {
    display: none !important;
}

.up-root .oe_login_buttons .btn-link {
    margin-top: 6px;
    font-size: 11px;
    color: var(--up-muted);
}

.up-root .oe_reset_password_form .oe_login_buttons .small a,
.up-root .oe_login_form ~ a,
.up-root .oe_reset_password_form ~ a {
    color: var(--up-teal);
    font-weight: 800;
    text-decoration: none;
}

/* Admission guide popup (existing feature). */
.up-guide {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(24, 22, 40, .55);
}

.up-guide.up-open {
    display: flex;
}

.up-guide-card {
    position: relative;
    max-width: min(760px, 100%);
    max-height: 100%;
    overflow: auto;
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

.up-guide-card img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.up-guide-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
    color: var(--up-ink);
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

/* --------------------------------------------------------------------------
   Application area (form and submitted application)
   -------------------------------------------------------------------------- */
.up-app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 72px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--up-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
}

.up-app-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.up-app-brand .up-crest {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    box-shadow: none;
    border: 1px solid var(--up-line);
    padding: 4px;
}

.up-app-title strong {
    display: block;
    font-size: 15px;
}

.up-app-title span {
    font-size: 11px;
    color: var(--up-muted);
}

.up-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.up-pill {
    padding: 8px 11px;
    border-radius: 999px;
    background: #f2f7f7;
    color: var(--up-teal);
    font-weight: 750;
    font-size: 11px;
    white-space: nowrap;
}

.up-root .up-ghost-btn {
    border: 1px solid var(--up-line);
    background: #fff;
    border-radius: 10px;
    padding: 9px 12px;
    font-weight: 750;
    color: var(--up-muted);
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.up-root .up-ghost-btn:hover {
    color: var(--up-ink);
    border-color: #d8d3e3;
}

.up-page {
    width: min(1280px, calc(100% - 40px));
    margin: 26px auto 52px;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 22px;
}

.up-side {
    position: sticky;
    top: 96px;
    align-self: start;
    background: #fff;
    border: 1px solid var(--up-line);
    border-radius: 18px;
    padding: 14px;
    box-shadow: var(--up-shadow-sm);
}

.up-side-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #9b98a8;
    font-weight: 850;
    padding: 6px 10px 10px;
}

.up-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.up-step-btn {
    border: 0;
    background: transparent;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    gap: 10px;
    text-align: left;
    align-items: center;
    color: #69677a;
    font-weight: 750;
    font-size: 12px;
    cursor: pointer;
    width: 100%;
}

.up-step-btn:hover {
    background: #f7f6fa;
}

.up-root button:focus,
.up-root a:focus {
    outline: none;
}

.up-root button:focus-visible,
.up-root a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 147, 143, .25);
}

.up-step-btn.up-active {
    background: #eff8f7;
    color: var(--up-teal);
}

.up-step-no {
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    border-radius: 9px;
    background: #f0eef5;
    display: grid;
    place-items: center;
    font-size: 11px;
}

.up-step-btn.up-active .up-step-no {
    background: var(--up-teal);
    color: #fff;
}

.up-step-btn.up-complete .up-step-no {
    background: #e7f8f1;
    color: var(--up-green);
}

.up-side-help {
    margin-top: 14px;
    padding: 13px;
    border-radius: 13px;
    background: linear-gradient(145deg, #faf1f7, #fff);
    border: 1px solid #eee0e9;
}

.up-side-help strong {
    font-size: 12px;
}

.up-side-help p {
    font-size: 11px;
    color: var(--up-muted);
    margin: 5px 0 0;
}

.up-side-help a {
    color: var(--up-teal);
    font-weight: 750;
    text-decoration: none;
    word-break: break-word;
}

.up-content {
    min-width: 0;
}

.up-progress {
    background: #fff;
    border: 1px solid var(--up-line);
    border-radius: 18px;
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: var(--up-shadow-sm);
}

.up-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    margin-bottom: 8px;
    gap: 10px;
}

.up-progress-top strong {
    font-size: 12px;
}

.up-progress-track {
    height: 7px;
    background: #efedf4;
    border-radius: 99px;
    overflow: hidden;
}

.up-progress-bar {
    height: 100%;
    width: 20%;
    background: linear-gradient(90deg, var(--up-teal), #32b6ac);
    border-radius: 99px;
    transition: .3s;
}

.up-card {
    background: #fff;
    border: 1px solid var(--up-line);
    border-radius: 20px;
    box-shadow: var(--up-shadow);
    overflow: hidden;
    margin-bottom: 18px;
}

.up-card-head {
    padding: 24px 26px 18px;
    border-bottom: 1px solid #efedf4;
}

.up-card-kicker {
    color: var(--up-teal);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .13em;
    font-weight: 900;
    margin-bottom: 5px;
}

.up-card-head h2 {
    font-size: 25px;
    letter-spacing: -.5px;
    margin: 0;
    font-weight: 800;
    color: var(--up-ink);
}

.up-card-head h2 .up-ku {
    font-weight: 700;
}

.up-card-head p {
    color: var(--up-muted);
    margin: 6px 0 0;
    font-size: 12px;
}

.up-card-body {
    padding: 24px 26px 28px;
}

.up-sub-head {
    margin: 26px 0 12px;
    padding-top: 20px;
    border-top: 1px solid var(--up-line);
}

.up-sub-head h3 {
    font-size: 16px;
    margin: 0;
    font-weight: 800;
    color: var(--up-ink);
}

.up-sub-head p {
    font-size: 11px;
    color: var(--up-muted);
    margin: 4px 0 0;
}

.up-info {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #fff8e9;
    border: 1px solid #f8e0a8;
    border-left: 4px solid var(--up-orange);
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 20px;
    color: #69552c;
    font-size: 11px;
}

.up-info b {
    display: block;
    color: #5d4517;
    margin-bottom: 2px;
}

.up-info.up-info-teal {
    background: #f2fbfa;
    border-color: #cfece9;
    border-left-color: var(--up-teal);
    color: #456965;
}

.up-info.up-info-teal b {
    color: var(--up-teal);
}

/* Field grid: wraps the existing .form-group/.form-label/.form-control. */
.up-root .up-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
}

.up-root .up-grid > .form-group,
.up-root .up-field-block {
    margin: 0;
    min-width: 0;
}

.up-root .up-grid .form-label,
.up-root .up-grid > .form-group > label,
.up-root .up-field-block > label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    font-weight: 800;
    font-size: 11px;
    margin: 0 0 7px;
    color: #464459;
}

.up-root .up-grid .required,
.up-root .up-req {
    color: var(--up-danger);
}

.up-root .up-grid .form-control,
.up-root .up-grid .form-select,
.up-root .up-field-block .form-control {
    width: 100%;
    height: auto;
    min-height: 43px;
    border: 1px solid #dedbe6;
    background-color: #fff;
    border-radius: 11px;
    padding: 0 12px;
    outline: none;
    box-shadow: none;
    color: var(--up-ink);
    font-size: 13px;
}

.up-root .up-grid select.form-control,
.up-root .up-grid .form-select {
    padding-right: 32px;
    appearance: auto;
}

.up-root .up-grid .form-control:focus,
.up-root .up-grid .form-select:focus {
    border-color: rgba(13, 147, 143, .7);
    box-shadow: 0 0 0 4px rgba(13, 147, 143, .08);
}

.up-root .up-grid .form-control[readonly],
.up-root .up-grid select:disabled {
    background-color: #f8f7fa;
    color: #676477;
}

.up-root .up-grid .form-control:invalid:not(:placeholder-shown):not(:focus) {
    border-color: rgba(221, 77, 89, .55);
}

.up-root #grad_certificate_rel {
    position: static !important;
    display: block;
    width: 100%;
    margin-top: 2px;
    color: var(--up-plum);
    font-size: 10px;
    font-weight: 700;
}

.up-root #br_mobile {
    display: none !important;
}

.up-check-line {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--up-line);
    border-radius: 12px;
    background: #fbfaff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.up-root .up-check-line input,
.up-root .up-check-line .form-check-input {
    float: none;
    position: static;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--up-teal);
}

/* Server-built subject / program preference tables. */
.up-root .up-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--up-line);
    border-radius: 14px;
    background: #fff;
}

.up-root .up-table-wrap table {
    width: 100%;
    margin: 0 !important;
    border-collapse: collapse;
    border: 0 !important;
}

.up-root .up-table-wrap th {
    background: #f6f4fa !important;
    color: #5f5c70 !important;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 11px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--up-line) !important;
    text-align: left;
}

.up-root .up-table-wrap td {
    padding: 9px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #f0eef5 !important;
    vertical-align: middle;
    font-size: 12px;
}

.up-root .up-table-wrap tr:last-child td {
    border-bottom: 0 !important;
}

.up-root .up-table-wrap td p {
    margin: 0;
    font-weight: 700;
}

.up-root .up-table-wrap td input,
.up-root .up-table-wrap td select {
    width: 100%;
    min-height: 38px;
    border: 1px solid #dedbe6 !important;
    border-radius: 10px;
    padding: 0 10px;
    background: #fff;
    font-size: 12px;
}

.up-root .up-table-wrap td input:focus,
.up-root .up-table-wrap td select:focus {
    outline: none;
    border-color: rgba(13, 147, 143, .7) !important;
    box-shadow: 0 0 0 4px rgba(13, 147, 143, .08);
}

/* Photo uploader (preview of the applicant photo). */
.up-photo {
    border: 1.5px dashed #d3cfde;
    border-radius: 18px;
    background: #fcfbff;
    padding: 24px;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 22px;
}

.up-photo-box {
    height: 150px;
    border-radius: 18px;
    background: linear-gradient(145deg, #f6f4fa, #fff);
    border: 1px solid var(--up-line);
    display: grid;
    place-items: center;
    font-size: 46px;
    overflow: hidden;
}

.up-photo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.up-photo h3 {
    font-size: 15px;
    margin: 0 0 5px;
    font-weight: 800;
}

.up-photo p {
    color: var(--up-muted);
    font-size: 11px;
    margin: 0 0 12px;
}

.up-root .up-upload-btn {
    display: inline-block;
    border: 1px solid rgba(13, 147, 143, .25);
    background: #eff9f8;
    color: var(--up-teal);
    padding: 9px 13px;
    border-radius: 10px;
    font-weight: 850;
    font-size: 11px;
    cursor: pointer;
    margin: 0;
}

.up-req-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 12px;
    margin-top: 14px;
}

.up-req-item {
    font-size: 10px;
    color: #6f6c7d;
    display: flex;
    gap: 7px;
    align-items: center;
}

.up-req-item::before {
    content: "✓";
    color: var(--up-green);
    font-weight: 900;
}

/* Document cards (whole card opens the file picker, as before). */
.up-doc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.up-root .up-doc {
    position: relative;
    border: 1px solid #e2deea;
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    min-height: 132px;
    transition: .2s;
    cursor: pointer;
}

.up-root .up-doc:hover {
    transform: translateY(-2px);
    box-shadow: var(--up-shadow-sm);
    border-color: #d6d0e3;
}

.up-doc-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #f4edf3;
    color: var(--up-plum);
    display: grid;
    place-items: center;
    font-size: 17px;
    margin-bottom: 12px;
}

.up-doc-title {
    display: block;
    font-size: 11px;
    font-weight: 800;
}

.up-doc-desc {
    font-size: 10px;
    color: var(--up-muted);
    margin: 4px 0 11px;
}

.up-root .up-doc .doc-status,
.up-root .up-doc .up-doc-link {
    color: var(--up-teal);
    font-weight: 850;
    font-size: 10px;
    word-break: break-all;
}

.up-root .up-doc .doc-status a,
.up-root .up-doc a.up-doc-link {
    color: var(--up-teal);
    text-decoration: underline;
}

.up-doc-dot {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d9d5e1;
}

.up-root .up-doc.uploaded .up-doc-dot,
.up-root .up-doc.up-has-file .up-doc-dot {
    background: var(--up-green);
}

.up-root .up-doc.uploaded .doc-status {
    color: var(--up-green);
}

.up-root .up-doc.up-no-file .up-doc-link {
    color: #9a97a8;
    font-weight: 700;
}

.up-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--up-line);
}

.up-root .up-btn {
    border: 0;
    border-radius: 11px;
    padding: 11px 15px;
    font-weight: 850;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.up-root .up-btn-light {
    background: #f2f0f5;
    color: #5d5a6d;
}

.up-root .up-btn-next {
    background: var(--up-plum);
    color: #fff;
    box-shadow: 0 8px 18px rgba(141, 61, 115, .18);
}

.up-root .up-btn-submit {
    background: linear-gradient(135deg, var(--up-orange), var(--up-orange-2));
    color: #fff;
    box-shadow: 0 9px 22px rgba(242, 146, 43, .22);
    font-size: 12px;
    padding: 12px 20px;
}

.up-root .up-btn[disabled] {
    opacity: .65;
    cursor: wait;
}

.up-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.up-summary-card {
    border: 1px solid var(--up-line);
    border-radius: 14px;
    padding: 14px;
    background: #fff;
    min-width: 0;
}

.up-summary-card span {
    font-size: 10px;
    color: var(--up-muted);
}

.up-summary-card strong {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.up-ready {
    text-align: center;
    padding: 24px 14px 10px;
}

.up-ready-icon {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    background: #fff3e6;
    color: var(--up-orange);
    display: grid;
    place-items: center;
    font-size: 30px;
    margin: 0 auto 14px;
}

.up-ready.up-done .up-ready-icon {
    background: #eaf8f3;
    color: var(--up-green);
}

.up-ready h3 {
    font-size: 20px;
    margin: 0 0 7px;
    font-weight: 800;
}

.up-ready p {
    max-width: 560px;
    margin: 0 auto;
    color: var(--up-muted);
    font-size: 12px;
}

/* Submitted / read-only */
.up-submitted {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    margin-bottom: 16px;
    border: 1px solid #cfe8df;
    border-radius: 18px;
    background: linear-gradient(135deg, #f3fbf8, #ffffff);
    box-shadow: var(--up-shadow-sm);
}

.up-submitted-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #e4f7ef;
    color: var(--up-green);
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 900;
}

.up-submitted-copy strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.up-submitted-copy span {
    display: block;
    font-size: 11px;
    color: var(--up-muted);
}

.up-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #e8f8f2;
    color: #087d57;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.up-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--up-green);
    box-shadow: 0 0 0 4px rgba(16, 163, 111, .10);
}

.up-chip.up-chip-draft {
    background: #fff4e6;
    color: #b3600c;
}

.up-chip.up-chip-draft::before {
    background: var(--up-orange);
    box-shadow: 0 0 0 4px rgba(242, 146, 43, .12);
}

.up-chip.up-chip-closed {
    background: #fdecee;
    color: #a3303d;
}

.up-chip.up-chip-closed::before {
    background: var(--up-danger);
    box-shadow: 0 0 0 4px rgba(221, 77, 89, .10);
}

.up-status {
    border: 1px solid var(--up-line);
    border-radius: 18px;
    background: #fff;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: var(--up-shadow-sm);
}

.up-status-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.up-status-head h3 {
    font-size: 15px;
    margin: 0 0 3px;
    font-weight: 800;
}

.up-status-head p {
    font-size: 11px;
    color: var(--up-muted);
    margin: 0;
}

.up-status-tools {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.up-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
}

.up-flow::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 16px;
    height: 2px;
    background: #ece9f1;
    z-index: 0;
}

.up-flow-step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 8px;
}

.up-flow-dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin: 0 auto 8px;
    background: #f0eef4;
    border: 4px solid #fff;
    box-shadow: 0 0 0 1px #e4e0ea;
    display: grid;
    place-items: center;
    color: #9b98a8;
    font-size: 11px;
    font-weight: 900;
}

.up-flow-step.up-done .up-flow-dot {
    background: var(--up-green);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(16, 163, 111, .24);
}

.up-flow-step.up-current .up-flow-dot {
    background: var(--up-teal);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(13, 147, 143, .10);
}

.up-flow-step strong {
    display: block;
    font-size: 10.5px;
}

.up-flow-step span {
    display: block;
    font-size: 9.5px;
    color: var(--up-muted);
    margin-top: 2px;
    line-height: 1.35;
}

.up-readonly-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 11px;
    background: #f4f3f7;
    color: #716e7f;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.up-readonly-note::before {
    content: "🔒";
}

.up-readonly .up-grid .form-control {
    background: #f8f7fa;
    color: #676477;
    border-color: #e5e2ea;
    pointer-events: none;
}

.up-readonly .up-photo,
.up-readonly .up-doc {
    background: #fbfafc;
}

.up-readonly .up-doc {
    cursor: default;
}

.up-readonly .up-doc:hover {
    transform: none;
}

/* Print button keeps the existing loading state. */
.up-root .print-btn.loading {
    opacity: .7;
    cursor: wait;
}

.up-footer {
    text-align: center;
    color: var(--up-muted);
    font-size: 11px;
    padding: 0 20px 34px;
}

.up-footer strong {
    color: var(--up-plum);
}

/* sweetalert2 dialogs in the portal palette (the bundled build uses the
   "swaal2-" class prefix) */
.swaal2-styled.swaal2-confirm {
    background: var(--up-teal) !important;
    border-radius: 10px !important;
}

.swaal2-styled.swaal2-cancel {
    border-radius: 10px !important;
}

.swaal2-popup {
    border-radius: 18px !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    .up-auth-shell {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .up-brand {
        padding: 34px;
    }

    .up-brand-foot {
        display: none;
    }

    .up-hero h1 {
        font-size: 38px;
    }

    .up-panel {
        padding: 36px;
    }

    .up-page {
        grid-template-columns: 1fr;
    }

    .up-side {
        position: static;
    }

    .up-steps {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .up-step-btn {
        justify-content: center;
    }

    .up-step-btn .up-step-label {
        display: none;
    }

    .up-side-help {
        display: none;
    }

    .up-doc-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    body.up-body {
        font-size: 13px;
    }

    .up-brand {
        min-height: 0;
        padding: 26px 22px;
    }

    .up-hero {
        margin: 24px 0 4px;
    }

    .up-hero h1 {
        font-size: 32px;
        letter-spacing: -1.3px;
    }

    .up-journey {
        display: none;
    }

    .up-panel {
        padding: 28px 20px 34px;
    }

    .up-panel h2.up-title {
        font-size: 28px;
    }

    .up-panel-top {
        align-items: center;
    }

    .up-quick {
        grid-template-columns: 1fr;
    }

    .up-quick-card:nth-child(3) {
        grid-column: auto;
    }

    .up-signup-row,
    .up-helper {
        align-items: flex-start;
        flex-direction: column;
    }

    .up-root .up-signup-row .up-secondary-btn {
        width: 100%;
    }

    .up-app-header {
        height: 64px;
        padding: 0 14px;
    }

    .up-app-title span,
    .up-pill {
        display: none;
    }

    .up-app-title strong {
        font-size: 13px;
        line-height: 1.25;
        max-width: 150px;
    }

    .up-header-actions {
        gap: 6px;
    }

    .up-page {
        width: min(100% - 20px, 1280px);
        margin-top: 14px;
        gap: 12px;
    }

    .up-side {
        padding: 10px;
    }

    .up-side-label {
        display: none;
    }

    .up-card-head {
        padding: 20px;
    }

    .up-card-body {
        padding: 18px;
    }

    .up-root .up-grid,
    .up-doc-grid,
    .up-summary {
        grid-template-columns: 1fr;
    }

    .up-photo {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .up-photo-box {
        width: 140px;
        margin: auto;
    }

    .up-req-grid {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }

    .up-card-head h2 {
        font-size: 21px;
    }

    .up-actions .up-btn {
        flex: 1;
    }

    .up-submitted {
        grid-template-columns: auto 1fr;
    }

    .up-submitted .up-chip {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .up-flow {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .up-flow::before {
        display: none;
    }

    .up-status-head {
        flex-direction: column;
    }
}