/* ===== Home Routes (Theme colors + Star background) ===== */
:root{
  /* Pick from your site theme variables (fallbacks included) */
  --hr-primary:   var(--primary, #0b5ed7);
  --hr-secondary: var(--secondary, #0a2a66);
  --hr-accent:    var(--accent, #f59e0b);

  --hr-bg:#ffffff;
  --hr-text:#111827;
  --hr-muted:#6b7280;
  --hr-card:#ffffff;
  --hr-border:rgba(2,6,23,.08);
  --hr-shadow:0 14px 34px rgba(2,6,23,.10);
  --hr-radius:18px;
}

.home-routes{
  padding:56px 0;
  background:
    radial-gradient(900px 380px at 20% 20%, color-mix(in srgb, var(--hr-accent) 14%, transparent), transparent 55%),
    radial-gradient(900px 380px at 80% 10%, color-mix(in srgb, var(--hr-primary) 12%, transparent), transparent 55%),
    #ffffff;
  border-top:1px solid rgba(2,6,23,.06);
}

.home-routes .container{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
}

.hr-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}

.hr-title{
  margin:0 0 6px;
  font-size:34px;
  letter-spacing:-.6px;
  color:var(--hr-text);
}

.hr-sub{
  margin:0;
  color:var(--hr-muted);
  line-height:1.5;
  max-width:720px;
  font-size:14px;
}

.hr-search{
  position:relative;
  width:320px;
  max-width:100%;
}

.hr-search input{
  width:100%;
  padding:12px 44px 12px 14px;
  border-radius:14px;
  border:1px solid rgba(2,6,23,.10);
  background:#fff;
  outline:none;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
}

.hr-search input:focus{
  border-color:color-mix(in srgb, var(--hr-accent) 55%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--hr-accent) 18%, transparent);
}

.hr-search-ico{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  opacity:.7;
}

/* Grid */
.route-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

@media (max-width: 1020px){
  .route-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px){
  .hr-head{ flex-direction:column; align-items:flex-start; }
  .hr-search{ width:100%; }
  .route-grid{ grid-template-columns:1fr; }
}

/* Card */
.city-card{
  position:relative;
  background:var(--hr-card);
  border-radius:var(--hr-radius);
  border:1px solid var(--hr-border);
  box-shadow:var(--hr-shadow);
  padding:18px 18px 16px;
  overflow:hidden;
}

/* ===== STAR shapes instead of blobs ===== */
.city-card::before,
.city-card::after{
  content:"";
  position:absolute;
  width:200px;
  height:200px;
  opacity:.18;
  z-index:0;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  filter: blur(.2px);
}

.city-card::before{
  right:-80px;
  top:-80px;
  background: var(--hr-accent);
  transform: rotate(12deg);
}

.city-card::after{
  right:-55px;
  top:20px;
  width:150px;
  height:150px;
  background: var(--hr-primary);
  opacity:.14;
  transform: rotate(-8deg);
}

/* keep content above stars */
.city-card > *{ position:relative; z-index:1; }

/* Top */
.city-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

/* Hide old kicker look */
.city-kicker{ display:none; }

.city-name{
  margin:0;
  font-size:20px;
  font-weight:900;
  color:var(--hr-text);
  line-height:1.15;
}
.city-name::before{
  content:"Cab From ";
  font-weight:800;
  color:var(--hr-text);
}
.city-name .city-accent{ color: var(--hr-accent); }

.city-desc{
  margin-top:6px;
  font-size:13px;
  color:var(--hr-muted);
}

.city-pill{
  align-self:flex-start;
  padding:8px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  font-size:12px;
  font-weight:800;
  color:var(--hr-text);
}

/* Routes list style */
.route-chips{
  display:block;
  margin-top:10px;
}

.route-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 0;
  border:none !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#4b5563;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  line-height:1.2;
}

/* STAR icon for each route (instead of check bubble) */
.route-chip::before{
  content:"★";
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:color-mix(in srgb, var(--hr-accent) 18%, transparent);
  color:var(--hr-accent);
  font-weight:1000;
  flex:0 0 22px;
}

.route-chip:hover{
  color:var(--hr-text);
  transform:translateX(2px);
}
.route-chip:hover::before{
  background:color-mix(in srgb, var(--hr-accent) 24%, transparent);
}

.route-chip.is-hidden{ display:none; }

/* Buttons */
.city-actions{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.city-actions .btn-outline,
.city-actions .btn-primary{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 12px;
  border-radius:12px;
  font-weight:900;
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
}

.city-actions .btn-outline{
  background:#fff;
  border:1px solid rgba(2,6,23,.12);
  color:var(--hr-text);
}
.city-actions .btn-outline:hover{
  background:#f9fafb;
}

.city-actions .btn-primary{
  background:linear-gradient(135deg, var(--hr-primary), var(--hr-secondary));
  border:1px solid color-mix(in srgb, var(--hr-primary) 35%, transparent);
  color:#fff;
  box-shadow:0 10px 22px color-mix(in srgb, var(--hr-primary) 22%, transparent);
}
.city-actions .btn-primary:hover{
  filter:brightness(.98);
  transform:translateY(-1px);
}