﻿/* =====================================================
   منصة المحامي – Premium Platform UI v3.0
   Ultra-Modern Arabic RTL Design with Animations
   ===================================================== */

:root {
    --p1: #5956E9;
    --p2: #7C6EF5;
    --p3: #A79EF8;
    --sec: #EC4899;
    --sec2: #F472B6;
    --acc: #F59E0B;
    --acc2: #FCD34D;
    --teal: #06B6D4;
    --teal2: #22D3EE;
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #F43F5E;
    --grad-p: linear-gradient(135deg, #5956E9 0%, #7C6EF5 100%);
    --grad-sec: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
    --grad-gold: linear-gradient(135deg, #F59E0B 0%, #FCD34D 100%);
    --grad-teal: linear-gradient(135deg, #06B6D4 0%, #22D3EE 100%);
    --grad-multi: linear-gradient(90deg, #5956E9, #06B6D4, #EC4899, #7C6EF5, #5956E9);
    --glow-p: 0 0 32px rgba(89,86,233,.42), 0 8px 24px rgba(89,86,233,.26);
    --glow-sec: 0 0 28px rgba(236,72,153,.38);
    --glow-gold: 0 0 24px rgba(245,158,11,.42);
    --sh-xs: 0 1px 4px rgba(0,0,0,.07);
    --sh-sm: 0 2px 12px rgba(0,0,0,.1);
    --sh-md: 0 4px 28px rgba(0,0,0,.14);
    --sh-lg: 0 8px 48px rgba(0,0,0,.18);
    --sh-xl: 0 16px 64px rgba(0,0,0,.24);
    --r-xs: 6px;
    --r-sm: 10px;
    --r: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-2xl: 36px;
    --r-full: 9999px;
    --ease: cubic-bezier(.4,0,.2,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --dur: .3s;
    --dur-fast: .15s;
    --dur-slow: .5s;
    --font: "Tajawal", sans-serif;
    --primary: #5956E9;
    --primary-dark: #4338CA;
    --primary-light: #7C6EF5;
    --secondary: #EC4899;
    --accent: #06B6D4;
    --gold: #F59E0B;
    --gradient-1: linear-gradient(135deg,#5956E9,#7C6EF5);
    --gradient-2: linear-gradient(135deg,#EC4899,#F472B6);
    --gradient-3: linear-gradient(135deg,#5956E9,#EC4899);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --shadow-sm: var(--sh-sm);
    --shadow-md: var(--sh-md);
    --shadow-lg: var(--sh-lg);
    --shadow-glow: var(--glow-p);
    --transition: all .3s cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] {
    --bg: #F3F2FF;
    --bg2: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-input: #EDEEFF;
    --bg-nav: rgba(255,255,255,.9);
    --bg-sidebar: #FFFFFF;
    --text: #18163A;
    --text2: #55527A;
    --text3: #9390B8;
    --border: rgba(89,86,233,.1);
    --border2: #E5E3FF;
    --overlay: rgba(10,8,30,.55);
    --bg-primary: #F3F2FF;
    --bg-secondary: #FFFFFF;
    --text-primary: #18163A;
    --text-secondary: #55527A;
    --text-muted: #9390B8;
    --border-color: rgba(89,86,233,.1);
}
[data-theme="dark"] {
    --bg: #07070F;
    --bg2: #100F1E;
    --bg-card: #131224;
    --bg-input: #1C1B30;
    --bg-nav: rgba(7,7,15,.93);
    --bg-sidebar: #100F1E;
    --text: #EAE9FF;
    --text2: #9B99CC;
    --text3: #5E5C8A;
    --border: rgba(255,255,255,.07);
    --border2: rgba(255,255,255,.05);
    --overlay: rgba(0,0,0,.76);
    --bg-primary: #07070F;
    --bg-secondary: #100F1E;
    --text-primary: #EAE9FF;
    --text-secondary: #9B99CC;
    --text-muted: #5E5C8A;
    --border-color: rgba(255,255,255,.07);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);background:var(--bg);color:var(--text);direction:rtl;min-height:100vh;overflow-x:hidden;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;transition:color var(--dur-fast) var(--ease);}
img{max-width:100%;display:block;}
button{font-family:var(--font);}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--p1);border-radius:var(--r-full);}
::-webkit-scrollbar-thumb:hover{background:var(--p2);}

/* AUTH PAGE */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#07070F 0%,#160E3A 35%,#091830 65%,#05050F 100%);position:relative;overflow:hidden;padding:1.5rem;}
.auth-page::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(89,86,233,.38) 0%,transparent 70%);top:-220px;right:-100px;animation:auroraOrb1 14s ease-in-out infinite alternate;pointer-events:none;}
.auth-page::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,.28) 0%,transparent 70%);bottom:-160px;left:-80px;animation:auroraOrb2 11s ease-in-out infinite alternate;pointer-events:none;}
@keyframes auroraOrb1{from{transform:translate(0,0) scale(1);}to{transform:translate(80px,60px) scale(1.25);}}
@keyframes auroraOrb2{from{transform:translate(0,0) scale(1);}to{transform:translate(-60px,-40px) scale(1.18);}}
.auth-shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.auth-shape{position:absolute;border:1px solid rgba(255,255,255,.06);animation:shapeSpin linear infinite;}
.auth-shape:nth-child(1){width:64px;height:64px;border-radius:14px;top:12%;right:7%;animation-duration:22s;}
.auth-shape:nth-child(2){width:40px;height:40px;border-radius:50%;top:72%;right:14%;animation-duration:16s;border-color:rgba(6,182,212,.12);}
.auth-shape:nth-child(3){width:88px;height:88px;border-radius:18px;top:18%;left:9%;animation-duration:28s;animation-direction:reverse;}
.auth-shape:nth-child(4){width:32px;height:32px;border-radius:8px;top:58%;left:7%;animation-duration:13s;border-color:rgba(236,72,153,.12);}
.auth-shape:nth-child(5){width:56px;height:56px;border-radius:50%;bottom:22%;right:28%;animation-duration:19s;}
@keyframes shapeSpin{from{transform:rotate(0deg) translateY(0);}50%{transform:rotate(180deg) translateY(-18px);}to{transform:rotate(360deg) translateY(0);}}
.auth-card{background:rgba(255,255,255,.05);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-2xl);padding:2.8rem 2.5rem;width:100%;max-width:430px;position:relative;z-index:2;animation:authCardIn .7s var(--ease-spring) both;box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);}
.auth-card::before{content:"";position:absolute;inset:-1px;border-radius:calc(var(--r-2xl) + 1px);background:linear-gradient(135deg,rgba(89,86,233,.6),rgba(6,182,212,.4),rgba(236,72,153,.4),rgba(89,86,233,.6));background-size:300% 300%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:borderShift 5s ease infinite;z-index:-1;}
@keyframes borderShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes authCardIn{from{opacity:0;transform:translateY(44px) scale(.93);}to{opacity:1;transform:translateY(0) scale(1);}}
.auth-logo{width:78px;height:78px;background:var(--grad-p);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:2rem;color:#fff;box-shadow:var(--glow-p);animation:logoPulse 3.5s ease-in-out infinite;}
@keyframes logoPulse{0%,100%{box-shadow:var(--glow-p);}50%{box-shadow:0 0 52px rgba(89,86,233,.65),0 8px 32px rgba(89,86,233,.35);}}
.auth-title{text-align:center;font-size:1.85rem;font-weight:900;color:#fff;margin-bottom:.4rem;letter-spacing:-.3px;}
.auth-subtitle{text-align:center;color:rgba(255,255,255,.56);margin-bottom:2rem;font-size:.92rem;}
.form-floating-custom{position:relative;margin-bottom:1.15rem;}
.form-floating-custom input{width:100%;padding:1rem 1.1rem 1rem 3rem;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.1);border-radius:var(--r);font-family:var(--font);font-size:1rem;color:#fff;transition:all var(--dur) var(--ease);direction:rtl;}
.form-floating-custom input:focus{outline:none;border-color:var(--p2);background:rgba(255,255,255,.1);box-shadow:0 0 0 4px rgba(89,86,233,.22);}
.form-floating-custom input::placeholder{color:rgba(255,255,255,.38);}
.form-floating-custom .input-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.38);font-size:1rem;transition:color var(--dur) var(--ease);pointer-events:none;}
.form-floating-custom input:focus~.input-icon{color:var(--p3);}
.btn-primary-custom{width:100%;padding:1rem;background:var(--grad-p);border:none;border-radius:var(--r);color:#fff;font-family:var(--font);font-size:1.05rem;font-weight:800;cursor:pointer;transition:all var(--dur) var(--ease);position:relative;overflow:hidden;box-shadow:var(--glow-p);}
.btn-primary-custom::after{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);transform:skewX(-20deg);transition:left .65s var(--ease);}
.btn-primary-custom:hover::after{left:150%;}
.btn-primary-custom:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(89,86,233,.55),0 12px 32px rgba(89,86,233,.38);}
.btn-primary-custom:active{transform:translateY(0) scale(.98);}
.btn-primary-custom.loading{pointer-events:none;opacity:.72;}
.btn-primary-custom .spinner{display:none;width:22px;height:22px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .65s linear infinite;margin:0 auto;}
.btn-primary-custom.loading .btn-text{display:none;}
.btn-primary-custom.loading .spinner{display:block;}
.auth-link{text-align:center;margin-top:1.5rem;color:rgba(255,255,255,.52);font-size:.9rem;}
.auth-link a{color:var(--p3);font-weight:700;margin-right:.3rem;transition:color var(--dur-fast) var(--ease);}
.auth-link a:hover{color:#fff;}
.otp-container{display:flex;gap:.75rem;justify-content:center;margin:1.5rem 0;direction:ltr;}
.otp-input{width:54px;height:60px;text-align:center;font-size:1.6rem;font-weight:800;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.1);border-radius:var(--r);color:#fff;font-family:var(--font);transition:all var(--dur) var(--ease);}
.otp-input:focus{outline:none;border-color:var(--p2);background:rgba(255,255,255,.12);box-shadow:0 0 0 4px rgba(89,86,233,.22);}

/* NAVBAR */
.platform-nav{position:fixed;top:0;right:0;left:0;z-index:1000;background:var(--bg-nav);backdrop-filter:blur(26px) saturate(200%);-webkit-backdrop-filter:blur(26px) saturate(200%);border-bottom:1px solid var(--border);padding:.65rem 1.2rem;transition:all var(--dur) var(--ease);}
.platform-nav::before{content:"";position:absolute;top:0;right:0;left:0;height:2.5px;background:var(--grad-multi);background-size:200% 100%;animation:navLine 5s linear infinite;}
@keyframes navLine{0%{background-position:0% 0%;}100%{background-position:200% 0%;}}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto;}
.nav-brand{display:flex;align-items:center;gap:.7rem;font-weight:900;font-size:1.25rem;color:var(--p1);text-decoration:none;}
.nav-brand-icon{width:40px;height:40px;background:var(--grad-p);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;box-shadow:0 4px 14px rgba(89,86,233,.35);transition:all var(--dur) var(--ease-spring);}
.nav-brand:hover .nav-brand-icon{transform:rotate(-8deg) scale(1.1);box-shadow:var(--glow-p);}
.nav-actions{display:flex;align-items:center;gap:.4rem;}
.nav-btn{width:40px;height:40px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--bg-input);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--dur) var(--ease);position:relative;font-size:1rem;}
.nav-btn:hover{background:var(--p1);color:#fff;border-color:var(--p1);transform:scale(1.1);box-shadow:0 4px 15px rgba(89,86,233,.32);}
.nav-btn .badge-dot{position:absolute;top:7px;left:7px;width:9px;height:9px;background:var(--danger);border-radius:50%;border:2px solid var(--bg-nav);animation:dotPulse 2s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(244,63,94,.6);}50%{transform:scale(1.2);box-shadow:0 0 0 5px rgba(244,63,94,0);}}

