@charset "utf-8";

/* eKBS Ride Request Skin */
.ride-wrap { background:#f5f8fc; padding:24px 0 50px; }
.ride-container { max-width:1180px; margin:0 auto; padding:0 15px; }
.ride-topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.ride-title { font-size:28px; font-weight:900; color:#102033; margin:0; letter-spacing:-.5px; }
.ride-count { color:#64748b; font-size:14px; font-weight:600; }
.ride-write-btn { display:inline-flex; align-items:center; gap:7px; border-radius:999px; background:#0f766e; color:#fff !important; padding:10px 18px; font-weight:900; text-decoration:none !important; box-shadow:0 8px 18px rgba(15,118,110,.22); }
.ride-search { background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:18px; margin-bottom:18px; box-shadow:0 8px 22px rgba(15,23,42,.05); }
.ride-search .input-group select,
.ride-search .input-group input { height:46px; border-color:#dbe3ef; }
.ride-search .btn { height:46px; font-weight:800; }

.ride-cate-wrap { background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:15px; margin-bottom:22px; box-shadow:0 8px 22px rgba(15,23,42,.04); }
.ride-cate-wrap .nav-pills .nav-link { border-radius:999px; color:#334155; font-weight:800; margin:3px; }
.ride-cate-wrap .nav-pills .nav-link.active { background:#0f766e; color:#fff; }

.ride-card { position:relative; display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid #e2e8f0; border-radius:24px; overflow:hidden; box-shadow:0 12px 28px rgba(15,23,42,.06); transition:.2s ease; }
.ride-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(15,23,42,.10); }
.ride-card-link { color:inherit !important; text-decoration:none !important; display:block; height:100%; }
.ride-card-body { padding:22px; }
.ride-route { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.ride-city { flex:1; min-width:0; }
.ride-city small { display:block; color:#64748b; font-size:12px; font-weight:800; margin-bottom:5px; }
.ride-city strong { display:block; color:#0f172a; font-size:20px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ride-arrow { flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:#ecfdf5; color:#0f766e; display:flex; align-items:center; justify-content:center; font-weight:900; }
.ride-date-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.ride-pill { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; background:#f1f5f9; color:#334155; font-size:13px; font-weight:800; }
.ride-price { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; padding-top:16px; border-top:1px solid #eef2f7; }
.ride-price .budget { font-size:25px; color:#0f766e; font-weight:900; }
.ride-price .people { font-size:14px; color:#475569; font-weight:900; }
.ride-user { margin-top:16px; display:flex; align-items:center; gap:10px; color:#475569; font-weight:800; }
.ride-avatar { width:34px; height:34px; border-radius:50%; background:#0f766e; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; }
.ride-verified { color:#16a34a; font-size:12px; font-weight:900; margin-left:auto; }
.ride-badge-cat { position:absolute; top:14px; left:14px; z-index:2; padding:6px 10px; border-radius:999px; background:rgba(15,118,110,.92); color:#fff; font-size:12px; font-weight:900; }
.admin-check { position:absolute; top:12px; right:12px; z-index:5; background:#fff; padding:5px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.no-data { background:#fff; border:1px dashed #cbd5e1; color:#64748b; border-radius:20px; padding:70px 20px; text-align:center; font-weight:800; }

.ride-view-hero { background:linear-gradient(135deg,#064e3b,#0f766e,#14b8a6); color:#fff; border-radius:26px; padding:30px; margin-bottom:22px; }
.ride-view-hero h1 { font-size:32px; font-weight:900; margin:0 0 14px; letter-spacing:-.7px; }
.ride-view-route { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:20px; font-weight:900; }
.ride-view-route span { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); padding:8px 14px; border-radius:999px; }
.ride-summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
.ride-summary-item { background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:18px; box-shadow:0 8px 22px rgba(15,23,42,.04); }
.ride-summary-label { color:#64748b; font-size:13px; font-weight:900; margin-bottom:6px; }
.ride-summary-value { color:#0f172a; font-size:20px; font-weight:900; }
.ride-detail-card { background:#fff; border:1px solid #e2e8f0; border-radius:20px; margin-bottom:18px; overflow:hidden; box-shadow:0 8px 22px rgba(15,23,42,.04); }
.ride-detail-card h3 { font-size:19px; font-weight:900; margin:0; padding:16px 20px; border-bottom:1px solid #eef2f7; }
.ride-detail-card .body { padding:20px; }
.ride-table { width:100%; border-collapse:collapse; }
.ride-table th { width:22%; background:#f8fafc; color:#475569; font-weight:900; padding:13px; border:1px solid #e2e8f0; }
.ride-table td { padding:13px; border:1px solid #e2e8f0; color:#111827; font-weight:700; }
.ride-safe { background:#fff7ed; color:#7c2d12; border:1px solid #fed7aa; border-radius:18px; padding:18px; line-height:1.7; font-weight:700; }

.ride-form-section { background:#fff; border:1px solid #e2e8f0; border-radius:20px; margin-bottom:18px; overflow:hidden; box-shadow:0 8px 22px rgba(15,23,42,.04); }
.ride-form-section .section-head { padding:16px 20px; border-bottom:1px solid #eef2f7; font-size:18px; font-weight:900; }
.ride-form-section .section-body { padding:20px; }
.ride-auth-alert { background:#ecfdf5; border:1px solid #bbf7d0; color:#166534; border-radius:16px; padding:14px 16px; font-weight:800; margin-bottom:16px; }
.ride-auth-block { background:#fff1f2; border:1px solid #fecdd3; color:#9f1239; border-radius:16px; padding:20px; font-weight:900; margin:30px 0; text-align:center; }

@media(max-width:900px){
    .ride-topbar { flex-direction:column; align-items:flex-start; }
    .ride-title { font-size:24px; }
    .ride-summary-grid { grid-template-columns:1fr 1fr; }
    .ride-route { flex-direction:column; align-items:flex-start; }
    .ride-arrow { transform:rotate(90deg); }
    .ride-table th, .ride-table td { display:block; width:100%; }
}
@media(max-width:575px){
    .ride-summary-grid { grid-template-columns:1fr; }
    .ride-view-hero { padding:24px 20px; border-radius:20px; }
    .ride-view-hero h1 { font-size:25px; }
}