/*Custom*/

/* Spinner for form[data-guard-submit] , see public/js/prevent-double-submit.js */
.btn-submit-spinner {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
    animation: btn-submit-spin 0.7s linear infinite; margin-inline-end: 6px;
    vertical-align: -2px;
}
@keyframes btn-submit-spin { to { transform: rotate(360deg); } }

/* Toggle-switch "opt-in" card , used for the newsletter checkbox on sign-up.
   Real checkbox is visually hidden but stays keyboard/focus/screen-reader
   accessible; everything else is driven off its :checked state via sibling
   selectors so no JS is needed. */
.opt-in-card {
    position: relative; display: flex; align-items: center; gap: 14px; cursor: pointer;
    padding: 14px 16px; border-radius: 12px; border: 1.5px solid #e5e7eb;
    background: #fafafe; transition: border-color 0.2s ease, background 0.2s ease;
}
.opt-in-card:hover { border-color: #c7c7f5; background: #f5f5ff; }
.opt-in-card:has(.opt-in-card__input:checked) { border-color: #4242d6; background: #f5f5ff; }

.opt-in-card__input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.opt-in-card__icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
    background: #eceafd; color: #4242d6; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}
.opt-in-card__input:checked ~ .opt-in-card__icon { background: #4242d6; color: #fff; }

.opt-in-card__text { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; }
.opt-in-card__text strong { font-size: 13.5px; font-weight: 700; color: #1c1c6e; }
.opt-in-card__text span { font-size: 12px; color: #6b7280; line-height: 1.4; }

.opt-in-card__switch {
    flex-shrink: 0; position: relative; width: 42px; height: 24px; border-radius: 999px;
    background: #d1d5db; transition: background 0.2s ease;
}
.opt-in-card__switch::before {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}
.opt-in-card__input:checked ~ .opt-in-card__switch { background: #4242d6; }
.opt-in-card__input:checked ~ .opt-in-card__switch::before { transform: translateX(18px); }
.opt-in-card__input:focus-visible ~ .opt-in-card__switch { outline: 2px solid #4242d6; outline-offset: 2px; }

/* Change-password step 3 "identity verified" banner , replaces a single
   cramped sentence stacking "Identity verified" + a redundant "OTP
   confirmed" badge into one line with a clear icon + title + subtext row. */
.cp-verified-banner {
    display: flex; align-items: center; gap: 14px;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px;
    padding: 14px 16px; margin-bottom: 20px;
}
.cp-verified-banner__icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
    background: #16a34a; color: #fff; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
}
.cp-verified-banner__text { display: flex; flex-direction: column; gap: 2px; }
.cp-verified-banner__text strong { font-size: 14px; font-weight: 700; color: #14532d; }
.cp-verified-banner__text span { font-size: 12.5px; color: #15803d; }

/* The theme's own .btn rule (app.min.css) sets display:flex and
   justify-content:center but never sets align-items , so any button mixing
   an icon with text (icon font glyphs have their own line-height quirks)
   comes out vertically misaligned by default. This has been patched
   per-button with an inline "!flex items-center gap-8" utility combo
   several times across the mentor/student/public areas; fixing it once
   here instead, since custom.css loads after app.min.css site-wide and
   .btn never declares align-items itself, so this simply fills the gap
   with no !important fight needed. New icon+text buttons should no longer
   need the "!flex items-center gap-8" workaround at all. */
.btn { align-items: center; }

/* Muted secondary button variant used across the mentor portal (Edit link,
   Confirm Payment, etc). Global so it's defined once for every page that
   uses it, instead of getting silently redefined or missing per page , the
   theme's .btn rule forces color:#ffffff !important on everything, so the
   override here needs !important too or it silently loses. */
.btn-meeting-muted {
    background: #f3f4f6 !important; border: 1px solid #e5e7eb !important; color: #374151 !important;
    padding: 6px 16px;
}
.btn-meeting-muted:hover { background: #e5e7eb !important; border-color: #d1d5db !important; color: #374151 !important; }

.font-size-em {
    font-size:1.5em
}
.w-45{
    width:45%;
}
.coupoun-button {
    padding: 21px 8px !important;
}

.top-tiny {
    top: 1.5px;
}

.align-items-baseline {
    align-items: baseline;
}

.link-disabled {
    pointer-events: none;
    cursor: default;
    position:relative;
}
.link-disabled:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
}
.ph-align {
    vertical-align: -0.1em !important;
}

/*Responsive Customizations*/
@media screen and (max-width:590px){
    .curriculam-item {
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }
}
/*Creating Badges without font-size */
.badge{
    display: inline-block;
    padding: 0.25em 0.4em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}
.natural-badge {
    background:#f3f4f6;
    color:#374151;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
}
.natural-badge-light {
    background:#cedeff;
    color:#374151;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
}
.badge-radius {
    display: inline-block;
    padding: 0.25em 0.8em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 13px;
}
.pb-unset {
    padding-bottom:unset !important;
}
/* Badge with Icon (img)*/
.badge-circle-with-icon {
    display: inline-block;
    align-items: center;
    padding: 8px;
    justify-content: center;
    width: max-content;
    height: max-content;
    border-radius: 0.8rem;
    color: #374151;
    font-weight: 600;
    font-size: 12px;
}

.badge-circle-with-icon img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    padding: 2px;
    background: #f3f3f3ee;
}

.mine-w-14 {
    min-width: 14rem;
}

/* dropdown-menu overrides */
.custom-drop-menu .dropdown-menu {
    padding: 0;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    min-width: 230px;
}

/* header block */
.custom-drop-menu .dropdown-user-header {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    color: inherit;
    text-decoration: none;
}
.custom-drop-menu .dropdown-user-header:hover {
    background: rgba(0, 0, 0, 0.02);
}

.custom-drop-menu .dropdown-user-header__chevron {
    margin-inline-start: auto;
    font-size: 14px;
    color: #b3b3b3;
    flex-shrink: 0;
}

.custom-drop-menu .dropdown-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #EEEDFE;
    color: var(--sec-color-light);
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.custom-drop-menu .dropdown-avatar img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* menu groups */
.custom-drop-menu .dropdown-group {
    padding: 6px;
}

.custom-drop-menu .dropdown-group + .custom-drop-menu .dropdown-group {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* items */
.custom-drop-menu .dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    font-size: 13px;
    /* Tight line box so Arabic (Readex Pro) labels centre against the icon
       instead of riding above it. Harmless for Latin. */
    line-height: 1.2;
    color: #1a1a1a;
    transition: background 0.12s;
}

.custom-drop-menu .dropdown-item:hover {
    background: #f5f5f5 !important;
    color: #1a1a1a !important;
}

/* icon box */
.custom-drop-menu .dropdown-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--sec-color-light);
    flex-shrink: 0;
}

/* sign out (danger) */
.custom-drop-menu .dropdown-item.item-danger,
.custom-drop-menu .dropdown-item.item-danger:hover {
    color: #A32D2D !important;
}

.custom-drop-menu .dropdown-item.item-danger .dropdown-item-icon {
    background: #FCEBEB;
    color: #A32D2D;
}

.custom-drop-menu .dropdown-item.item-danger:hover {
    background: rgba(252, 235, 235, 0.3) !important;
}

/* mentor/student dashboard switch */
.custom-drop-menu .dropdown-item.item-mentor-switch,
.custom-drop-menu .dropdown-item.item-mentor-switch:hover {
    color: #4242d6 !important;
}

.custom-drop-menu .dropdown-item.item-mentor-switch .dropdown-item-icon {
    background: #ECEBFF;
    color: #4242d6;
}

.custom-drop-menu .dropdown-item.item-mentor-switch:hover {
    background: rgba(66, 66, 214, 0.08) !important;
}
.btn-signin-custom {
   padding-block: var(--padding-block-header);
    padding-inline: var(--padding-inline-header);
    background: var(--sec-color-light);
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    border-radius: 50px;
    border: 1px solid var(--sec-color-light);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 4px rgba(83, 74, 183, 0.18);
    letter-spacing: 0.1px;
}

.btn-signin-custom:hover {
    background: var(--sec-color);
    border-color: var(--sec-color);
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(83, 74, 183, 0.28);
}

.btn-signin-custom i {
    font-size: 15px;
}
.rounded-icon-bg {
    background: var(--accent-color);
    border-radius: 50%;
    padding: 10px;
}

/* Mobile Menu */

/* ── PANEL ── */
.custom-mobile-menu .mobile-menu__inner {
    background: var(--color-white, #fff);
    border-radius: 0 16px 16px 0;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    padding: 0;
    position: relative;
    top: 15px;
}

/* ── CLOSE BUTTON ── */
.custom-mobile-menu .close-button {
    position: absolute;
    top: 14px; right: 14px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #f5f5f5;
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #666;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    z-index: 1;
}
.custom-mobile-menu .close-button:hover {
    background: #EEEDFE;
    color: var(--sec-color-light);
}

/* ── LOGO ── */
.custom-mobile-menu .mobile-menu__logo {
    display: flex;
    align-items: center;
    padding: 16px 16px 14px;
    border-bottom: 0.5px solid rgba(0,0,0,0.06);
}

/* ── USER HEADER ── */
.custom-mobile-menu .mm-user-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 0.5px solid rgba(0,0,0,0.06);
}
.custom-mobile-menu .mm-user-header__link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.custom-mobile-menu .mm-user-header__text { min-width: 0; flex: 1; }
.custom-mobile-menu .mm-user-header__chevron { font-size: 13px; color: #b3b3b3; flex-shrink: 0; }
.custom-mobile-menu .mm-avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #EEEDFE;
    color: var(--sec-color-light);
    font-size: 12px; font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.custom-mobile-menu .mm-avatar img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.custom-mobile-menu .mm-user-name {
    font-size: 13px; font-weight: 500;
    color: #1a1a1a; margin: 0;
}
.custom-mobile-menu .mm-user-role {
    font-size: 11px; color: #888;
    margin: 1px 0 0;
}

/* ── MENU GROUPS ── */
.custom-mobile-menu .mm-group {
    padding: 6px 8px;
}
.custom-mobile-menu .mm-group + .custom-mobile-menu .mm-group {
    border-top: 0.5px solid rgba(0,0,0,0.06);
}

/* ── ITEMS ── */
.custom-mobile-menu .nav-menu__item {
    list-style: none;
    border: none !important;
    margin: 0 !important;
}
.custom-mobile-menu .nav-menu__link {
    display: flex !important;
    align-items: center;
    gap: 13px;
    padding: 14px 20px !important;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    color: #1a1a1a !important;
    transition: background 0.12s;
    border-radius: unset !important;
    border-bottom: unset !important;
}
.custom-mobile-menu .nav-menu__link:hover {
    background: #f5f5f5 !important;
}

/* ── ICON BOX ── */
.custom-mobile-menu .nav-menu__link .nav-icon-box {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--sec-color-highlight);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--sec-color);
    flex-shrink: 0;
}

/* ── CHEVRON ── */
.custom-mobile-menu .nav-menu__link .nav-chevron {
    margin-left: auto;
    font-size: 14px;
    color: #bbb;
}

/* ── SUBMENU ── */
.custom-mobile-menu .nav-submenu {
    margin: 0 0 4px 48px;
    padding: 2px 0;
    border-left: 2px solid #EEEDFE;
    list-style: none;
}
.custom-mobile-menu .nav-submenu__link {
    display: block;
    padding: 13px 38px;
    font-size: 12.5px;
    color: #555;
    border-radius: 7px;
    transition: background 0.12s, color 0.12s;
}
.custom-mobile-menu .nav-submenu__link:hover,
.custom-mobile-menu .nav-submenu__item.activePage .nav-submenu__link {
    background: #EEEDFE;
    color: var(--sec-color-light);
}


/* ── SIGN OUT ── */
.custom-mobile-menu .nav-menu__item.item-danger .nav-menu__link {
    color: #A32D2D !important;
}
.custom-mobile-menu .nav-menu__item.item-danger .nav-icon-box {
    background: #FCEBEB;
    color: #A32D2D;
}
.custom-mobile-menu .nav-menu__item.item-danger .nav-menu__link:hover {
    background: rgba(252,235,235,0.4) !important;
}

/* ── MENTOR/STUDENT DASHBOARD SWITCH ── */
.custom-mobile-menu .nav-menu__item.item-mentor-switch .nav-menu__link {
    color: #4242d6 !important;
}
.custom-mobile-menu .nav-menu__item.item-mentor-switch .nav-icon-box {
    background: #ECEBFF;
    color: #4242d6;
}
.custom-mobile-menu .nav-menu__item.item-mentor-switch .nav-menu__link:hover {
    background: rgba(66,66,214,0.08) !important;
}
.custom-mobile-menu {
    padding: -webkit-calc(var(--spacing) * 2) !important;
    padding: calc(var(--spacing) * 2) !important;
}

/* ── DASHBOARD SIDEBAR MENU TOGGLE (mobile) , shared by student & mentor portals ── */
.dashboard-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.dashboard-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.22);
}
@media (max-width: 1200px) {
    .dashboard-menu-toggle {
        display: flex;
    }
}

/* Language switcher: header on desktop, sidebar menu on mobile , never
   both, so a visitor doesn't see it twice. The header instance is the
   default; hidden below the same 1200px breakpoint the sidebar itself
   turns into a mobile off-canvas menu at, in favor of the menu instance
   added right after it in student/mentor sidebar.blade.php, which stays
   hidden above that breakpoint the same way. */
.header-right .language-switcher {
    display: inline-flex;
}
.dashboard-sidebar-lang-switcher {
    display: none;
}
@media (max-width: 1200px) {
    .header-right .language-switcher {
        display: none;
    }
    .dashboard-sidebar-lang-switcher {
        display: block;
    }
}

.dashboard-sidebar-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #6b7280;
    border: none;
    cursor: pointer;
    margin-bottom: 16px;
    margin-left: auto;
}
@media (max-width: 1200px) {
    .dashboard-sidebar-close {
        display: flex;
    }
}

/* ── SIDEBAR: scrollable nav area + always-visible pinned logout footer ──
   Replaces the old position:absolute logout (which floated over the nav
   list with no reserved space) with a normal flex-column layout: the nav
   list scrolls in its own bounded area, the footer is a real last child
   that's always visible without overlapping anything. Shared by both the
   student and mentor sidebars. */
.student-dashboard-sidebar {
    display: flex;
    flex-direction: column;
}
.dashboard-sidebar-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}
.dashboard-sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid #f3f4f6;
    margin-top: 16px;
    padding-top: 12px;
}
.dashboard-sidebar-footer a {
    color: #dc2626 !important;
}
.dashboard-sidebar-footer a:hover {
    background: #fef2f2 !important;
}

