@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* =========================================================
   iPayLess Student UI — cohesive with public site v1.8
   ========================================================= */

:root {
    --ipl-navy: #0b2d4f;
    --ipl-navy-2: #123b65;
    --ipl-blue: #176bce;
    --ipl-blue-2: #0e5bb8;
    --ipl-ink: #102a43;
    --ipl-muted: #5b6f82;
    --ipl-line: #dce6ef;
    --ipl-soft: #f5f9fc;
    --ipl-cream: #fff5d8;
    --ipl-gold: #f2b91e;
    --ipl-gold-2: #d89d00;
    --ipl-coral: #e4614e;
    --ipl-green: #167a68;
    --ipl-white: #ffffff;
    --ipl-shadow: 0 18px 45px rgba(15,42,70,.12);
}

/* ---------------------------------------------------------
   GLOBAL FONT RESET
   Turbo's display font was leaking through headings/buttons.
--------------------------------------------------------- */

body.ipayless-flow-page,
body.ipayless-login-page,
body.ipayless-student-page,
body.ipayless-flow-page :where(h1,h2,h3,h4,h5,h6,p,a,label,button,input,select,textarea,div,span,small,strong),
body.ipayless-login-page :where(h1,h2,h3,h4,h5,h6,p,a,label,button,input,select,textarea,div,span,small,strong),
body.ipayless-student-page :where(h1,h2,h3,h4,h5,h6,p,a,label,button,input,select,textarea,div,span,small,strong) {
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

/* Put Font Awesome back after the broad font reset. */
body.ipayless-flow-page :where(.fa,.fas,.far,.fa-solid,.fa-regular),
body.ipayless-login-page :where(.fa,.fas,.far,.fa-solid,.fa-regular),
body.ipayless-student-page :where(.fa,.fas,.far,.fa-solid,.fa-regular) {
    font-family: "Font Awesome 6 Free" !important;
}
body.ipayless-flow-page :where(.fab,.fa-brands),
body.ipayless-login-page :where(.fab,.fa-brands),
body.ipayless-student-page :where(.fab,.fa-brands) {
    font-family: "Font Awesome 6 Brands" !important;
}

/* Variables expected by the cloned Turbo markup. */
body.ipayless-flow-page,
body.ipayless-login-page,
body.ipayless-student-page {
    --accent: var(--ipl-blue) !important;
    --accent-hover: var(--ipl-blue) !important;
    --accent-active: var(--ipl-blue-2) !important;
    --accent-rgb: 23,107,206 !important;
    --sidebar-bg: var(--ipl-navy) !important;
    --link-color: var(--ipl-blue) !important;
    --link-color-hover: var(--ipl-blue-2) !important;
    color: var(--ipl-ink) !important;
}

/* =========================================================
   REGISTRATION
   ========================================================= */

body.ipayless-flow-page {
    margin: 0 !important;
    padding: 0 !important;
    background:
        radial-gradient(circle at 86% 0%, rgba(23,107,206,.06), transparent 27rem),
        var(--ipl-soft) !important;
}

.ipayless-flow-header {
    width: 100%;
    background: var(--ipl-navy) !important;
    color: #fff !important;
    border-bottom: 3px solid var(--ipl-gold) !important;
    box-shadow: 0 7px 24px rgba(11,45,79,.14) !important;
}

.ipayless-flow-header__inner {
    max-width: 1180px;
    min-height: 78px;
    margin: 0 auto;
    padding: 12px 22px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 22px;
}

.ipayless-flow-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    width: max-content;
    color: #fff !important;
    text-decoration: none !important;
}

.ipayless-flow-brand__mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.ipayless-flow-brand__name {
    display: block;
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    letter-spacing: -.045em !important;
    line-height: 1 !important;
}

.ipayless-flow-brand__sub {
    display: block;
    margin-top: 6px;
    color: #c9d9e7 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .17em !important;
    line-height: 1 !important;
    text-transform: uppercase;
}

.ipayless-flow-progress {
    min-width: 220px;
    text-align: center;
}

.ipayless-flow-progress__label {
    margin-bottom: 7px;
    color: #dce9f4 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase;
}

.ipayless-flow-progress__track {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.ipayless-flow-progress__dot {
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.20);
}

.ipayless-flow-progress__dot.is-complete {
    background: var(--ipl-gold);
}

.ipayless-flow-progress__dot.is-current {
    background: #70afff;
}

