/* ==========================================
🔥 ITSSOSO — CARD SYSTEM (ELITE FINAL)
Handles:
✅ Marketplace cards
✅ Event intelligence cards
✅ Activity cards
✅ Favorites
✅ Messaging buttons
✅ Sponsored / Featured
✅ Skeleton loaders
✅ Responsive mobile
========================================== */

/* =========================
CARD BASE
========================= */

.itssoso-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 18px;
  overflow: hidden;
  position: relative;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;

  will-change: transform;
}

.itssoso-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  border-color: #ddd;
}

/* Featured */
.itssoso-card.featured {
  border: 2px solid #111;
  box-shadow: 0 20px 50px rgba(0,0,0,.14);
}

/* Sponsored */
.itssoso-card.sponsored {
  border: 2px solid #ffb300;
}

/* Event card */
.event-card {
  border-color: #e7eefc;
}

/* Marketplace */
.marketplace {
  border-color: #f0f0f0;
}

/* Activity */
.activity-card {
  border-color: #ece8ff;
}

/* =========================
IMAGE
========================= */

.card-image {
  position: relative;
  width: 100%;
  height: 210px;
  background: #f4f4f4;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition:
    transform .45s ease,
    opacity .25s ease;
}

.itssoso-card:hover .card-image img {
  transform: scale(1.06);
}

.card-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    to top,
    rgba(0,0,0,.28),
    rgba(0,0,0,.08),
    transparent
  );
}

/* =========================
BODY
========================= */

.card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 16px;
  flex: 1;
}

/* =========================
TITLE
========================= */

.card-title {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  color: #111;
  margin: 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-link,
.card-link:hover {
  color: inherit;
  text-decoration: none;
}

/* Description */
.card-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.45;
  margin: 0;
}

/* =========================
META
========================= */

.card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.card-meta,
.card-distance {
  font-size: 12px;
  color: #6d6d6d;
}

.card-distance {
  font-weight: 600;
}

.card-rating {
  font-size: 12px;
  font-weight: 700;
  color: #111;
}

.card-trust {
  font-size: 12px;
  font-weight: 700;
  color: #1e7d32;
}

/* =========================
BADGES
========================= */

.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  padding: 5px 9px;
  border-radius: 999px;

  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
}

