:root {
    --bg: #f7f8fb;
    --card: #ffffff;
    --border: #e9eef5;
    --text: #0f172a;
    --muted: #6b7280;
    --primary: #205c9c;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --purple: #7c3aed;
    --border: #e9eaeb;
    --main-color: #205c9c;
    --font-sys: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-ui-base: var(--font-sys);
    --font-ui-ar: "Tajawal", "Inter", "Segoe UI", Tahoma, Arial, sans-serif;
    --font-ui-active: var(--font-ui-base);
    --portal-font-teacher:
        "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
        sans-serif;
    --portal-font-student:
        "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, -apple-system,
        sans-serif;
    --portal-font-auth:
        "Poppins", "Inter", "Segoe UI", system-ui, -apple-system,
        BlinkMacSystemFont, sans-serif;
    --pair-border: #e5e7eb;
    --pair-bg: #ffffff;
    --pair-ink: #111827;
    --pair-primary: #2563eb;
    --pair-correct: #16a34a;
    --pair-wrong: #dc2626;
    --pair-correct-bg: rgba(22, 163, 74, 0.12);
    --pair-wrong-bg: rgba(220, 38, 38, 0.12);
    --sidebar-width: 340px;
    --sidebar-width-collapse: 70px;
    --fc-border: #e9eaeb;
    --fc-bg: #ffffff;
    --fc-text: #0c0c0d;
    --fc-primary: #2662a2;
    --fc-correct: #198754;
    --fc-wrong: #dc3545;
    --bs-border-color: #e9eaeb;
    --bs-btn-bg: #205c9c;
    --bs-primary-rgb: 32, 92, 156;
    --bs-success-rgb: 23, 178, 106;
    --bs-border-radius: 12px;
    --bs-box-shadow-sm:
        0 4px 8px -2px rgba(26, 24, 22, 0.1),
        0 2px 4px -2px rgba(26, 24, 22, 0.06);
    --bs-primary: #2662a2;
}

html[lang^="ar"],
html[dir="rtl"] {
    --font-ui-active: var(--font-ui-ar);
    --portal-font-teacher: var(--font-ui-ar);
    --portal-font-student: var(--font-ui-ar);
    --portal-font-auth: var(--font-ui-ar);
}

body {
    font-family: var(--font-ui-active) !important;
}

html,
body {
    background: #fff;
}

#parent-subscription {
    background-color: #fff;
}

@media screen and (max-width: 450px) {
    #parent-subscription {
        text-align: center;
        position: relative;
        background: transparent;
    }
}

/* Parent account phone and security modals */
#parent-settings .account-phone-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    direction: ltr;
    align-items: stretch;
    min-width: 0;
    min-height: 44px;
    overflow: hidden;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #fff;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

#parent-settings .account-phone-field:focus-within {
    border-color: #204f84;
    box-shadow: 0 0 0 3px rgba(32, 79, 132, 0.12);
}

#parent-settings .account-phone-field .iti {
    width: 100%;
    min-width: 0;
}

#parent-settings .account-phone-field #phone_number {
    width: 100%;
    height: 100%;
    min-height: 44px;
    padding-right: 12px !important;
    padding-left: 90px !important;
    border: 0 !important;
    border-radius: 8px 0 0 8px;
    box-shadow: none !important;
    background: #fff;
}

#parent-settings .account-phone-field__action {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-inline-start: 1px solid #e4e7ec;
    border-radius: 0 8px 8px 0;
    background: #f8fafc;
    color: #204f84;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition:
        color 160ms ease,
        background-color 160ms ease;
}

#parent-settings .account-phone-field__action:hover {
    background: #eef4fa;
    color: #153b67;
    text-decoration: none !important;
}

#parent-settings .account-phone-field__action:focus-visible {
    position: relative;
    z-index: 2;
    outline: 3px solid rgba(32, 79, 132, 0.22);
    outline-offset: -3px;
    box-shadow: none;
}

.parent-account-modal {
    z-index: 1055;
}

.parent-account-modal .modal-dialog {
    width: calc(100% - 32px);
    max-width: 500px;
    min-height: calc(100% - 32px);
    margin: 16px auto;
}

.parent-account-modal .parent-account-modal__content {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border-radius: 20px !important;
    background: #fff;
    box-shadow: 0 24px 64px rgba(10, 13, 18, 0.22) !important;
    scrollbar-width: thin;
}

.parent-account-modal .parent-account-modal__header {
    padding: 0 24px;
    text-align: start;
}

.parent-account-modal .parent-account-modal__body {
    padding: 20px 24px 24px;
    text-align: start;
}

.parent-account-modal .btn-close {
    top: 24px;
    right: auto;
    left: auto;
    inset-inline-end: 24px;
    z-index: 90;
    border-radius: 50%;
}

.parent-account-modal .btn-close:focus-visible {
    outline: 3px solid rgba(32, 79, 132, 0.18);
    outline-offset: 2px;
    box-shadow: none;
}

.parent-account-modal .imgs_container .bg {
    right: auto;
    left: auto;
    inset-inline-start: -44px;
}

.parent-account-modal .imgs_container .icon-2 {
    right: auto;
    left: auto;
    inset-inline-start: 24px;
}

.parent-account-modal .modal-title {
    color: #101828;
}

.parent-account-modal .form-label {
    color: #344054;
}

.parent-account-modal .form-control {
    min-height: 44px;
    border-color: #d0d5dd;
    border-radius: 8px;
}

.parent-account-modal .form-control:focus {
    border-color: #204f84;
    box-shadow: 0 0 0 3px rgba(32, 79, 132, 0.12);
}

.parent-account-modal .parent-account-modal__phone-input .iti {
    width: 100%;
}

.parent-account-modal .parent-account-modal__primary,
.parent-account-modal .parent-account-modal__secondary {
    min-height: 44px;
    border-radius: 8px;
    font-weight: 600;
}

.parent-account-modal .parent-account-modal__primary {
    border-color: #204f84;
    background: #204f84;
}

.parent-account-modal .parent-account-modal__primary:hover,
.parent-account-modal .parent-account-modal__primary:focus-visible {
    border-color: #153b67;
    background: #153b67;
}

.parent-account-modal .parent-account-modal__secondary {
    background: #fff;
    color: #344054;
}

.parent-account-modal .parent-account-modal__secondary:hover,
.parent-account-modal .parent-account-modal__secondary:focus-visible {
    background: #f8fafc;
}

.parent-account-modal .parent-account-code-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    direction: ltr;
    gap: 12px;
}

.parent-account-modal .parent-account-code-input {
    width: 100%;
    min-width: 0;
    height: 56px;
    padding: 8px;
    color: #101828;
    font-size: 24px;
    font-weight: 600;
}

.parent-account-modal .parent-account-modal__feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 24px;
    gap: 6px 12px;
}

.parent-account-modal .parent-account-modal__resend {
    color: #204f84;
    font-weight: 600;
}

.parent-account-modal .parent-account-modal__instructions strong {
    display: inline-block;
    color: #344054;
}

body.parent-account-modal-open > .modal-backdrop.show {
    background-color: #0a0d12;
    opacity: 0.7;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

@media screen and (max-width: 575.98px) {
    #parent-settings .account-phone-field__action {
        min-width: 72px;
        padding: 0 12px;
        font-size: 13px;
    }

    .parent-account-modal .modal-dialog {
        width: calc(100% - 20px);
        min-height: calc(100% - 20px);
        margin: 10px auto;
    }

    .parent-account-modal .parent-account-modal__content {
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 16px !important;
    }

    .parent-account-modal .parent-account-modal__header {
        padding-inline: 16px;
    }

    .parent-account-modal .parent-account-modal__body {
        padding: 18px 16px 20px;
    }

    .parent-account-modal .btn-close {
        top: 20px;
        inset-inline-end: 16px;
    }

    .parent-account-modal .parent-account-code-group {
        gap: 8px;
    }

    .parent-account-modal .parent-account-code-input {
        height: 52px;
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #parent-settings .account-phone-field,
    #parent-settings .account-phone-field__action {
        transition: none;
    }
}

#parent-subscription h3 {
    font-size: 26px;
}

@media screen and (max-width: 1280px) {
    #parent-subscription .card-body {
        padding: 8px !important;
    }
}

#parent-subscription .billing-history .billing-empty img {
    opacity: 0.7;
}

#parent-subscription .billing-history .billing-empty p {
    font-size: 14px;
    color: #6c757d;
}

#parent-subscription .card {
    border-radius: 12px;
    transition: all 0.2s ease-in-out;
}

#parent-subscription .card:hover {
    transform: translateY(-2px);
}

#parent-subscription .card h6 {
    font-size: 15px;
}

#parent-subscription .card .btn-light {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e9ecef;
}

#parent-subscription .text-primary {
    color: var(--main-color) !important;
}

#parent-subscription .fw-semibold {
    font-weight: 600 !important;
}

#parent-subscription .upgrade-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 50px;
    background-color: #ffe6f3;
    color: #d80076;
    font-size: 14px;
    font-weight: 500;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#parent-subscription .upgrade-badge .discount {
    background-color: #fff;
    color: #d80076;
    border-radius: 50px;
    padding: 3px 8px;
    font-weight: 600;
    margin-right: 8px;
}

#parent-subscription .upgrade-badge .text {
    white-space: nowrap;
}

#parent-subscription .upgrade-badge i {
    font-size: 18px;
    color: #d80076;
}

#parent-subscription .upgrade-badge:hover {
    background-color: #ffd1ec;
}

@media screen and (max-width: 1420px) {
    #parent-subscription .upgrade-badge {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        border: 0;
        border-radius: 0;
    }

    #parent-subscription .upgrade-badge .text {
        white-space: normal;
        margin-top: 4px;
    }
}

@media screen and (max-width: 450px) {
    #parent-subscription .upgrade-badge {
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
        border-radius: 50px !important;
    }

    #parent-subscription .upgrade-badge .text {
        white-space: nowrap !important;
        margin-top: 0 !important;
    }
}

#parent-subscription .billing-table {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    font-size: 14px;
}

#parent-subscription .billing-table thead {
    background: #f9fafb;
    font-weight: 600;
    color: #333;
}

#parent-subscription .billing-table thead th {
    padding: 14px 20px;
    border: 1px solid #e9eaeb;
    text-align: start;
    background-color: #fafafa;
}

#parent-subscription .billing-table tbody tr {
    border-left: 1px solid #e9eaeb;
    border-right: 1px solid #e9eaeb;
}

#parent-subscription .billing-table tbody tr td {
    padding: 14px 20px;
    vertical-align: middle;
    color: #333;
    text-align: start;
}

#parent-subscription .billing-table tbody tr td:first-child {
    font-weight: 500;
}

#parent-subscription .billing-table tbody tr:not(:last-child) {
    border-bottom: 1px solid #f1f1f1;
}

#parent-subscription .billing-table .status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 10px;
    background-color: #fff;
    color: #414651;
}

#parent-subscription .billing-table .status-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
}

#parent-subscription .billing-table .status-badge.success .dot {
    background: #0f9d58;
}

#parent-subscription .billing-table .status-badge.failed .dot {
    background: #d93025;
}

#onboarding-page {
    /* Mobile-only override for this page */
}

@media (max-width: 576px) {
    #onboarding-page .form-select,
    #onboarding-page .form-control {
        padding: 14px !important;
        border-radius: 8px;
    }

    #onboarding-page .form-select #country {
        margin-top: 16px;
        background: red;
    }

    #onboarding-page .form-control#phone_number {
        padding: 14px 14px 14px 79px !important;
        width: 100%;
    }

    #onboarding-page .iti {
        width: 100%;
    }
}

@media screen and (max-width: 450px) {
    #onboarding-page .process {
        display: none;
    }
}

#parent-profiles-page,
#profiles-page {
    background-color: #fff;
    padding: 2rem;
}

@media screen and (max-width: 450px) {
    #parent-profiles-page,
    #profiles-page {
        padding: 0px;
    }

    #parent-profiles-page #profiles-page,
    #profiles-page #profiles-page {
        flex-wrap: wrap !important;
    }

    #parent-profiles-page #profiles-page > a,
    #profiles-page #profiles-page > a {
        flex: 0 0 calc(50% - 0.75rem);
        max-width: calc(50% - 0.75rem);
    }

    #parent-profiles-page #profiles-page .profiles-card .card,
    #profiles-page #profiles-page .profiles-card .card {
        width: 100%;
    }
}

#parent-profiles-page h3,
#profiles-page h3 {
    font-size: 28px;
    font-weight: 600;
}

@media screen and (max-width: 450px) {
    #parent-profiles-page h3,
    #profiles-page h3 {
        font-size: 24px;
    }
}

#parent-profiles-page p,
#profiles-page p {
    color: #6c757d;
}

@media screen and (max-width: 450px) {
    #parent-profiles-page p,
    #profiles-page p {
        font-size: 14px;
        font-weight: 300;
    }
}

#parent-profiles-page .add-profile-section,
#profiles-page .add-profile-section {
    position: relative;
    z-index: 99;
}

#parent-profiles-page .add-profile-section .circle-background,
#profiles-page .add-profile-section .circle-background {
    position: absolute;
    top: 41%;
    left: 50%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(0, 123, 255, 0.06) 0%,
        transparent 70%
    );
    z-index: -1;
}

#parent-profiles-page .add-profile-section .add-profile-btn,
#profiles-page .add-profile-section .add-profile-btn {
    width: 64px;
    height: 64px;
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e9eaeb;
    transition: all 0.3s ease;
}

#parent-profiles-page .add-profile-section .add-profile-btn:hover,
#profiles-page .add-profile-section .add-profile-btn:hover {
    background: #f8f9fa;
    border-color: #94bde5;
}

#parent-profiles-page .add-profile-section .add-profile-btn i,
#profiles-page .add-profile-section .add-profile-btn i {
    color: #2662a2;
}

#parent-profiles-page .manage-accounts a,
#profiles-page .manage-accounts a {
    color: #535862;
    font-weight: 500;
    font-size: 14px;
}

/* Remove underline on profile item links */
#profiles-page > a {
    text-decoration: none !important;
}

#profiles-page > a:hover,
#profiles-page > a:focus {
    text-decoration: none !important;
}

/* ========== Sidebar-Inner ========== */
/* Lessons Accordion */
#lessonAccordion .accordion-item {
    border: none;
    margin-bottom: 16px;
}

#lessonAccordion .accordion-item .accordion-button.lesson-header {
    background: transparent !important;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e9eaeb;
}

#lessonAccordion
    .accordion-item
    .accordion-button.lesson-header
    .circle-progress {
    --size: 42px;
    --thickness: 6px;
    --color: #16a34a;
    --bg: #e9eaeb;
    --value: 0;
    position: relative;
    width: var(--size);
    height: var(--size);
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #111827;
    z-index: 0;
    overflow: hidden;
    /* ring background */
}

#lessonAccordion
    .accordion-item
    .accordion-button.lesson-header
    .circle-progress::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        var(--color) calc(var(--value) * 1%),
        var(--bg) 0
    );
    mask: radial-gradient(
        farthest-side,
        transparent calc(100% - var(--thickness)),
        #000 calc(100% - var(--thickness))
    );
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - var(--thickness)),
        #000 calc(100% - var(--thickness))
    );
    z-index: 0;
}

#lessonAccordion
    .accordion-item
    .accordion-button.lesson-header
    .circle-progress
    .num {
    position: relative;
    z-index: 1;
    color: #111827;
    font-size: 12px;
    font-weight: 600;
}

#lessonAccordion .accordion-item .accordion-button.lesson-header .lesson-num {
    font-size: 12px;
    font-weight: 400;
    color: #414651;
}

#lessonAccordion .accordion-item .accordion-button.lesson-header .badge-2,
#lessonAccordion .accordion-item .accordion-button.lesson-header .badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 500;
}

#lessonAccordion .accordion-item .accordion-button.lesson-header .badge-2.free,
#lessonAccordion .accordion-item .accordion-button.lesson-header .badge.free {
    background: #e0f2fe;
    color: #0284c7;
}

#lessonAccordion
    .accordion-item
    .accordion-button.lesson-header
    .badge-2.locked,
#lessonAccordion .accordion-item .accordion-button.lesson-header .badge.locked {
    background: #fafafa;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #414651;
}

#lessonAccordion
    .accordion-item
    .accordion-button.lesson-header
    .badge-2.locked
    i,
#lessonAccordion
    .accordion-item
    .accordion-button.lesson-header
    .badge.locked
    i {
    font-size: 12px;
}

#lessonAccordion .accordion-item .accordion-button.lesson-header .badge-2 {
    padding: 2px 8px !important;
    width: fit-content;
    border-radius: 9999px;
    margin-top: 4px;
}

#lessonAccordion .accordion-item .accordion-collapse .list-unstyled {
    margin: 0;
    padding-left: 0;
}

#lessonAccordion .accordion-item .accordion-collapse li {
    position: relative;
    margin-top: 10px;
}

#lessonAccordion
    .accordion-item
    .accordion-collapse
    li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 42px;
    left: 29px;
    width: 2px;
    height: calc(100% - 14px);
    border-left: 1.8px dashed #e5e7eb;
}

#lessonAccordion
    .accordion-item
    .accordion-collapse
    li:has(.topic-row.active)::after {
    border-left-color: #16a34a !important;
}

#lessonAccordion .accordion-item .accordion-collapse .topic-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: #414651;
    transition: color 0.2s;
    position: relative;
    z-index: 3;
    background: unset !important;
    box-shadow: unset !important;
    border: unset !important;
    border-radius: unset !important;
}

#lessonAccordion .accordion-item .accordion-collapse .topic-row:hover {
    color: #d80076;
}

#lessonAccordion .accordion-item .accordion-collapse .topic-row.current {
    color: #0c0c0d;
}

#lessonAccordion .accordion-item .accordion-collapse .topic-row .status-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 1.5px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
}

#lessonAccordion
    .accordion-item
    .accordion-collapse
    .topic-row.active
    .status-icon {
    background: #16a34a;
    color: #fff;
    border: none;
}

#lessonAccordion
    .accordion-item
    .accordion-collapse
    .topic-row.active
    .status-icon
    i {
    font-size: 16px;
}

#lessonAccordion
    .accordion-item
    .accordion-collapse
    .topic-row.current
    .status-icon {
    background: #fef3c7;
    color: #d97706;
    border-color: #f59e0b;
}

#lessonAccordion .accordion-item .accordion-collapse .topic-row .duration {
    margin-left: auto;
    font-size: 13px;
    color: #6b7280;
}

@media (max-width: 450px) {
    #sidebar-course-player {
        position: fixed;
        left: 0;
        right: 0;
        bottom: -209vh;
        top: auto;
        width: 100%;
        height: 80vh;
        border-right: none;
        border-top: 1px solid #eee;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        background: #fff;
        z-index: 999999;
        transition: bottom 0.35s ease;
    }

    /* Visible state */
    #sidebar-course-player.show {
        bottom: 0;
    }

    /* Hide desktop spacing adjustments for mobile */
    #page-content-wrapper {
        margin-left: 0 !important;
    }

    /* Make the toggle button fixed as bottom bar */
    #sidebarToggle {
        background: white;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        z-index: 1100;
    }

    .sidebar {
        position: fixed;
        left: -260px;
        transition: left 0.3s ease;
    }

    .sidebar.show {
        left: 0;
    }

    /* Optional overlay effect */
    body.sidebar-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1039;
    }

    #sidebarClose {
        align-self: flex-end;
    }
}

@media screen and (min-width: 450px) {
    #sidebarClose {
        display: none;
    }
}

@media screen and (min-width: 450px) {
    #sidebar-course-player.collapsed .course-outline-body {
        display: none;
    }
}

@media screen and (max-width: 450px) {
    #lessonContent iframe {
        width: 100% !important;
        height: 340px !important;
    }
}

/* ---------- Status Icons for Lessons & Topics ---------- */
.status-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 1.5px solid var(--border);
    background: #fff;
    flex-shrink: 0;
    color: var(--muted);
    font-weight: 600;
}

.status-icon i {
    font-size: 14px;
}

.status-icon {
    /* Completed (Green) */
}

.status-icon.completed {
    background: var(--success);
    color: #fff;
    border: none;
}

.status-icon {
    /* Current (Orange/Yellow) */
}

.status-icon.current {
    background: #fef3c7;
    color: var(--warning);
    border-color: var(--warning);
}

.status-icon {
    /* Locked (Gray) */
}

.status-icon.locked {
    background: #fafafa;
    color: #9ca3af;
    border-color: #d1d5db;
}

.status-icon {
    /* Progress (shows % text inside) */
}

.status-icon.progress {
    background: #fff;
    border-color: var(--border);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Progress Circle ---------- */
.progress-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid var(--border);
    color: var(--muted);
}

.progress-circle.in-progress {
    border-color: var(--warning);
    color: var(--warning);
    background: #fffbe6;
}

.progress-circle.completed {
    border: none;
    background: var(--success);
    color: #fff;
}

/* ========== globals ========== */
.row-md-only {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: flex-start;
}

.row-md-only > [class*="col-"] {
    flex: 0 0 calc((100% - 32px) / 3);
    max-width: calc((100% - 32px) / 3);
}

@media (max-width: 767.98px) {
    .row-md-only {
        display: flex;
        flex-wrap: nowrap;
        gap: 16px;
        flex-direction: column;
    }

    .row-md-only > [class*="col-"] {
        flex: unset;
        max-width: unset;
        width: 100%;
    }
}

.progress-1 {
    position: relative;
    height: 12px;
    background-color: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    position: absolute;
    top: 40px;
    width: 488px;
    left: 50%;
    right: 50%;
    transform: translate(-50%, 0%);
}

@media screen and (max-width: 450px) {
    .progress-1 {
        width: 100%;
        right: unset;
        left: 0;
        transform: unset;
        top: 0;
    }
}

.white-btn-primary,
.white-btn {
    border-radius: 9999px;
    border: 1px solid #d5d7da;
    background: #fff;
    box-shadow: 0 -4px 0 0 #d5d7da inset;
    color: #414651 !important;
}

.white-btn-primary:hover,
.white-btn:hover {
    color: unset;
}

.white-btn-primary {
    box-shadow: 0px -4px 0px 0px #94bde5 inset !important;
    border: 1px solid #94bde5 !important;
    color: var(--main-color) !important;
}

.progress-bar {
    width: var(--progress, 0%);
    height: 100%;
    background-color: var(--main-color);
    /* blue by default */
    border-radius: inherit;
    transition:
        width 0.4s ease,
        background-color 0.3s ease;
}

@media screen and (max-width: 450px) {
    .hide-mob span:first-child::after {
        content: "";
    }

    .hide-mob span:first-child {
        display: inline !important;
    }

    .hide-mob span:first-child {
        white-space: nowrap;
    }

    .hide-mob span:last-child {
        display: none !important;
    }
}

@media screen and (max-width: 450px) {
    #page-content-wrapper {
        padding-bottom: 40px;
    }
}

@media screen and (min-width: 450px) {
    .mobile {
        display: none;
    }
}

.iti--inline-dropdown {
    width: 100%;
}

.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: rgb(31.217, 80.507, 133.083) !important;
    border-color: rgb(31.217, 80.507, 133.083) !important;
}

.btn-primary:active {
    background-color: rgb(28.31, 73.01, 120.69) !important;
    border-color: rgb(28.31, 73.01, 120.69) !important;
}

.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-outline-primary:active {
    color: #fff !important;
    background-color: rgb(28.31, 73.01, 120.69) !important;
    border-color: rgb(28.31, 73.01, 120.69) !important;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: #a3b3c9 !important;
    border-color: #a3b3c9 !important;
    background-color: transparent !important;
}

.card .bs-card-border-color {
    border-color: #00afc5 !important;
}

.btn-unlock {
    color: #00afc5;
    background: transparent;
    border: none;
    font-weight: 600;
    padding: 0;
}

.img-gray {
    filter: grayscale(100%);
    opacity: 0.9;
}

.mb-24 {
    margin-bottom: 24px;
}

.px-32 {
    padding-left: 32px;
    padding-right: 32px;
}

@media screen and (max-width: 450px) {
    .px-32 {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.p-32 {
    padding: 32px;
}

@media screen and (max-width: 450px) {
    .p-32 {
        padding: 16px;
    }
}

.fs-12 {
    font-size: 12px;
}

.br-8 {
    border-radius: 8px;
}

.g-40 {
    gap: 40px;
}

.mt-48 {
    margin-top: 48px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-24 {
    margin-top: 2px;
}

.mt-100 {
    margin-top: -100px;
}

.mt-60 {
    margin-top: 60px;
}

.gap-24 {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 24px;
}

.mt_75 {
    margin-top: -75px;
}

@media screen and (max-width: 450px) {
    .mt_75 {
        margin-top: -48px;
    }
}

.cover-wrapper img {
    display: block;
}

.mt-44 {
    margin-top: 44px;
}

.mb-20 {
    margin-bottom: 20px;
}

.p-24 {
    padding: 24px;
}

.sec_title h3 {
    color: #0c0c0d;
    font-size: 20px;
    font-weight: 600;
}

.border-2 {
    border: 4.5px solid #fff;
}

/* ========== Sidebar ========== */
#sidebar {
    position: relative;
}

#sidebar .nav {
    max-width: 175px;
}

#sidebar .sidebar-bottom-images {
    height: 100%;
    position: relative;
    z-index: -1;
}

#sidebar .sidebar-bottom-images .img-right {
    right: 0;
    bottom: 0;
}

#sidebar .sidebar-bottom-images .img-left {
    left: 0;
    bottom: 0;
}

#sidebar .status-icon.progress {
    width: 36.25px;
    height: 36.25px;
    background-color: #fff;
    border: 3px solid #e9eaeb;
    position: relative;
    font-size: 8.75px !important;
}

#sidebar .status-icon.progress::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: 3px solid #e9eaeb;
    border-radius: 50%;
}

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background: #fff;
    border-right: 1px solid #eee;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: all 0.3s ease;
}

#sidebar .nav {
    flex-direction: column;
    align-items: flex-start;
    justify-content: start;
    padding: 1rem 0;
}

@media (max-width: 767.98px) {
    #sidebar {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: fit-content !important;
        border-right: none;
        border-top: 1px solid #eee;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        padding: 0 0.75rem;
    }

    #sidebar .sidebar-header,
    #sidebar .mb-3.mt-auto.text-center {
        display: none !important;
    }

    #sidebar .nav {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        max-width: none;
        gap: 0px !important;
    }

    #sidebar .nav .nav-item {
        flex: 1;
        text-align: center;
    }

    #sidebar .nav .nav-item a {
        padding: 0 !important;
    }

    #sidebar .nav .nav-item .nav-link {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #555;
        padding: 13px 12px !important;
    }

    #sidebar .nav .nav-item .nav-link img {
        margin: 0 0 3px 0 !important;
        width: 24px;
    }

    #sidebar .nav .nav-item .nav-link .sidebar-label {
        display: none;
    }

    #sidebar .nav .nav-item .nav-link.active img {
        filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.1));
    }
}

#parent-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    background: #fff;
    border-right: 1px solid #eee;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: all 0.3s ease;
}

#parent-sidebar .sidebar-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

#parent-sidebar .nav {
    flex-direction: column;
    align-items: flex-start;
    justify-content: start;
    padding: 1rem 0;
}

#parent-sidebar .nav .nav-item {
    width: 100%;
}

#parent-sidebar .nav .nav-item .nav-link {
    display: flex;
    align-items: center;
    color: #222;
    font-weight: 500;
    padding: 8px 12px;
    transition: all 0.2s ease;
}

#parent-sidebar .nav .nav-item .nav-link img {
    width: 24px;
    margin-right: 8px;
}

#parent-sidebar .nav .nav-item .nav-link:hover,
#parent-sidebar .nav .nav-item .nav-link.active {
    background-color: #f8f9fa;
    border: 1px solid #f5f5f5;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -2px 0 0 #e3e3e3 inset;
}

#parent-sidebar.collapsed {
    width: 70px;
}

#parent-sidebar.collapsed .sidebar-label {
    display: none;
}

#parent-sidebar.collapsed .sidebar-header {
    flex-direction: column-reverse;
    align-items: center;
    padding: 0.75rem;
}

@media (max-width: 767.98px) {
    #parent-sidebar {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: fit-content !important;
        border-right: none;
        border-top: 1px solid #eee;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        padding: 0 0.75rem;
        padding-top: 16px;
    }

    #parent-sidebar .sidebar-header {
        display: none !important;
    }

    #parent-sidebar .nav {
        flex-direction: row !important;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        max-width: none;
        gap: 16px !important;
        padding: 0;
    }

    #parent-sidebar .nav .nav-item {
        text-align: center;
        width: unset !important;
    }

    #parent-sidebar .nav .nav-item .nav-link {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #555;
        padding: 12px 14px !important;
        background: none;
        width: fit-content;
    }

    #parent-sidebar .nav .nav-item .nav-link img {
        margin: 0 0 3px 0 !important;
        width: 24px;
    }

    #parent-sidebar .nav .nav-item .nav-link .sidebar-label {
        display: none;
    }

    #parent-sidebar .nav .nav-item .nav-link.active {
        border: 1px solid #f5f5f5;
    }
}

/* ========== Home Page ========== */
#home-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    width: 100%;
}

@media screen and (max-width: 450px) {
    #home-page {
        padding-bottom: 50px;
    }
}

#home-page .card-header {
    overflow: hidden;
}

#home-page .card-header .badge-1 {
    background-color: #fdf2fa !important;
    color: #c11574 !important;
    border: 1px solid #fcceee !important;
}

#home-page .rounded-20 {
    border-radius: 20px;
}

#home-page .muted-custom {
    color: #414651;
}

#home-page .title h3 {
    color: #0c0c0d;
    font-size: 30px;
    font-weight: 500;
    line-height: 38px;
}

@media screen and (max-width: 576px) {
    #home-page .title h3,
    #home-page .title p {
        color: white !important;
    }
}

@media screen and (max-width: 576px) {
    #home-page .title.mb-20 {
        display: none;
    }
}

#home-page .sec-title h3 {
    color: #0c0c0d;
    font-size: 30px;
    font-weight: 500;
    line-height: 38px;
}

#home-page .content {
    width: 100%;
    overflow-x: hidden;
}

@media screen and (max-width: 450px) {
    #home-page .content {
        position: relative;
        z-index: 3;
    }
}

#home-page .avatar {
    object-fit: cover;
    width: 80px;
    height: 80px;
}

#home-page .mini-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
}

#home-page .mini-icon.purple {
    background: var(--purple);
}

#home-page .tile {
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #0f172a;
}

#home-page .tile.empty {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid #fff;
}

#home-page .tile.ltr {
    border: 2px solid rgba(15, 23, 42, 0.06);
    background: #fff;
}

#home-page .tile.ltr-green {
    background: #e6f9ee;
    color: #065f46;
    border-color: #b7f0d1;
}

#home-page .tile.ltr-orange {
    background: #fff3e1;
    color: #92400e;
    border-color: #fed7aa;
}

#home-page .tile input {
    width: 100%;
    height: 100%;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 1.1rem;
}

#home-page .tile input:focus {
    outline: none;
    background-color: #fffbe6;
}

#home-page .letters span {
    display: inline-block;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 6px;
    background: #f3f4f6;
    margin-right: 6px;
    font-weight: 600;
}

#home-page .clue-list {
    margin-bottom: 12px;
}

#home-page .clue-card {
    background: #ffffff;
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
}

#home-page .clue-card + .clue-card {
    margin-top: 12px;
}

#home-page .clue-card .title {
    font-weight: 600;
}

#home-page .clue-card .letters {
    margin-top: 6px;
}

#home-page .clue-green {
    background: #eaf9f1;
    border-color: #34d399;
}

#home-page .clue-orange {
    background: #fff3e0;
    border-color: #f59e0b;
}

#home-page .phone-footer {
    background: #fef2f2;
    border-top: 1px solid var(--border);
}

#home-page .dashboard {
    overflow: hidden;
}

#home-page .wave {
    display: inline-block;
    animation: wave 2.4s ease-in-out infinite;
    transform-origin: 70% 70%;
}

#home-page .course .card-img-top {
    height: 140px;
    object-fit: cover;
}

#home-page .journey2 {
    position: relative;
    padding: 28px 8px 36px;
    overflow: hidden;
}

#home-page .journey2 .rail {
    position: absolute;
    left: 12px;
    right: 50px;
    top: 50%;
    height: 22px;
    background: rgba(233, 234, 235, 0.4588235294);
    transform: translateY(-50%);
}

#home-page .journey2 .rail::after {
    content: none;
}

#home-page .journey2 .rail::after {
    content: "";
    content: "";
    position: absolute;
    right: -107px;
    top: -2px;
    /* transform: translateY(-50%); */
    width: 269px;
    height: 270px;
    border: 22px solid rgba(233, 234, 235, 0.4588235294);
    border-left-color: transparent;
    border-top-color: transparent;
    border-radius: 50%;
    transform: rotate(324deg);
}

#home-page .journey2 .steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 0;
}

#home-page .journey2 .steps .j-step {
    position: relative;
    min-height: 180px;
    --c: #94a3b8;
    --ring: rgba(148, 163, 184, 0.25);
}

#home-page .journey2 .steps .j-step .dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 8px var(--ring);
    border: 3px solid #fff;
    z-index: 2;
}

#home-page .journey2 .steps .j-step .info {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    text-align: center;
}

#home-page .journey2 .steps .j-step .title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 18px;
}

#home-page .journey2 .steps .j-step .detail {
    font-size: 12px;
    color: #6b7280;
}

#home-page .journey2 .steps .j-step .detail i {
    margin-right: 6px;
}

#home-page .journey2 .steps .j-step.above .info {
    bottom: calc(50% + 18px);
}

#home-page .journey2 .steps .j-step.below .info {
    top: calc(50% + 18px);
}

#home-page .journey2 .steps .j-step.color-green {
    --c: #10b981;
    --ring: rgba(16, 185, 129, 0.25);
}

#home-page .journey2 .steps .j-step.color-green .info.text-center {
    color: #10b981;
}

#home-page .journey2 .steps .j-step.color-orange {
    --c: #f59e0b;
    --ring: rgba(245, 158, 11, 0.25);
}

#home-page .journey2 .steps .j-step.color-orange .info.text-center {
    color: #f59e0b;
}

#home-page .journey2 .steps .j-step.color-red {
    --c: #ef4444;
    --ring: rgba(239, 68, 68, 0.25);
}

#home-page .journey2 .steps .j-step.color-red .info.text-center {
    color: #ef4444;
}

#home-page .journey2 .steps .j-step.active .dot {
    box-shadow: 0 0 0 11px var(--ring);
}

#home-page .right-rail .week .day {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    color: #6b7280;
    font-weight: 600;
}

#home-page .right-rail .week .day.done {
    background: #fff7ed;
    color: #d97706;
    border-color: #fed7aa;
}

#home-page .right-rail .card-body {
    padding: 24px !important;
}

#home-page .box-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

#home-page .icon-16 {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

#home-page .icon-32 {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

#home-page .user-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 6px 10px;
    color: #111827;
}

#home-page .user-pill .username {
    font-weight: 600;
    color: #111827;
}

#home-page .avatar-24 {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

#home-page .card-footer span {
    font-size: 14px;
    font-weight: 500;
    color: #414651;
}

#home-page .pro-badge {
    background: #ffe4ef;
    color: #d72671;
    border-radius: 9999px;
}

#home-page .diamond-car {
    width: 80px;
    height: 64px;
    object-fit: contain;
}

#home-page .streak-card {
    border-radius: 14px;
}

#home-page .streak-card .card-body {
    position: relative;
    z-index: 99;
}

#home-page .streak-card .card-body::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -30px;
    width: 171px;
    height: 216px;
    background: url(/assets/img/streak-bg.jpg) no-repeat center center;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
    filter: blur(6px);
}

#home-page .streak-card .card-body .card-title {
    font-size: 18px;
    font-weight: 500;
}

#home-page .streak-card .card-body .desc {
    color: #0c0c0d;
    font-size: 16px;
    font-weight: 500;
}

#home-page .streak-week .dot {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: #9ca3af;
    background: #fff;
}

#home-page .streak-week .dot.done {
    background: #fff8e1;
    color: #d97706;
    border-color: #fed7aa;
}