/* The theme's own mobile rule for .student-dashboard-sidebar (app.min.css,
   @media max-width:1200px) sets overflow-y:auto on the OUTER sidebar
   panel — a leftover from before the flex-column + .dashboard-sidebar-scroll
   split above existed, back when the whole sidebar was one scrolling
   block. Now that the middle section scrolls on its own (flex:1 1 auto +
   min-height:0, sized to leave the avatar header and logout footer
   always visible), the outer panel is a flex column that fits its own
   content exactly — except sub-pixel rounding on `height: 100vh` routinely
   leaves it 1-2px taller than the viewport, just enough for its own
   overflow-y:auto to activate too. The result is two independent
   scrollbars stacked on top of each other (the sitewide ::-webkit-scrollbar
   rule styles both, so neither is visually obvious as "the wrong one") —
   the outer one drags the *entire panel*, including the fixed avatar
   header, by a couple of pixels, which is what actually made reaching the
   list's last items (this menu's language switcher included) require
   scrolling inside one exact, easy-to-miss few-pixel band instead of just
   the list itself. Nothing should ever overflow the outer panel on
   purpose, so this can just be turned off. */
@media (max-width: 1200px) {
    .student-dashboard-sidebar {
        overflow-y: hidden;
    }
}

/* A second, deeper instance of the exact same problem: .student-dashbord-scrollbar
   (the theme's original scroll mechanism for this list, app.min.css, no media
   query so it's unconditional at every width) sets its own fixed `height:
   calc(100vh - 349px)` and `overflow-y: auto` — predating .dashboard-sidebar-scroll
   above, which was added later as this element's *parent* to get the current
   fixed-header/scrolling-list/fixed-footer layout, but never removed the
   scroll behavior it was wrapping. The result: the list scrolls inside
   .dashboard-sidebar-scroll, and *inside that*, its own content scrolls
   again inside .student-dashbord-scrollbar — two nested scroll ranges for
   one list, so depending on exactly where a touch/scroll gesture starts you
   move one or the other, and only a narrow band of the box scrolls the one
   that actually reaches the list's last items. Letting this element size to
   its own content and leaving the scrolling entirely to its parent removes
   the inner range instead of trying to keep both in sync. */