/* SIDEBAR */
.sidebar-overlay{position:fixed;inset:0;background:var(--overlay);z-index:1100;opacity:0;visibility:hidden;transition:all var(--dur) var(--ease);backdrop-filter:blur(4px);}
.sidebar-overlay.active{opacity:1;visibility:visible;}
.sidebar-menu{position:fixed;top:0;right:-310px;width:295px;height:100vh;background:var(--bg-sidebar);z-index:1200;transition:right .42s cubic-bezier(.4,0,.2,1);overflow-y:auto;box-shadow:var(--sh-xl);border-left:1px solid var(--border);}
.sidebar-menu.active{right:0;}
.sidebar-menu::before{content:"";position:absolute;top:0;right:0;left:0;height:3px;background:var(--grad-multi);background-size:200% 100%;animation:navLine 5s linear infinite;}
.sidebar-header{padding:2.5rem 1.5rem 2rem;background:var(--grad-p);text-align:center;position:relative;overflow:hidden;}
.sidebar-header::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.07);top:-90px;left:-70px;pointer-events:none;}
.sidebar-header::after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.05);bottom:-65px;right:-45px;pointer-events:none;}
.sidebar-avatar{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.15);border:2.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;margin:0 auto .9rem;font-size:2rem;color:#fff;box-shadow:0 6px 22px rgba(0,0,0,.22);transition:all var(--dur) var(--ease-spring);position:relative;z-index:1;}
.sidebar-avatar:hover{transform:scale(1.06);border-color:rgba(255,255,255,.7);}
.sidebar-name{font-weight:800;font-size:1.1rem;color:#fff;position:relative;z-index:1;}
.sidebar-phone{font-size:.82rem;color:rgba(255,255,255,.7);margin-top:.3rem;position:relative;z-index:1;}
.sidebar-links{padding:.8rem 0;}
.sidebar-link{display:flex;align-items:center;gap:1rem;padding:.88rem 1.5rem;color:var(--text2);font-weight:600;transition:all var(--dur) var(--ease);cursor:pointer;border:none;background:none;width:100%;font-family:var(--font);font-size:.98rem;border-right:3px solid transparent;}
.sidebar-link i{width:22px;text-align:center;font-size:1rem;}
.sidebar-link:hover,.sidebar-link.active{color:var(--p1);border-right-color:var(--p1);background:rgba(89,86,233,.07);}
.sidebar-divider{height:1px;background:var(--border2);margin:.4rem 1.5rem;}
.theme-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:.88rem 1.5rem;}
.theme-toggle-row span{font-weight:600;color:var(--text2);font-size:.96rem;}
.theme-switch{position:relative;width:54px;height:28px;}
.theme-switch input{display:none;}
.theme-slider{position:absolute;inset:0;background:var(--bg-input);border-radius:var(--r-full);cursor:pointer;transition:background var(--dur) var(--ease);border:1.5px solid var(--border2);}
.theme-slider::before{content:"";position:absolute;width:22px;height:22px;border-radius:50%;background:var(--p1);top:2px;right:2px;transition:all var(--dur) var(--ease-spring);box-shadow:0 2px 8px rgba(89,86,233,.42);}
.theme-switch input:checked~.theme-slider::before{transform:translateX(-26px);}

