:root {
  --brand: #00c8c8;
  --brand-dark: #00a0a0;
  --dark: #0a0a0f;
  --surface: #f5f5f7;
  --card: #ffffff;
  --text: #0a0a0f;
  --muted: #8b8ba0;
  --border: rgba(0,0,0,0.07);
  --vip: #f59e0b;
  --radius: 20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--surface);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.font-display{font-family:'Syne',sans-serif}
img{max-width:100%}

/* NAVBAR */
.navbar{background:var(--dark);height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;position:sticky;top:0;z-index:100}
.logo{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;color:#fff;text-decoration:none;letter-spacing:-0.5px;display:flex;align-items:center}.logo img{height:44px!important;width:130px!important;object-fit:contain}
.logo span{color:var(--brand)}
.logo em{font-style:normal;color:rgba(255,255,255,0.3);font-size:14px;font-weight:400}
.fuel-ticker{flex:1;max-width:500px;margin:0 1.5rem;overflow:hidden;position:relative;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:100px;padding:6px 0}
.fuel-ticker::before,.fuel-ticker::after{content:'';position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none}
.fuel-ticker::before{left:0;background:linear-gradient(to right,rgba(15,15,30,0.95),transparent);border-radius:100px 0 0 100px}
.fuel-ticker::after{right:0;background:linear-gradient(to left,rgba(15,15,30,0.95),transparent);border-radius:0 100px 100px 0}
.fuel-ticker-inner{display:flex;gap:0;white-space:nowrap;animation:fuel-scroll 25s linear infinite}
.fuel-ticker-inner:hover{animation-play-state:paused}
@keyframes fuel-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.fuel-item{display:inline-flex;align-items:center;gap:8px;padding:0 24px;font-size:12px;font-weight:600;color:rgba(255,255,255,0.9);border-right:1px solid rgba(255,255,255,0.08)}
.fuel-item .fuel-icon{font-size:15px}
.fuel-item .fuel-type{color:rgba(255,255,255,0.45);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:0.05em}
.fuel-item .fuel-price{color:#4ade80;font-size:14px;font-weight:800;letter-spacing:-0.02em}
.fuel-item .fuel-unit{color:rgba(255,255,255,0.3);font-size:10px;font-weight:400}
.fuel-item .fuel-sep{color:rgba(255,255,255,0.15);margin:0 2px}
.fuel-loading{font-size:12px;color:rgba(255,255,255,0.4);padding:0 20px}
.nav-actions{display:flex;align-items:center;gap:8px}
.notif-btn{position:relative;padding:8px;color:rgba(255,255,255,0.6);cursor:pointer;transition:color 0.2s}
.notif-btn:hover{color:#fff}
.notif-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;background:var(--brand);border-radius:50%;border:1.5px solid var(--dark)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.18);color:#fff;padding:6px 14px;border-radius:100px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s}
.btn-ghost:hover{background:rgba(255,255,255,0.08)}
.btn-primary{background:var(--brand);border:none;color:#fff;padding:7px 16px;border-radius:100px;font-size:12px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background 0.2s}
.btn-primary:hover{background:var(--brand-dark)}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#8b5cf6);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Syne',sans-serif;font-weight:800;font-size:12px;cursor:pointer}

/* PAGES */
.page{display:none;min-height:calc(100vh - 56px);padding-bottom:80px}
.page.active{display:block}
.page-inner{max-width:900px;margin:0 auto;padding:1.5rem 1rem}
.page-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.page-header h2{font-family:'Syne',sans-serif;font-weight:700;font-size:22px}
.back-btn{background:var(--surface);border:none;padding:8px 14px;border-radius:100px;font-size:13px;cursor:pointer;color:var(--muted);font-family:'DM Sans',sans-serif}
.back-btn:hover{color:var(--text)}

/* HERO */
.hero{background:linear-gradient(160deg,#06060f 0%,#0e0b2e 45%,#08081a 100%);padding:3.5rem 1.25rem 3.5rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:700px;height:500px;background:radial-gradient(ellipse,rgba(0,200,200,0.20) 0%,transparent 70%);pointer-events:none;z-index:0}
.hero::after{content:'';position:absolute;bottom:-80px;right:-80px;width:350px;height:350px;background:radial-gradient(ellipse,rgba(139,92,246,0.13) 0%,transparent 70%);pointer-events:none;z-index:0}
.hero-content{position:relative;z-index:1;max-width:100%;margin:0 auto;width:100%;padding:0 2rem;text-align:left}
.hero-glow{display:none}
.hero-glow{position:absolute;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(0,200,200,0.28) 0%,transparent 70%);top:-120px;right:-60px;pointer-events:none}
.hero-content{max-width:900px;margin:0 auto;position:relative;text-align:center}
.hero-label{display:inline-flex;align-items:center;gap:6px;color:rgba(160,170,255,0.9);font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:1.2rem;background:rgba(0,200,200,0.15);border:1px solid rgba(0,200,200,0.3);padding:6px 16px;border-radius:100px}
.hero-title{font-family:'Syne',sans-serif;font-weight:800;font-size:3.2rem;color:#fff;line-height:1.05;margin-bottom:1.75rem;letter-spacing:-0.02em}
.hero-title span{color:var(--brand)}
.search-bar{background:rgba(255,255,255,0.96);border-radius:16px;padding:6px;display:flex;gap:6px;flex-wrap:nowrap;box-shadow:0 20px 60px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.12);backdrop-filter:blur(20px);margin-top:1.5rem;max-width:800px;margin-left:auto;margin-right:auto}
.search-field{flex:1;min-width:100px;background:#f8f9ff;border-radius:12px;padding:8px 14px;border:1.5px solid transparent;transition:border-color 0.2s}
.search-field label{display:block;font-size:10px;color:#6b7280;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px}
.search-field input{width:100%;background:transparent;border:none;outline:none;font-size:15px;font-weight:600;color:#0a0a0f;font-family:'DM Sans',sans-serif}
.search-btn{background:linear-gradient(135deg,#00c8c8,#2d2dff);color:#fff;border:none;border-radius:12px;padding:0 22px;font-size:14px;font-weight:700;cursor:pointer;font-family:'Syne',sans-serif;display:flex;align-items:center;gap:8px;white-space:nowrap;transition:all 0.2s;min-height:46px;box-shadow:0 8px 24px rgba(0,200,200,0.4);letter-spacing:0.02em}
.search-btn:hover{background:linear-gradient(135deg,#0d0ddd,#00c8c8);transform:translateY(-1px);box-shadow:0 12px 32px rgba(0,200,200,0.5)}
.popular-routes{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.popular-routes::-webkit-scrollbar{display:none}
.popular-routes button{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.7);font-size:12px;padding:7px 16px;border-radius:100px;cursor:pointer;white-space:nowrap;font-family:'DM Sans',sans-serif;transition:all 0.2s;backdrop-filter:blur(6px);font-weight:500}
.popular-routes button:hover{background:rgba(255,255,255,0.15);color:#fff}

/* FILTERS */
.filters-bar{background:#fff;border-bottom:1px solid var(--border);padding:10px 1rem;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.filters-bar::-webkit-scrollbar{display:none}
.chip{display:flex;align-items:center;gap:5px;padding:6px 14px;border-radius:100px;border:1px solid var(--border);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;background:#fff;color:var(--text);font-family:'DM Sans',sans-serif;transition:all 0.15s}
.chip:hover{border-color:rgba(0,0,0,0.2)}
.chip.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.chip-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;display:inline-block}

/* MAIN CONTENT */
.main-content{max-width:1400px;margin:0 auto;padding:1.5rem 1rem}
.section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem}
.section-title{font-family:'Syne',sans-serif;font-size:18px;font-weight:700}
.section-count{font-size:12px;color:var(--muted)}

/* RIDES GRID */
.rides-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:2rem}

/* RIDE CARD */
.ride-card{background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease;animation:fadeUp 0.4s ease both}
.ride-card:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,0.11)}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

.card-photo{height:148px;background:linear-gradient(135deg,#00c8c8,#007a7a);display:flex;flex-direction:column;justify-content:space-between;padding:12px;position:relative;overflow:hidden}.card-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.2) 50%,rgba(0,0,0,0.55) 100%);pointer-events:none;z-index:0}.card-photo>*{position:relative;z-index:1}
.card-route{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;color:#fff;display:flex;align-items:center;gap:6px}
.card-route span{opacity:0.6;font-size:12px}
.card-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:100px}
.badge-vip{background:var(--vip);color:#fff}
.badge-boost{background:rgba(255,255,255,0.2);color:#fff;backdrop-filter:blur(4px)}
.badge-new{background:#22c55e;color:#fff}
.card-top{display:flex;justify-content:space-between;align-items:flex-start}
.card-driver{display:flex;align-items:center;gap:10px}
.driver-avatar{width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.18);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,0.5);display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:14px;color:#fff;flex-shrink:0;position:relative;overflow:hidden}
.driver-avatar img{width:100%;height:100%;object-fit:cover}
.verified-badge{position:absolute;bottom:-1px;right:-1px;width:16px;height:16px;background:#3b82f6;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;border:1.5px solid rgba(255,255,255,0.5)}
.driver-name{font-size:13px;font-weight:500;color:#fff;line-height:1.2}
.driver-trips{font-size:11px;color:rgba(255,255,255,0.6)}

.card-body{padding:14px}
.card-meta{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.card-datetime{font-size:12px;color:var(--muted);margin-bottom:5px}
.stars{display:flex;align-items:center;gap:2px}
.star{font-size:11px}
.star-filled{color:var(--vip)}
.star-empty{color:#e5e7eb}
.star-count{font-size:11px;color:var(--muted);margin-left:3px}
.price{font-family:'Syne',sans-serif;font-weight:800;font-size:24px;color:var(--text);line-height:1}
.price-sub{font-size:10px;color:var(--muted);text-align:right}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.tag{font-size:11px;padding:3px 9px;border-radius:100px;background:var(--surface);color:var(--muted);font-weight:500}
.tag-seats{background:#dbeafe;color:#1e40af}
.tag-pet{background:#fef9c3;color:#854d0e}
.card-divider{height:1px;background:var(--border);margin-bottom:12px}
.card-footer{display:flex;align-items:center;justify-content:space-between}
.seats-info{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.seats-dots{display:flex;gap:3px}
.seat-dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.seat-dot.empty{background:#e5e7eb}
.book-btn{background:var(--dark);color:#fff;border:none;border-radius:100px;padding:7px 18px;font-size:12px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background 0.2s}
.book-btn:hover{background:var(--brand)}

/* SKELETON */
.loading-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.skeleton-card{height:280px;border-radius:var(--radius);background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* PROMO BANNER */
.promo-banner{background:var(--dark);border-radius:var(--radius);padding:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;position:relative;overflow:hidden}
.promo-glow{position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(0,200,200,0.35) 0%,transparent 70%);right:-30px;top:-60px;pointer-events:none}
.promo-icons{font-size:20px;margin-bottom:4px}
.promo-text h3{font-family:'Syne',sans-serif;font-weight:700;font-size:16px;color:#fff;margin-bottom:4px}
.promo-text p{font-size:12px;color:rgba(255,255,255,0.5)}
.promo-btn{background:var(--brand);color:#fff;border:none;border-radius:100px;padding:10px 20px;font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap;position:relative;z-index:1;transition:background 0.2s}
.promo-btn:hover{background:var(--brand-dark)}

/* FORMS */
.form-card{background:var(--card);border-radius:var(--radius);padding:1.5rem;border:1px solid var(--border)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.05em}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--surface);border:1px solid transparent;border-radius:10px;padding:10px 14px;font-size:14px;font-family:'DM Sans',sans-serif;color:var(--text);outline:none;transition:border-color 0.2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--brand);background:#fff}
.form-group textarea{min-height:90px;resize:vertical}
.form-section-title{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;margin:1.5rem 0 0.75rem}
.checkboxes{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.check-item{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;padding:6px 12px;border-radius:100px;background:var(--surface);transition:background 0.2s}
.check-item:hover{background:#e8e8f0}
.check-item input{accent-color:var(--brand)}

/* PROMO PLANS */
.promo-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1.5rem}
.promo-plan{cursor:pointer}
.promo-plan input{display:none}
.plan-card{border:1.5px solid var(--border);border-radius:14px;padding:14px;transition:all 0.2s;position:relative}
.promo-plan input:checked + .plan-card{border-color:var(--brand);background:#f0f0ff}
.plan-card.featured{border-color:#93c5fd}
.promo-plan input:checked + .plan-card.featured{border-color:var(--brand);background:#f0f0ff}
.plan-card.vip{border-color:#fcd34d}
.promo-plan input:checked + .plan-card.vip{border-color:var(--vip);background:#fffbeb}
.plan-badge{font-size:10px;padding:2px 8px;border-radius:4px;background:#dbeafe;color:#1e40af;display:inline-block;margin-bottom:6px}
.plan-badge.vip-badge{background:#fef3c7;color:#92400e}
.plan-name{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;margin-bottom:4px}
.plan-price{font-size:18px;font-weight:600;color:var(--brand);margin-bottom:6px}
.plan-features{font-size:11px;color:var(--muted);line-height:1.6}
.submit-btn{width:100%;background:var(--dark);color:#fff;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background 0.2s;margin-top:4px}
.submit-btn:hover{background:var(--brand)}

/* CHAT */
.chat-layout{display:grid;grid-template-columns:280px 1fr;gap:16px;height:calc(100vh - 200px)}
.conversations-list{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);overflow-y:auto}
.convo-item{padding:14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.15s;display:flex;gap:10px;align-items:center}
.convo-item:hover{background:var(--surface)}
.convo-avatar{width:42px;height:42px;border-radius:50%;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0}
.convo-info{flex:1;min-width:0}
.convo-name{font-weight:500;font-size:13px;margin-bottom:2px}
.convo-last{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread-badge{background:var(--brand);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:100px;flex-shrink:0}
.chat-window{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);display:flex;flex-direction:column}
.chat-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;color:var(--muted)}
.chat-placeholder-icon{font-size:40px}
.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:8px}
.msg{max-width:70%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.5}
.msg-out{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg-in{background:var(--surface);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px}
.msg-time{font-size:10px;opacity:0.6;margin-top:3px}
.chat-input-bar{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}
.chat-input-bar input{flex:1;background:var(--surface);border:none;border-radius:100px;padding:10px 16px;font-size:14px;font-family:'DM Sans',sans-serif;outline:none}
.send-btn{background:var(--brand);color:#fff;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:200;padding:1rem;backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:24px;padding:2rem;width:100%;max-width:420px;position:relative;animation:modalIn 0.25s ease}
.modal-large{max-width:640px}
@keyframes modalIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
.modal-close{position:absolute;top:1rem;right:1rem;background:var(--surface);border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;color:var(--muted);display:flex;align-items:center;justify-content:center}
.modal-tabs{display:flex;gap:4px;background:var(--surface);border-radius:100px;padding:4px;margin-bottom:1.5rem}
.modal-tab{flex:1;padding:8px;border-radius:100px;border:none;background:transparent;font-size:13px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;color:var(--muted);transition:all 0.2s}
.modal-tab.active{background:#fff;color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,0.08)}
.modal-error{color:#ef4444;font-size:13px;margin-bottom:10px;min-height:18px}

/* BOTTOM NAV */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,0.95);border-top:1px solid rgba(0,0,0,0.06);display:flex;justify-content:space-around;padding:10px 8px 16px;z-index:99;box-shadow:0 -8px 32px rgba(0,0,0,0.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:600;color:#9ca3af;cursor:pointer;background:none;border:none;padding:6px 14px;border-radius:14px;font-family:'DM Sans',sans-serif;transition:all 0.2s;letter-spacing:0.01em}
.nav-item.active{color:#00c8c8;background:rgba(0,200,200,0.07)}
.nav-post{background:var(--dark);color:#fff !important;border-radius:50%;width:48px;height:48px;margin-top:-14px;box-shadow:0 4px 20px rgba(0,0,0,0.3);padding:0;justify-content:center}
.nav-post:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 14px 36px rgba(0,200,200,0.55)}

/* EMPTY STATE */
.empty-state{text-align:center;padding:3rem 1rem;color:var(--muted);font-size:14px}

/* TOAST */
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--dark);color:#fff;padding:12px 24px;border-radius:100px;font-size:14px;opacity:0;transition:all 0.3s;pointer-events:none;z-index:300;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* PROFILE */
.profile-header{display:flex;align-items:center;gap:1.5rem;background:var(--card);border-radius:var(--radius);padding:1.5rem;margin-bottom:1rem;border:1px solid var(--border)}
.profile-avatar-big{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#8b5cf6);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Syne',sans-serif;font-weight:800;font-size:22px}
.profile-name{font-family:'Syne',sans-serif;font-weight:700;font-size:20px;margin-bottom:4px}
.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1rem}
.stat-card{background:var(--card);border-radius:14px;padding:14px;text-align:center;border:1px solid var(--border)}
.stat-val{font-family:'Syne',sans-serif;font-size:22px;font-weight:700;color:var(--brand)}
.stat-lbl{font-size:11px;color:var(--muted);margin-top:2px}
.logout-btn{width:100%;background:transparent;border:1px solid #ef4444;color:#ef4444;border-radius:12px;padding:12px;font-size:14px;cursor:pointer;font-family:'DM Sans',sans-serif;margin-top:1rem;transition:all 0.2s}
.logout-btn:hover{background:#ef4444;color:#fff}

/* RIDE DETAIL */
.ride-detail-photo{height:220px;border-radius:16px;display:flex;flex-direction:column;justify-content:space-between;padding:16px;margin-bottom:1.25rem;overflow:hidden;position:relative}.ride-detail-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.1) 40%,rgba(0,0,0,0.55) 100%);pointer-events:none;z-index:0}.ride-detail-photo>*{position:relative;z-index:1}
.detail-driver{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:14px;margin-bottom:1rem;border:1px solid var(--border)}
.detail-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1rem}
.detail-book-btn{width:100%;background:var(--brand);color:#fff;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:500;cursor:pointer;font-family:'DM Sans',sans-serif;transition:background 0.2s}
.detail-book-btn:hover{background:var(--brand-dark)}

@media(max-width:640px){
  .form-row{grid-template-columns:1fr}
  .promo-plans{grid-template-columns:repeat(3,1fr)}
  .chat-layout{grid-template-columns:1fr;height:auto}
  .conversations-list{height:200px}
  .hero-title{font-size:24px}
  .search-bar{flex-direction:column}
  .search-btn{justify-content:center}
  .nav-search{display:none}
}

/* ── Polish UI ── */
.modal h3 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 20px; margin-bottom: 1.25rem; color: var(--text); }
.modal-tabs { margin-bottom: 1.5rem; }
.form-group label { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(0,200,200,0.08);
}
.search-field input:focus { outline: none; }
.search-bar { box-shadow: 0 24px 64px rgba(0,0,0,0.45); }
.submit-btn { letter-spacing: 0.02em; font-size: 14px; }
.submit-btn:active { transform: scale(0.98); }
.book-btn:active { transform: scale(0.96); }
.chip { font-size: 12px; letter-spacing: 0.01em; }
.plan-card { transition: all 0.2s; }
.plan-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.promo-plan input:checked + .plan-card { box-shadow: 0 4px 20px rgba(0,200,200,0.15); }
.modal { box-shadow: 0 24px 80px rgba(0,0,0,0.2); }
.form-group textarea { line-height: 1.6; }
.checkboxes { gap: 8px; }
.check-item { font-size: 13px; border: 1px solid var(--border); }
.check-item:has(input:checked) { background: #e8e8ff; border-color: var(--brand); color: var(--brand); }
.section-title { letter-spacing: -0.3px; }
.hero-title { letter-spacing: -0.5px; }
.logo { letter-spacing: -0.5px; }
.vip-glow { box-shadow: 0 0 0 2px rgba(245,158,11,0.3); }
input[type="date"] { cursor: pointer; }
input[type="time"] { cursor: pointer; }
select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6b80' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

/* ── Footer ── */
.site-footer { background: #0a0a0f; padding: 3rem 1.5rem 2rem; margin-top: 2rem; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-map-wrap { border-radius: 20px; overflow: hidden; margin-bottom: 2.5rem; border: 1px solid rgba(255,210,80,0.15); }
.footer-map-wrap canvas { display: block; width: 100%; height: auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.footer-brand p { color: rgba(255,255,255,0.4); font-size: 13px; margin-top: 10px; line-height: 1.6; max-width: 240px; }
.footer-col h4 { font-family: 'Syne',sans-serif; font-weight: 700; font-size: 13px; color: rgba(255,255,255,0.9); margin-bottom: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
.footer-col a { display: block; color: rgba(255,255,255,0.4); font-size: 13px; text-decoration: none; margin-bottom: 8px; transition: color 0.2s; }
.footer-col a:hover { color: #ffd050; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.footer-bottom p { color: rgba(255,255,255,0.25); font-size: 12px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); font-size: 14px; text-decoration: none; transition: all 0.2s; }
.footer-social a:hover { border-color: #ffd050; color: #ffd050; }
@media(max-width:640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* prettier seat dots */
.seat-dot { width: 9px; height: 9px; border-radius: 50%; background: #00c8c8; box-shadow: 0 0 4px rgba(0,200,200,0.6); }
.seat-dot.empty { background: rgba(255,255,255,0.12); box-shadow: none; }

.detail-tags .tag { background: #fff; border: 1px solid rgba(0,0,0,0.08); font-size: 12px; font-weight: 500; padding: 5px 11px; }
.detail-tags .tag-seats { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.detail-tags .tag-pet { background: #fef9c3; color: #854d0e; border-color: #fde68a; }

/* Hero stars animation */
@keyframes twinkle{0%,100%{opacity:0.2}50%{opacity:0.8}}
.hero-stars{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero-stat{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.4);font-size:12px;margin-top:1.5rem}
.hero-stat strong{color:rgba(255,255,255,0.8);font-weight:700}
.hero-stats-row{display:flex;gap:1.5rem;margin-top:1.5rem;flex-wrap:wrap;justify-content:center}
.hero-stat-item{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,0.75)}
.hero-stat-item span{font-weight:700;color:#fff;font-size:14px}

/* ── MODERN BOTTOM NAV OVERRIDE ── */
.bottom-nav {
  background: rgba(10,10,20,0.92) !important;
  border-top: 1px solid rgba(0,200,200,0.2) !important;
  box-shadow: 0 -1px 0 rgba(0,200,200,0.15), 0 -8px 32px rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  padding: 10px 8px 18px !important;
}
.nav-item {
  color: rgba(255,255,255,0.35) !important;
  border-radius: 14px !important;
  padding: 6px 16px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: all 0.2s !important;
}
.nav-item:hover {
  color: rgba(255,255,255,0.7) !important;
  background: rgba(255,255,255,0.06) !important;
}
.nav-item.active {
  color: #ffffff !important;
  background: rgba(0,200,200,0.18) !important;
  box-shadow: 0 0 12px rgba(0,200,200,0.3) !important;
}
.nav-item.active svg {
  filter: drop-shadow(0 0 4px rgba(0,200,200,0.8)) !important;
}
.nav-post {
  background: linear-gradient(135deg, #00c8c8, #6366f1) !important;
  border-radius: 16px !important;
  width: 52px !important;
  height: 52px !important;
  margin-top: -18px !important;
  box-shadow: 0 0 20px rgba(0,200,200,0.6), 0 8px 24px rgba(0,200,200,0.4) !important;
  transition: all 0.2s !important;
}
.nav-post:hover {
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 0 30px rgba(99,102,241,0.7), 0 12px 32px rgba(0,200,200,0.5) !important;
}

/* ── MODERN POST PAGE OVERRIDE ── */
.page-inner { max-width: 960px !important; padding: 2rem 1.5rem 5rem !important; }

.page-header h2 { font-size: 24px !important; font-weight: 800 !important; }

.form-card {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 2rem !important;
  border: none !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04) !important;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 0; }

.form-group { margin-bottom: 14px !important; }

.form-group label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 6px !important;
}

.form-group input,
.form-group select,
.form-group textarea {
  background: #f8f9ff !important;
  border: 1.5px solid #e8eaf0 !important;
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0a0a0f !important;
  transition: all 0.2s !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #00c8c8 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(0,200,200,0.08) !important;
}

.form-section-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #374151 !important;
  margin: 1.5rem 0 0.75rem !important;
  padding-bottom: 8px !important;
  border-bottom: 1.5px solid #f3f4f6 !important;
}

.checkboxes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

.check-item {
  background: #f8f9ff !important;
  border: 1.5px solid #e8eaf0 !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
}

.check-item:hover { background: #eef0ff !important; border-color: #c7d2fe !important; }

.check-item:has(input:checked) {
  background: #eef0ff !important;
  border-color: #00c8c8 !important;
  color: #00c8c8 !important;
}

/* Promo plans */
.promo-plans { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 1.5rem; }

.plan-card {
  border: 1.5px solid #e8eaf0 !important;
  border-radius: 16px !important;
  padding: 18px !important;
  background: #fafafa !important;
  cursor: pointer !important;
  min-height: 120px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.plan-card.featured {
  background: linear-gradient(135deg, #eff6ff, #e0e7ff) !important;
  border-color: #93c5fd !important;
}

.plan-card.vip {
  background: linear-gradient(135deg, #fffbeb, #fef3c7) !important;
  border-color: #fcd34d !important;
}

.promo-plan input:checked + .plan-card {
  border-color: #00c8c8 !important;
  box-shadow: 0 0 0 3px rgba(0,200,200,0.12) !important;
}

.plan-name { font-family: 'Syne',sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.plan-price { font-family: 'Syne',sans-serif; font-weight: 800; font-size: 22px; color: #00c8c8; margin-bottom: 4px; }
.plan-features { font-size: 11px; color: #6b7280; line-height: 1.4; }
.plan-badge { font-size: 10px; font-weight: 700; color: #1d4ed8; background: #dbeafe; padding: 2px 8px; border-radius: 100px; display: inline-block; margin-bottom: 6px; }
.plan-badge.vip-badge { color: #92400e; background: #fde68a; }

/* Submit button */
.submit-btn {
  background: linear-gradient(135deg, #00c8c8, #00c8c8) !important;
  border-radius: 14px !important;
  padding: 15px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: 'Syne',sans-serif !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 8px 24px rgba(0,200,200,0.35) !important;
  transition: all 0.2s !important;
}

.submit-btn:hover {
  background: linear-gradient(135deg, #0d0ddd, #00c8c8) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 32px rgba(0,200,200,0.45) !important;
}

/* ── MODERN CHAT ── */
.chat-layout { display:flex; height:calc(100vh - 160px); gap:0; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 4px 24px rgba(0,0,0,0.08); border:1px solid rgba(0,0,0,0.06); }

.conversations-list { width:280px; border-right:1px solid #f0f0f5; overflow-y:auto; flex-shrink:0; }

.convo-item { display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer; transition:background 0.15s; border-bottom:1px solid #f8f8fb; }
.convo-item:hover { background:#f5f5ff; }
.convo-item.active { background:#f0f0ff; }
.convo-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,#00c8c8,#8b5cf6); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#fff; flex-shrink:0; overflow:hidden; }
.convo-name { font-weight:600; font-size:14px; color:#0a0a0f; }
.convo-last { font-size:12px; color:#9ca3af; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.unread-badge { background:#00c8c8; color:#fff; border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }

.chat-window { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.chat-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:4px; scroll-behavior:smooth; }

.msg { display:flex; flex-direction:column; max-width:72%; margin-bottom:4px; }
.msg-out { align-self:flex-end; align-items:flex-end; }
.msg-in { align-self:flex-start; align-items:flex-start; }

.msg-bubble { padding:10px 14px; border-radius:18px; font-size:14px; line-height:1.5; word-break:break-word; }
.msg-out .msg-bubble { background:linear-gradient(135deg,#00c8c8,#00c8c8); color:#fff; border-bottom-right-radius:4px; }
.msg-in .msg-bubble { background:#f3f4f6; color:#0a0a0f; border-bottom-left-radius:4px; }

.msg-time { font-size:10px; color:#9ca3af; margin-top:3px; padding:0 4px; }

.chat-input-bar { display:flex; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid #f0f0f5; background:#fff; }
.chat-input-bar input { flex:1; background:#f3f4f6; border:none; border-radius:24px; padding:10px 18px; font-size:14px; font-family:'DM Sans',sans-serif; outline:none; color:#0a0a0f; }
.chat-input-bar input:focus { background:#eef0ff; }
.send-btn { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#00c8c8,#00c8c8); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.2s; box-shadow:0 4px 12px rgba(0,200,200,0.35); }
.send-btn:hover { transform:scale(1.08); box-shadow:0 6px 18px rgba(0,200,200,0.45); }

.chat-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:#9ca3af; gap:12px; }
.chat-placeholder-icon { font-size:48px; }

/* ── MOBILE FIRST OVERRIDES ── */
@media (max-width: 768px) {

  /* Navbar */
  .navbar { padding: 0 1rem; height: 54px; }
  .nav-search { display: none; }
  .btn-ghost { display: none; }
  .btn-primary { padding: 8px 14px; font-size: 13px; }

  /* Hero */
  .hero { padding: 2rem 1rem 2.5rem; }
  .hero-title { font-size: 2.2rem !important; }
  .hero-stats-row { display: none; }
  .search-bar { flex-direction: column; gap: 6px; border-radius: 16px; padding: 10px; }
  .search-field { min-width: unset; width: 100%; border-radius: 12px; }
  .search-btn { width: 100%; justify-content: center; border-radius: 12px; min-height: 48px; }
  .popular-routes { gap: 6px; }

  /* Filters */
  .filters-bar { padding: 10px 1rem; gap: 6px; }
  .chip { font-size: 12px; padding: 5px 12px; }

  /* Rides grid */
  .rides-grid { grid-template-columns: 1fr !important; gap: 12px; padding: 0 1rem; }
  .main-content { padding: 1rem 0; }

  /* Post form */
  .page-inner { padding: 1rem 1rem 5rem !important; max-width: 100% !important; }
  .form-card { padding: 1.25rem !important; border-radius: 16px !important; }
  .form-row { grid-template-columns: 1fr !important; gap: 0; }
  .promo-plans { grid-template-columns: 1fr !important; gap: 8px !important; }
  .plan-card { padding: 14px !important; }
  .checkboxes { gap: 8px; }
  .check-item { font-size: 13px; }

  /* Chat */
  .chat-layout { flex-direction: column; height: calc(100vh - 130px); border-radius: 12px; }
  .conversations-list { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid #f0f0f5; flex-shrink: 0; }
  .chat-window { flex: 1; min-height: 0; }
  .convo-item { padding: 10px 14px; }
  .chat-messages { padding: 12px; }
  .msg { max-width: 85%; }

  /* Profile */
  .profile-header { flex-direction: column; text-align: center; gap: 12px; }
  .profile-stats { grid-template-columns: repeat(3, 1fr); }
  .stat-card { padding: 12px 8px; }
  .stat-val { font-size: 20px; }

  /* Modal */
  .modal { margin: 0; border-radius: 20px 20px 0 0; max-height: 90vh; }
  .modal-overlay { align-items: flex-end; }
  .modal-large { max-height: 92vh; overflow-y: auto; }
  .ride-detail-photo { border-radius: 16px; }

  /* Footer */
  .site-footer { padding: 2rem 1rem 6rem; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-map-wrap { height: 220px; }

  /* Bottom nav */
  .bottom-nav { padding: 8px 4px 20px !important; }
  .nav-item span { font-size: 9px !important; }
}

@media (max-width: 400px) {
  .hero-title { font-size: 1.9rem !important; }
  .rides-grid { padding: 0 0.75rem; }
  .footer-grid { grid-template-columns: 1fr !important; }
}

/* Fix chat window height to always show input */
.chat-window {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
}
.chat-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
.chat-input-bar {
  flex-shrink: 0 !important;
  border-top: 1px solid #f0f0f5 !important;
}
.chat-layout {
  height: calc(100vh - 180px) !important;
}
@media (max-width: 768px) {
  .chat-layout { height: calc(100vh - 140px) !important; }
}

/* ── CHAT PAGE FIX ── */
#page-chat { display:flex; flex-direction:column; height:100vh; }
#page-chat .page-inner { flex:1; display:flex; flex-direction:column; min-height:0; padding-bottom:70px !important; }
#page-chat .chat-layout { flex:1; min-height:0; }
#page-chat .chat-window { display:flex !important; flex-direction:column !important; min-height:0 !important; }
#page-chat .chat-messages { flex:1 !important; min-height:0 !important; overflow-y:auto !important; }

/* Chat page layout - only when active */
.page-chat-layout { overflow:hidden; }
.page-chat-layout.active { display:flex !important; flex-direction:column; height:calc(100vh - 60px); }
.page-chat-layout .chat-layout { flex:1; min-height:0; margin-bottom:70px; }

/* CRITICAL - hide inactive pages */
.page { display: none !important; }
.page.active { display: block !important; }
.page-chat-layout.active { display: flex !important; }

/* Fix map on mobile */
.footer-map-wrap { width:100%; overflow:hidden; border-radius:16px; }
.footer-map-wrap iframe { width:100% !important; height:300px; border:none; display:block; }
@media (min-width:768px) { .footer-map-wrap iframe { height:420px; } }

/* Fix map on mobile */
.footer-map-wrap { width:100%; overflow:hidden; border-radius:16px; }
.footer-map-wrap iframe { width:100% !important; height:300px; border:none; display:block; }
@media (min-width:768px) { .footer-map-wrap iframe { height:420px; } }

/* Map iframe responsive height */
#map-iframe { height: 220px; }
@media (min-width: 768px) { #map-iframe { height: 420px; } }

/* Fix map desktop size */
@media (min-width: 768px) {
  #map-iframe { height: 500px !important; }
  .footer-map-wrap { max-width: 1200px; margin: 0 auto; }
}

/* Footer spacing fix */
.site-footer { padding-top: 0 !important; }
.footer-inner { padding-top: 0 !important; }
.footer-map-wrap { margin-bottom: 2.5rem !important; }
.footer-col a { color: rgba(255,255,255,0.65) !important; font-size: 14px !important; }
.footer-col a:hover { color: #fff !important; }

.fuel-ticker-bar{display:none}
@media(max-width:768px){
  .fuel-ticker{display:none}
  .fuel-ticker-bar{display:block;width:100%;overflow:hidden;background:#0a0a1a;border-bottom:1px solid rgba(255,255,255,0.08);padding:6px 0;position:relative}
  .fuel-ticker-bar::before,.fuel-ticker-bar::after{content:'';position:absolute;top:0;bottom:0;width:24px;z-index:2;pointer-events:none}
  .fuel-ticker-bar::before{left:0;background:linear-gradient(to right,#0a0a0f,transparent)}
  .fuel-ticker-bar::after{right:0;background:linear-gradient(to left,#0a0a0f,transparent)}
  .fuel-ticker-bar .fuel-ticker-inner{animation-duration:20s}
}

.fuel-ticker-bar{display:none}
@media(max-width:768px){
  .fuel-ticker{display:none}
  .fuel-ticker-bar{display:block;width:100%;overflow:hidden;background:linear-gradient(135deg,#0a0a2e,#0d0d3d);border-top:1px solid rgba(0,200,200,0.3);border-bottom:1px solid rgba(0,200,200,0.3);padding:8px 0;position:relative}
  .fuel-ticker-bar::before,.fuel-ticker-bar::after{content:'';position:absolute;top:0;bottom:0;width:30px;z-index:2;pointer-events:none}
  .fuel-ticker-bar::before{left:0;background:linear-gradient(to right,#0a0a2e,transparent)}
  .fuel-ticker-bar::after{right:0;background:linear-gradient(to left,#0a0a2e,transparent)}
  .fuel-ticker-bar .fuel-ticker-inner{animation:fuel-scroll 20s linear infinite;display:flex;white-space:nowrap;gap:0}
  .fuel-ticker-bar .fuel-item{padding:0 16px;font-size:12px;border-right:1px solid rgba(255,255,255,0.1)}
  .fuel-ticker-bar .fuel-price{color:#4ade80;font-size:13px;font-weight:800}
  .fuel-ticker-bar .fuel-type{color:rgba(255,255,255,0.6);font-size:11px}
}

@media(max-width:640px){
  .plan-card{padding:12px!important;min-height:90px!important}
  .plan-name{font-size:12px!important}
  .plan-price{font-size:15px!important}
  .plan-features{font-size:10px!important}
  .plan-badge{font-size:9px!important}
}
.ride-card .card-datetime{color:rgba(255,255,255,0.75)!important}
.ride-card .star-count{color:rgba(255,255,255,0.75)!important}
.hero-section .hero-stat-item{color:rgba(255,255,255,0.85)!important}

@media (max-width: 768px) { .footer-social { display: none; } }
@media (max-width:520px){.detail-driver{flex-wrap:wrap}.detail-driver>div:last-child{width:100%;margin-top:10px}.detail-driver>div:last-child button{flex:1;justify-content:center}}

/* Mobile compact chat */
@media (max-width:560px){.chat-layout,#page-chat .chat-layout,.page-chat-layout .chat-layout{height:auto !important;min-height:0 !important;max-height:calc(100vh - 150px);margin-bottom:0 !important}#page-chat,.page-chat-layout.active{height:auto !important}#page-chat .page-inner{padding-bottom:80px !important}.conversations-list{height:auto !important;max-height:200px}.chat-window{min-height:340px}.chat-messages{min-height:0 !important}}

/* Compact publish button on mobile */
@media (max-width:560px){.navbar .hdr-label{display:none}.navbar .btn-primary{padding:6px 12px !important;font-size:20px;font-weight:800;line-height:1}}