/* ===== Perfect Psychic Card Grid ===== */
.psychic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  column-gap: 32px;
  row-gap: 45px;
  justify-content: center;
  align-items: start;
  padding: 30px 0;
}

@media (max-width: 991px) {
  .psychic-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .psychic-grid {
    grid-template-columns: 1fr;
  }
}

.psychic-card {
  position: relative;  /* ✅ add this line */
  width: 100%;
  max-width: 380px;
  min-height: 360px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition: box-shadow .25s ease;
}

/* Removed translateY jump */
.psychic-card:hover {
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

.psychic-card .avatar {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px #fff, 0 2px 8px rgba(0,0,0,0.1);
}

.badge-live {
  position: absolute;
  top: 12px;
  right: 14px;
  background: #e74c3c;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 0 12px rgba(231, 76, 60, 0.6);
}

.psychic-card h2 {
  font-weight: 700;
  font-size: 1.3rem;
  margin: 12px 0 4px;
}

.psychic-card .status {
  font-size: 0.9rem;
  vertical-align: middle;
}

.psychic-card .rating {
  font-size: 16px;
}

.psychic-card .badge-tag {
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  display: inline-block;
  margin: 2px;
}

.badge-tag.purple { background: #8e44ad; }
.badge-tag.blue { background: #3498db; }

.psychic-card .meta {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* === Brand Button === */
.psychic-card .btn-main {
  width: 100%;
  background: #684287;     /* brand purple */
  border-color: #684287;
  color: #fff !important;  /* always white text */
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 0;
  margin-top: 8px;
  box-shadow: 0 4px 14px rgba(104,66,135,0.3);
  transition: all 0.25s ease;
}

.psychic-card .btn-main:hover,
.psychic-card .btn-main:focus {
  background-color: #7a53a0;
  border-color: #7a53a0;
  color: #fff !important;  /* stay white on hover */
  text-decoration: none;
}

/* === Rate below button === */
.psychic-card .rate {
  margin-top: 6px;
  font-size: 14px;
  color: #555;
}

ul.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

ul.pagination li {
  display: inline-block;
}

ul.pagination li a,
ul.pagination li span {
  color: #684287;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px 12px;
  text-decoration: none;
  font-weight: 500;
}

ul.pagination li.active span {
  background-color: #684287;
  color: #fff;
  border-color: #684287;
}

ul.pagination li a:hover {
  background-color: #f2e8ff;
  border-color: #c6a9e2;
  color: #684287;
}

.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.ms-1 { margin-left: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }