/**
 * SPRINT 12.13.0 — MARKETPLACE NATIVE EXPERIENCE
 * XEGHEP Marketplace CSS Enhancements
 *
 * EPIC 1-7: Hero Card · Real Images · Trust Layer ·
 * Marketplace Info · Native Motion · Smart Badges · UI Polish
 *
 * Architecture Lock: Presentation Layer Only.
 * No Business Logic, Database, Repository, Controller changes.
 *
 * @package XOS\Presentation
 * @version 12.13.0
 * @since   Sprint 12.13.0
 */

/* ══════════════════════════════════════════════════════════════
     EPIC 1 — HERO LISTING: First card nổi bật 10-15%
    ══════════════════════════════════════════════════════════════ */

.ep12-live-card--hero {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 2px 8px rgba(31,78,140,0.10) !important;
  border: 1.5px solid #67B7FF !important;
  transform: scale(1.02);
  z-index: 1;
  position: relative;
}

.ep12-live-card--hero::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background: linear-gradient(135deg, #2F80ED 0%, #67B7FF 40%, #1F4E8C 100%);
  opacity: 0.06;
  z-index: -1;
  pointer-events: none;
}

.ep12-live-card--hero .ep12-live-media {
  height: 100px;
}

@media (min-width: 768px) {
  .ep12-live-card--hero .ep12-live-media {
    height: 130px;
  }
}

@media (min-width: 1024px) {
  .ep12-live-card--hero .ep12-live-media {
    height: 140px;
  }
}

.ep12-live-card--hero .ep12-live-route {
  font-size: 1.375rem;
  color: #1F4E8C;
}

.ep12-live-card--hero .ep12-live-price-value {
  font-size: 1.5rem;
  color: #15355F;
}

.ep12-live-card--hero .ep12-live-btn-primary {
  background: linear-gradient(135deg, #1F4E8C 0%, #15355F 100%);
  box-shadow: 0 4px 16px rgba(31,78,140,0.30);
  font-weight: 700;
}

.ep12-live-card--hero:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(31,78,140,0.14) !important;
  transform: scale(1.025) translateY(-2px) !important;
}

/* Hero Badges */
.ep12-hero-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.ep12-hero-badge--new {
  background: rgba(239,68,68,0.95);
  color: #ffffff;
  animation: xg-badge-pulse 2s ease-in-out infinite;
}

.ep12-hero-badge--vip {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #ffffff;
}

.ep12-hero-badge--nearby {
  background: rgba(16,185,129,0.95);
  color: #ffffff;
}

.ep12-hero-badge--featured {
  background: linear-gradient(135deg, #1F4E8C 0%, #2F80ED 100%);
  color: #ffffff;
}

@keyframes xg-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ══════════════════════════════════════════════════════════════
     EPIC 2 — REAL VEHICLE IMAGES: Image priority system
    ══════════════════════════════════════════════════════════════ */

.ep12-live-img {
  transition: opacity 180ms ease, transform 180ms ease;
  opacity: 1;
}

.ep12-live-img[loading="lazy"] {
  opacity: 0;
  transform: scale(1.02);
}

.ep12-live-img.ep12-img-loaded {
  opacity: 1;
  transform: scale(1);
}

.ep12-live-card--has-image .ep12-live-media-placeholder {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
     EPIC 3 — TRUST LAYER: Trust signals (max 2-3 per card)
    ══════════════════════════════════════════════════════════════ */

.ep12-trust-signals {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.ep12-trust-signal {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.625rem;
  font-weight: 500;
  color: #64748B;
  white-space: nowrap;
  padding: 1px 6px;
  border-radius: 999px;
  background: #F3F6FA;
}

.ep12-trust-signal--verified {
  background: #E8F5F0;
  color: #0A5828;
  font-weight: 600;
}

.ep12-trust-signal--verified svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: #16A34A;
}

.ep12-trust-signal--rating {
  color: #1F2937;
  font-weight: 600;
}

.ep12-trust-signal--rating svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: #F59E0B;
}

.ep12-trust-signal--online {
  color: #16A34A;
  font-weight: 600;
}

.ep12-trust-signal--online::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16A34A;
  margin-right: 2px;
  box-shadow: 0 0 4px rgba(22,163,74,0.6);
  animation: xg-pulse 2s ease-in-out infinite;
}

.ep12-trust-signal--views {
  color: #64748B;
}

.ep12-trust-signal--matches {
  color: #2F80ED;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
     EPIC 4 — MARKETPLACE INFORMATION: Context-specific display
    ══════════════════════════════════════════════════════════════ */

.ep12-mp-detail-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: #4B5563;
}

.ep12-mp-detail-row svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #9CA3AF;
}

.ep12-mp-detail-value {
  font-weight: 600;
  color: #1F2937;
}

.ep12-mp-detail-highlight {
  color: #1F4E8C;
  font-weight: 700;
}

