sanaddr17/Djelfa-Drive

1:root {2  --bg: #0a0a12;3  --surface: #12121e;4  --surface2: #1a1a2e;5  --surface3: #242442;6  --primary: #f59e0b;7  --primary-dark: #d97706;8  --primary-light: #fbbf24;9  --primary-glow: rgba(245,158,11,0.25);10  --success: #10b981;11  --error: #ef4444;12  --info: #3b82f6;13  --text: #f1f5f9;14  --text2: #cbd5e1;15  --text-muted: #64748b;16  --radius-sm: 10px;17  --radius: 16px;18  --radius-lg: 24px;19  --shadow: 0 8px 32px rgba(0,0,0,0.5);20  --shadow-glow: 0 0 40px var(--primary-glow);21  --font: 'Tajawal','system-ui',sans-serif;22}23 24*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}25html,body{height:100%;overflow:hidden}26body{font-family:var(--font);background:var(--bg);color:var(--text);direction:rtl;-webkit-font-smoothing:antialiased}27#app{height:100dvh;position:relative;overflow:hidden}28 29/* ===== PAGES ===== */30.page{display:none;height:100%;flex-direction:column;position:absolute;inset:0;overflow-y:auto;overflow-x:hidden}31.page.active{display:flex}32.page.entering{animation:pageIn 0.45s cubic-bezier(0.16,1,0.3,1) both}33.page.leaving{animation:pageOut 0.3s cubic-bezier(0.55,0,1,0.45) both}34@keyframes pageIn{from{opacity:0;transform:translateY(30px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}35@keyframes pageOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-20px) scale(0.98)}}36 37/* ===== SPLASH ===== */38.page-splash{39  justify-content:center;align-items:center;40  background:radial-gradient(ellipse at center,#1a0f00 0%,#0a0a12 70%);41  position:relative;overflow:hidden42}43.page-splash::before{44  content:'';position:absolute;inset:0;45  background:radial-gradient(circle at 50% 40%,var(--primary-glow) 0%,transparent 60%);46  animation:glowPulse 3s ease-in-out infinite47}48@keyframes glowPulse{0%,100%{opacity:0.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}49.splash-content{text-align:center;position:relative;z-index:1}50.splash-icon{51  width:110px;height:110px;margin:0 auto 24px;52  background:linear-gradient(135deg,var(--primary) 0%,#f97316 50%,var(--primary-light) 100%);53  border-radius:50%;display:flex;align-items:center;justify-content:center;54  font-size:48px;color:#fff;55  box-shadow:0 0 60px var(--primary-glow);56  position:relative;animation:taxiBounce 2s ease-in-out infinite57}58.splash-icon::after{59  content:'';position:absolute;inset:-4px;border-radius:50%;60  border:2px solid rgba(245,158,11,0.3);animation:ringPulse 2s ease-out infinite61}62@keyframes taxiBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.03)}}63@keyframes ringPulse{0%{transform:scale(1);opacity:1}100%{transform:scale(1.3);opacity:0}}64.splash-title{65  font-size:40px;font-weight:900;line-height:1.1;66  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);67  -webkit-background-clip:text;-webkit-text-fill-color:transparent;68  background-clip:text;letter-spacing:-0.5px69}70.splash-subtitle{color:var(--text-muted);margin-top:8px;font-size:16px;font-weight:500}71.splash-loader{display:flex;gap:8px;justify-content:center;margin-top:48px}72.splash-loader span{73  width:10px;height:10px;border-radius:50%;background:var(--primary);74  animation:dotBounce 1.4s ease-in-out infinite both75}76.splash-loader span:nth-child(1){animation-delay:-0.32s}77.splash-loader span:nth-child(2){animation-delay:-0.16s}78@keyframes dotBounce{0%,80%,100%{transform:scale(0);opacity:0.3}40%{transform:scale(1);opacity:1}}79 80/* ===== AUTH ===== */81.page-auth{82  justify-content:center;padding:32px 24px;83  background:linear-gradient(180deg,#0a0a12 0%,#1a0f00 50%,#0a0a12 100%);84  position:relative85}86.page-auth::before{87  content:'';position:absolute;top:0;left:0;right:0;height:200px;88  background:radial-gradient(ellipse at 50% 0%,var(--primary-glow) 0%,transparent 70%);89  pointer-events:none90}91.auth-header{text-align:center;margin-bottom:36px;position:relative;z-index:1}92.auth-logo{93  width:72px;height:72px;margin:0 auto 18px;94  background:linear-gradient(135deg,var(--primary) 0%,#f97316 100%);95  border-radius:50%;display:flex;align-items:center;justify-content:center;96  font-size:32px;color:#000;box-shadow:var(--shadow-glow);97  animation:logoFloat 3s ease-in-out infinite98}99@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}100.auth-header h2{font-size:26px;font-weight:800}101.auth-header p{color:var(--text-muted);margin-top:4px;font-size:15px}102.auth-form{display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}103 104.input-group{position:relative}105.input-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:16px;z-index:2;pointer-events:none}106.input-group input{107  width:100%;padding:16px 50px 16px 16px;108  background:rgba(26,26,46,0.8);border:1.5px solid rgba(255,255,255,0.06);109  border-radius:var(--radius-sm);color:var(--text);font-size:15px;font-family:inherit;110  transition:all 0.25s;outline:none;backdrop-filter:blur(10px)111}112.input-group input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);background:rgba(26,26,46,0.95)}113.input-group input::placeholder{color:var(--text-muted)}114.input-group input.error{border-color:var(--error);box-shadow:0 0 0 3px rgba(239,68,68,0.15)}115 116.role-selector{display:flex;gap:12px;margin:4px 0}117.role-card{118  flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;119  padding:18px 12px;background:rgba(26,26,46,0.6);border:1.5px solid rgba(255,255,255,0.06);120  border-radius:var(--radius-sm);cursor:pointer;transition:all 0.3s;font-size:14px;121  backdrop-filter:blur(10px);position:relative;overflow:hidden122}123.role-card input{display:none}124.role-card:has(input:checked){125  border-color:var(--primary);background:rgba(245,158,11,0.1);126  box-shadow:0 0 20px var(--primary-glow);transform:translateY(-2px)127}128.role-card i{font-size:28px;transition:transform 0.3s}129.role-card:has(input:checked) i{transform:scale(1.15)}130.role-card span{font-weight:600}131.role-card:active{transform:scale(0.97)}132 133/* ===== BUTTONS ===== */134.btn{135  display:inline-flex;align-items:center;justify-content:center;gap:8px;136  padding:16px 24px;border:none;border-radius:var(--radius-sm);137  font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;138  transition:all 0.25s cubic-bezier(0.16,1,0.3,1);139  position:relative;overflow:hidden;letter-spacing:0.3px140}141.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background 0.3s}142.btn:active::after{background:rgba(255,255,255,0.15)}143.btn-primary{144  background:linear-gradient(135deg,var(--primary) 0%,#f97316 100%);145  color:#000;box-shadow:0 4px 24px var(--primary-glow)146}147.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 40px var(--primary-glow)}148.btn-primary:active{transform:translateY(0) scale(0.98)}149.btn-full{width:100%}150.btn-lg{padding:18px 28px;font-size:18px;border-radius:var(--radius)}151.btn-success{background:linear-gradient(135deg,#059669,#10b981);color:#fff;box-shadow:0 4px 20px rgba(16,185,129,0.3)}152.btn-danger{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;box-shadow:0 4px 20px rgba(239,68,68,0.3)}153.btn-sm{padding:10px 18px;font-size:13px;border-radius:8px}154.btn-outline{background:transparent;border:1.5px solid var(--surface3);color:var(--text)}155.btn-outline:hover{border-color:var(--primary);color:var(--primary)}156.btn-ride{margin:20px 0;border-radius:var(--radius-lg);padding:20px;font-size:18px}157 158.auth-switch{text-align:center;margin-top:24px;color:var(--text-muted);font-size:14px;position:relative;z-index:1}159.auth-switch a{color:var(--primary);text-decoration:none;font-weight:700;position:relative}160.auth-switch a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1.5px;background:var(--primary);transform:scaleX(0);transition:transform 0.3s;transform-origin:right}161.auth-switch a:hover::after{transform:scaleX(1)}162 163/* ===== TOPBAR ===== */164.page-main{padding-bottom:80px}165.topbar{166  display:flex;align-items:center;justify-content:space-between;167  padding:16px 20px;background:rgba(18,18,30,0.85);168  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);169  border-bottom:1px solid rgba(255,255,255,0.05);170  position:sticky;top:0;z-index:20171}172.topbar h3{font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px}173.topbar h3 i{color:var(--primary)}174.btn-back,.btn-logout{background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;padding:6px;border-radius:8px;transition:all 0.2s}175.btn-back:hover,.btn-logout:hover{background:rgba(255,255,255,0.05);color:var(--text)}176.page-content{flex:1;padding:16px 20px;overflow-y:auto}177 178.greeting{font-size:24px;font-weight:800;margin-bottom:4px;line-height:1.3}179.greeting small{display:block;font-size:14px;font-weight:500;color:var(--text-muted);margin-top:2px}180.greeting .wave{display:inline-block;animation:wave 2s ease-in-out infinite;transform-origin:70% 70%}181@keyframes wave{0%{transform:rotate(0deg)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}100%{transform:rotate(0deg)}}182 183.quick-info{184  background:rgba(36,36,66,0.5);border:1px solid rgba(255,255,255,0.05);185  border-radius:var(--radius-sm);padding:12px 16px;margin:12px 0;186  font-size:14px;display:flex;align-items:center;gap:10px;color:var(--text2)187}188.quick-info i{color:var(--primary)}189 190.section-title{display:flex;align-items:center;gap:10px;margin:24px 0 14px}191.section-title::after{content:'';flex:1;height:1px;background:linear-gradient(to left,var(--surface3),transparent)}192.section-title span{font-size:15px;font-weight:700;color:var(--text-muted);letter-spacing:0.5px}193 194/* ===== SEARCH RESULTS ===== */195.search-results{196  background:var(--surface);border:1px solid var(--surface3);197  border-radius:var(--radius-sm);max-height:200px;overflow-y:auto;display:none;margin-bottom:8px198}199.search-results.show{display:block}200.search-item{201  padding:12px 16px;cursor:pointer;transition:0.2s;202  display:flex;align-items:center;gap:10px;font-size:14px;border-bottom:1px solid rgba(255,255,255,0.03)203}204.search-item:hover{background:rgba(245,158,11,0.1)}205.search-item i{color:var(--primary);font-size:12px}206.search-item small{color:var(--text-muted);margin-right:auto;font-size:12px}207 208/* ===== AVAILABILITY ===== */209.availability-toggle{210  background:linear-gradient(135deg,rgba(26,26,46,0.8),rgba(36,36,66,0.6));211  border-radius:var(--radius);padding:20px;margin:16px 0 20px;212  border:1px solid rgba(255,255,255,0.05);backdrop-filter:blur(10px)213}214.toggle-label{display:flex;align-items:center;justify-content:space-between;cursor:pointer}215.toggle-label span{font-weight:700;font-size:16px}216.toggle-switch{cursor:pointer}217.toggle-track{218  width:54px;height:30px;border-radius:15px;219  background:var(--surface3);position:relative;220  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);padding:3px221}222.toggle-track.on{background:var(--success);box-shadow:0 0 20px rgba(16,185,129,0.3)}223.toggle-thumb{224  width:24px;height:24px;border-radius:50%;background:#fff;225  position:absolute;top:3px;right:3px;226  transition:all 0.4s cubic-bezier(0.16,1,0.3,1);227  box-shadow:0 2px 8px rgba(0,0,0,0.4)228}229.toggle-track.on .toggle-thumb{right:27px}230 231/* ===== RIDE CARDS ===== */232.rides-list{display:flex;flex-direction:column;gap:12px}233.empty-state{color:var(--text-muted);text-align:center;padding:48px 20px;font-size:15px;line-height:1.6}234.ride-card{235  background:linear-gradient(135deg,rgba(26,26,46,0.8),rgba(36,36,66,0.5));236  border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius);237  padding:18px;cursor:pointer;transition:all 0.3s cubic-bezier(0.16,1,0.3,1);238  position:relative;overflow:hidden;animation:cardIn 0.4s cubic-bezier(0.16,1,0.3,1) both239}240@keyframes cardIn{from{opacity:0;transform:translateY(20px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}241.ride-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,0.4);border-color:rgba(245,158,11,0.2)}242.ride-card:active{transform:translateY(0) scale(0.99)}243.ride-card-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}244.ride-card-header .status-badge{margin-right:auto}245.ride-locations{display:flex;flex-direction:column;gap:8px}246.ride-location{display:flex;align-items:center;gap:10px;font-size:14px}247.ride-location i{font-size:12px}248.ride-location .loc-text{color:var(--text-muted);font-size:13px}249.ride-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.05)}250.ride-price{font-weight:800;font-size:20px;color:var(--primary)}251.ride-driver{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text2)}252 253.ride-card-skeleton{254  background:var(--surface2);border-radius:var(--radius);padding:18px;255  overflow:hidden;position:relative256}257.ride-card-skeleton::after{258  content:'';position:absolute;inset:0;259  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.03),transparent);260  animation:shimmer 1.5s infinite261}262@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}263 264/* BADGES */265.status-badge{266  display:inline-flex;align-items:center;gap:5px;267  padding:5px 14px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:0.3px268}269.status-badge i{font-size:10px;animation:badgePulse 2s ease-in-out infinite}270@keyframes badgePulse{0%,100%{opacity:0.6}50%{opacity:1}}271.status-pending{background:rgba(245,158,11,0.15);color:var(--primary)}272.status-searching{background:rgba(245,158,11,0.15);color:var(--primary);border:1px solid rgba(245,158,11,0.2)}273.status-accepted{background:rgba(59,130,246,0.15);color:var(--info)}274.status-started{background:rgba(16,185,129,0.15);color:var(--success)}275.status-completed{background:rgba(100,116,139,0.15);color:var(--text-muted)}276.status-cancelled{background:rgba(239,68,68,0.15);color:var(--error)}277 278/* ===== RIDE DETAIL ===== */279.ride-detail-map{height:220px;border-radius:var(--radius);margin-bottom:16px;overflow:hidden}280.ride-detail-info{display:flex;flex-direction:column;gap:14px;padding:4px 0}281.ride-detail-row{display:flex;align-items:center;gap:14px;padding:6px 0}282.ride-detail-row i{width:24px;text-align:center;font-size:16px}283.ride-detail-row .label{color:var(--text-muted);font-size:13px}284.bids-section{margin-top:20px}285.bids-section h4{font-size:17px;font-weight:700;margin-bottom:14px}286.bid-card{287  background:rgba(26,26,46,0.8);border:1px solid rgba(255,255,255,0.05);288  border-radius:var(--radius-sm);padding:16px;margin-bottom:10px;289  display:flex;align-items:center;gap:14px;290  animation:slideUp 0.3s cubic-bezier(0.16,1,0.3,1) both291}292@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}293.bid-card .bid-driver{flex:1;display:flex;flex-direction:column}294.bid-card .bid-driver-name{font-weight:700;font-size:15px}295.bid-card .bid-driver-car{font-size:13px;color:var(--text-muted);margin-top:2px}296.bid-price{font-size:22px;font-weight:800;color:var(--primary);font-feature-settings:'tnum'}297 298/* ===== CHAT ===== */299#chat{flex-direction:column}300.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}301.chat-msg{max-width:80%;padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.5;animation:msgIn 0.2s ease-out both}302.chat-msg.own{background:linear-gradient(135deg,var(--primary),#f97316);color:#000;align-self:flex-end;border-bottom-left-radius:4px}303.chat-msg.other{background:var(--surface2);align-self:flex-start;border-bottom-right-radius:4px}304.chat-msg .msg-sender{font-size:11px;font-weight:700;opacity:0.7;margin-bottom:2px}305.chat-msg .msg-time{font-size:10px;opacity:0.5;margin-top:4px;text-align:left}306@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}307.chat-input-bar{308  display:flex;gap:10px;padding:12px 16px;309  background:var(--surface);border-top:1px solid rgba(255,255,255,0.05);310  position:sticky;bottom:0311}312.chat-input-bar input{313  flex:1;padding:12px 16px;background:var(--surface2);border:1px solid var(--surface3);314  border-radius:var(--radius-sm);color:var(--text);font-size:15px;font-family:inherit;outline:none315}316.chat-input-bar input:focus{border-color:var(--primary)}317 318/* ===== MAP ===== */319.ride-map{height:320px;border-radius:var(--radius);margin:12px 0 16px;overflow:hidden;border:1px solid rgba(255,255,255,0.06)}320.active-ride-map{height:45vh;border-radius:var(--radius);margin-bottom:16px;overflow:hidden}321.active-ride-info{background:rgba(26,26,46,0.8);border-radius:var(--radius);padding:20px;margin-bottom:16px;border:1px solid rgba(255,255,255,0.05)}322.active-ride-actions{display:flex;flex-direction:column;gap:12px;margin-top:16px}323.leaflet-container{background:#0a0a12 !important}324.hint{font-size:13px;color:var(--text-muted);text-align:center;margin-bottom:8px}325 326/* ===== TOAST ===== */327.toast-container{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}328.toast{padding:14px 24px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;min-width:300px;text-align:center;animation:toastIn 0.4s cubic-bezier(0.16,1,0.3,1);box-shadow:0 8px 32px rgba(0,0,0,0.5);pointer-events:auto;backdrop-filter:blur(10px)}329.toast-success{background:rgba(16,185,129,0.9);color:#fff}330.toast-error{background:rgba(239,68,68,0.9);color:#fff}331.toast-info{background:rgba(36,36,66,0.9);color:var(--text);border:1px solid rgba(255,255,255,0.08)}332@keyframes toastIn{from{opacity:0;transform:translateY(-30px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}333 334/* ===== BOTTOM NAV ===== */335.bottom-nav{336  position:fixed;bottom:0;left:0;right:0;337  display:flex;background:rgba(18,18,30,0.9);338  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);339  border-top:1px solid rgba(255,255,255,0.05);340  padding:6px 0;padding-bottom:max(6px,env(safe-area-inset-bottom));341  z-index:100342}343.nav-item{344  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;345  padding:8px 4px;cursor:pointer;color:var(--text-muted);346  text-decoration:none;font-size:11px;font-weight:600;347  transition:all 0.3s;position:relative348}349.nav-item i{font-size:22px;transition:transform 0.3s}350.nav-item span{transition:color 0.3s}351.nav-item.active{color:var(--primary)}352.nav-item.active i{transform:scale(1.1)}353.nav-item:active i{transform:scale(0.9)}354.nav-item::before{355  content:'';position:absolute;top:0;left:20%;right:20%;height:2.5px;356  background:var(--primary);border-radius:0 0 4px 4px;357  transform:scaleX(0);transition:transform 0.3s358}359.nav-item.active::before{transform:scaleX(1)}360 361/* ===== PROFILE ===== */362.profile-card{363  background:linear-gradient(135deg,rgba(26,26,46,0.8),rgba(36,36,66,0.5));364  border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius-lg);365  padding:24px;text-align:center;margin-bottom:20px366}367.profile-avatar{368  width:80px;height:80px;margin:0 auto 16px;369  background:linear-gradient(135deg,var(--primary),#f97316);370  border-radius:50%;display:flex;align-items:center;justify-content:center;371  font-size:36px;color:#000;box-shadow:var(--shadow-glow)372}373.profile-name{font-size:22px;font-weight:800}374.profile-role{font-size:14px;color:var(--text-muted);margin-top:4px}375.profile-phone{font-size:14px;color:var(--text2);margin-top:4px}376.profile-info{background:var(--surface);border-radius:var(--radius);padding:16px;margin-bottom:16px}377.profile-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.03)}378.profile-row:last-child{border-bottom:none}379.profile-row .label{color:var(--text-muted);font-size:14px}380.profile-row .value{font-weight:700;font-size:14px}381 382/* ===== RATING ===== */383.rating-stars{display:flex;gap:8px;justify-content:center;margin:20px 0;direction:ltr}384.rating-star{font-size:40px;color:var(--surface3);cursor:pointer;transition:0.2s}385.rating-star.active{color:var(--primary);transform:scale(1.1);text-shadow:0 0 20px var(--primary-glow)}386.rating-comment{width:100%;padding:16px;background:var(--surface2);border:1px solid var(--surface3);border-radius:var(--radius-sm);color:var(--text);font-size:15px;font-family:inherit;outline:none;resize:none;min-height:80px;margin-bottom:16px}387 388/* ===== SCROLLBAR ===== */389::-webkit-scrollbar{width:4px}390::-webkit-scrollbar-track{background:transparent}391::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:4px}392::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}393 394/* ===== SPINNER ===== */395.spinner{width:22px;height:22px;border:2.5px solid rgba(255,255,255,0.15);border-top-color:var(--primary);border-radius:50%;animation:spin 0.7s linear infinite}396@keyframes spin{to{transform:rotate(360deg)}}397