/* ==========================================================
   Project Premium Experience Layer
   Senior UX polish: motion, accessibility, micro-interactions
   ========================================================== */
:root{
    --premium-glow: 0 24px 80px rgba(79,124,255,.26);
    --premium-glow-strong: 0 28px 110px rgba(124,58,237,.35);
    --premium-ease: cubic-bezier(.22,1,.36,1);
    --premium-fast: 180ms var(--premium-ease);
    --premium-med: 520ms var(--premium-ease);
    --premium-slow: 900ms var(--premium-ease);
}

html{
    scroll-padding-top: 110px;
}

body{
    isolation: isolate;
    background:
        radial-gradient(circle at 85% 5%, rgba(79,124,255,.18), transparent 32rem),
        radial-gradient(circle at 8% 28%, rgba(124,58,237,.16), transparent 28rem),
        radial-gradient(circle at 50% 100%, rgba(0,231,165,.08), transparent 34rem),
        var(--bg);
}

body::selection,
::selection{
    background: rgba(79,124,255,.45);
    color: #fff;
}

body.page-is-loading{
    overflow: hidden;
}

body:not(.is-loaded) main,
body:not(.is-loaded) section:not(.project-preloader),
body:not(.is-loaded) nav,
body:not(.is-loaded) footer{
    transition: opacity var(--premium-med), transform var(--premium-med);
}