#home-page .streak-week .dot i {
    font-size: 14px;
}

#home-page .daily-card .card-body {
    padding-top: 18px;
    padding-bottom: 20px;
}

#home-page .daily-card .diamond-car {
    width: 130px;
    height: 130px;
}

#home-page .btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

#home-page .btn-primary:hover,
#home-page .btn-primary:focus {
    background-color: #1f5085 !important;
    border-color: #1f5085 !important;
}

#home-page .btn-primary:active {
    background-color: #19426d !important;
    border-color: #19426d !important;
}

#home-page .progress-1 {
    max-width: 141px;
    width: 141px;
    height: 8px;
}

#home-page .progress .progress-bar {
    background-color: var(--primary);
}

#home-page .btn-resume {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-image-slice: 1 !important;
    border-image-source: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    box-shadow: inset 0 -4px 0 0 rgba(10, 13, 18, 0.2) !important;
}

#home-page .btn-resume {
    display: flex;
    align-items: center;
    justify-content: center;
}

#home-page .btn-resume .text-mobile {
    display: none;
}

#home-page .btn-resume i {
    font-size: 1.2rem;
}

@media screen and (max-width: 575.98px) {
    #home-page .btn-resume .text-desktop {
        display: none;
    }

    #home-page .btn-resume .text-mobile {
        display: inline-block;
    }

    #home-page .btn-resume {
        padding: 0.6rem 0.9rem !important;
        border-radius: 50% !important;
        width: 42px;
        height: 42px;
    }
}

#home-page .continue-card {
    overflow: hidden;
}

#home-page .continue-card .card-body {
    position: relative;
    background: url("../svgs/avatar_bg.svg") no-repeat left center;
    background-size: 140px auto;
}

#home-page .continue-card .card-title {
    font-size: 18px !important;
    font-weight: 500;
    color: #0c0c0d;
}

#home-page .courses-slider {
    position: relative;
    margin-bottom: 64px;
}

#home-page .courses-slider .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

#home-page .courses-slider .slider-btn.slider-prev {
    left: -6px;
}

#home-page .courses-slider .slider-btn.slider-next {
    right: -6px;
}

#home-page .courses-slider .courses-track {
    --gap: 16px;
    display: flex;
    gap: var(--gap);
    overflow: hidden;
    scroll-behavior: smooth;
}

#home-page .courses-slider .courses-track .course {
    flex: 0 0 calc(40% - var(--gap) / 2);
}

#home-page .rounded-pill {
    border-radius: 9999px !important;
}

#home-page .progress-8 {
    height: 8px;
}

#home-page .w-35 {
    width: 35% !important;
}

#home-page .w-20 {
    width: 20% !important;
}

#home-page .border-gradient {
    position: relative;
    z-index: 0;
}

#home-page .border-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
        212.5% 2678.06% at 140.74% -27.5%,
        #ffec41 0%,
        #e9078a 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

#home-page .shake {
    animation: shake 500ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

#home-page .unlock-content {
    position: absolute;
    bottom: -50px;
    right: 0;
    z-index: 99;
    width: 100%;
}

#home-page .unlock-content .sec_container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.21);
    backdrop-filter: blur(12px);
    padding-top: 25px;
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgb(0, 0, 0) 10%
    );
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top;
    -webkit-mask-size: 100% 100%;
    border-radius: 4px;
}

#home-page .unlock-content .sec_container .img_container {
    margin-bottom: 11px;
}

#home-page .unlock-content .sec_container .img_container img {
    width: 134.452px;
    height: 139.297px;
}

#home-page .unlock-content .sec_container .title h3 {
    color: #0c0c0d;
    text-align: center;
    font-size: 20px !important;
    font-weight: 500;
    line-height: 30px;
}

#home-page .unlock-content .sec_container .desc p {
    font-size: 12px;
    color: #656469;
}

#home-page .unlock-content .sec_container a {
    color: #00afc5;
    font-size: 14px;
    text-decoration: none;
}

@media (max-width: 1199.98px) {
    #home-page .right-rail {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    #home-page {
        flex-direction: column;
    }

    #home-page .courses-slider .courses-track .course {
        flex-basis: calc(50% - var(--gap) / 2);
    }

    #home-page .journey2 .steps {
        grid-template-columns: repeat(7, minmax(160px, 1fr));
        overflow-x: auto;
        padding-bottom: 8px;
    }

    #home-page .journey2 .steps .j-step .info {
        width: 200px;
    }
}

@media (max-width: 767.98px) {
    #home-page .journey2 .steps {
        grid-template-columns: repeat(7, minmax(160px, 1fr));
        overflow-x: auto;
        padding-bottom: 10px;
    }
}

@media (max-width: 575.98px) {
    #home-page .main-area {
        margin-top: 46px;
    }

    #home-page .text-container {
        padding-top: 16px;
        padding-bottom: 16px !important;
    }

    #home-page .text-container .card-title {
        font-size: 14px !important;
    }

    #home-page .cta-card {
        padding-right: 16px !important;
    }

    #home-page .avatar {
        width: 120px;
        height: 117px;
        border-radius: unset !important;
        object-fit: cover;
    }

    #home-page .phone-mock {
        border-radius: 24px;
    }

    #home-page .course .card-img-top {
        height: 120px;
    }

    #home-page .dashboard .d-flex.align-items-center.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
    }

    #home-page .dashboard .user-pill,
    #home-page .dashboard .badge {
        margin-top: 0.5rem;
    }

    #home-page .continue-card .card-body {
        background-size: 110px auto;
        padding: 0 !important;
    }

    #home-page .continue-card .card-body .d-flex {
        align-items: flex-start;
    }

    #home-page .courses-slider .slider-btn {
        display: none !important;
    }

    #home-page .courses-slider .courses-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    #home-page .courses-slider .courses-track .course {
        flex-basis: 85%;
        scroll-snap-align: start;
    }

    #home-page .journey2 .rail {
        position: absolute;
        left: 24px;
        top: 0;
        bottom: 0;
        width: 4px;
        height: auto;
        transform: none;
    }

    #home-page .journey2 .steps {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    #home-page .journey2 .steps .j-step {
        min-height: auto;
        padding-left: 50px;
    }

    #home-page .journey2 .steps .j-step .dot {
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    #home-page .journey2 .steps .j-step .info {
        position: relative;
        left: auto;
        transform: none;
        width: auto;
        text-align: left;
    }
}

@keyframes wave {
    0%,
    60%,
    100% {
        transform: rotate(0);
    }

    20% {
        transform: rotate(20deg);
    }

    40% {
        transform: rotate(-12deg);
    }
}

/* ========== Store Page ========== */
#store-page {
    margin-right: 0 !important;
    --border: #e9eaeb;
    --bs-gutter-x: 32px;
}

@media screen and (max-width: 992px) {
    #store-page {
        margin: 0 !important;
        padding-bottom: 80px;
    }
}

#store-page .store-row {
    --bs-gutter-x: 32px;
    --bs-gutter-y: 24px;
    position: relative;
    z-index: 3;
}

@media screen and (max-width: 450px) {
    #store-page .store-row .info {
        color: white;
    }
}

#store-page .store-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 100%;
}

#store-page .container_custom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

#store-page .bg_light {
    background-color: #eaf9ff !important;
    padding: 20px 24px;
    font-size: 20px;
}

#store-page .bg_light small {
    font-size: 14px;
    font-weight: 500;
}

#store-page .bg_light img {
    object-fit: cover;
}

#store-page h6 {
    font-size: 20px !important;
}

#store-page .view {
    color: #204f84 !important;
    font-size: 14px;
}

#store-page .store-item {
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    width: 160px;
    height: 180px;
}

#store-page .store-item:hover {
    transform: scale(1.05);
}

#store-page .store-item .card-title {
    color: #414651;
    font-size: 14px;
    font-weight: 600;
}

#store-page .store-item .card-title span {
    color: #204f84;
    font-size: 14px;
}

#store-page .store-item .desc {
    max-width: 112px;
}

#store-page .store-item .desc p {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: #717680;
}

#store-page .img_container img {
    max-width: 100px;
    height: auto;
}

#store-page .btn-upgrade {
    color: #d80076;
    background: transparent;
    border: none;
    font-weight: 600;
    padding: 6px 12px;
}

#store-page .btn-upgrade:hover {
    color: #a10055;
    background: rgba(216, 0, 118, 0.1);
}

#store-page .streak-card {
    border-radius: 14px;
}

#store-page .streak-card .card-body {
    position: relative;
    z-index: 99;
}

#store-page .streak-card .card-body::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -30px;
    width: 171px;
    height: 216px;
    background: url(/assets/img/streak-bg.jpg) no-repeat center center;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
    filter: blur(6px);
}

#store-page .streak-card .card-body .card-title {
    font-size: 18px;
    font-weight: 500;
}

#store-page .streak-card .card-body .desc {
    color: #0c0c0d;
    font-size: 16px;
    font-weight: 500;
}

#store-page .link {
    text-decoration: none;
    color: #204f84;
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
}

#store-page h6 {
    color: #0c0c0d;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 24px;
}

#store-page .imgs_container {
    position: relative;
}

#store-page .imgs_container .lock_container {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: flex;
    width: 28px;
    height: 28px;
    transform: translateX(-50%);
    border-radius: 50%;
    background-color: #fafafa;
    border: 1px solid #e9eaeb;
}

#store-page .imgs_container .lock_container img {
    margin: auto;
}

.bg-shape {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
}

@media (max-width: 576px) {
    .store-mobile-header {
        color: #fff;
    }

    .store-mobile-header .store-mobile-logo {
        width: 165px;
        height: 34.1831512451px;
    }

    .store-mobile-header .wallet-badge {
        border-radius: 12px;
        padding: 6px 8px;
    }

    .store-mobile-header {
        position: relative;
        z-index: 0;
    }

    .store-mobile-header .bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 282px;
    }

    .store-mobile-header .bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #store-page .container_custom {
        flex-direction: column;
        gap: 16px;
    }

    #store-page .container_custom > :nth-child(2) {
        display: none;
    }

    #store-page h3.mb-3 {
        margin-top: 6px;
    }

    #store-page .bg_light {
        background: linear-gradient(
            180deg,
            #eaf9ff 0%,
            #f3faff 100%
        ) !important;
        border-radius: 16px;
        padding: 16px 18px;
    }

    #store-page .store-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #store-page .store-item {
        width: 100%;
        height: 170px;
    }

    .store-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        border-top: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 10px 8px calc(env(safe-area-inset-bottom) + 10px);
        z-index: 1050;
    }

    .store-bottom-nav .nav-item {
        display: inline-flex;
        width: 48px;
        height: 36px;
        align-items: center;
        justify-content: center;
        color: #a4a7ae;
        text-decoration: none;
        border-radius: 12px;
    }

    .store-bottom-nav .nav-item.active {
        background: #f3f4f6;
        color: var(--main-color);
    }
}

/* ========== Profile Page ========== */
#profile-page {
    margin-right: 0 !important;
    --border: #e9eaeb;
    --bs-gutter-x: 32px;
}

@media screen and (min-width: 450px) {
    #profile-page .mobile-container {
        display: none;
    }
}

@media screen and (max-width: 450px) {
    #profile-page {
        margin: 0 !important;
        margin-top: 60px !important;
    }

    #profile-page .profile-header {
        display: none;
    }

    #profile-page .cover-wrapper {
        margin-top: 40px;
    }

    #profile-page .cover-wrapper .cover-img {
        display: none;
    }

    #profile-page .profile-name-spacer * {
        color: white !important;
    }
}

#profile-page .store-row {
    --bs-gutter-x: 32px;
    --bs-gutter-y: 24px;
}

#profile-page .store-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

#profile-page .container_custom {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
}

#profile-page .bg_light {
    background-color: #eaf9ff !important;
    padding: 20px 24px;
    font-size: 20px;
}

#profile-page .bg_light small {
    font-size: 14px;
    font-weight: 500;
}

#profile-page .bg_light img {
    object-fit: cover;
}

#profile-page h6 {
    font-size: 20px !important;
}

#profile-page .view {
    color: #204f84 !important;
    font-size: 14px;
}

#profile-page .store-item {
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    width: 160px;
    height: 180px;
}

#profile-page .store-item:hover {
    transform: scale(1.05);
}

#profile-page .store-item .card-title {
    color: #414651;
    font-size: 14px;
    font-weight: 600;
}

#profile-page .store-item .card-title span {
    color: #204f84;
    font-size: 14px;
}

#profile-page .store-item .desc {
    max-width: 112px;
}

#profile-page .store-item .desc p {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    color: #717680;
}

#profile-page .bg-shape {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
}

#profile-page .img_container img {
    max-width: 100px;
    height: auto;
}

#profile-page .btn-upgrade {
    color: #d80076;
    background: transparent;
    border: none;
    font-weight: 600;
    padding: 6px 12px;
}

#profile-page .btn-upgrade:hover {
    color: #a10055;
    background: rgba(216, 0, 118, 0.1);
}

#profile-page .streak-card {
    border-radius: 14px;
}

#profile-page .streak-card .card-body {
    position: relative;
    z-index: 99;
}

#profile-page .streak-card .card-body::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -30px;
    width: 171px;
    height: 216px;
    background: url(/assets/img/streak-bg.jpg) no-repeat center center;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
    filter: blur(6px);
}

#profile-page .streak-card .card-body .card-title {
    font-size: 18px;
    font-weight: 500;
}

#profile-page .streak-card .card-body .desc {
    color: #0c0c0d;
    font-size: 16px;
    font-weight: 500;
}

#profile-page .link {
    text-decoration: none;
    color: #204f84;
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
}

#profile-page h6 {
    color: #0c0c0d;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 24px;
}

#profile-page {
    /* Avatar Modal */
}

#profile-page #avatarModal .avatar-box {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.2s ease;
    padding: 8px;
    cursor: pointer;
}

#profile-page #avatarModal .avatar-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

#profile-page #avatarModal .avatar-box:hover {
    transform: scale(1.05);
}

#profile-page #avatarModal .avatar-box.selected {
    background: #f5f5f5;
}

#profile-page #avatarModal .upload-box img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain;
    opacity: 0.7;
}

#profile-page {
    /* Transparent blur background */
}

#profile-page .modal-backdrop.show {
    backdrop-filter: blur(6px);
    background-color: rgba(0, 0, 0, 0.4);
}

#profile-page .profile-avatar-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#profile-page .profile-avatar-wrap .profile-avatar {
    position: relative;
    z-index: 1;
}

#profile-page .profile-avatar-wrap .profile-frame-overlay {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 185px;
    height: 130px;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
}

#profile-page .profile-avatar-wrap .badge-pro {
    position: absolute;
    bottom: -21px;
    background: #fdf2fa;
    color: #c11574;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    padding: 8px;
    z-index: 3;
    border-color: #fcceee;
}

#profile-page .profile-mobile-card {
    display: none;
}

@media screen and (max-width: 575.98px) {
    #profile-page .profile-mobile-card {
        display: flex !important;
        background: #fff;
        border: 1px solid #e9eaeb;
        border-radius: 12px;
        padding: 10px 12px;
    }

    #profile-page .profile-mobile-card .profile-avatar {
        border-radius: 50%;
        object-fit: cover;
        width: 48px;
        height: 48px;
    }

    #profile-page .profile-mobile-card .profile-frame-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 48px;
        height: 48px;
        pointer-events: none;
    }

    #profile-page .profile-mobile-card .fw-semibold {
        color: #0c0c0d;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 2px;
    }

    #profile-page .profile-mobile-card .text-muted {
        font-size: 12px;
    }

    #profile-page .profile-mobile-card .badge {
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 50%;
    }

    #profile-page .profile-mobile-card button.btn {
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        padding: 0;
    }
}

#statistics_sec .section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 1rem;
}

#statistics_sec .stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media screen and (max-width: 575.98px) {
    #statistics_sec .stats-grid {
        flex-direction: row;
    }
}

#statistics_sec .stat-card {
    flex: 1 1 calc(33.333% - 12px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    border: 1px solid #e9eaeb;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    gap: 10px;
    transition: transform 0.2s ease-in-out;
}

#statistics_sec .stat-card:hover {
    transform: translateY(-2px);
}

#statistics_sec .stat-card img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

#statistics_sec .stat-card .stat-info .value {
    font-weight: 600;
    font-size: 16px;
    color: #0c0c0d;
}

#statistics_sec .stat-card .stat-info .label {
    font-size: 13px;
    color: #717680;
}

@media screen and (max-width: 575.98px) {
    #statistics_sec .stat-card {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        padding: 16px;
        gap: 6px;
    }

    #statistics_sec .stat-card img {
        margin-bottom: 4px;
    }
}

/* ========== Achievements Page ========== */
@media screen and (max-width: 450px) {
    #quiz-player-content {
        margin: 0 16px !important;
    }
}

@media screen and (max-width: 450px) {
    .padding-container {
        padding-bottom: 40px;
    }
}

@media screen and (max-width: 450px) {
    #achievements-page {
        margin: 0 !important;
    }

    #achievements-page .padding-container {
        padding-bottom: 80px;
    }

    #achievements-page h3,
    #achievements-page p {
        color: #fff !important;
    }

    #achievements-page .position-mobile {
        position: relative;
    }
}

#achievements-page .badge-card {
    display: flex;
    width: 132px;
    height: 180px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #e9eaeb;
    background: #fff;
    box-shadow:
        0 4px 8px -2px rgba(26, 24, 22, 0.1),
        0 2px 4px -2px rgba(26, 24, 22, 0.06);
    transition: transform 0.3s ease-in-out;
}

#achievements-page .badge-card:hover {
    box-shadow: var(--bs-box-shadow-sm) !important;
    transform: scale(1.05);
}

#achievements-page .badge-card img {
    display: block;
    margin: 0 auto;
}

#achievements-page .badge-card.is-completed img {
    filter: none !important;
}

#achievements-page .badge-card:not(.is-completed) img {
    filter: grayscale(100%);
}

#achievements-page .badge-card .question-icon {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 14px;
    line-height: 1;
    padding: 4px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    z-index: 2;
}

#achievements-page .badge-card:hover .question-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#achievements-page .streak-card {
    border-radius: 14px;
}

#achievements-page .streak-card .card-body {
    position: relative;
    z-index: 99;
}

#achievements-page .streak-card .card-body::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -30px;
    width: 171px;
    height: 216px;
    background: url(/assets/img/streak-bg.jpg) no-repeat center center;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
    filter: blur(6px);
}

#achievements-page .streak-week .dot {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: #9ca3af;
    background: #fff;
}

#achievements-page .streak-week .dot img {
    filter: grayscale(100%);
}

#achievements-page .streak-week .dot.done {
    background: #fff7ed;
    color: #d97706;
    border-color: #fed7aa;
}

#achievements-page .streak-week .dot.done img {
    filter: none;
}

#achievements-page .streak-week .dot i {
    font-size: 14px;
}

#achievements-page {
    /* Badge Details Modal */
}

#achievements-page #badgeDetailsModal .modal-content {
    border-radius: 16px;
    padding: 24px;
}

#achievements-page #badgeDetailsModal h6 {
    font-size: 1rem;
    font-weight: 600;
}

#achievements-page #badgeDetailsModal p {
    font-size: 0.875rem;
}

#achievements-page #badgeDetailsModal button.btn-primary {
    background: #2662a2;
    border-color: #2662a2;
    border-radius: 8px;
}

#achievements-page .badges-swiper {
    overflow: hidden;
    padding-right: 1px;
}

#achievements-page .badges-swiper .swiper-wrapper {
    max-width: 100% !important;
    display: flex;
}

#achievements-page .badges-swiper .swiper-slide {
    width: auto !important;
}

@media screen and (max-width: 450px) {
    #achievements-page #certificates .card-img-main {
        width: 138px;
        height: 103px;
    }

    #achievements-page #certificates .card-img-top {
        height: 88px;
        object-fit: cover;
    }
}

@media screen and (max-width: 450px) {
    #parent-profiles-page {
        position: relative;
    }
}

#parent-profiles-page .badges-swiper .swiper-wrapper {
    display: flex;
    flex-direction: row;
}

#parent-profiles-page .badges-swiper {
    overflow: hidden;
    padding-right: 1px;
}

#parent-profiles-page .badges-swiper .swiper-wrapper {
    max-width: 100% !important;
}

#parent-profiles-page .badges-swiper .swiper-slide {
    width: auto !important;
}

#parent-profiles-page .badges-swiper .badge-card {
    display: flex;
    width: 132px;
    height: 180px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #e9eaeb;
    background: #fff;
    box-shadow:
        0 4px 8px -2px rgba(26, 24, 22, 0.1),
        0 2px 4px -2px rgba(26, 24, 22, 0.06);
    transition: transform 0.3s ease-in-out;
}

#parent-profiles-page .badges-swiper .badge-card:hover {
    box-shadow: var(--bs-box-shadow-sm) !important;
    transform: scale(1.05);
}

#parent-profiles-page .badges-swiper .badge-card img {
    display: block;
    margin: 0 auto;
}

#parent-profiles-page .badges-swiper .badge-card.is-completed img {
    filter: none !important;
}

#parent-profiles-page .badges-swiper .badge-card:not(.is-completed) img {
    filter: grayscale(100%);
}

#parent-profiles-page .badges-swiper .badge-card .question-icon {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 14px;
    line-height: 1;
    padding: 4px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    z-index: 2;
}

#parent-profiles-page .badges-swiper .badge-card:hover .question-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#roadmap-static {
    margin-top: 24px;
}

#roadmap-static .roadmap-header .learning-nav-surface {
    background-color: #f2f4f7 !important;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid #e4e7ec;
    display: inline-flex;
    gap: 4px;
}

#roadmap-static .roadmap-header .learning-nav-surface .tab-btn {
    color: #667085;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 8px 16px;
    border-radius: 10px;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
}

@media screen and (max-width: 450px) {
    #roadmap-static .roadmap-header .learning-nav-surface .tab-btn {
        flex: 1;
        text-align: center;
    }
}

#roadmap-static .roadmap-header .learning-nav-surface .tab-btn.active {
    background: #ffffff;
    color: #1d2939;
    box-shadow:
        0px 1px 3px rgba(16, 24, 40, 0.1),
        0px 1px 2px rgba(16, 24, 40, 0.06);
}

#roadmap-static
    .roadmap-header
    .learning-nav-surface
    .tab-btn:hover:not(.active) {
    color: #344054;
    background: rgba(255, 255, 255, 0.5);
}

#roadmap-static .roadmap-list {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Increased for better spacing as per Figma */
}

@media screen and (max-width: 450px) {
    #roadmap-static .roadmap-list {
        gap: 60px;
    }
}

#roadmap-static .roadmap-list .roadmap-item {
    display: flex;
    align-items: center; /* Center icon with card height */
    position: relative;
}

@media screen and (max-width: 450px) {
    #roadmap-static .roadmap-list .roadmap-item {
        align-items: flex-start !important;
    }
}

/* Roadmap Icons Styling */
#roadmap-static .roadmap-list .roadmap-item .roadmap-step-icon-container {
    position: relative;
    margin-right: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 7;
    width: 60px;
    min-height: 100%; /* Ensure container fills height for line */
}

#roadmap-static .roadmap-list .roadmap-item .roadmap-step-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

#roadmap-static .roadmap-list .roadmap-item .roadmap-step-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#roadmap-static .roadmap-list .roadmap-item .roadmap-step-icon-line {
    position: absolute;
    top: 100%; /* Start from center of icon */
    left: 50%;
    width: 2px;
    height: calc(100% + 80px); /* Vertical gap + card height */
    background-color: #eaecf0;
    transform: translateX(-50%);
    z-index: 1;
}

/* Specific line height to reach next icon center */
@media screen and (max-width: 450px) {
    #roadmap-static .roadmap-list .roadmap-item .roadmap-step-icon-line {
        height: calc(100% + 60px);
    }
}

#roadmap-static .roadmap-list .roadmap-item:last-child .roadmap-step-icon-line {
    display: none;
}

#roadmap-static .roadmap-list .roadmap-item .course-card {
    background: transparent;
}

#roadmap-static .roadmap-list .roadmap-item .course-card .course-thumb {
    width: 228px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

@media screen and (max-width: 450px) {
    #roadmap-static .roadmap-list .roadmap-item .course-card .course-thumb {
        display: none;
    }
}

#roadmap-static .roadmap-list .roadmap-item .course-card .course-info {
    width: 60%;
}

#roadmap-static .roadmap-list .roadmap-item .course-card .course-info p {
    font-size: 0.875rem;
    color: #667085 !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

#roadmap-static .roadmap-list .roadmap-item .course-card .course-info p i {
    font-size: 16px;
    color: #98a2b3;
}

#roadmap-static .roadmap-list .roadmap-item .course-card .course-info p {
    font-size: 0.8125rem;
    color: #667085 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

#roadmap-static .roadmap-list .roadmap-item .course-card .course-info p i {
    font-size: 14px;
    color: #98a2b3;
}

/* Header & Filter Styles from Figma */
#all-courses-view .search-input-wrapper .input-group {
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

#all-courses-view .search-input-wrapper input {
    font-size: 0.9375rem;
    border: 1px solid #d0d5dd;
    padding: 10px 14px;
}

#all-courses-view .filter-section-text {
    font-weight: 500;
    color: #475467;
    font-size: 0.875rem;
}

#all-courses-view .course-filter-btn {
    background: #ffffff;
    /* border: 1px solid #D0D5DD; */
    border: none;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 0.875rem;
    color: #344054;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

#all-courses-view .course-filter-btn:hover {
    background: #f9fafb;
}

#all-courses-view .course-filter-btn.active {
    /* border: 1px solid #0086C9; */
}

#all-courses-view .filter-count-badge {
    background: #f0f9ff;
    border: 1px solid #b9e6fe;
    color: #026aa2;
    font-size: 12px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

#all-courses-view .filter-dropdown-menu {
    padding: 8px;
    border: 1px solid #f2f4f7;
    box-shadow:
        0px 12px 16px -4px rgba(16, 24, 40, 0.08),
        0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border-radius: 12px;
    min-width: 240px;
}

#all-courses-view .dropdown-item {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #344054;
    display: flex;
    align-items: center;
    gap: 12px;
}

#all-courses-view .dropdown-item:hover {
    background-color: #f9fafb;
}

#all-courses-view .dropdown-item.active,
#all-courses-view .dropdown-item:active {
    background-color: #eff8ff;
    color: #175cd3;
}

#all-courses-view .dropdown-item.active .status-dot,
#all-courses-view .dropdown-item:active .status-dot {
    box-shadow: 0 0 0 3px rgba(23, 92, 211, 0.12);
}

#all-courses-view .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Course Box Redesign */
#all-courses-view .course-box {
    background: #ffffff;
    border: 1px solid #f2f4f7;
    box-shadow:
        0px 4px 8px -2px rgba(16, 24, 40, 0.06),
        0px 2px 4px -2px rgba(16, 24, 40, 0.04);
    border-radius: 12px;
    padding: 0;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#all-courses-view .course-box:hover {
    transform: translateY(-4px);
    box-shadow:
        0px 20px 24px -4px rgba(16, 24, 40, 0.08),
        0px 8px 8px -4px rgba(16, 24, 40, 0.03);
}

#all-courses-view .course-box .card-img-top {
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #f2f4f7;
}

#all-courses-view .course-box .badge-status {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.75rem;
    padding: 6px 14px;
    border-radius: 9999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    z-index: 10;
}

#all-courses-view .course-box .badge-status.badge-inprogress {
    background: #fffaeb;
    color: #b54708;
    border: 1px solid #fedf89;
}

#all-courses-view .course-box .badge-status.badge-completed {
    background: #ecfdf3;
    color: #067647;
    border: 1px solid #abefc6;
}

#all-courses-view .course-box .badge-status i {
    font-size: 14px;
}

#all-courses-view .course-box .progress-wrapper-card {
    position: relative;
    margin-bottom: 8px;
}

#all-courses-view .course-box .progress-avatar-indicator {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.08);
    object-fit: cover;
    background: #f2f4f7;
    z-index: 5;
}

#all-courses-view .course-box .progress-track {
    background-color: #e9eaeb;
    height: 6px;
    border-radius: 10px;
}

#roadmap-static
    .roadmap-list
    .roadmap-item
    .course-card
    .course-info
    .progress-track
    .progress-bar {
    border-radius: 10px;
    transition: width 0.3s ease;
}

#roadmap-static
    .roadmap-list
    .roadmap-item
    .course-card
    .course-info
    .progress-track
    .progress-bar.progress-green {
    background-color: #17b26a !important;
}

#roadmap-static
    .roadmap-list
    .roadmap-item
    .course-card
    .course-info
    .progress-track
    .progress-bar.progress-blue {
    background-color: #0086c9 !important;
}

#roadmap-static
    .roadmap-list
    .roadmap-item
    .course-card
    .course-info
    .progress-track
    .progress-bar.progress-gray {
    background-color: #d0d5dd !important;
}

#roadmap-static .roadmap-list .roadmap-item .course-card .course-action {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#roadmap-static
    .roadmap-list
    .roadmap-item
    .course-card
    .course-action
    .review-btn {
    border-radius: 9999px;
    border: 1px solid #d5d7da;
    background: #fff;
    box-shadow: 0 -4px 0 0 #d5d7da inset;
    color: #414651 !important;
}

#roadmap-static
    .roadmap-list
    .roadmap-item
    .course-card
    .course-action
    .review-btn:hover {
    color: unset;
}

#roadmap-static
    .roadmap-list
    .roadmap-item
    .course-card
    .course-action
    .continue {
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: #2662a2;
    box-shadow: 0 -4px 0 0 rgba(10, 13, 18, 0.2) inset;
}

#roadmap-static .roadmap-list .roadmap-item .course-card .badge-status {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#roadmap-static
    .roadmap-list
    .roadmap-item
    .course-card
    .badge-status.completed {
    color: #067647;
    border: 1px solid #b9e6fe;
    background-color: #f0f9ff;
}

#roadmap-static
    .roadmap-list
    .roadmap-item
    .course-card
    .badge-status.in-progress {
    background-color: #e0f2f7; /* Light blue for Start Learning */
    border: 1px solid #bee7f0;
    color: #026aa2;
}

#roadmap-static
    .roadmap-list
    .roadmap-item
    .course-card
    .badge-status.not-started {
    border: 1px solid #e9eaeb;
    background-color: #fafafa;
    color: #667085;
}

/* All Courses view specific adjustments */
#all-courses-view .course-box .progress-track {
    height: 8px;
    background-color: #f2f4f7;
}

#all-courses-view .course-box .progress-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475467;
}

#all-courses-view .course-card-footer {
    padding: 2px 20px 24px;
    display: flex;
    gap: 12px;
    align-items: center;
}

#all-courses-view .btn-primary-card {
    background: #2e6db1;
    border: 1px solid #2e6db1;
    box-shadow:
        0px 1px 2px rgba(16, 24, 40, 0.05),
        0px -4px 0px 0px rgba(10, 13, 18, 0.1) inset;
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: #ffffff;
    flex: 1;
    text-align: center;
}

#all-courses-view .btn-white-card {
    background: #ffffff;
    border: 1px solid #d5d7da;
    box-shadow: inset 0 -4px 0 0 #d5d7da;
    border-radius: 50px;
    padding: 12px 18px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: #344054;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    text-decoration: none;
}

#all-courses-view .btn-white-card:hover {
    background-color: #f9fafb;
    color: #1d2939;
}

#all-courses-view .card-link-text {
    font-weight: 600;
    font-size: 0.875rem;
    color: #475467;
    text-decoration: none;
    flex: 1;
}

#all-courses-view .card-link-text:hover {
    color: #1d2939;
}

#all-courses-view .course-box .card-body {
    padding: 20px;
}

#roadmap-static .all-courses-grid .course-box {
    border-radius: 10px;
    overflow: hidden;
}

#roadmap-static .all-courses-grid .course-box .card-img-top {
    height: 150px;
    object-fit: cover;
}

#roadmap-static .all-courses-grid .course-box .badge-status {
    font-size: 0.75rem;
    padding: 2px 7px;
    border-radius: 30px;
}

#roadmap-static .all-courses-grid .course-box .badge-status.completed {
    background-color: #e8f5e9;
    color: #2e7d32;
}

#roadmap-static .all-courses-grid .course-box .badge-status.in-progress {
    background-color: #e3f2fd;
    color: #1565c0;
}

#roadmap-static .all-courses-grid .course-box .badge-status.not-started {
    background-color: #f3e5f5;
    color: #6a1b9a;
}

#roadmap-static .all-courses-grid .course-box .progress-track {
    background-color: #e9eaeb;
    height: 6px;
    border-radius: 10px;
}

#roadmap-static .all-courses-grid .course-box .progress-track .progress-bar {
    border-radius: 10px;
    transition: width 0.3s ease;
}

#roadmap-static
    .all-courses-grid
    .course-box
    .progress-track
    .progress-bar.progress-green {
    background-color: #12b76a !important;
}

#roadmap-static
    .all-courses-grid
    .course-box
    .progress-track
    .progress-bar.progress-blue {
    background-color: #2662a2 !important;
}

#roadmap-static
    .all-courses-grid
    .course-box
    .progress-track
    .progress-bar.progress-gray {
    background-color: #a4a7ae !important;
}

@media screen and (max-width: 450px) {
    #parent-settings .text_container {
        text-align: center;
    }
}

#parent-settings .nav-tabs {
    border-bottom: 1px solid #e9ecef;
}

#parent-settings .nav-tabs .nav-link {
    border-color: none !important;
    color: #6c757d;
    font-weight: 500;
    border-radius: 0 !important;
}

#parent-settings .nav-tabs .nav-link.active {
    box-shadow: unset;
    background: unset !important;
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    color: #204f84;
    border-bottom: 1px solid #204f84 !important;
    background-color: transparent;
}

#parent-settings .avatar-list .avatar-item {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
}

#parent-settings .avatar-list .avatar-item.active {
    border-color: #204f84;
}

#parent-settings .avatar-list .avatar-item.upload {
    background-color: #f1f3f5;
    border: 1px dashed #ced4da;
}

#parent-settings .avatar-list .avatar-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#parent-settings .form-control,
#parent-settings .form-select {
    border-radius: 8px;
}

#parent-settings .form-control:focus,
#parent-settings .form-select:focus {
    box-shadow: none;
    border-color: #204f84;
}

#parent-settings .form-control.number {
    border-radius: 0px 8px 8px 0px;
    border-left: none;
}

#parent-settings .card {
    border-radius: 12px;
}

@media screen and (max-width: 450px) {
    #parent-settings .card {
        border: unset !important;
        box-shadow: unset !important;
    }

    #parent-settings .card .card-body {
        padding: 0 !important;
    }

    #parent-settings .card .iti {
        width: 100% !important;
    }
}

#parent-settings .input-group-text {
    border-radius: 8px 0 0 8px;
    border-right: 0;
}

#parent-settings .btn-link {
    font-weight: 500;
    color: #204f84;
}

#parent-settings .btn-link:hover {
    text-decoration: underline;
}

#parent-settings .pin-btn {
    color: #204f84;
}

#parent-settings .password-field {
    position: relative;
}

#parent-settings .password-field .form-control {
    border-radius: 0 8px 8px 0;
    border-left: none;
    padding: 10px 12px;
}

#parent-settings .password-field .form-control:focus {
    box-shadow: none;
    border-color: #204f84;
}

#parent-settings .password-field .input-group-text {
    border-radius: 8px 0 0 8px;
    background-color: #fff;
    border-right: 0;
}

#parent-settings .password-field .input-group-text i {
    color: #6b7280;
    font-size: 16px;
}

#parent-settings .password-field .toggle-password {
    border: 1px solid #dee2e6;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: #fff;
    color: #6b7280;
}

#parent-settings .password-field .toggle-password:hover {
    color: #204f84;
}

#parent-settings .password-field .toggle-password i {
    font-size: 16px;
}

#parent-settings .btn-primary {
    background-color: #204f84;
    border: none;
}

#parent-settings .btn-primary:hover {
    background-color: rgb(27.0243902439, 66.7164634146, 111.4756097561);
}

#parent-settings hr {
    opacity: 0.1;
}

