:root{--bg:#0a0e27;--bg2:#111535;--purple:#6d28d9;--pink:#ec4899;--magenta:#db2777;--text:#e5e7eb;--muted:#9ca3af;--border:rgba(255,255,255,.1);--card:rgba(255,255,255,.05);--grad:linear-gradient(135deg,#6d28d9,#db2777);--grad2:linear-gradient(135deg,#1e3a8a,#6d28d9);--r:12px;--rl:18px;--t:.3s ease}
*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--text);direction:rtl;line-height:1.7}
a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}img{max-width:100%}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:var(--r);font-weight:600;transition:var(--t)}
.btn-primary{background:var(--grad);color:#fff}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(109,40,217,.4)}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.2)}.btn-ghost{background:rgba(255,255,255,.05)}
.btn-lg{padding:14px 28px}.btn-sm{padding:8px 14px;font-size:13px}.btn-block{width:100%}.btn-whatsapp{background:#25d366;color:#fff}
.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-weight:500;font-size:14px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 14px;background:rgba(255,255,255,.05);border:1.5px solid var(--border);border-radius:var(--r);color:var(--text);font-size:14px;font-family:inherit}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(109,40,217,.15)}
.alert{padding:12px 16px;border-radius:var(--r);margin-bottom:14px;border-right:4px solid;font-size:14px}
.alert-success{background:rgba(16,185,129,.1);border-color:#10b981;color:#86efac}.alert-danger{background:rgba(239,68,68,.1);border-color:#ef4444;color:#fca5a5}
.alert-info{background:rgba(59,130,246,.1);border-color:#3b82f6;color:#93c5fd}.alert-warning{background:rgba(245,158,11,.1);border-color:#f59e0b;color:#fcd34d}
.glass-card{background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--rl);padding:20px;transition:var(--t)}
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.auth-wrapper{position:relative;width:100%;max-width:440px}
.auth-bg-shapes{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.shape{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4}
.shape-1{width:380px;height:380px;background:var(--purple);top:-80px;right:-80px}.shape-2{width:320px;height:320px;background:var(--magenta);bottom:-50px;left:-80px}
.auth-card{background:rgba(17,21,53,.9);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:24px;padding:30px 22px;box-shadow:0 16px 48px rgba(109,40,217,.3)}
.auth-logo{text-align:center;margin-bottom:22px}.auth-logo .logo-icon{width:70px;height:70px;margin:0 auto 12px;background:var(--grad);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:#fff}
.auth-logo h1{font-size:28px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.auth-logo .subtitle{color:var(--muted);font-size:13px;margin-top:4px}
.auth-links{display:flex;gap:14px;justify-content:center;margin-top:20px;flex-wrap:wrap}.auth-links a{color:var(--muted);font-size:14px}
.otp-inputs{display:flex;gap:8px;justify-content:center;margin:20px 0;direction:ltr}
.otp-input{width:44px;height:52px;background:rgba(255,255,255,.05);border:2px solid var(--border);border-radius:var(--r);text-align:center;font-size:20px;font-weight:700;color:var(--text)}
.resend-container{text-align:center;margin-top:14px}.resend-container p{color:var(--muted);font-size:13px}
.main-header{position:sticky;top:0;z-index:100;background:rgba(10,14,39,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:10px}
.logo{display:flex;align-items:center;gap:8px}.logo .logo-icon{width:40px;height:40px;background:var(--grad);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff}
.logo-text{font-size:19px;font-weight:700;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.main-nav{display:flex;gap:4px}
.nav-link{padding:7px 12px;border-radius:var(--r);font-size:14px;color:var(--muted)}.nav-link:hover,.nav-link.active{background:rgba(109,40,217,.15);color:var(--text)}
.header-actions{display:flex;align-items:center;gap:8px}
.user-btn{display:flex;align-items:center;gap:6px;padding:5px 10px;background:rgba(255,255,255,.05);border-radius:var(--r)}
.user-avatar,.avatar-placeholder{width:34px;height:34px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;overflow:hidden;flex-shrink:0}
.user-avatar img{width:100%;height:100%;object-fit:cover}.user-menu{position:relative}
.user-dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:180px;background:rgba(17,21,53,.98);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--r);padding:6px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:var(--t);z-index:120}
.user-menu:hover .user-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.user-dropdown a{display:block;padding:9px 11px;border-radius:8px;font-size:14px}.user-dropdown a:hover{background:rgba(109,40,217,.15)}
.user-dropdown hr{border:none;border-top:1px solid var(--border);margin:6px 0}.mobile-menu-btn{display:none;font-size:24px}
.hero{position:relative;padding:60px 0 40px;overflow:hidden;text-align:center}
.hero-bg{position:absolute;inset:0;z-index:-1}.hero-shape{position:absolute;border-radius:50%;filter:blur(100px);opacity:.3}
.hero-shape.shape-1{width:400px;height:400px;background:var(--purple);top:-100px;right:10%}.hero-shape.shape-2{width:350px;height:350px;background:var(--magenta);bottom:-100px;left:5%}
.hero-title{font-size:clamp(26px,5vw,44px);font-weight:800;margin-bottom:14px}
.gradient-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:clamp(14px,2vw,17px);color:var(--muted);max-width:560px;margin:0 auto}
.section{padding:40px 0}.section-header{text-align:center;margin-bottom:30px}
.section-title{font-size:clamp(22px,3.5vw,32px);font-weight:800;margin-bottom:8px}.section-sub{color:var(--muted);font-size:14px}
.page-header{padding:50px 0 24px;text-align:center;background:linear-gradient(180deg,rgba(109,40,217,.1),transparent)}
.grid{display:grid;gap:14px}
.grid-4{grid-template-columns:repeat(4,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}
.spec-grid{grid-template-columns:repeat(4,1fr)}
.specialty-card{text-align:center;padding:20px 12px;cursor:pointer}.specialty-card:hover{transform:translateY(-4px)}
.specialty-icon{width:58px;height:58px;margin:0 auto 10px;background:var(--grad);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px}
.specialty-card h3{font-size:15px;margin-bottom:4px}.specialty-card p{color:var(--muted);font-size:12px}
.doctor-card{overflow:hidden;padding:0}.doctor-card .doctor-avatar{height:150px;background:var(--grad2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.doctor-card .doctor-avatar img{width:100%;height:100%;object-fit:cover;object-position:top}.doctor-card .avatar-placeholder{width:70px;height:70px;font-size:28px}
.doctor-info{padding:14px}.doctor-info h3{font-size:15px;margin-bottom:3px}.doctor-info .specialty{color:var(--muted);font-size:12px;margin-bottom:8px}
.spec-tag{display:inline-block;background:rgba(109,40,217,.2);color:#d8b4fe;border-radius:20px;padding:2px 10px;font-size:11px;margin-bottom:6px}
.doctor-meta{display:flex;justify-content:space-between;margin-bottom:10px;font-size:13px}.rating{color:#fbbf24}.fee{color:var(--pink);font-weight:600}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat-card{text-align:center;padding:22px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--rl)}
.stat-icon{font-size:36px;margin-bottom:8px}
.stat-number{font-size:32px;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}
.stat-label{color:var(--muted);font-size:13px}
.filter-bar{display:flex;gap:10px;padding:14px;margin-bottom:20px;flex-wrap:wrap}
.filter-input,.filter-select{flex:1;min-width:140px;padding:10px;background:rgba(255,255,255,.05);border:1.5px solid var(--border);border-radius:var(--r);color:var(--text)}
.filter-tabs{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.tab{padding:7px 14px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:20px;font-size:13px}.tab.active,.tab:hover{background:var(--grad);border-color:transparent;color:#fff}
.doctor-profile{display:grid;grid-template-columns:200px 1fr;gap:24px;margin-bottom:24px;padding:24px}
.doctor-profile-avatar{width:100%;height:200px;border-radius:var(--rl);overflow:hidden;background:var(--grad2)}
.doctor-profile-avatar img{width:100%;height:100%;object-fit:cover;object-position:top}.doctor-profile-avatar .avatar-placeholder{width:100%;height:100%;font-size:60px}
.doctor-badges{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.badge{display:inline-block;padding:5px 10px;background:rgba(109,40,217,.2);border-radius:20px;font-size:12px;font-weight:500}
.badge-price{background:rgba(236,72,153,.2)}.badge-success{background:rgba(16,185,129,.2);color:#86efac}.badge-warning{background:rgba(245,158,11,.2);color:#fcd34d}
.badge-danger{background:rgba(239,68,68,.2);color:#fca5a5}.badge-info{background:rgba(59,130,246,.2);color:#93c5fd}
.booking-container{display:grid;grid-template-columns:300px 1fr;gap:20px}
.booking-summary{position:sticky;top:80px;align-self:start}
.doctor-summary{display:flex;gap:12px;align-items:center;margin-top:14px}.doctor-summary .doctor-avatar{width:70px;height:70px;border-radius:50%;overflow:hidden}
.booking-form h3{font-size:16px;margin:18px 0 8px;color:var(--pink)}
.payment-methods{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.payment-option input{display:none}
.payment-card{padding:16px;border:2px solid var(--border);border-radius:var(--r);cursor:pointer;transition:var(--t);text-align:center}
.payment-option input:checked+.payment-card{border-color:var(--purple);background:rgba(109,40,217,.1)}
.appointment-card{padding:16px;margin-bottom:12px}
.appointment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:6px}
.appointment-number{font-family:monospace;font-weight:700;color:var(--pink)}.appointment-details h3{font-size:15px;margin-bottom:3px}.appointment-details p{font-size:12px;color:var(--muted);margin:2px 0}
.empty-state{text-align:center;padding:40px 20px}
.flash-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:var(--r);color:#fff;z-index:1000;animation:toastIn .4s;max-width:90%;font-size:14px}
.flash-success{background:#10b981}.flash-danger{background:#ef4444}.flash-warning{background:#f59e0b}.flash-info{background:#3b82f6}
.flash-toast.hide{animation:toastOut .4s forwards}@keyframes toastIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,20px)}}
.main-footer{background:var(--bg2);border-top:1px solid var(--border);padding:40px 0 16px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-bottom:28px}
.footer-about p{color:var(--muted);margin-top:10px;font-size:13px}
.footer-links h4,.footer-contact h4{font-size:15px;margin-bottom:12px;color:var(--pink)}
.footer-links a{display:block;padding:5px 0;color:var(--muted);font-size:13px}.footer-contact p{color:var(--muted);margin-bottom:10px;font-size:13px}
.footer-bottom{text-align:center;padding-top:16px;border-top:1px solid var(--border);color:var(--muted);font-size:12px}
.animate-fade-up{opacity:0;transform:translateY(20px);transition:opacity .5s,transform .5s}.animate-fade-up.visible{opacity:1;transform:translateY(0)}
.text-center{text-align:center}.mt-3{margin-top:20px}.mt-4{margin-top:30px}

/* 📱 MOBILE FIX - 2×2 grids */
@media (max-width:992px){
.grid-4{grid-template-columns:repeat(2,1fr)}
.spec-grid{grid-template-columns:repeat(3,1fr)}
.grid-3{grid-template-columns:repeat(2,1fr)}.grid-2{grid-template-columns:1fr}
.stats-grid{grid-template-columns:repeat(2,1fr)}
.main-nav{display:none;position:absolute;top:100%;right:0;left:0;background:rgba(10,14,39,.98);padding:16px;flex-direction:column;border-bottom:1px solid var(--border)}
.main-nav.active{display:flex}.mobile-menu-btn{display:block}
.footer-grid{grid-template-columns:1fr 1fr}.doctor-profile{grid-template-columns:1fr;text-align:center;padding:20px}.doctor-badges{justify-content:center}
.booking-container{grid-template-columns:1fr}.booking-summary{position:static}
}
@media (max-width:640px){
.grid-4{grid-template-columns:repeat(2,1fr)}.spec-grid{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}
.stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}.footer-grid{grid-template-columns:1fr}.payment-methods{grid-template-columns:1fr}
.hero{padding:50px 0 30px}.section{padding:30px 0}.auth-card{padding:24px 16px}
.otp-input{width:40px;height:48px;font-size:18px}.filter-bar{flex-direction:column}.filter-input,.filter-select{min-width:100%}
.doctor-card .doctor-avatar{height:160px}
}
@media (max-width:380px){
.grid-4{grid-template-columns:1fr}.spec-grid{grid-template-columns:repeat(2,1fr)}
}
/* 🖥️ Desktop enhancements */
@media (min-width:1200px){.container{max-width:1140px}.hero{padding:90px 0 70px}.section{padding:70px 0}.glass-card{padding:26px}.doctor-card .doctor-avatar{height:200px}.hero-title{font-size:54px}}
@media (min-width:993px){.grid-4{grid-template-columns:repeat(4,1fr)}.spec-grid{grid-template-columns:repeat(4,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:768px) and (max-width:992px){.grid-4{grid-template-columns:repeat(3,1fr)}.spec-grid{grid-template-columns:repeat(3,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.grid-4{grid-template-columns:repeat(2,1fr)}.spec-grid{grid-template-columns:repeat(2,1fr)}.grid-3,.grid-2{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr}.doctor-profile{grid-template-columns:1fr;text-align:center}.doctor-badges{justify-content:center}.booking-container{grid-template-columns:1fr}.booking-summary{position:static}.payment-methods{grid-template-columns:1fr}.filter-bar{flex-direction:column}.filter-input,.filter-select{min-width:100%}}
@media (max-width:380px){.grid-4{grid-template-columns:1fr}}
/* Hover & transitions احترافية */
.doctor-card,.specialty-card,.stat-card{transition:transform .3s,box-shadow .3s,border-color .3s}
.doctor-card:hover,.specialty-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(109,40,217,.25);border-color:rgba(109,40,217,.4)}
.btn{transition:all .25s ease}.btn:active{transform:scale(.97)}
.doctor-info{text-align:center}
.doc-bio{color:var(--muted);font-size:12px;margin:4px 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.6}
.doctor-meta{justify-content:center;gap:16px}
.form-row.sched-row{grid-template-columns:1fr 1fr 1fr}
@media (max-width:640px){.form-row.sched-row{grid-template-columns:1fr}}
html:not(.js) .animate-fade-up{opacity:1!important;transform:none!important}