
.recommendation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 20px;
  margin-top: 24px;
}

.premium-card {
  background: white;
  border-radius: 22px;
  padding: 22px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 28px rgba(0,0,0,0.05);
  transition: all .25s ease;
}

.premium-card:hover {
  transform: translateY(-4px);
}

.premium-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  background:#2563eb;
  color:white;
  font-weight:700;
  text-decoration:none;
  margin-top:14px;
}

.travel-gear-section {
  margin-top:40px;
}

.travel-gear-title {
  font-size:1.6rem;
  font-weight:900;
  margin-bottom:20px;
}

/* ── Traveliya Premium Upgrade — v3 ────────────────────────────────────────── */

/* Mobile menu transition */
#mobileMenuPanel {
  transition: all 0.2s ease;
}

/* Inline affiliate links inside plan text */
a.traveliya-inline-affiliate, a.traveliya-aff-link {
  color: #004aad;
  text-decoration: underline;
  font-weight: 600;
  text-underline-offset: 3px;
  transition: color 0.15s;
  cursor: pointer;
}
a.traveliya-inline-affiliate:hover, a.traveliya-aff-link:hover {
  color: #ff7a00;
}

/* Affiliate card grid improvements */
#affiliateCards, #chatAffiliateCards, #fcwAffiliateCards {
  gap: 1rem;
}

/* Smart recs + gear inside plan */
#smartRecsSection article, #travelGearSection article {
  transition: box-shadow 0.2s, transform 0.2s;
}
#smartRecsSection article:hover, #travelGearSection article:hover {
  box-shadow: 0 8px 32px rgba(0,74,173,0.12);
  transform: translateY(-2px);
}

/* Gear card Amazon button */
.gear-card-item a[data-affiliate-url] {
  background: linear-gradient(135deg, #ff9900, #ff7700);
  color: #111;
  font-weight: 800;
  border-radius: 10px;
  padding: 0.6rem 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: opacity 0.2s;
}
.gear-card-item a[data-affiliate-url]:hover { opacity: 0.85; }

/* Currency indicator */
#currencyIndicator {
  cursor: default;
}

/* Language dropdown */
.lang-dropdown {
  min-width: 180px;
}

/* Premium section divider */
#preview .rounded-\[2rem\] > section {
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
  margin-top: 2rem;
}

/* Loader improvements */
#plannerLoader .animate-spin {
  border-color: #dbeafe;
  border-top-color: #004aad;
}

/* Mobile responsive plan sections */
@media (max-width: 640px) {
  #fullPlanSections { grid-template-columns: 1fr !important; }
  #affiliateCards { grid-template-columns: 1fr 1fr !important; }
  #smartRecsSection > div > div { grid-template-columns: 1fr 1fr !important; }
  #travelGearSection > div > div { grid-template-columns: 1fr 1fr !important; }
}

/* Affiliate card CTA button hover */
[data-affiliate-url] {
  cursor: pointer;
}


/* ── Mobile-first trip detail fixes ──────────────────────────────────────── */

/* Prevent any horizontal overflow on mobile */
#fullPlanSections,
#fullPlanPreview,
#affiliatePreview,
#scenicPreview,
#travelGearSection,
#smartRecsSection,
#staticGearSection {
  max-width: 100%;
  overflow-x: hidden;
}

/* Plan section card — word wrap on mobile */
.plan-section-card,
.plan-section-card * {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Gear cards grid — mobile-first */
#staticGearSection > div,
.gear-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 45%), 1fr));
  gap: 1rem;
}

/* Smart recs section — mobile grid */
#smartRecsSection > div > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 45%), 1fr));
  gap: 1rem;
}

/* Affiliate cards — mobile-first override */
#affiliateCards {
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 45%), 1fr)) !important;
}

/* Trip detail hero copy — prevent font overflow */
.trip-detail-hero-copy > p:last-child {
  font-size: clamp(0.85rem, 2.5vw, 1rem);
}

/* trip detail pills — min 2 per row always */
.trip-detail-pill-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 45%), 1fr));
}

/* plan-points li — prevent number badge from shrinking text */
.plan-points li {
  gap: 0.5rem;
}

.plan-points li p {
  font-size: clamp(0.8rem, 2.5vw, 1rem);
  line-height: 1.55;
}

/* Gear card Amazon button full width on mobile */
@media (max-width: 480px) {
  .gear-card-item a[data-affiliate-url],
  .gear-card a[data-affiliate-url] {
    width: 100%;
    justify-content: center;
  }
  .affiliate-card a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .trip-detail-hero {
    padding: 1rem;
  }
  .trip-detail-note {
    font-size: 0.85rem;
  }
  #staticGearSection h3 {
    font-size: 1.1rem !important;
  }
}