#parent-settings button.btn-outline-secondary {
    border-radius: 8px;
    border: 1px solid #d5d7da;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(10, 13, 18, 0.18) inset,
        0 -2px 0 0 rgba(10, 13, 18, 0.05) inset,
        0 1px 2px 0 rgba(10, 13, 18, 0.05);
    color: #414651;
    font-size: 14px;
    font-weight: 500;
}

#parent-settings button.btn-outline-secondary:hover {
    color: unset !important;
}

@media screen and (max-width: 450px) {
    #parent-settings .custom-btn {
        width: 100%;
    }
}

#parent-settings .input-focus-group {
    display: flex;
    align-items: stretch;
    transition: border-color 0.2s ease;
}

#parent-settings .input-focus-group .input-group-text,
#parent-settings .input-focus-group .form-control {
    transition: border-color 0.2s ease;
}

#parent-settings .input-focus-group:focus-within .input-group-text,
#parent-settings .input-focus-group:focus-within .form-control {
    border-color: var(--main-color) !important;
    box-shadow: none !important;
}

#parent-settings .input-focus-group:focus-within .input-group-text i {
    color: var(--main-color);
}

#parent-settings .input-group-text {
    border-radius: 8px 0 0 8px;
    border-right: 0;
    background-color: #fff;
}

#parent-settings .input-group-text i {
    color: #6b7280;
    transition: color 0.2s ease;
}

#parent-settings .form-control.number {
    border-radius: 0 8px 8px 0;
    border-left: none;
}

#badgesModal .badge-card {
    border-radius: 12px;
    border: 1px solid #e9eaeb;
    transition: transform 0.2s ease;
    cursor: pointer;
    position: relative;
}

#badgesModal .badge-card:hover {
    transform: translateY(-4px);
}

#badgesModal .badge-card.is-completed img {
    filter: none;
}

#badgesModal .badge-card:not(.is-completed) img {
    filter: grayscale(100%);
}

.chatbot-wrapper {
    width: 328px;
}

#aiChatBot {
    width: 544px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.05);
    background: #fff;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0;
    height: 100vh;
    z-index: 2000;
}

@media screen and (max-width: 450px) {
    #aiChatBot {
        width: 100%;
        height: 100vh;
        min-height: 100vh;
    }

    @supports (height: 100dvh) {
        #aiChatBot {
            height: 100dvh;
            min-height: 100dvh;
        }
    }

    @supports (-webkit-touch-callout: none) {
        #aiChatBot {
            height: -webkit-fill-available;
            min-height: -webkit-fill-available;
        }
    }
}

#aiChatBot.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none !important;
}

#aiChatBot {
    /*  Always show header in active-main */
}

#aiChatBot .chatbot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 8px 16px;
    z-index: 10;
    flex-shrink: 0;
    border: 1px solid #e9eaeb;
    background:
        linear-gradient(0deg, #fff 6.67%, rgba(255, 255, 255, 0) 58.28%),
        linear-gradient(180deg, #fff 7.34%, rgba(255, 255, 255, 0) 28.18%),
        url(<path-to-image>) lightgray -330.155px 135.489px/301.314% 68.616%
            no-repeat,
        #fff;
    border-right: unset;
    border-left: unset;
}

#aiChatBot .chatbot-header img {
    flex-shrink: 0;
}

#aiChatBot .chatbot-header .text-start {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

#aiChatBot .chatbot-header .text-start h6 {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

#aiChatBot .chatbot-header .text-start small {
    font-size: 12px;
    color: #6c757d;
}

#aiChatBot .chatbot-header button {
    color: #6c757d;
}

#aiChatBot .chatbot-header button i {
    font-size: 16px;
}

#aiChatBot .chatbot-header button:hover {
    opacity: 0.7;
}

#aiChatBot.active-main .chatbot-header {
    display: flex !important;
    opacity: 1 !important;
}

#aiChatBot.active-main .chatbot-main,
#aiChatBot.active-main .chatbot-footer {
    display: flex !important;
    flex-direction: column;
    opacity: 1;
    z-index: 3;
}

#aiChatBot {
    /* all screens */
}

#aiChatBot .chatbot-screen {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    position: absolute;
    inset: 0;
    padding: 24px;
    justify-content: center;
}

#aiChatBot {
    /* Default State - Intro */
}

#aiChatBot.active-intro .chatbot-intro {
    display: flex;
    opacity: 1;
    z-index: 3;
}

#aiChatBot {
    /* Chat State */
}

#aiChatBot.active-main .chatbot-main,
#aiChatBot.active-main .chatbot-footer {
    display: flex !important;
    flex-direction: column;
    opacity: 1;
    z-index: 3;
}

#aiChatBot {
    /* Listening State */
}

#aiChatBot.active-listening .chatbot-listening {
    display: flex;
    opacity: 1;
    z-index: 3;
}

#aiChatBot.active-listening .chatbot-listening .listening-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid #d5d7da;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(10, 13, 18, 0.18) inset,
        0 -2px 0 0 rgba(10, 13, 18, 0.05) inset,
        0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

#aiChatBot.active-intro .chatbot-header,
#aiChatBot.active-listening .chatbot-header {
    display: none !important;
}

#aiChatBot {
    /* INTRO SCREEN */
}

#aiChatBot .chatbot-intro {
    position: relative;
    background:
        linear-gradient(0deg, #fff 6.67%, rgba(255, 255, 255, 0) 58.28%),
        linear-gradient(180deg, #fff 7.34%, rgba(255, 255, 255, 0) 28.18%), #fff;
    overflow: hidden;
    /* gradient image overlay */
}

#aiChatBot .chatbot-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/assets/imgs/chat-bot-bg.jpg") center center/cover
        no-repeat;
    opacity: 0.4;
    z-index: 0;
}

#aiChatBot .chatbot-intro {
    /* stack content above background */
}

#aiChatBot .chatbot-intro > * {
    position: relative;
    z-index: 1;
}

#aiChatBot .chatbot-intro {
    box-shadow:
        0 20px 24px -4px rgba(10, 13, 18, 0.08),
        0 8px 8px -4px rgba(10, 13, 18, 0.03),
        0 3px 3px -1.5px rgba(10, 13, 18, 0.04);
    border-left: 1px solid #e9eaeb;
}

#aiChatBot .chatbot-intro .chatbot-input-wrapper {
    position: relative;
}

#aiChatBot .chatbot-intro .chatbot-input-wrapper .chatbot-textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    padding: 12px 48px 56px 16px;
    border: 1px solid #e2e6ef;
    background: #fff;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

#aiChatBot .chatbot-intro .chatbot-input-wrapper .chatbot-textarea:focus {
    border-color: #b9c3ff;
}

#aiChatBot .chatbot-intro .chatbot-input-wrapper .chatbot-input-actions {
    bottom: 8px;
    right: 12px;
    z-index: 2;
}

#aiChatBot .chatbot-intro .chatbot-input-wrapper .chatbot-input-actions button {
    width: 36px;
    height: 36px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

#aiChatBot
    .chatbot-intro
    .chatbot-input-wrapper
    .chatbot-input-actions
    button.btn-light {
    border: 1px solid #d5d7da;
    background: #fff;
    box-shadow: 0 -4px 0 0 #d5d7da inset;
}

#aiChatBot
    .chatbot-intro
    .chatbot-input-wrapper
    .chatbot-input-actions
    button.btn-primary {
    background-color: #2662a2;
    border: none;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: #2662a2;
    box-shadow: 0 -4px 0 0 rgba(10, 13, 18, 0.2) inset;
}

#aiChatBot
    .chatbot-intro
    .chatbot-input-wrapper
    .chatbot-input-actions
    button.btn-primary:hover {
    background-color: rgb(33.155, 85.505, 141.345);
}

#aiChatBot .chatbot-intro .btn-outline-secondary {
    border-radius: 6px;
    border: 1px solid #d5d7da;
    background: #fff;
    transition: all 0.2s ease;
}

#aiChatBot .chatbot-intro .btn-outline-secondary:hover {
    background-color: var(--primary);
    border-color: #ccc;
}

#aiChatBot .chatbot-listening {
    background: linear-gradient(180deg, #ffffff 0%, #f8f6ff 100%);
}

#aiChatBot .chatbot-listening img {
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

#aiChatBot .chatbot-main {
    position: relative;
    inset: auto;
    background: #fff;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    justify-content: flex-start;
    align-items: stretch;
    scroll-padding-top: 12px;
    scroll-padding-bottom: 12px;
}

#aiChatBot .chatbot-main .message {
    word-break: break-word;
    overflow-wrap: anywhere;
}

#aiChatBot .chatbot-main .chat-message {
    max-width: 80%;
}

#aiChatBot .chatbot-main .chat-message.user {
    margin-inline-start: auto;
}

#aiChatBot .chatbot-main .chat-message.user .message {
    background-color: #2662a2 !important;
    border-radius: 8px !important;
    border-start-end-radius: 0 !important;
}

#aiChatBot .chatbot-main .chat-message.bot {
    margin-inline-end: auto;
}

#aiChatBot .chatbot-main .chat-message.bot .message {
    border-radius: 8px !important;
    border-start-start-radius: 0 !important;
    border: 1px solid #e9eaeb !important;
    background: #fafafa !important;
}

#aiChatBot .chatbot-footer {
    background: #fff;
    border-top: 1px solid #eaeaea;
}

#aiChatBot .chatbot-close-btn {
    top: 12px;
    right: 12px;
    z-index: 20;
    width: 36px;
    height: 36px;
    border: none !important;
    background-color: none !important;
    box-shadow: none !important;
    background: #fff;
    color: #6c757d;
    transition: all 0.2s ease;
}

#aiChatBot .chatbot-close-btn:hover {
    background: #f8f9fa;
    color: #000;
    transform: scale(1.05);
}

.has-fixed-content #aiChatBot {
    position: relative !important;
}

#aiChatBot.active-default {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    display: none !important;
}

/* ===== Visible States (Slide-in effect) ===== */
#aiChatBot.active-intro,
#aiChatBot.active-main,
#aiChatBot.active-listening {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* ===== Floating Icon Button ===== */
.chatbot-launch-btn {
    bottom: 84px;
    right: 24px;
    z-index: 9999;
    background: var(--main-color);
    border: none;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.chatbot-launch-btn img {
    width: 57px;
    height: 59px;
    border-radius: 50%;
    aspect-ratio: unset !important;
}

.chatbot-launch-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}

body:has(#aiChatBot.active-intro) .chatbot-launch-btn,
body:has(#aiChatBot.active-main) .chatbot-launch-btn,
body:has(#aiChatBot.active-listening) .chatbot-launch-btn {
    display: none !important;
}

@media screen and (min-width: 450px) {
    #aiPageContent {
        margin-left: 250px;
    }
}

#aiPageContent .sec_container {
    width: 80%;
}

#aiPageContent .content-box {
    height: 70vh;
    border-radius: 8px;
    border: 3px solid transparent;
    background: #fff0fa;
    overflow: hidden;
    border-image: repeating-conic-gradient(
            from 9deg,
            #ff5dcd 3deg 4deg,
            transparent -1deg 5deg
        )
        1;
}

#aiPageContent .btns-container button:first-child {
    border-right: 1px solid #d5d7da !important;
}

#aiPageContent .btns-container .btn-light {
    background-color: transparent;
    border-radius: 0 !important;
}

#lesson-breadcrumb.breadcrumb {
    background: transparent;
}

#lesson-breadcrumb.breadcrumb-item i {
    color: #b3b3b3;
    font-size: 12px;
}

#lesson-breadcrumb.breadcrumb-item a:hover {
    text-decoration: underline;
}

#lesson-breadcrumb.btn-light:hover {
    background-color: #f8f9fa;
}

.modal-body .badges-wrapper {
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.modal-body .badges-wrapper .badge-card {
    width: 132px;
    height: 180px;
    padding: 24px;
}

.modal-header {
    position: relative;
    z-index: 88;
}

.modal-content {
    position: relative;
    /* overflow: hidden; */
    overflow: scroll !important;
}

.modal-content .btn-close {
    position: absolute;
    top: 24px;
    right: 24px;
}

.modal-content .imgs_container {
    position: relative;
}

.modal-content .imgs_container .bg {
    width: 183px;
    height: 185px;
    position: absolute;
    left: -44px;
    top: -44px;
}

.modal-content .imgs_container .icon-2,
.modal-content .imgs_container .icon {
    position: absolute;
    left: 24px;
    top: 24px;
    z-index: 88;
    width: 48px;
    height: 48px;
    background-color: #dcfae6;
    border-radius: 50%;
    display: flex;
}

.modal-content .imgs_container .icon-2 i,
.modal-content .imgs_container .icon-2 img,
.modal-content .imgs_container .icon i,
.modal-content .imgs_container .icon img {
    margin: auto;
}

.modal-content .imgs_container .icon-2 {
    background-color: #f5f5f5;
}

#cancelSubscriptionModal .modal-content .imgs_container .bg {
    left: 50% !important;
    top: 0px;
    right: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
}

#cancelSubscriptionModal .icon-2 {
    width: 91%;
    background-color: transparent !important;
}

.profiles-grid #profile-head #activity .activity-log-section .activity-timeline,
#parent-profiles-page
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline {
    position: relative;
    margin-left: 20px;
    border-left: 2px solid #e4e6e6;
    padding-left: 20px;
}

@media screen and (max-width: 450px) {
    .profiles-grid
        #profile-head
        #activity
        .activity-log-section
        .activity-timeline,
    #parent-profiles-page
        #profile-head
        #activity
        .activity-log-section
        .activity-timeline {
        border: none;
        margin: 0;
    }
}

.profiles-grid
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item,
#parent-profiles-page
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item {
    position: relative;
}

.profiles-grid
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-dot,
#parent-profiles-page
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-dot {
    position: absolute;
    left: -29px;
    top: 18px;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 2px solid #e4e6e6;
    border-radius: 50%;
    z-index: 2;
}

.profiles-grid
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card,
#parent-profiles-page
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card {
    position: relative;
    background: #fff;
    border: 1px solid #d5d7da !important;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.profiles-grid
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card
    p,
#parent-profiles-page
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card
    p {
    color: #212529;
    font-size: 15px;
    margin-bottom: 0;
}

.profiles-grid
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card
    small,
#parent-profiles-page
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card
    small {
    font-size: 13px;
}

.profiles-grid
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card
    .badge-state,
#parent-profiles-page
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card
    .badge-state {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 500;
    border-radius: 50px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
}

@media screen and (max-width: 450px) {
    .profiles-grid
        #profile-head
        #activity
        .activity-log-section
        .activity-timeline
        .activity-item
        .activity-card
        .badge-state,
    #parent-profiles-page
        #profile-head
        #activity
        .activity-log-section
        .activity-timeline
        .activity-item
        .activity-card
        .badge-state {
        display: none;
    }
}

.profiles-grid
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card
    .badge-state.logged-in,
#parent-profiles-page
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card
    .badge-state.logged-in {
    background-color: #f0f9ff;
    color: #026aa2;
    border-color: #b9e6fe;
}

.profiles-grid
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card
    .badge-state.learning,
#parent-profiles-page
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card
    .badge-state.learning {
    background-color: #fffaeb;
    color: #b54708;
    border-color: #fedf89;
}

.profiles-grid
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card
    .badge-state.certification,
#parent-profiles-page
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card
    .badge-state.certification {
    background-color: #ecfdf3;
    color: #067647;
    border-color: #abefc6;
}

.profiles-grid
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card
    .badge-state.logged-out,
#parent-profiles-page
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-card
    .badge-state.logged-out {
    background-color: #fef3f2;
    color: #b42318;
    border-color: #fecdca;
}

@media screen and (max-width: 450px) {
    .profiles-grid #profile-head #profileTabs,
    #parent-profiles-page #profile-head #profileTabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

.profiles-grid #profile-head .profile-header .profile-avatar,
#parent-profiles-page #profile-head .profile-header .profile-avatar {
    border: 3px solid #e9ecef;
    object-fit: cover;
}

.profiles-grid #profile-head .profile-header button,
#parent-profiles-page #profile-head .profile-header button {
    color: #414651 !important;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
}

.profiles-grid #profile-head .profile-header button.bg-white,
#parent-profiles-page #profile-head .profile-header button.bg-white {
    box-shadow:
        0 0 0 1px rgba(10, 13, 18, 0.18) inset,
        0 -2px 0 0 rgba(10, 13, 18, 0.05) inset,
        0 1px 2px 0 rgba(10, 13, 18, 0.05);
}

@media screen and (max-width: 450px) {
    .profiles-grid #profile-head .profile-header .btns-container,
    #parent-profiles-page #profile-head .profile-header .btns-container {
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }

    .profiles-grid #profile-head .profile-header .btns-container button,
    #parent-profiles-page #profile-head .profile-header .btns-container button {
        box-shadow: unset !important;
        gap: 8px;
    }

    .profiles-grid #profile-head .profile-header .btns-container .line,
    #parent-profiles-page #profile-head .profile-header .btns-container .line {
        height: 10px;
        width: 2px;
        background-color: #d5d7da;
    }
}

.profiles-grid #profile-head .nav-tabs,
#parent-profiles-page #profile-head .nav-tabs {
    border-bottom: 1px solid #e5e7eb;
}

.profiles-grid #profile-head .nav-tabs .nav-link,
#parent-profiles-page #profile-head .nav-tabs .nav-link {
    color: #6b7280;
    border: none;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    transition: all 0.25s ease;
    border-radius: 0;
}

.profiles-grid #profile-head .nav-tabs .nav-link:hover,
#parent-profiles-page #profile-head .nav-tabs .nav-link:hover {
    color: #204f84;
}

.profiles-grid #profile-head .nav-tabs .nav-link.active,
#parent-profiles-page #profile-head .nav-tabs .nav-link.active {
    color: #204f84;
    border-color: #204f84;
    background-color: transparent;
}

.profiles-grid #profile-head .general-card,
#parent-profiles-page #profile-head .general-card {
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e9eaeb !important;
    overflow: hidden;
}

@media screen and (max-width: 450px) {
    .profiles-grid #profile-head .general-card,
    #parent-profiles-page #profile-head .general-card {
        padding: 24px 16px !important;
    }
}

.profiles-grid #profile-head .general-card table,
#parent-profiles-page #profile-head .general-card table {
    width: 100%;
}

.profiles-grid #profile-head .general-card table td,
#parent-profiles-page #profile-head .general-card table td {
    padding: 18px 22px;
    border-right: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

@media screen and (max-width: 450px) {
    .profiles-grid #profile-head .general-card table td,
    #parent-profiles-page #profile-head .general-card table td {
        border: none;
        padding: 0;
        padding-bottom: 16px;
    }
}

.profiles-grid #profile-head .general-card table td:last-child,
#parent-profiles-page #profile-head .general-card table td:last-child {
    border-right: none;
}

.profiles-grid #profile-head .general-card table tr:last-child td,
#parent-profiles-page #profile-head .general-card table tr:last-child td {
    border-bottom: none;
}

@media screen and (max-width: 450px) {
    .profiles-grid #profile-head .general-card table tr,
    #parent-profiles-page #profile-head .general-card table tr {
        padding-bottom: 16px;
    }

    .profiles-grid #profile-head .general-card table tr:last-child,
    #parent-profiles-page #profile-head .general-card table tr:last-child {
        padding-bottom: 0px;
    }
}

.profiles-grid #profile-head .general-card .badge,
#parent-profiles-page #profile-head .general-card .badge {
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 8px;
}

@media screen and (max-width: 450px) {
    .profiles-grid #profile-head .general-card table,
    .profiles-grid #profile-head .general-card tbody,
    .profiles-grid #profile-head .general-card tr,
    #parent-profiles-page #profile-head .general-card table,
    #parent-profiles-page #profile-head .general-card tbody,
    #parent-profiles-page #profile-head .general-card tr {
        display: block;
        width: 100%;
    }

    .profiles-grid #profile-head .general-card td,
    #parent-profiles-page #profile-head .general-card td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        border-right: none;
        padding: 14px 16px;
    }

    .profiles-grid #profile-head .general-card td p,
    #parent-profiles-page #profile-head .general-card td p {
        margin: 0;
    }

    .profiles-grid #profile-head .general-card td .text-muted,
    #parent-profiles-page #profile-head .general-card td .text-muted {
        white-space: nowrap;
    }

    .profiles-grid #profile-head .general-card td .fw-semibold,
    #parent-profiles-page #profile-head .general-card td .fw-semibold {
        text-align: right;
    }

    .profiles-grid #profile-head .general-card td .d-flex,
    #parent-profiles-page #profile-head .general-card td .d-flex {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
        max-width: 65%;
    }

    .profiles-grid #profile-head .general-card td[colspan="2"],
    #parent-profiles-page #profile-head .general-card td[colspan="2"] {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
    }

    .profiles-grid #profile-head .general-card td[colspan="2"] .d-flex,
    #parent-profiles-page #profile-head .general-card td[colspan="2"] .d-flex {
        justify-content: flex-start;
        max-width: 100%;
    }

    .profiles-grid #profile-head .general-card tr:last-child td,
    #parent-profiles-page #profile-head .general-card tr:last-child td {
        padding-bottom: 0;
    }
}

.profiles-grid .badge-profile,
#parent-profiles-page .badge-profile {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: #007bff;
    border: 1px solid #007bff;
    background-color: rgba(0, 123, 255, 0.06);
    border-radius: 50px;
    padding: 5px 10px;
    transition: all 0.2s ease-in-out;
}

.profiles-grid .badge-profile i,
#parent-profiles-page .badge-profile i {
    font-size: 15px;
}

.profiles-grid .badge-profile:hover,
#parent-profiles-page .badge-profile:hover {
    background-color: rgba(0, 123, 255, 0.12);
    text-decoration: none;
}

.profiles-grid .profile-badge-2 .badge-profile,
#parent-profiles-page .profile-badge-2 .badge-profile {
    color: #b93815 !important;
    background-color: #fef6ee !important;
    border: #f9dbaf !important;
}

.profiles-grid .profiles-card .card,
#parent-profiles-page .profiles-card .card {
    display: flex;
    width: 200px;
    height: 240px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
}

@media screen and (max-width: 450px) {
    .profiles-grid .profiles-card .card,
    #parent-profiles-page .profiles-card .card {
        width: 160px;
        height: 200px;
        overflow: hidden;
    }
}

.profiles-grid .profiles-card h6,
#parent-profiles-page .profiles-card h6 {
    color: #0c0c0d;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    text-decoration: none !important;
}

.profiles-grid .profiles-card .add-box .parent,
#parent-profiles-page .profiles-card .add-box .parent {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.profiles-grid .profiles-card .add-box .parent .icon_container,
#parent-profiles-page .profiles-card .add-box .parent .icon_container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -2;
}

.profiles-grid
    .profiles-card
    .add-box
    .parent
    .icon_container
    .circle-background,
#parent-profiles-page
    .profiles-card
    .add-box
    .parent
    .icon_container
    .circle-background {
    width: 171.429px;
    height: 171.429px;
}

.profiles-grid .profiles-card .add-box .parent .icon_container .add-profile-btn,
#parent-profiles-page
    .profiles-card
    .add-box
    .parent
    .icon_container
    .add-profile-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.profiles-grid .profiles-card .add-box .parent .text_container,
#parent-profiles-page .profiles-card .add-box .parent .text_container {
    margin-top: 124px;
}

.profiles-grid .profiles-card .add-box .parent .text_container h6,
#parent-profiles-page .profiles-card .add-box .parent .text_container h6 {
    color: #535862;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.profiles-grid .profiles-card .add-box .parent .text_container p,
#parent-profiles-page .profiles-card .add-box .parent .text_container p {
    color: #95959c;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.profiles-grid,
#parent-profiles-page {
    /* --------------------------------------------
  Roadmap Journey Component
  -------------------------------------------- */
}

.profiles-grid #roadmap-section,
#parent-profiles-page #roadmap-section {
    /* Locked overlay style */
}

.profiles-grid #roadmap-section .roadmap-locked-overlay,
#parent-profiles-page #roadmap-section .roadmap-locked-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(14px);
    border-radius: 20px;
    transition: opacity 0.3s ease;
}

.profiles-grid #roadmap-section .roadmap-locked-overlay .text-pink,
#parent-profiles-page #roadmap-section .roadmap-locked-overlay .text-pink {
    color: #e80085;
    transition: color 0.25s ease;
}

.profiles-grid #roadmap-section .roadmap-locked-overlay .text-pink:hover,
#parent-profiles-page
    #roadmap-section
    .roadmap-locked-overlay
    .text-pink:hover {
    color: #c3006e;
}

.profiles-grid #roadmap-section .roadmap-locked-overlay img,
#parent-profiles-page #roadmap-section .roadmap-locked-overlay img {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

.profiles-grid #roadmap-section .card,
#parent-profiles-page #roadmap-section .card {
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e9ecef;
}

@media screen and (max-width: 450px) {
    .profiles-grid #roadmap-section .card,
    #parent-profiles-page #roadmap-section .card {
        max-height: 450px;
    }
}

.profiles-grid #roadmap-section .journey2,
#parent-profiles-page #roadmap-section .journey2 {
    position: relative;
    padding: 28px 8px 36px;
    overflow: hidden;
    /* === curved rail === */
}

.profiles-grid #roadmap-section .journey2 .rail,
#parent-profiles-page #roadmap-section .journey2 .rail {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    height: 22px;
    background: rgba(233, 234, 235, 0.4588235294);
    transform: translateY(-50%);
    border-radius: 50px;
}

.profiles-grid #roadmap-section .journey2 .rail::after,
#parent-profiles-page #roadmap-section .journey2 .rail::after {
    content: "";
    position: absolute;
    right: -38px;
    top: -40px;
    width: 290px;
    height: 250px;
    border: 22px solid rgba(233, 234, 235, 0.4588235294);
    border-left-color: transparent;
    border-top-color: transparent;
    border-radius: 50%;
}

.profiles-grid #roadmap-section .journey2,
#parent-profiles-page #roadmap-section .journey2 {
    /* === steps wrapper === */
}

.profiles-grid #roadmap-section .journey2 .steps,
#parent-profiles-page #roadmap-section .journey2 .steps {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 40px 24px;
    margin-top: 24px;
}

.profiles-grid #roadmap-section .journey2 .steps .j-step,
#parent-profiles-page #roadmap-section .journey2 .steps .j-step {
    position: relative;
    flex: 1 1 180px;
    max-width: 220px;
    min-height: 160px;
    --c: #94a3b8;
    --ring: rgba(148, 163, 184, 0.25);
    /* center dot */
}

.profiles-grid #roadmap-section .journey2 .steps .j-step .dot,
#parent-profiles-page #roadmap-section .journey2 .steps .j-step .dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 8px var(--ring);
    border: 3px solid #fff;
    z-index: 2;
}

.profiles-grid #roadmap-section .journey2 .steps .j-step .info,
#parent-profiles-page #roadmap-section .journey2 .steps .j-step .info {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    text-align: center;
}

.profiles-grid #roadmap-section .journey2 .steps .j-step.above .info,
#parent-profiles-page #roadmap-section .journey2 .steps .j-step.above .info {
    bottom: calc(50% + 18px);
}

.profiles-grid #roadmap-section .journey2 .steps .j-step.below .info,
#parent-profiles-page #roadmap-section .journey2 .steps .j-step.below .info {
    top: calc(50% + 18px);
}

.profiles-grid #roadmap-section .journey2 .steps .j-step .title,
#parent-profiles-page #roadmap-section .journey2 .steps .j-step .title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}

.profiles-grid #roadmap-section .journey2 .steps .j-step .detail,
#parent-profiles-page #roadmap-section .journey2 .steps .j-step .detail {
    font-size: 12px;
    color: #6b7280;
}

.profiles-grid #roadmap-section .journey2 .steps .j-step .detail i,
#parent-profiles-page #roadmap-section .journey2 .steps .j-step .detail i {
    margin-right: 6px;
}

.profiles-grid #roadmap-section .journey2 .steps .j-step.color-green,
#parent-profiles-page #roadmap-section .journey2 .steps .j-step.color-green {
    --c: #10b981;
    --ring: rgba(16, 185, 129, 0.25);
}

.profiles-grid
    #roadmap-section
    .journey2
    .steps
    .j-step.color-green
    .info.text-center,
#parent-profiles-page
    #roadmap-section
    .journey2
    .steps
    .j-step.color-green
    .info.text-center {
    color: #10b981;
}

.profiles-grid #roadmap-section .journey2 .steps .j-step.color-orange,
#parent-profiles-page #roadmap-section .journey2 .steps .j-step.color-orange {
    --c: #f59e0b;
    --ring: rgba(245, 158, 11, 0.25);
}

.profiles-grid
    #roadmap-section
    .journey2
    .steps
    .j-step.color-orange
    .info.text-center,
#parent-profiles-page
    #roadmap-section
    .journey2
    .steps
    .j-step.color-orange
    .info.text-center {
    color: #f59e0b;
}

.profiles-grid #roadmap-section .journey2 .steps .j-step.color-red,
#parent-profiles-page #roadmap-section .journey2 .steps .j-step.color-red {
    --c: #ef4444;
    --ring: rgba(239, 68, 68, 0.25);
}

.profiles-grid
    #roadmap-section
    .journey2
    .steps
    .j-step.color-red
    .info.text-center,
#parent-profiles-page
    #roadmap-section
    .journey2
    .steps
    .j-step.color-red
    .info.text-center {
    color: #ef4444;
}

.profiles-grid #roadmap-section .journey2 .steps .j-step.active .dot,
#parent-profiles-page #roadmap-section .journey2 .steps .j-step.active .dot {
    box-shadow: 0 0 0 11px var(--ring);
}

.profiles-grid #roadmap-section .journey2,
#parent-profiles-page #roadmap-section .journey2 {
    /* === responsive behaviour === */
}

@media (max-width: 992px) {
    .profiles-grid #roadmap-section .journey2 .steps,
    #parent-profiles-page #roadmap-section .journey2 .steps {
        justify-content: center;
        gap: 32px 16px;
    }
}

@media (max-width: 575px) {
    .profiles-grid #roadmap-section .journey2 .rail,
    #parent-profiles-page #roadmap-section .journey2 .rail {
        display: none;
    }

    .profiles-grid #roadmap-section .journey2 .steps,
    #parent-profiles-page #roadmap-section .journey2 .steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .profiles-grid #roadmap-section .journey2 .steps .j-step,
    #parent-profiles-page #roadmap-section .journey2 .steps .j-step {
        flex: 1 1 auto;
        padding-left: 48px;
    }

    .profiles-grid #roadmap-section .journey2 .steps .j-step .dot,
    #parent-profiles-page #roadmap-section .journey2 .steps .j-step .dot {
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
    }

    .profiles-grid #roadmap-section .journey2 .steps .j-step .info,
    #parent-profiles-page #roadmap-section .journey2 .steps .j-step .info {
        position: relative;
        left: 0;
        transform: none;
        width: auto;
        text-align: left;
    }
}

@media screen and (max-width: 450px) {
    .profiles-grid {
        justify-content: center !important;
    }
}

@media screen and (max-width: 450px) {
    #learning-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    #learning-nav #roadmap-static {
        width: 100%;
    }
}

#plan-reg {
    background: #fff;
    color: #111;
}

@media screen and (max-width: 450px) {
    #plan-reg {
        padding-top: 22px !important;
    }
}

@media screen and (min-width: 450px) {
    #plan-reg .mobile {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }
}

#plan-reg .process {
    width: 480px;
}

#plan-reg .plan-card-container {
    max-width: 386px;
}

#plan-reg .text-pink {
    color: #e3008c !important;
}

#plan-reg h6.text-primary {
    color: #7b69e9 !important;
}

#plan-reg .plan-toggle {
    border-radius: 9999px;
    border: 1px solid #f3f3f3;
    background: #f5f5f5;
    padding: 4px;
    gap: 16px;
}

#plan-reg .plan-toggle .btn {
    border-radius: 999px;
    padding: 0.45rem 1.2rem;
    font-weight: 500;
    color: #0c0c0d !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

#plan-reg .plan-toggle input:checked + label {
    background-color: #fff !important;
    box-shadow: 0 4px 10px rgba(32, 92, 156, 0.25) !important;
}

#plan-reg .plan-toggle label[for="Yearly"] {
    color: #656469;
}

#plan-reg .plan-card {
    border: 1px solid #e9eaeb;
    background-color: #fff;
    transition: all 0.25s ease-in-out;
    box-shadow:
        0 1px 3px 0 rgba(26, 24, 22, 0.1),
        0 1px 2px 0 rgba(26, 24, 22, 0.06);
    text-align: start;
    padding: 32px 24px;
}

#plan-reg .plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

#plan-reg .plan-card.basic .select-btn {
    background-color: var(--main-color);
    color: #fff;
}

#plan-reg .plan-card.basic .select-btn:hover {
    background-color: rgb(27.6595744681, 79.5212765957, 134.8404255319);
}

#plan-reg .plan-card.premium .select-btn {
    background-color: #e3008c;
    color: #fff;
}

#plan-reg .plan-card.premium .select-btn:hover {
    background-color: rgb(201.5, 0, 124.2731277533);
}

#plan-reg .plan-card ul li {
    font-size: 0.9rem;
    line-height: 1.4;
}

#plan-reg .plan-card ul li i {
    font-size: 22px;
}

#plan-reg .plan-card ul li i.text-primary {
    color: #7b69e9 !important;
}

#plan-reg .plan-card input[type="number"] {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    width: 80px;
    padding: 0.25rem 0.5rem;
    font-weight: 500;
}

#plan-reg .plan-card input[type="number"]:focus {
    outline: none;
    border-color: var(--main-color);
    box-shadow: 0 0 0 0.15rem rgba(32, 92, 156, 0.15);
}

#plan-reg a:hover {
    text-decoration: underline;
}

#plan-reg .list-unstyled {
    padding: 0;
}

#plan-reg .child-counter {
    width: 100%;
}

#plan-reg .child-counter button {
    width: 32px;
    height: 32px;
    line-height: 1;
    padding: 0;
    font-size: 18px;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
}

#plan-reg .child-counter button:hover {
    background-color: #e9ecef;
}

#plan-reg .child-counter button:active {
    transform: scale(0.95);
}

#plan-reg .child-counter input {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    width: 60px;
    font-weight: 600;
}

#plan-reg .child-counter input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#plan-reg .child-counter input:focus {
    outline: none;
    border-color: var(--main-color);
    box-shadow: 0 0 0 0.15rem rgba(32, 92, 156, 0.15);
}

#pin-form .form-control {
    max-width: 113px;
}

.auth-grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    min-height: 100vh;
    padding: 24px;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 450px) {
    .auth-grid-container {
        width: 100%;
        display: block;
        padding: 16px;
    }

    .auth-grid-container::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.4);
        width: 100%;
        height: 100%;
        z-index: -1;
    }
}

@media screen and (max-width: 450px) {
    .auth-grid-container .custom_container {
        position: absolute;
        top: 40%;
        left: 0;
    }
}

.auth-grid-container .login-left {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 450px) {
    .auth-grid-container .login-left {
        padding: 16px;
        position: absolute;
        top: 50%;
    }
}

.auth-grid-container .login-left .custom-container {
    height: 100%;
    max-width: 514px;
    width: 100%;
}

.auth-grid-container .login-left .custom-container .logo {
    max-width: 180px;
    margin-bottom: 32px;
}

@media screen and (max-width: 450px) {
    .auth-grid-container .login-left .custom-container .logo {
        display: none;
    }
}

@media screen and (max-width: 450px) {
    .auth-grid-container .login-left .auth-social-buttons {
        flex-wrap: wrap;
    }
}

.auth-grid-container .login-left .auth-social-buttons span {
    font-size: 15px;
}

.auth-grid-container .login-left .auth-social-buttons {
    /* Ensure social icons are uniform size */
}

.auth-grid-container .login-left .auth-social-buttons img {
    width: 30px !important;
    height: 30px !important;
    object-fit: cover;
    display: inline-block;
}

.auth-grid-container .login-left .auth-social-buttons {
    /* Normalize button line-height so heights match */
}

.auth-grid-container .login-left .auth-social-buttons .btn {
    line-height: 1;
}

