/* ============================================================
   FRONT LINE MOTORSPORTS — Gold & Black theme
   Palette extracted from hero artwork (gold lion / Bugatti):
     Black canvas   #050505
     Warm blacks    #0e0d0a / #171410
     Gold (accent)  #d4a12c
     Gold bright    #ebba42   (hover / highlights)
     Gold deep      #8a6410   (borders, subtle lines)
     Warm white     #ece5d3   (headings)
     Warm gray      #b7b0a0   (body text)
   Load this AFTER all other stylesheets.
   ============================================================ */

:root {
  --cd-primary-color: #d4a12c;
  --cd-secondary-color: #ece5d3;
  --cd-tertiary-color: #b7b0a0;
  --bg-dark-color: #050505;
  --section-bg-light: #0e0d0a;
  --section-bg-dark: #050505;
  --button-bg-dark: #171410;
  --flm-gold: #d4a12c;
  --flm-gold-bright: #ebba42;
  --flm-gold-deep: #8a6410;
  --flm-black: #050505;
  --flm-black-2: #0e0d0a;
  --flm-black-3: #171410;
  --flm-text: #b7b0a0;
  --flm-heading: #ece5d3;
}

/* ---------- Base ---------- */
body {
  background-color: var(--flm-black) !important;
  color: var(--flm-text) !important;
}

h1, h2, h3, h4, h5, h6,
.section-title h2, .section-title h1 {
  color: var(--flm-heading) !important;
}

p, li, span, .text-muted, td, th, label {
  color: var(--flm-text);
}

a { color: var(--flm-gold); }
a:hover, a:focus { color: var(--flm-gold-bright); }

/* ---------- Sections: kill all light backgrounds ---------- */
section,
.section-ptb,
.section-pb,
.page-section-ptb {
  background-color: var(--flm-black) !important;
}

.bg-light,
.bg-white,
.bg-gradient-grey,
.new-our-clients,
.provides-best-solution {
  background: var(--flm-black-2) !important;
  background-image: none !important;
}

.feature-car-area {
  background-color: var(--flm-black-2) !important;
}

#company {
  background: var(--flm-black) !important;
}

#quality {
  background: var(--flm-black) !important;
}

#inventory {
  background: linear-gradient(rgba(5, 5, 5, 0.92), rgba(5, 5, 5, 0.92)),
    url("../images/frontline-auto-dealer.webp") center / cover no-repeat !important;
}

#inventory .section-title-new .main-title {
  color: var(--flm-heading) !important;
}

#inventory .section-title-new p {
  color: var(--flm-text) !important;
}

/* ---------- Header / nav ---------- */
.menu-list-items,
header,
.header,
.navbar,
#menu-1,
.mega-menu,
.menu-links {
  background-color: rgba(5, 5, 5, 0.96) !important;
}

.mega-menu .menu-links > li > a,
.navbar a, header a,
.topbar a, .topbar span, .topbar li {
  color: var(--flm-heading) !important;
}

.mega-menu .menu-links > li > a:hover,
.mega-menu .menu-links > li.active > a {
  color: var(--flm-gold-bright) !important;
}

/* ---------- Cards: vehicles, infoboxes ---------- */
.car-item,
.vehicle-card,
.cdhl-infobox,
.card,
.recent-post,
.item {
  background-color: var(--flm-black) !important;
  border-color: var(--flm-gold-deep) !important;
}

.car-item .car-content,
.vehicle-card .car-content {
  background-color: var(--flm-black-3) !important;
}

.car-item .item-title a,
.vehicle-card .item-title a,
.car-content a {
  color: var(--flm-heading) !important;
}

.car-item .item-title a:hover,
.vehicle-card .item-title a:hover {
  color: var(--flm-gold-bright) !important;
}

.car-price, .price {
  color: var(--flm-gold) !important;
}

.car-attribute-column-1-title,
.car-attribute-subtitle {
  color: #8d8778 !important;
}

.car-attribute-column-1-value {
  color: var(--flm-heading) !important;
}

.car-overlay-banner {
  background: rgba(5, 5, 5, 0.72) !important;
}

.vehicle-detail-panel {
  background-color: var(--flm-black-3);
  border: 1px solid var(--flm-gold-deep);
  color: var(--flm-text);
}

.vehicle-detail-panel strong {
  color: var(--flm-heading);
}

#vehicleModal .modal-content {
  background-color: var(--flm-black);
  border: 1px solid var(--flm-gold-deep);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.72);
  color: var(--flm-text);
}

#vehicleModal .modal-header,
#vehicleModal .modal-body {
  background-color: var(--flm-black);
}

#vehicleModal .modal-header {
  border-bottom: 1px solid rgba(212, 161, 44, 0.28) !important;
}

#vehicleModal .btn-close {
  filter: invert(82%) sepia(47%) saturate(750%) hue-rotate(355deg) brightness(96%) contrast(90%);
  opacity: 0.9;
}

#vehicleModal .btn-close:hover,
#vehicleModal .btn-close:focus {
  opacity: 1;
}

#vehicleModal h3,
#vehicleModal h4,
#vehicleModal h5,
#vehicleModal h6 {
  color: var(--flm-heading) !important;
}

#vehicleModal .vehicle-detail-panel > h4 {
  color: var(--flm-gold) !important;
}

#vehicleModal p,
#vehicleModal li,
#vehicleModal .modal-status {
  color: var(--flm-text) !important;
}

#vehicleModal .vehicle-detail-specs {
  border-color: rgba(212, 161, 44, 0.28) !important;
}