.student-dashbord-scrollbar {
    height: auto;
    overflow-y: visible;
}

.custom-mobile-menu .has-submenu>a::before {
    inset-inline-end: 3% !important;
}
.custom-mobile-menu.nav-menu--mobile .nav-menu__link {
    border: unset !important;
}

.custom-mobile-menu .nav-menu--mobile .nav-submenu__link {
    border: unset !important;
}
.custom-mobile-menu .nav-menu__item.active .nav-submenu {
    border-left: 2px solid var(--sec-color-light) !important;
    border-radius: unset !important;
}
.btn-custom-mobile-menu {

    border-radius: 8px !important;
    padding-block: 8px !important;
    padding-inline: 14px !important;
    font-size: 12px !important;
}
.signin-mobile-menu {
    /* Logical, not physical — margin-left:auto stayed on the physical left
       in RTL too, so the sign-in button and the "wanna be a member?" text
       kept the LTR-only gap between them instead of mirroring like the rest
       of the menu. margin-inline-start follows the current reading
       direction instead of a fixed physical side. */
    margin-inline-start: auto;
}
 .dropdown-group {
    padding: 6px 0;
}

.dropdown-group {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/*Custom Filter*/
/* wrapper that holds icon + input together */
.pf-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.pf-icon {
    position: absolute;
    left: 10px;
    font-size: 15px;
    color: #aaa;
    pointer-events: none;
    line-height: 1;
    /* DO NOT set z-index — causes stacking issues with Bootstrap */
}

/* custom select — avoids Bootstrap form-select conflicts entirely */
.pf-select {
    width: 100%;
    height: 38px;
    padding: 0 32px 0 32px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    color: #1a1a1a;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3Csvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pf-select:focus {
    border-color: #534AB7;
    box-shadow: 0 0 0 3px rgba(83,74,183,0.10);
}

/* custom input */
.pf-input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 32px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    color: #1a1a1a;
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pf-input::placeholder { color: #bbb; }
.pf-input:focus {
    border-color: #534AB7;
    box-shadow: 0 0 0 3px rgba(83,74,183,0.10);
}

/* buttons */
.pf-btn-filter {
    height: 38px;
    padding: 0 18px;
    background: #534AB7;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.pf-btn-filter:hover { background: #3C3489; }

.pf-btn-reset {
    height: 38px;
    padding: 0 16px;
    background: transparent;
    color: #666;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.pf-btn-reset:hover { background: #f5f5f5; color: #1a1a1a; }
/* .custom-table-responsive always co-occurs with Bootstrap's own
   .table-responsive on the same element (see student/pages/payments.blade.php),
   which already sets overflow-x:auto — so scrolling the table itself needs
   nothing here. This block used to *also* force the wrapper to `width:
   100vh` (a copy-paste of the wrong axis; 100vh is the viewport's HEIGHT,
   not its width) and set `overflow: scroll` (both axes, always-visible
   scrollbars) on both this wrapper and its outer card. On a tall narrow
   phone 100vh comfortably exceeds the viewport's actual width, stretching
   the wrapper wider than the table itself needed and forcing the OUTER
   card into its own second, vertically-scrolling-too overflow region to
   absorb it — two nested scroll containers instead of one, sized off a
   number with no relation to the layout. Removed outright: the table's
   own horizontal scroll (`overflow-x: auto` on the wrapper Bootstrap
   already puts here) is sufficient once the flex row it sits in can
   actually shrink to make room for it — see the `min-width:0` wrapper
   around @yield('content') in student/layouts/app.blade.php, the matching
   fix already in place on the mentor layout. */

/* Bootstrap's .table-responsive only scrolls what actually overflows it —
   table cells wrap by default, so a narrow viewport just squeezes every
   column into a multi-line stack instead of scrolling (student/mentor
   payments, wallet, and plan-invoices tables all hit this once the width
   bug above stopped forcing the container artificially wide). Keeping
   cells on one line is what makes there be anything to scroll to in the
   first place — the table stays its natural full width and the wrapper's
   overflow-x carries the rest, touch-scrollable, instead of the columns
   collapsing into unreadable stacked fragments. */
.table-responsive table th,
.table-responsive table td {
    white-space: nowrap;
}

/* ── CATEGORY OVERFLOW ("+N") BADGE — x-category-badges component ──
   Any card or header showing a list of categories/tags can overflow past
   a handful of them (5+ categories on a course isn't unusual); this is the
   shared "show the first couple, collapse the rest into a +N badge" UI for
   all of them — one component, one set of rules, used everywhere a card
   lists categories instead of each page re-solving the same overflow
   problem on its own. inset-inline-start (not left) so the dropdown opens
   from the correct physical side in both English and Arabic without a
   separate RTL override. */
.category-more {
    position: relative;
    display: inline-block;
}

.category-more__trigger {
    cursor: pointer;
    border: none;
    font: inherit;
}

.category-more__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px;
    min-width: 200px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
    z-index: 20;
    flex-direction: column;
    gap: 2px;
}

/* Hover keeps this working exactly as before on desktop — kept open while
   the cursor moves from the trigger into the dropdown itself (a small gap
   between them, bridged by the trigger's own padding); a plain :hover on
   .category-more alone would close it the instant the cursor left the
   badge on its way down to the list. .category-more--open is the touch
   equivalent: there's no hover state on a phone, so the trigger's own tap
   handler (see the @once script below) toggles this class instead — needed
   now that this component reaches mobile cards (student dashboard, enrolled
   courses) it never used to, where hover was never reachable to begin with. */
.category-more:hover .category-more__dropdown,
.category-more__dropdown:hover,
.category-more.category-more--open .category-more__dropdown {
    display: flex;
}

.category-more__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.category-more__item:hover {
    background: #f3f4f6;
}

.readonly {

}
/* Responsive Dashboard Customization [Enrolled Courses]*/
@media (max-width: 1200px) {
    .title-button-container-sm {
        width: 100%;
        justify-content: space-between;
        align-items: center !important;
    }

    .w\:sm-100 {
        width: 100%;
    }
    .contain-items-shadow\:sm li a {
        box-shadow: 0 0 8px -4px;
    }
    .mb-unset\:sm {
        margin-bottom: unset !important;

    }
    .circled-burger\:sm {
        background: #eff4ef;
        border-radius: 50%;
        padding: 0.3rem 0.6rem;
        color: var(--sec-color-light) !important;
        border: 8px solid;
    }
    .mb-12\:sm {
        margin-bottom: 12px !important;

    }
}
.bundle-badge-wrap {
    position: relative;
}

.bundle-badge-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 99;
}

.bundle-badge-wrap:hover .bundle-badge-tooltip {
    opacity: 1;
    transform: translateY(0);
}

.bundle-badge:hover {
    transform: scale(1.12);
    transition: transform 0.15s ease;
}
.scale-hover:hover {
    transform: scale(1.12);
    transition: transform 0.15s ease;
}
.opacity-7 {
    opacity: 0.7;
}

@keyframes lowSlowFade {
    0% {
        opacity: 0;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
    100% {
        opacity: 0.7 ;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }

}
.low-slow-fade {
    animation: lowSlowFade 3s linear forwards;
}
.start-opacity{
    opacity: 0;
}

.danger-message-container {
    background: rgba(255, 100, 100, 0.1);
    border-left: 3px solid #e24b4a;
    border-radius: 0 8px 8px 0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.danger-message-container i {
    color: #e24b4a; font-size: 18px;
}
.danger-message-container span {
    font-size: 13px; color: #e24b4a;
}
.flex-1 {
    flex: 1;
}

/* --- Modern Custom Dropdown Wrapper --- */
.modern-dropdown-wrapper {
    position: relative;
    width: 100%;
    min-width: 160px; /* Adjust based on your layout needs */
}

/* --- The Button (Replaces the <select> box) --- */
.modern-custom-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem; /* Matches your current look */
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-custom-select-btn:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
}

/* --- The Arrow Icon --- */
.modern-dropdown-arrow {
    width: 1.25rem;
    height: 1.25rem;
    color: #64748b;
    transition: transform 0.2s ease-in-out;
}

/* --- The Floating List (Replaces the native options menu) --- */
.modern-dropdown-list {
    position: absolute;
    top: calc(100% + 0.5rem); /* Pushes it slightly below the button */
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem; /* Modern rounded corners */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Deep soft shadow */
    z-index: 50; /* Ensures it stays above your course cards */
    max-height: 250px;
    overflow-y: auto; /* Scrollbar for long lists */
    padding: 0.5rem 0; /* Padding top and bottom of the list */
}

/* --- The Individual List Items --- */
.modern-dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.modern-dropdown-item:hover {
    background-color: #f1f5f9; /* Soft gray/blue on hover */
    color: #0f172a;
}

/* Optional: Custom styling for the scrollbar inside the dropdown */
.modern-dropdown-list::-webkit-scrollbar {
    width: 6px;
}
.modern-dropdown-list::-webkit-scrollbar-track {
    background: transparent;
}
.modern-dropdown-list::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
}
/* --- Dropdown Interaction Utilities --- */

/* Flips the SVG arrow upside down when the menu is open */
.rotate-180 {
    transform: rotate(180deg);
}

/* Changes the border color to your theme's secondary light color when active */
.border-blue-500 {
    border-color: var(--sec-color-light) !important;
}

/* Creates the soft glow (ring) around the button when active, using your highlight color */
.ring-2.ring-blue-500 {
    box-shadow: 0 0 0 2px var(--sec-color-highlight);
}

/* Fallback just for the generic ring-2 in case it's used alone */
.ring-2 {
    box-shadow: 0 0 0 2px var(--sec-color-highlight);
}

/* New styles for responsive filter layout */
.modern-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem; /* Space below the header */
}

.modern-filters-title {
    font-size: 1.5rem; /* Adjust as needed */
    font-weight: 700;
    color: #1a1a1a;
}

/* Mobile Filters Controls */
.modern-filters-controls {
    position: relative; /* For positioning the mobile filter wrapper */
}

.modern-filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-filter-toggle-btn:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
}

