/* Tracked/saved trips page — relies on tokens + .cards-grid/.card from search2.css
   and .account-card from account.css for the empty/signed-out states. */
.saved-trips-title{ margin:24px 0 20px; font-size:26px; font-weight:800; color:var(--text); }

.account-card{ margin:0 auto 32px; }

.account-card__icon{
  width:56px; height:56px; border-radius:16px; background:var(--warm-sand);
  display:flex; align-items:center; justify-content:center; color:var(--primary);
  margin:0 auto 16px;
}
.account-card__icon svg{ width:26px; height:26px; }

/* ---------- How it works (collapsible) ---------- */
.how-it-works{
  margin:0 0 20px; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.how-it-works__toggle{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-radius:var(--radius); font-weight:700; color:var(--text); user-select:none;
}
.how-it-works__toggle::-webkit-details-marker{ display:none }
.how-it-works__toggle-label{ display:flex; align-items:center; gap:10px; }
.how-it-works__toggle-icon{ width:20px; height:20px; color:var(--muted); flex:none; }
.how-it-works__chevron{ width:18px; height:18px; color:var(--muted); flex:none; transition:transform .18s ease; }
.how-it-works[open] .how-it-works__chevron{ transform:rotate(180deg); }
.how-it-works__toggle:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px #3b82f6; }

.how-it-works__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  padding:16px 20px 20px; border-top:1px solid var(--border);
}
.how-it-works__step{ display:flex; align-items:flex-start; gap:10px; }
.how-it-works__icon{
  flex:none; width:32px; height:32px; border-radius:10px; background:var(--warm-sand);
  display:flex; align-items:center; justify-content:center; color:var(--primary);
}
.how-it-works__icon svg{ width:16px; height:16px; }
.how-it-works__step h3{ margin:0 0 4px; font-size:14px; font-weight:700; color:var(--text); }
.how-it-works__step p{ margin:0; font-size:13px; color:var(--muted); line-height:1.4; }

@media (max-width:860px){
  .how-it-works__grid{ grid-template-columns:1fr; }
}

.card__remove{
  position:absolute; top:10px; left:10px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.6);
  color:var(--primary); cursor:pointer; box-shadow:var(--shadow-sm);
}
.card__remove svg{ width:16px; height:16px; }
.card__remove:hover{ background:#fff; }
.card__remove:disabled{ opacity:.6; cursor:default; }