.auth-grid-container .login-right {
    border-radius: 16px;
    padding: 40px 24px;
    display: flex;
    width: 600px;
    flex-direction: column;
    justify-content: center;
    background-color: #003b95;
    background-image: url("/assets/img/Frame1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}

@media screen and (max-width: 1800px) {
    .auth-grid-container .login-right {
        width: 450px;
        position: relative;
        z-index: -1;
    }
}

@media screen and (max-width: 450px) {
    .auth-grid-container .login-right {
        width: 100%;
        flex-direction: column-reverse !important;
        padding: 0;
        align-items: flex-start;
        justify-content: flex-end !important;
    }
}

.auth-grid-container .login-right h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.auth-grid-container .login-right p {
    font-size: 15px;
    margin-bottom: 24px;
}

.auth-grid-container .login-right .img-card {
    border-radius: 16px;
    object-fit: cover;
    max-width: 100%;
}

@media (max-width: 992px) {
    .auth-grid-container {
        grid-template-columns: 1fr;
    }

    .auth-grid-container .login-right {
        order: -1;
        margin-bottom: 24px;
        padding: 0 !important;
    }
}

.auth-grid-container#reg-page {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 450px) {
    .auth-grid-container#reg-page {
        flex-direction: column;
    }
}

.onboarding-header {
    height: 80px;
    background-color: white;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.onboarding-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.child-profile-container {
    width: 488px;
}

.child-profile-subtitle {
    font-size: 15px;
}

.child-profile-note {
    font-size: 13px;
}

.text-female {
    color: #f75ca5;
}

.logo-img {
    height: 40px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-info button {
    gap: 8px;
}

.profile-card {
    border: 1px solid #dee2e6;
    border-radius: 16px;
    text-align: center;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.user-card-image {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
}

.add-profile-card {
    border: 1px dashed #dee2e6;
    border-radius: 16px;
    background-color: #f8f9fa;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.circle-container.with-bg-sm {
    position: relative;
    width: 60px;
    height: 60px;
    background-image: url("/assets/img/Content.png");
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}

.icon-overlay-sm {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 2px solid #157efb;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #157efb;
}

.clickable-card {
    cursor: pointer;
    text-decoration: none !important;
}

.clickable-card:hover {
    transition: transform 0.5s ease;
    transform: scale(1.05);
}

.clickable-text {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.clickable-text:hover {
    text-decoration: underline;
}

.avatar-option {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background-color: transparent;
}

.avatar-option.checked {
    border: 2px solid #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}

.avatar-option-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: none;
    box-shadow: none;
}

.avatar-add {
    background-color: #f5f5f5;
    color: #000;
    font-size: 22px;
    border: none;
}

.avatar-option:hover {
    outline: none;
    border: none;
    box-shadow: none;
    transform: scale(1.05);
    transition: transform 0.5s ease;
}

.gender-label {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    background-color: transparent;
    font-size: 14px;
    transition: all 0.2s ease;
}

.gender-label:hover {
    transform: scale(1.05);
    transition: transform 0.5s ease;
}

.gender-label.checked {
    border: 2px solid #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}

.gender-option {
    flex: 1 1 auto;
    min-width: 120px;
}

.birthdate-input-date {
    padding-left: 0;
}

@media (max-width: 576px) {
    .gender-option {
        width: 100%;
    }

    .gender-label {
        justify-content: center;
    }
}

.text-main {
    color: var(--main-color);
}

.bg-main {
    background-color: var(--main-color);
}

.no-hover,
.no-hover:hover,
.no-hover:focus,
.no-hover:active {
    background-color: var(--main-color) !important;
    color: white !important;
    border-color: var(--main-color) !important;
    box-shadow: none !important;
}

.input-group-text {
    background-color: #fff;
    border-right: 0;
}

.login-right {
    background-color: #003b95;
    background-image: url("/assets/img/Frame1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.available-profiles-badge {
    font-size: 0.75rem;
    color: #157efb;
    background-color: #e8f2ff;
    padding: 5px 10px;
    border-radius: 20px;
}

.circle-container.with-bg {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: url("/assets/img/Content.png");
    background-size: cover, 80px;
    background-repeat: no-repeat;
    background-position: center, center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 2px solid #78aef0;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #3a8df3;
    z-index: 2;
}

.icon-overlay i {
    font-size: 19px;
}

@media (max-width: 576px) {
    .circle-container.with-bg {
        width: 140px;
        height: 140px;
        background-size: cover, 60px;
    }

    .icon-overlay {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* year grade  */
.active:not(.tab-pane):not(.breadcrumb-item) {
    /* border-radius: var(--radius-xl, 12px); */
    /* border: 1px solid #f5f5f5; */
    /* background: var(--Color-Background-Default-Default, rgba(255, 255, 255, 0.95)); */
    /* box-shadow: 0 -2px 0 0 #e3e3e3 inset; */
}

.robot-icon-container {
    margin-bottom: 16px;
}

.custom-box {
    position: relative;
    /* display: inline-block; */
    background-color: #fffef5;
    border: 1px solid #ffd700;
    border-radius: 8px;
    padding: 20px;
    margin-top: 16px;
    max-width: 100%;
    width: 100%;
}

.custom-box::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffd700;
    z-index: 1;
}

.custom-box::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #fffef5;
    z-index: 2;
}

.question-text {
    font-size: 17px;
    font-weight: 500;
    color: #1a1a1a;
    text-align: center;
    line-height: 1.5;
}

.grade-btn {
    border: 1px solid #ccc;
    background-color: white;
    font-size: 13px;
    border-radius: 8px;
    transition: all 0.2s ease;
    padding: 14px 10px;
    text-align: center;
}

.grade-btn:hover {
    background-color: #f5faff;
    border-color: #ccc;
}

.grade-btn.selected {
    background-color: #e6eef8;
    border-color: var(--main-color);
    font-weight: 600;
}

.continue-btn {
    background-color: var(--main-color);
    color: #fff;
    padding: 10px 20px;
    font-weight: 500;
    border-radius: 24px;
    font-size: 15px;
}

.continue-btn-sm {
    font-size: 14px;
}

/* ========== Quiz Players ========== */
.quiz-player-footer {
    padding: 24px 112px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    right: 0;
    left: 0;
    position: fixed;
    bottom: 0;
}

.quiz-player-spacing {
    margin-bottom: 96px;
}

.learning-nav-surface {
    background-color: #f9fafb;
    border-radius: 8px;
    padding: 4px;
}

@media screen and (max-width: 450px) {
    .learning-nav-surface {
        margin-top: 18px;
        width: 100%;
    }
}

.bg-soft-pink-section {
    min-height: calc(100vh - 220px);
    background: #ffeefe;
}

.course-section-offset {
    padding-left: 20px;
    margin-top: 50px;
}

.bg-brand-blue {
    background-color: #2662a2;
}

.bg-success-accent {
    background-color: #17b26a;
}

.fs-13 {
    font-size: 13px;
}

.fs-22 {
    font-size: 22px;
}

.text-deep-gray {
    color: #0c0c0d;
}

.text-magenta {
    color: #d80076;
}

.object-cover-180 {
    object-fit: cover;
    height: 180px;
}

.max-w-200 {
    max-width: 200px;
}

.max-w-400 {
    max-width: 400px;
}

.max-w-430 {
    max-width: 430px;
}

.min-w-320 {
    min-width: 320px;
}

.width-228-auto {
    width: 228px;
    height: auto;
}

.max-h-200 {
    max-height: 200px;
}

.progress-track {
    height: 6px;
    border-radius: 10px;
}

.bg-light {
    background-color: #e9eaeb !important;
}

.me-10px {
    margin-right: 10px;
}

.my-40 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.mt-neg-40 {
    margin-top: -40px;
}

.mb-48 {
    margin-bottom: 48px;
}

.mb-96 {
    margin-bottom: 96px;
}

.mt-88 {
    margin-top: 88px;
}

.mt-32 {
    margin-top: 32px;
}

.mb-32 {
    margin-bottom: 32px;
}

.cursor-grab {
    cursor: grab;
}

.roadmap-review-button {
    font-weight: 500;
    color: #344054;
    background-color: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    padding: 6px 40px;
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(208, 213, 221, 0.4);
}

.roadmap-primary-button {
    background-color: var(--main-color);
    color: #fff;
    border-radius: 999px;
    padding: 7px 33px;
    font-weight: 500;
    font-size: 0.875rem;
}

.edu-system-btn {
    border: 1px solid #ccc;
    background-color: white;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
    padding: 14px 16px;
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edu-system-btn:hover {
    background-color: #f5faff;
    border: 1px solid #ccc;
}

.edu-system-btn.selected {
    background-color: #e6f0ff;
    border-color: var(--main-color);
}

.question-icon {
    border: 1px solid #b5b7c0;
    border-radius: 50%;
    background-color: transparent;
    padding: 3px;
    font-size: 10px;
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b5b7c0;
}

.roadmap-box {
    background-color: #fff;
    border: 1px solid #eee;
    min-height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.upgrade-card {
    border: 1px solid #f14ed4;
    box-shadow: 0 2px 10px rgba(241, 78, 212, 0.1);
    min-height: 100%;
}

.upgrade-card ul {
    list-style: none;
    padding-left: 0;
}

@media screen and (max-width: 450px) {
    #registration-page {
        flex-direction: column !important;
    }
}

#registration-page .custom-form-container {
    max-width: 488px;
}

@media screen and (max-width: 450px) {
    #registration-page .custom-form-container {
        background-color: #fff;
        width: 100%;
        position: absolute;
        top: 40%;
        left: 0;
        padding: 16px;
        z-index: 1;
        max-width: unset;
        width: 100% !important;
    }
}

@media screen and (max-width: 450px) {
    #registration-page .login-right {
        width: 100%;
        flex-direction: column-reverse;
    }
}

@media screen and (min-width: 450px) {
    #registration-page .login-right {
        display: none !important;
    }
}

@media (max-width: 450px) {
    /* keep first + last name in same row on mobile */
    #complete-account-page .row-names {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px;
    }

    #complete-account-page .row-names > .col-sm-12 {
        flex: 1 1 50% !important;
        max-width: 50% !important;
        padding: 0 !important;
    }
}

#setup-pin-page .card-container,
#plan-reg .card-container,
#complete-account-page .card-container,
#registration-verification-page .card-container {
    max-width: 488px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 450px) {
    #setup-pin-page .card-container,
    #plan-reg .card-container,
    #complete-account-page .card-container,
    #registration-verification-page .card-container {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100%;
        position: relative;
    }
}

@media screen and (max-width: 450px) {
    #setup-pin-page .mobile,
    #plan-reg .mobile,
    #complete-account-page .mobile,
    #registration-verification-page .mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #setup-pin-page .mobile .process,
    #plan-reg .mobile .process,
    #complete-account-page .mobile .process,
    #registration-verification-page .mobile .process {
        width: 80px;
    }
}

#setup-pin-page .mobile .icon i,
#plan-reg .mobile .icon i,
#complete-account-page .mobile .icon i,
#registration-verification-page .mobile .icon i {
    font-size: 46px;
}

@media screen and (min-width: 450px) {
    #setup-pin-page .mobile .icon,
    #plan-reg .mobile .icon,
    #complete-account-page .mobile .icon,
    #registration-verification-page .mobile .icon {
        display: none;
    }
}

@media screen and (max-width: 450px) {
    #setup-pin-page .mobile {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        /* arrow on the left */
    }

    #setup-pin-page .mobile .icon {
        position: absolute;
        left: 10px;
        top: 0;
    }

    #setup-pin-page .mobile .icon i {
        font-size: 42px;
        line-height: 1;
    }

    #setup-pin-page .mobile {
        /* centered bot image */
    }

    #setup-pin-page .mobile img {
        display: block;
        margin: 0 auto;
        width: 80px;
        height: auto;
    }
}

@media screen and (min-width: 451px) {
    #setup-pin-page .mobile {
        display: none;
    }
}

#setup-pin-page .verify-box {
    display: flex;
    align-items: center;
}

#setup-pin-page .verify-box .custom-w-512 {
    max-width: 488px;
}

#quiz-footer-bar {
    background: #fff;
    padding: 24px 112px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    transition: background-color 0.2s ease;
}

#quiz-footer-bar .qp-skip,
#quiz-footer-bar .qp-solution {
    cursor: pointer;
    font-size: 14px;
    color: #111827;
}

#quiz-footer-bar .qp-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

#quiz-footer-bar .qp-status .qp-status-extra.correct {
    color: #17b26a;
    font-weight: 700;
}

#quiz-footer-bar .qp-btn {
    text-decoration: none;
    width: 180px;
    padding: 8px 18px;
    text-align: center;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background-color: #2662a2;
    box-shadow: 0 -4px 0 0 rgba(10, 13, 18, 0.2) inset;
    color: #fff;
    font-weight: 500;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

#quiz-footer-bar .qp-btn:hover {
    background-color: rgb(33.155, 85.505, 141.345);
}

#quiz-footer-bar.footer {
    justify-content: end;
    gap: 46px;
    border: 1px solid var(--Colors-Border-border-secondary, #e9eaeb);
    background: var(--Colors-Foreground-fg-white, #fff);
}

@media screen and (max-width: 450px) {
    #quiz-footer-bar.footer {
        padding: 0;
        padding-top: 20px;
        align-items: center;
        justify-content: center;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

#quiz-footer-bar.footer .qp-status {
    display: none;
}

#quiz-footer-bar.footer .qp-skip {
    display: none;
}

#quiz-footer-bar.is-correct {
    background: rgba(23, 178, 106, 0.12);
}

#quiz-footer-bar.is-correct .qp-btn {
    background-color: #17b26a;
}

#quiz-footer-bar.is-correct .qp-skip,
#quiz-footer-bar.is-correct .qp-status {
    display: block;
}

#quiz-footer-bar.is-correct .qp-skip,
#quiz-footer-bar.is-correct .qp-solution {
    display: none;
}

#quiz-footer-bar.is-correct .qp-status-wrong {
    display: none;
}

#quiz-footer-bar.is-correct .qp-status-correct {
    display: block;
}

#quiz-footer-bar.is-wrong {
    background: rgba(220, 53, 69, 0.12);
}

#quiz-footer-bar.is-wrong .qp-btn {
    background-color: #dc3545;
}

#quiz-footer-bar.is-wrong .qp-skip,
#quiz-footer-bar.is-wrong .qp-solution {
    display: none;
}

#quiz-footer-bar.is-wrong .qp-status-correct {
    display: none;
}

#quiz-footer-bar.is-wrong .qp-status {
    display: block;
}

#quiz-footer-bar.is-wrong,
#quiz-footer-bar.is-correct {
    justify-content: space-between !important;
}

#quiz-flash-cards {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

#quiz-flash-cards .quiz-layout-inner {
    width: 100%;
    max-width: 800px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media screen and (max-width: 450px) {
    #quiz-flash-cards .quiz-layout-inner {
        width: 100%;
        padding-bottom: 180px;
    }
}

#quiz-flash-cards .quiz-layout-header {
    display: flex;
    gap: 8px;
    align-items: center;
}

#quiz-flash-cards .quiz-layout-icon {
    width: 24px;
    height: 24px;
}

#quiz-flash-cards .quiz-layout-label {
    font-weight: 500;
    font-size: 14px;
}

.quiz-shared-question {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    color: #0c0c0d;
    font-size: 30px;
    font-weight: 500;
    margin: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.quiz-shared-question > :last-child {
    margin-bottom: 0;
}

.quiz-shared-question * {
    max-width: 100%;
}

.quiz-shared-question img,
.quiz-shared-question iframe,
.quiz-shared-question video,
.quiz-shared-question canvas {
    max-width: 100%;
    height: auto;
}

.quiz-shared-question table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
}

.quiz-shared-question th,
.quiz-shared-question td {
    overflow-wrap: anywhere;
    word-break: break-word;
}

#quiz-flash-cards .flash-cards-grid {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
}

@media screen and (max-width: 450px) {
    #quiz-flash-cards .flash-cards-grid {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }

    #quiz-flash-cards .flash-cards-grid .flash-card {
        flex: 0 0 320px;
    }
}

#quiz-flash-cards .flash-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    border-radius: 12px;
    border: 1px solid var(--fc-border);
    background: var(--fc-bg);
    padding: 16px;
    width: 320px;
    position: relative;
    transition:
        transform 0.2s ease,
        border 0.2s ease,
        background 0.2s ease;
}

#quiz-flash-cards .flash-card .card-img {
    position: relative;
    width: 100%;
    height: 220px;
    background-color: #f8f9fa;
}

#quiz-flash-cards .flash-card .card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

#quiz-flash-cards .flash-card .state-icon {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    pointer-events: none;
    display: none;
}

#quiz-flash-cards .flash-card .icon-check,
#quiz-flash-cards .flash-card .icon-x {
    display: none;
    width: 32px;
    height: 32px;
}

#quiz-flash-cards .flash-card .input-group {
    display: flex;
    width: 100%;
}

#quiz-flash-cards .flash-card .card-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--fc-border);
    border-right: none;
    width: 100px;
}

#quiz-flash-cards .flash-card .btn-check-answer {
    padding: 10px 16px;
    border: 1px solid var(--fc-border);
    border-radius: 0 8px 8px 0;
    background: #f8f9fa;
    color: var(--fc-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

#quiz-flash-cards .flash-card .btn-check-answer.active {
    background: var(--fc-primary);
    color: #fff;
    border-color: var(--fc-primary);
}

#quiz-flash-cards .flash-card .card-input.result {
    background: #fff;
    position: relative;
    padding-right: 80px;
}

#quiz-flash-cards .flash-card .card-input.result.correct::after {
    content: "Correct";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fc-correct);
    font-weight: 600;
}

#quiz-flash-cards .flash-card .card-input.result.wrong::after {
    content: "Incorrect!";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fc-wrong);
    font-weight: 600;
}

#quiz-flash-cards .flash-card .card-feedback {
    display: none;
    margin-top: 8px;
    font-size: 14px;
}

#quiz-flash-cards .flash-card.is-correct {
    border: 1px solid #198754 !important;
    background: rgba(25, 135, 84, 0.12) !important;
}

#quiz-flash-cards .flash-card.is-wrong {
    border: 1px solid #dc3545 !important;
    background: rgba(220, 53, 69, 0.12) !important;
}

#quiz-flash-cards .flash-card.is-correct .state-icon,
#quiz-flash-cards .flash-card.is-wrong .state-icon {
    display: block !important;
}

#quiz-flash-cards .flash-card.is-correct .icon-check {
    display: block !important;
}

#quiz-flash-cards .flash-card.is-wrong .icon-x {
    display: block !important;
}

#quiz-flash-cards .flash-card.is-correct,
#quiz-flash-cards .flash-card.is-wrong {
    transform: scale(1.03);
}

#quiz-find-the-words {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

#quiz-find-the-words .quiz-layout-inner {
    width: 100%;
    max-width: 800px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media screen and (max-width: 450px) {
    #quiz-find-the-words .quiz-layout-inner {
        width: 100%;
        padding-bottom: 180px;
    }
}

#quiz-find-the-words .quiz-layout-header {
    display: flex;
    gap: 8px;
    align-items: center;
}

#quiz-find-the-words .quiz-layout-icon {
    width: 24px;
    height: 24px;
}

#quiz-find-the-words .quiz-layout-label {
    font-weight: 500;
    font-size: 14px;
}

#quiz-find-the-words #word-search-grid table {
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#quiz-find-the-words #word-search-grid td {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: uppercase;
    user-select: none;
    cursor: pointer;
}

#quiz-find-the-words #word-search-grid .selecting {
    background-color: #cfe2ff;
}

#quiz-find-the-words #word-search-grid .found {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
}

#quiz-find-the-words #word-search-grid .wrong {
    background-color: #f8d7da !important;
    color: #842029 !important;
    animation: shake 0.3s;
}

#quiz-find-the-words #words-list .found {
    text-decoration: line-through;
    color: #198754;
    font-weight: 500;
}

#quiz-find-the-words #words-list .wrong {
    color: #dc3545 !important;
    font-weight: 500;
}

#quiz-image-pairing {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

#quiz-image-pairing .quiz-layout-inner {
    width: 100%;
    max-width: 800px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media screen and (max-width: 450px) {
    #quiz-image-pairing .quiz-layout-inner {
        width: 100%;
        padding-bottom: 180px;
    }
}

#quiz-image-pairing .quiz-layout-header {
    display: flex;
    gap: 8px;
    align-items: center;
}

#quiz-image-pairing .quiz-layout-icon {
    width: 24px;
    height: 24px;
}

#quiz-image-pairing .quiz-layout-label {
    font-weight: 500;
    font-size: 14px;
}

#quiz-image-pairing .badge-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: none;
}

#quiz-image-pairing .badge-icon .icon-check,
#quiz-image-pairing .badge-icon .icon-x {
    display: none;
}

#quiz-image-pairing .pairing-board {
    display: flex;
    gap: 24px;
}

#quiz-image-pairing .pairing-source,
#quiz-image-pairing .pairing-targets {
    flex: 1;
}

#quiz-image-pairing .source-grid {
    display: grid;
    grid-template-columns: repeat(3, 120px);
    gap: 16px;
}

@media screen and (max-width: 450px) {
    #quiz-image-pairing .source-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
}

#quiz-image-pairing .source-item {
    width: 120px;
    height: 120px;
    border: 1px solid #e9eaeb;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

#quiz-image-pairing .source-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

#quiz-image-pairing .source-item:active {
    cursor: grabbing;
}

#quiz-image-pairing .slot-grid {
    display: grid;
    grid-template-columns: repeat(3, 120px);
    gap: 16px;
}

@media screen and (max-width: 450px) {
    #quiz-image-pairing .slot-grid {
        display: flex;
        flex-wrap: wrap;
    }
}

#quiz-image-pairing .pairing-slot {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    border: 2px dashed #d5d7da;
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

#quiz-image-pairing .pairing-slot .slot-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.45;
    border-radius: 12px;
}

#quiz-image-pairing .pairing-slot .slot-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

#quiz-image-pairing .pairing-slot .slot-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#quiz-image-pairing .pairing-slot.drag-over {
    border-color: #204f84 !important;
    background: #eef5ff !important;
}

#quiz-image-pairing .pairing-slot.bounce {
    animation: pipBounce 0.25s ease;
}

#quiz-image-pairing .pairing-slot.is-correct {
    border: 2px solid #198754 !important;
    background: rgba(25, 135, 84, 0.08) !important;
}

#quiz-image-pairing .pairing-slot.is-wrong {
    border: 2px solid #dc3545 !important;
    background: rgba(220, 53, 69, 0.08) !important;
}

#quiz-image-pairing .pairing-slot.is-correct .badge-icon,
#quiz-image-pairing .pairing-slot.is-wrong .badge-icon {
    display: block !important;
}

#quiz-image-pairing .pairing-slot.is-correct .icon-check {
    display: block !important;
}

#quiz-image-pairing .pairing-slot.is-wrong .icon-x {
    display: block !important;
}

#quiz-image-sequencing {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

#quiz-image-sequencing .quiz-layout-inner {
    width: 100%;
    max-width: 800px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media screen and (max-width: 450px) {
    #quiz-image-sequencing .quiz-layout-inner {
        width: 100%;
        padding-bottom: 180px;
    }
}

#quiz-image-sequencing .quiz-layout-header {
    display: flex;
    gap: 8px;
    align-items: center;
}

#quiz-image-sequencing .quiz-layout-icon {
    width: 24px;
    height: 24px;
}

#quiz-image-sequencing .quiz-layout-label {
    font-weight: 500;
    font-size: 14px;
}

#quiz-image-sequencing .badge-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: none;
}

#quiz-image-sequencing .badge-icon .icon-check,
#quiz-image-sequencing .badge-icon .icon-x {
    display: none;
}

#quiz-image-sequencing .sequence-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

#quiz-image-sequencing .sequence-card {
    width: 160px;
    border: 1px solid #e9eaeb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: grab;
    transition:
        border 0.2s ease,
        background 0.2s ease;
}

#quiz-image-sequencing .sequence-card:active {
    cursor: grabbing;
}

#quiz-image-sequencing .sequence-card .card-img {
    width: 100%;
    height: 120px;
    overflow: hidden;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

#quiz-image-sequencing .sequence-card .card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#quiz-image-sequencing .sequence-card .card-title {
    padding: 8px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
}

#quiz-image-sequencing .sequence-card.is-correct {
    border: 2px solid #198754 !important;
    background: rgba(25, 135, 84, 0.08) !important;
}

#quiz-image-sequencing .sequence-card.is-wrong {
    border: 2px solid #dc3545 !important;
    background: rgba(220, 53, 69, 0.08) !important;
}

#quiz-image-sequencing .sequence-card.is-correct .badge-icon,
#quiz-image-sequencing .sequence-card.is-wrong .badge-icon {
    display: block !important;
}

#quiz-image-sequencing .sequence-card.is-correct .icon-check {
    display: block !important;
}

#quiz-image-sequencing .sequence-card.is-wrong .icon-x {
    display: block !important;
}

#quiz-image-sequencing .sortable-ghost {
    opacity: 0.4;
    transform: scale(0.95);
}

#quiz-rearrange {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

#quiz-rearrange .quiz-layout-inner {
    width: 100%;
    max-width: 800px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media screen and (max-width: 450px) {
    #quiz-rearrange .quiz-layout-inner {
        width: 100%;
        padding-bottom: 180px;
    }
}

#quiz-rearrange .quiz-layout-header {
    display: flex;
    gap: 8px;
    align-items: center;
}

#quiz-rearrange .quiz-layout-icon {
    width: 24px;
    height: 24px;
}

#quiz-rearrange .quiz-layout-label {
    font-weight: 500;
    font-size: 14px;
}

#quiz-rearrange .quiz-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#quiz-rearrange .sortable-item {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e9eaeb;
    background: #fff;
    cursor: grab;
    position: relative;
}

#quiz-rearrange .sortable-item .state-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    width: 20px;
    height: 20px;
}

#quiz-rearrange .sortable-item .icon-check,
#quiz-rearrange .sortable-item .icon-x {
    display: none;
    width: 20px;
    height: 20px;
}

#quiz-rearrange .quiz-row-align {
    display: flex;
    align-items: center;
    gap: 8px;
}

#quiz-rearrange .sortable-item.is-correct {
    border: 1px solid #198754 !important;
    background: rgba(25, 135, 84, 0.12) !important;
}

#quiz-rearrange .sortable-item.is-wrong {
    border: 1px solid #dc3545 !important;
    background: rgba(220, 53, 69, 0.12) !important;
}

#quiz-rearrange .sortable-item.is-correct .state-icon,
#quiz-rearrange .sortable-item.is-wrong .state-icon {
    display: block !important;
}

#quiz-rearrange .sortable-item.is-correct .icon-check {
    display: block !important;
}

#quiz-rearrange .sortable-item.is-wrong .icon-x {
    display: block !important;
}

#quiz-rearrange .sortable-ghost {
    opacity: 0.4;
    background: #f0f8ff;
}

#quiz-drag-drop {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

#quiz-drag-drop .quiz-layout-inner {
    width: 100%;
    max-width: 800px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media screen and (max-width: 450px) {
    #quiz-drag-drop .quiz-layout-inner {
        width: 100%;
        padding-bottom: 180px;
    }
}

#quiz-drag-drop .quiz-layout-header {
    display: flex;
    gap: 8px;
    align-items: center;
}

#quiz-drag-drop .quiz-layout-icon {
    width: 24px;
    height: 24px;
}

#quiz-drag-drop .quiz-layout-label {
    font-weight: 500;
    font-size: 14px;
}

#quiz-drag-drop .quiz-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#quiz-drag-drop .quiz-row {
    display: flex;
    gap: 16px;
}

@media screen and (max-width: 992px) {
    #quiz-drag-drop .quiz-row {
        width: 100%;
        max-width: 100%;
        overflow-y: auto;
    }
}

#quiz-drag-drop .quiz-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 12px;
    border: 1px solid #e9eaeb;
    background: #fff;
    position: relative;
}

#quiz-drag-drop .quiz-card .state-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    display: none;
    width: 20px;
    height: 20px;
    z-index: 2;
}

#quiz-drag-drop .quiz-card .icon-check,
#quiz-drag-drop .quiz-card .icon-x {
    display: none;
}

#quiz-drag-drop .quiz-card-image-sm {
    width: 188px;
    height: 140px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

#quiz-drag-drop .drop-target {
    margin: 8px;
    border: 2px dashed #d5d7da;
    border-radius: 12px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #fff;
}

#quiz-drag-drop .drop-target .state-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    width: 20px;
    height: 20px;
}

#quiz-drag-drop .drop-target .icon-check,
#quiz-drag-drop .drop-target .icon-x {
    display: none;
}

#quiz-drag-drop .drop-target.is-correct {
    border: 2px solid #198754 !important;
    background: rgba(25, 135, 84, 0.12) !important;
}

#quiz-drag-drop .drop-target.is-wrong {
    border: 2px solid #dc3545 !important;
    background: rgba(220, 53, 69, 0.12) !important;
}

#quiz-drag-drop .drop-target.is-correct .state-icon,
#quiz-drag-drop .drop-target.is-wrong .state-icon {
    display: block !important;
}

#quiz-drag-drop .drop-target.is-correct .icon-check {
    display: block !important;
}

#quiz-drag-drop .drop-target.is-wrong .icon-x {
    display: block !important;
}

#quiz-drag-drop .draggable-item {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e9eaeb;
    background: #fff;
    cursor: grab;
    text-align: center;
    flex: 1;
    max-width: 156px;
}

#quiz-drag-drop .draggable-item[draggable-item="false"] {
    max-width: 100% !important;
    max-height: 100% !important;
}

#quiz-drag-drop #source-list .draggable-item {
    cursor: grab;
}

#quiz-drag-drop .drop-target .draggable-item {
    cursor: default !important;
}

#quiz-drag-drop .ghost-style {
    opacity: 0.5;
    background: #c8ebfb;
    border-radius: 12px;
}

#quiz-drag-drop .quiz-card.is-correct .state-icon,
#quiz-drag-drop .quiz-card.is-wrong .state-icon {
    display: block !important;
}

#quiz-drag-drop .quiz-card.is-correct .icon-check {
    display: block !important;
}

#quiz-drag-drop .quiz-card.is-wrong .icon-x {
    display: block !important;
}

#quiz-drag-drop .drop-target .draggable-item {
    max-width: 100% !important;
    max-height: 100% !important;
}

#quiz-multiple-answer .quiz-container {
    width: 100%;
    max-width: 800px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#quiz-multiple-answer .quiz-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

#quiz-multiple-answer .quiz-icon {
    width: 24px;
    height: 24px;
}

#quiz-multiple-answer .quiz-label {
    font-weight: 500;
    font-size: 14px;
}

#quiz-multiple-answer .quiz-option {
    position: relative;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e9eaeb;
    background: #fff;
    cursor: pointer;
    color: #0c0c0d;
}

#quiz-multiple-answer .quiz-option .state-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    width: 20px;
    height: 20px;
}

#quiz-multiple-answer .quiz-option .icon-check,
#quiz-multiple-answer .quiz-option .icon-x {
    display: none;
    width: 20px;
    height: 20px;
}

#quiz-multiple-answer .quiz-option.is-selected {
    border: 1px solid #367ec1 !important;
    background: #e9eaeb !important;
}

#quiz-multiple-answer .quiz-option.is-correct {
    border: 1px solid #198754 !important;
    background: rgba(25, 135, 84, 0.12) !important;
}

#quiz-multiple-answer .quiz-option.is-wrong {
    border: 1px solid #dc3545 !important;
    background: rgba(220, 53, 69, 0.12) !important;
}

#quiz-multiple-answer .quiz-option.is-correct .state-icon,
#quiz-multiple-answer .quiz-option.is-wrong .state-icon {
    display: block !important;
}

#quiz-multiple-answer .quiz-option.is-correct .icon-check {
    display: block !important;
}

#quiz-multiple-answer .quiz-option.is-wrong .icon-x {
    display: block !important;
}

#quiz-multiple-answer .quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#quiz-multiple-answer .quiz-option-multi {
    display: flex;
    align-items: center;
    gap: 8px;
}

#quiz-multiple-answer .quiz-checkbox {
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid #e9eaeb;
    border-radius: 4px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 0 0;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        background-size 0.18s ease;
}

#quiz-multiple-answer .quiz-option.is-selected .quiz-checkbox {
    background-color: #2662a2;
    border-color: #2662a2;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 14px 14px;
}

#quiz-multiple-answer .quiz-option .state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(-50%) scale(0.9);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

#quiz-multiple-answer .quiz-option .state-icon svg {
    display: none;
    width: 20px;
    height: 20px;
    opacity: 0;
    transform: scale(0.9);
}

#quiz-multiple-answer .quiz-option.is-correct .quiz-checkbox,
#quiz-multiple-answer .quiz-option.is-wrong .quiz-checkbox {
    display: none;
}

#quiz-multiple-answer .quiz-option.is-correct .state-icon,
#quiz-multiple-answer .quiz-option.is-wrong .state-icon {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

#quiz-multiple-answer .quiz-option.is-correct .icon-check {
    display: block !important;
    color: var(--success);
    animation: quizIconPop 180ms ease-out;
    opacity: 1;
    transform: scale(1);
}

#quiz-multiple-answer .quiz-option.is-wrong .icon-x {
    display: block !important;
    color: var(--danger);
    animation: quizIconPop 180ms ease-out;
    opacity: 1;
    transform: scale(1);
}

@keyframes quizIconPop {
    from {
        opacity: 0;
        transform: scale(0.85);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

#quiz-single-answer .quiz-container {
    width: 100%;
    max-width: 800px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#quiz-single-answer .quiz-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

#quiz-single-answer .quiz-icon {
    width: 24px;
    height: 24px;
}

#quiz-single-answer .quiz-label {
    font-weight: 500;
    font-size: 14px;
}

#quiz-single-answer .quiz-option {
    position: relative;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e9eaeb;
    background: #fff;
    cursor: pointer;
    color: #0c0c0d;
}

#quiz-single-answer .quiz-option .state-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    width: 20px;
    height: 20px;
}

#quiz-single-answer .quiz-option .icon-check,
#quiz-single-answer .quiz-option .icon-x {
    display: none;
    width: 20px;
    height: 20px;
}

#quiz-single-answer .quiz-option.is-selected {
    border: 1px solid #367ec1 !important;
    background: #e9eaeb !important;
}

#quiz-single-answer .quiz-option.is-correct {
    border: 1px solid #198754 !important;
    background: rgba(25, 135, 84, 0.12) !important;
}

#quiz-single-answer .quiz-option.is-wrong {
    border: 1px solid #dc3545 !important;
    background: rgba(220, 53, 69, 0.12) !important;
}

#quiz-single-answer .quiz-option.is-correct .state-icon,
#quiz-single-answer .quiz-option.is-wrong .state-icon {
    display: block !important;
}

#quiz-single-answer .quiz-option.is-correct .icon-check {
    display: block !important;
}

#quiz-single-answer .quiz-option.is-wrong .icon-x {
    display: block !important;
}

#quiz-single-answer .quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#quiz-matching .quiz-container {
    width: 100%;
    max-width: 800px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#quiz-matching .quiz-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

#quiz-matching .quiz-icon {
    width: 24px;
    height: 24px;
}

#quiz-matching .quiz-label {
    font-weight: 500;
    font-size: 14px;
}

#quiz-matching .match-area {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 88px;
}

#quiz-matching .match-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    width: 100%;
    height: 100%;
}

#quiz-matching .match-box {
    position: relative;
    width: 320px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #e9eaeb;
    background: #fff;
    cursor: pointer;
    color: #0c0c0d;
}

@media screen and (max-width: 450px) {
    #quiz-matching .match-box {
        width: 144px;
    }
}

#quiz-matching .match-box .state-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    width: 20px;
    height: 20px;
}

#quiz-matching .match-box .icon-check,
#quiz-matching .match-box .icon-x {
    display: none;
}

#quiz-matching .match-left .state-icon {
    right: -8px;
}

#quiz-matching .match-right .state-icon {
    left: -10px;
}

#quiz-matching .match-node {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
}

#quiz-matching .match-node img {
    width: 24px;
    height: 24px;
}

#quiz-matching .node-right {
    right: -12px;
}

#quiz-matching .node-left {
    left: -12px;
}