/* MAIN */
.main-content{padding-top:72px;min-height:100vh;}

/* CAROUSEL */
.hero-carousel{position:relative;margin:1rem;border-radius:var(--r-lg);overflow:hidden;height:220px;box-shadow:0 8px 32px rgba(0,0,0,.18),0 2px 8px rgba(89,86,233,.12);}
.carousel-track{display:flex;height:100%;transition:none;}
.carousel-slide{min-width:100%;height:100%;position:relative;opacity:0;transition:opacity .8s ease-in-out;position:absolute;inset:0;}
.carousel-slide.active{opacity:1;z-index:1;}
.carousel-slide img{width:100%;height:100%;object-fit:cover;animation:kenBurns 12s ease-in-out infinite alternate;}
@keyframes kenBurns{0%{transform:scale(1) translate(0,0)}50%{transform:scale(1.08) translate(-1%,-1%)}100%{transform:scale(1.04) translate(1%,0)}}
.carousel-slide .carousel-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(89,86,233,.35) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.6) 100%);}
.carousel-slide .carousel-caption{position:absolute;bottom:40px;right:20px;left:20px;z-index:2;color:#fff;text-align:right;}
.carousel-slide .carousel-caption h3{font-size:1.15rem;font-weight:800;margin:0 0 .3rem;text-shadow:0 2px 8px rgba(0,0,0,.5);line-height:1.4;}
.carousel-slide .carousel-caption p{font-size:.82rem;opacity:.85;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.4);}
.carousel-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3;}
.carousel-dot{height:8px;width:8px;border-radius:var(--r-full);background:rgba(255,255,255,.35);border:none;cursor:pointer;transition:all .4s var(--ease);backdrop-filter:blur(4px);}
.carousel-dot.active{background:#fff;width:30px;box-shadow:0 2px 12px rgba(255,255,255,.6);}
.carousel-dot:hover{background:rgba(255,255,255,.7);}

/* SECTION HEADER */
.section-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 1.2rem .8rem;}
.section-title{font-size:1.2rem;font-weight:900;color:var(--text);display:flex;align-items:center;gap:.5rem;position:relative;}
.section-title::after{content:"";position:absolute;bottom:-4px;right:0;width:42%;height:2.5px;border-radius:var(--r-full);background:var(--grad-p);}
.section-more{color:var(--p1);font-size:.88rem;font-weight:700;cursor:pointer;padding:.4rem .9rem;border-radius:var(--r-full);border:1.5px solid var(--p1);transition:all var(--dur) var(--ease);background:none;font-family:var(--font);}
.section-more:hover{background:var(--p1);color:#fff;box-shadow:0 4px 14px rgba(89,86,233,.3);}

/* LAWYERS */
.lawyers-scroll{display:flex;gap:1.1rem;overflow-x:auto;padding:.8rem 1.2rem 1.2rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;}
.lawyers-scroll::-webkit-scrollbar{display:none;}
.lawyer-card{flex-shrink:0;text-align:center;cursor:pointer;transition:transform var(--dur) var(--ease-spring);scroll-snap-align:start;}
.lawyer-card:hover{transform:translateY(-6px);}
.lawyer-card:active{transform:scale(.94);}
.lawyer-avatar{width:74px;height:74px;border-radius:50%;background:var(--grad-p);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;font-weight:800;margin:0 auto .6rem;border:2.5px solid var(--border2);box-shadow:var(--sh-sm);transition:all var(--dur) var(--ease);position:relative;}
.lawyer-card:hover .lawyer-avatar{box-shadow:0 0 0 4px rgba(89,86,233,.2),var(--glow-p);border-color:var(--p1);}
.lawyer-name{font-size:.83rem;font-weight:700;color:var(--text);max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* COURSE CARDS */
.courses-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1.2rem;padding:.6rem 1.2rem;}
.course-card{background:var(--bg-card);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:all var(--dur-slow) var(--ease);cursor:pointer;border:1px solid var(--border);position:relative;}
.course-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(89,86,233,.06) 0%,transparent 100%);opacity:0;transition:opacity var(--dur) var(--ease);border-radius:var(--r-lg);}
.course-card:hover{transform:translateY(-9px) scale(1.01);box-shadow:var(--sh-xl),0 0 0 1px rgba(89,86,233,.18);border-color:rgba(89,86,233,.28);}
.course-card:hover::before{opacity:1;}
.course-thumb{position:relative;height:162px;overflow:hidden;}
.course-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.course-card:hover .course-thumb img{transform:scale(1.1);}
.course-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.38) 0%,transparent 62%);}
.course-badge{position:absolute;top:10px;right:10px;z-index:1;padding:.28rem .88rem;border-radius:var(--r-full);font-size:.72rem;font-weight:800;color:#fff;letter-spacing:.3px;box-shadow:var(--sh-sm);}
.course-badge.free{background:var(--success);}
.course-badge.paid{background:var(--grad-gold);}
.course-badge.subscribed{background:var(--grad-p);}
.course-info{padding:1rem 1.1rem;}
.course-title{font-size:1.02rem;font-weight:800;color:var(--text);margin-bottom:.4rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;}
.course-meta{display:flex;align-items:center;gap:1rem;font-size:.8rem;color:var(--text2);margin-top:.5rem;flex-wrap:wrap;}
.course-meta span{display:flex;align-items:center;gap:.3rem;}
.course-meta i{color:var(--acc);font-size:.85rem;}
.course-price{display:flex;align-items:center;justify-content:space-between;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--border2);}
.price-tag{font-size:1.2rem;font-weight:900;background:var(--grad-p);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.price-tag.free-tag{background:none;-webkit-text-fill-color:var(--success);color:var(--success);}
.course-action-btn{padding:.45rem 1.1rem;border-radius:var(--r-full);border:none;background:var(--grad-p);color:#fff;font-family:var(--font);font-weight:700;font-size:.8rem;cursor:pointer;transition:all var(--dur) var(--ease);box-shadow:0 4px 12px rgba(89,86,233,.3);}
.course-action-btn:hover{transform:scale(1.07);box-shadow:var(--glow-p);}

/* VERTICAL LIST */
.course-list-vertical{padding:.6rem 1.2rem;display:flex;flex-direction:column;gap:.9rem;}
.course-list-item{display:flex;gap:1rem;background:var(--bg-card);border-radius:var(--r);padding:.9rem;box-shadow:var(--sh-xs);transition:all var(--dur) var(--ease);cursor:pointer;border:1px solid var(--border);position:relative;overflow:hidden;}
.course-list-item::before{content:"";position:absolute;top:0;right:0;bottom:0;width:3px;background:var(--grad-p);border-radius:0 var(--r) var(--r) 0;transform:scaleY(0);transition:transform .32s var(--ease-spring);}
.course-list-item:hover::before{transform:scaleY(1);}
.course-list-item:hover{transform:translateX(-4px);box-shadow:var(--sh-md);border-color:rgba(89,86,233,.2);}
.course-list-thumb{width:108px;height:78px;border-radius:var(--r-sm);overflow:hidden;flex-shrink:0;}
.course-list-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.course-list-item:hover .course-list-thumb img{transform:scale(1.08);}
.course-list-info{flex:1;min-width:0;}
.course-list-title{font-size:.95rem;font-weight:800;color:var(--text);margin-bottom:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.course-list-desc{font-size:.8rem;color:var(--text2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.56;}

/* COURSE DETAIL */
.course-hero{position:relative;height:260px;overflow:hidden;}
.course-hero img{width:100%;height:100%;object-fit:cover;}
.course-hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.1) 100%);display:flex;align-items:flex-end;padding:1.5rem;}
.course-hero-info{color:#fff;}
.course-hero-title{font-size:1.45rem;font-weight:900;margin-bottom:.5rem;line-height:1.3;text-shadow:0 2px 12px rgba(0,0,0,.5);}
.course-hero-lawyer{font-size:.9rem;opacity:.85;}
.course-detail-body{padding:1.2rem;}
.course-stats{display:flex;gap:.8rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.stat-item{display:flex;align-items:center;gap:.5rem;background:var(--bg-input);padding:.55rem 1rem;border-radius:var(--r);font-size:.86rem;font-weight:700;color:var(--text);border:1px solid var(--border);transition:all var(--dur) var(--ease);}
.stat-item:hover{background:rgba(89,86,233,.08);border-color:rgba(89,86,233,.22);}
.stat-item i{color:var(--p1);font-size:.95rem;}
.course-description{color:var(--text2);line-height:1.85;margin-bottom:1.5rem;font-size:.95rem;}
.subscribe-btn{width:100%;padding:1rem 1.2rem;background:var(--grad-p);border:none;border-radius:var(--r);color:#fff;font-family:var(--font);font-size:1.08rem;font-weight:800;cursor:pointer;transition:all var(--dur) var(--ease);margin-bottom:1.5rem;position:relative;overflow:hidden;box-shadow:var(--glow-p);}
.subscribe-btn::after{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg);transition:left .65s var(--ease);}
.subscribe-btn:hover::after{left:150%;}
.subscribe-btn:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(89,86,233,.55);}
.subscribe-btn.subscribed-btn{background:var(--success);box-shadow:0 4px 22px rgba(16,185,129,.35);cursor:default;}
.subscribe-btn.pending-btn{background:var(--warning);box-shadow:0 4px 22px rgba(245,158,11,.35);cursor:default;}

/* VIDEO LIST */
.video-list{display:flex;flex-direction:column;gap:.75rem;}
.video-item{display:flex;align-items:center;gap:1rem;padding:.9rem 1rem;background:var(--bg-input);border-radius:var(--r);cursor:pointer;transition:all var(--dur) var(--ease);border:1.5px solid transparent;position:relative;overflow:hidden;}
.video-item:hover{border-color:rgba(89,86,233,.3);background:var(--bg-card);transform:translateX(-3px);}
.video-item.locked{opacity:.5;cursor:not-allowed;transform:none!important;}
.video-num{width:38px;height:38px;border-radius:50%;background:var(--grad-p);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.88rem;flex-shrink:0;box-shadow:0 4px 12px rgba(89,86,233,.32);transition:all var(--dur) var(--ease);}
.video-item:hover .video-num{transform:scale(1.1);box-shadow:var(--glow-p);}
.video-item.locked .video-num{background:var(--text3);box-shadow:none;}
.video-info{flex:1;min-width:0;}
.video-title-text{font-weight:700;font-size:.93rem;color:var(--text);}
.video-duration{font-size:.78rem;color:var(--text3);margin-top:.2rem;}
.video-lock-icon{color:var(--text3);font-size:.95rem;}
.video-free-badge,.video-seen-badge{padding:.2rem .65rem;border-radius:var(--r-full);font-size:.7rem;font-weight:800;color:#fff;letter-spacing:.3px;}
.video-free-badge{background:var(--success);}
.video-seen-badge{background:var(--grad-p);display:inline-flex;align-items:center;gap:.25rem;}
.video-item.seen{border-right:3px solid var(--p1);opacity:.8;}

/* VIDEO PLAYER */
.video-player-wrapper{position:relative;width:100%;background:#000;aspect-ratio:16/9;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden;box-shadow:0 10px 42px rgba(0,0,0,.55);}
.video-player-wrapper video,.video-player-wrapper iframe{width:100%;height:100%;border:none;}
.video-details-section{padding:1.2rem;}
.video-title-large{font-size:1.2rem;font-weight:900;color:var(--text);margin-bottom:.9rem;line-height:1.4;}
.video-actions{display:flex;gap:1.5rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border2);}
.video-action-item{display:flex;flex-direction:column;align-items:center;gap:.3rem;cursor:pointer;color:var(--text2);transition:all var(--dur) var(--ease);background:none;border:none;font-family:var(--font);padding:.5rem .8rem;border-radius:var(--r-sm);}
.video-action-item:hover,.video-action-item.liked{color:var(--p1);background:rgba(89,86,233,.08);}
.video-action-item i{font-size:1.3rem;transition:transform var(--dur) var(--ease-spring);}
.video-action-item:hover i{transform:scale(1.22);}
.video-action-item span{font-size:.78rem;font-weight:700;}
.comments-section{margin-top:1.5rem;}
.comments-title{font-size:1.05rem;font-weight:800;margin-bottom:1rem;color:var(--text);display:flex;align-items:center;gap:.5rem;}
.comment-input-wrap{display:flex;gap:.8rem;margin-bottom:1.5rem;background:var(--bg-input);border-radius:var(--r);padding:.4rem .4rem .4rem .5rem;border:1.5px solid var(--border);transition:border-color var(--dur) var(--ease);}
.comment-input-wrap:focus-within{border-color:var(--p1);box-shadow:0 0 0 3px rgba(89,86,233,.12);}
.comment-input-wrap input{flex:1;padding:.5rem .3rem;background:none;border:none;font-family:var(--font);color:var(--text);font-size:.93rem;direction:rtl;}
.comment-input-wrap input:focus{outline:none;}
.comment-input-wrap input::placeholder{color:var(--text3);}
.comment-send-btn{width:42px;height:42px;border-radius:50%;background:var(--grad-p);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--dur) var(--ease);flex-shrink:0;box-shadow:0 4px 12px rgba(89,86,233,.32);}
.comment-send-btn:hover{transform:scale(1.12);box-shadow:var(--glow-p);}
.comment-item{display:flex;gap:.9rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border2);animation:commentSlide .4s var(--ease) both;}
@keyframes commentSlide{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:translateX(0);}}
.comment-avatar{width:38px;height:38px;border-radius:50%;background:var(--grad-sec);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.83rem;flex-shrink:0;}
.comment-body{flex:1;}
.comment-name{font-weight:800;font-size:.87rem;margin-bottom:.2rem;color:var(--text);}
.comment-text{font-size:.87rem;color:var(--text2);line-height:1.55;}
.comment-time{font-size:.73rem;color:var(--text3);margin-top:.3rem;}

