/*
  MVP Auctions stylesheet

  This file contains all styles used across the MVP Auctions website. Colours,
  spacing and typography are defined using CSS variables for easy
  maintenance. Layouts rely on CSS flexbox and grid to ensure a responsive
  experience on screens of any size. Buttons and cards have been styled to
  convey a premium, trustworthy feeling consistent with an elite auction
  platform.
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Root variables */
:root {
  --primary-color: #0b2545; /* deep navy */
  --secondary-color: #e63946; /* bold red */
  --light-bg: #f7f9fc; /* soft off‑white */
  --dark-bg: #051b34; /* dark background for sections */
  --text-dark: #1f2a44;
  --text-light: #ffffff;
  --muted-text: #7b8aac;
  --border-radius: 0.5rem;
  --transition-speed: 0.2s;
}

/* Global reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* Use a modern sans‑serif font for a premium feel */
  font-family: 'Poppins', sans-serif;
  color: var(--text-dark);
  background-color: var(--light-bg);
  line-height: 1.6;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Utility container */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Navigation */
.navbar {
  /* Use a subtle gradient to elevate the navigation bar */
  background: linear-gradient(90deg, #051b34, #0b2545);
  padding: 0.75rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  height: 48px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  /* Reduced gap so that additional nav items fit on typical screens */
  gap: 1rem;
}

.nav-item {
  color: var(--text-light);
  font-weight: 500;
  transition: color var(--transition-speed);
}

.nav-item:hover,

.nav-item.active {
  color: var(--secondary-color);
  border-bottom: 2px solid var(--secondary-color);
  padding-bottom: 0.25rem;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

.btn-primary {
  background-color: var(--secondary-color);
  color: var(--text-light);
}

.btn-primary:hover {
  background-color: #c32b3a;
}

.btn-secondary {
  background-color: var(--primary-color);
  color: var(--text-light);
}

.btn-secondary:hover {
  background-color: #093862;
}

.btn-tertiary {
  background-color: transparent;
  color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
}

.btn-tertiary:hover {
  background-color: var(--secondary-color);
  color: var(--text-light);
}

/* Hero section */
.hero {
  position: relative;
  height: 80vh;
  min-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Blend a rich gradient over the hero image for depth */
  background: linear-gradient(180deg, rgba(5,27,52,0.85) 0%, rgba(5,27,52,0.95) 100%);
  z-index: -1;
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero-content p {
  max-width: 650px;
  margin: 0 auto 1.5rem;
  font-size: 1.1rem;
  color: #d1d9e0;
}

/* Promotional message on hero (for first‑time sellers) */
.hero-content .promo-text {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--secondary-color);
  max-width: 800px;
  margin: 1rem auto 1.5rem;
}

/* Hero heading replacement when emphasising promotions */
.hero-content .promo-heading {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--secondary-color);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

/* Sections */
.section-light {
  padding: 3rem 0;
  background-color: var(--light-bg);
}

.section-dark {
  padding: 3rem 0;
  background-color: var(--dark-bg);
  color: var(--text-light);
}

.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  font-weight: 700;
}

.section-title-light {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  font-weight: 700;
  color: var(--text-light);
}

/* Trending auctions */
.cards-grid {
  display: grid;
  gap: 1.5rem;
  /* Increase minimum card width to accommodate larger images */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/*
  Auction cards now feature a full‑bleed image with a dark gradient overlay
  containing the title, current bid, countdown and actions. By positioning
  the information container absolutely at the bottom, we achieve a sleek,
  professional look reminiscent of premium marketplaces. The card subtly
  lifts on hover to provide a tactile feel.
*/
.auction-card {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.auction-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* Larger image height to showcase items */
.auction-img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
}

/* Overlay container for text and actions */
.auction-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(0deg, rgba(5, 27, 52, 0.95) 0%, rgba(5, 27, 52, 0.6) 60%, rgba(5, 27, 52, 0) 100%);
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.auction-info h3 {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  color: var(--text-light);
}

.auction-info p {
  font-size: 0.9rem;
}

.auction-info .current-bid span {
  font-weight: 700;
  color: var(--secondary-color);
}

.auction-info .ends-in {
  font-size: 0.8rem;
  color: #cbd5e0;
}

.auction-info .ends-in .countdown {
  font-weight: 600;
  color: var(--text-light);
}

/* Ensure buttons stack nicely on small screens */
.auction-info div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Features */
.features-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 2rem;
}

.feature {
  text-align: center;
  padding: 1rem;
}

.feature img {
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
  /*
    Apply a CSS filter to recolour the black SVG icons to our secondary
    colour. The values here approximate the #e63946 tone. See
    https://codepen.io/sosuke/pen/Pjoqqp for more examples of converting
    colours via CSS filters.
  */
  filter: invert(21%) sepia(92%) saturate(4118%) hue-rotate(-7deg) brightness(91%) contrast(105%);
}

.feature h3 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--secondary-color);
}

.feature p {
  font-size: 0.9rem;
  color: var(--text-light);
}

/* Steps */
.steps-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 2rem;
}

/* Search & filter row on listing page */
.search-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.search-input,
.filter-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d0d7e0;
  border-radius: var(--border-radius);
  font-size: 1rem;
  flex: 1 1 250px;
}

.filter-select {
  max-width: 220px;
  background-color: #ffffff;
}

.search-input:focus,
.filter-select:focus {
  outline: none;
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.2);
}

/* Contact form styles */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  color: var(--primary-color);
}

.form-group input,
.form-group textarea {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d0d7e0;
  border-radius: var(--border-radius);
  font-size: 1rem;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.15);
}

.step {
  text-align: center;
  background-color: #ffffff;
  padding: 2rem 1rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--secondary-color);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin: 0 auto 1rem;
  font-size: 1.2rem;
}

.step h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
  color: var(--primary-color);
}

.step p {
  color: var(--muted-text);
  font-size: 0.95rem;
}

/* Footer */
.footer {
  background-color: var(--primary-color);
  color: var(--text-light);
  padding: 2rem 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.footer-left,
.footer-right {
  flex: 1 1 250px;
}

.footer-logo {
  height: 40px;
  margin-bottom: 1rem;
}

.footer-left p {
  font-size: 0.9rem;
  color: #cbd5e0;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 150px;
}

.footer-nav a {
  color: #cbd5e0;
  font-size: 0.9rem;
  transition: color var(--transition-speed);
}

.footer-nav a:hover {
  color: var(--secondary-color);
}

.footer-right p {
  font-size: 0.85rem;
  color: #8fa2c2;
  margin-top: auto;
}

/* Decorative wave between sections */
.wave-divider {
  position: relative;
  line-height: 0;
  overflow: hidden;
  margin-top: -4px;
}

/* Placeholder styling for upcoming live auction video section */
.video-placeholder {
  width: 100%;
  max-width: 640px;
  height: 360px;
  background-color: var(--primary-color);
  border: 2px dashed var(--secondary-color);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e0;
  font-size: 1.1rem;
  margin: 0 auto;
}

/* Responsive typography */
@media (max-width: 768px) {
  /* Reduce hero heading size on small screens */
  .hero-content h1 {
    font-size: 2rem;
  }
  /* Allow navigation items to wrap and centre on mobile */
  .nav-links {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  /* Display one card per row for trending and featured auctions */
  .cards-grid {
    grid-template-columns: 1fr;
  }
  /* Stack footer columns vertically and centre them */
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  /* Arrange footer links horizontally and wrap as needed */
  .footer-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  .footer-left,
  .footer-right {
    text-align: center;
  }
}