.modern-filter-toggle-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #64748b;
}

.modern-filters-wrapper-mobile {
    /* Base styles for mobile (hidden by default, shown when toggled) */
    position: absolute;
    top: calc(100% + 0.5rem); /* Position below the toggle button */
    right: 0;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 60; /* Higher than dropdown lists */
    padding: 1rem;
    width: 280px; /* Fixed width for the mobile card */
    max-width: calc(100vw - 2rem); /* Prevent overflow on very small screens */
}

/* Desktop Filters Controls */
.modern-filters-controls-desktop {
    position: relative; /* Added this line to fix positioning */
    display: flex;
    align-items: center;
    gap: 1rem; /* Space between sort filter and more filters button */
}

.modern-more-filters-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-more-filters-btn:hover {
    border-color: #cbd5e1;
    background-color: #f8fafc;
}

.modern-more-filters-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #64748b;
}

.modern-filters-card-desktop {
    position: absolute;
    top: calc(100% + 0.5rem); /* Position below the toggle button */
    right: 0;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 60; /* Higher than dropdown lists */
    padding: 1rem;
    width: 320px; /* Fixed width for the desktop card */
}

.modern-filters-group {
    display: flex;
    flex-wrap: wrap; /* Allows filters to wrap to the next line */
    gap: 1rem; /* Space between filter dropdowns */
}

