/* =============================================================
   Jiminy — Plan Test (Plan Disneyland preview) Page Styles
   /css/plan-test.css

   Scoped to #page-plan-test / .pt-* / .plan-test-* so editing
   this file cannot affect plan-disneyland.html or any other page.
   Load LAST, after variables.css, shared.css, plan.css and
   plan-landing.css, only on plan-test.html.
============================================================= */

#page-plan-test.plan-test-page {
  background-color: #071026;
  background-image: url("/images/jiminy-explorer-background.png");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  margin: -24px -14px 0;
  padding: 32px 14px 120px;
  min-height: 100%;
  position: relative;
  overflow: hidden;
}

.plan-test-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 900;
  color: var(--navy);
  opacity: .7;
  text-decoration: none;
  margin-bottom: 18px;
}
.plan-test-back-link:hover { opacity: 1; }

/* ── PAGE HEADER ──────────────────────────────────────────── */
.plan-test-header {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto 22px;
}
.plan-test-header-icon {
  width: 46px;
  height: 46px;
  color: var(--navy);
  flex-shrink: 0;
  opacity: .75;
}
.plan-test-header-icon svg { width: 100%; height: 100%; }
.plan-test-title {
  font-family: Georgia, serif;
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 900;
  color: var(--navy);
  margin: 0;
  line-height: 1.15;
}
.plan-test-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 2px 0 0;
}

/* ── GRID LAYOUT ──────────────────────────────────────────── */
.plan-test-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

/* ── SEARCH CARD (white/cream, navy text) ────────────────── */
.pt-search-card {
  background: rgba(251,246,238,.97);
  border: 1px solid rgba(7,31,65,.14);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 12px 32px rgba(7,31,65,.16);
}

.pt-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid rgba(7,31,65,.16);
  border-radius: 999px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.pt-search-icon { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.pt-search-bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font-size: 14px;
  color: var(--navy);
  font-family: inherit;
}
.pt-search-bar input::placeholder { color: rgba(7,31,65,.4); }
.pt-search-clear, .pt-search-go {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: none;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.pt-search-clear svg, .pt-search-go svg { width: 16px; height: 16px; }
.pt-search-go { background: var(--navy); color: #fff; }

.food-finder-filter-row-v248 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.food-finder-filter-v248 {
  border: 1.5px solid rgba(7,31,65,.18);
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
}
.food-finder-filter-v248.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #071026;
}

.food-finder-status-v230 {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
}

.food-finder-results-v230 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Result cards — white, rounded, navy text (reskinned from plan.css) */
.food-finder-card-v230 {
  background: #fff;
  border: 1px solid rgba(7,31,65,.12);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(7,31,65,.08);
}
.food-finder-card-v230 h4 {
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 900;
  color: var(--navy);
  margin: 6px 0 2px;
}
.food-finder-path-v230 {
  font-size: 12px;
  color: #1d5fcd;
  font-weight: 800;
  margin-bottom: 4px;
}
.food-finder-card-v230 .phase3-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.food-finder-card-v230 .phase3-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(7,31,65,.16);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 900;
  color: var(--navy);
  margin-right: 6px;
}
.food-finder-card-v230 .phase3-pill.gold {
  background: rgba(244,184,37,.12);
  border-color: rgba(244,184,37,.4);
  color: #8a6412;
}
.phase3-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.phase3-card-actions .btn.primary {
  background: var(--gold);
  color: #071026;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 1000;
  font-size: 13px;
}
.phase3-card-actions .btn.secondary {
  background: #fff;
  border: 1.5px solid rgba(7,31,65,.18);
  color: var(--navy);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 900;
  font-size: 13px;
}

/* Pulse animation for "already in list" feedback */
@keyframes ptAlreadyPulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(7,31,65,.08); }
  50% { box-shadow: 0 0 0 4px rgba(244,184,37,.4); }
}
.pt-already-pulse { animation: ptAlreadyPulse .6s ease; }

/* ── YOUR LIST PANEL ──────────────────────────────────────── */
.plan-test-side { min-width: 0; }

.pt-list-panel {
  background: rgba(10,28,61,.55);
  border: 1.5px solid rgba(244,184,37,.35);
  border-radius: 24px;
  padding: 18px;
}
.pt-list-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 900;
  color: var(--gold);
  margin: 0 0 14px;
}
.pt-list-panel-title svg { width: 20px; height: 20px; }

/* Empty state card */
.pt-list-empty-card {
  background: rgba(251,246,238,.06);
  border: 1px solid rgba(244,184,37,.25);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
}
.pt-list-empty-card h3 {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 4px;
}
.pt-list-empty-card > p {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin: 0 0 14px;
}
.pt-list-empty-card input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(244,184,37,.35);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 12px;
}
.pt-list-empty-card input::placeholder { color: rgba(255,255,255,.4); }
.pt-create-btn {
  width: 100%;
  background: var(--gold);
  color: #071026;
  border: 0;
  border-radius: 12px;
  padding: 13px;
  font-weight: 1000;
  font-size: 14px;
  margin-bottom: 10px;
  cursor: pointer;
}
.pt-resume-btn {
  width: 100%;
  background: none;
  border: 1.5px solid rgba(244,184,37,.4);
  color: var(--gold);
  border-radius: 12px;
  padding: 12px;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
}
.pt-list-empty-illustration {
  width: 56px;
  height: 56px;
  margin: 20px auto 10px;
  color: rgba(255,255,255,.25);
}
.pt-list-empty-illustration svg { width: 100%; height: 100%; }
.pt-list-empty-note {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  line-height: 1.5;
  margin: 0;
}

/* Active list card */
.pt-list-active-card {
  background: rgba(251,246,238,.97);
  border-radius: 18px;
  padding: 16px;
}
.pt-list-active-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pt-list-active-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pt-list-active-name-row h3 {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--navy);
  margin: 0;
}
.pt-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(7,31,65,.06);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.pt-icon-btn svg { width: 13px; height: 13px; }
.pt-list-more-btn {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
}
.pt-list-active-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 14px;
}
.pt-list-active-sub > span {
  font-size: 13px;
  color: var(--muted);
  font-weight: 800;
}
.pt-clear-all-btn {
  border: 1px solid rgba(7,31,65,.16);
  background: #fff;
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}

.pt-list-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 14px;
}
.pt-list-item-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(7,31,65,.08);
}
.pt-list-item-row:last-child { border-bottom: 0; }
.pt-item-handle {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  cursor: grab;
  color: rgba(7,31,65,.3);
}
.pt-item-handle button {
  border: 0;
  background: none;
  color: rgba(7,31,65,.35);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}
.pt-item-handle button:disabled { opacity: .25; cursor: default; }
.pt-item-info { min-width: 0; }
.pt-item-info b {
  display: block;
  font-size: 14px;
  color: var(--navy);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-item-info small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-item-info .pt-item-place {
  color: #1d5fcd;
  font-weight: 700;
}
.pt-item-remove {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(7,31,65,.14);
  background: #fff;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.pt-item-remove svg { width: 12px; height: 12px; }

.pt-view-list-btn {
  width: 100%;
  background: none;
  border: 1.5px solid rgba(244,184,37,.5);
  color: #8a6412;
  border-radius: 999px;
  padding: 13px;
  font-weight: 1000;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  margin-bottom: 8px;
}
.pt-view-list-btn:hover { background: rgba(244,184,37,.08); }

.pt-close-list-btn {
  width: 100%;
  background: none;
  border: 1px solid rgba(7,31,65,.2);
  color: var(--muted);
  border-radius: 999px;
  padding: 11px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}
.pt-close-list-btn:hover { background: rgba(7,31,65,.05); color: var(--navy); }

#page-plan-test .footer-note {
  color: rgba(255,255,255,.4);
  margin-top: 24px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* ── RESUME MODAL ─────────────────────────────────────────── */
.pt-resume-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(7,31,65,.55);
  backdrop-filter: blur(4px);
}
.pt-resume-modal.open { display: flex; }
.pt-resume-dialog {
  width: min(460px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(7,31,65,.3);
}
.pt-resume-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.pt-resume-head h3 {
  font-family: Georgia, serif;
  font-size: 22px;
  color: var(--navy);
  margin: 0;
}
.pt-resume-dialog > p {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
}
.pt-resume-list { display: flex; flex-direction: column; gap: 8px; }
.pt-resume-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 16px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.pt-resume-option:hover { background: #eef4ff; }
.pt-resume-option b { color: var(--navy); font-weight: 1000; }
.pt-resume-option small { color: var(--muted); font-size: 12px; }
.pt-resume-empty {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 20px 0;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(min-width: 860px) {
  .plan-test-grid { grid-template-columns: 1fr 380px; }
  .plan-test-side { position: sticky; top: 20px; }
}

@media(max-width: 480px) {
  #page-plan-test.plan-test-page { margin: -24px -14px 0; padding: 24px 10px 120px; }
  .pt-search-card { padding: 14px; }
  .food-finder-filter-v248 { font-size: 12px; padding: 8px 12px; }
}

/* Back button inside Resume modal (Step 2 → Step 1) */
.pt-resume-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  padding: 4px 0 10px;
}
.pt-resume-back-btn:hover { color: var(--navy); }

/* Matched food-item hint shown below the real location name */
.food-finder-match-hint {
  font-size: 11px;
  color: #8a6412;
  font-weight: 900;
  background: rgba(244,184,37,.1);
  border-radius: 6px;
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: 4px;
}