/* TRIP PLAN PAGE */
.trip-layout { display:grid; grid-template-columns:300px 1fr; min-height:calc(100vh - var(--nav-h)); }

.trip-sidebar {
  background:var(--primary); padding:36px 24px;
  position:sticky; top:var(--nav-h); align-self:start; height:calc(100vh - var(--nav-h)); overflow-y:auto;
}
.trip-progress { margin-bottom:28px; }
.progress-step {
  display:flex; align-items:center; gap:14px; padding:12px 0;
  position:relative;
}
.progress-step:not(:last-child)::after {
  content:''; position:absolute; left:16px; top:48px;
  width:2px; height:calc(100% - 20px); background:rgba(255,255,255,.2);
}
.progress-step.completed::after { background:var(--accent); }
.ps-circle {
  width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.5); font-size:.85rem; font-weight:700; flex-shrink:0; z-index:1;
}
.progress-step.completed .ps-circle { background:var(--accent); border-color:var(--accent); color:#fff; }
.progress-step.active .ps-circle { background:var(--gold); border-color:var(--gold); color:#fff; }
.ps-text strong { display:block; color:rgba(255,255,255,.9); font-size:.85rem; }
.ps-text span { color:rgba(255,255,255,.55); font-size:.72rem; }
.progress-step.active .ps-text strong { color:#fff; }

.trip-info-box {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md); padding:14px 16px; margin-bottom:14px;
}
.trip-info-box h5 { font-family:var(--font-body); font-size:.78rem; font-weight:800; color:rgba(255,255,255,.9); margin-bottom:8px; }
.trip-info-box p { font-size:.78rem; color:rgba(255,255,255,.65); margin-bottom:4px; }
.trip-info-box strong { color:#fff; }

.trip-main { padding:40px 48px; background:var(--light-gray); }
.trip-header { margin-bottom:32px; }
.trip-header h1 { font-size:2rem; margin-bottom:6px; }
.trip-header p { color:var(--gray); }

.trip-section-card {
  background:var(--white); border-radius:var(--r-lg);
  padding:28px; box-shadow:var(--shadow-sm); border:1px solid var(--border);
  margin-bottom:20px;
}
.tsc-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.tsc-header i { color:var(--primary); font-size:1.1rem; }
.tsc-header h3 { font-size:1rem; }

.dest-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.dest-option {
  border:2px solid var(--border); border-radius:var(--r-md);
  padding:12px 14px; cursor:pointer; transition:.2s;
  display:flex; align-items:center; gap:10px; position:relative;
}
.dest-option:hover { border-color:var(--primary-light); background:var(--light-gray); }
.dest-option.active { border-color:var(--primary); background:var(--accent-soft); }
.do-emoji { font-size:1.5rem; flex-shrink:0; }
.dest-option strong { display:block; font-size:.84rem; color:var(--dark); }
.dest-option span { font-size:.72rem; color:var(--gray); }
.do-check {
  position:absolute; top:8px; right:8px;
  width:20px; height:20px; border-radius:50%;
  background:var(--primary); color:#fff; font-size:.6rem;
  display:none; align-items:center; justify-content:center;
}
.dest-option.active .do-check { display:flex; }

.duration-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-soft); color:var(--primary);
  padding:8px 16px; border-radius:var(--r-full); font-size:.85rem;
}
.duration-badge strong { font-weight:800; }

.counter-input {
  display:flex; align-items:center; border:2px solid var(--border);
  border-radius:var(--r-md); overflow:hidden;
}
.counter-input button {
  width:44px; height:48px; font-size:1.3rem; font-weight:700;
  color:var(--primary); background:var(--light-gray); border:none;
  cursor:pointer; transition:.2s;
}
.counter-input button:hover { background:var(--accent-soft); }
.counter-input span {
  flex:1; text-align:center; font-size:1.1rem; font-weight:700;
  color:var(--dark);
}

.fee-summary {
  background:var(--light-gray); border-radius:var(--r-lg);
  padding:24px; border:2px solid var(--border); margin-bottom:20px;
}
.fee-summary h4 { margin-bottom:16px; font-size:.95rem; }
.fee-row { display:flex; justify-content:space-between; padding:8px 0; font-size:.88rem; color:var(--gray); border-bottom:1px solid var(--border); }
.fee-row.total { border:none; font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--primary); padding-top:12px; }

@media(max-width:900px){
  .trip-layout { grid-template-columns:1fr; }
  .trip-sidebar { position:static; height:auto; }
  .trip-main { padding:24px 20px; }
  .dest-picker { grid-template-columns:repeat(2,1fr); }
}