/* =========================
   AUCTION CAROUSEL
========================= */

.auction-carousel {
  position: relative;

  max-width: 1200px;

  margin: 50px auto;

  padding: 20px;

  overflow: visible;
}

/* =========================
   TRACK
========================= */

.carousel-track {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 25px;

  transition: transform 0.75s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* =========================
   ARROWS
========================= */

.carousel-arrow {
  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 55px;

  height: 55px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  border: 2px solid rgba(255, 255, 255, 0.15);

  background: #dc2626;

  color: white;

  font-size: 22px;

  font-weight: 900;

  cursor: pointer;

  z-index: 999;

  box-shadow: 0 0 25px rgba(220, 38, 38, 0.45);

  transition: 0.25s ease;
}

.carousel-arrow:hover {
  background: #ef4444;

  transform: translateY(-50%) scale(1.12);
}

.carousel-arrow:active {
  transform: translateY(-50%) scale(0.92);
}

.carousel-arrow.left {
  left: -20px;
}

.carousel-arrow.right {
  right: -20px;
}

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

.auction-slide {
  position: relative;

  width: 280px;

  min-height: 390px;

  padding: 20px;

  border-radius: 22px;

  background: linear-gradient(160deg, #111827, #050816);

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

  color: white;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  transition:
    transform 0.75s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.75s ease,
    filter 0.75s ease,
    box-shadow 0.75s ease;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
}

/* =========================
   SIDE CARDS
========================= */

.side-card {
  transform: scale(0.93);

  opacity: 0.78;

  filter: brightness(0.82);
}

/* =========================
   CENTER FEATURE CARD
========================= */

.active-card {
  width: 350px;

  min-height: 460px;

  transform: scale(1.05);

  opacity: 1;

  z-index: 10;

  border: 2px solid #dc2626;

  background: linear-gradient(160deg, #2b1018, #050816);

  box-shadow:
    0 0 45px rgba(220, 38, 38, 0.45),
    0 30px 70px rgba(0, 0, 0, 0.7);
}

/* =========================
   MOVING STATE
========================= */

.carousel-moving .auction-slide {
  opacity: 0.9;
}

.carousel-moving .active-card {
  transform: scale(1.02);
}

/* =========================
   VISUAL AREA
========================= */

.auction-visual {
  height: 150px;

  margin: -20px -20px 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 75px;

  background: linear-gradient(135deg, #1e293b, #0f172a);
}

.active-card .auction-visual {
  background: linear-gradient(135deg, #7f1d1d, #111827);
}

/* =========================
   TAG
========================= */

.auction-tag {
  display: inline-block;

  width: max-content;

  padding: 5px 12px;

  margin-bottom: 12px;

  border-radius: 20px;

  background: #1e293b;

  color: white;

  font-size: 11px;

  font-weight: 900;
}

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

.auction-slide h2 {
  color: white;

  font-size: 26px;

  font-weight: 900;

  margin-bottom: 10px;
}

.auction-slide p {
  color: white;

  font-size: 14px;

  line-height: 1.6;
}

/* =========================
   FEATURE BADGE
========================= */

.featured-badge {
  position: absolute;

  top: 15px;

  right: 15px;

  padding: 7px 15px;

  border-radius: 20px;

  background: #dc2626;

  color: white;

  font-size: 11px;

  font-weight: 900;

  box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
}

/* =========================
   BUTTON
========================= */

.auction-slide button {
  margin-top: auto;

  width: 100%;

  padding: 12px;

  border-radius: 12px;

  border: none;

  background: linear-gradient(135deg, #1e293b, #0f172a);

  color: white;

  font-weight: 900;

  cursor: pointer;

  transition: 0.25s ease;
}

.auction-slide button:hover {
  background: #dc2626;
}

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

@media (max-width: 900px) {
  .auction-carousel {
    padding: 0 35px;
  }

  .side-card {
    display: none;
  }

  .active-card {
    width: 100%;

    min-height: 420px;

    transform: none;
  }

  .carousel-arrow {
    width: 42px;

    height: 42px;

    font-size: 18px;
  }

  .carousel-arrow.left {
    left: -5px;
  }

  .carousel-arrow.right {
    right: -5px;
  }
}