/* -----------------------------------------------------------------------------
   1) Define your color palette as CSS variables for easy theming
   ----------------------------------------------------------------------------- */
:root {
  --color-bg:   #f7f8f9;
  --color-fg:   #222;
  --color-accent: #007bff; /* your primary brand accent */
  --color-text: #333;
  --color-muted: #777;
}

/* -----------------------------------------------------------------------------
   2) Global typography refinements
   ----------------------------------------------------------------------------- */
body {
  /* replace Arial with a lighter, more modern font stack */
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   3) Make header sticky at top
   ----------------------------------------------------------------------------- */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #222; /* your dark header */
  /* box-shadow already there */
}

/* -----------------------------------------------------------------------------
   4) Dealer-Login button refinement
   ----------------------------------------------------------------------------- */
.btn-dealer, .btn-dealer i {
  /* example if you have a .btn-dealer class */
  background: transparent;
  border: 1px solid var(--color-fg);
  color: var(--color-fg);
  padding: .5rem 1rem;
  border-radius: 4px;
  font-weight: 500;
  transition: background .2s, color .2s;
}
.btn-dealer:hover {
  background: var(--color-fg);
  color: #fff;
}

/* -----------------------------------------------------------------------------
   5) Card hover “lift” and shadow
   ----------------------------------------------------------------------------- */

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

.card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;         /* adjust up/down as needed */
  font-weight: 700;          /* extra-bold */
  text-transform: uppercase; /* ALL CAPS */
  letter-spacing: 1px;       /* a little breathing room */
  line-height: 1.2;
  margin-bottom: 0.5rem;
  color: #222;               /* tweak to match your palette */
  text-align: center;        /* center under the image */
  text-decoration: none !important;
  border-bottom: none !important;

}

/* remove underlines and make the title extra bold */
.card a {
  text-decoration: none;
}

/* optional: highlight on hover */
.card:hover .card-title {
  color: #000000;
}

.card img {
	transition: transform .2s;
	transform: scale(0.9);
}
.card:hover img {
	 transform: scale(1.00);
}

/* ----------------------------------------------------------------------------
   LAYOUT: uniform grid of cards in a row
   ---------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   GRID LAYOUT tweaks
   ----------------------------------------------------------------------------- */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-start;    /* align all cards to the left */
  margin-top: 1.5rem;
}

/* each card takes 1/3 of the row, with gutters, and has internal padding */
.card {
  flex: 0 1 calc(33% - 1rem);
  max-width: calc(33% - 1rem);
  padding: 0.5rem;                  /* internal space */
  box-sizing: border-box;
  cursor: pointer;
}

/* smaller screens: 2 columns */
@media (max-width: 768px) {
  .card {
    flex: 0 1 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}

/* phones: full width */
@media (max-width: 480px) {
  .card {
    flex: 0 1 100%;
    max-width: 100%;
  }
}

.card .card-title a,
.card .card-title a:hover,
.card .card-title a:visited,
.card .card-title a:focus {
  text-decoration: none !important;
}

/* -----------------------------------------------------------------------------
   STEP TITLE tweak
   ----------------------------------------------------------------------------- */
.step-title {
  font-size: 1.6rem;          /* slightly smaller */
  margin: 1rem 0 0.5rem 0;     /* less top/bottom space */
}

/* -----------------------------------------------------------------------------
   7) Fade-in after AJAX load
   ----------------------------------------------------------------------------- */
#main-content {
  opacity: 0;
  transition: opacity .3s ease;
}
#main-content.loaded {
  opacity: 1;
}

main {
  flex: 1;
  padding: 30px;
  max-width: 1400px;
  min-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* -----------------------------------------------------------------------------
   8) Simple skeleton loader
   ----------------------------------------------------------------------------- */
.skeleton-card {
  width: 250px;      /* match your .range-card width */
  height: 280px;     /* roughly height of your real card */
  background: #eee;
  border-radius: 8px;
  margin: auto;
  position: relative;
  overflow: hidden;
}
.skeleton-card::after {
  content: "";
  position: absolute;
  top: 0; left: -150px;
  height: 100%; width: 150px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shine 1.2s infinite;
}
@keyframes shine {
  to { transform: translateX(400px); }
}

/* -----------------------------------------------------------------------------
   9) Breadcrumb & step-titles
   ----------------------------------------------------------------------------- */
.breadcrumb {
  padding: .75rem 1rem;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  font-size: .9rem;
}
.step-title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.5rem;
  margin-top: 2rem;
  color: var(--color-fg);
}

/* -----------------------------------------------------------------------------
  10) Utility tweaks
   ----------------------------------------------------------------------------- */
/* muted text */
.text-muted { color: var(--color-muted) !important; }  

/* links using accent */
a { color: var(--color-accent); }
a:hover { color: darken(var(--color-accent), 10%); }


.nav-pills .nav-link {
  border-radius: 0;       /* square corners */
  padding: .75rem 1rem;
  font-weight: 500;
}
.nav-pills .nav-link.disabled {
  opacity: .5;
}

/* remove underlines on the card container itself */
a.card {
  text-decoration: none !important;
}

/* also make sure hover/focus doesn’t bring them back */
a.card:hover,
a.card:focus {
  text-decoration: none !important;
}

/* in case your titles get any default borders */
.card-title {
  border-bottom: none !important;
}

/* HTML: <div class="loader"></div> */
.loader {
  font-weight: bold;
  font-family: sans-serif;
  font-size: 30px;
  animation: l1 1s linear infinite alternate;
}
.loader:before {
  content:"Loading..."
}
@keyframes l1 {to{opacity: 0}}