.ep12-mp-hide {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
     EPIC 5 — NATIVE MOTION: 120-180ms animations
    ══════════════════════════════════════════════════════════════ */

/* Card fade-in animation */
.ep12-live-card {
  animation: xg-card-fade-in 180ms cubic-bezier(0.0, 0, 0.2, 1) both;
}

@keyframes xg-card-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered card entrance */
.ep12-live-card:nth-child(1) { animation-delay: 0ms; }
.ep12-live-card:nth-child(2) { animation-delay: 40ms; }
.ep12-live-card:nth-child(3) { animation-delay: 80ms; }
.ep12-live-card:nth-child(4) { animation-delay: 120ms; }
.ep12-live-card:nth-child(5) { animation-delay: 160ms; }

/* Enhanced skeleton loading */
.ep12-skeleton {
  background: linear-gradient(90deg, #E7EEF7 0%, #EDF2F8 40%, #E7EEF7 70%);
  background-size: 200% 100%;
  animation: xg-skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes xg-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Ripple effect */
[data-ripple] {
  position: relative;
  overflow: hidden;
}

[data-ripple]::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(31,78,140,0.12);
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  top: 50%;
  left: 50%;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  transition: none;
}

[data-ripple]:active::after {
  transform: scale(2.5);
  opacity: 1;
  transition: transform 400ms cubic-bezier(0.4,0,1.0,1), opacity 400ms cubic-bezier(0.4,0,1.0,1);
}

/* Pull To Refresh indicator */
.ep12-ptr-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: #64748B;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
  transform: translateY(-20px);
}

.ep12-ptr-indicator.ep12-ptr-active {
  opacity: 1;
  transform: translateY(0);
}

.ep12-ptr-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #E7EEF7;
  border-top-color: #1F4E8C;
  border-radius: 50%;
  animation: ep12-spin 0.7s linear infinite;
  margin-right: 8px;
}

/* Scroll reveal */
.ep12-scroll-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.ep12-scroll-reveal.ep12-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════
     EPIC 6 — SMART MARKETPLACE: Auto badges
    ══════════════════════════════════════════════════════════════ */

.ep12-smart-badges {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.ep12-smart-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  line-height: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.ep12-smart-badge--new {
  background: rgba(239,68,68,0.92);
  color: #ffffff;
  animation: xg-badge-pulse 2s ease-in-out infinite;
}

.ep12-smart-badge--featured {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #ffffff;
}

.ep12-smart-badge--nearby {
  background: rgba(16,185,129,0.92);
  color: #ffffff;
}

.ep12-smart-badge--vip {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  color: #ffffff;
}

/* ══════════════════════════════════════════════════════════════
     EPIC 7 — UI POLISH: 8px grid, soft shadows, consistent
    ══════════════════════════════════════════════════════════════ */

/* Soft gradient backgrounds */
.ep12-live-media {
  background: linear-gradient(135deg, #F3F6FA 0%, #EDF2F8 40%, #E7EEF7 100%);
}

.ep12-live-media-illustration {
  background: linear-gradient(135deg, #EDF2F8 0%, #E7EEF7 50%, #D4DFEC 100%);
}

/* Consistent border-radius */
.ep12-live-card {
  border-radius: 18px;
}

.ep12-live-media {
  border-radius: 18px 18px 0 0;
}

.ep12-live-btn {
  border-radius: 12px;
}

.ep12-smart-badge,
.ep12-hero-badge,
.ep12-trust-signal {
  border-radius: 999px;
}

/* Typography consistency */
.ep12-live-route {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ep12-live-price-value {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Action bar polish */
.ep12-live-actions {
  border-top: 1px solid rgba(231,238,247,0.6);
  padding: 6px 10px 8px;
}

.ep12-live-btn {
  transition: all 120ms ease;
  font-weight: 600;
}

/* Enhanced listing type badge */
.ep12-live-listing-badge {
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  transition: transform 120ms ease;
}

.ep12-live-card:hover .ep12-live-listing-badge {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.14);
}

/* Clean status badge */
.ep12-trip-status-badge {
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  font-weight: 700;
}

/* ─── RESPONSIVE: iPhone SE (320-374px) ─── */
@media (max-width: 374px) {
  .ep12-live-card--hero .ep12-live-media {
    height: 85px;
  }
  .ep12-live-media {
    height: 75px;
  }
  .ep12-live-route {
    font-size: 1.125rem;
  }
  .ep12-live-price-value {
    font-size: 1.125rem;
  }
}

/* ─── RESPONSIVE: Standard Android/iPhone (375-767px) ─── */
@media (min-width: 375px) and (max-width: 767px) {
  .ep12-live-card--hero .ep12-live-media {
    height: 95px;
  }
  .ep12-live-media {
    height: 80px;
  }
}

/* ─── RESPONSIVE: Large phones (414-767px) ─── */
@media (min-width: 414px) and (max-width: 767px) {
  .ep12-live-card--hero .ep12-live-media {
    height: 105px;
  }
}

/* ─── Hover states for desktop ─── */
@media (hover: hover) and (pointer: fine) {
  .ep12-live-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.07), 0 3px 10px rgba(0,0,0,0.04);
    transform: translateY(-2px);
  }
  .ep12-live-card--hero:hover {
    box-shadow: 0 10px 36px rgba(0,0,0,0.10), 0 4px 14px rgba(31,78,140,0.14);
    transform: scale(1.03) translateY(-2px);
  }
}

/* ─── Touch/active states ─── */
@media (hover: none) and (pointer: coarse) {
  .ep12-live-card:active {
    transform: scale(0.98);
    transition: transform 120ms ease;
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .ep12-live-card {
    animation: none;
  }
  [data-ripple]::after {
    animation: none;
    transition: none;
  }
  .ep12-smart-badge--new {
    animation: none;
  }
}