/* Ambient background particles */
.project-ambient{
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.project-ambient span{
    position: absolute;
    width: var(--size, 22rem);
    height: var(--size, 22rem);
    border-radius: 999px;
    background: radial-gradient(circle, var(--color, rgba(79,124,255,.18)), transparent 68%);
    filter: blur(16px);
    opacity: .72;
    transform: translate3d(0,0,0);
    animation: projectFloat var(--duration, 18s) ease-in-out infinite alternate;
}
.project-ambient span:nth-child(1){ --size: 24rem; --color: rgba(79,124,255,.20); top: 6%; right: 6%; --duration: 16s; }
.project-ambient span:nth-child(2){ --size: 20rem; --color: rgba(124,58,237,.18); bottom: 18%; left: 2%; --duration: 20s; animation-delay: -4s; }
.project-ambient span:nth-child(3){ --size: 16rem; --color: rgba(0,231,165,.12); top: 42%; left: 28%; --duration: 22s; animation-delay: -8s; }
@keyframes projectFloat{
    from{ transform: translate3d(0,0,0) scale(1); }
    to{ transform: translate3d(34px,-42px,0) scale(1.12); }
}

/* Smooth top progress */
.site-scroll-progress{
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    transform-origin: right center;
    transform: scaleX(0);
    z-index: 9999;
    background: linear-gradient(90deg, var(--accent), var(--primary), var(--secondary));
    box-shadow: 0 0 18px rgba(79,124,255,.55);
}

/* Premium preloader */
.project-preloader{
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 70% 20%, rgba(79,124,255,.24), transparent 32rem),
        radial-gradient(circle at 20% 80%, rgba(124,58,237,.22), transparent 32rem),
        var(--bg);
    transition: opacity 520ms var(--premium-ease), visibility 520ms var(--premium-ease);
}
.project-preloader.is-hidden{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.project-preloader__card{
    width: min(380px, 88vw);
    min-height: 220px;
    padding: 34px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
    box-shadow: var(--premium-glow-strong);
    backdrop-filter: blur(24px);
    text-align: center;
}
.project-preloader__logo{
    width: 76px;
    height: 76px;
    margin: 0 auto 22px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 34px;
    font-weight: 900;
    direction: ltr;
    background: conic-gradient(from 180deg, var(--accent), var(--primary), var(--secondary), var(--accent));
    animation: projectSpin 1.5s linear infinite;
    box-shadow: 0 20px 60px rgba(79,124,255,.35);
}
.project-preloader__title{
    color: var(--text);
    font-size: 22px;
    margin-bottom: 10px;
}
.project-preloader__bar{
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    margin-top: 24px;
}
.project-preloader__bar span{
    display: block;
    height: 100%;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    animation: projectLoad 1.05s var(--premium-ease) infinite;
}
@keyframes projectSpin{ to{ transform: rotate(1turn); } }
@keyframes projectLoad{
    0%{ transform: translateX(160%); }
    100%{ transform: translateX(-260%); }
}

/* Magnetic cursor glow for pointer devices */
.cursor-glow{
    position: fixed;
    width: 26rem;
    height: 26rem;
    border-radius: 999px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transform: translate3d(-50%,-50%,0);
    background: radial-gradient(circle, rgba(79,124,255,.16), transparent 63%);
    transition: opacity 240ms ease;
    mix-blend-mode: screen;
}
@media (pointer:fine){
    body:hover .cursor-glow{ opacity: 1; }
}

/* Navbar: glass, motion, active state */
.navbar{
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    transition: min-height var(--premium-fast), background var(--premium-fast), box-shadow var(--premium-fast), border-color var(--premium-fast), transform var(--premium-fast);
}
.navbar.is-scrolled{
    min-height: 68px;
    background: linear-gradient(189deg, rgba(7,11,20,.72), rgba(124,58,237,.78));
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 18px 55px rgba(0,0,0,.25);
}
.light-theme .navbar.is-scrolled{
    background: rgba(255,255,255,.72);
    color: var(--text);
}
.navbar .logo .x{
    box-shadow: 0 0 0 0 rgba(79,124,255,.36);
    animation: logoPulse 2.6s ease-in-out infinite;
}
@keyframes logoPulse{
    0%,100%{ box-shadow: 0 0 0 0 rgba(79,124,255,.25); }
    50%{ box-shadow: 0 0 0 10px rgba(79,124,255,0); }
}
.navbar .menu a{
    padding: 8px 2px;
    transition: color var(--premium-fast), transform var(--premium-fast);
}
.navbar .menu a:hover,
.navbar .menu a.is-active{
    color: #fff;
    transform: translateY(-2px);
}
.light-theme .navbar .menu a:hover,
.light-theme .navbar .menu a.is-active{
    color: var(--primary);
}
.navbar .menu a.is-active::before,
.navbar .menu a.is-active::after{
    width: 50%;
}
.navbar .nav_cta a,
.navbar .nav_cta button,
.hero_cta a,
.buttons a,
.course_btn,
.Registration,
input.submit,
.category_chips .chip a{
    position: relative;
    overflow: hidden;
}

/* Buttons shine */
.navbar .nav_cta a.starting,
.hero_section .right_hero a.courses_link,
.buttons a.starting,
.btn_start,
input.submit,
.single_course_hero .introduction .Enroll_btn .price{
    background-size: 220% 220%;
    animation: gradientBreath 6s ease infinite;
}
@keyframes gradientBreath{
    0%,100%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
}
[data-ripple]{
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: rippleEffect 650ms ease-out forwards;
    background: rgba(255,255,255,.35);
    pointer-events: none;
}
@keyframes rippleEffect{
    to{ transform: scale(4); opacity: 0; }
}

/* Hero upgrades */
.hero_section,
.courses_section .courses_hero,
.roadmaps_hero,
.single_course_hero,
.roadmap_hero,
.aboutus_hero,
.contact_hero{
    overflow: hidden;
}
.hero_section .right_hero h1,
.title{
    letter-spacing: -.02em;
}
.gradient_word{
    background-image: linear-gradient(100deg, #fff, var(--accent), var(--primary), var(--secondary));
    background-size: 240% 240%;
    animation: textAurora 6s ease infinite;
}
.light-theme .gradient_word{
    background-image: linear-gradient(100deg, var(--secondary), var(--primary), var(--accent));
}
@keyframes textAurora{
    0%,100%{ background-position: 0 50%; }
    50%{ background-position: 100% 50%; }
}
.hero_section .right_hero h1{
    text-shadow: 0 20px 70px rgba(79,124,255,.22);
}
.hero_section .left_hero .mockup,
.single_course_hero .dashboard_mockup,
.roadmap_hero .map,
.courses_cta .courses_box,
div.container{
    box-shadow: var(--premium-glow);
    backdrop-filter: blur(18px);
}
.hero_section .left_hero .mockup{
    transform-style: preserve-3d;
    transition: transform var(--premium-med), box-shadow var(--premium-med), border-color var(--premium-med);
}
.hero_section .left_hero .mockup:hover{
    transform: translateY(-8px) rotateX(3deg) rotateY(-4deg);
    border-color: rgba(79,124,255,.42);
    box-shadow: var(--premium-glow-strong);
}
.hero_section .left_hero .mockup .loading,
.single_course_hero .dashboard_mockup .progress div.bar .loading{
    position: relative;
    overflow: hidden;
}
.hero_section .left_hero .mockup .loading::after,
.single_course_hero .dashboard_mockup .progress div.bar .loading::after{
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(120%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
    animation: progressShine 1.9s ease-in-out infinite;
}
@keyframes progressShine{ to{ transform: translateX(-120%); } }

/* Cards: premium hover + focus */
.courses .course_card,
.roadmaps_categories .categories .card,
.learning_process .process .card_process,
.stats .stat_card,
.why_us.stats .stat_card,
.about_cards .card,
.contact_cards .card,
.history_cards .card,
.student_reviews .carousel_wrapper .review_cards .card,
.curriculum .card,
.will_learn .card_learn,
.roadmap_skills .skill_cards .card,
.roadmap_projects .projects .card,
.bootcamp .left_section .time_line,
.bootcamp .right_section .course_price,
.faq_item,
.footer .social_networks .social a i{
    transition: transform var(--premium-fast), border-color var(--premium-fast), box-shadow var(--premium-fast), background var(--premium-fast), filter var(--premium-fast);
    will-change: transform;
}
.courses .course_card,
.roadmaps_categories .categories .card,
.learning_process .process .card_process,
.stats .stat_card,
.why_us.stats .stat_card,
.about_cards .card,
.contact_cards .card,
.history_cards .card,
.student_reviews .carousel_wrapper .review_cards .card,
.roadmap_skills .skill_cards .card,
.roadmap_projects .projects .card,
div.container{
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 86%, white 4%), var(--surface));
}
.courses .course_card:hover,
.roadmaps_categories .categories .card:hover,
.learning_process .process .card_process:hover,
.stats .stat_card:hover,
.why_us.stats .stat_card:hover,
.about_cards .card:hover,
.contact_cards .card:hover,
.history_cards .card:hover,
.student_reviews .carousel_wrapper .review_cards .card:hover,
.roadmap_skills .skill_cards .card:hover,
.roadmap_projects .projects .card:hover,
.curriculum .card:hover,
.will_learn .card_learn:hover,
.faq_item:hover{
    transform: translateY(-8px);
    border-color: rgba(79,124,255,.42) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.18), 0 0 0 1px rgba(79,124,255,.08) inset;
}
.premium-tilt{
    transform-style: preserve-3d;
}
.premium-tilt:hover > *{
    transform: translateZ(10px);
}
.courses .course_card .card_header,
.roadmaps_categories .categories .card .card_header{
    position: relative;
    overflow: hidden;
}
.courses .course_card .card_header::before,
.roadmaps_categories .categories .card .card_header::before{
    content: '';
    position: absolute;
    inset: -35%;
    opacity: .32;
    background: conic-gradient(from 180deg, transparent, var(--primary), var(--secondary), transparent 35%);
    animation: rotateGlow 7s linear infinite;
}
.courses .course_card .card_header::after,
.roadmaps_categories .categories .card .card_header svg,
.roadmaps_categories .categories .card .card_header i,
.roadmaps_categories .categories .card .card_header .icon{
    position: relative;
    z-index: 1;
}
@keyframes rotateGlow{ to{ transform: rotate(1turn); } }

