/* 
   EMERGENCY BUTTON FIX
   This file contains critical fixes for the hero button color
*/

/* Global button override with fixed position */
.hero .btn-primary,
html body .hero .btn-primary,
body .hero .btn-primary,
.hero a.btn-primary,
html body .hero a.btn-primary,
body .hero a.btn-primary,
a.btn-primary[href="#models"],
.btn-primary[href="#models"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #121212 !important;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2) !important;
  margin: 20px 0 0 0 !important;
  padding: 10px 30px !important;
  border: none !important;
  position: relative !important;
  top: 0 !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  transform: none !important;
}

.hero .btn-primary:active,
html body .hero .btn-primary:active,
body .hero .btn-primary:active,
.hero a.btn-primary:active,
html body .hero a.btn-primary:active,
body .hero a.btn-primary:active,
a.btn-primary[href="#models"]:active,
.btn-primary[href="#models"]:active,
.hero .btn-primary:hover,
html body .hero .btn-primary:hover,
body .hero .btn-primary:hover {
  background: #f0f0f0 !important;
  background-color: #f0f0f0 !important;
  color: #121212 !important;
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1) !important;
  margin: 20px 0 0 0 !important;
  padding: 10px 30px !important;
  border: none !important;
  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

/* Mobile-specific overrides */
@media (max-width: 767px) {
  .hero .btn-primary,
  html body .hero .btn-primary,
  body .hero .btn-primary,
  .hero a.btn-primary,
  html body .hero a.btn-primary,
  body .hero a.btn-primary,
  a.btn-primary[href="#models"],
  .btn-primary[href="#models"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #121212 !important;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2) !important;
    margin: 20px 0 0 0 !important;
    padding: 10px 30px !important;
    border: none !important;
    position: relative !important;
    top: 0 !important;
    transform: none !important;
  }
  
  .hero .btn-primary:active,
  html body .hero .btn-primary:active,
  body .hero .btn-primary:active,
  .hero a.btn-primary:active,
  html body .hero a.btn-primary:active,
  body .hero a.btn-primary:active,
  a.btn-primary[href="#models"]:active,
  .btn-primary[href="#models"]:active,
  .hero .btn-primary:hover,
  html body .hero .btn-primary:hover,
  body .hero .btn-primary:hover {
    margin: 20px 0 0 0 !important;
    transform: none !important;
    position: relative !important;
    top: 0 !important;
  }
}