#quiz-matching .match-box.is-correct {
    border: 1px solid #198754 !important;
    background: rgba(25, 135, 84, 0.12) !important;
}

#quiz-matching .match-box.is-wrong {
    border: 1px solid #dc3545 !important;
    background: rgba(220, 53, 69, 0.12) !important;
}

#quiz-matching .match-box.is-correct .state-icon,
#quiz-matching .match-box.is-wrong .state-icon {
    display: block !important;
}

#quiz-matching .match-box.is-correct .icon-check {
    display: block !important;
}

#quiz-matching .match-box.is-wrong .icon-x {
    display: block !important;
}

#quiz-intro {
    gap: 32px;
    text-align: center;
}

#quiz-intro .quiz-intro-image {
    width: 160px;
    height: 160px;
}

#quiz-intro .quiz-intro-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

#quiz-intro .quiz-intro-text {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-weight: 400;
    color: #656469;
}

#quiz-intro .quiz-intro-cta {
    width: 180px;
    padding: 6px;
    border-radius: 99999px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background-color: #2662a2;
    box-shadow: 0 -4px 0 0 rgba(10, 13, 18, 0.2) inset;
}

#quiz-intro .quiz-intro-cta-text {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

#quiz-intro .quiz-pill-link {
    text-decoration: none;
    width: 180px;
    padding: 8px 18px;
    text-align: center;
    border-radius: 99999px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background-color: #e9eaeb;
    box-shadow: 0 -4px 0 0 rgba(10, 13, 18, 0.2) inset;
}

#quiz-cross-words {
    --bg: #f7f8fb;
    --card: #ffffff;
    --border: #e9eef5;
    --text: #0f172a;
    --muted: #6b7280;
    --primary: #2662a2;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --purple: #7c3aed;
    display: flex;
    justify-content: center;
    margin-top: 56px;
    font-family: var(--portal-font-teacher, var(--font-ui-active));
    color: var(--text);
}

#quiz-cross-words .crossword-layout {
    width: 800px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
}

@media screen and (max-width: 450px) {
    #quiz-cross-words .crossword-layout {
        width: 100%;
        grid-template-columns: 1fr;
        padding-bottom: 120px;
    }
}

#quiz-cross-words .board-card,
#quiz-cross-words .clues-card {
    border-radius: 14px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
}

#quiz-cross-words .crossword-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    max-width: 500px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fff;
}

#quiz-cross-words .crossword-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#quiz-cross-words .crossword-grid {
    position: absolute;
    inset: 0;
    display: grid;
    gap: 2px;
}

#quiz-cross-words .tile {
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #0f172a;
}

#quiz-cross-words .tile.empty {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid #fff;
}

#quiz-cross-words .tile.ltr {
    border: 2px solid rgba(15, 23, 42, 0.06);
    background: #fff;
}

#quiz-cross-words .tile.ltr-green {
    background: #e6f9ee;
    color: #065f46;
    border-color: #b7f0d1;
}

#quiz-cross-words .tile.ltr-orange {
    background: #fff3e1;
    color: #92400e;
    border-color: #fed7aa;
}

#quiz-cross-words .tile input {
    width: 100%;
    height: 100%;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 1.1rem;
}

#quiz-cross-words .tile input:focus {
    outline: none;
    background-color: #fffbe6;
}

#quiz-cross-words .tile.highlight {
    background: #cfe2ff;
}

#quiz-cross-words .clue-list {
    margin-bottom: 12px;
}

#quiz-cross-words .clue-card {
    background: #ffffff;
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition:
        background 0.2s,
        border-color 0.2s;
}

#quiz-cross-words .clue-card + .clue-card {
    margin-top: 12px;
}

#quiz-cross-words .clue-card .title {
    font-weight: 600;
}

#quiz-cross-words .clue-card .letters {
    margin-top: 6px;
}

#quiz-cross-words .clue-card .letters span {
    display: inline-block;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 6px;
    background: #f3f4f6;
    margin-right: 6px;
    font-weight: 600;
}

#quiz-cross-words .clue-green {
    background: #eaf9f1;
    border-color: #34d399;
}

#quiz-cross-words .clue-orange {
    background: #fff3e0;
    border-color: #f59e0b;
}

#quiz-cross-words .clues-panel {
    max-height: 520px;
    overflow: auto;
    padding-right: 6px;
}

#quiz-cross-words .page-actions {
    display: flex;
    gap: 12px;
}

#quiz-cross-words .btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

#quiz-cross-words .btn-primary:hover,
#quiz-cross-words .btn-primary:focus {
    background-color: #1f5085 !important;
    border-color: #1f5085 !important;
}

#quiz-cross-words .btn-outline-secondary {
    border-color: var(--border) !important;
    color: var(--muted) !important;
}

#quiz-cross-words .btn-outline-secondary:hover {
    background: #f9fafb !important;
}

@media (min-width: 1400px) {
    #quiz-cross-words .crossword-layout {
        grid-template-columns: 1.3fr 1fr;
    }
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px);
    }

    50% {
        transform: translateX(3px);
    }

    75% {
        transform: translateX(-3px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes pipBounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

    100% {
        transform: scale(1);
    }
}

.login-card {
    width: 100%;
    max-width: 500px;
    min-height: 500px;
}

#phone-container .iti {
    direction: ltr !important;
    width: 100%;
}

/* Move flag + country code to the LEFT */
#phone-container .iti__country-container {
    left: 0 !important;
    right: auto !important;
    direction: ltr !important;
}

#phone-container .iti__selected-country {
    direction: ltr !important;
    flex-direction: row !important;
}

/* Keep phone number after the country code */
#phone-container .iti input {
    direction: ltr !important;
    text-align: left !important;
    padding-left: 74px !important;
    padding-right: 12px !important;
}

@media screen and (max-width: 450px) {
    /* Ensure the register card itself is positioned at the top */
    #registration-page {
        position: relative;
        top: 0 !important;
    }

    /* When there's no right column (register), keep left column in normal flow */
    .auth-grid-container#reg-page:not(:has(.login-right)) .login-left {
        position: static !important;
        top: auto !important;
        padding: 0 !important;
    }

    /* Hide the mobile overlay on registration page only */
    .auth-grid-container#reg-page:not(:has(.login-right))::after {
        content: none !important;
    }
}

.auth-grid-container #phone-container .iti,
#registration-page #phone-container .iti {
    width: 100%;
}

.verify-box {
    width: 100%;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.verify-btn {
    display: flex;
    width: 240px;
    padding: 12px 18px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: #2662a2;
    box-shadow: inset 0 -4px 0 0 rgba(10, 13, 18, 0.2);
    color: #fff;
    font-weight: 500;
    transition: background 0.2s ease;
}

.verify-btn:hover {
    background: #1f4d80;
}

.btn-custom {
    display: flex;
    padding: 12px 18px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: var(--main-color);
    box-shadow: inset 0 -4px 0 0 rgba(10, 13, 18, 0.2);
    color: #fff;
    font-weight: 500;
    transition: background 0.2s ease;
}

.btn-custom:hover {
    background: #1a4a7d;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #ced4da;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 10px 0;
    max-height: 44px;
    transition: background-color 0.2s ease;
}

.social-btn:hover {
    background-color: #fff;
    border-color: #ced4da;
    color: inherit;
}

.or-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #6c757d;
    font-size: 14px;
    margin: 20px 0;
}

.or-separator::before,
.or-separator::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #dee2e6;
    margin: 0 10px;
}

.create-btn {
    color: var(--main-color);
    border: 1px solid #579ad9;
    border-radius: 5px;
    padding: 6px 16px;
    font-size: 14px;
}

.create-btn:hover {
    background-color: #579ad9;
    color: white;
}

.rocket-box {
    border: 1px solid #e9eaeb !important;
    background-color: rgba(255, 255, 255, 0.9490196078);
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
}

.rocket-box .rocket-content {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rocket-box .rocket-content .small-text {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

.rocket-box .rocket-content .main-text {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin: 4px 0 8px;
    white-space: nowrap;
}

#complete-account-page .input-with-icon {
    position: relative;
}

#complete-account-page .input-with-icon .input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
    pointer-events: none;
}

#complete-account-page .input-with-icon input.form-control {
    padding-left: 2.25rem !important;
}

#complete-account-page .input-with-icon i.fa-envelope {
    font-size: 13px;
}

#complete-account-page .input-with-icon i.fa-at {
    font-size: 14px;
}

#complete-account-page .form-control:focus + .input-icon {
    color: var(--main-color);
}

@media screen and (max-width: 450px) {
    .navbar {
        display: none !important;
    }
}

.navbar-parent {
    position: relative;
}

@media screen and (max-width: 450px) {
    .navbar-parent {
        padding-top: 18px !important;
    }

    .navbar-parent .nav-container {
        align-items: center !important;
        justify-content: center !important;
        gap: unset !important;
    }

    .navbar-parent .nav-container .logo {
        position: relative;
        z-index: 1;
    }

    .navbar-parent .dropdown {
        display: none;
    }

    .navbar-parent .header {
        width: 100%;
    }

    .navbar-parent .header .sec_container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
    }

    .navbar-parent .header .sec_container .title {
        align-self: center;
    }

    .navbar-parent .header .sec_container .icon {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .navbar-parent .header .bg {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
    }

    .navbar-parent .header .bg img {
        width: 100%;
    }
}

@media screen and (min-width: 450px) {
    .navbar-parent .logo,
    .navbar-parent .header {
        display: none;
    }
}

.auth-mobile-navbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    position: relative;
    z-index: -1;
}

@media (min-width: 450px) {
    .auth-mobile-navbar {
        display: none !important;
    }
}

.auth-mobile-navbar .navbar-logo {
    height: 28px;
    width: auto;
    display: block;
}

.auth-mobile-navbar .locale-text {
    font-size: 14px;
    color: var(--text);
}

.auth-mobile-navbar .locale-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    color: var(--text);
}

/* Multi-select chips style (Used in Teachers, Announcements, etc.) */
.td-filter-field {
    margin-bottom: 20px;
}

.td-filter-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.td-filter-input {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
    min-height: 44px;
}

.td-filter-input-icon {
    color: #9ca3af;
    display: inline-flex;
    width: 18px;
    justify-content: center;
}

.td-filter-input-chevron {
    color: #9ca3af;
    margin-left: auto;
}

.td-filter-real-input {
    border: 0;
    outline: none;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    background: transparent;
}

.td-filter-real-input::placeholder {
    color: #6b7280;
    font-weight: 600;
}

.td-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.td-filter-chips:not(:empty) {
    margin-top: 10px;
}

.td-filter-chip-input {
    min-width: 120px;
    flex: 1;
}

.td-filter-multibox {
    position: relative;
}

.td-filter-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.1);
    padding: 6px;
    max-height: 220px;
    overflow: auto;
    z-index: 100;
}

.td-filter-option {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 10px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
}

.td-filter-option:hover {
    background: #f3f4f6;
}

.td-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #111827;
}

.td-chip button {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #9ca3af;
    font-weight: 900;
    line-height: 1;
    padding: 0;
    font-size: 14px;
}

.td-chip button:hover {
    color: #ef4444;
}

/* Individual learning portal motion */
#roadmap-static.learning-motion-page {
    --learning-motion-fast: 180ms;
    --learning-motion-base: 320ms;
    --learning-motion-reveal: 520ms;
    --learning-motion-progress: 760ms;
    --learning-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --learning-motion-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --learning-motion-lift: -3px;
}

#roadmap-static.learning-motion-page .roadmap-header,
#roadmap-static.learning-motion-page .roadmap-empty-state,
#roadmap-static.learning-motion-page .courses-motion-toolbar,
#roadmap-static.learning-motion-page .courses-empty-state,
#roadmap-static.learning-motion-page .courses-pagination {
    will-change: opacity, transform;
}

#roadmap-static.learning-motion-page.learning-motion-ready .roadmap-header,
#roadmap-static.learning-motion-page.learning-motion-ready .roadmap-empty-state,
#roadmap-static.learning-motion-page.learning-motion-ready
    .courses-motion-toolbar,
#roadmap-static.learning-motion-page.learning-motion-ready .courses-empty-state,
#roadmap-static.learning-motion-page.learning-motion-ready .courses-pagination {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
}

#roadmap-static.learning-motion-page.learning-motion-ready.is-learning-entered
    .roadmap-header,
#roadmap-static.learning-motion-page.learning-motion-ready.is-learning-entered
    .roadmap-empty-state,
#roadmap-static.learning-motion-page.learning-motion-ready.is-learning-entered
    .courses-motion-toolbar,
#roadmap-static.learning-motion-page.learning-motion-ready.is-learning-entered
    .courses-empty-state,
#roadmap-static.learning-motion-page.learning-motion-ready.is-learning-entered
    .courses-pagination {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity var(--learning-motion-reveal) var(--learning-motion-ease-out),
        transform var(--learning-motion-reveal) var(--learning-motion-ease-out);
}

#roadmap-static.learning-motion-page.learning-motion-ready.is-learning-entered
    .courses-motion-toolbar {
    transition-delay: 90ms;
}

#roadmap-static.learning-motion-page.learning-motion-ready.is-learning-entered
    .roadmap-empty-state,
#roadmap-static.learning-motion-page.learning-motion-ready.is-learning-entered
    .courses-empty-state {
    transition-delay: 140ms;
}

#roadmap-static.learning-motion-page.learning-motion-ready.is-learning-entered
    .courses-pagination {
    transition-delay: 180ms;
}

#roadmap-static.learning-motion-page .learning-nav-surface,
#roadmap-static.learning-motion-page .learning-nav-surface .tab-btn {
    transition:
        transform var(--learning-motion-fast) var(--learning-motion-ease-soft),
        box-shadow var(--learning-motion-fast) ease,
        background-color var(--learning-motion-fast) ease,
        color var(--learning-motion-fast) ease;
}

#roadmap-static.learning-motion-page .learning-nav-surface .tab-btn:active {
    transform: translate3d(0, 1px, 0) scale(0.985);
    transition-duration: 90ms;
}

#roadmap-static.learning-motion-page
    .learning-nav-surface
    .tab-btn:focus-visible,
#roadmap-static.learning-motion-page .course-action a:focus-visible,
#roadmap-static.learning-motion-page .course-card-footer a:focus-visible,
#roadmap-static.learning-motion-page .course-filter-btn:focus-visible,
#roadmap-static.learning-motion-page #course-search-input:focus-visible {
    outline: 3px solid rgba(0, 134, 201, 0.22);
    outline-offset: 3px;
}

/* Roadmap journey motion */
#roadmap-static.roadmap-motion-page .roadmap-item {
    transform-origin: center top;
    will-change: opacity, transform;
}

#roadmap-static.roadmap-motion-page.learning-motion-ready
    .roadmap-item:not(.is-motion-revealed) {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.992);
}

#roadmap-static.roadmap-motion-page.learning-motion-ready
    .roadmap-item.is-motion-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        opacity var(--learning-motion-reveal) var(--learning-motion-ease-out)
            var(--learning-reveal-delay, 0ms),
        transform var(--learning-motion-reveal) var(--learning-motion-ease-out)
            var(--learning-reveal-delay, 0ms);
}

#roadmap-static.roadmap-motion-page .roadmap-step-icon,
#roadmap-static.roadmap-motion-page .badge-status {
    transform-origin: center;
}

#roadmap-static.roadmap-motion-page.learning-motion-ready
    .roadmap-item:not(.is-motion-revealed)
    .roadmap-step-icon,
#roadmap-static.roadmap-motion-page.learning-motion-ready
    .roadmap-item:not(.is-motion-revealed)
    .badge-status {
    opacity: 0;
    transform: translate3d(0, 7px, 0) scale(0.9);
}

#roadmap-static.roadmap-motion-page.learning-motion-ready
    .roadmap-item.is-motion-revealed
    .roadmap-step-icon,
#roadmap-static.roadmap-motion-page.learning-motion-ready
    .roadmap-item.is-motion-revealed
    .badge-status {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        opacity 440ms var(--learning-motion-ease-out)
            calc(var(--learning-reveal-delay, 0ms) + 80ms),
        transform 440ms var(--learning-motion-ease-soft)
            calc(var(--learning-reveal-delay, 0ms) + 80ms);
}

#roadmap-static.roadmap-motion-page .roadmap-step-icon::after {
    position: absolute;
    inset: 5px;
    border: 2px solid rgba(0, 134, 201, 0.26);
    border-radius: 50%;
    content: "";
    opacity: 0;
    pointer-events: none;
}

#roadmap-static.roadmap-motion-page.learning-motion-ready
    .roadmap-item.is-current.is-motion-revealed
    .roadmap-step-icon::after {
    animation: learningCurrentStepHalo 1.35s var(--learning-motion-ease-out)
        calc(var(--learning-reveal-delay, 0ms) + 360ms) 2;
}

#roadmap-static.roadmap-motion-page .roadmap-step-icon-line {
    clip-path: inset(0 0 0 0);
}

#roadmap-static.roadmap-motion-page.learning-motion-ready
    .roadmap-item:not(.is-motion-revealed)
    .roadmap-step-icon-line {
    clip-path: inset(0 0 100% 0);
    opacity: 0.35;
}

#roadmap-static.roadmap-motion-page.learning-motion-ready
    .roadmap-item.is-motion-revealed
    .roadmap-step-icon-line {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transition:
        clip-path 620ms var(--learning-motion-ease-soft)
            calc(var(--learning-reveal-delay, 0ms) + 240ms),
        opacity 300ms ease calc(var(--learning-reveal-delay, 0ms) + 240ms);
}

#roadmap-static.roadmap-motion-page .progress-bar,
#roadmap-static.courses-motion-page .progress-bar {
    transform: scaleX(1);
    transform-origin: left center;
    will-change: transform;
}

[dir="rtl"] #roadmap-static.roadmap-motion-page .progress-bar,
[dir="rtl"] #roadmap-static.courses-motion-page .progress-bar {
    transform-origin: right center;
}
[dir="rtl"] #roadmap-static .pagination {
    padding: 0 !important;
    flex-direction: row-reverse !important;
}

[dir="rtl"] .back-btn {
    flex-direction: row-reverse !important;
}

.phone-ltr-wrapper .iti {
    direction: ltr !important;
    width: 100%;
}

.phone-ltr-wrapper .iti__country-container {
    left: 0 !important;
    right: auto !important;
    direction: ltr !important;
}

.phone-ltr-wrapper .iti__selected-country {
    direction: ltr !important;
    flex-direction: row !important;
}

.phone-ltr-wrapper #phone_number {
    direction: ltr !important;
    text-align: left !important;
    padding-left: 90px !important;
    padding-right: 70px !important;
}

#roadmap-static.roadmap-motion-page.learning-motion-ready
    .roadmap-item:not(.is-motion-revealed)
    .progress-bar,
#roadmap-static.courses-motion-page.learning-motion-ready
    .course-motion-item:not(.is-motion-revealed)
    .progress-bar {
    transform: scaleX(0);
}

#roadmap-static.roadmap-motion-page.learning-motion-ready
    .roadmap-item.is-motion-revealed
    .progress-bar,
#roadmap-static.courses-motion-page.learning-motion-ready
    .course-motion-item.is-motion-revealed
    .progress-bar {
    transform: scaleX(1);
    transition: transform var(--learning-motion-progress)
        var(--learning-motion-ease-soft)
        calc(var(--learning-reveal-delay, 0ms) + 190ms);
}

#roadmap-static.roadmap-motion-page .course-card,
#roadmap-static.roadmap-motion-page .course-thumb,
#roadmap-static.roadmap-motion-page .course-action .btn,
#roadmap-static.roadmap-motion-page .course-action a {
    transition:
        transform var(--learning-motion-base) var(--learning-motion-ease-soft),
        box-shadow var(--learning-motion-base) var(--learning-motion-ease-soft),
        background-color var(--learning-motion-fast) ease,
        border-color var(--learning-motion-fast) ease,
        color var(--learning-motion-fast) ease;
}

#roadmap-static.roadmap-motion-page .course-thumb {
    transform-origin: center;
}

#roadmap-static.roadmap-motion-page .course-action .btn:not(.disabled):active {
    transform: translate3d(0, 1px, 0) scale(0.985);
    transition-duration: 90ms;
}

/* Courses catalog motion */
#roadmap-static.courses-motion-page .course-motion-item {
    transform-origin: center top;
    will-change: opacity, transform;
}

#roadmap-static.courses-motion-page.learning-motion-ready
    .course-motion-item:not(.is-motion-revealed) {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
}

#roadmap-static.courses-motion-page.learning-motion-ready
    .course-motion-item.is-motion-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        opacity var(--learning-motion-reveal) var(--learning-motion-ease-out)
            var(--learning-reveal-delay, 0ms),
        transform var(--learning-motion-reveal) var(--learning-motion-ease-out)
            var(--learning-reveal-delay, 0ms);
}

#roadmap-static.courses-motion-page .course-box,
#roadmap-static.courses-motion-page .card-img-top,
#roadmap-static.courses-motion-page .badge-status,
#roadmap-static.courses-motion-page .progress-avatar-indicator,
#roadmap-static.courses-motion-page .course-card-footer a,
#roadmap-static.courses-motion-page .search-input-wrapper .input-group,
#roadmap-static.courses-motion-page .course-filter-btn {
    transition:
        transform var(--learning-motion-base) var(--learning-motion-ease-soft),
        opacity var(--learning-motion-base) var(--learning-motion-ease-out),
        box-shadow var(--learning-motion-base) var(--learning-motion-ease-soft),
        background-color var(--learning-motion-fast) ease,
        border-color var(--learning-motion-fast) ease,
        color var(--learning-motion-fast) ease;
}

#roadmap-static.courses-motion-page .course-box {
    transform: translate3d(0, 0, 0);
}

#roadmap-static.courses-motion-page .card-img-top {
    transform-origin: center;
}

#roadmap-static.courses-motion-page.learning-motion-ready
    .course-motion-item:not(.is-motion-revealed)
    .badge-status {
    opacity: 0;
    transform: translate3d(0, -6px, 0) scale(0.9);
}

#roadmap-static.courses-motion-page.learning-motion-ready
    .course-motion-item.is-motion-revealed
    .badge-status {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 160ms);
}

#roadmap-static.courses-motion-page .progress-avatar-indicator {
    transform: translate(-50%, -50%) scale(1);
}

#roadmap-static.courses-motion-page.learning-motion-ready
    .course-motion-item:not(.is-motion-revealed)
    .progress-avatar-indicator {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
}

#roadmap-static.courses-motion-page.learning-motion-ready
    .course-motion-item.is-motion-revealed
    .progress-avatar-indicator {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 430ms);
}

#roadmap-static.courses-motion-page .course-card-footer a:active,
#roadmap-static.courses-motion-page .course-filter-btn:active {
    transform: translate3d(0, 1px, 0) scale(0.985);
    transition-duration: 90ms;
}

#roadmap-static.courses-motion-page .filter-dropdown-menu.show {
    animation: learningDropdownEnter 180ms var(--learning-motion-ease-out) both;
    transform-origin: top center;
}

@media (hover: hover) and (pointer: fine) {
    #roadmap-static.learning-motion-page .learning-nav-surface .tab-btn:hover,
    #roadmap-static.learning-motion-page
        .learning-nav-surface
        .tab-btn:focus-visible,
    #roadmap-static.roadmap-motion-page
        .course-action
        .btn:not(.disabled):hover,
    #roadmap-static.roadmap-motion-page
        .course-action
        .btn:not(.disabled):focus-visible,
    #roadmap-static.courses-motion-page .course-card-footer a:hover,
    #roadmap-static.courses-motion-page .course-card-footer a:focus-visible,
    #roadmap-static.courses-motion-page .course-filter-btn:hover,
    #roadmap-static.courses-motion-page .course-filter-btn:focus-visible {
        transform: translate3d(0, -2px, 0);
    }

    #roadmap-static.roadmap-motion-page
        .roadmap-item:not(.is-locked)
        .course-card:hover,
    #roadmap-static.roadmap-motion-page
        .roadmap-item:not(.is-locked)
        .course-card:focus-within {
        transform: translate3d(0, var(--learning-motion-lift), 0);
    }

    #roadmap-static.roadmap-motion-page
        .roadmap-item:not(.is-locked)
        .course-card:hover
        .course-thumb,
    #roadmap-static.roadmap-motion-page
        .roadmap-item:not(.is-locked)
        .course-card:focus-within
        .course-thumb {
        transform: scale(1.015);
        box-shadow: 0 12px 24px rgba(16, 24, 40, 0.1);
    }

    #roadmap-static.roadmap-motion-page .course-action > a:not(.btn):hover,
    #roadmap-static.roadmap-motion-page
        .course-action
        > a:not(.btn):focus-visible {
        color: #344054 !important;
        transform: translate3d(0, -1px, 0);
    }

    #roadmap-static.courses-motion-page .course-box:hover,
    #roadmap-static.courses-motion-page .course-box:focus-within {
        transform: translate3d(0, -4px, 0);
        box-shadow:
            0 20px 24px -4px rgba(16, 24, 40, 0.08),
            0 8px 8px -4px rgba(16, 24, 40, 0.03);
    }

    #roadmap-static.courses-motion-page .course-box:hover .card-img-top,
    #roadmap-static.courses-motion-page .course-box:focus-within .card-img-top {
        transform: scale(1.025);
    }

    #roadmap-static.courses-motion-page
        .search-input-wrapper
        .input-group:hover,
    #roadmap-static.courses-motion-page
        .search-input-wrapper
        .input-group:focus-within {
        transform: translate3d(0, -2px, 0);
        box-shadow: 0 8px 18px rgba(16, 24, 40, 0.08);
    }
}

@media screen and (max-width: 450px) {
    #roadmap-static.roadmap-motion-page.learning-motion-ready
        .roadmap-item:not(.is-motion-revealed),
    #roadmap-static.courses-motion-page.learning-motion-ready
        .course-motion-item:not(.is-motion-revealed) {
        transform: translate3d(0, 10px, 0) scale(0.996);
    }
}

@media (prefers-reduced-motion: reduce) {
    #roadmap-static.learning-motion-page *,
    #roadmap-static.learning-motion-page *::before,
    #roadmap-static.learning-motion-page *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }

    #roadmap-static.learning-motion-page .roadmap-header,
    #roadmap-static.learning-motion-page .roadmap-empty-state,
    #roadmap-static.learning-motion-page .courses-motion-toolbar,
    #roadmap-static.learning-motion-page .courses-empty-state,
    #roadmap-static.learning-motion-page .courses-pagination,
    #roadmap-static.learning-motion-page .roadmap-item,
    #roadmap-static.learning-motion-page .course-motion-item,
    #roadmap-static.learning-motion-page .roadmap-step-icon,
    #roadmap-static.learning-motion-page .badge-status,
    #roadmap-static.learning-motion-page .progress-bar,
    #roadmap-static.learning-motion-page .roadmap-step-icon-line,
    #roadmap-static.learning-motion-page .course-card,
    #roadmap-static.learning-motion-page .course-box,
    #roadmap-static.learning-motion-page .course-thumb,
    #roadmap-static.learning-motion-page .card-img-top,
    #roadmap-static.learning-motion-page .course-action a,
    #roadmap-static.learning-motion-page .course-card-footer a,
    #roadmap-static.learning-motion-page .learning-nav-surface .tab-btn {
        clip-path: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@keyframes learningCurrentStepHalo {
    0% {
        opacity: 0;
        transform: scale(0.82);
    }
    32% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        transform: scale(1.42);
    }
}

@keyframes learningDropdownEnter {
    from {
        opacity: 0;
        transform: translate3d(0, -6px, 0) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Individual home motion */
.sp-explore-all {
    color: #0a1e3f;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.sp-explore-all:hover,
.sp-explore-all:focus-visible {
    text-decoration: underline;
}

#home-page.home-motion-page {
    --learning-motion-fast: 180ms;
    --learning-motion-base: 320ms;
    --learning-motion-reveal: 520ms;
    --learning-motion-progress: 760ms;
    --learning-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --learning-motion-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --learning-motion-lift: -4px;
}

#home-page.home-motion-page [data-learning-motion-item] {
    transform-origin: center top;
    will-change: opacity, transform;
}

#home-page.home-motion-page.learning-motion-ready
    [data-learning-motion-item]:not(.is-motion-revealed) {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.992);
}

#home-page.home-motion-page.learning-motion-ready
    [data-learning-motion-item].is-motion-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        opacity var(--learning-motion-reveal) var(--learning-motion-ease-out)
            var(--learning-reveal-delay, 0ms),
        transform var(--learning-motion-reveal) var(--learning-motion-ease-out)
            var(--learning-reveal-delay, 0ms);
}

#home-page.home-motion-page .continue-card,
#home-page.home-motion-page .continue-card .avatar,
#home-page.home-motion-page .btn-resume,
#home-page.home-motion-page .courses-slider .course,
#home-page.home-motion-page .courses-slider .course .card-img-top,
#home-page.home-motion-page .courses-slider .slider-btn,
#home-page.home-motion-page .home-motion-rail .card,
#home-page.home-motion-page .streak-week .wk,
#home-page.home-motion-page .sp-explore-all {
    transition:
        opacity var(--learning-motion-base) var(--learning-motion-ease-out),
        transform var(--learning-motion-base) var(--learning-motion-ease-soft),
        box-shadow var(--learning-motion-base) var(--learning-motion-ease-soft),
        border-color var(--learning-motion-fast) ease,
        background-color var(--learning-motion-fast) ease,
        color var(--learning-motion-fast) ease;
}

#home-page.home-motion-page .progress-bar {
    transform: scaleX(1);
    transform-origin: left center;
    will-change: transform;
}

[dir="rtl"] #home-page.home-motion-page .progress-bar {
    transform-origin: right center;
}

#home-page.home-motion-page.learning-motion-ready
    [data-learning-motion-item]:not(.is-motion-revealed)
    .progress-bar {
    transform: scaleX(0);
}

#home-page.home-motion-page.learning-motion-ready
    [data-learning-motion-item].is-motion-revealed
    .progress-bar {
    transform: scaleX(1);
    transition: transform var(--learning-motion-progress)
        var(--learning-motion-ease-soft)
        calc(var(--learning-reveal-delay, 0ms) + 190ms);
}

#home-page.home-motion-page.learning-motion-ready
    .continue-card:not(.is-motion-revealed)
    .avatar {
    opacity: 0;
    transform: scale(0.88);
}

#home-page.home-motion-page.learning-motion-ready
    .continue-card.is-motion-revealed
    .avatar {
    opacity: 1;
    transform: scale(1);
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 120ms);
}

#home-page.home-motion-page.learning-motion-ready
    .home-courses-section:not(.is-motion-revealed)
    .course {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.98);
}

#home-page.home-motion-page.learning-motion-ready
    .home-courses-section.is-motion-revealed
    .course {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

#home-page.home-motion-page.learning-motion-ready
    .home-courses-section.is-motion-revealed
    .course:nth-child(1) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 100ms);
}

#home-page.home-motion-page.learning-motion-ready
    .home-courses-section.is-motion-revealed
    .course:nth-child(2) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 170ms);
}

#home-page.home-motion-page.learning-motion-ready
    .home-courses-section.is-motion-revealed
    .course:nth-child(3) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 240ms);
}

#home-page.home-motion-page.learning-motion-ready
    .home-motion-rail:not(.is-motion-revealed)
    .streak-week
    .wk {
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(0.9);
}

#home-page.home-motion-page.learning-motion-ready
    .home-motion-rail.is-motion-revealed
    .streak-week
    .wk {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

#home-page.home-motion-page.learning-motion-ready
    .home-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(1) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 100ms);
}

#home-page.home-motion-page.learning-motion-ready
    .home-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(2) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 140ms);
}

#home-page.home-motion-page.learning-motion-ready
    .home-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(3) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 180ms);
}

#home-page.home-motion-page.learning-motion-ready
    .home-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(4) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 220ms);
}

#home-page.home-motion-page.learning-motion-ready
    .home-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(5) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 260ms);
}

#home-page.home-motion-page.learning-motion-ready
    .home-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(6) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 300ms);
}

#home-page.home-motion-page.learning-motion-ready
    .home-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(7) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 340ms);
}

#home-page.home-motion-page .btn-resume:focus-visible,
#home-page.home-motion-page .courses-slider .slider-btn:focus-visible,
#home-page.home-motion-page .courses-slider a:focus-visible,
#home-page.home-motion-page .sp-explore-all:focus-visible {
    outline: 3px solid rgba(0, 134, 201, 0.22);
    outline-offset: 3px;
}

#home-page.home-motion-page .btn-resume:active {
    transform: translate3d(0, 1px, 0) scale(0.985);
    transition-duration: 90ms;
}

#home-page.home-motion-page .courses-slider .slider-btn:active {
    transform: translateY(-50%) scale(0.92);
    transition-duration: 90ms;
}

@media (hover: hover) and (pointer: fine) {
    #home-page.home-motion-page .continue-card:hover,
    #home-page.home-motion-page .continue-card:focus-within,
    #home-page.home-motion-page .home-motion-rail .card:hover,
    #home-page.home-motion-page .home-motion-rail .card:focus-within {
        transform: translate3d(0, var(--learning-motion-lift), 0);
        box-shadow: 0 18px 30px rgba(16, 24, 40, 0.09) !important;
    }

    #home-page.home-motion-page .continue-card:hover .avatar,
    #home-page.home-motion-page .continue-card:focus-within .avatar {
        transform: scale(1.035);
    }

    #home-page.home-motion-page .btn-resume:hover,
    #home-page.home-motion-page .btn-resume:focus-visible {
        transform: translate3d(0, -2px, 0);
    }

    #home-page.home-motion-page .courses-slider .course:hover,
    #home-page.home-motion-page .courses-slider .course:focus-within {
        transform: translate3d(0, -4px, 0);
        box-shadow: 0 18px 30px rgba(16, 24, 40, 0.09) !important;
    }

    #home-page.home-motion-page .courses-slider .course:hover .card-img-top,
    #home-page.home-motion-page
        .courses-slider
        .course:focus-within
        .card-img-top {
        transform: scale(1.025);
    }

    #home-page.home-motion-page .courses-slider .slider-btn:hover,
    #home-page.home-motion-page .courses-slider .slider-btn:focus-visible {
        transform: translateY(calc(-50% - 2px));
        box-shadow: 0 10px 20px rgba(16, 24, 40, 0.12) !important;
    }
}

@media screen and (max-width: 450px) {
    #home-page.home-motion-page.learning-motion-ready
        [data-learning-motion-item]:not(.is-motion-revealed) {
        transform: translate3d(0, 10px, 0) scale(0.996);
    }
}

@media (prefers-reduced-motion: reduce) {
    #home-page.home-motion-page *,
    #home-page.home-motion-page *::before,
    #home-page.home-motion-page *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }

    #home-page.home-motion-page [data-learning-motion-item],
    #home-page.home-motion-page .continue-card,
    #home-page.home-motion-page .continue-card .avatar,
    #home-page.home-motion-page .btn-resume,
    #home-page.home-motion-page .progress-bar,
    #home-page.home-motion-page .courses-slider .course,
    #home-page.home-motion-page .courses-slider .course .card-img-top,
    #home-page.home-motion-page .home-motion-rail .card,
    #home-page.home-motion-page .streak-week .wk,
    #home-page.home-motion-page .wave {
        opacity: 1 !important;
        transform: none !important;
    }

    #home-page.home-motion-page .courses-slider .slider-btn {
        transform: translateY(-50%) !important;
    }
}

/* Achievements motion */
#achievements-page.achievements-motion-page {
    --learning-motion-fast: 180ms;
    --learning-motion-base: 320ms;
    --learning-motion-reveal: 520ms;
    --learning-motion-progress: 760ms;
    --learning-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --learning-motion-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --learning-motion-lift: -4px;
}

#achievements-page.achievements-motion-page [data-learning-motion-item] {
    transform-origin: center top;
    will-change: opacity, transform;
}

#achievements-page.achievements-motion-page.learning-motion-ready
    [data-learning-motion-item]:not(.is-motion-revealed) {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.992);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    [data-learning-motion-item].is-motion-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        opacity var(--learning-motion-reveal) var(--learning-motion-ease-out)
            var(--learning-reveal-delay, 0ms),
        transform var(--learning-motion-reveal) var(--learning-motion-ease-out)
            var(--learning-reveal-delay, 0ms);
}