/* Chips and filters */
.category_chips .chip{
    transition: transform var(--premium-fast), box-shadow var(--premium-fast), border-color var(--premium-fast), background var(--premium-fast);
}
.category_chips .chip:hover,
.category_chips .chip:has(a.active){
    box-shadow: 0 14px 45px rgba(79,124,255,.18);
}
.category_chips .chip a{
    isolation: isolate;
}
.category_chips .chip a::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(255,255,255,.16), transparent, rgba(255,255,255,.10));
    transform: translateX(110%);
    transition: transform 600ms var(--premium-ease);
}
.category_chips .chip a:hover::before{
    transform: translateX(-110%);
}

/* Search UX */
.search::after{
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-md);
    pointer-events: none;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--secondary));
    opacity: 0;
    transition: opacity var(--premium-fast);
    z-index: 0;
}
.search:focus-within::after{ opacity: .32; }
.search input{ position: relative; z-index: 1; }
.search input::placeholder{ transition: opacity var(--premium-fast), transform var(--premium-fast); }
.search input:focus::placeholder{ opacity: .55; transform: translateX(-6px); }

/* Auth forms */
div.container{
    border: 1px solid rgba(255,255,255,.16);
    animation: authEnter 700ms var(--premium-ease) both;
}
@keyframes authEnter{
    from{ opacity: 0; transform: translateY(24px) scale(.96); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
}
div.container form .field input{
    transition: border-color var(--premium-fast), box-shadow var(--premium-fast), transform var(--premium-fast), background var(--premium-fast);
}
div.container form .field input:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(79,124,255,.14), 0 14px 40px rgba(0,0,0,.14);
    transform: translateY(-2px);
}
div.container form .field svg,
div.container form .field i{
    transition: color var(--premium-fast), transform var(--premium-fast);
}
div.container form .field:focus-within svg,
div.container form .field:focus-within i{
    color: var(--primary);
    transform: translateY(-2px);
}