.ipayless-flow-back {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    color: #eaf3fb !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.ipayless-flow-back:hover,
.ipayless-flow-back:focus {
    background: var(--ipl-navy-2) !important;
    color: #fff !important;
}

body.ipayless-flow-page > .container {
    width: min(100% - 32px, 860px) !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    padding: 38px 0 58px !important;
}

body.ipayless-flow-page .header {
    margin: 0 0 24px !important;
    text-align: left !important;
}

body.ipayless-flow-page .header h1 {
    margin: 0 !important;
    color: var(--ipl-navy) !important;
    font-size: clamp(28px,4vw,38px) !important;
    line-height: 1.06 !important;
    font-weight: 900 !important;
    letter-spacing: -.045em !important;
}

body.ipayless-flow-page .header p {
    margin: 9px 0 0 !important;
    color: var(--ipl-muted) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
}

body.ipayless-flow-page .registration-form,
body.ipayless-flow-page .turbo-reg-card {
    background: #fff !important;
    border: 1px solid var(--ipl-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(14,49,80,.065) !important;
}

body.ipayless-flow-page .info-section,
body.ipayless-flow-page .question-row,
body.ipayless-flow-page .turbo-review-item {
    background: #fbfdff !important;
    border-color: var(--ipl-line) !important;
}

body.ipayless-flow-page .section-title,
body.ipayless-flow-page .question-number,
body.ipayless-flow-page .loading i,
body.ipayless-flow-page .modal-title,
body.ipayless-flow-page .modal-body h3 {
    color: var(--ipl-blue) !important;
}

body.ipayless-flow-page .info-text,
body.ipayless-flow-page .instruction,
body.ipayless-flow-page .terms-text,
body.ipayless-flow-page .info-label,
body.ipayless-flow-page .footer {
    color: var(--ipl-muted) !important;
}

body.ipayless-flow-page input:not([type="checkbox"]):not([type="radio"]),
body.ipayless-flow-page select,
body.ipayless-flow-page textarea {
    background: #fff !important;
    color: var(--ipl-ink) !important;
    border: 1px solid #cdd8e3 !important;
    border-radius: 10px !important;
}

body.ipayless-flow-page input:not([type="checkbox"]):not([type="radio"]):focus,
body.ipayless-flow-page select:focus,
body.ipayless-flow-page textarea:focus {
    border-color: var(--ipl-blue) !important;
    box-shadow: 0 0 0 3px rgba(23,107,206,.13) !important;
    outline: none !important;
}

body.ipayless-flow-page input[type="checkbox"],
body.ipayless-flow-page input[type="radio"] {
    accent-color: var(--ipl-blue) !important;
}

body.ipayless-flow-page :where(.btn-next,.btn-continue,.btn-primary) {
    background: var(--ipl-blue) !important;
    background-image: none !important;
    border-color: var(--ipl-blue) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 18px rgba(23,107,206,.16) !important;
}

body.ipayless-flow-page :where(.btn-next,.btn-continue,.btn-primary):hover,
body.ipayless-flow-page :where(.btn-next,.btn-continue,.btn-primary):focus {
    background: var(--ipl-blue-2) !important;
    border-color: var(--ipl-blue-2) !important;
    color: #fff !important;
}

body.ipayless-flow-page :where(.btn-back,.btn-edit) {
    background: #fff !important;
    border-color: #cfdbe7 !important;
    color: var(--ipl-navy) !important;
    font-weight: 800 !important;
}

body.ipayless-flow-page :where(.btn-back,.btn-edit):hover,
body.ipayless-flow-page :where(.btn-back,.btn-edit):focus {
    background: #eef5fb !important;
    border-color: var(--ipl-blue) !important;
    color: var(--ipl-blue) !important;
}

body.ipayless-flow-page .terms-section {
    background: #fffaf0 !important;
    border-color: #ead89c !important;
    border-left-color: var(--ipl-gold) !important;
}

body.ipayless-flow-page #terms-link,
body.ipayless-flow-page #terms-link:visited,
body.ipayless-flow-page .footer a {
    color: var(--ipl-blue) !important;
}

body.ipayless-flow-page .warning-text {
    background: var(--ipl-cream) !important;
    color: #745f1d !important;
    border-color: #ead89c !important;
    border-left-color: var(--ipl-gold) !important;
}

body.ipayless-flow-page .modal-content {
    background: #fff !important;
    border-color: var(--ipl-line) !important;
    border-radius: 18px !important;
}

body.ipayless-flow-page .modal-header,
body.ipayless-flow-page .modal-footer {
    background: var(--ipl-soft) !important;
    border-color: var(--ipl-line) !important;
}

/* =========================================================
   LOGIN
   ========================================================= */

body.ipayless-login-page {
    min-height: 100vh !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background:
        radial-gradient(circle at 86% 0%, rgba(23,107,206,.07), transparent 26rem),
        var(--ipl-soft) !important;
}

body.ipayless-login-page .turbo-login-racebar {
    display: none !important;
}

.ipayless-login-topbar {
    width: 100%;
    background: var(--ipl-navy) !important;
    border-bottom: 3px solid var(--ipl-gold) !important;
    box-shadow: 0 7px 24px rgba(11,45,79,.14) !important;
}

.ipayless-login-topbar__inner {
    max-width: 1180px;
    min-height: 78px;
    margin: 0 auto;
    padding: 11px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.ipayless-login-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #fff !important;
    text-decoration: none !important;
}

.ipayless-login-brand__mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}

.ipayless-login-brand__name {
    display: block;
    color: #fff !important;
    font-size: 19px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -.045em !important;
}

.ipayless-login-brand__sub {
    display: block;
    margin-top: 6px;
    color: #c9d9e7 !important;
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .17em !important;
}

.ipayless-login-back {
    padding: 9px 12px;
    color: #eaf3fb !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.ipayless-login-back:hover {
    background: var(--ipl-navy-2) !important;
    color: #fff !important;
}

body.ipayless-login-page > .container {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 54px 18px 72px !important;
}

body.ipayless-login-page > .container .col-md-6 {
    width: min(100%,480px) !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

body.ipayless-login-page .card {
    overflow: hidden;
    background: #fff !important;
    border: 1px solid var(--ipl-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(14,49,80,.07) !important;
}

body.ipayless-login-page .card-header {
    padding: 25px 28px 17px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--ipl-line) !important;
}

body.ipayless-login-page .card-header h4 {
    margin: 0 !important;
    color: var(--ipl-navy) !important;
    font-size: 25px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -.04em !important;
}

body.ipayless-login-page .card-body {
    padding: 27px 28px 30px !important;
}

body.ipayless-login-page .form-label {
    color: var(--ipl-ink) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

body.ipayless-login-page .form-control {
    min-height: 46px !important;
    border: 1px solid #cdd8e3 !important;
    border-radius: 10px !important;
}

body.ipayless-login-page .form-control:focus {
    border-color: var(--ipl-blue) !important;
    box-shadow: 0 0 0 3px rgba(23,107,206,.13) !important;
}

body.ipayless-login-page .btn-primary {
    background: var(--ipl-blue) !important;
    background-image: none !important;
    border-color: var(--ipl-blue) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 18px rgba(23,107,206,.16) !important;
}

body.ipayless-login-page .btn-primary:hover,
body.ipayless-login-page .btn-primary:focus {
    background: var(--ipl-blue-2) !important;
    border-color: var(--ipl-blue-2) !important;
}

/* =========================================================
   MY ENROLLMENTS / STUDENT DASHBOARD
   ========================================================= */

body.ipayless-student-page {
    background: var(--ipl-soft) !important;
    color: var(--ipl-ink) !important;
}

body.ipayless-student-page > .container-fluid {
    padding: 38px 36px 44px !important;
}

/* Page header */
body.ipayless-student-page .ipayless-dashboard-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    color: var(--ipl-blue) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase;
}

body.ipayless-student-page .ipayless-dashboard-kicker::before {
    content: "$";
    width: 28px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    position: relative;
    border: 1.5px solid var(--ipl-gold);
    border-radius: 5px;
    background: var(--ipl-cream);
    color: var(--ipl-navy);
    font-size: 10px;
    font-weight: 900;
}

body.ipayless-student-page .ipayless-dashboard-title {
    margin: 0 !important;
    color: var(--ipl-navy) !important;
    font-size: clamp(30px,3vw,40px) !important;
    line-height: 1.04 !important;
    font-weight: 900 !important;
    letter-spacing: -.045em !important;
}

body.ipayless-student-page .ipayless-dashboard-subtitle {
    margin: 9px 0 0 !important;
    color: var(--ipl-muted) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

/* Primary actions: iPayLess blue, never Turbo red. */
body.ipayless-student-page :where(.btn-primary,.btn-continue,.empty-state-cta) {
    background: var(--ipl-blue) !important;
    background-image: none !important;
    border: 1px solid var(--ipl-blue) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 850 !important;
    box-shadow: 0 8px 18px rgba(23,107,206,.16) !important;
    text-decoration: none !important;
}

body.ipayless-student-page :where(.btn-primary,.btn-continue,.empty-state-cta):hover,
body.ipayless-student-page :where(.btn-primary,.btn-continue,.empty-state-cta):focus {
    background: var(--ipl-blue-2) !important;
    background-image: none !important;
    border-color: var(--ipl-blue-2) !important;
    color: #fff !important;
    filter: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 22px rgba(23,107,206,.20) !important;
}

body.ipayless-student-page .ipayless-browse-btn {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
}

/* Enrollment cards */
body.ipayless-student-page .enrollment-card {
    background: #fff !important;
    border: 1px solid var(--ipl-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(14,49,80,.05) !important;
}

body.ipayless-student-page .enrollment-card:hover {
    transform: translateY(-2px) !important;
    border-color: #c4d9ec !important;
    box-shadow: 0 14px 34px rgba(14,49,80,.09) !important;
}

body.ipayless-student-page .course-header {
    background: linear-gradient(135deg,var(--ipl-navy),var(--ipl-navy-2)) !important;
    border-bottom: 3px solid var(--ipl-gold) !important;
}

body.ipayless-student-page .course-header::before {
    background: rgba(255,255,255,.045) !important;
}

body.ipayless-student-page .course-header .course-title,
body.ipayless-student-page .course-header .course-type {
    color: #fff !important;
}

body.ipayless-student-page .progress-fill {
    background: linear-gradient(90deg,var(--ipl-blue),#70afff) !important;
}

/* Empty state: compact, deliberate, same card language as public site. */
body.ipayless-student-page .empty-state {
    width: min(100%,760px) !important;
    margin: 18px auto 0 !important;
    padding: 50px 34px !important;
    text-align: center !important;
    background: #fff !important;
    border: 1px solid var(--ipl-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(14,49,80,.045) !important;
    color: var(--ipl-muted) !important;
}

body.ipayless-student-page .empty-state > i {
    width: 62px !important;
    height: 62px !important;
    margin: 0 auto 20px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 16px !important;
    background: #e8f2ff !important;
    color: var(--ipl-blue) !important;
    font-size: 28px !important;
    opacity: 1 !important;
}

body.ipayless-student-page .empty-state h4 {
    margin: 0 0 8px !important;
    color: var(--ipl-navy) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
}

body.ipayless-student-page .empty-state p {
    max-width: 480px;
    margin: 0 auto 22px !important;
    color: var(--ipl-muted) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

body.ipayless-student-page .empty-state-cta {
    min-height: 46px !important;
    margin-top: 0 !important;
    padding: 11px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 14px !important;
}

body.ipayless-student-page .empty-state-cta i {
    margin: 0 !important;
    color: inherit !important;
    font-size: 14px !important;
}

/* Shared student sidebar */
body.ipayless-student-page nav.sidebar {
    background: var(--ipl-navy) !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 8px 0 28px rgba(11,45,79,.15) !important;
}

body.ipayless-student-page .sidebar__inner {
    background: var(--ipl-navy) !important;
}

body.ipayless-student-page .sidebar-nav .nav-link.active {
    background: var(--ipl-blue) !important;
    border-color: #2d78d6 !important;
    color: #fff !important;
}

body.ipayless-student-page .sidebar-nav .nav-link:hover:not(.active) {
    background: var(--ipl-navy-2) !important;
    color: #fff !important;
}

/* Student footer should visually continue the public iPayLess footer. */
body.ipayless-student-page footer {
    background: #082844 !important;
    background-image: none !important;
    color: #eaf3fb !important;
    border-top: 3px solid var(--ipl-gold) !important;
    box-shadow: none !important;
}

body.ipayless-student-page footer::before,
body.ipayless-student-page footer::after {
    background-image: none !important;
}

body.ipayless-student-page footer :where(a,span,p,strong,div) {
    color: inherit !important;
}

body.ipayless-student-page footer a {
    color: #eaf3fb !important;
    text-decoration: none !important;
}

body.ipayless-student-page footer a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* Keep status colors semantic. Coral is allowed as a small accent, not CTA. */
body.ipayless-student-page .nav-badge {
    background: var(--ipl-coral) !important;
}

body.ipayless-student-page .turbo-flash--success {
    border-left-color: var(--ipl-green) !important;
}

body.ipayless-student-page .turbo-flash--error {
    border-left-color: var(--ipl-coral) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    body.ipayless-student-page > .container-fluid {
        margin-left: 0 !important;
        max-width: 100% !important;
        padding: 78px 16px 32px !important;
    }
}

@media (max-width: 767.98px) {
    .ipayless-flow-header__inner {
        grid-template-columns: 1fr auto;
        min-height: 70px;
        padding: 10px 14px;
    }

    .ipayless-flow-progress {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
    }

    .ipayless-flow-progress__label {
        display: none;
    }

    .ipayless-flow-progress__dot {
        flex: 1 1 0;
        max-width: 72px;
    }

    .ipayless-flow-brand__sub,
    .ipayless-login-brand__sub {
        display: none;
    }

    body.ipayless-flow-page > .container {
        width: min(100% - 22px,860px) !important;
        padding-top: 26px !important;
    }

    body.ipayless-login-page > .container {
        padding: 34px 13px 50px !important;
    }

    body.ipayless-student-page .empty-state {
        padding: 38px 20px !important;
    }
}