#achievements-page.achievements-motion-page .badge-card,
#achievements-page.achievements-motion-page .badge-card img,
#achievements-page.achievements-motion-page .certificate-widget-card,
#achievements-page.achievements-motion-page
    .certificate-widget-card
    .card-img-main,
#achievements-page.achievements-motion-page .achievements-motion-rail .card,
#achievements-page.achievements-motion-page .achievements-motion-rail .btn,
#achievements-page.achievements-motion-page .streak-week .wk,
#achievements-page.achievements-motion-page .certificate-widget-card .btn {
    transition:
        opacity var(--learning-motion-base) var(--learning-motion-ease-out),
        transform var(--learning-motion-base) var(--learning-motion-ease-soft),
        box-shadow var(--learning-motion-base) var(--learning-motion-ease-soft),
        border-color var(--learning-motion-fast) ease,
        background-color var(--learning-motion-fast) ease,
        color var(--learning-motion-fast) ease;
}

#achievements-page.achievements-motion-page .progress-bar {
    transform: scaleX(1);
    transform-origin: left center;
    will-change: transform;
}

[dir="rtl"] #achievements-page.achievements-motion-page .progress-bar {
    transform-origin: right center;
}

#achievements-page.achievements-motion-page.learning-motion-ready
    [data-learning-motion-item]:not(.is-motion-revealed)
    .progress-bar {
    transform: scaleX(0);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    [data-learning-motion-item].is-motion-revealed
    .progress-bar {
    transform: scaleX(1);
    transition: transform var(--learning-motion-progress)
        var(--learning-motion-ease-soft)
        calc(var(--learning-reveal-delay, 0ms) + 190ms);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-skills:not(.is-motion-revealed)
    [data-achievement-badge],
#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-certificates:not(.is-motion-revealed)
    .certificate-motion-card {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.96);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-skills.is-motion-revealed
    [data-achievement-badge],
#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-certificates.is-motion-revealed
    .certificate-motion-card {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        opacity 440ms var(--learning-motion-ease-out),
        transform 440ms var(--learning-motion-ease-soft);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-skills.is-motion-revealed
    [data-achievement-badge]:nth-child(1),
#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-certificates.is-motion-revealed
    .certificate-motion-card:nth-child(1) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 90ms);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-skills.is-motion-revealed
    [data-achievement-badge]:nth-child(2),
#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-certificates.is-motion-revealed
    .certificate-motion-card:nth-child(2) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 150ms);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-skills.is-motion-revealed
    [data-achievement-badge]:nth-child(3),
#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-certificates.is-motion-revealed
    .certificate-motion-card:nth-child(3) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 210ms);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-skills.is-motion-revealed
    [data-achievement-badge]:nth-child(4),
#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-certificates.is-motion-revealed
    .certificate-motion-card:nth-child(4) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 270ms);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-skills.is-motion-revealed
    [data-achievement-badge]:nth-child(n + 5),
#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-certificates.is-motion-revealed
    .certificate-motion-card:nth-child(n + 5) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 330ms);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-motion-rail:not(.is-motion-revealed)
    .streak-week
    .wk {
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(0.9);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-motion-rail.is-motion-revealed
    .streak-week
    .wk {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(1) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 100ms);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(2) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 140ms);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(3) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 180ms);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(4) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 220ms);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(5) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 260ms);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(6) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 300ms);
}

#achievements-page.achievements-motion-page.learning-motion-ready
    .achievements-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(7) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 340ms);
}

#achievements-page.achievements-motion-page .badge-card:focus-visible,
#achievements-page.achievements-motion-page
    .certificate-widget-card
    .btn:focus-visible,
#achievements-page.achievements-motion-page
    .achievements-motion-rail
    .btn:focus-visible {
    outline: 3px solid rgba(0, 134, 201, 0.22);
    outline-offset: 3px;
}

#achievements-page.achievements-motion-page
    .certificate-widget-card
    .btn:active,
#achievements-page.achievements-motion-page
    .achievements-motion-rail
    .btn:active {
    transform: translate3d(0, 1px, 0) scale(0.985);
    transition-duration: 90ms;
}

.certificates-widget .certificate-widget-card .btn-link {
    color: #535862;
    font-size: 14px;
    font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
    #achievements-page.achievements-motion-page .badge-card:hover,
    #achievements-page.achievements-motion-page .badge-card:focus-visible {
        transform: translate3d(0, -4px, 0) scale(1.02);
        box-shadow: 0 16px 28px rgba(16, 24, 40, 0.11) !important;
    }

    #achievements-page.achievements-motion-page .certificate-widget-card:hover,
    #achievements-page.achievements-motion-page
        .certificate-widget-card:focus-within,
    #achievements-page.achievements-motion-page
        .achievements-motion-rail
        .card:hover,
    #achievements-page.achievements-motion-page
        .achievements-motion-rail
        .card:focus-within {
        transform: translate3d(0, var(--learning-motion-lift), 0);
        box-shadow: 0 18px 30px rgba(16, 24, 40, 0.09) !important;
    }

    #achievements-page.achievements-motion-page
        .certificate-widget-card:hover
        .card-img-main,
    #achievements-page.achievements-motion-page
        .certificate-widget-card:focus-within
        .card-img-main {
        transform: scale(1.02);
    }

    #achievements-page.achievements-motion-page
        .certificate-widget-card
        .btn:hover,
    #achievements-page.achievements-motion-page
        .certificate-widget-card
        .btn:focus-visible,
    #achievements-page.achievements-motion-page
        .achievements-motion-rail
        .btn:hover,
    #achievements-page.achievements-motion-page
        .achievements-motion-rail
        .btn:focus-visible {
        transform: translate3d(0, -2px, 0);
    }
}

/* =========================================================
   Certificate Share Modal
   ========================================================= */

#shareCertificateModal {
    z-index: 1090 !important;
}

#shareCertificateModal .modal-dialog {
    width: calc(100% - 32px);
    max-width: 520px;
    margin: 16px auto;
    min-height: calc(100% - 32px);
}

#shareCertificateModal .modal-content {
    position: relative;
    width: 100%;
    max-height: calc(100vh - 32px);
    padding: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 20px !important;
    background: #fff;
    overflow: unset !important;
}

#shareCertificateModal .btn-close {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
    margin-bottom: 4px;
}

/* =========================
   Certificate Image
   ========================= */

#shareCertificateModal .main_container {
    position: relative;
    width: 100%;
    max-width: 380px;
    height: 245px;
    margin: 0 auto;
    overflow: hidden;
}

#shareCertificateModal .main {
    position: relative;
    z-index: 5;
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    transform: translateY(70px);
}

#shareCertificateModal .cover {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: min(294px, 85%);
    height: auto;
    transform: translateX(-50%);
    pointer-events: none;
}

/* =========================
   Text Area
   ========================= */

#shareCertificateModal .text_container {
    position: relative;
    z-index: 10;
    width: 100%;
    margin-top: -38px;
}

#shareCertificateModal .text_container h5,
#shareCertificateModal .text_container p {
    overflow-wrap: anywhere;
}

/* =========================
   Avatars
   ========================= */

#shareCertificateModal .avatar-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #fff;
}

#shareCertificateModal img.mid {
    transform: scale(1.25);
}

/* =========================
   Social Buttons
   ========================= */

#shareCertificateModal .social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0 !important;
    flex: 0 0 46px;
    border: 1px solid #d5d7da;
    border-radius: 10px;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(10, 13, 18, 0.06) inset,
        0 1px 2px rgba(10, 13, 18, 0.05);
}

#shareCertificateModal .img-gray {
    display: block;
    width: 24px;
    height: 24px;
}

/* =========================
   Copy URL
   ========================= */

#shareCertificateModal .input-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: transparent;
}

#shareCertificateModal .form-control {
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid #d5d7da !important;
    border-radius: 8px 0 0 8px !important;
    box-shadow: none !important;
    font-size: 14px;
}

#shareCertificateModal .form-control:focus {
    position: relative;
    z-index: 2;
    box-shadow: none !important;
}

#shareCertificateModal .copy-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid #d5d7da;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    background: #fff;
    color: #344054;
    white-space: nowrap;
    font-weight: 600;
}

#shareCertificateModal .copy-feedback {
    min-height: 20px;
    color: #067647;
}

/* =========================
   Close Button
   ========================= */

#shareCertificateModal .close-btn {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d5d7da !important;
    border-radius: 8px !important;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(10, 13, 18, 0.08) inset,
        0 1px 2px rgba(10, 13, 18, 0.05);
}

/* =========================
   Interaction
   ========================= */

#shareCertificateModal .copy-link-btn,
#shareCertificateModal .close-btn,
#shareCertificateModal .social-btn {
    transition:
        transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 180ms ease,
        background-color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
    #shareCertificateModal .copy-link-btn:hover,
    #shareCertificateModal .copy-link-btn:focus-visible,
    #shareCertificateModal .close-btn:hover,
    #shareCertificateModal .close-btn:focus-visible,
    #shareCertificateModal .social-btn:hover,
    #shareCertificateModal .social-btn:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 10px 18px rgba(16, 24, 40, 0.1);
    }
}

/* =========================
   Tablet
   ========================= */

@media (min-width: 768px) {
    [data-intro-page] {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    #shareCertificateModal .modal-dialog {
        width: calc(100% - 24px);
        min-height: calc(100% - 24px);
        margin: 12px auto;
    }

    #shareCertificateModal .modal-content {
        max-height: calc(100vh - 24px);
        padding: 20px;
    }

    #shareCertificateModal .main_container {
        height: 220px;
    }

    #shareCertificateModal .main {
        max-width: 290px;
        transform: translateY(65px);
    }

    #shareCertificateModal .cover {
        width: min(270px, 88%);
    }

    #shareCertificateModal .text_container {
        margin-top: -32px;
    }
}

/* =========================
   Mobile
   ========================= */

@media (max-width: 575.98px) {
    #shareCertificateModal {
        padding-right: 0 !important;
    }

    #shareCertificateModal .modal-dialog {
        width: calc(100% - 20px);
        max-width: none;
        min-height: calc(100% - 20px);
        margin: 10px auto;
    }

    #shareCertificateModal .modal-content {
        max-height: calc(100dvh - 20px);
        padding: 16px;
        border-radius: 16px !important;
    }

    #shareCertificateModal .main_container {
        max-width: 320px;
        height: 190px;
    }

    #shareCertificateModal .main {
        max-width: 245px;
        transform: translateY(55px);
    }

    #shareCertificateModal .cover {
        width: min(235px, 82%);
    }

    #shareCertificateModal .text_container {
        margin-top: -26px;
    }

    #shareCertificateModal .avatar-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    #shareCertificateModal .text_container h5 {
        font-size: 18px;
        line-height: 1.3;
    }

    #shareCertificateModal .text_container p {
        font-size: 13px;
        line-height: 1.5;
    }

    #shareCertificateModal .social-btn {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    #shareCertificateModal .copy-link-btn {
        padding: 10px 12px;
    }

    #shareCertificateModal .copy-link-btn span {
        display: none;
    }
}

/* =========================
   Very Small Screens
   ========================= */

@media (max-width: 360px) {
    #shareCertificateModal .modal-content {
        padding: 14px;
    }

    #shareCertificateModal .main_container {
        height: 175px;
    }

    #shareCertificateModal .main {
        max-width: 220px;
        transform: translateY(50px);
    }

    #shareCertificateModal .cover {
        width: 215px;
    }

    #shareCertificateModal .social-btn {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }
}

/* =========================
   Modal Animation
   ========================= */

#badgesModal.show .modal-content,
#badgeDetailsModal.show .modal-content,
#shareCertificateModal.show .modal-content {
    animation: achievementModalEnter 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes achievementModalEnter {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* =========================
   Reduced Motion
   ========================= */

@media (prefers-reduced-motion: reduce) {
    #shareCertificateModal *,
    #shareCertificateModal *::before,
    #shareCertificateModal *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

@keyframes achievementModalEnter {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Individual profile motion */
#profile-page.profile-motion-page {
    --learning-motion-fast: 180ms;
    --learning-motion-base: 320ms;
    --learning-motion-reveal: 520ms;
    --learning-motion-progress: 760ms;
    --learning-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --learning-motion-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --learning-motion-lift: -4px;
}

#profile-page.profile-motion-page [data-learning-motion-item] {
    transform-origin: center top;
    will-change: opacity, transform;
}

#profile-page.profile-motion-page.learning-motion-ready
    [data-learning-motion-item]:not(.is-motion-revealed) {
    opacity: 0;
    transform: translate3d(0, 16px, 0) scale(0.992);
}

#profile-page.profile-motion-page.learning-motion-ready
    [data-learning-motion-item].is-motion-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition:
        opacity var(--learning-motion-reveal) var(--learning-motion-ease-out)
            var(--learning-reveal-delay, 0ms),
        transform var(--learning-motion-reveal) var(--learning-motion-ease-out)
            var(--learning-reveal-delay, 0ms);
}

#profile-page.profile-motion-page .cover-img,
#profile-page.profile-motion-page .profile-avatar,
#profile-page.profile-motion-page .badge-pro,
#profile-page.profile-motion-page .profile-name-spacer,
#profile-page.profile-motion-page .profile-mobile-card,
#profile-page.profile-motion-page .stat-card,
#profile-page.profile-motion-page .stat-card img,
#profile-page.profile-motion-page
    .profile-motion-skills
    [data-achievement-badge],
#profile-page.profile-motion-page .profile-motion-skills .badge-card,
#profile-page.profile-motion-page .profile-motion-skills .badge-card img,
#profile-page.profile-motion-page .profile-motion-rail > .card,
#profile-page.profile-motion-page .profile-motion-rail .btn,
#profile-page.profile-motion-page .streak-week .wk {
    transition:
        opacity var(--learning-motion-base) var(--learning-motion-ease-out),
        transform var(--learning-motion-base) var(--learning-motion-ease-soft),
        box-shadow var(--learning-motion-base) var(--learning-motion-ease-soft),
        border-color var(--learning-motion-fast) ease,
        background-color var(--learning-motion-fast) ease,
        color var(--learning-motion-fast) ease;
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-identity:not(.is-motion-revealed)
    .profile-avatar,
#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-identity:not(.is-motion-revealed)
    .badge-pro {
    opacity: 0;
    transform: scale(0.86);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-identity.is-motion-revealed
    .profile-avatar,
#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-identity.is-motion-revealed
    .badge-pro {
    opacity: 1;
    transform: scale(1);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-identity.is-motion-revealed
    .profile-avatar {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 120ms);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-identity.is-motion-revealed
    .badge-pro {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 220ms);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-identity:not(.is-motion-revealed)
    .profile-name-spacer,
#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-identity:not(.is-motion-revealed)
    .mobile-container
    .title {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-identity.is-motion-revealed
    .profile-name-spacer,
#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-identity.is-motion-revealed
    .mobile-container
    .title {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity 420ms var(--learning-motion-ease-out)
            calc(var(--learning-reveal-delay, 0ms) + 180ms),
        transform 420ms var(--learning-motion-ease-out)
            calc(var(--learning-reveal-delay, 0ms) + 180ms);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-statistics:not(.is-motion-revealed)
    .stat-card,
#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-skills:not(.is-motion-revealed)
    [data-achievement-badge],
#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-rail:not(.is-motion-revealed)
    > .card {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.97);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-statistics.is-motion-revealed
    .stat-card,
#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-skills.is-motion-revealed
    [data-achievement-badge],
#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-rail.is-motion-revealed
    > .card {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-statistics.is-motion-revealed
    .stat-card:nth-child(1),
#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-skills.is-motion-revealed
    [data-achievement-badge]:nth-child(1),
#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-rail.is-motion-revealed
    > .card:nth-of-type(1) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 90ms);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-statistics.is-motion-revealed
    .stat-card:nth-child(2),
#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-skills.is-motion-revealed
    [data-achievement-badge]:nth-child(2),
#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-rail.is-motion-revealed
    > .card:nth-of-type(2) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 150ms);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-statistics.is-motion-revealed
    .stat-card:nth-child(3),
#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-skills.is-motion-revealed
    [data-achievement-badge]:nth-child(3),
#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-rail.is-motion-revealed
    > .card:nth-of-type(3) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 210ms);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-skills.is-motion-revealed
    [data-achievement-badge]:nth-child(4) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 270ms);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-skills.is-motion-revealed
    [data-achievement-badge]:nth-child(n + 5) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 330ms);
}

#profile-page.profile-motion-page .progress-bar {
    transform: scaleX(1);
    transform-origin: left center;
    will-change: transform;
}

[dir="rtl"] #profile-page.profile-motion-page .progress-bar {
    transform-origin: right center;
}

#profile-page.profile-motion-page.learning-motion-ready
    [data-learning-motion-item]:not(.is-motion-revealed)
    .progress-bar {
    transform: scaleX(0);
}

#profile-page.profile-motion-page.learning-motion-ready
    [data-learning-motion-item].is-motion-revealed
    .progress-bar {
    transform: scaleX(1);
    transition: transform var(--learning-motion-progress)
        var(--learning-motion-ease-soft)
        calc(var(--learning-reveal-delay, 0ms) + 190ms);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-rail:not(.is-motion-revealed)
    .streak-week
    .wk {
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(0.9);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-rail.is-motion-revealed
    .streak-week
    .wk {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(1) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 100ms);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(2) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 140ms);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(3) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 180ms);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(4) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 220ms);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(5) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 260ms);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(6) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 300ms);
}

#profile-page.profile-motion-page.learning-motion-ready
    .profile-motion-rail.is-motion-revealed
    .streak-week
    .wk:nth-child(7) {
    transition-delay: calc(var(--learning-reveal-delay, 0ms) + 340ms);
}

#profile-page.profile-motion-page
    .profile-motion-skills
    .badge-card:focus-visible,
#profile-page.profile-motion-page .profile-motion-rail .btn:focus-visible,
#profile-page.profile-motion-page .skills-widget > .d-flex a:focus-visible {
    outline: 3px solid rgba(0, 134, 201, 0.22);
    outline-offset: 3px;
}

#profile-page.profile-motion-page .profile-motion-rail .btn:active {
    transform: translate3d(0, 1px, 0) scale(0.985);
    transition-duration: 90ms;
}

@media (hover: hover) and (pointer: fine) {
    #profile-page.profile-motion-page .stat-card:hover,
    #profile-page.profile-motion-page .stat-card:focus-within,
    #profile-page.profile-motion-page .profile-motion-rail > .card:hover,
    #profile-page.profile-motion-page
        .profile-motion-rail
        > .card:focus-within {
        transform: translate3d(0, var(--learning-motion-lift), 0);
        box-shadow: 0 18px 30px rgba(16, 24, 40, 0.09) !important;
    }

    #profile-page.profile-motion-page .profile-avatar:hover,
    #profile-page.profile-motion-page .profile-avatar:focus-visible {
        transform: scale(1.035);
    }

    #profile-page.profile-motion-page .profile-motion-skills .badge-card:hover,
    #profile-page.profile-motion-page
        .profile-motion-skills
        .badge-card:focus-visible {
        transform: translate3d(0, -4px, 0) scale(1.02);
        box-shadow: 0 16px 28px rgba(16, 24, 40, 0.11) !important;
    }

    #profile-page.profile-motion-page .profile-motion-rail .btn:hover,
    #profile-page.profile-motion-page .profile-motion-rail .btn:focus-visible,
    #profile-page.profile-motion-page .skills-widget > .d-flex a:hover,
    #profile-page.profile-motion-page .skills-widget > .d-flex a:focus-visible {
        transform: translate3d(0, -2px, 0);
    }
}

@media screen and (max-width: 450px) {
    #profile-page.profile-motion-page.learning-motion-ready
        [data-learning-motion-item]:not(.is-motion-revealed) {
        transform: translate3d(0, 10px, 0) scale(0.996);
    }
}

@media (prefers-reduced-motion: reduce) {
    #profile-page.profile-motion-page *,
    #profile-page.profile-motion-page *::before,
    #profile-page.profile-motion-page *::after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }

    #profile-page.profile-motion-page [data-learning-motion-item],
    #profile-page.profile-motion-page .profile-avatar,
    #profile-page.profile-motion-page .badge-pro,
    #profile-page.profile-motion-page .profile-name-spacer,
    #profile-page.profile-motion-page .mobile-container .title,
    #profile-page.profile-motion-page .stat-card,
    #profile-page.profile-motion-page [data-achievement-badge],
    #profile-page.profile-motion-page .badge-card,
    #profile-page.profile-motion-page .badge-card img,
    #profile-page.profile-motion-page .profile-motion-rail > .card,
    #profile-page.profile-motion-page .progress-bar,
    #profile-page.profile-motion-page .streak-week .wk {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Individual learning pages: Figma mobile handoff */
#sidebar {
    width: 260px;
}

#sidebar.collapsed {
    width: 70px;
}

#page-content-wrapper {
    margin-left: 260px;
    transition: margin-left 0.3s ease;
}

#sidebar.collapsed ~ #page-content-wrapper {
    margin-left: 70px;
}

#sidebar.collapsed .sidebar-label {
    display: none;
}

#sidebar .sidebar-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#sidebar.collapsed .sidebar-header {
    flex-direction: column-reverse;
    align-items: center;
}

.learning-mobile-topbar,
.learning-mobile-heading-art,
.learning-mobile-roadmap-hero,
.mobile-roadmap-upsell,
.mobile-course-access-divider {
    display: none;
}

#roadmap-static .roadmap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

#roadmap-static .learning-nav-surface {
    display: inline-flex;
    gap: 4px;
}

#roadmap-static .roadmap-course-title-row,
#roadmap-static .roadmap-course-meta,
#roadmap-static .course-card-meta,
#roadmap-static .course-progress-copy {
    display: flex;
    align-items: center;
}

#roadmap-static .roadmap-lock-trigger {
    border: 0;
    background: transparent;
    color: #717680;
}

#roadmap-static .roadmap-progress,
#roadmap-static .course-card-progress,
#roadmap-static .learning-mobile-roadmap-progress {
    appearance: none;
    -webkit-appearance: none;
    overflow: hidden;
    border: 0;
    border-radius: 9999px;
    background: #e9eaeb;
}

#roadmap-static progress::-webkit-progress-bar {
    border-radius: inherit;
    background: #e9eaeb;
}

#roadmap-static progress::-webkit-progress-value {
    border-radius: inherit;
    background: #2662a2;
}

#roadmap-static progress::-moz-progress-bar {
    border-radius: inherit;
    background: #2662a2;
}

#roadmap-static progress.progress-green::-webkit-progress-value {
    background: #17b26a;
}

#roadmap-static progress.progress-green::-moz-progress-bar {
    background: #17b26a;
}

#roadmap-static progress.progress-blue::-webkit-progress-value {
    background: #2662a2;
}

#roadmap-static progress.progress-blue::-moz-progress-bar {
    background: #2662a2;
}

#roadmap-static progress.progress-gray::-webkit-progress-value {
    background: #a4a7ae;
}

#roadmap-static progress.progress-gray::-moz-progress-bar {
    background: #a4a7ae;
}

#roadmap-static .roadmap-progress,
#roadmap-static .course-card-progress {
    width: 100%;
    height: 8px;
}

#roadmap-static .course-progress-copy {
    justify-content: flex-end;
    color: #475467;
    font-size: 12px;
    font-weight: 600;
}

#roadmap-static .course-progress-copy > span:first-child,
#roadmap-static .roadmap-field-label,
#roadmap-static .roadmap-certificate-link {
    display: none;
}

@media screen and (max-width: 450px) {
    #page-content-wrapper {
        margin-left: 0 !important;
    }

    #page-content-wrapper {
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }

    .learning-page-shell {
        padding-inline: 16px !important;
        padding-bottom: 40px !important;
    }

    #roadmap-static.learning-motion-page {
        width: 100%;
        margin-top: 0;
        padding-top: 8px;
        font-family: var(--font-ui-active, var(--font-sys));
    }

    .learning-mobile-topbar {
        display: flex;
        width: 100%;
        min-height: 52px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .learning-mobile-logo-link {
        display: block;
        flex: 0 1 166px;
        max-width: 166px;
    }

    .learning-mobile-logo {
        display: block;
        width: 100%;
        height: 40px;
        object-fit: contain;
        object-position: left center;
    }

    [dir="rtl"] .learning-mobile-logo {
        object-position: right center;
    }

    .learning-mobile-balances,
    .learning-mobile-balance {
        display: flex;
        align-items: center;
    }

    .learning-mobile-balances {
        flex: 0 0 auto;
        justify-content: flex-end;
        gap: 10px;
        color: #0c0c0d;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
    }

    .learning-mobile-balance {
        gap: 5px;
    }

    .learning-mobile-balance img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .learning-mobile-pro-badge {
        min-width: 27px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #fbcfe8;
        border-radius: 4px;
        color: #d80076;
        background: #fff1f8;
        font-size: 12px;
        font-weight: 500;
    }

    #roadmap-static .roadmap-header {
        display: block;
        margin-bottom: 32px !important;
        padding-top: 18px;
    }

    #roadmap-static .learning-heading {
        min-height: 72px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        position: relative;
    }

    #roadmap-static .learning-heading h4 {
        margin: 0 !important;
        color: #0c0c0d;
        font-size: 24px;
        font-weight: 600 !important;
        line-height: 32px;
    }

    #roadmap-static .learning-heading p {
        max-width: 220px;
        margin-top: 0;
        color: rgba(12, 12, 13, 0.6) !important;
        font-size: 14px !important;
        line-height: 20px;
    }

    #roadmap-static .learning-mobile-heading-art {
        display: block;
        width: 97px;
        height: 97px;
        margin-top: -8px;
        object-fit: contain;
        image-rendering: auto;
    }

    #roadmap-static .learning-mobile-roadmap-hero {
        display: flex;
        width: 100%;
        height: 106px;
        overflow: hidden;
        margin-top: 8px;
        border: 1px solid #e9eaeb;
        border-radius: 8px;
        background: #fff;
    }

    #roadmap-static .learning-mobile-roadmap-cover {
        width: 120px;
        height: 106px;
        flex: 0 0 120px;
        object-fit: cover;
    }

    #roadmap-static .learning-mobile-roadmap-summary {
        min-width: 0;
        flex: 1;
        padding: 16px;
    }

    #roadmap-static .learning-mobile-roadmap-copy {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    #roadmap-static .learning-mobile-roadmap-copy > div {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    #roadmap-static .learning-mobile-roadmap-copy span {
        overflow: hidden;
        color: #535862;
        font-size: 12px;
        line-height: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #roadmap-static .learning-mobile-roadmap-copy strong {
        overflow: hidden;
        color: #0c0c0d;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #roadmap-static .learning-mobile-play {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #2662a2;
        color: #fff;
        font-size: 20px;
        text-decoration: none;
    }

    #roadmap-static .learning-mobile-roadmap-progress {
        display: block;
        width: 100%;
        height: 8px;
        margin-top: 12px;
    }

    #roadmap-static .learning-nav-surface {
        width: 100%;
        height: 44px;
        display: flex;
        margin-top: 24px;
        padding: 3px;
        border: 1px solid #e9eaeb;
        border-radius: 8px;
        background: #fafafa !important;
        gap: 0;
    }

    #roadmap-static .learning-nav-surface .tab-btn {
        min-width: 0;
        height: 36px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 8px 12px;
        border: 1px solid transparent;
        border-radius: 6px;
        color: #717680;
        background: transparent;
        box-shadow: none;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    #roadmap-static .learning-nav-surface .tab-btn.active {
        border-color: #e9eaeb;
        background: #fff;
        color: #414651;
        box-shadow:
            0 1px 2px rgba(10, 13, 18, 0.05),
            inset 0 -2px 0 #e3e3e3;
    }

    #roadmap-static .roadmap-list {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    #roadmap-static .roadmap-list .roadmap-item {
        width: 100%;
        min-height: 132px;
        display: flex;
        align-items: flex-start !important;
        position: relative;
    }

    #roadmap-static .roadmap-step-icon-container {
        width: 48px !important;
        min-height: 132px !important;
        flex: 0 0 48px;
        margin-inline-end: 16px !important;
        z-index: 2;
    }

    #roadmap-static .roadmap-step-icon {
        width: 48px !important;
        height: 48px !important;
    }

    #roadmap-static .roadmap-step-icon img {
        width: 48px !important;
        height: 48px !important;
    }

    #roadmap-static .roadmap-step-icon-line {
        top: 48px !important;
        inset-inline-start: 23px !important;
        left: auto !important;
        width: 2px !important;
        height: calc(100% + 32px) !important;
        transform: none !important;
        background: #e9eaeb;
    }

    #roadmap-static .roadmap-step-icon-line.line-completed {
        background: #17b26a;
    }

    #roadmap-static .roadmap-step-icon-line.line-in-progress {
        background: #00afc5;
    }

    #roadmap-static .roadmap-step-icon-line.line-not-started {
        background: #e9eaeb;
    }

    #roadmap-static .roadmap-list .course-card {
        min-width: 0;
        display: block !important;
        flex: 1;
    }

    #roadmap-static .roadmap-list .course-thumb,
    #roadmap-static .roadmap-desktop-status,
    #roadmap-static .roadmap-desktop-detail {
        display: none !important;
    }

    #roadmap-static .roadmap-course-content {
        display: block !important;
    }

    #roadmap-static .roadmap-list .course-info {
        width: 100% !important;
    }

    #roadmap-static .roadmap-field-label {
        display: block;
        min-height: 14px;
        margin-bottom: 18px;
        color: #0c0c0d;
        font-size: 12px;
        font-weight: 500;
        line-height: 14px;
    }

    #roadmap-static .roadmap-course-title-row {
        min-width: 0;
        gap: 4px;
    }

    #roadmap-static .roadmap-course-title-row h5 {
        overflow: hidden;
        margin: 0 !important;
        color: #0c0c0d;
        font-size: 16px;
        font-weight: 500 !important;
        line-height: 24px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #roadmap-static .roadmap-lock-trigger {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #e9eaeb;
        border-radius: 50%;
        background: #fafafa;
        color: #717680;
        font-size: 11px;
    }

    #roadmap-static .roadmap-course-meta {
        margin: 0 0 8px !important;
        gap: 6px !important;
        color: #717680 !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 18px;
        white-space: nowrap;
    }

    #roadmap-static .roadmap-course-meta .bi-clock {
        font-size: 16px !important;
    }

    #roadmap-static .roadmap-meta-dot {
        color: #717680;
    }

    #roadmap-static .progress-wrapper {
        width: 100%;
        display: flex !important;
        align-items: center;
        gap: 12px !important;
    }

    #roadmap-static .roadmap-progress {
        min-width: 0;
        flex: 1;
        height: 8px;
    }

    #roadmap-static .roadmap-progress-label {
        flex: 0 0 auto;
        color: #414651;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    #roadmap-static .course-action {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-start;
        gap: 22px !important;
        margin-top: 12px;
        text-align: start !important;
    }

    #roadmap-static .course-action .btn {
        width: auto !important;
        min-width: 0;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 8px 12px !important;
        border-radius: 9999px !important;
        font-size: 12px;
        font-weight: 500 !important;
        line-height: 18px;
        white-space: nowrap;
    }

    #roadmap-static .course-action .continue {
        border: 2px solid rgba(255, 255, 255, 0.12) !important;
        background: #2662a2 !important;
        box-shadow: inset 0 -4px 0 rgba(10, 13, 18, 0.2);
    }

    #roadmap-static .course-action .review-btn,
    #roadmap-static .course-action .btn-outline-secondary {
        border: 1px solid #d5d7da !important;
        background: #fff !important;
        box-shadow: inset 0 -4px 0 #d5d7da;
        color: #414651 !important;
        opacity: 1;
    }

    #roadmap-static .roadmap-certificate-link {
        display: inline-flex;
        color: #535862;
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
        text-decoration: none;
    }

    #roadmap-static .is-mobile-premium-preview {
        max-height: 132px;
        overflow: hidden;
    }

    #roadmap-static .is-mobile-premium-preview .course-card {
        filter: blur(4px);
        opacity: 0.4;
    }

    #roadmap-static .is-mobile-after-upsell {
        display: none !important;
    }

    #roadmap-static .mobile-roadmap-upsell {
        min-height: 292px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        z-index: 4;
        margin: -108px -16px 0;
        padding: 12px 20px 28px;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.3) 0%,
            #fff 23%,
            #fff 100%
        );
        text-align: center;
    }

    #roadmap-static .mobile-roadmap-upsell-image {
        width: 111px;
        height: 96px;
        object-fit: contain;
    }

    #roadmap-static .mobile-roadmap-upsell h2 {
        max-width: 270px;
        margin: 8px 0 4px;
        color: #0c0c0d;
        font-size: 18px;
        font-weight: 500;
        line-height: 28px;
    }

    #roadmap-static .mobile-roadmap-upsell p {
        max-width: 334px;
        margin: 0;
        color: #656469;
        font-size: 12px;
        line-height: 18px;
    }

    #roadmap-static .mobile-roadmap-upsell a {
        margin-top: 24px;
        color: #00afc5;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        text-decoration: none;
    }

    #all-courses-view .courses-motion-toolbar {
        display: block !important;
        position: relative;
        z-index: 1050;
        overflow: visible;
        margin-bottom: 36px !important;
    }

    #all-courses-view .search-input-wrapper {
        width: 100%;
        max-width: none !important;
    }

    #all-courses-view .search-input-wrapper .input-group {
        height: 40px;
        overflow: visible;
        border: 1px solid #d5d7da;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    }

    #all-courses-view .search-input-wrapper .input-group-text,
    #all-courses-view .search-input-wrapper .form-control {
        height: 38px;
        border: 0;
        background: transparent !important;
        box-shadow: none !important;
    }

    #all-courses-view .search-input-wrapper .input-group-text {
        padding: 0 6px 0 12px;
        color: #717680;
        font-size: 20px;
    }

    #all-courses-view .search-input-wrapper .form-control {
        padding: 8px 12px 8px 0;
        color: #414651;
        font-size: 16px;
        line-height: 24px;
    }

    [dir="rtl"] #all-courses-view .search-input-wrapper .input-group-text {
        padding: 0 12px 0 6px;
    }

    [dir="rtl"] #all-courses-view .search-input-wrapper .form-control {
        padding: 8px 0 8px 12px;
    }

    #all-courses-view .course-filter-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
        position: relative;
        z-index: 30;
    }

    #all-courses-view .filter-section-text {
        flex: 0 0 auto;
        color: #414651;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        white-space: nowrap;
    }

    #all-courses-view .course-filter-dropdown {
        min-width: 0;
        position: relative;
        z-index: 1051;
    }

    #all-courses-view .course-filter-btn {
        min-width: 0;
        height: 40px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px;
        border: 1px solid transparent;
        border-radius: 8px;
        background: #fff;
        box-shadow: none;
        color: #535862;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
    }

    #all-courses-view .course-filter-btn::after {
        width: 8px;
        height: 8px;
        margin-inline-start: 2px;
        border: solid #535862;
        border-width: 0 1.5px 1.5px 0;
        transform: rotate(45deg) translateY(-2px);
    }

    #all-courses-view .course-filter-btn.active {
        color: #535862;
    }

    #all-courses-view
        .course-filter-dropdown:has(.dropdown-menu.show)
        .course-filter-btn {
        border-color: #1570ef;
        box-shadow: 0 0 0 1px #1570ef;
    }

    #all-courses-view .filter-count-badge {
        width: 22px;
        height: 22px;
        border: 1px solid #b9e6fe;
        background: #f0f9ff;
        color: #026aa2;
        font-size: 12px;
        font-weight: 500;
    }

    #all-courses-view .filter-dropdown-menu {
        z-index: 1060 !important;
        min-width: 248px;
        max-height: 320px;
        overflow-y: auto;
        margin-top: 6px !important;
        padding: 4px;
        border: 1px solid #e9eaeb !important;
        border-radius: 8px;
        background: #fff;
        box-shadow:
            0 12px 16px -4px rgba(10, 13, 18, 0.08),
            0 4px 6px -2px rgba(10, 13, 18, 0.03) !important;
    }

    #all-courses-view .status-filter-menu {
        inset-inline-start: -80px !important;
    }

    #all-courses-view .category-filter-menu {
        inset-inline-end: 0 !important;
    }

    #all-courses-view .filter-dropdown-menu .dropdown-item {
        min-height: 40px;
        display: flex;
        align-items: center;
        padding: 10px 12px;
        border-radius: 6px;
        color: #414651;
        background: #fff;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    #all-courses-view .filter-dropdown-menu .dropdown-item.active {
        background: #fafafa;
        color: #252b37;
    }

    #all-courses-view .courses-motion-grid {
        --bs-gutter-x: 0;
        --bs-gutter-y: 24px;
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 1;
        margin: 0;
    }

    #all-courses-view .course-motion-item {
        width: 100%;
        padding: 0;
    }

    #all-courses-view .mobile-course-access-divider {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 16px 0 4px;
        padding: 0;
        color: #535862;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        text-align: center;
    }

    #all-courses-view .mobile-course-access-divider::before,
    #all-courses-view .mobile-course-access-divider::after {
        height: 1px;
        flex: 1;
        background: #e9eaeb;
        content: "";
    }

    #all-courses-view .course-box {
        overflow: hidden;
        border: 1px solid #e9eaeb;
        border-radius: 8px;
        background: #fff;
        box-shadow: none;
    }

    #all-courses-view .course-box:hover,
    #all-courses-view .course-box:focus-within {
        transform: none !important;
        box-shadow: none !important;
    }

    #all-courses-view .course-box .card-img-top {
        display: block;
        width: 100%;
        height: 140px;
        border: 0;
        border-radius: 0;
        object-fit: cover;
    }

    #all-courses-view .course-box .badge-status {
        top: 16px;
        right: 16px;
        padding: 3px 8px;
        border-radius: 9999px;
        font-size: 10px;
        font-weight: 500;
        line-height: 18px;
        box-shadow: none;
    }

    [dir="rtl"] #all-courses-view .course-box .badge-status {
        right: auto;
        left: 16px;
    }

    #all-courses-view .course-box .card-body {
        padding: 16px 14px 15px;
    }

    #all-courses-view .course-box .card-body h5 {
        margin: 0 0 2px !important;
        color: #0c0c0d;
        font-size: 16px;
        font-weight: 500 !important;
        line-height: 24px;
    }

    #all-courses-view .course-card-meta {
        margin: 0 0 12px !important;
        gap: 8px;
        color: #717680 !important;
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
    }

    #all-courses-view .course-card-meta .bi-clock {
        font-size: 16px;
    }

    #all-courses-view .progress-wrapper-card {
        margin: 0;
    }

    #all-courses-view .course-card-progress {
        display: block;
        height: 8px;
    }

    #all-courses-view .progress-avatar-indicator,
    #all-courses-view .desktop-course-status {
        display: none !important;
    }

    #all-courses-view .course-progress-copy {
        display: flex;
        justify-content: flex-end;
        margin-top: 4px;
        color: #414651;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    #all-courses-view .course-progress-copy > span:first-child {
        display: inline;
    }

    #all-courses-view .courses-pagination {
        margin-top: 24px !important;
        padding-bottom: 16px;
    }

    #all-courses-view .courses-empty-icon {
        font-size: 3rem;
    }

    #sidebar {
        width: 100% !important;
        height: calc(84px + env(safe-area-inset-bottom)) !important;
        min-height: 84px;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        position: fixed !important;
        inset: auto 0 0 !important;
        padding: 0 16px env(safe-area-inset-bottom) !important;
        border: 0 !important;
        border-top: 1px solid #e9eaeb !important;
        background: #fff;
        z-index: 1040;
    }

    #sidebar .sidebar-header,
    #sidebar .sidebar-label,
    #sidebar .mb-3.mt-auto.text-center {
        display: none !important;
    }

    #sidebar ul.nav {
        width: 100%;
        max-width: none;
        height: 84px;
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between !important;
        gap: 0 !important;
        margin: 0;
        padding: 16px 0 !important;
    }

    #sidebar .nav .nav-item {
        width: 52px !important;
        flex: 0 0 52px !important;
        text-align: center;
    }

    #sidebar .nav .nav-item .nav-link,
    #sidebar .nav .nav-item.mobile > .dropdown > button {
        width: 52px;
        height: 52px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 12px !important;
        border: 1px solid transparent;
        border-radius: 12px !important;
        background: #fff;
    }

    #sidebar .nav .nav-item .nav-link img {
        width: 28px !important;
        height: 28px;
        margin: 0 !important;
        object-fit: contain;
    }

    #sidebar .nav .nav-item .nav-link.active {
        border-color: #f5f5f5;
        box-shadow: inset 0 -2px 0 #e3e3e3;
    }

    #sidebar .nav .nav-item.mobile > .dropdown > button {
        width: 60px;
        padding: 8px 12px !important;
        gap: 0 !important;
    }

    #sidebar .nav .nav-item.mobile img {
        width: 32px !important;
        height: 32px !important;
    }

    #sidebar .nav .nav-item.mobile .bi-caret-down-fill {
        margin-inline-start: -4px;
        font-size: 10px;
    }

    .tooltip.learning-lock-tooltip {
        --bs-tooltip-bg: #0c0c0d;
        --bs-tooltip-color: #fff;
        --bs-tooltip-max-width: 240px;
        --bs-tooltip-padding-x: 12px;
        --bs-tooltip-padding-y: 8px;
        --bs-tooltip-border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        line-height: 18px;
    }
}

