/* ============================================
   REUSABLE CARD COMPONENTS
   Hotel, Flight, Activity cards
   ============================================ */

/* Image fallback — city name + flag shown when hero image is missing or broken */
.gi-img-fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:linear-gradient(145deg,#0f3460 0%,#1a2a4a 100%);z-index:0;pointer-events:none}
.gi-img-fb-flag{font-size:34px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.gi-img-fb-city{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.gi-card-img img,.gi-featured-img img,.gs-related-img-wrap img,.sr-guide-img-wrap img{position:relative;z-index:1}

/* Hotel Card */
.htl-card { display: flex; flex-direction: column; height: 100%; border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; text-decoration: none; color: inherit; transition: transform 0.3s ease, box-shadow 0.3s; }
.htl-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.htl-card-img { position: relative; overflow: hidden; }
.htl-card-img img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.5s ease; }
.htl-card:hover .htl-card-img img { transform: scale(1.05); }
.htl-badge-save { position: absolute; top: 10px; left: 10px; background: #e94560; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.htl-badge-source { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; backdrop-filter: blur(4px); }
.htl-badge-type { position: absolute; bottom: 10px; left: 10px; background: rgba(15,52,96,0.85); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; backdrop-filter: blur(4px); letter-spacing: .03em; }
.htl-card-body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.htl-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.htl-stars { color: #f59e0b; font-size: 12px; letter-spacing: 1px; }
.htl-score { background: #0f3460; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.htl-name { font-size: 15px; font-weight: 600; line-height: 1.3; margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.htl-city { font-size: 12px; color: #9ca3af; }
.htl-amenities { display: flex; gap: 6px; margin-top: 8px; }
.htl-amenities span { font-size: 11px; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 4px; }
.htl-price-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 10px; border-top: 1px solid #f3f4f6; }
.htl-price-old { font-size: 12px; color: #9ca3af; text-decoration: line-through; margin-right: 4px; }
.htl-price { font-size: 20px; font-weight: 800; color: #111; }
.htl-per { font-size: 12px; color: #9ca3af; }
.htl-cta { font-size: 13px; font-weight: 600; color: #e94560; }

/* Flight Card */
.flt-card { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; transition: box-shadow 0.2s; }
.flt-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.flt-route { display: flex; align-items: center; gap: 12px; flex: 1; }
.flt-code { font-size: 20px; font-weight: 800; color: #111; display: block; }
.flt-name { font-size: 12px; color: #9ca3af; display: block; }
.flt-arrow { text-align: center; color: #9ca3af; font-size: 18px; }
.flt-direct { display: block; font-size: 10px; color: #10b981; font-weight: 600; }
.flt-details { font-size: 12px; color: #6b7280; }
.flt-price-col { text-align: right; }
.flt-price { font-size: 22px; font-weight: 800; color: #111; display: block; }
.flt-cta { font-size: 13px; font-weight: 600; color: #e94560; text-decoration: none; }

/* Activity Card */
.act-card { display: flex; flex-direction: column; height: 100%; border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; text-decoration: none; color: inherit; transition: transform 0.3s ease, box-shadow 0.3s; }
.act-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.act-card-img { position: relative; overflow: hidden; }
.act-card-img img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 0.5s ease; }
.act-card:hover .act-card-img img { transform: scale(1.05); }
.act-badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.6); color: #fff; font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 4px; backdrop-filter: blur(4px); text-transform: uppercase; letter-spacing: 0.5px; }
.act-card-body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.act-name { font-size: 14px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.act-meta { font-size: 12px; color: #9ca3af; display: flex; gap: 4px; }
.act-price-row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 10px; border-top: 1px solid #f3f4f6; }
.act-price { font-size: 17px; font-weight: 800; color: #111; }
.act-cta { font-size: 12px; font-weight: 600; color: #e94560; }

/* Restaurant Card */
.rst-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; text-decoration: none; color: inherit; transition: transform 0.3s ease, box-shadow 0.3s; height: 100%; }
.rst-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.rst-card-img { position: relative; overflow: hidden; flex-shrink: 0; }
.rst-card-img img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.5s ease; }
.rst-card:hover .rst-card-img img { transform: scale(1.05); }
.rst-card-placeholder { width: 100%; height: 200px; display: flex; align-items: center; justify-content: center; }
.rst-card-placeholder span { font-size: 52px; opacity: 0.9; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2)); }
.rst-img-attr { position: absolute; bottom: 6px; right: 6px; font-size: 9px; color: rgba(255,255,255,0.6); background: rgba(0,0,0,0.4); padding: 2px 6px; border-radius: 3px; pointer-events: none; }
.rst-badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.6); color: #fff; font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 4px; backdrop-filter: blur(4px); }
.rst-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.rst-name { font-size: 15px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #1a1a2e; }
.rst-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.rst-rating { font-size: 13px; font-weight: 700; color: #f59e0b; }
.rst-reviews { font-size: 12px; color: #9ca3af; }
.rst-cuisine { font-size: 12px; color: #6b7280; background: #f9fafb; border: 1px solid #f3f4f6; padding: 2px 8px; border-radius: 20px; display: inline-block; margin-bottom: 8px; }
.rst-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid #f9fafb; }
.rst-price { font-size: 14px; font-weight: 700; color: #1a1a2e; }
.rst-price small { font-size: 11px; font-weight: 400; color: #9ca3af; }
.rst-cta { font-size: 12px; font-weight: 700; color: #991b1b; white-space: nowrap; }

/* Car Rental Card */
.car-card { display: block; border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; text-decoration: none; color: inherit; transition: transform 0.3s ease, box-shadow 0.3s; }
.car-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.car-card-img { position: relative; overflow: hidden; }
.car-card-img img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 0.5s ease; }
.car-card:hover .car-card-img img { transform: scale(1.05); }
.car-badge-type { position: absolute; top: 10px; left: 10px; background: #0f3460; color: #fff; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.car-badge-provider { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 4px; backdrop-filter: blur(4px); }
.car-card-body { padding: 14px; }
.car-name { font-size: 15px; font-weight: 600; line-height: 1.3; margin-bottom: 2px; }
.car-city { font-size: 12px; color: #9ca3af; margin-bottom: 8px; }
.car-features { display: flex; gap: 6px; flex-wrap: wrap; }
.car-features span { font-size: 11px; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 4px; }
.car-price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f3f4f6; }
.car-price { font-size: 18px; font-weight: 800; color: #111; }
.car-price small { font-size: 12px; font-weight: 400; color: #9ca3af; }
.car-cta { font-size: 12px; font-weight: 600; color: #e94560; }

/* Transport Card */
.trn-card { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; text-decoration: none; color: inherit; transition: box-shadow 0.2s; }
.trn-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.trn-type { display: flex; flex-direction: column; align-items: center; min-width: 60px; }
.trn-icon { font-size: 24px; }
.trn-type-label { font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.trn-route { display: flex; align-items: center; gap: 12px; flex: 1; }
.trn-city-name { font-size: 16px; font-weight: 700; color: #111; white-space: nowrap; }
.trn-arrow { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 60px; }
.trn-line { display: block; width: 100%; height: 1px; background: #d1d5db; }
.trn-arrow-head { font-size: 14px; color: #9ca3af; margin-top: -8px; }
.trn-duration { font-size: 11px; color: #10b981; font-weight: 600; margin-top: 2px; }
.trn-details { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.trn-operator { font-size: 12px; color: #6b7280; }
.trn-class { font-size: 11px; color: #9ca3af; text-transform: capitalize; }
.trn-price-col { text-align: right; min-width: 80px; }
.trn-price { font-size: 20px; font-weight: 800; color: #111; display: block; }
.trn-cta { font-size: 13px; font-weight: 600; color: #e94560; }

/* ============================================
   RESPONSIVE — Tablet (769px–1024px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Hotel cards in a 2-col grid on tablet */
  .htl-card-img img { height: 180px; }
  /* Activity / restaurant cards */
  .act-card-img img { height: 160px; }
  .rst-card-img img { height: 200px; }
}

/* ============================================
   RESPONSIVE — Mobile (<=768px)
   ============================================ */
@media (max-width: 768px) {
  /* Hotel card: full width, slightly shorter image */
  .htl-card { width: 100%; }
  .htl-card-img img { height: 180px; }
  .htl-price { font-size: 18px; }

  /* Activity card */
  .act-card { width: 100%; }
  .act-card-img img { height: 160px; }

  /* Restaurant card */
  .rst-card { width: 100%; }
  .rst-card-img img { height: 180px; }

  /* Car rental card */
  .car-card { width: 100%; }
  .car-card-img img { height: 160px; }

  /* Flight card: stack on mobile */
  .flt-card { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .flt-route { min-width: 100%; order: 1; }
  .flt-details { order: 2; flex: 1; }
  .flt-price-col { order: 3; margin-left: auto; text-align: right; }
  .flt-code { font-size: 18px; }
  .flt-price { font-size: 20px; }

  /* Transport card: stack on mobile */
  .trn-card { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .trn-route { min-width: 100%; order: 1; }
  .trn-details { min-width: auto; order: 2; flex: 1; }
  .trn-price-col { order: 3; margin-left: auto; }
  .trn-city-name { font-size: 14px; }
}

/* ============================================
   RESPONSIVE — Small Mobile (<=480px)
   ============================================ */
@media (max-width: 480px) {
  .htl-card-img img { height: 160px; }
  .htl-price { font-size: 16px; }
  .htl-name { font-size: 14px; }

  .act-card-img img,
  .car-card-img img { height: 140px; }
  .rst-card-img img { height: 160px; }

  .flt-code { font-size: 16px; }
  .flt-price { font-size: 18px; }

  /* Minimal amenity tags: wrap nicely */
  .htl-amenities { flex-wrap: wrap; gap: 4px; }
  .htl-amenities span { font-size: 10px; padding: 2px 6px; }

  .car-features { flex-wrap: wrap; gap: 4px; }
  .car-features span { font-size: 10px; padding: 2px 6px; }
}

/* === A1: Best price trust strip === */
.htl-trust-strip {
  font-size: 11px;
  color: #6b7280;
  border-top: 1px solid #f3f4f6;
  padding: 4px 12px;
  line-height: 1.4;
}

/* === A6: Social proof saved count === */
.htl-social-proof {
  font-size: 11px;
  color: #9ca3af;
  padding: 4px 12px 8px;
  line-height: 1;
}

/* ============================================
   GUIDE TYPE BADGE COLORS
   Replaces inline style="background:..." on
   .guide-type-badge, .gs-badge, .gs-related-badge,
   .guide-type-dot, .cy-guide-dot
   ============================================ */
.guide-badge--itinerary   { background: #1a3c6e; }
.guide-badge--food        { background: #dc2626; }
.guide-badge--budget      { background: #008009; }
.guide-badge--first_timer { background: #7c3aed; }
.guide-badge--hidden_gems { background: #d97706; }
.guide-badge--family      { background: #2563eb; }
.guide-badge--nightlife   { background: #9333ea; }
.guide-badge--culture     { background: #0891b2; }
.guide-badge--adventure   { background: #ea580c; }