/* NOTIFICATIONS */
.notification-list{padding:.8rem 1.2rem;}
.notification-item{display:flex;gap:1rem;padding:1rem 1.1rem;background:var(--bg-card);border-radius:var(--r);margin-bottom:.8rem;box-shadow:var(--sh-xs);border:1px solid var(--border);transition:all var(--dur) var(--ease);animation:notifSlide .4s var(--ease) both;position:relative;overflow:hidden;}
.notification-item::before{content:"";position:absolute;top:0;right:0;bottom:0;width:3px;background:var(--grad-p);border-radius:0 var(--r) var(--r) 0;}
.notification-item:hover{border-color:rgba(89,86,233,.2);box-shadow:var(--sh-md);transform:translateX(-3px);}
@keyframes notifSlide{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:translateX(0);}}
.notification-icon{width:46px;height:46px;border-radius:var(--r-sm);background:rgba(89,86,233,.1);display:flex;align-items:center;justify-content:center;color:var(--p1);font-size:1.2rem;flex-shrink:0;transition:all var(--dur) var(--ease);}
.notification-item:hover .notification-icon{background:var(--p1);color:#fff;box-shadow:0 4px 15px rgba(89,86,233,.38);}
.notification-body{flex:1;}
.notification-title{font-weight:800;font-size:.93rem;margin-bottom:.2rem;color:var(--text);}
.notification-text{font-size:.83rem;color:var(--text2);line-height:1.55;}
.notification-time{font-size:.73rem;color:var(--text3);margin-top:.3rem;}

/* PROFILE */
.profile-header{background:var(--grad-p);padding:4rem 1.5rem 3rem;text-align:center;color:#fff;margin-bottom:-50px;position:relative;overflow:hidden;}
.profile-header::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08);top:-90px;left:-65px;animation:auroraOrb1 9s ease-in-out infinite alternate;}
.profile-header::after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.06);bottom:-55px;right:-45px;animation:auroraOrb2 7s ease-in-out infinite alternate;}
.profile-avatar-large{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:2.6rem;margin:0 auto .9rem;border:3px solid rgba(255,255,255,.55);box-shadow:0 8px 32px rgba(0,0,0,.22);position:relative;z-index:1;transition:all var(--dur) var(--ease-spring);}
.profile-avatar-large:hover{transform:scale(1.06);}
.profile-name{font-size:1.35rem;font-weight:900;position:relative;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.2);}
.profile-phone{font-size:.88rem;opacity:.8;position:relative;z-index:1;margin-top:.3rem;}
.profile-body{padding:4rem 1.2rem 2rem;background:var(--bg);border-radius:var(--r-2xl) var(--r-2xl) 0 0;position:relative;min-height:50vh;}
.profile-field{margin-bottom:1.2rem;}
.profile-field label{display:block;font-size:.83rem;font-weight:700;color:var(--text2);margin-bottom:.4rem;}
.profile-field input{width:100%;padding:.85rem 1.1rem;background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--r);font-family:var(--font);color:var(--text);font-size:.95rem;transition:all var(--dur) var(--ease);direction:rtl;}
.profile-field input:focus{outline:none;border-color:var(--p1);box-shadow:0 0 0 3px rgba(89,86,233,.12);background:var(--bg-card);}