/* Desktop courses filters */
#all-courses-view .desktop-filter-status-dot,
#all-courses-view .desktop-filter-category-icon,
#all-courses-view .desktop-filter-check {
    display: none;
}

@media screen and (min-width: 451px) {
    #all-courses-view {
        position: relative;
    }

    #all-courses-view .courses-motion-toolbar {
        display: block;
        overflow: visible;
        position: relative;
        z-index: 50;
        margin-bottom: 24px !important;
    }

    #all-courses-view .search-input-wrapper,
    #all-courses-view .search-input-wrapper form {
        width: 100%;
    }

    #all-courses-view .search-input-wrapper .input-group {
        width: 100%;
        height: 46px;
        overflow: hidden;
        border: 1px solid #d0d5dd;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    }

    #all-courses-view .search-input-wrapper .input-group:focus-within {
        border-color: #84adff;
        box-shadow:
            0 0 0 3px rgba(46, 144, 250, 0.12),
            0 1px 2px rgba(16, 24, 40, 0.05);
    }

    #all-courses-view .search-input-wrapper .input-group-text,
    #all-courses-view .search-input-wrapper .form-control {
        height: 44px;
        border: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    #all-courses-view .search-input-wrapper .input-group-text {
        padding: 0 8px 0 14px;
        color: #667085;
        font-size: 18px;
    }

    #all-courses-view .search-input-wrapper .form-control {
        padding: 10px 14px 10px 0;
        color: #101828;
        font-size: 15px;
        line-height: 24px;
    }

    [dir="rtl"] #all-courses-view .search-input-wrapper .input-group-text {
        padding: 0 14px 0 8px;
    }

    [dir="rtl"] #all-courses-view .search-input-wrapper .form-control {
        padding: 10px 0 10px 14px;
    }

    #all-courses-view .course-filter-row {
        min-height: 40px;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: 8px;
        position: relative;
        z-index: 51;
        margin-top: 8px;
    }

    #all-courses-view .filter-section-text {
        flex: 0 0 auto;
        margin-inline-end: 4px;
        color: #475467;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        white-space: nowrap;
    }

    #all-courses-view .course-filter-dropdown {
        flex: 0 0 auto;
        position: relative;
    }

    #all-courses-view .course-filter-btn {
        width: auto;
        min-width: 116px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 8px 12px;
        border: 1px solid #e9eaeb;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
        color: #344054;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        white-space: nowrap;
    }

    #all-courses-view .course-filter-btn .bi {
        width: 16px;
        height: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #667085;
        font-size: 15px;
        line-height: 1;
    }

    #all-courses-view .course-filter-btn::after {
        width: 6px;
        height: 6px;
        margin-inline-start: auto;
        border: solid #667085;
        border-width: 0 1.5px 1.5px 0;
        transform: rotate(45deg) translateY(-2px);
        transition: transform 160ms ease;
    }

    #all-courses-view .course-filter-btn:hover,
    #all-courses-view .course-filter-btn:focus-visible {
        border-color: #d0d5dd;
        background: #f9fafb;
        color: #344054;
    }

    #all-courses-view .course-filter-btn.active {
        border-color: #b9e6fe;
        background: #f0f9ff;
        color: #026aa2;
    }

    #all-courses-view .course-filter-btn.active .bi {
        color: #026aa2;
    }

    #all-courses-view .course-filter-btn[aria-expanded="true"] {
        border-color: #84adff;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.12);
    }

    #all-courses-view .course-filter-btn[aria-expanded="true"]::after {
        transform: rotate(225deg) translate(-1px, -1px);
    }

    #all-courses-view .filter-count-badge {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #b9e6fe;
        border-radius: 50%;
        background: #fff;
        color: #026aa2;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
    }

    #all-courses-view .filter-dropdown-menu {
        min-width: 248px;
        max-width: min(320px, calc(100vw - 32px));
        max-height: 320px;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 1100 !important;
        margin-top: 8px !important;
        padding: 4px;
        border: 1px solid #e9eaeb !important;
        border-radius: 8px;
        background: #fff;
        box-shadow:
            0 12px 16px -4px rgba(16, 24, 40, 0.1),
            0 4px 6px -2px rgba(16, 24, 40, 0.05) !important;
    }

    #all-courses-view .filter-dropdown-menu .dropdown-item {
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 6px;
        background: #fff;
        color: #344054;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        text-decoration: none;
    }

    #all-courses-view .filter-dropdown-menu .dropdown-item:hover,
    #all-courses-view .filter-dropdown-menu .dropdown-item:focus-visible {
        background: #f9fafb;
        color: #344054;
    }

    #all-courses-view .filter-dropdown-menu .dropdown-item.active,
    #all-courses-view .filter-dropdown-menu .dropdown-item:active {
        background: #eff8ff;
        color: #175cd3;
    }

    #all-courses-view .filter-option-label {
        min-width: 0;
        display: inline-flex;
        flex: 1;
        align-items: center;
        gap: 10px;
    }

    #all-courses-view .filter-option-label > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #all-courses-view .desktop-filter-status-dot {
        width: 10px;
        height: 10px;
        flex: 0 0 10px;
        display: inline-block;
        border-radius: 50%;
        background: #e9eaeb;
    }

    #all-courses-view .desktop-filter-status-dot.is-not-started {
        background: #a4a7ae;
    }

    #all-courses-view .desktop-filter-status-dot.is-in-progress {
        background: #f79009;
    }

    #all-courses-view .desktop-filter-status-dot.is-completed {
        background: #17b26a;
    }

    #all-courses-view .desktop-filter-category-icon {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #667085;
        font-size: 14px;
    }

    #all-courses-view
        .filter-dropdown-menu
        .dropdown-item.active
        .desktop-filter-category-icon {
        color: #175cd3;
    }

    #all-courses-view .filter-dropdown-menu .desktop-filter-check {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        align-items: center;
        justify-content: center;
        color: #175cd3;
        font-size: 16px;
    }

    #all-courses-view
        .filter-dropdown-menu
        .dropdown-item.active
        .desktop-filter-check {
        display: inline-flex;
    }

    #all-courses-view .courses-motion-grid {
        position: relative;
        z-index: 1;
    }
}

/* Guest splash and onboarding */
body:has(#intro-page) {
    background: #f5f5f5;
}

#intro-page {
    --intro-safe-top: env(safe-area-inset-top, 0px);
    --intro-safe-bottom: env(safe-area-inset-bottom, 0px);
    --intro-art-size: min(calc(100vw - 32px), 343px, 45svh);
    width: 100%;
    max-width: 480px;
    min-height: 100svh;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background: #fff;
    color: #181d27;
    font-family: "Inter", sans-serif;
}

[dir="rtl"] #intro-page {
    font-family: "Tajawal", sans-serif;
}

#intro-page .intro-screen {
    width: 100%;
    min-height: 100svh;
    overflow: hidden;
    position: relative;
    background: #fff;
}

#intro-page .intro-screen[hidden] {
    display: none !important;
}

#intro-page .intro-splash-content {
    width: calc(100% - 32px);
    max-width: 343px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: calc(var(--intro-safe-top) + clamp(150px, 28.7svh, 219px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

#intro-page .intro-splash-logo {
    width: 210px;
    height: 108px;
    display: block;
    object-fit: contain;
}

#intro-page .intro-language-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 56px;
}

#intro-page .intro-language-option {
    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid #e9eaeb;
    border-radius: 8px;
    background: #fff;
    color: #181d27;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

#intro-page .intro-language-option:hover,
#intro-page .intro-language-option:focus-visible {
    border-color: #84adff;
    box-shadow: 0 0 0 3px rgba(46, 144, 250, 0.14);
    outline: 0;
}

#intro-page .intro-language-option:active {
    transform: scale(0.99);
}

#intro-page .intro-language-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#intro-page .intro-language-copy img,
#intro-page .intro-language-arrow {
    width: 24px;
    height: 24px;
    display: block;
    flex: 0 0 24px;
}

#intro-page .intro-splash-objects {
    width: 100%;
    height: 176px;
    display: block;
    position: absolute;
    right: 0;
    bottom: var(--intro-safe-bottom);
    left: 0;
    object-fit: cover;
    object-position: center bottom;
    pointer-events: none;
}

#intro-page .intro-onboarding-header {
    width: 100%;
    height: calc(56px + var(--intro-safe-top));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--intro-safe-top) 16px 0;
    position: relative;
    z-index: 5;
    background: #fff;
}

#intro-page .intro-onboarding-logo {
    width: 156px;
    height: 32px;
    display: block;
    object-fit: contain;
}

#intro-page .intro-locale-switch {
    min-width: 61px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    color: #535862;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-decoration: none;
}

#intro-page .intro-locale-switch .bi {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

#intro-page .intro-slides {
    width: 100%;
    height: calc(100svh - 56px - var(--intro-safe-top));
    position: relative;
    touch-action: pan-y;
    user-select: none;
}

#intro-page .intro-slide {
    width: 100%;
    height: 100%;
    visibility: hidden;
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(28px);
    pointer-events: none;
    transition:
        opacity 260ms ease,
        transform 260ms ease,
        visibility 260ms;
}

[dir="rtl"] #intro-page .intro-slide {
    transform: translateX(-28px);
}

#intro-page .intro-slide.is-active {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

#intro-page .intro-slide-image {
    width: var(--intro-art-size);
    height: auto;
    aspect-ratio: 343 / 340;
    display: block;
    margin: 24px auto 0;
    border-radius: 24px;
    object-fit: cover;
    pointer-events: none;
}

#intro-page .intro-slide-copy {
    width: 100%;
    max-width: 375px;
    margin: 40px auto 0;
    padding: 0 16px;
    text-align: center;
}

#intro-page .intro-slide-copy h1 {
    margin: 0;
    color: #181d27;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.48px;
}

#intro-page .intro-slide-copy p {
    max-width: 344px;
    margin: 8px auto 0;
    color: #535862;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

#intro-page .intro-slide-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: absolute;
    top: calc(var(--intro-safe-top) + 212px + var(--intro-art-size));
    right: 0;
    left: 0;
    z-index: 6;
}

#intro-page .intro-slide-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e9eaeb;
    box-shadow: none;
}

#intro-page .intro-slide-dot.is-active {
    background: #2662a2;
}

#intro-page .intro-slide-dot:focus-visible {
    outline: 2px solid #84adff;
    outline-offset: 3px;
}

#intro-page .intro-actions {
    width: calc(100% - 32px);
    max-width: 344px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: absolute;
    right: 16px;
    bottom: calc(var(--intro-safe-bottom) + 3px);
    left: 16px;
    z-index: 7;
    margin: 0 auto;
}

#intro-page .intro-action {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

#intro-page .intro-action-primary {
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: #2662a2;
    box-shadow: 0 -4px 0 rgba(10, 13, 18, 0.2) inset;
    color: #fff;
}

#intro-page .intro-action-secondary {
    border: 1px solid #d5d7da;
    background: #fff;
    box-shadow: 0 -4px 0 #d5d7da inset;
    color: #252b37;
}

#intro-page .intro-action:hover,
#intro-page .intro-action:focus-visible {
    transform: translateY(-1px);
}

#intro-page .intro-action-primary:hover,
#intro-page .intro-action-primary:focus-visible {
    background: #205789;
    color: #fff;
}

#intro-page .intro-action-secondary:hover,
#intro-page .intro-action-secondary:focus-visible {
    border-color: #a4a7ae;
    color: #252b37;
}

#intro-page .intro-action:focus-visible {
    outline: 3px solid rgba(46, 144, 250, 0.24);
    outline-offset: 2px;
}

#intro-page .intro-action:active {
    transform: translateY(1px);
}

@media (max-width: 359px) {
    #intro-page {
        --intro-art-size: min(calc(100vw - 24px), 45svh);
    }

    #intro-page .intro-splash-content,
    #intro-page .intro-actions {
        width: calc(100% - 24px);
    }

    #intro-page .intro-actions {
        right: 12px;
        left: 12px;
    }

    #intro-page .intro-slide-copy {
        margin-top: 24px;
        padding: 0 12px;
    }

    #intro-page .intro-slide-copy h1 {
        font-size: 21px;
        line-height: 28px;
    }

    #intro-page .intro-slide-dots {
        top: calc(var(--intro-safe-top) + 192px + var(--intro-art-size));
    }
}

@media (max-height: 700px) {
    #intro-page {
        --intro-art-size: min(calc(100vw - 24px), 37svh);
    }

    #intro-page .intro-splash-content {
        top: calc(var(--intro-safe-top) + clamp(64px, 16svh, 112px));
    }

    #intro-page .intro-splash-logo {
        width: 180px;
        height: auto;
    }

    #intro-page .intro-language-list {
        margin-top: 32px;
    }

    #intro-page .intro-slide-image {
        margin-top: 12px;
    }

    #intro-page .intro-slide-copy {
        margin-top: 16px;
    }

    #intro-page .intro-slide-copy p {
        margin-top: 4px;
        line-height: 18px;
    }

    #intro-page .intro-slide-dots {
        top: calc(var(--intro-safe-top) + 174px + var(--intro-art-size));
    }

    #intro-page .intro-actions {
        gap: 8px;
    }

    #intro-page .intro-action {
        height: 44px;
    }
}

@media (min-width: 481px) {
    #intro-page {
        box-shadow: 0 0 32px rgba(10, 13, 18, 0.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    #intro-page .intro-slide,
    #intro-page .intro-action,
    #intro-page .intro-language-option {
        transition: none;
    }
}

/* Individual navigation carousel and profile menu */
.individual-bottom-nav-shell,
.individual-bottom-nav-swiper {
    display: contents;
}
.individual-bottom-nav-control {
    display: none;
}

.individual-profile-trigger {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #d5d7da !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow:
        0 1px 2px rgba(10, 13, 18, 0.06),
        inset 0 -1px 0 rgba(10, 13, 18, 0.04);
    color: #252b37 !important;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.individual-profile-trigger:hover {
    border-color: #b2ddff !important;
    background: #f5fbff !important;
}

.individual-profile-trigger:focus-visible,
.individual-bottom-nav-control:focus-visible,
.individual-profile-menu__item:focus-visible {
    outline: 3px solid rgba(0, 175, 197, 0.22);
    outline-offset: 2px;
}

.individual-profile-trigger.show {
    border-color: #00afc5 !important;
    box-shadow:
        0 0 0 3px rgba(0, 175, 197, 0.14),
        0 2px 4px rgba(10, 13, 18, 0.08);
}

.individual-profile-trigger--desktop {
    max-width: 220px;
    padding: 6px 8px 6px 7px !important;
}

[dir="rtl"] .individual-profile-trigger--desktop {
    padding: 6px 7px 6px 8px !important;
}

.individual-profile-trigger__avatar {
    flex: 0 0 auto;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #e9eaeb;
    object-fit: cover;
}

.individual-profile-trigger__name {
    overflow: hidden;
    color: #252b37;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.individual-profile-trigger__chevron {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e9eaeb;
    border-radius: 50%;
    background: #f8fafc;
    color: #535862;
    font-size: 11px;
    transition: transform 180ms ease;
}

.individual-profile-trigger.show .individual-profile-trigger__chevron {
    transform: rotate(180deg);
}

.individual-profile-menu {
    z-index: 1100 !important;
    min-width: 270px;
    margin-top: 8px !important;
    padding: 8px !important;
    border: 1px solid rgba(213, 215, 218, 0.9) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow:
        0 20px 28px -8px rgba(10, 13, 18, 0.18),
        0 8px 12px -6px rgba(10, 13, 18, 0.1) !important;
    text-align: start;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.individual-profile-menu__item {
    width: 100%;
    min-height: 46px;
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 7px 9px !important;
    border: 0;
    border-radius: 10px !important;
    background: transparent !important;
    color: #414651 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: start;
    transition:
        color 150ms ease,
        background-color 150ms ease;
}

.individual-profile-menu__item:hover,
.individual-profile-menu__item:focus {
    background: #f5fbff !important;
    color: #1849a9 !important;
}

.individual-profile-menu__icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f2f4f7;
    color: #2662a2;
    font-size: 16px;
}

.individual-profile-menu__icon--language {
    background: #ecfdff;
    color: #008699;
}

.individual-profile-menu__label {
    min-width: 0;
    flex: 1;
}

.individual-profile-menu__badge {
    flex: 0 0 auto;
    padding: 2px 7px;
    border: 1px solid #b9e6fe;
    border-radius: 999px;
    background: #f0f9ff;
    color: #026aa2;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
}

.individual-profile-menu__divider {
    margin: 6px 4px !important;
    border-color: #e9eaeb;
    opacity: 1;
}

.individual-profile-menu__item--logout:hover,
.individual-profile-menu__item--logout:focus {
    background: #fff1f3 !important;
    color: #c01048 !important;
}

.individual-profile-menu__icon--logout {
    background: #fff1f3;
    color: #d80076;
}

@media screen and (max-width: 450px) {
    #sidebar {
        padding-inline: 8px !important;
    }

    #sidebar .individual-bottom-nav-shell {
        width: 100%;
        min-width: 0;
        height: 84px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    #sidebar .individual-bottom-nav-swiper {
        min-width: 0;
        height: 84px;
        flex: 1;
        display: block;
        overflow: hidden;
    }

    #sidebar .individual-bottom-nav-swiper ul.nav.swiper-wrapper {
        width: 100%;
        max-width: none;
        height: 84px;
        box-sizing: border-box;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 16px 0 !important;
    }

    #sidebar .individual-bottom-nav-swiper .swiper-slide {
        width: 52px !important;
        height: 52px;
        flex: 0 0 52px !important;
    }

    #sidebar .mobile {
        display: block !important;
    }

    .individual-bottom-nav-control {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 6;
        padding: 0;
        border: 1px solid #e9eaeb;
        border-radius: 50%;
        background: #fff;
        box-shadow:
            0 2px 5px rgba(10, 13, 18, 0.12),
            inset 0 -2px 0 #e3e3e3;
        color: #2662a2;
        font-size: 13px;
        transition:
            opacity 160ms ease,
            border-color 160ms ease,
            color 160ms ease,
            transform 160ms ease;
    }

    .individual-bottom-nav-control:not(.swiper-button-disabled):hover {
        border-color: #b2ddff;
        color: #00afc5;
        transform: translateY(-1px);
    }

    .individual-bottom-nav-control.swiper-button-disabled {
        cursor: default;
        opacity: 0.3;
        pointer-events: none;
    }

    [dir="rtl"] .individual-bottom-nav-control i {
        transform: scaleX(-1);
    }

    #sidebar
        .nav
        .nav-item.mobile
        > .dropdown
        > .individual-profile-trigger--mobile {
        width: 52px;
        height: 52px;
        position: relative;
        padding: 8px !important;
        border-radius: 12px !important;
    }

    #sidebar
        .individual-profile-trigger--mobile
        .individual-profile-trigger__avatar {
        width: 32px !important;
        height: 32px !important;
    }

    .individual-profile-trigger__chevron--mobile {
        width: 18px;
        height: 18px;
        position: absolute;
        inset-inline-end: -1px;
        bottom: -1px;
        border-color: #d5d7da;
        background: #fff;
        box-shadow: 0 2px 4px rgba(10, 13, 18, 0.14);
        font-size: 9px;
    }

    .individual-profile-dropdown--mobile .individual-profile-menu {
        width: min(280px, calc(100vw - 24px));
        min-width: 0;
        margin-bottom: 10px !important;
        touch-action: pan-y;
    }

    #sidebar
        .individual-bottom-nav-swiper:has(
            .individual-profile-dropdown--mobile > .individual-profile-menu.show
        ) {
        z-index: 5;
        overflow: visible;
    }

    #sidebar
        .individual-bottom-nav-swiper:has(
            .individual-profile-dropdown--mobile > .individual-profile-menu.show
        )
        .swiper-slide:not(.swiper-slide-visible) {
        visibility: hidden;
    }

    #sidebar
        .individual-bottom-nav-swiper:has(
            .individual-profile-dropdown--mobile > .individual-profile-menu.show
        )
        .individual-profile-slide {
        visibility: visible;
    }
}

@media screen and (max-width: 350px) {
    #sidebar {
        padding-inline: 6px !important;
    }

    #sidebar .individual-bottom-nav-shell {
        gap: 4px;
    }

    .individual-bottom-nav-control {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .individual-profile-trigger,
    .individual-profile-trigger__chevron,
    .individual-bottom-nav-control {
        transition: none;
    }
}

/* Separated individual desktop sidebar and mobile bottom navigation */
#individual-bottom-navbar {
    display: none;
}

@media screen and (min-width: 992px) {
    #sidebar.individual-desktop-sidebar {
        display: flex !important;
    }

    #individual-bottom-navbar {
        display: none !important;
    }
}

@media screen and (max-width: 991.98px) {
    #sidebar.individual-desktop-sidebar {
        display: none !important;
    }

    #page-content-wrapper {
        margin-inline-start: 0 !important;
        margin-left: 0 !important;
        padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }

    #individual-bottom-navbar {
        width: 100%;
        height: calc(84px + env(safe-area-inset-bottom));
        min-height: 84px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        position: fixed;
        inset: auto 0 0;
        padding: 0 8px env(safe-area-inset-bottom);
        border-top: 1px solid #e9eaeb;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 -8px 24px rgba(10, 13, 18, 0.06);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        z-index: 1040;
    }

    #individual-bottom-navbar .individual-bottom-nav-shell {
        width: 100%;
        min-width: 0;
        height: 84px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    #individual-bottom-navbar .individual-bottom-nav-swiper {
        min-width: 0;
        height: 84px;
        flex: 1;
        display: block;
        overflow: hidden;
    }

    #individual-bottom-navbar ul.nav.swiper-wrapper {
        width: 100%;
        max-width: none;
        height: 84px;
        box-sizing: border-box;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: 0 !important;
        margin: 0;
        padding: 16px 0 !important;
    }

    #individual-bottom-navbar .swiper-slide {
        width: 52px !important;
        height: 52px;
        flex: 0 0 52px !important;
        text-align: center;
    }

    #individual-bottom-navbar .nav-link,
    #individual-bottom-navbar .individual-profile-trigger--mobile {
        width: 52px;
        height: 52px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 10px !important;
        border: 1px solid transparent;
        border-radius: 12px !important;
        background: #fff;
    }

    #individual-bottom-navbar .nav-link img {
        width: 28px !important;
        height: 28px;
        margin: 0 !important;
        object-fit: contain;
    }

    #individual-bottom-navbar .sidebar-label {
        display: none !important;
    }

    #individual-bottom-navbar .nav-link.active {
        border-color: #e9eaeb;
        background: #fff;
        box-shadow:
            0 3px 8px rgba(10, 13, 18, 0.08),
            inset 0 -2px 0 #e3e3e3;
    }

    #individual-bottom-navbar .individual-profile-trigger--mobile {
        padding: 8px !important;
        gap: 0 !important;
        border: none !important;
        box-shadow: unset !important;
    }

    #individual-bottom-navbar
        .individual-profile-trigger--mobile
        .individual-profile-trigger__avatar {
        width: 32px !important;
        height: 32px !important;
    }

    #individual-bottom-navbar .individual-bottom-nav-control {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 6;
        padding: 0;
        border: 1px solid #e9eaeb;
        border-radius: 50%;
        background: #fff;
        box-shadow:
            0 2px 5px rgba(10, 13, 18, 0.12),
            inset 0 -2px 0 #e3e3e3;
        color: #2662a2;
        font-size: 13px;
    }

    #individual-bottom-navbar
        .individual-bottom-nav-control:not(.swiper-button-disabled):hover {
        border-color: #b2ddff;
        color: #00afc5;
        transform: translateY(-1px);
    }

    #individual-bottom-navbar
        .individual-bottom-nav-control.swiper-button-disabled {
        cursor: default;
        opacity: 0.3;
        pointer-events: none;
    }

    [dir="rtl"] #individual-bottom-navbar .individual-bottom-nav-control i {
        transform: scaleX(-1);
    }

    #individual-bottom-navbar
        .individual-bottom-nav-swiper:has(.individual-profile-menu.show) {
        z-index: 5;
        overflow: visible;
    }

    #individual-bottom-navbar
        .individual-bottom-nav-swiper:has(.individual-profile-menu.show)
        .swiper-slide:not(.swiper-slide-fully-visible):not(
            .individual-profile-slide
        ) {
        visibility: hidden;
    }

    #individual-bottom-navbar
        .individual-bottom-nav-swiper:has(.individual-profile-menu.show)
        .individual-profile-slide {
        visibility: visible;
    }
}

@media screen and (max-width: 350px) {
    #individual-bottom-navbar {
        padding-inline: 6px;
    }

    #individual-bottom-navbar .individual-bottom-nav-shell {
        gap: 4px;
    }

    #individual-bottom-navbar .individual-bottom-nav-control {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }
}

@media screen and (max-width: 450px) {
    #individual-bottom-navbar .individual-bottom-nav-control {
        display: none !important;
    }

    #individual-bottom-navbar .individual-bottom-nav-shell {
        gap: 0;
    }
}

@media screen and (min-width: 375px) and (max-width: 450px) {
    #individual-bottom-navbar .individual-bottom-nav-swiper {
        overflow: hidden;
    }

    #individual-bottom-navbar ul.nav.swiper-wrapper {
        width: 100% !important;
        transform: none !important;
        justify-content: space-between !important;
    }

    #individual-bottom-navbar .swiper-slide {
        width: auto !important;
        flex: 1 1 0 !important;
        display: flex;
        justify-content: center;
    }
}

@media screen and (max-width: 374.98px) {
    #individual-bottom-navbar .individual-bottom-nav-swiper {
        overflow-x: auto;
        overflow-y: visible;
        -ms-overflow-style: none;
        scrollbar-width: none;
        touch-action: pan-x;
    }

    #individual-bottom-navbar .individual-bottom-nav-swiper::-webkit-scrollbar {
        display: none;
    }

    #individual-bottom-navbar ul.nav.swiper-wrapper {
        width: max-content !important;
        min-width: 100%;
    }
}

/* Individual learner page skeletons */
.individual-page-region {
    min-height: calc(100vh - 64px);
    position: relative;
}

.individual-page-content {
    min-height: inherit;
    opacity: 1;
    transform: none;
    visibility: visible;
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.individual-page-skeleton {
    min-height: calc(100vh - 64px);
    position: absolute;
    inset: 0 0 auto;
    z-index: 30;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 15% 8%,
            rgba(0, 175, 197, 0.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(216, 0, 118, 0.035),
            transparent 24%
        ),
        #fff;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity 200ms ease,
        visibility 0s linear 200ms;
}

.individual-page-region.is-loading .individual-page-content {
    opacity: 0;
    pointer-events: none;
    transform: translateY(3px);
    visibility: hidden;
}

.individual-page-region.is-loading .individual-page-skeleton {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.individual-skeleton-shell {
    width: min(100%, 1280px);
    margin-inline: auto;
    padding: 32px;
}

.individual-skeleton-heading,
.individual-skeleton-toolbar,
.individual-skeleton-list-row,
.individual-skeleton-card--compact,
.individual-skeleton-store-balance {
    display: flex;
    align-items: center;
}

.individual-skeleton-heading {
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.individual-skeleton-heading__copy,
.individual-skeleton-stack,
.individual-skeleton-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.individual-skeleton-heading__copy {
    width: min(430px, 70%);
    gap: 10px;
}

.individual-skeleton-stack {
    flex: 1;
    gap: 10px;
}

.individual-skeleton-block {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #eaf0f5;
}

.individual-skeleton-block::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.9) 43%,
        rgba(197, 244, 249, 0.72) 50%,
        rgba(255, 255, 255, 0.9) 57%,
        transparent 80%
    );
    content: "";
    transform: translateX(-115%);
    animation: individual-skeleton-shimmer 1.45s cubic-bezier(0.4, 0, 0.2, 1)
        infinite;
}

@keyframes individual-skeleton-shimmer {
    to {
        transform: translateX(115%);
    }
}

.individual-skeleton-line {
    width: 100%;
    height: 10px;
    border-radius: 999px;
}

.individual-skeleton-line--title {
    width: min(280px, 72%);
    height: 24px;
}

.individual-skeleton-line--subtitle {
    width: min(360px, 88%);
    height: 12px;
}

.individual-skeleton-line--wide {
    width: 88%;
    height: 14px;
}

.individual-skeleton-line--medium {
    width: 66%;
    height: 12px;
}

.individual-skeleton-line--short {
    width: 42%;
    height: 10px;
}

.individual-skeleton-pill {
    width: 76px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 999px;
}

.individual-skeleton-pill--action {
    width: 132px;
    height: 38px;
    margin-top: 6px;
}

.individual-skeleton-pill--tab {
    width: 104px;
    height: 36px;
}

.individual-skeleton-circle {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
}

.individual-skeleton-circle--small {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}

.individual-skeleton-circle--large {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
}

.individual-skeleton-surface {
    border: 1px solid rgba(213, 215, 218, 0.86);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 8px 20px rgba(10, 13, 18, 0.045),
        0 2px 5px rgba(10, 13, 18, 0.025);
}

.individual-skeleton-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(260px, 0.85fr);
    gap: 24px;
}

.individual-skeleton-column {
    gap: 20px;
}

.individual-skeleton-hero {
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
}

.individual-skeleton-illustration {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    border-radius: 50% 42% 48% 40%;
}

.individual-skeleton-card-grid,
.individual-skeleton-badge-grid,
.individual-skeleton-store-grid,
.individual-skeleton-option-grid,
.individual-skeleton-summary__stats {
    display: grid;
    gap: 18px;
}

.individual-skeleton-card-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.individual-skeleton-card-grid--three,
.individual-skeleton-summary__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.individual-skeleton-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

.individual-skeleton-card__media {
    width: 112px;
    height: 76px;
    border-radius: 12px;
}

.individual-skeleton-card__media--large {
    width: 100%;
    height: 150px;
}

.individual-skeleton-card--compact {
    flex-direction: row;
    gap: 14px;
    padding: 18px;
}

.individual-skeleton-widget,
.individual-skeleton-challenge-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.individual-skeleton-list-row {
    min-width: 0;
    gap: 12px;
}

.individual-skeleton-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 28px;
}

