/* Rides (/rides) — premium components layered on top of the InTaghazout site.css
   Brand: navy #0c2740 · amber #f4a93b · blue #0a6ebd · green #1fb154 */

/* ---- richer hero ---- */
.rides .page-hero{background:linear-gradient(135deg,#0c2740 0%,#0a6ebd 58%,#1fa3d6 100%)}
.rides .page-hero::after{background:radial-gradient(900px 380px at 85% -25%,rgba(54,197,217,0.38),transparent 55%),radial-gradient(700px 300px at 5% 120%,rgba(244,169,59,0.14),transparent 60%)}
.rides .hero-badge{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.28)}

/* ---- premium buttons (rides only) ---- */
.rides .btn{border-radius:13px;font-weight:800;letter-spacing:.005em;transition:transform .14s ease,box-shadow .16s ease,background .16s ease,border-color .16s}
.rides .btn-blue{background:linear-gradient(135deg,#0a6ebd 0%,#0c2740 100%);color:#fff;box-shadow:0 10px 24px -6px rgba(10,110,189,0.5)}
.rides .btn-blue:hover{transform:translateY(-2px);box-shadow:0 18px 34px -8px rgba(10,110,189,0.55);color:#fff}
.rides .btn-amber{background:linear-gradient(135deg,#f7b64e 0%,#f0951f 100%);color:#0c2740;box-shadow:0 10px 24px -6px rgba(240,149,31,0.55)}
.rides .btn-amber:hover{transform:translateY(-2px);box-shadow:0 18px 34px -8px rgba(240,149,31,0.6)}
.rides .btn-outline{background:#fff;border:1.5px solid rgba(12,39,64,0.16);color:#0c2740}
.rides .btn-outline:hover{border-color:#0a6ebd;color:#0a6ebd;background:#f3f8fc;transform:translateY(-1px)}
.rides .btn:active{transform:translateY(0)}

/* ---- form fields ---- */
.rides input,.rides select,.rides textarea{width:100%;border:1.5px solid rgba(12,39,64,0.13);border-radius:12px;padding:13px 13px;font-family:inherit;font-size:15px;font-weight:600;color:#0c2740;background:#fff;transition:border-color .15s,box-shadow .15s}
.rides input:focus,.rides select:focus,.rides textarea:focus{outline:none;border-color:#0a6ebd;box-shadow:0 0 0 4px rgba(10,110,189,0.13)}
.rides select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230c2740' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.rides textarea{resize:vertical;min-height:84px;font-weight:500}
.rides label{display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#6b7f91;margin-bottom:7px}
.rides .field{margin-bottom:15px}
.rides .grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:520px){.rides .grid2{grid-template-columns:1fr}}
.hint{font-size:12.5px;color:#6b7f91;margin:6px 0 0;font-weight:500}

/* ---- search card (floats over the hero) ---- */
.searchwrap{margin-top:-48px;position:relative;z-index:5}
.search{background:#fff;border-radius:22px;box-shadow:0 34px 70px -24px rgba(8,32,58,0.4),0 4px 14px rgba(8,32,58,0.06);padding:clamp(18px,2.4vw,26px);border:1px solid rgba(255,255,255,0.7)}
.search .search-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:13px;align-items:end}
.search .row-btns{display:flex;gap:11px;margin-top:16px}
@media(max-width:760px){.search .search-grid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.search .search-grid{grid-template-columns:1fr}}

/* popular routes */
.routes-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.rides .chip{background:#fff;border:1px solid rgba(12,39,64,0.12);color:#0c2740;font-weight:700;box-shadow:0 2px 8px rgba(8,32,58,0.05);transition:transform .13s,box-shadow .13s,border-color .13s,color .13s}
.rides .chip:hover{border-color:#0a6ebd;color:#0a6ebd;transform:translateY(-1px);box-shadow:0 8px 16px -4px rgba(8,32,58,0.14)}

/* ---- results ---- */
.results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px}
#count{color:#0a6ebd;font-size:14px;font-weight:800;background:#eaf3fb;padding:5px 12px;border-radius:999px}
.rt-cards{display:grid;gap:15px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.rt-card{display:block;background:#fff;border:1px solid rgba(12,39,64,0.08);border-radius:18px;padding:20px;box-shadow:0 4px 16px rgba(8,32,58,0.05);text-decoration:none;color:#0c2740;transition:transform .16s ease,box-shadow .16s ease,border-color .16s}
.rt-card:hover{transform:translateY(-4px);box-shadow:0 24px 44px -14px rgba(8,32,58,0.24);border-color:rgba(10,110,189,0.25)}
.rt-card h3{font-family:'Bricolage Grotesque',sans-serif;margin:11px 0 10px;font-size:17.5px;line-height:1.25}
.tag{display:inline-block;background:linear-gradient(135deg,#eaf3fb,#dfeaf8);color:#0a6ebd;font-weight:800;font-size:12.5px;padding:5px 12px;border-radius:999px;letter-spacing:.01em}
.route{display:flex;align-items:center;gap:8px;font-weight:800;flex-wrap:wrap}
.route .arrow{color:#f4a93b}
.route.big{font-size:23px;margin:12px 0 18px}
.meta{display:flex;gap:14px;flex-wrap:wrap;color:#6b7f91;font-size:14px;font-weight:600;margin-top:12px}
.meta .time{color:#0c2740}

/* empty / loading */
.loading,.empty{grid-column:1/-1;text-align:center;color:#6b7f91;padding:44px 22px;background:#fff;border:1px solid rgba(12,39,64,0.09);border-radius:20px;box-shadow:0 6px 20px rgba(8,32,58,0.05)}
.empty-ic{font-size:42px;line-height:1;margin-bottom:8px}
.empty strong{color:#0c2740;font-size:19px;display:block}
.empty p{color:#6b7f91;margin:8px auto 20px;max-width:38ch;font-weight:500}

/* ---- single trip ---- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;background:#fff;border:1px solid rgba(12,39,64,0.09);border-radius:18px;padding:18px;margin:0 0 16px;box-shadow:0 6px 20px rgba(8,32,58,0.05)}
.facts .k{display:block;font-size:12px;color:#6b7f91;text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.facts .v{display:block;font-size:16px;font-weight:800;margin-top:3px}
.desc{background:#fff;border:1px solid rgba(12,39,64,0.09);border-radius:18px;padding:18px;margin:0 0 16px;color:#28384a;font-weight:500;line-height:1.6}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#25c063,#12a150);color:#fff;font-weight:800;font-size:17px;padding:16px;border-radius:14px;text-decoration:none;box-shadow:0 12px 26px -8px rgba(31,177,84,0.55);transition:transform .14s,box-shadow .16s}
.wa-btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(31,177,84,0.6);color:#fff}
.wa-btn.sm{padding:12px 18px;font-size:14.5px;flex:none;box-shadow:0 6px 16px -6px rgba(31,177,84,0.5)}
.safety{font-size:13px;color:#6b7f91;margin:14px 0 18px;text-align:center;font-weight:500}
.back{display:inline-block;color:#6b7f91;font-weight:700;text-decoration:none}
.back:hover{color:#0a6ebd}
.banner{background:linear-gradient(135deg,#e6f6ed,#d3f0dd);color:#166534;border:1px solid #b7e4c7;border-radius:14px;padding:14px 16px;font-weight:700;margin-bottom:18px}

/* organizer fallback card */
.operator{grid-column:1/-1;display:flex;align-items:center;gap:15px;background:linear-gradient(135deg,#fff7ed,#fef1e0);border:1px solid #fcd9b0;border-radius:18px;padding:20px;margin-top:6px;box-shadow:0 8px 24px -10px rgba(154,52,18,0.18)}
.operator .op-ic{font-size:32px;line-height:1}
.operator .op-body{flex:1}
.operator .op-body strong{display:block;margin-bottom:4px;color:#9a3412;font-family:'Bricolage Grotesque',sans-serif;font-size:16.5px}
.operator .op-body p{margin:0;color:#9a3412;font-size:14px;font-weight:500;opacity:.92}
@media(max-width:560px){.operator{flex-direction:column;text-align:center}.wa-btn.sm{width:100%}}

/* how it works */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.steps3 .step{background:#fff;border:1px solid rgba(12,39,64,0.08);border-radius:18px;padding:24px;box-shadow:0 6px 20px rgba(8,32,58,0.05);transition:transform .16s,box-shadow .16s}
.steps3 .step:hover{transform:translateY(-3px);box-shadow:0 18px 36px -14px rgba(8,32,58,0.2)}
.steps3 .n{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#0c2740,#0a6ebd);color:#f4a93b;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.steps3 h3{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;margin:0 0 6px}
.steps3 p{margin:0;color:#4a5d6e;font-size:14.5px;line-height:1.55}
@media(max-width:720px){.steps3{grid-template-columns:1fr}}