/* ==========================================
   CATTLEMANIA WISHLIST SYSTEM
   Shared Dark Theme
========================================== */

/* ================= PAGE HEADER ================= */

.page-header {
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.25),
    rgba(15, 23, 42, 0.92) 45%,
    rgba(220, 38, 38, 0.2)
  );

  border: 1px solid rgba(37, 99, 235, 0.25);

  border-radius: 22px;

  padding: 28px;

  margin-bottom: 24px;

  backdrop-filter: blur(12px);
}

.page-header h1 {
  color: #ffffff;

  font-size: 34px;

  margin-bottom: 10px;
}

.page-header p {
  color: #94a3b8;
}

/* ================= INFO BOX ================= */

.info-box {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin-bottom: 25px;
}
.info-box p {
  background: linear-gradient(
    145deg,
    rgba(15, 24, 53, 0.95),
    rgba(30, 41, 59, 0.85)
  );

  border: 1px solid rgba(37, 99, 235, 0.18);

  padding: 18px;

  border-radius: 18px;

  color: #cbd5e1;

  transition: 0.25s;
}

.info-box p:hover {
  transform: translateY(-3px);

  border-color: #dc2626;

  box-shadow: 0 10px 25px rgba(220, 38, 38, 0.18);
}

/* ================= WISHLIST GRID ================= */

.cattle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 30px;
  width: 30%;
}
.card {
  width: 100%;
  min-width: 0;
  background: linear-gradient(
    145deg,
    rgba(15, 23, 42, 0.98),
    rgba(15, 24, 53, 0.96)
  );

  border: 1px solid rgba(37, 99, 235, 0.2);

  border-radius: 22px;

  padding: 30px;
}

.card p:first-of-type strong {
  font-size: 24px;

  color: #fff;
}
.card:hover {
  transform: translateY(-5px);

  border-color: #dc2626;

  box-shadow:
    0 18px 35px rgba(37, 99, 235, 0.2),
    0 10px 25px rgba(220, 38, 38, 0.15);
}

/* ================= SECTION TITLES ================= */

.section-title {
  color: #64748b;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-top: 18px;

  margin-bottom: 12px;

  padding-bottom: 8px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ================= TEXT ================= */

.card p {
  color: #d1d5db;

  font-size: 14px;

  line-height: 1.5;

  margin-bottom: 8px;
}

.card strong {
  color: white;
}

/* ================= BUTTONS ================= */

.actions {
  display: flex;

  gap: 12px;

  margin-top: 20px;
}

.btn {
  flex: 1;

  padding: 13px;

  border-radius: 14px;

  text-align: center;

  text-decoration: none;

  font-weight: 600;

  font-size: 13px;

  transition: 0.2s;
}

.btn-red {
  background: linear-gradient(135deg, #dc2626, #991b1b);

  color: white;
}

.btn-red:hover {
  transform: translateY(-2px);
}

.btn-blue {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);

  color: white;
}

.btn-blue:hover {
  transform: translateY(-2px);
}

/* ================= TRENDING ================= */

.trending-cattle {
  padding: 14px 0;
}

.trending-cattle strong {
  color: white;
}

.trending-cattle p {
  color: #cbd5e1;

  margin-bottom: 6px;
}

.card hr {
  border: none;

  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ================= ACTIVITY ================= */

.wishlist-activity {
  padding: 14px 0;
}

.wishlist-activity p {
  color: #cbd5e1;
}

/* ================= EMPTY STATE ================= */

.wishlist-empty {
  background: #0f1835;

  border-radius: 22px;

  border: 1px solid rgba(255, 255, 255, 0.06);

  padding: 40px;

  text-align: center;
}

.wishlist-empty h2 {
  color: white;

  margin-bottom: 10px;
}

.wishlist-empty p {
  color: #94a3b8;
}

/* ================= MOBILE ================= */

@media (max-width: 900px) {
  .info-box {
    grid-template-columns: 1fr;
  }

  .cattle-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .page-header {
    padding: 22px;
  }

  .page-header h1 {
    font-size: 28px;
  }

  .card {
    padding: 20px;
  }
}
.section-title {
  color: #60a5fa;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 1px;

  margin-top: 18px;

  margin-bottom: 12px;

  padding-bottom: 8px;

  border-bottom: 1px solid rgba(220, 38, 38, 0.25);
}

.trending-cattle {
  padding: 14px;

  border-left: 3px solid #dc2626;

  margin-bottom: 12px;

  background: rgba(37, 99, 235, 0.08);

  border-radius: 12px;
}
.watch-count {
  margin-top: 12px;
  color: #60a5fa;
  font-weight: 600;
}

.trending-badge {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.trending-cattle strong {
  color: white;
  font-size: 18px;
}
/* ==========================================
   TRENDING CATTLE PAGE LAYOUT
========================================== */

.cattle-grid {
  display: flex;

  flex-direction: column;

  gap: 25px;
}

/* Main widget cards */

.cattle-grid > .card {
  width: 100%;

  max-width: none;
}

/* Trending entries */

.trending-cattle {
  width: 100%;

  padding: 20px;

  margin-bottom: 18px;

  background: rgba(37, 99, 235, 0.08);

  border: 1px solid rgba(37, 99, 235, 0.2);

  border-radius: 18px;
}

/* Make buttons not shrink */

.trending-cattle .btn {
  display: inline-block;

  width: auto;

  padding: 12px 25px;
}

/* Better spacing */

.trending-cattle p {
  margin-bottom: 10px;
}

/* Mobile */

@media (max-width: 900px) {
  .cattle-grid {
    gap: 18px;
  }
}