/* TravelMindsAI blog conversion widgets — mid-article CTA + sticky pill.
   Anchored to website/public/shared.css tokens (deep blue + coral + mint).
   Loaded by every blog post. */

.mid-cta {
  margin: 36px 0;
  padding: 28px 32px;
  background: var(--surface, #161d44);
  border: 1px solid rgba(108, 229, 211, 0.18);
  border-radius: var(--radius, 14px);
}
.mid-cta .eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-2, #6ce5d3);
  margin-bottom: 10px;
}
.mid-cta h3 {
  margin: 0 0 8px 0;
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--text, #e6e8f5);
}
.mid-cta p {
  margin: 0 0 16px 0;
  color: var(--muted, #98a0c4);
  font-size: 0.95rem;
}
.mid-cta .btn-primary {
  display: inline-block;
  padding: 11px 22px;
  background: var(--accent, #ff6f5e);
  color: #1a0f0c;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}
.mid-cta .btn-primary:hover { filter: brightness(1.08); color: #1a0f0c; }

/* Sticky pill — floating bottom-right on desktop, bottom-bar on mobile. */
.tmai-stuck {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  background: var(--accent, #ff6f5e);
  color: #1a0f0c;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  border: none;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  transition: filter 0.15s, transform 0.15s;
}
.tmai-stuck:hover { filter: brightness(1.08); transform: translateY(-1px); }
.tmai-stuck[hidden] { display: none; }

.tmai-stuck-card {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 101;
  width: 320px;
  background: var(--surface-2, #1c2452);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius, 14px);
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
.tmai-stuck-card[hidden] { display: none; }
.tmai-stuck-card .close {
  position: absolute; top: 6px; right: 10px;
  background: none; border: 0; color: var(--muted, #98a0c4);
  font-size: 18px; cursor: pointer; line-height: 1;
}
.tmai-stuck-card .close:hover { color: var(--text, #e6e8f5); }
.tmai-stuck-card h4 {
  margin: 0 0 6px; font-size: 0.95rem; color: var(--text, #e6e8f5);
}
.tmai-stuck-card p {
  margin: 0 0 10px; font-size: 0.8rem; color: var(--muted, #98a0c4);
}
.tmai-stuck-card input {
  width: 100%; padding: 8px 10px; margin-bottom: 8px;
  background: var(--bg-2, #11173a);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 8px;
  color: var(--text, #e6e8f5); font: 13px/1.4 ui-monospace, SFMono-Regular, "JetBrains Mono", monospace;
}
.tmai-stuck-card input:focus { outline: none; border-color: var(--accent-2, #6ce5d3); }
.tmai-stuck-card .row {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
}
.tmai-stuck-card .row .btn-primary {
  padding: 7px 14px; background: var(--accent, #ff6f5e); color: #1a0f0c;
  border: 0; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.tmai-stuck-card .row a {
  color: var(--accent-2, #6ce5d3); font-size: 0.8rem; text-decoration: none;
}
.tmai-stuck-card .row a:hover { color: var(--accent, #ff6f5e); }
.tmai-stuck-card .resp {
  margin-top: 10px; padding: 10px; max-height: 180px; overflow-y: auto;
  background: var(--bg-2, #11173a); border-radius: 8px;
  font-size: 0.8rem; line-height: 1.45; color: var(--text, #e6e8f5);
  display: none;
}
.tmai-stuck-card .resp.visible { display: block; }
.tmai-stuck-card .resp.err { color: var(--accent, #ff6f5e); }

/* Mobile: collapse to bottom bar on narrow screens. */
@media (max-width: 480px) {
  .tmai-stuck { bottom: 10px; right: 10px; left: 10px; border-radius: 12px; text-align: center; }
  .tmai-stuck-card { left: 10px; right: 10px; bottom: 10px; width: auto; }
}
@media (max-width: 380px) {
  /* Very narrow — hide stickly entirely so we don't crowd content. */
  .tmai-stuck, .tmai-stuck-card { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tmai-stuck { transition: none; }
}