/* Reveal improvements */
.reveal,
.reveal_left,
.reveal_right,
[data-premium-reveal]{
    transition-duration: 900ms;
    transition-timing-function: var(--premium-ease);
}
[data-premium-reveal]{
    opacity: 0;
    transform: translateY(30px) scale(.985);
}
[data-premium-reveal].is-visible{
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Toast and back-to-top */
.project-toast{
    position: fixed;
    left: 24px;
    top: 24px;
    z-index: 9998;
    max-width: min(420px, calc(100vw - 48px));
    padding: 14px 18px;
    border-radius: 18px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 20px 70px rgba(0,0,0,.25);
    backdrop-filter: blur(20px);
    transform: translateY(18px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--premium-fast), transform var(--premium-fast);
}
.project-toast.is-visible{
    opacity: 1;
    transform: translateY(0);
}
.back-to-top{
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 9997;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.20);
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 18px 60px rgba(79,124,255,.28);
    transform: translateY(22px) scale(.9);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--premium-fast), transform var(--premium-fast);
}
.back-to-top.is-visible{
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.back-to-top:hover{ transform: translateY(-4px) scale(1.02); }

/* Skeleton-like soft entry after filtering */
.is-filtering .course_card,
.is-filtering .roadmap_link{
    animation: filterPop 320ms var(--premium-ease) both;
}
@keyframes filterPop{
    from{ opacity:.25; transform: translateY(12px) scale(.98); }
    to{ opacity:1; transform: translateY(0) scale(1); }
}

/* Footer glow */
.footer{
    position: relative;
    overflow: hidden;
}
.footer::before{
    content: '';
    position: absolute;
    inset: 0 auto auto 50%;
    width: 38rem;
    height: 38rem;
    transform: translate(-50%, -72%);
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(79,124,255,.13), transparent 70%);
}

/* Accessibility */
:focus-visible{
    outline: 3px solid color-mix(in srgb, var(--primary), white 18%);
    outline-offset: 4px;
    border-radius: 10px;
}
@media (max-width: 768px){
    .cursor-glow{ display:none; }
    .project-toast{ right: 14px; bottom: 14px; }
    .back-to-top{ left: 14px; bottom: 14px; }
    .navbar.is-scrolled{ min-height: 72px; }
}
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
    .project-preloader{ display: none !important; }
    body.page-is-loading{ overflow:auto; }
}

/* Auth button icon alignment override */
div.container form .field i#submit,
div.container form .field i#retry{
    right: auto !important;
    left: 24px;
}
div.container form .field input.submit,
div.container form .field input.retry{
    padding-inline: 42px !important;
}

/* ==========================================================
   RTL + backend-ready catalog pagination
   ========================================================== */
[hidden]{
    display: none !important;
}

html[dir="rtl"] body{
    direction: rtl;
}

html[dir="rtl"] .courses .course_card,
html[dir="rtl"] .roadmaps_categories .categories .roadmap_link,
html[dir="rtl"] .roadmaps_categories .categories .card,
html[dir="rtl"] .learning_process .process .card_process,
html[dir="rtl"] .footer .footer_section{
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .courses .course_card .card_body h4,
html[dir="rtl"] .courses .course_card .card_body p,
html[dir="rtl"] .roadmaps_categories .categories .card_body h4,
html[dir="rtl"] .roadmaps_categories .categories .card_body p{
    text-align: right;
}

html[dir="rtl"] .courses_section .courses_hero .search svg{
    right: 18px;
    left: auto;
}

html[dir="rtl"] .courses_section .courses_hero input.search_box{
    padding-inline: 58px 22px;
    text-align: right;
}

html[dir="rtl"] .search input:focus::placeholder{
    transform: translateX(6px);
}

html[dir="rtl"] .roadmaps_categories .categories,
html[dir="rtl"] .learning_process .process{
    direction: rtl;
}

.catalog_toolbar{
    width: min(1180px, calc(100% - 48px));
    margin: 34px auto 6px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.035)),
        color-mix(in srgb, var(--surface) 82%, transparent);
    box-shadow: 0 22px 70px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.catalog_status{
    display: grid;
    gap: 5px;
    text-align: right;
}