/* Responsive adjustments */
@media (min-width: 1024px) { /* Tailwind's 'lg' breakpoint */
    .modern-filters-controls {
        display: none; /* Hide mobile controls on large screens */
    }

    .modern-filters-controls-desktop {
        display: flex !important; /* Show desktop controls on large screens */
    }

    .modern-filters-wrapper-mobile {
        display: none !important; /* Ensure mobile wrapper is hidden on large screens */
    }

    .modern-filters-card-desktop .modern-filters-group {
        flex-direction: column; /* Stack filters vertically inside the desktop card */
        gap: 0.75rem;
    }

    .modern-filters-card-desktop .modern-dropdown-wrapper {
        width: 100%; /* Full width for dropdowns inside the card */
    }
}

@media (max-width: 1023px) { /* Styles for screens smaller than 'lg' (mobile) */
    .modern-filters-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .modern-filters-title {
        width: 100%;
        text-align: center;
    }

    .modern-filters-controls {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .modern-filters-group {
        flex-direction: column; /* Stack filters vertically on mobile */
        width: 100%;
    }

    .modern-dropdown-wrapper {
        width: 100%; /* Full width for stacked dropdowns */
    }

    .modern-filters-controls-desktop {
        display: none !important; /* Hide desktop controls on mobile */
    }
}



.common-accordion .accordion-body {
    max-height: 31vh;
    overflow-y: auto;
}
.duration-300{
    transition-duration: 300ms;
}

.minus-42-ml {
    /* Logical, not physical: this pulls the search button back over the end
       of its input to sit embedded inside it. margin-left only pulls it the
       right way in LTR — in RTL the button's natural position is already on
       the left (end) side, so a physical left-pull dragged it further away
       from the input instead of into it. margin-inline-start follows
       whichever side is actually "back toward the input" in either
       direction. */
    margin-inline-start: -42px;
}

/*xl:flex*/
@media (min-width: 1280px) {
    .xl\:flex {
        display: flex;
    }

}

.student-wallet-menu-item {
    background:rgb(66 136 255 / 9%);
    color:var(--sec-color);
    border:1px solid var(--color-blue-300);
    font-weight:600;
    font-size:13px;
    padding:6px 14px;
    border-radius:999px; text-decoration:none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari support */
}
.student-wallet-lg-menu-item {
    background:rgb(66 136 255 / 9%);
    color:var(--sec-color);
    border:1px solid var(--color-blue-300);
    font-weight:600; font-size:13px;
    padding:6px 14px;
    border-radius:999px;
    text-decoration:none;
    margin-right:8px;
}
.common-check.common-radio .form-check-input:checked::after {
    -webkit-transform: translate(0, 0) scale(1) !important;
    transform: translate(0, 0) scale(1) !important;
}

/* --- Floating language-switcher bubble (desktop only) --------------------
   A small pill pinned just under the navbar's right edge — fully visible at
   rest (not hiding behind the edge), so it doesn't need to be found before
   it can be used. --lang-bubble-top is kept in sync with the header's real
   bottom edge by the script in language-switcher.blade.php (accounts for
   the optional announcement banner above the header, and for the header
   becoming sticky once scrolled).

   The fixed positioning lives on .lang-bubble-group (the wrapper), not on
   .lang-bubble itself, so the optional (?) help button can sit right next
   to the pill as a second flex child instead of needing its own separately
   computed fixed coordinates. */
.lang-bubble-group {
    display: none;
    position: fixed;
    top: var(--lang-bubble-top, 96px);
    right: 16px;
    z-index: 1040;
    align-items: center;
    gap: 10px;
    transition: top 0.2s ease;
}

.lang-bubble {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(66, 66, 214, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: lang-bubble-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               lang-bubble-attention 6s ease-in-out 1.6s infinite;
}

.lang-bubble:hover,
.lang-bubble:focus-visible {
    animation: none;
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(66, 66, 214, 0.45), 0 3px 8px rgba(0, 0, 0, 0.2);
    color: #fff;
}

.lang-bubble i {
    font-size: 18px;
}

/* The (?) trigger that extends the bubble — glassy (blurred, translucent)
   rather than a solid brand-color pill like .lang-bubble itself, so the
   two read as "main action + secondary action" rather than two equally
   weighted buttons. Opens translation-beta-banner.blade.php's modal, see
   the delegated [data-open-translation-beta-modal] handler in
   language-switcher.blade.php. */
.lang-bubble-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(66, 66, 214, 0.65), rgba(45, 212, 191, 0.65));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(66, 66, 214, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    animation: lang-bubble-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s both;
}

.lang-bubble-help:hover,
.lang-bubble-help:focus-visible {
    transform: scale(1.08);
    box-shadow: 0 8px 24px rgba(66, 66, 214, 0.45), 0 3px 8px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, rgba(66, 66, 214, 0.85), rgba(45, 212, 191, 0.85));
    color: #fff;
}

