/* ── Plan page — AI Itinerary Builder ──────────────────────────────────────── */
/* Inherits CSS variables from hub-styles.css */

/* ── Wizard shell ─────────────────────────────────────────────────────────── */
.plan-page { min-height:100vh; background:var(--bg); padding:0 0 80px; }

.plan-hero {
  background:linear-gradient(135deg,#0a0f1e 0%,#0f2038 60%,#1a0a24 100%);
  padding:48px 24px 40px; text-align:center;
}
.plan-hero h1 { font-size:clamp(22px,5vw,36px); font-weight:900; color:#fff; margin:0 0 8px; }
.plan-hero p  { color:rgba(255,255,255,.65); font-size:15px; margin:0; }
.plan-badge { display:inline-block; background:rgba(255,200,0,.15); color:#ffd700; border:1px solid rgba(255,200,0,.3); border-radius:20px; padding:4px 14px; font-size:12px; font-weight:600; margin-bottom:16px; }

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.wizard-progress { display:flex; justify-content:center; gap:0; padding:28px 24px 0; max-width:520px; margin:0 auto; }
.wp-step {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; position:relative;
}
.wp-step:not(:last-child)::after {
  content:''; position:absolute; top:16px; left:50%; width:100%; height:2px;
  background:var(--border); z-index:0;
}
.wp-step.done::after  { background:var(--accent); }
.wp-dot {
  width:32px; height:32px; border-radius:50%; border:2px solid var(--border);
  background:var(--surface); color:var(--text2); font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; z-index:1; transition:.2s;
}
.wp-step.active .wp-dot { border-color:var(--accent); background:var(--accent); color:#fff; }
.wp-step.done   .wp-dot { border-color:var(--accent); background:var(--accent); color:#fff; }
.wp-label { font-size:11px; color:var(--text2); white-space:nowrap; }
.wp-step.active .wp-label { color:var(--accent); font-weight:600; }

/* ── Step container ───────────────────────────────────────────────────────── */
.wizard-body { max-width:680px; margin:0 auto; padding:32px 20px 0; }
.wizard-step { display:none; }
.wizard-step.active { display:block; animation:fadeUp .3s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }

.step-title { font-size:20px; font-weight:700; color:var(--text); margin:0 0 6px; }
.step-sub   { font-size:14px; color:var(--text2); margin:0 0 24px; }

/* ── Option cards (traveler type, pace, budget) ───────────────────────────── */
.opt-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:24px; }
.opt-card {
  border:2px solid var(--border); border-radius:14px; padding:18px 12px;
  text-align:center; cursor:pointer; transition:.18s; background:var(--surface);
  user-select:none;
}
.opt-card:hover { border-color:var(--accent); background:rgba(214,34,70,.06); }
.opt-card.selected { border-color:var(--accent); background:rgba(214,34,70,.1); }
.opt-card .oc-icon { font-size:28px; margin-bottom:8px; display:block; }
.opt-card .oc-label { font-size:14px; font-weight:600; color:var(--text); display:block; margin-bottom:2px; }
.opt-card .oc-sub   { font-size:12px; color:var(--text2); }

/* ── Interest grid ────────────────────────────────────────────────────────── */
.interest-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-bottom:24px; }
.int-chip {
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px 8px;
  border:2px solid var(--border); border-radius:12px; cursor:pointer;
  background:var(--surface); transition:.18s; user-select:none;
}
.int-chip:hover   { border-color:var(--accent); }
.int-chip.selected { border-color:var(--accent); background:rgba(214,34,70,.1); }
.int-chip .ic-icon  { font-size:22px; }
.int-chip .ic-label { font-size:12px; font-weight:600; color:var(--text); text-align:center; }

/* ── Checkboxes (age groups, special needs) ───────────────────────────────── */
.check-grid { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.check-chip {
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  border:2px solid var(--border); border-radius:20px; cursor:pointer; user-select:none;
  background:var(--surface); font-size:13px; color:var(--text); transition:.18s;
}
.check-chip:hover    { border-color:var(--accent); }
.check-chip.selected { border-color:var(--accent); background:rgba(214,34,70,.1); color:var(--accent); font-weight:600; }
.check-chip input[type=checkbox] { display:none; }

/* ── Date inputs ──────────────────────────────────────────────────────────── */
.date-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
.date-field label { display:block; font-size:13px; font-weight:600; color:var(--text2); margin-bottom:6px; }
.date-field input[type=date] {
  width:100%; padding:10px 12px; border:2px solid var(--border); border-radius:10px;
  background:var(--surface); color:var(--text); font-size:14px; box-sizing:border-box;
}
.date-field input:focus { outline:none; border-color:var(--accent); }

/* ── Airport radio ────────────────────────────────────────────────────────── */
.airport-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:24px; }
.airport-card {
  border:2px solid var(--border); border-radius:12px; padding:14px 12px;
  cursor:pointer; background:var(--surface); transition:.18s; user-select:none;
}
.airport-card:hover   { border-color:var(--accent); }
.airport-card.selected { border-color:var(--accent); background:rgba(214,34,70,.1); }
.airport-card input   { display:none; }
.airport-code  { font-size:18px; font-weight:900; color:var(--accent); }
.airport-name  { font-size:12px; color:var(--text); font-weight:600; margin:2px 0; }
.airport-sub   { font-size:11px; color:var(--text2); }

/* ── Mode toggle ──────────────────────────────────────────────────────────── */
.mode-toggle {
  display:flex; border:2px solid var(--border); border-radius:40px; overflow:hidden;
  margin-bottom:24px; max-width:360px;
}
.mode-toggle button {
  flex:1; padding:10px 16px; background:transparent; border:none; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--text2); transition:.2s;
}
.mode-toggle button.active { background:var(--accent); color:#fff; border-radius:38px; }

/* ── Wizard nav buttons ───────────────────────────────────────────────────── */
.wizard-nav { display:flex; justify-content:space-between; align-items:center; max-width:680px; margin:28px auto 0; padding:0 20px; }
.btn-prev { padding:10px 22px; border:2px solid var(--border); border-radius:24px; background:transparent; color:var(--text2); font-size:14px; font-weight:600; cursor:pointer; transition:.18s; }
.btn-prev:hover { border-color:var(--text2); color:var(--text); }
.btn-next, .btn-generate {
  padding:12px 30px; border-radius:24px; background:var(--accent); color:#fff;
  font-size:14px; font-weight:700; border:none; cursor:pointer; transition:.18s;
}
.btn-next:hover, .btn-generate:hover { background:#b01e3c; }
.btn-generate { background:linear-gradient(135deg,#d62246,#a00e28); padding:14px 36px; font-size:15px; }
.error-msg { color:#e55; font-size:13px; text-align:center; margin-top:8px; min-height:18px; }

/* ── Example scenario buttons ─────────────────────────────────────────────── */
.scenarios-bar { max-width:680px; margin:16px auto 0; padding:0 20px; }
.scenarios-bar p { font-size:12px; color:var(--text2); margin:0 0 8px; }
.scenario-chips { display:flex; flex-wrap:wrap; gap:8px; }
.scenario-chip {
  padding:6px 12px; border:1px solid var(--border); border-radius:16px;
  font-size:12px; color:var(--text2); background:var(--surface); cursor:pointer; transition:.18s;
}
.scenario-chip:hover { border-color:var(--accent); color:var(--accent); }

/* ── Loading overlay ──────────────────────────────────────────────────────── */
.loading-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.88);
  z-index:200; flex-direction:column; align-items:center; justify-content:center; gap:24px;
}
.loading-overlay.active { display:flex; }
.loading-spinner {
  width:64px; height:64px; border:4px solid rgba(255,255,255,.12);
  border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.loading-steps { display:flex; flex-direction:column; gap:12px; }
.ls-item { display:flex; align-items:center; gap:12px; font-size:14px; color:rgba(255,255,255,.5); transition:.3s; }
.ls-item.active { color:#fff; font-weight:600; }
.ls-item.done   { color:var(--accent); }
.ls-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.2); flex-shrink:0; }
.ls-item.active .ls-dot { background:var(--accent); box-shadow:0 0 8px var(--accent); }
.ls-item.done   .ls-dot { background:var(--accent); }
.loading-note { font-size:12px; color:rgba(255,255,255,.35); }

/* ── Result page ──────────────────────────────────────────────────────────── */
#plan-result { display:none; }
#plan-result.active { display:block; }

.result-banner {
  background:linear-gradient(135deg,#0a0f1e,#0f2038);
  padding:32px 24px; text-align:center;
}
.result-banner h2 { font-size:clamp(18px,4vw,28px); font-weight:900; color:#fff; margin:0 0 8px; }
.result-banner p  { color:rgba(255,255,255,.6); font-size:14px; margin:0 0 16px; }
.result-highlights { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:16px; }
.highlight-pill { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:5px 12px; font-size:12px; color:rgba(255,255,255,.7); }

.result-toolbar { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
.tb-btn {
  padding:8px 16px; border-radius:20px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); font-size:13px; font-weight:600;
  cursor:pointer; transition:.18s;
}
.tb-btn:hover { background:rgba(255,255,255,.15); color:#fff; }
.tb-btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ── Day tabs ─────────────────────────────────────────────────────────────── */
.day-tabs-wrap { background:var(--surface); border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; }
.day-tabs-wrap::-webkit-scrollbar { display:none; }
.day-tabs { display:flex; padding:0 16px; min-width:max-content; }
.day-tab {
  padding:14px 18px; white-space:nowrap; font-size:13px; font-weight:600; color:var(--text2);
  cursor:pointer; border-bottom:3px solid transparent; transition:.18s;
}
.day-tab:hover  { color:var(--text); }
.day-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── Day content layout ───────────────────────────────────────────────────── */
.day-panel { display:none; }
.day-panel.active { display:grid; grid-template-columns:1fr 380px; gap:0; min-height:600px; }
@media (max-width:860px) { .day-panel.active { grid-template-columns:1fr; } }

.day-timeline { padding:24px 20px; overflow-y:auto; }
.day-map { position:sticky; top:0; height:100vh; max-height:700px; }
#plan-map { width:100%; height:100%; }

/* ── Day tip banner ───────────────────────────────────────────────────────── */
.day-tip-banner { background:rgba(255,200,0,.06); border:1px solid rgba(255,200,0,.15); border-radius:10px; padding:10px 14px; margin-bottom:20px; font-size:13px; color:rgba(255,200,0,.9); }

/* ── Timeline slots ───────────────────────────────────────────────────────── */
.tl-slot-label { font-size:11px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.08em; margin:0 0 8px; display:flex; align-items:center; gap:6px; }
.tl-slot-label::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── Place cards ──────────────────────────────────────────────────────────── */
.place-card {
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  margin-bottom:12px; overflow:hidden; transition:.18s;
}
.place-card:hover { border-color:var(--accent); }
.place-card-inner { padding:16px; }
.place-header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.place-names { flex:1; }
.place-name    { font-size:15px; font-weight:700; color:var(--text); }
.place-name-kr { font-size:12px; color:var(--text2); margin-top:1px; }
.place-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.place-badge {
  padding:3px 8px; border-radius:12px; font-size:11px; font-weight:600;
  background:rgba(255,255,255,.06); color:var(--text2); border:1px solid var(--border);
}
.place-badge.cost    { color:#4db86d; border-color:rgba(77,184,109,.2); }
.place-badge.time    { color:#5db4e8; border-color:rgba(93,180,232,.2); }
.place-badge.closed  { color:#e07; border-color:rgba(238,0,119,.2); }
.place-desc { font-size:13px; color:var(--text2); line-height:1.6; margin-bottom:8px; }
.place-tip  { background:rgba(255,200,0,.05); border-left:3px solid rgba(255,200,0,.4); padding:8px 10px; font-size:12px; color:rgba(255,200,0,.85); border-radius:0 8px 8px 0; margin-bottom:10px; }
.place-tip strong { display:block; margin-bottom:2px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }

.place-actions { display:flex; gap:6px; flex-wrap:wrap; }
.pa-btn {
  padding:5px 10px; border-radius:10px; border:1px solid var(--border); background:transparent;
  color:var(--text2); font-size:11px; font-weight:600; cursor:pointer; transition:.15s;
}
.pa-btn:hover { border-color:var(--accent); color:var(--accent); }

/* Travel connector */
.travel-connector { display:flex; align-items:center; gap:8px; padding:6px 0 6px 16px; margin-bottom:4px; }
.tc-icon { font-size:14px; opacity:.6; }
.tc-text { font-size:12px; color:var(--text2); }

/* Meal card */
.meal-card {
  background:rgba(77,184,109,.05); border:1px solid rgba(77,184,109,.15); border-radius:12px;
  padding:12px 14px; margin-bottom:16px; display:flex; align-items:center; gap:12px;
}
.meal-icon { font-size:22px; flex-shrink:0; }
.meal-info { flex:1; }
.meal-name    { font-size:14px; font-weight:700; color:var(--text); }
.meal-name-kr { font-size:11px; color:var(--text2); }
.meal-type    { font-size:12px; color:#4db86d; font-weight:600; }
.meal-tip     { font-size:12px; color:var(--text2); margin-top:4px; }

/* Drag handle */
.drag-handle { cursor:grab; color:var(--text2); padding:2px 6px; font-size:16px; flex-shrink:0; opacity:.4; }
.drag-handle:hover { opacity:.8; }
.sortable-ghost { opacity:.4; background:rgba(214,34,70,.08); }

/* ── QR modal ─────────────────────────────────────────────────────────────── */
.qr-modal-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.8);
  z-index:300; align-items:center; justify-content:center;
}
.qr-modal-backdrop.active { display:flex; }
.qr-modal { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:32px; text-align:center; max-width:300px; }
.qr-modal h3 { margin:0 0 16px; color:var(--text); }
#qr-canvas { margin:0 auto 16px; }
.qr-share-url { font-size:11px; color:var(--text2); word-break:break-all; margin-bottom:16px; }
.qr-close { padding:8px 20px; border-radius:16px; background:var(--accent); color:#fff; border:none; font-weight:600; cursor:pointer; }

/* ── Compare view ─────────────────────────────────────────────────────────── */
.compare-banner { background:rgba(93,180,232,.06); border:1px solid rgba(93,180,232,.15); border-radius:10px; padding:10px 14px; margin:16px; font-size:13px; color:rgba(93,180,232,.9); display:flex; align-items:center; gap:10px; }
.compare-banner button { margin-left:auto; padding:6px 14px; border-radius:12px; background:rgba(93,180,232,.2); border:1px solid rgba(93,180,232,.3); color:rgba(93,180,232,.9); font-size:12px; font-weight:600; cursor:pointer; }

/* ── Saved badge ──────────────────────────────────────────────────────────── */
.save-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#2a2a3a; border:1px solid var(--border); border-radius:20px; padding:10px 20px; font-size:13px; color:#fff; z-index:500; opacity:0; transition:.3s; pointer-events:none; }
.save-toast.show { opacity:1; }