/* PAGE HEADER */
.page-header{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;}
.back-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);background:var(--bg-input);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--dur) var(--ease);font-size:1rem;}
.back-btn:hover{background:var(--p1);color:#fff;border-color:var(--p1);transform:scale(1.1);box-shadow:0 4px 14px rgba(89,86,233,.32);}
.page-title{font-size:1.2rem;font-weight:900;color:var(--text);}

/* EMPTY STATE */
.empty-state{text-align:center;padding:4rem 1.5rem;}
.empty-state i{font-size:4rem;margin-bottom:1rem;opacity:.3;display:block;color:var(--p1);}
.empty-state p{font-size:1.02rem;font-weight:700;color:var(--text2);}

/* SKELETON */
.skeleton{background:linear-gradient(90deg,var(--bg-input) 25%,rgba(255,255,255,.06) 50%,var(--bg-input) 75%);background-size:300% 100%;animation:shimmer 1.8s ease-in-out infinite;border-radius:var(--r-sm);}

/* TOAST */
.toast-container{position:fixed;top:85px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.toast-msg{padding:.82rem 1.8rem;border-radius:var(--r-full);color:#fff;font-weight:700;font-size:.9rem;box-shadow:var(--sh-lg);white-space:nowrap;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);animation:toastIn .4s var(--ease-spring) both,toastOut .4s var(--ease) 2.6s forwards;}
.toast-msg.success{background:linear-gradient(135deg,#10b981,#34d399);box-shadow:0 8px 24px rgba(16,185,129,.42);}
.toast-msg.error{background:linear-gradient(135deg,#f43f5e,#fb7185);box-shadow:0 8px 24px rgba(244,63,94,.42);}
.toast-msg.info{background:var(--grad-p);box-shadow:var(--glow-p);}

/* TABS */
.tabs-container{display:flex;gap:.4rem;padding:0 1.2rem;overflow-x:auto;margin-bottom:1rem;}
.tabs-container::-webkit-scrollbar{display:none;}
.tab-btn{padding:.6rem 1.3rem;border-radius:var(--r-full);border:1.5px solid var(--border);background:var(--bg-input);color:var(--text2);font-family:var(--font);font-weight:700;font-size:.86rem;cursor:pointer;transition:all var(--dur) var(--ease);white-space:nowrap;}
.tab-btn.active{background:var(--grad-p);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(89,86,233,.32);}
.tab-btn:hover:not(.active){border-color:var(--p1);color:var(--p1);}

/* BOTTOM NAV */
.bottom-nav{position:fixed;bottom:0;right:0;left:0;background:var(--bg-nav);backdrop-filter:blur(26px) saturate(200%);-webkit-backdrop-filter:blur(26px) saturate(200%);border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:center;padding:.5rem 0 calc(.5rem + env(safe-area-inset-bottom));z-index:1000;}
.bottom-nav::before{content:"";position:absolute;top:0;right:0;left:0;height:1px;background:var(--grad-multi);background-size:200% 100%;animation:navLine 5s linear infinite;}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.5rem 1rem;color:var(--text3);font-size:.7rem;font-weight:700;cursor:pointer;transition:all var(--dur) var(--ease);background:none;border:none;font-family:var(--font);position:relative;border-radius:var(--r-sm);}
.bottom-nav-item i{font-size:1.22rem;transition:all var(--dur) var(--ease-spring);}
.bottom-nav-item.active{color:var(--p1);}
.bottom-nav-item.active i{transform:translateY(-5px) scale(1.18);filter:drop-shadow(0 4px 8px rgba(89,86,233,.46));}
.bottom-nav-item.active::after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:22px;height:3px;border-radius:var(--r-full);background:var(--grad-p);animation:pillIn .32s var(--ease-spring) both;}
@keyframes pillIn{from{width:0;opacity:0;}to{width:22px;opacity:1;}}
.bottom-nav-item:hover:not(.active){color:var(--text);}
.bottom-nav-item:hover:not(.active) i{transform:translateY(-2px) scale(1.06);}
.has-bottom-nav{padding-bottom:82px;}

/* ANIMATIONS */
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-20px) rotate(6deg);}}
@keyframes slideUp{from{opacity:0;transform:translateY(28px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:scale(1);}}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-16px) scale(.9);}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}}
@keyframes toastOut{from{opacity:1;}to{opacity:0;transform:translateX(-50%) translateY(-12px);}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(1.18);}}

/* RESPONSIVE */
@media (min-width:768px){
    .hero-carousel{height:300px;margin:1.5rem 2rem;}
    .section-header{padding:2rem 2rem 1rem;}
    .lawyers-scroll{padding:.8rem 2rem 1.2rem;}
    .courses-grid{padding:.6rem 2rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
    .course-list-vertical{padding:.6rem 2rem;}
    .notification-list{padding:.8rem 2rem;}
    .bottom-nav{display:none;}
    .has-bottom-nav{padding-bottom:0;}
    .auth-card{padding:3rem;}
    .profile-body{padding:4.5rem 2rem 3rem;}
}
@media (max-width:480px){
    .auth-card{margin:0;padding:2.2rem 1.5rem;border-radius:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;background:rgba(12,10,25,.88);backdrop-filter:blur(20px);}
    .courses-grid{grid-template-columns:1fr;}
    .course-hero{height:210px;}
}