@keyframes lang-bubble-entrance {
    from {
        opacity: 0;
        transform: translateY(-24px) scale(0.6);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes lang-bubble-attention {
    0%, 80%, 100% {
        transform: scale(1);
    }
    86% {
        transform: scale(1.12);
    }
    92% {
        transform: scale(0.97);
    }
    97% {
        transform: scale(1.05);
    }
}

@media (min-width: 992px) {
    .lang-bubble-group {
        display: flex;
    }
}

/* --- Mobile "switch language" row's (?) trigger ---------------------------
   The menu-item style switcher (off-canvas drawer, auth dropdown, portal
   sidebars) wraps its <a> in this row so the (?) button can sit at the row's
   end as a sibling instead of nesting inside the link — nesting would fire
   the language switch on every tap, including taps meant for the button. */
.lang-switcher-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.lang-switcher-row__link {
    flex: 1 1 auto;
    min-width: 0;
}

.lang-menu-help-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(66, 66, 214, 0.35);
    background: linear-gradient(135deg, rgba(66, 66, 214, 0.55), rgba(45, 212, 191, 0.55));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lang-menu-help-btn:hover,
.lang-menu-help-btn:focus-visible {
    transform: scale(1.12);
    box-shadow: 0 3px 10px rgba(66, 66, 214, 0.35);
    color: #fff;
}

/* The header's authenticated account dropdown embeds its own language-
   switcher menu item and is desktop-only by design, but its `!flex` /
   `sm:hidden` utility classes lose the cascade to Tailwind's @layer
   utilities in this build, so it was rendering (and staying clickable) on
   mobile too — duplicating the switcher already in the off-canvas menu and
   surfacing this dropdown's desktop-sized item spacing there. The off-canvas
   .mobile-menu switcher is the single source of truth on mobile. */
@media (max-width: 991px) {
    .header-action-btns.custom-drop-menu {
        display: none !important;
    }
}

.accordion-lesson-span.fix-wrap {
    width: 80%;
    word-wrap: break-word;
    word-break: auto-phrase;
    line-height: 1.3;
}
/* Mobile fix #1 */
@media (max-width: 767px) {
    .mentorship-home-mentors-slider:not(.slick-initialized) {
        justify-content: center;
    }

}
.mentor-submit-spinner {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
    animation: mentor-spin 0.7s linear infinite;
}
@keyframes mentor-spin { to { transform: rotate(360deg); } }
/* Stepper */
.mentor-stepper { display: flex; align-items: flex-start; justify-content: center; margin-bottom: 48px; }
.mentor-stepper__step { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; flex: 1; max-width: 200px; }
.mentor-stepper__line {
    position: absolute; top: 20px; left: 50%; width: 100%; height: 2px; background: #e5e7eb; z-index: 1;
}
.mentor-stepper__step:last-child .mentor-stepper__line { display: none; }
.mentor-stepper__circle {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 15px; background: #f3f4f6; color: #9ca3af; border: 2px solid #e5e7eb;
    transition: all 0.25s ease; position: relative; z-index: 2;
}
.mentor-stepper__label { font-size: 13px; font-weight: 600; color: #9ca3af; transition: color 0.25s ease; text-align: center; }
.mentor-stepper__step.is-active .mentor-stepper__circle { background: #4242d6; border-color: #4242d6; color: #fff; }
.mentor-stepper__step.is-active .mentor-stepper__label { color: #1c1c6e; }
.mentor-stepper__step.is-complete .mentor-stepper__circle { background: #16a34a; border-color: #16a34a; color: #fff; }
.mentor-stepper__step.is-complete .mentor-stepper__line { background: #16a34a; }
.mentor-stepper__step.is-complete .mentor-stepper__label { color: #16a34a; }
/* Placed after is-active/is-complete so a step needing attention always reads as red. */
.mentor-stepper__step.has-error .mentor-stepper__circle { background: #fee2e2; border-color: #dc2626; color: #dc2626; }
.mentor-stepper__step.has-error .mentor-stepper__label { color: #dc2626; }
.mentor-stepper__step[data-clickable="true"] { cursor: pointer; }
@media (max-width: 575px) {
    .mentor-stepper__label { font-size: 11px; }
    .mentor-stepper__circle { width: 34px; height: 34px; font-size: 13px; }
    .mentor-stepper__line { top: 17px; }
}

/* Form steps */
.form-step.is-hidden { display: none; }
.form-step__head { margin-bottom: 28px; }
.form-step__head h4 { color: #1c1c6e; margin-bottom: 6px; }
.form-step__head p { color: #6b7280; margin: 0; }
.form-step__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; }
.form-step__actions .spacer { flex: 1; }

/* Password strength checklist */
.password-requirements { list-style: none; margin: 10px 0 0 !important; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.password-requirements li {
    display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500;
    color: #9ca3af; transition: color 0.15s ease;
}
.password-requirements li i { font-size: 14px; flex-shrink: 0; }
.password-requirements li .ph-check-circle { display: none; color: #16a34a; }
.password-requirements li .ph-circle { display: inline; }
.password-requirements li.is-met { color: #16a34a; }
.password-requirements li.is-met .ph-check-circle { display: inline; }
.password-requirements li.is-met .ph-circle { display: none; }

/* Uploads */
.mentor-upload { position: relative; }
.mentor-upload__input { position: absolute; inset: 0; opacity: 0; width: 0; height: 0; }
.mentor-upload__box {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; text-align: center; cursor: pointer;
    border: 2px dashed #d1d5db; border-radius: 12px; padding: 28px 16px;
    background: #f9fafb; transition: all 0.2s ease;
}
.mentor-upload__box:hover, .mentor-upload__box.is-dragover { border-color: #4242d6; background: #f3f9ff; }
.mentor-upload__box.has-file { border-color: #16a34a; background: #f0fdf4; }
.mentor-upload__icon { font-size: 26px; color: #4242d6; margin-bottom: 4px; }
.mentor-upload__box.has-file .mentor-upload__icon { color: #16a34a; }
.mentor-upload__label { font-weight: 600; color: #374151; font-size: 14px; }
.mentor-upload__hint { font-size: 12px; color: #9ca3af; }
.mentor-upload__filename { font-size: 13px; color: #16a34a; font-weight: 600; margin-top: 6px; word-break: break-all; }

/* Choices.js — match the pill/brand styling already used for the country select in checkout */
.choices__inner { border-radius: 16px !important; background: #fff !important; border: 1px solid #e5e7eb !important; min-height: 52px !important; padding: 10px 16px !important; }
.choices__list--multiple .choices__item { background: #4242d6 !important; border-color: #4242d6 !important; border-radius: 999px !important; font-size: 13px !important; }
.choices__list--dropdown .choices__item--selectable.is-highlighted { background: #f3f9ff !important; }
.choices[data-type*="select-multiple"] .choices__button { border-left-color: rgba(255,255,255,0.4) !important; }
/* Choices.js's default remove button is a hardcoded LTR box (padding
   only on one side, a negative margin pulling it toward the pill's
   right edge) — it neither centers the "x" glyph nor mirrors in RTL.
   A fixed-size circle with logical margin fixes both. */
.choices__list--multiple .choices__item .choices__button {
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-inline-start: 6px !important;
    border-radius: 50% !important;
    background-size: 8px !important;
    background-position: center !important;
    opacity: 0.85;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.choices__list--multiple .choices__item .choices__button:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.2) !important;
}
/* Choices.js renders what you type at its own default 14px — every other
   field on this form sits at 17px, so the typed text read as a stray
   small input floating inside the big pill-shaped box. Match it. */
.choices__input { font-size: 17px !important; color: #1f2937 !important; background: transparent !important; }
/* The dropdown panel (holds results + the notice row below) ships with
   Choices' own near-square corners (2.5px) and a flat gray border —
   that's what made the "max reached" notice read as a sharp-edged strip
   bolted onto our smooth 16px-radius input, no matter what radius we
   gave the notice itself, since this panel's overflow:hidden clips it. */
.choices__list--dropdown, .choices__list[aria-expanded] {
    border-radius: 0 0 14px 14px !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.06);
}
/* Choices.js ships its "notice" row (max items reached, no results,
   no choices) completely unstyled by default — plain inherited black
   text, no visual treatment at all. Reaching the tag cap isn't an
   error, just a soft limit, so this reads as a brand-tinted nudge
   rather than a yellow/amber warning. */
@keyframes mentor-tag-notice-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.choices__notice {
    padding: 12px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    margin: 8px !important;
    cursor: default !important;
    pointer-events: none;
    animation: mentor-tag-notice-in 0.2s ease both;
}
.choices__notice.add-choice { background: rgba(66, 66, 214, 0.08); color: #4242d6; }
.choices__notice.has-no-results, .choices__notice.has-no-choices { background: #f3f4f6; color: #6b7280; font-weight: 500 !important; }
.icon-size {
    width: 50px;
    height: 50px;
}
.make-white {
    filter: brightness(0) invert(1);
}

/* Notification bell , shared by the light public header (.header, white/near-
   white background) and the dark dashboard masthead (.header.bg-neutral-900).
   Base rule below is tuned for the LIGHT header; the dark-header block right
   after it overrides colors back to white-on-translucent for that context.
   (Previously the light header inherited the dark-only white-on-white
   styling, making the bell invisible there.) */
.notif-bell { position: relative; }
.notif-bell__trigger {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(20, 18, 40, .05);
    color: #4b4a5d; cursor: pointer; transition: background .12s ease;
}
.notif-bell__trigger:hover { background: rgba(20, 18, 40, .09); }
.notif-bell__trigger i { font-size: 19px; line-height: 1; }
.notif-bell__badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 999px;
    background: #9644ef;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 2px solid #fff;
}
.bg-neutral-900 .notif-bell__trigger {
    background: rgba(255, 255, 255, .08); color: #fff;
}
.bg-neutral-900 .notif-bell__trigger:hover { background: rgba(255, 255, 255, .16); }
.bg-neutral-900 .notif-bell__badge { border-color: #3093d6; }

/* When the bell sits next to the header's search box (public header only,
   @auth), give it room instead of letting both fight over xl: width. */
.header-right:has(.notif-bell) .search-form { max-width: 190px; }
.header-right:has(.notif-bell) .search-form .common-input { padding-inline: 16px; }
.notif-bell__panel {
    position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 340px; max-width: calc(100vw - 24px);
    background: #fff; border: 1px solid #e5e3ef; border-radius: 16px;
    box-shadow: 0 18px 44px rgba(20, 18, 40, .16); z-index: 60; overflow: hidden;
}
.notif-bell__head {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
    border-bottom: 1px solid #f0eff5; font-size: 13.5px; font-weight: 700; color: #211f2e;
}
.notif-bell__markall { background: none; border: 0; color: #4242d6; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.notif-bell__markall:hover { text-decoration: underline; }
.notif-bell__list { max-height: 380px; overflow-y: auto; }
.notif-item {
    display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: start; background: none; border: 0;
    border-bottom: 1px solid #f5f4f9; padding: 12px 16px; cursor: pointer; transition: background .1s ease;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: #faf9fd; }
.notif-item.is-unread { background: #f6f5ff; }
.notif-item.is-unread:hover { background: #efeeff; }
.notif-item__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notif-item__cat { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #7a75c9; }
.notif-item.is-unread .notif-item__cat { color: #4242d6; }
.notif-item__time { font-size: 11px; color: #9a95ad; flex-shrink: 0; white-space: nowrap; }
.notif-item__title { font-size: 13px; font-weight: 600; color: #211f2e; line-height: 1.4; }
.notif-item__body { font-size: 12px; color: #79758c; line-height: 1.4; }
.notif-bell__empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; color: #9a95ad; text-align: center; }
.notif-bell__empty i { font-size: 28px; }
.notif-bell__empty p { font-size: 12.5px; margin: 0; }
.w-100p {
    width: 100% !important;
    max-width: 100% !important;
}

/* =============================================================================
   Toasts — one confirmation style for every dashboard
   -----------------------------------------------------------------------------
   Replaces four idioms in three visual languages: the workspace's inline pastel
   bar (which shoved the page down to tell you something worked), the mentor
   portal's stock SweetAlert toast, and the per-page <div>s in student and auth.

   A confirmation of an action you just took is transient — you already know
   what you did, you only need to know it landed — so it sits over the page and
   takes itself away, rather than becoming part of the layout.

   Tokens are declared locally rather than borrowed from bounty-board.css: this
   file is the only stylesheet every layout loads, and a toast must look the
   same on the student dashboard as it does in the workspace.
   ========================================================================== */
.mg-toasts {
    --mg-ok:     #2c7a51;  --mg-ok-bg:     #e6f4ec;
    --mg-warn:   #a5641a;  --mg-warn-bg:   #fbeede;
    --mg-danger: #b3392a;  --mg-danger-bg: #fbeae6;
    --mg-info:   #275ea5;  --mg-info-bg:   #e9f1fb;
    --mg-ink:    #1c1c6e;
    --mg-muted:  #7c7893;
    --mg-line:   #e7e5f2;
    --mg-enter:  cubic-bezier(.16, 1, .3, 1);

    position: fixed;
    z-index: 9999;
    inset-block-start: 18px;
    inset-inline-end: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    inline-size: min(380px, calc(100vw - 32px));
    /* The stack is a pass-through; only the toasts themselves take clicks, so
       an empty region never blocks the page underneath it. */
    pointer-events: none;
}

.mg-toast {
    --mg-tone: var(--mg-ok);
    --mg-tone-bg: var(--mg-ok-bg);
    --mg-from: 110%;

    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 11px;
    padding: 13px 13px 13px 15px;
    padding-inline-start: 15px;
    border: 1px solid var(--mg-line);
    border-radius: 14px;
    background: #fff;
    /* Two shadows: a tight one to sit it on the surface, a wide soft one so it
       reads as floating above the page rather than pasted onto it. */
    box-shadow: 0 1px 2px rgba(28, 28, 110, .06), 0 12px 28px -8px rgba(28, 28, 110, .22);
    overflow: hidden;
    pointer-events: auto;
    animation: mg-toast-in .26s var(--mg-enter) both;
}

/* The tone rail. inset-inline-start, so it moves to the right edge in Arabic
   without a second rule. */
.mg-toast::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 3px;
    background: var(--mg-tone);
}

.mg-toast--ok     { --mg-tone: var(--mg-ok);     --mg-tone-bg: var(--mg-ok-bg); }
.mg-toast--info   { --mg-tone: var(--mg-info);   --mg-tone-bg: var(--mg-info-bg); }
.mg-toast--warn   { --mg-tone: var(--mg-warn);   --mg-tone-bg: var(--mg-warn-bg); }
.mg-toast--danger { --mg-tone: var(--mg-danger); --mg-tone-bg: var(--mg-danger-bg); }

.mg-toast__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 9px;
    background: var(--mg-tone-bg);
    color: var(--mg-tone);
    font-size: 17px;
}

.mg-toast__text {
    margin: 0;
    padding-block-start: 5px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mg-ink);
    /* Messages are authored server-side in either language. */
    unicode-bidi: plaintext;
}

.mg-toast__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 26px;
    block-size: 26px;
    margin-block-start: 2px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mg-muted);
    font-size: 12px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.mg-toast__close:hover { background: var(--mg-tone-bg); color: var(--mg-tone); }
.mg-toast__close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 66, 214, .28);
}

/* How long is left, without a number. Pauses with the timer it represents. */
.mg-toast__bar {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    block-size: 2px;
    inline-size: 100%;
    background: var(--mg-tone);
    opacity: .35;
    transform-origin: inline-start;
    animation: mg-toast-bar linear both;
}
.mg-toast.is-held .mg-toast__bar { animation-play-state: paused; }

.mg-toast.is-leaving { animation: mg-toast-out .14s ease-in both; }

@keyframes mg-toast-in {
    from { opacity: 0; transform: translateX(var(--mg-from)) scale(.98); }
    to   { opacity: 1; transform: none; }
}
@keyframes mg-toast-out {
    to { opacity: 0; transform: translateX(calc(var(--mg-from) / 3)) scale(.98); }
}
@keyframes mg-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Arabic: the stack lives on the left, so it must arrive from the left. */
[dir="rtl"] .mg-toast { --mg-from: -110%; }

/* Phone: a 380px card pinned to a corner is most of a small screen and covers
   whatever is under it, so it becomes a full-width bar at the top instead,
   arriving from above rather than the side. */
@media (max-width: 560px) {
    .mg-toasts {
        inset-inline: 10px;
        inset-block-start: 10px;
        inline-size: auto;
    }
    .mg-toast { --mg-from: 0; }
    @keyframes mg-toast-in {
        from { opacity: 0; transform: translateY(-14px) scale(.98); }
        to   { opacity: 1; transform: none; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .mg-toast, .mg-toast.is-leaving { animation-duration: .01ms; }
    /* The bar is a moving countdown; without motion it just sits at full
       width, which would read as "this is not going anywhere". Hide it —
       the toast still dismisses on its own timer. */
    .mg-toast__bar { display: none; }
}

/* =============================================================================
   Student course card — an enrolled course
   -----------------------------------------------------------------------------
   The old card led with a large category pill and a student count, floated the
   progress percentage in an absolutely-positioned 50px block above a 6px bar
   (most of the stray whitespace came from there), and ended in a wrapping
   rating/instructor row with nothing pinning it — so in a grid every card's
   bottom sat at a different height depending on how many lines its title took.

   Here the body grows and the footer is pinned, so footers line up across a
   row whatever the titles do; and the footer holds the one thing the card is
   for: the next click.
   ========================================================================== */
.sc-card {
    --sc-brand: #4242d6;
    --sc-ink: #1c1c2e;
    --sc-body: #4b4a63;
    --sc-muted: #7c7893;
    --sc-line: #e9e8f1;
    --sc-ok: #2c7a51;
    --sc-ok-bg: #e6f4ec;

    display: flex;
    flex-direction: column;
    block-size: 100%;
    border: 1px solid var(--sc-line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sc-card:hover { border-color: #cfcdec; box-shadow: 0 10px 26px -14px rgba(28, 28, 110, .3); }
.sc-card--done { border-color: #cfe8da; }

.sc-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #f1f0f8;
    overflow: hidden;
}
.sc-card__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.sc-card__flag {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--sc-ok-bg);
    color: var(--sc-ok);
    font-size: 11.5px;
    font-weight: 700;
}

.sc-card__body { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px 4px; }

.sc-card__eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sc-muted);
}
.sc-card__title { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; }
.sc-card__title a {
    color: var(--sc-ink);
    text-decoration: none;
    /* Two lines, so a long title cannot push the card taller than its
       neighbours , the thing the old grid had no answer for. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sc-card__title a:hover { color: var(--sc-brand); }

.sc-card__by {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 1px 0 0;
    font-size: 12.5px;
    color: var(--sc-muted);
}
/* The initial is always rendered and the photo is layered over it, so a
   photo whose file has gone simply uncovers the initial instead of leaving a
   broken icon or a hole. */
.sc-card__by-avatar { position: relative; inline-size: 22px; block-size: 22px; flex-shrink: 0; }
.sc-card__by img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.sc-card__by-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
}
.sc-card__by-initial { background: #ecebff; color: var(--sc-brand); font-size: 11px; font-weight: 800; }

.sc-card__progress { margin-block-start: 9px; }
.sc-card__progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-block-end: 6px;
    font-size: 12px;
    color: var(--sc-muted);
}
.sc-card__progress-head b { color: var(--sc-ink); font-size: 13px; font-weight: 800; }
.sc-card__bar {
    block-size: 6px;
    border-radius: 999px;
    background: #eeedf7;
    overflow: hidden;
}
.sc-card__bar > span {
    display: block;
    block-size: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #5b5bdd, var(--sc-brand));
    transition: width .4s ease;
}
.sc-card--done .sc-card__bar > span { background: var(--sc-ok); }

/* Pinned: this is what makes every footer in a row line up. */
.sc-card__foot {
    margin-block-start: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px 16px;
}

.sc-card__next { display: flex; flex-direction: column; gap: 1px; margin: 0; min-inline-size: 0; }
.sc-card__next-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sc-muted);
}
.sc-card__next-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-card__note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--sc-muted);
}
.sc-card__note i { flex-shrink: 0; margin-block-start: 1px; font-size: 14px; }

.sc-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* 44px: a real touch target, which the old card had none of. */
    min-block-size: 44px;
    padding: 11px 16px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--sc-brand);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.sc-card__cta:hover { background: #3634b8; color: #fff; }
.sc-card__cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(66, 66, 214, .3); }
.sc-card__cta i { font-size: 15px; }
.sc-card__cta--ghost {
    background: #fff;
    border-color: var(--sc-line);
    color: var(--sc-body);
}
.sc-card__cta--ghost:hover { background: #faf9fd; border-color: #cfcdec; color: var(--sc-brand); }

@media (prefers-reduced-motion: reduce) {
    .sc-card, .sc-card__bar > span { transition: none; }
}

/* =============================================================================
   Dashboard header  —  small screens
   -----------------------------------------------------------------------------
   The header shared by the student, mentor and workspace layouts
   (student/components/header.blade.php) overflowed its own viewport on a
   phone: at 320px the bar measured 346px wide against a 320px screen.

   Two causes, both fixed here and only below the small breakpoint, so every
   width the header was already designed for is untouched:

   1. `.logo img` is a flat `max-width: 200px` (app.min.css) with nothing to
      shrink it. On a 320px screen the wordmark alone claimed 200 of the 296
      usable pixels, leaving the search / bell / Home controls to spill over
      the top of it.
   2. The Home button inherits `white-space: normal`, so once the row ran out
      of room its label wrapped one character per line , a 90px-tall column
      reading "H o m e". That is what made the header 131px tall at 320px
      against 73px on desktop, and it was the largest single thing pushing
      every dashboard's content below the fold on a phone.
   ========================================================================== */
@media (max-width: 575px) {
    .header .logo img {
        max-width: 124px;
        height: auto;
    }

    /* Never wrap a button label , the row shrinks the button, and a squeezed
       button should clip or shorten, never stack its letters vertically. */
    .header-right .btn-signin-custom {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Nothing in the bar may force the row wider than the screen. */
    .header .header-inner { min-width: 0; }
    .header .header-content-wrapper { min-width: 0; }
    .header .logo { min-width: 0; }
}

/* Keyboard access for the header dropdowns (e.g. Freelancing). The theme
   opens .nav-submenu on :hover only, so a Tab user could reach the trigger
   but never the links. :focus-visible rather than :focus-within, so a mouse
   click on the trigger doesn't leave the menu stuck open after the pointer
   leaves. The mobile drawer is untouched: its submenus are display:none and
   toggled by the theme's click handler. */
@media (min-width: 992px) {
    .has-submenu:has(:focus-visible) > .nav-submenu {
        visibility: visible;
        opacity: 1;
        margin-block-start: 0;
    }
}