.individual-skeleton-roadmap {
    max-width: 940px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.individual-skeleton-roadmap__row {
    min-height: 118px;
    display: flex;
    gap: 18px;
}

.individual-skeleton-roadmap__marker {
    width: 48px;
    flex: 0 0 48px;
    position: relative;
}

.individual-skeleton-roadmap__line {
    width: 3px;
    position: absolute;
    inset-block: 48px -20px;
    inset-inline-start: 22px;
    border-radius: 999px;
    background: #e2e8f0;
}

.individual-skeleton-course-row {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
}

.individual-skeleton-progress {
    width: 100%;
    height: 8px;
    margin-top: 4px;
    border-radius: 999px;
}

.individual-skeleton-toolbar {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.individual-skeleton-input {
    width: min(420px, 68%);
    height: 42px;
}

.individual-skeleton-detail-hero {
    min-height: 280px;
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.4fr);
    gap: 28px;
    margin-bottom: 24px;
    padding: 20px;
}

.individual-skeleton-detail-hero__media {
    min-height: 238px;
    border-radius: 13px;
}

.individual-skeleton-detail-hero .individual-skeleton-stack {
    justify-content: center;
}

.individual-skeleton-challenge-card {
    max-width: 850px;
    margin-bottom: 24px;
}

.individual-skeleton-badge-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.individual-skeleton-badge-card {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 18px;
}

.individual-skeleton-profile-card {
    min-height: 310px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    padding-bottom: 24px;
}

.individual-skeleton-profile-cover {
    width: 100%;
    height: 150px;
    border-radius: 0;
}

.individual-skeleton-profile-avatar {
    width: 112px;
    height: 112px;
    flex-basis: 112px;
    margin-top: -56px;
    border: 6px solid #fff;
}

.individual-skeleton-stat-card {
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px;
}

.individual-skeleton-store-balance {
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    padding: 24px;
}

.individual-skeleton-store-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.individual-skeleton-store-item {
    min-height: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 16px;
}

.individual-skeleton-store-item__media {
    width: 116px;
    height: 116px;
    border-radius: 24px;
}

.individual-skeleton-player {
    width: min(100%, 1040px);
}

.individual-skeleton-player__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px;
}

.individual-skeleton-player__content {
    min-height: 560px;
}

.individual-skeleton-player__media {
    width: 100%;
    height: 330px;
    border-radius: 14px;
}

.individual-skeleton-quiz-card {
    width: min(900px, calc(100% - 32px));
    min-height: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin: 32px auto;
    padding: 32px;
}

.individual-skeleton-quiz-card > .individual-skeleton-progress {
    width: min(680px, 90%);
}

.individual-skeleton-quiz-media {
    width: min(480px, 82%);
    height: 220px;
    border-radius: 16px;
}

.individual-skeleton-option-grid {
    width: min(680px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.individual-skeleton-option {
    height: 54px;
    border-radius: 12px;
}

.individual-skeleton-summary {
    width: min(800px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-inline: auto;
    padding-top: 20px;
}

.individual-skeleton-summary__art {
    width: 180px;
    height: 180px;
    flex-basis: 180px;
}

.individual-skeleton-summary > .individual-skeleton-line {
    margin-inline: auto;
}

.individual-skeleton-summary__stats {
    width: 100%;
    margin-top: 18px;
}

@media screen and (max-width: 991.98px) {
    .individual-page-region {
        min-height: calc(100vh - 84px - env(safe-area-inset-bottom));
    }

    .individual-page-skeleton {
        min-height: inherit;
    }

    .individual-skeleton-shell {
        padding: 24px 18px calc(112px + env(safe-area-inset-bottom));
    }

    .individual-skeleton-dashboard {
        grid-template-columns: 1fr;
    }

    .individual-skeleton-column--rail {
        display: none;
    }

    .individual-skeleton-card-grid--three,
    .individual-skeleton-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .individual-skeleton-badge-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .individual-skeleton-detail-hero {
        grid-template-columns: minmax(180px, 0.75fr) minmax(0, 1.25fr);
    }

    .individual-skeleton-player__content {
        min-height: 480px;
    }
}

@media screen and (max-width: 600px) {
    .individual-skeleton-shell {
        padding-inline: 16px;
        padding-top: 20px;
    }

    .individual-skeleton-heading {
        margin-bottom: 22px;
    }

    .individual-skeleton-heading > .individual-skeleton-pill {
        width: 56px;
    }

    .individual-skeleton-hero {
        min-height: 172px;
        padding: 20px;
    }

    .individual-skeleton-illustration {
        width: 92px;
        height: 92px;
        flex-basis: 92px;
    }

    .individual-skeleton-card-grid--two,
    .individual-skeleton-card-grid--three,
    .individual-skeleton-badge-grid,
    .individual-skeleton-store-grid,
    .individual-skeleton-summary__stats {
        grid-template-columns: 1fr;
    }

    .individual-skeleton-card-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .individual-skeleton-card__media {
        width: 100%;
    }

    .individual-skeleton-card__media--large {
        height: 122px;
    }

    .individual-skeleton-course-row > .individual-skeleton-card__media {
        width: 86px;
        height: 72px;
    }

    .individual-skeleton-detail-hero {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 14px;
    }

    .individual-skeleton-detail-hero__media {
        min-height: 180px;
    }

    .individual-skeleton-badge-grid,
    .individual-skeleton-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .individual-skeleton-badge-card {
        min-height: 148px;
    }

    .individual-skeleton-store-item {
        min-height: 196px;
    }

    .individual-skeleton-store-item__media {
        width: 92px;
        height: 92px;
    }

    .individual-skeleton-player__media {
        height: 240px;
    }

    .individual-skeleton-quiz-card {
        min-height: 500px;
        margin-top: 16px;
        padding: 22px 16px;
    }

    .individual-skeleton-quiz-media {
        width: 94%;
        height: 180px;
    }

    .individual-skeleton-option-grid {
        grid-template-columns: 1fr;
    }

    .individual-skeleton-summary__art {
        width: 140px;
        height: 140px;
        flex-basis: 140px;
    }
}

/* Child profile creation progress alignment */
#onboarding-page .child-profile-create-page .progress-1 {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

/* Child deletion modal: scoped overflow and centered artwork */
#deleteChildModal .modal-content {
    overflow: hidden !important;
    scrollbar-width: none;
}

#deleteChildModal .modal-content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#deleteChildModal .modal-content .imgs_container .bg {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
}

#deleteChildModal .modal-content .imgs_container .icon-2 {
    width: 96px;
    height: 96px;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    background: transparent !important;
}

#deleteChildModal .modal-content .imgs_container .icon-2 img {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

/* Subscription cancellation modal: scoped overflow and centered artwork */
#cancelSubscriptionModal .modal-content {
    overflow: hidden !important;
    scrollbar-width: none;
}

#cancelSubscriptionModal .modal-content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#cancelSubscriptionModal .modal-content .imgs_container .bg {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
}

#cancelSubscriptionModal .modal-content .imgs_container .icon-2 {
    width: 96px;
    height: 96px;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
    background: transparent !important;
}

#cancelSubscriptionModal .modal-content .imgs_container .icon-2 img {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

/* Parent courses search control */
#parent-profiles-page
    #all-courses-view
    .search-input-wrapper
    .parent-course-search-group {
    width: 100%;
    height: 46px;
    display: flex;
    direction: ltr;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

[dir="rtl"]
    #parent-profiles-page
    #all-courses-view
    .search-input-wrapper
    .parent-course-search-group {
    direction: rtl;
}

#parent-profiles-page
    #all-courses-view
    .parent-course-search-group:focus-within {
    border-color: #84adff;
    box-shadow:
        0 0 0 3px rgba(46, 144, 250, 0.12),
        0 1px 2px rgba(16, 24, 40, 0.05);
}

#parent-profiles-page
    #all-courses-view
    .parent-course-search-group
    .parent-course-search-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: #fff !important;
    color: #667085;
    box-shadow: none !important;
}

#parent-profiles-page
    #all-courses-view
    .parent-course-search-group
    .parent-course-search-icon
    i {
    display: block;
    font-size: 18px;
    line-height: 1;
}

#parent-profiles-page
    #all-courses-view
    .parent-course-search-group
    .parent-course-search-input {
    min-width: 0;
    height: 44px;
    flex: 1 1 auto;
    padding: 10px 14px 10px 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: #fff !important;
    color: #101828;
    font-size: 15px;
    line-height: 24px;
    box-shadow: none !important;
}

[dir="rtl"]
    #parent-profiles-page
    #all-courses-view
    .parent-course-search-group
    .parent-course-search-input {
    padding: 10px 0 10px 14px !important;
    text-align: right;
}

@media screen and (max-width: 450px) {
    #parent-profiles-page
        #all-courses-view
        .search-input-wrapper
        .parent-course-search-group {
        height: 44px;
    }

    #parent-profiles-page
        #all-courses-view
        .parent-course-search-group
        .parent-course-search-icon,
    #parent-profiles-page
        #all-courses-view
        .parent-course-search-group
        .parent-course-search-input {
        height: 42px;
    }

    #parent-profiles-page
        #all-courses-view
        .parent-course-search-group
        .parent-course-search-icon {
        width: 42px;
        flex-basis: 42px;
    }
}

/* Parent subscription page skeleton */
#parent-subscription.individual-page-region {
    min-height: calc(100vh - 64px);
}

#parent-subscription .parent-subscription-skeleton {
    min-height: 100%;
    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(0, 175, 197, 0.05),
            transparent 27%
        ),
        radial-gradient(
            circle at 90% 16%,
            rgba(216, 0, 118, 0.03),
            transparent 23%
        ),
        #fff;
}

#parent-subscription .parent-subscription-skeleton__shell {
    width: 100%;
    max-width: none;
    padding: 0 32px 40px;
}

#parent-subscription .parent-subscription-skeleton__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 24px;
}

#parent-subscription .parent-subscription-skeleton__main,
#parent-subscription .parent-subscription-skeleton__aside {
    min-width: 0;
}

#parent-subscription .parent-subscription-skeleton__aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#parent-subscription .parent-subscription-skeleton__section-heading {
    width: min(240px, 48%);
    margin: 44px 0 20px;
}

#parent-subscription .parent-subscription-skeleton__table {
    overflow: hidden;
}

#parent-subscription .parent-subscription-skeleton__table-row {
    min-height: 68px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-block-end: 1px solid #eaecf0;
}

#parent-subscription .parent-subscription-skeleton__table-row:last-child {
    border-block-end: 0;
}

#parent-subscription .parent-subscription-skeleton__table-row--header {
    min-height: 52px;
    background: #fafafa;
}

#parent-subscription
    .parent-subscription-skeleton__table-row
    .individual-skeleton-pill {
    width: min(76px, 100%);
}

#parent-subscription .parent-subscription-skeleton__mobile-history {
    display: none;
}

#parent-subscription .parent-subscription-skeleton__feature-card,
#parent-subscription .parent-subscription-skeleton__plan-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
}

#parent-subscription .parent-subscription-skeleton__feature-card {
    min-height: 190px;
}

#parent-subscription .parent-subscription-skeleton__plan-card {
    min-height: 250px;
}

#parent-subscription .parent-subscription-skeleton__plan-header,
#parent-subscription .parent-subscription-skeleton__plan-info,
#parent-subscription .parent-subscription-skeleton__history-card-top,
#parent-subscription .parent-subscription-skeleton__history-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#parent-subscription .parent-subscription-skeleton__plan-header {
    padding-bottom: 18px;
    border-block-end: 1px solid #eaecf0;
}

#parent-subscription .parent-subscription-skeleton__plan-info {
    flex: 1;
}

#parent-subscription
    .parent-subscription-skeleton__plan-card
    > .individual-skeleton-pill {
    width: 100%;
}

@media screen and (max-width: 991.98px) {
    #parent-subscription .parent-subscription-skeleton__layout {
        grid-template-columns: 1fr;
    }

    #parent-subscription .parent-subscription-skeleton__aside {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 767.98px) {
    #parent-subscription .parent-subscription-skeleton__table {
        display: none;
    }

    #parent-subscription .parent-subscription-skeleton__mobile-history {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #parent-subscription .parent-subscription-skeleton__history-card {
        min-height: 142px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 16px;
    }

    #parent-subscription .parent-subscription-skeleton__history-card-meta {
        justify-content: flex-start;
        margin-top: auto;
    }

    #parent-subscription
        .parent-subscription-skeleton__history-card-meta
        .individual-skeleton-line {
        width: min(180px, 48%);
    }
}

@media screen and (max-width: 600px) {
    #parent-subscription.individual-page-region {
        min-height: calc(100vh - 84px - env(safe-area-inset-bottom));
    }

    #parent-subscription .parent-subscription-skeleton__shell {
        padding: 0 16px calc(112px + env(safe-area-inset-bottom));
    }

    #parent-subscription .parent-subscription-skeleton__section-heading {
        margin-top: 32px;
    }

    #parent-subscription .parent-subscription-skeleton__aside {
        grid-template-columns: 1fr;
    }

    #parent-subscription .parent-subscription-skeleton__feature-card,
    #parent-subscription .parent-subscription-skeleton__plan-card {
        min-height: 200px;
        padding: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .individual-page-content,
    .individual-page-skeleton {
        transition: none;
    }

    .individual-skeleton-block::after {
        animation: none;
        opacity: 0.35;
        transform: none;
    }
}
/* Individual platform RTL layout */
.individual-platform-shell {
    min-width: 0;
}

.individual-platform-navbar__content {
    column-gap: clamp(16px, 2.5vw, 48px) !important;
    row-gap: 10px;
}

.individual-platform-navbar__icon {
    width: 16px;
    margin-inline-end: 0.25rem;
}

.individual-navigation-icon {
    flex: 0 0 auto;
    margin-inline-end: 0.5rem;
}

#sidebar.individual-desktop-sidebar .individual-desktop-nav {
    width: 100%;
    max-width: none;
    align-items: stretch;
}

#sidebar.individual-desktop-sidebar .individual-desktop-nav .nav-link {
    gap: 0;
    text-align: start;
}

#roadmap-static .roadmap-step-icon-container {
    margin-right: 0 !important;
    margin-inline-end: 24px;
}

#roadmap-static progress,
#all-courses-view progress {
    direction: ltr;
}

.learning-page-shell {
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
}

#roadmap-static .roadmap-list {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
}

[dir="rtl"] .individual-platform-shell {
    text-align: right;
}

[dir="rtl"] .individual-platform-shell .text-start {
    text-align: right !important;
}

[dir="rtl"] .individual-platform-shell .text-end {
    text-align: left !important;
}

[dir="rtl"] .individual-platform-shell .ms-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

[dir="rtl"] .individual-platform-shell .me-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

[dir="rtl"] #roadmap-static progress,
[dir="rtl"] #all-courses-view progress {
    direction: rtl;
}

[dir="rtl"] #all-courses-view .course-box .badge-status {
    right: auto;
    left: 12px;
}

[dir="rtl"] .individual-profile-menu__icon--logout {
    transform: scaleX(-1);
}

[dir="rtl"]
    .individual-profile-dropdown--desktop
    .individual-profile-menu.dropdown-menu {
    top: 100% !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    transform: none !important;
}

[dir="rtl"] .individual-page-skeleton {
    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(0, 175, 197, 0.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 18%,
            rgba(216, 0, 118, 0.035),
            transparent 24%
        ),
        #fff;
}

[dir="rtl"] .individual-skeleton-block::after {
    animation-name: individual-skeleton-shimmer-rtl;
    transform: translateX(115%);
}

@keyframes individual-skeleton-shimmer-rtl {
    to {
        transform: translateX(-115%);
    }
}

@media screen and (min-width: 992px) {
    #sidebar.individual-desktop-sidebar {
        right: auto;
        left: 0;
    }

    [dir="rtl"] #sidebar.individual-desktop-sidebar {
        right: 0;
        left: auto;
        border-right: 0;
        border-left: 1px solid #eee;
    }

    [dir="rtl"] #page-content-wrapper {
        margin-right: 260px;
        margin-left: 0;
        transition-property: margin-right;
    }

    [dir="rtl"]
        #sidebar.individual-desktop-sidebar.collapsed
        ~ #page-content-wrapper {
        margin-right: 70px;
        margin-left: 0;
    }

    [dir="rtl"] #sidebar.individual-desktop-sidebar .sidebar-toggle {
        margin-right: 0.5rem !important;
        margin-left: 0 !important;
    }

    [dir="rtl"] #sidebar.individual-desktop-sidebar .sidebar-toggle i {
        display: inline-block;
        transform: scaleX(-1);
    }

    [dir="rtl"]
        #sidebar.individual-desktop-sidebar.collapsed
        .individual-navigation-icon {
        margin-inline-end: 0;
    }
}

@media screen and (min-width: 1200px) {
    #roadmap-static .roadmap-list .roadmap-item {
        align-items: stretch;
    }

    #roadmap-static .roadmap-list .roadmap-item .course-card {
        min-width: 0;
        display: grid !important;
        grid-template-columns: 228px minmax(0, 1fr);
        align-items: center !important;
        gap: 28px !important;
    }

    #roadmap-static .roadmap-list .roadmap-item .course-card .course-thumb {
        width: 100%;
        height: 128px;
        aspect-ratio: 16 / 9;
    }

    #roadmap-static .roadmap-course-content {
        min-width: 0;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) max-content;
        align-items: center !important;
        gap: 32px !important;
    }

    #roadmap-static .roadmap-list .roadmap-item .course-card .course-info {
        width: auto;
        min-width: 0;
    }

    #roadmap-static .roadmap-list .roadmap-item .course-card .course-action {
        min-width: 150px;
        align-items: stretch;
        text-align: center !important;
    }

    #roadmap-static .roadmap-list .roadmap-item .course-action .btn {
        white-space: nowrap;
    }
}

@media screen and (max-width: 991.98px) {
    [dir="rtl"] #page-content-wrapper {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

@media screen and (max-width: 450px) {
    [dir="rtl"] #all-courses-view .course-box .badge-status {
        left: 16px;
    }
}

/* Individual AI tutor: bidirectional layout */
#aiChatBot {
    overflow: hidden;
    border-inline-start: 1px solid #e9eaeb;
}

#aiChatBot .chatbot-toolbar {
    min-width: 0;
    display: flex;
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    z-index: 20;
}

#aiChatBot .chatbot-language-select {
    width: 126px;
    height: 40px;
    flex: 0 0 126px;
    border: 1px solid #d5d7da;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    color: #414651;
    font-size: 14px;
    font-weight: 500;
}

#aiChatBot .chatbot-language-select:focus {
    border-color: #00afc5;
    box-shadow: 0 0 0 3px rgba(0, 175, 197, 0.14);
}

#aiChatBot .chatbot-toolbar .chatbot-close-btn {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    padding: 0;
    border: 1px solid #e9eaeb !important;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05) !important;
}

#aiChatBot .chatbot-header {
    min-height: 72px;
    padding: 12px 16px;
    padding-inline-end: 238px;
}

#aiChatBot .chatbot-header > .d-flex,
#aiChatBot .chatbot-identity {
    min-width: 0;
}

#aiChatBot .chatbot-identity {
    text-align: start !important;
}

#aiChatBot .chatbot-identity h6,
#aiChatBot .chatbot-identity small {
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#aiChatBot .chatbot-main {
    direction: inherit;
    padding: 20px !important;
}

#aiChatBot .chatbot-main .chat-message {
    width: fit-content;
    max-width: min(82%, 410px);
    text-align: start;
}

#aiChatBot .chatbot-main .chat-message-meta {
    text-align: start;
}

#aiChatBot .chatbot-main .message {
    max-width: 100%;
    padding: 10px 12px !important;
    line-height: 1.65;
    text-align: start;
}

#aiChatBot .chatbot-main .markdown-content {
    unicode-bidi: plaintext;
}

#aiChatBot .chatbot-main .markdown-content pre,
#aiChatBot .chatbot-main .markdown-content code {
    direction: ltr;
    text-align: left;
}

#aiChatBot .chatbot-empty-state {
    max-width: 360px;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    color: #717680 !important;
    line-height: 1.7;
    text-wrap: balance;
}

#aiChatBot .chatbot-footer {
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) !important;
}

#aiChatBot .chatbot-composer {
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

#aiChatBot .chatbot-input-field {
    min-width: 0;
    flex: 1;
    position: relative;
}

#aiChatBot .chatbot-message-input {
    width: 100%;
    min-height: 44px;
    max-height: 120px;
    overflow-y: auto;
    resize: none;
    padding: 10px 44px 10px 16px !important;
    padding-inline-start: 16px !important;
    padding-inline-end: 44px !important;
    border: 1px solid #d5d7da;
    background: #fff;
    color: #252b37;
    font-size: 14px;
    line-height: 22px;
    text-align: start;
}

#aiChatBot .chatbot-message-input:focus {
    border-color: #00afc5;
    box-shadow: 0 0 0 3px rgba(0, 175, 197, 0.12);
}

#aiChatBot .chatbot-mic-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 7px;
    border-radius: 50%;
    color: #535862;
    transform: translateY(-50%);
}

#aiChatBot .chatbot-mic-btn:hover,
#aiChatBot .chatbot-mic-btn:focus-visible {
    background: #f0f9ff;
    color: #008699;
}

#aiChatBot .chatbot-send-btn {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.12);
    background: #2662a2;
    box-shadow: inset 0 -4px 0 rgba(10, 13, 18, 0.2);
}

#aiChatBot .chatbot-send-btn:focus-visible,
#aiChatBot .chatbot-toolbar button:focus-visible {
    outline: 3px solid rgba(0, 175, 197, 0.22);
    outline-offset: 2px;
}

[dir="rtl"] #aiChatBot {
    right: auto !important;
    left: 0 !important;
    border-right: 1px solid #e9eaeb;
    border-left: 0;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.05);
}

[dir="rtl"] .chatbot-launch-btn {
    right: auto;
    left: 24px;
}

[dir="rtl"] #aiChatBot .chatbot-language-select {
    padding-right: 12px;
    padding-left: 36px;
    background-position: left 12px center;
}

[dir="rtl"] #aiChatBot .chatbot-send-btn i {
    display: inline-block;
    transform: scaleX(-1);
}

@media screen and (max-width: 450px) {
    #aiChatBot .chatbot-toolbar {
        width: calc(100% - 24px);
        inset-inline: 12px;
    }

    #aiChatBot .chatbot-language-select {
        min-width: 0;
        flex: 1;
    }

    #aiChatBot .chatbot-header {
        min-height: 126px;
        align-items: flex-end;
        padding: 64px 16px 14px;
    }

    #aiChatBot .chatbot-main {
        padding: 16px !important;
    }

    #aiChatBot .chatbot-main .chat-message {
        max-width: 88%;
    }

    [dir="rtl"] .chatbot-launch-btn {
        left: 16px;
    }
}

/* Parent portal bidirectional layout */
.parent-portal-shell,
.parent-portal-content {
    min-width: 0;
}

.parent-portal-navbar {
    min-height: 64px;
    border-bottom: 1px solid #f2f4f7;
}

.parent-portal-navbar__content {
    column-gap: clamp(16px, 2.5vw, 48px) !important;
    row-gap: 10px;
}

.parent-profile-trigger {
    max-width: 230px;
}

.parent-profile-trigger .fw-medium {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#parent-sidebar .nav {
    width: 100%;
    max-width: none;
    align-items: stretch;
}

#parent-sidebar .nav .nav-link {
    gap: 0;
    text-align: start;
}

.parent-navigation-icon {
    width: 24px;
    flex: 0 0 24px;
    margin-inline-end: 0.5rem;
}

#parent-sidebar.collapsed .parent-navigation-icon {
    margin-inline-end: 0;
}

#parent-profiles-page .parent-profiles-section > .container-fluid,
#parent-settings > .container-fluid,
#parent-subscription > .container-fluid {
    width: min(100%, 1440px);
    margin-inline: auto;
}

#parent-profiles-page .profiles-grid {
    justify-content: flex-start;
}

#parent-profiles-page .profile-header,
#parent-settings,
#parent-subscription {
    text-align: start;
}

#parent-subscription .upgrade-badge .discount,
#parent-subscription .status-badge .dot {
    margin-right: 0;
    margin-inline-end: 8px;
}

#parent-subscription .status-badge .dot {
    margin-inline-end: 6px;
}

[dir="rtl"] .parent-portal-shell {
    text-align: right;
}

@media screen and (min-width: 768px) {
    [dir="rtl"] #parent-sidebar {
        right: 0;
        left: auto;
        border-right: 0;
        border-left: 1px solid #eee;
    }

    [dir="rtl"] .parent-portal-shell #page-content-wrapper {
        margin-right: 260px !important;
        margin-left: 0 !important;
        transition-property: margin-right;
    }

    [dir="rtl"] #parent-sidebar.collapsed ~ #page-content-wrapper {
        margin-right: 70px !important;
        margin-left: 0 !important;
    }
}

[dir="rtl"] .parent-portal-shell .text-start {
    text-align: right !important;
}

[dir="rtl"] .parent-portal-shell .text-end {
    text-align: left !important;
}

[dir="rtl"] .parent-portal-shell .ms-auto {
    margin-right: auto !important;
    margin-left: 0 !important;
}

[dir="rtl"] .parent-portal-shell .me-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

[dir="rtl"] .parent-portal-shell .ms-1 {
    margin-right: 0.25rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .parent-portal-shell .me-1 {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

[dir="rtl"] .parent-portal-shell .ms-2 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .parent-portal-shell .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

[dir="rtl"] .parent-portal-shell .ms-3 {
    margin-right: 1rem !important;
    margin-left: 0 !important;
}

[dir="rtl"] .parent-portal-shell .me-3 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

[dir="rtl"] .parent-portal-shell .end-0 {
    right: auto !important;
    left: 0 !important;
}

[dir="rtl"] .parent-portal-shell .start-0 {
    right: 0 !important;
    left: auto !important;
}

[dir="rtl"] .parent-portal-shell .pe-1 {
    padding-right: 0 !important;
    padding-left: 0.25rem !important;
}

[dir="rtl"] .parent-portal-shell .ps-1 {
    padding-right: 0.25rem !important;
    padding-left: 0 !important;
}

[dir="rtl"] .parent-portal-shell .pe-3 {
    padding-right: 0 !important;
    padding-left: 1rem !important;
}

[dir="rtl"] .parent-portal-shell .pe-5 {
    padding-right: 0 !important;
    padding-left: 3rem !important;
}

[dir="rtl"] .parent-portal-shell .border-end-0 {
    border-right: var(--bs-border-width) solid var(--bs-border-color) !important;
    border-left: 0 !important;
}

[dir="rtl"] .parent-portal-shell .border-start-0 {
    border-right: 0 !important;
    border-left: var(--bs-border-width) solid var(--bs-border-color) !important;
}

[dir="rtl"] .parent-profile-dropdown .individual-profile-menu.dropdown-menu {
    top: 100% !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    transform: none !important;
}

[dir="rtl"] .navbar-parent .header .sec_container .icon {
    right: 0;
    left: auto;
}

[dir="rtl"] .navbar-parent .header .sec_container .icon i,
[dir="rtl"] #parent-subscription .bi-arrow-right-short {
    display: inline-block;
    transform: scaleX(-1);
}

[dir="rtl"]
    #parent-profiles-page
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline {
    margin-right: 20px;
    margin-left: 0;
    padding-right: 20px;
    padding-left: 0;
    border-right: 2px solid #e4e6e6;
    border-left: 0;
}

[dir="rtl"]
    #parent-profiles-page
    #profile-head
    #activity
    .activity-log-section
    .activity-timeline
    .activity-item
    .activity-dot {
    right: -29px;
    left: auto;
}

[dir="rtl"] #parent-profiles-page #profile-head .general-card table td {
    border-right: 0;
    border-left: 1px solid #e9ecef;
}

[dir="rtl"]
    #parent-profiles-page
    #profile-head
    .general-card
    table
    td:last-child {
    border-left: 0;
}

[dir="rtl"] #parent-profiles-page #roadmap-section .journey2 .rail::after {
    right: auto;
    left: -38px;
    border-right-color: transparent;
    border-left-color: rgba(233, 234, 235, 0.4588235294);
}

[dir="rtl"]
    #parent-profiles-page
    #roadmap-section
    .journey2
    .steps
    .j-step
    .detail
    i {
    margin-right: 0;
    margin-left: 6px;
}

[dir="rtl"] #parent-settings .input-group-text {
    border-right: 1px solid #dee2e6;
    border-left: 0;
    border-radius: 0 8px 8px 0;
}

[dir="rtl"] #parent-settings .form-control.number,
[dir="rtl"] #parent-settings .password-field .form-control {
    border-right: 0;
    border-left: 1px solid #dee2e6;
    border-radius: 8px 0 0 8px;
}

[dir="rtl"] #parent-settings .password-field .toggle-password {
    border-right: 0;
    border-left: 1px solid #dee2e6;
    border-radius: 8px 0 0 8px;
}

[dir="rtl"] #parent-settings input:not([dir="ltr"]),
[dir="rtl"] #parent-settings select,
[dir="rtl"] #parent-settings textarea {
    text-align: right;
}

@media screen and (max-width: 767.98px) {
    #parent-sidebar {
        min-height: calc(76px + env(safe-area-inset-bottom));
        padding: 12px 12px env(safe-area-inset-bottom);
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 -8px 24px rgba(10, 13, 18, 0.06);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    #parent-sidebar .nav {
        min-width: 0;
        flex-wrap: nowrap;
        gap: 8px !important;
    }

    #parent-sidebar .nav .nav-item {
        min-width: 0;
        flex: 1;
    }

    #parent-sidebar .nav .nav-item .nav-link {
        width: 100%;
        min-height: 52px;
        padding: 10px !important;
        border-radius: 12px;
    }

    #parent-sidebar .nav .nav-item .nav-link img {
        margin: 0 !important;
    }

    #parent-sidebar .nav .nav-item .nav-link.active {
        background: #fff;
        box-shadow:
            0 3px 8px rgba(10, 13, 18, 0.08),
            inset 0 -2px 0 #e3e3e3;
    }

    .parent-portal-content {
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }
}

@media screen and (max-width: 575px) {
    [dir="rtl"] #parent-profiles-page #roadmap-section .journey2 .steps {
        align-items: flex-end;
    }

    [dir="rtl"]
        #parent-profiles-page
        #roadmap-section
        .journey2
        .steps
        .j-step {
        padding-right: 48px;
        padding-left: 0;
    }

    [dir="rtl"]
        #parent-profiles-page
        #roadmap-section
        .journey2
        .steps
        .j-step
        .dot {
        right: 16px;
        left: auto;
    }

    [dir="rtl"]
        #parent-profiles-page
        #roadmap-section
        .journey2
        .steps
        .j-step
        .info {
        right: 0;
        left: auto;
        text-align: right;
    }
}

@media screen and (max-width: 450px) {
    [dir="rtl"] #parent-profiles-page #profile-head .general-card table td {
        border: 0;
    }

    [dir="rtl"]
        #parent-profiles-page
        #profile-head
        .general-card
        td
        .fw-semibold {
        text-align: left;
    }

    [dir="rtl"]
        #parent-profiles-page
        #profile-head
        .general-card
        td[colspan="2"] {
        align-items: flex-end;
    }
}

/* Parent profile tab skeletons */
#parent-profiles-page .parent-profile-tab-region {
    min-height: clamp(440px, calc(100vh - 280px), 780px);
}

#parent-profiles-page .parent-profile-tab-skeleton {
    min-height: 100%;
    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(0, 175, 197, 0.05),
            transparent 26%
        ),
        radial-gradient(
            circle at 90% 16%,
            rgba(216, 0, 118, 0.03),
            transparent 22%
        ),
        #fff;
}

#parent-profiles-page .parent-profile-tab-skeleton__shell {
    width: 100%;
    max-width: none;
    padding: 0 0 36px;
}

#parent-profiles-page .parent-profile-skeleton__general-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}

#parent-profiles-page .parent-profile-skeleton__detail-cell {
    min-width: 0;
    min-height: 102px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 20px 24px;
    border-inline-end: 1px solid #eaecf0;
    border-block-end: 1px solid #eaecf0;
}

#parent-profiles-page .parent-profile-skeleton__detail-cell:nth-child(3n) {
    border-inline-end: 0;
}

#parent-profiles-page
    .parent-profile-skeleton__detail-cell:nth-last-child(-n + 2) {
    border-block-end: 0;
}

#parent-profiles-page .parent-profile-skeleton__detail-cell:last-child {
    grid-column: span 2;
    border-inline-end: 0;
}

#parent-profiles-page .parent-profile-skeleton__section-heading {
    width: min(320px, 68%);
    margin-block: 32px 18px;
}

#parent-profiles-page .parent-profile-skeleton__stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#parent-profiles-page .parent-profile-skeleton__roadmap {
    width: 100%;
    max-width: none;
}

#parent-profiles-page .parent-profile-skeleton__course-toolbar {
    align-items: center;
}

#parent-profiles-page .parent-profile-skeleton__filter-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

#parent-profiles-page
    .parent-profile-skeleton__filter-group
    .individual-skeleton-pill {
    margin-top: 0;
}

#parent-profiles-page .parent-profile-skeleton__course-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#parent-profiles-page .parent-profile-skeleton__achievement-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 24px;
}

#parent-profiles-page .parent-profile-skeleton__skills-card {
    max-width: none;
}

#parent-profiles-page .parent-profile-skeleton__timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-inline-start: 24px;
}

#parent-profiles-page .parent-profile-skeleton__timeline::before {
    width: 2px;
    position: absolute;
    inset-block: 14px;
    inset-inline-start: 7px;
    border-radius: 999px;
    background: #e2e8f0;
    content: "";
}

#parent-profiles-page .parent-profile-skeleton__timeline-row {
    min-width: 0;
    display: flex;
    align-items: center;
    position: relative;
}

#parent-profiles-page .parent-profile-skeleton__timeline-dot {
    width: 14px;
    height: 14px;
    position: absolute;
    z-index: 1;
    inset-inline-start: -24px;
    flex: 0 0 14px;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #d0d5dd;
}

#parent-profiles-page .parent-profile-skeleton__activity-card {
    min-width: 0;
    width: 100%;
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 20px;
}

@media screen and (max-width: 991.98px) {
    #parent-profiles-page .parent-profile-skeleton__course-grid,
    #parent-profiles-page .parent-profile-skeleton__achievement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 600px) {
    #parent-profiles-page .parent-profile-tab-region {
        min-height: calc(100vh - 250px);
    }

    #parent-profiles-page .parent-profile-tab-skeleton__shell {
        padding: 0 0 calc(104px + env(safe-area-inset-bottom));
    }

    #parent-profiles-page .parent-profile-skeleton__general-card {
        grid-template-columns: 1fr;
    }

    #parent-profiles-page .parent-profile-skeleton__detail-cell,
    #parent-profiles-page .parent-profile-skeleton__detail-cell:nth-child(3n),
    #parent-profiles-page
        .parent-profile-skeleton__detail-cell:nth-last-child(-n + 2) {
        min-height: 82px;
        padding: 16px;
        border-inline-end: 0;
        border-block-end: 1px solid #eaecf0;
    }

    #parent-profiles-page .parent-profile-skeleton__detail-cell:last-child {
        grid-column: span 1;
        border-block-end: 0;
    }

    #parent-profiles-page .parent-profile-skeleton__stats-grid {
        grid-template-columns: 1fr;
    }

    #parent-profiles-page .parent-profile-skeleton__course-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    #parent-profiles-page .parent-profile-skeleton__course-toolbar > span,
    #parent-profiles-page .parent-profile-skeleton__filter-group {
        width: 100%;
    }

    #parent-profiles-page .parent-profile-skeleton__filter-group {
        justify-content: flex-start;
    }

    #parent-profiles-page
        .parent-profile-skeleton__filter-group
        .individual-skeleton-pill {
        width: min(132px, calc(50% - 6px));
    }

    #parent-profiles-page .parent-profile-skeleton__course-grid,
    #parent-profiles-page .parent-profile-skeleton__achievement-grid {
        grid-template-columns: 1fr;
    }

    #parent-profiles-page .parent-profile-skeleton__activity-card {
        min-height: 100px;
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        padding: 16px;
    }
}

/* a question's picture: large enough for a child to read it, never taller than leaves room for the choices */
.quiz-shared-question-image {
    display: block;
    max-width: 100%;
    max-height: 38vh;
    margin: 14px auto 6px;
    border-radius: 14px;
    object-fit: contain;
}

/* the spoken question: a big speaker a young child can tap to hear it again */
.quiz-shared-question--spoken {
    position: relative;
    padding-inline-start: 72px;
    min-height: 60px;
}

.quiz-question-speak {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 50%;
    background: #ffb800;
    color: #1b1b1f;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.quiz-question-speak:focus-visible {
    outline: 3px solid #1b1b1f;
    outline-offset: 2px;
}

.quiz-question-speak.is-playing {
    animation: quiz-question-speak-pulse 1s ease-in-out infinite;
}

@keyframes quiz-question-speak-pulse {
    50% { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-question-speak.is-playing { animation: none; }
}