/* Coastal Stays — Trip Planner section on home. */
.trip-planner-section {
  padding: 56px 20px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.trip-planner-wrap { max-width: 1080px; margin: 0 auto; }

.trip-planner-header { text-align: center; margin: 0 0 28px; }
.trip-planner-eyebrow {
  display: inline-block; background: #ecfeff; color: #0d9488;
  padding: 4px 12px; border-radius: 999px; font: 700 11px/1.6 system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
}
.trip-planner-title { margin: 12px 0 6px; font-size: clamp(24px, 3vw, 34px); color: #0f172a; }
.trip-planner-sub { margin: 0; color: #475569; font-size: 15px; }

.trip-planner-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 18px;
  padding: 22px; box-shadow: 0 8px 30px rgba(2,23,42,.06);
}

.trip-planner-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
@media (max-width: 760px) { .trip-planner-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .trip-planner-grid { grid-template-columns: 1fr; } }

.trip-planner-field { display: flex; flex-direction: column; gap: 6px; }
.trip-planner-field label {
  font: 600 12px/1.2 system-ui, sans-serif; color: #334155;
  text-transform: uppercase; letter-spacing: .05em;
}
.trip-planner-field input,
.trip-planner-field select {
  padding: 10px 12px; font-size: 14px; border: 1px solid #e2e8f0; border-radius: 10px;
  background: #fff; color: #0f172a;
}
.trip-planner-field input:focus,
.trip-planner-field select:focus { outline: 2px solid #0ea5a4; border-color: #0ea5a4; }

.trip-planner-vibes {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.vibe-chip {
  position: relative; cursor: pointer; user-select: none;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px;
  padding: 6px 14px; font-size: 13px; color: #334155;
  transition: background .12s, border-color .12s, color .12s;
}
.vibe-chip:hover { background: #e2e8f0; }
.vibe-chip input { position: absolute; opacity: 0; pointer-events: none; }
.vibe-chip.is-selected { background: #ccfbf1; border-color: #0ea5a4; color: #0d9488; font-weight: 600; }

.trip-planner-actions { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.trip-planner-submit {
  background: #0ea5a4; color: #fff; border: 0; border-radius: 999px;
  padding: 12px 24px; font: 600 14px/1 system-ui, sans-serif; cursor: pointer;
  transition: background .12s, transform .12s;
}
.trip-planner-submit:hover { background: #0d9488; transform: translateY(-1px); }
.trip-planner-submit.is-loading { opacity: .7; cursor: progress; }
.trip-planner-submit:disabled { opacity: .6; cursor: not-allowed; }
.trip-planner-note { color: #64748b; font-size: 12px; flex: 1 1 200px; }

.trip-planner-output { margin-top: 28px; }
.trip-planner-output:empty { display: none; }

.planner-banner {
  background: #fef3c7; border: 1px solid #fde68a; color: #92400e;
  padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 16px;
}
.planner-error {
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
  padding: 14px; border-radius: 10px;
}
.planner-loading {
  text-align: center; padding: 28px; color: #64748b;
}
.planner-loading span {
  display: inline-block; width: 8px; height: 8px; margin: 0 2px;
  background: #0ea5a4; border-radius: 50%;
  animation: cs-bounce-2 1s infinite ease-in-out both;
}
.planner-loading span:nth-child(2) { animation-delay: .15s; }
.planner-loading span:nth-child(3) { animation-delay: .3s; }
.planner-loading p { margin: 12px 0 0; font-size: 13px; }
@keyframes cs-bounce-2 {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40% { transform: scale(1); opacity: 1; }
}

.planner-plan {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 18px 22px; line-height: 1.6; color: #0f172a;
}
.planner-plan h4 { margin: 14px 0 6px; color: #0d9488; }
.planner-plan p { margin: 0 0 10px; }
.planner-plan ul { margin: 6px 0 12px; padding-left: 22px; }
.planner-plan a { color: #0d9488; text-decoration: underline; }
.planner-plan a:hover { text-decoration: none; }

.planner-recommendations { margin-top: 22px; }
.planner-recommendations-title {
  font-size: 18px; margin: 0 0 12px; color: #0f172a;
}
.planner-recommendation-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 860px) { .planner-recommendation-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .planner-recommendation-grid { grid-template-columns: 1fr; } }

.planner-rec-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden;
  text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s;
}
.planner-rec-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(2,23,42,.08); }
.planner-rec-img {
  aspect-ratio: 16/10; background: #e2e8f0 center/cover no-repeat;
}
.planner-rec-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.planner-rec-title { font-weight: 700; color: #0f172a; font-size: 15px; }
.planner-rec-loc { font-size: 12px; color: #64748b; }
.planner-rec-meta { font-size: 12px; color: #475569; }
.planner-rec-price { margin-top: 2px; font-weight: 700; color: #0d9488; font-size: 14px; }
.planner-rec-why { margin-top: 8px; font-size: 12.5px; color: #475569; font-style: italic; line-height: 1.45; }