#dealerCallModal .modal-dialog {
  max-width: 580px;
}

#dealerCallModal .dealer-call-content {
  background: radial-gradient(circle at top, #211a0d 0, var(--flm-black) 58%);
  border: 1px solid var(--flm-gold-deep);
  border-radius: 10px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.78);
  color: var(--flm-text);
  overflow: hidden;
}

#dealerCallModal .modal-header {
  border: 0;
  padding: 18px 20px 0;
}

#dealerCallModal .btn-close {
  filter: invert(82%) sepia(47%) saturate(750%) hue-rotate(355deg) brightness(96%) contrast(90%);
  opacity: 0.9;
}

#dealerCallModal .btn-close:hover,
#dealerCallModal .btn-close:focus {
  opacity: 1;
}

#dealerCallModal .modal-body {
  padding: 4px 46px 42px;
}

#dealerCallModal .dealer-call-icon {
  align-items: center;
  border: 1px solid var(--flm-gold-deep);
  border-radius: 50%;
  color: var(--flm-gold);
  display: inline-flex;
  font-size: 23px;
  height: 58px;
  justify-content: center;
  margin-bottom: 18px;
  width: 58px;
}

#dealerCallModal .dealer-call-eyebrow {
  color: var(--flm-gold) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

#dealerCallModal h2 {
  color: var(--flm-heading) !important;
  font-size: 32px;
  line-height: 1.2;
  margin-bottom: 18px;
}

#dealerCallModal #dealerCallModalDescription {
  color: var(--flm-text) !important;
  font-size: 17px;
  line-height: 1.65;
  margin-bottom: 26px;
}

#dealerCallModal .dealer-call-button {
  align-items: center;
  display: inline-flex;
  gap: 9px;
  justify-content: center;
  margin-bottom: 17px;
}

#dealerCallModal .dealer-call-dismiss {
  background: transparent;
  border: 0;
  color: var(--flm-text);
  display: block;
  margin: 0 auto;
  padding: 5px 10px;
}

#dealerCallModal .dealer-call-dismiss:hover,
#dealerCallModal .dealer-call-dismiss:focus {
  color: var(--flm-gold-bright);
}

@media (max-width: 575px) {
  #dealerCallModal .modal-body {
    padding: 2px 24px 30px;
  }

  #dealerCallModal h2 {
    font-size: 26px;
  }

  #dealerCallModal .dealer-call-button {
    display: flex;
    width: 100%;
  }
}

/* ---------- Buttons ---------- */
.button, .btn, button[type="submit"], input[type="submit"] {
  background-color: var(--flm-gold) !important;
  border-color: var(--flm-gold) !important;
  color: #0a0800 !important;
}

.button:hover, .btn:hover,
button[type="submit"]:hover, input[type="submit"]:hover {
  background-color: var(--flm-gold-bright) !important;
  border-color: var(--flm-gold-bright) !important;
  color: #0a0800 !important;
}

.btn-outline, .button.border, .btn-white {
  background: transparent !important;
  border: 1px solid var(--flm-gold) !important;
  color: var(--flm-gold) !important;
}

/* ---------- Forms (subscribe / contact) ---------- */
input, textarea, select, .form-control {
  background-color: var(--flm-black-3) !important;
  border: 1px solid var(--flm-gold-deep) !important;
  color: var(--flm-heading) !important;
}

input::placeholder, textarea::placeholder {
  color: #8d8778 !important;
}

input:focus, textarea:focus, .form-control:focus {
  border-color: var(--flm-gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 161, 44, 0.18) !important;
}

/* ---------- Icons / accents ---------- */
.fas, .fab, .far, [class^="flaticon-"], [class*=" flaticon-"] {
  color: inherit;
}

.cdhl-infobox .fas,
.cdhl-infobox [class^="flaticon-"],
.infobox-icon,
.feature-icon {
  color: var(--flm-gold) !important;
}

/* Old flat-yellow accent -> warm gold wherever it was set inline */
[style*="#cbaa00"], [color="#cbaa00"] {
  color: var(--flm-gold) !important;
}

/* ---------- Dividers / borders ---------- */
hr { border-color: rgba(212, 161, 44, 0.25) !important; }

.section-title .separator,
.title-border, .border-bottom {
  border-color: var(--flm-gold-deep) !important;
  background-color: var(--flm-gold-deep);
}

/* ---------- Footer ---------- */
footer, .footer, .footer-widget, .copyright {
  background-color: #030303 !important;
  color: var(--flm-text) !important;
}

footer h6, .footer h6, footer h5, .footer h5 {
  color: var(--flm-gold) !important;
}

footer a, .footer a { color: var(--flm-text) !important; }
footer a:hover, .footer a:hover { color: var(--flm-gold-bright) !important; }

/* ---------- Owl carousel dots/nav ---------- */
.owl-dot span { background: var(--flm-gold-deep) !important; }
.owl-dot.active span { background: var(--flm-gold) !important; }
.owl-nav .owl-prev, .owl-nav .owl-next {
  background: var(--flm-black-3) !important;
  color: var(--flm-gold) !important;
}

/* ---------- Map section: dim to blend with dark theme ---------- */
.contact-map iframe {
  filter: grayscale(1) invert(0.92) contrast(0.9) hue-rotate(180deg) brightness(0.9);
}

/* ---------- Scrollbar (chromium) ---------- */
::-webkit-scrollbar { width: 12px; background: var(--flm-black-2); }
::-webkit-scrollbar-thumb { background: var(--flm-gold-deep); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--flm-gold); }