.catalog_status__eyebrow{
    width: max-content;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--accent);
    font-size: 12px;
    background: rgba(0,231,165,.10);
    border: 1px solid rgba(0,231,165,.18);
}

.catalog_status strong{
    color: var(--text);
    font-size: clamp(17px, 1.9vw, 23px);
    line-height: 1.5;
}

.catalog_status small{
    color: var(--text-muted);
    font-size: 13px;
}

.catalog_page_size{
    min-width: 220px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.catalog_page_size select{
    min-width: 112px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 90%, white 3%);
    outline: none;
    cursor: pointer;
    transition: border-color var(--premium-fast), box-shadow var(--premium-fast), transform var(--premium-fast);
}

.catalog_page_size select:hover,
.catalog_page_size select:focus{
    border-color: rgba(79,124,255,.55);
    box-shadow: 0 0 0 4px rgba(79,124,255,.12);
    transform: translateY(-1px);
}

.catalog_pagination{
    width: min(1180px, calc(100% - 48px));
    margin: 8px auto 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    direction: rtl;
}

.pagination_btn,
.pagination_dots{
    min-width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.14);
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    box-shadow: 0 12px 34px rgba(0,0,0,.14);
}

.pagination_btn{
    padding: 0 14px;
    transition: transform var(--premium-fast), border-color var(--premium-fast), box-shadow var(--premium-fast), background var(--premium-fast), opacity var(--premium-fast);
}

.pagination_btn:hover:not(:disabled){
    transform: translateY(-3px);
    border-color: rgba(79,124,255,.50);
    box-shadow: 0 18px 48px rgba(79,124,255,.18);
}

.pagination_btn.is-active{
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-color: transparent;
    box-shadow: 0 18px 58px rgba(79,124,255,.28);
}

.pagination_btn:disabled{
    cursor: not-allowed;
    opacity: .45;
}

.pagination_btn--prev,
.pagination_btn--next{
    min-width: 84px;
}

.pagination_dots{
    color: var(--text-muted);
    box-shadow: none;
    background: transparent;
}

.courses_catalog .courses,
.roadmaps_categories .categories{
    transition: opacity var(--premium-fast), transform var(--premium-fast);
}

.courses_catalog .courses[aria-busy="true"],
.roadmaps_categories .categories[aria-busy="true"]{
    opacity: .76;
    transform: translateY(4px);
}

@media (max-width: 720px){
    .catalog_toolbar{
        width: min(100% - 28px, 560px);
        flex-direction: column;
        align-items: stretch;
        margin-top: 24px;
        padding: 16px;
        border-radius: 22px;
    }

    .catalog_page_size{
        width: 100%;
        min-width: 0;
        justify-content: space-between;
    }

    .catalog_page_size select{
        flex: 0 0 120px;
    }

    .catalog_pagination{
        width: min(100% - 28px, 560px);
        margin-bottom: 38px;
    }

    .pagination_btn--prev,
    .pagination_btn--next{
        min-width: 74px;
    }
}

/* ==========================================================
   Client-requested polish: header layering, animated metrics,
   and premium non-native catalog dropdowns
   ========================================================== */
.navbar{
    z-index: 3000;
}

.courses_section .courses_hero,
.roadmaps_hero{
    z-index: 1;
}

.courses_section .courses_hero .search{
    z-index: 1;
    isolation: isolate;
}

.courses_section .courses_hero input.search_box{
    position: relative;
    z-index: 2;
}

.courses_section .courses_hero .search svg{
    z-index: 3;
}

.premium-counting{
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: plaintext;
}

html[dir="rtl"] .premium-counting{
    direction: rtl;
}

.catalog_page_size{
    position: relative;
}