.badge.trending { background: #ff5a00; }
.badge.new { background: #25a244; }
.badge.featured { background: #111; }
.badge.sponsored { background: #8b5cf6; }
.badge.hot { background: #ef4444; }
.badge.flash { background: #f59e0b; }
.badge.drop { background: #059669; }
.badge.trust { background: #0f766e; }

/* Subscription plans */
.badge.plan-pro { background:#2563eb; }
.badge.plan-gold { background:#ca8a04; }
.badge.plan-partner { background:#7c3aed; }

/* =========================
🔥 EVENT STATUS BADGES
========================= */

.badge.event-status {
  font-size: 11px;
  padding: 6px 10px;
}

.badge.event-status.live {
  background: #dc2626;
}

.badge.event-status.today {
  background: #d97706;
}

.badge.event-status.tomorrow {
  background: #2563eb;
}

.badge.event-status.weekend {
  background: #7c3aed;
}

.badge.event-status.upcoming {
  background: #15803d;
}

.badge.event-status.ended {
  background: #6b7280;
}

/* =========================
PRICE
========================= */

.itssoso-price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.itssoso-price .old {
  font-size: 13px;
  color: #999;
  text-decoration: line-through;
}

.itssoso-price .current {
  font-size: 18px;
  font-weight: 800;
  color: #111;
}

/* =========================
CHIPS
========================= */

.itssoso-chip {
  font-size: 11px;
  font-weight: 700;
  color: #333;
  background: #f2f2f2;
  padding: 5px 8px;
  border-radius: 999px;
}

/* =========================
ACTIONS
========================= */

.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  padding: 0 14px 14px;
}

/* Generic buttons */
.itssoso-btn,
.activity-btn,
.favorite-btn {
  border: none;
  outline: none;
  cursor: pointer;

  transition:
    transform .18s ease,
    background .18s ease,
    color .18s ease;
}

/* Message button */
.itssoso-btn {
  background: #f3f4f6;
  color: #111;
  font-size: 12px;
  font-weight: 700;

  padding: 8px 12px;
  border-radius: 10px;
}

.itssoso-btn:hover {
  background: #e5e7eb;
  transform: translateY(-1px);
}

/* Favorite */
.favorite-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;

  background: #f8f8f8;
  color: #777;
  font-size: 18px;
}

.favorite-btn:hover {
  background: #ffe8e8;
  color: #d11a1a;
}

.favorite-btn.active {
  background: #ffe8e8;
  color: #d11a1a;
}

/* Activity button */
.activity-btn {
  background: #f5f5f5;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
}

.like-btn.liked {
  background: #ffe5e5;
  color: #d60000;
}

/* =========================
SPONSORED SLOT
========================= */

.sponsored-slot {
  border: 2px dashed #d5d5d5;
  background: #fafafa;
  text-align: center;
  justify-content: center;
}

.sponsored-slot .card-body {
  align-items: center;
}

.upgrade-btn {
  background: #111;
  color: #fff;
  margin-top: 10px;
}

.upgrade-btn:hover {
  background: #333;
}

/* =========================
FADE IN
========================= */

.fade-ready {
  opacity: 0;
  transform: translateY(10px);
  animation: itssosoFadeUp .45s ease forwards;
}

@keyframes itssosoFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
SKELETON
========================= */

.itssoso-skeleton {
  pointer-events: none;
}

@keyframes itssosoShimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-box,
.skeleton-line {
  background: linear-gradient(
    90deg,
    #f1f1f1 25%,
    #e7e7e7 37%,
    #f1f1f1 63%
  );

  background-size: 400% 100%;
  animation: itssosoShimmer 1.3s ease infinite;
  border-radius: 10px;
}

.skeleton-box {
  width: 100%;
  height: 210px;
}

.skeleton-line {
  height: 12px;
  margin-top: 10px;
}

.skeleton-title {
  width: 72%;
  height: 14px;
}

.skeleton-subtitle {
  width: 52%;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 1024px) {

  .card-image,
  .skeleton-box {
    height: 190px;
  }
}

@media (max-width: 768px) {

  .itssoso-card {
    border-radius: 16px;
  }

  .card-image,
  .skeleton-box {
    height: 175px;
  }

  .card-title {
    font-size: 14px;
  }

  .card-actions {
    flex-wrap: wrap;
  }

  .itssoso-btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 480px) {

  .card-image,
  .skeleton-box {
    height: 160px;
  }

  .card-body {
    padding: 12px;
  }

  .card-actions {
    padding: 0 12px 12px;
  }

  .badge {
    font-size: 9px;
    padding: 5px 8px;
  }
}

/* ==================================================
🔥 PREMIUM CARD SYSTEM (ITSSOSO DISCOVERY)
================================================== */

/* =========================================
CARD BASE
========================================= */

.itssoso-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.itssoso-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.10);
}

/* =========================================
IMAGE SYSTEM
========================================= */

.card-image {
  position: relative;
  width: 100%;
  height: 190px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.itssoso-card:hover .card-image img {
  transform: scale(1.05);
}

/* 🔥 overlay gradient */
.card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.25)
  );
}

/* =========================================
BADGES
========================================= */

.card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 2;
}

.badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 20px;
  font-weight: 600;
  background: rgba(0,0,0,0.7);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* Individual badge colors */
.badge.trending { background: #ff3b30; }
.badge.new { background: #34c759; }
.badge.featured { background: #007aff; }
.badge.sponsored { background: #ff9500; }
.badge.trust { background: #5856d6; }
.badge.drop { background: #ff3b30; }
.badge.flash { background: #ff9500; }
.badge.hot { background: #ff3b30; }

/* =========================================
CARD BODY
========================================= */

.card-body {
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* =========================================
TITLE
========================================= */

.card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: #111;
}

/* =========================================
DESCRIPTION (optional)
========================================= */

.card-desc {
  font-size: 13px;
  color: #555;
  line-height: 1.4;
}

/* =========================================
META ROW
========================================= */

.card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #666;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-distance {
  font-size: 12px;
  color: #999;
}

/* =========================================
PRICE (MARKETPLACE)
========================================= */

.itssoso-price {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.itssoso-price .old {
  text-decoration: line-through;
  color: #999;
  font-weight: 500;
}

.itssoso-price .current {
  color: #111;
  font-size: 16px;
}

/* =========================================
ACTIONS
========================================= */

.card-actions {
  display: flex;
  gap: 8px;
  padding: 10px 12px 14px;
}

.itssoso-btn {
  flex: 1;
  height: 38px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Primary CTA */
.view-listing-btn {
  background: #111;
  color: #fff;
}

.view-listing-btn:hover {
  background: #000;
}

/* Message button */
.itssoso-message-btn {
  background: #f1f3f5;
  color: #111;
}

.itssoso-message-btn:hover {
  background: #e5e7eb;
}

/* Favorite */
.favorite-btn {
  background: transparent;
  font-size: 13px;
  border: 1px solid #ddd;
}

.favorite-btn.active {
  color: #e63946;
  border-color: #e63946;
}

/* =========================================
EVENT CARD STATUS
========================================= */

.badge.event-status {
  background: #111;
}

.badge.event-status.live {
  background: #ff3b30;
}

.badge.event-status.today {
  background: #ff9500;
}

.badge.event-status.weekend {
  background: #5856d6;
}

/* =========================================
SKELETONS
========================================= */

.itssoso-skeleton {
  animation: pulse 1.2s infinite;
}

.skeleton-box {
  height: 190px;
  background: #eee;
}

.skeleton-line {
  height: 10px;
  background: #eee;
  border-radius: 6px;
}

.skeleton-title {
  width: 70%;
  margin-bottom: 6px;
}

.skeleton-subtitle {
  width: 50%;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* =========================================
FADE-IN ANIMATION
========================================= */

.fade-ready {
  opacity: 0;
  transform: translateY(10px);
}

.fade-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: all 0.35s ease;
}