.catalog_native_select{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.premium_select{
    position: relative;
    min-width: 132px;
    direction: rtl;
}

.premium_select__trigger{
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    border: 1px solid rgba(79,124,255,.18);
    border-radius: 18px;
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045)),
        color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 14px 42px rgba(7,11,20,.12), inset 0 1px 0 rgba(255,255,255,.14);
    cursor: pointer;
    transition: transform var(--premium-fast), border-color var(--premium-fast), box-shadow var(--premium-fast), background var(--premium-fast);
}

.premium_select__trigger::after{
    content: '';
    width: 9px;
    height: 9px;
    border-inline-start: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(-45deg) translateY(-2px);
    opacity: .72;
    transition: transform var(--premium-fast), opacity var(--premium-fast);
}

.premium_select__trigger:hover,
.premium_select__trigger:focus-visible,
.premium_select.is-open .premium_select__trigger{
    outline: none;
    transform: translateY(-1px);
    border-color: rgba(79,124,255,.55);
    box-shadow: 0 18px 55px rgba(79,124,255,.18), 0 0 0 4px rgba(79,124,255,.10);
}

.premium_select.is-open .premium_select__trigger::after{
    transform: rotate(135deg) translateY(-2px);
    opacity: 1;
}

.premium_select__menu{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    z-index: 1800;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)),
        color-mix(in srgb, var(--surface) 94%, white 3%);
    box-shadow: 0 26px 80px rgba(7,11,20,.24), inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top center;
    transition: opacity var(--premium-fast), visibility var(--premium-fast), transform var(--premium-fast);
}

.premium_select.is-open .premium_select__menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.premium_select__option{
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 0;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text);
    background: transparent;
    cursor: pointer;
    text-align: right;
    transition: background var(--premium-fast), color var(--premium-fast), transform var(--premium-fast), box-shadow var(--premium-fast);
}

.premium_select__option::after{
    content: '✓';
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 8px 24px rgba(79,124,255,.25);
    opacity: 0;
    transform: scale(.82);
    transition: opacity var(--premium-fast), transform var(--premium-fast);
}

.premium_select__option:hover,
.premium_select__option:focus-visible{
    outline: none;
    background: rgba(79,124,255,.10);
    transform: translateX(-2px);
}

.premium_select__option.is-selected{
    color: var(--primary);
    background: rgba(79,124,255,.13);
}

.premium_select__option.is-selected::after{
    opacity: 1;
    transform: scale(1);
}

.light-theme .premium_select__menu{
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.76)),
        var(--surface);
    box-shadow: 0 26px 80px rgba(79,124,255,.16), inset 0 1px 0 rgba(255,255,255,.8);
}

@media (max-width: 720px){
    .premium_select{
        min-width: 128px;
    }
}

/* ==========================================================
   Responsive ownership layer: navbar, footer, cards
   Keeps controls visible, prevents horizontal overflow, and
   uses real grid/flex breakpoints for mobile/tablet/desktop.
   ========================================================== */
.navbar{
    width: 100%;
    padding-inline: clamp(16px, 4vw, 64px);
    gap: clamp(12px, 2vw, 28px);
    justify-content: space-between;
    direction: rtl;
}
.navbar .logo{
    width: auto;
    min-width: 0;
    margin: 0;
    flex: 0 0 auto;
}
.navbar .logo a{
    gap: 4px;
    white-space: nowrap;
}
.navbar .logo span{
    font-size: clamp(24px, 2vw, 30px);
    line-height: 1;
}
.navbar .menu{
    width: auto;
    max-width: 620px;
    flex: 1 1 auto;
    gap: clamp(12px, 2.5vw, 38px);
}
.navbar .nav_cta{
    width: auto;
    min-width: 0;
    margin: 0;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 8px;
}
.navbar .nav_cta .theme{
    position: static;
    right: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}
.navbar .nav_cta .theme label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    transition: background var(--premium-fast), transform var(--premium-fast);
}
.navbar .nav_cta .theme label:hover{
    background: rgba(255,255,255,.08);
    transform: translateY(-2px);
}
.navbar .nav_cta .login,
.navbar .nav_cta .starting,
.navbar .nav_cta .auth-menu__trigger,
.navbar .bars{
    flex: 0 0 auto;
}
.navbar .nav_cta .login{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
}
.navbar .bars{
    appearance: none;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

@media (min-width: 981px){
    .navbar .bars{
        display: none !important;
    }
}

@media (max-width: 1180px) and (min-width: 981px){
    .navbar{
        padding-inline: 24px;
    }
    .navbar .menu{
        max-width: 560px;
        gap: 18px;
        font-size: 14px;
    }
    .navbar .nav_cta .starting{
        width: 112px;
        font-size: 14px;
    }
}

@media (max-width: 980px){
    html{
        scroll-padding-top: 88px;
    }
    .navbar{
        position: sticky;
        top: 0;
        min-height: 72px;
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        grid-template-areas: "actions menuButton spacer brand";
        align-items: center;
        justify-content: normal;
        padding: 8px 12px;
        gap: 8px;
        direction: ltr;
        z-index: 1000;
    }
    .navbar .logo{
        grid-area: brand;
        justify-self: end;
        direction: ltr;
    }
    .navbar .logo .x{
        width: 28px;
        height: 28px;
    }
    .navbar .logo span{
        font-size: clamp(22px, 5.4vw, 30px);
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .navbar .nav_cta{
        grid-area: actions;
        justify-self: start;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        direction: ltr;
    }
    .navbar .nav_cta .starting{
        display: none !important;
    }
    .navbar .nav_cta .login{
        display: inline-flex !important;
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 17px;
        font-size: 13px;
    }
    .navbar .nav_cta .auth-menu{
        display: inline-flex !important;
        margin: 0;
        order: 1;
    }
    .navbar .nav_cta .theme{
        order: 2;
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }
    .navbar .bars{
        grid-area: menuButton;
        position: static !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 17px;
        background: rgba(255,255,255,.05);
        z-index: 1002;
    }
    .navbar .bars:hover,
    .navbar .bars:focus-visible{
        background: rgba(162,122,233,.18);
        border-color: rgba(130,155,255,.55);
    }
    .navbar .menu{
        position: fixed !important;
        top: 82px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-width: none;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 22px;
        background: rgba(9, 14, 26, .96);
        box-shadow: 0 24px 70px rgba(0,0,0,.34);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px) scale(.98);
        transition: opacity var(--premium-fast), transform var(--premium-fast), visibility var(--premium-fast);
        direction: rtl;
        z-index: 1001;
    }
    .navbar .menu.responsive{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }
    .navbar .menu a,
    .navbar .menu.responsive a{
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        min-height: 46px;
        margin: 0 !important;
        padding: 10px 8px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 14px;
        background: rgba(255,255,255,.035);
        text-align: center;
        line-height: 1.7;
    }
    .navbar .menu a:hover,
    .navbar .menu a.is-active{
        background: rgba(79,124,255,.15);
        transform: none;
    }
    .navbar .nav_cta .auth-menu__dropdown{
        position: fixed;
        top: 82px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: calc(100vw - 24px);
        z-index: 1003;
    }
    .navbar .nav_cta .auth-menu__dropdown::before{
        display: none;
    }
}

@media (max-width: 420px){
    .navbar{
        grid-template-columns: auto auto 1fr auto;
        padding-inline: 10px;
        gap: 6px;
    }
    .navbar .logo .x{
        width: 24px;
        height: 24px;
    }
    .navbar .logo span{
        max-width: 34vw;
        font-size: clamp(20px, 6vw, 24px);
    }
    .navbar .nav_cta .auth-menu__trigger,
    .navbar .nav_cta .login,
    .navbar .nav_cta .theme,
    .navbar .bars{
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 14px;
    }
    .navbar .menu{
        grid-template-columns: 1fr 1fr;
        top: 74px !important;
    }
    .navbar .nav_cta .auth-menu__dropdown{
        top: 74px;
    }
}

@media (max-width: 340px){
    .navbar .nav_cta .theme{
        display: none;
    }
    .navbar .logo span{
        max-width: 42vw;
    }
}

/* Home hero responsive sizing */
@media (max-width: 768px){
    .hero_section{
        min-height: auto;
        padding: 42px 14px 28px;
    }
    .hero_section .right_hero,
    .hero_section .left_hero{
        width: 100%;
        padding: 24px 0;
    }
    .hero_section .right_hero h1{
        margin: 0 auto;
        max-width: 680px;
        font-size: clamp(30px, 8vw, 42px);
        line-height: 1.75;
        text-align: center;
    }
    .hero_section .right_hero h4{
        margin: 18px auto 0;
        max-width: 620px;
        font-size: clamp(15px, 3.5vw, 18px);
        line-height: 2;
        text-align: center;
    }
    .hero_section .right_hero .hero_cta{
        width: min(100%, 430px);
        margin: 28px auto 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .hero_section .right_hero a.courses_link,
    .hero_section .right_hero a.starting{
        width: 100%;
        margin: 0;
        min-width: 0;
    }
}
@media (max-width: 420px){
    .hero_section{
        padding-inline: 12px;
    }
    .hero_section .right_hero .hero_cta{
        grid-template-columns: 1fr;
    }
}

/* Footer mobile/tablet layout: two items per line where content allows */
.footer .footer_top{
    width: min(1240px, calc(100% - 32px));
    margin-inline: auto;
}
.footer .footer_top .footer_brand .logo{
    width: auto;
}
.footer .footer_top .footer_brand .social_networks{
    display: grid;
    grid-template-columns: repeat(4, 44px);
    justify-content: start;
    align-items: center;
    gap: 10px;
    max-width: none;
}
.footer .footer_top .footer_brand .social_networks .social{
    margin: 0;
}

@media (max-width: 768px){
    .footer{
        padding-top: 42px;
    }
    .footer .footer_top{
        width: min(100% - 28px, 620px);
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }
    .footer .footer_top .footer_brand,
    .footer .footer_section{
        padding: 0;
    }
    .footer .footer_top .footer_brand .logo,
    .footer .footer_top .footer_brand .social_networks{
        margin-inline: auto;
        justify-content: center;
    }
    .footer .footer_top .footer_brand .social_networks{
        grid-template-columns: repeat(4, 44px);
    }
    .footer .footer_top .footer_section ul.submenu{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 0;
    }
    .footer .footer_top .footer_section ul.submenu li{
        margin: 0;
        min-width: 0;
    }
    .footer .footer_top .footer_section ul.submenu li a{
        min-height: 44px;
        justify-content: flex-start !important;
        padding: 9px 10px;
        border: 1px solid rgba(255,255,255,.07);
        border-radius: 14px;
        background: rgba(255,255,255,.03);
        text-align: right;
        direction: rtl;
        overflow-wrap: anywhere;
    }
    .footer .footer_top .contact ul.submenu li:first-child{
        grid-column: 1 / -1;
    }
    .footer .footer_bottom{
        width: min(100% - 28px, 620px);
        margin: 28px auto 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: center;
    }
    .footer .footer_bottom p{
        margin: 0 !important;
    }
}
@media (max-width: 360px){
    .footer .footer_top .footer_brand .social_networks{
        grid-template-columns: repeat(2, 44px);
    }
    .footer .footer_top .footer_section ul.submenu{
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .footer .footer_top .footer_section ul.submenu li a{
        padding-inline: 8px;
        font-size: 13px;
    }
}

/* Courses page responsive catalog and feature cards */
@media (max-width: 640px) and (min-width: 540px){
    .courses_catalog .courses{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .courses .course_card .card_header{
        min-height: 130px;
    }
    .courses .course_card .card_body h4{
        font-size: 18px;
    }
    .courses .course_card .card_body p{
        min-height: auto;
        font-size: 13px;
    }
    .courses .course_card .card_body .info_course,
    .courses .course_card .card_footer{
        flex-direction: row;
        align-items: center;
    }
}
@media (max-width: 640px){
    .why_us.stats .section_right,
    .why_us.stats .section_left{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .why_us.stats .stat_card{
        min-height: 210px;
        padding: 16px 10px;
    }
    .why_us.stats .stat_card .card_icon .icon svg{
        width: clamp(44px, 12vw, 62px);
        height: clamp(44px, 12vw, 62px);
    }
    .why_us.stats .stat_card .card_info h4{
        font-size: clamp(16px, 4.8vw, 21px);
    }
    .why_us.stats .stat_card .card_info p{
        font-size: clamp(12px, 3.6vw, 15px);
        line-height: 1.9;
    }
    .why_us.stats .stat_card .card_info .line{
        width: 70%;
        margin-block: 14px;
    }
}
@media (max-width: 340px){
    .why_us.stats .section_right,
    .why_us.stats .section_left{
        gap: 8px;
    }
    .why_us.stats .stat_card{
        padding-inline: 7px;
    }
}