/* IF MOTORS — Midnight Purple & Lavender Theme */

:root {
  --purple-deep: #160D2B;
  --purple-main: #24143D;
  --purple-light: #39245B;
  --lavender: #B99AEF;
  --lavender-soft: #D9C9F5;
  --white: #FFFFFF;
  --page-bg: #F5F1FA;
}

/* Main page */
body {
  background: var(--page-bg);
}

/* Header */
.site-header {
  background: var(--purple-deep) !important;
  border-bottom: 1px solid var(--purple-light);
}

/* Hero section */
.hero {
  background: linear-gradient(
    135deg,
    #160D2B 0%,
    #24143D 55%,
    #39245B 100%
  ) !important;
}

/* Hero heading */
.hero h1 {
  color: var(--white) !important;
}

.hero h1 em,
.hero h1 span,
.hero .eyebrow {
  color: var(--lavender) !important;
}

/* Buttons */
.hero .button,
.hero .button-gold,
.hero a.button {
  background: var(--lavender) !important;
  color: var(--purple-deep) !important;
  border: 1px solid var(--lavender) !important;
}

/* General purple buttons */
.button-purple {
  background: var(--purple-main) !important;
  color: var(--white) !important;
}

/* Inventory section */
.inventory,
.search-panel {
  background: var(--page-bg);
}

/* Car cards */
.car-card {
  background: var(--white);
  border-color: #E3D9F0;
}

/* Details buttons */
.car-card .button {
  background: var(--purple-main);
  color: var(--white);
}

/* Hero stamp */
.hero-stamp {
  background: var(--lavender) !important;
  color: var(--purple-deep) !important;
}
/* IF MOTORS — New logo in About section */

.about-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    max-width: 420px;
    height: auto;
    padding: 15px;
}

.about-logo {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    object-fit: contain;
}

/* Mobile display */
@media (max-width: 750px) {
    .about-mark {
        max-width: 300px;
        margin: 0 auto 25px;
    }
}
.about-logo {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0 auto;
}
.about-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.about-logo img {
  width: 100%;
  max-width: 500px;
  height: auto;
  object-fit: contain;
  display: block;
  mix-blend-mode: normal;
  background: transparent;
}

@media (max-width: 750px) {
  .about-logo img {
    max-width: 320px;
  }
}
.about-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-logo img {
  width: 100%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 750px) {
  .about-logo img {
    max-width: 300px;
  }
}
.about-section-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1.2fr;
    align-items: center;
    gap: 50px;
    padding: 80px 5%;
}

img.about-logo {
    width: 100% !important;
    max-width: 650px !important;
    height: auto !important;
    object-fit: contain;
    display: block;
    opacity: 1;
    filter: none;
}

@media (max-width: 768px) {
    .about-section-wrap {
        grid-template-columns: 1fr;
        text-align: center;
    }

    img.about-logo {
        max-width: 420px !important;
        margin: auto;
    }
}

.about-section-wrap > div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* IF MOTORS BIG LOGO */
.about.section-wrap {
    display: grid !important;
    grid-template-columns: 1.3fr 1fr !important;
    align-items: center !important;
    gap: 30px !important;
}

.about.section-wrap .about-logo {
    width: 100% !important;
    max-width: 750px !important;
}

.about.section-wrap img.about-logo {
    width: 100% !important;
    max-width: 750px !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

@media (max-width: 768px) {
    .about.section-wrap {
        grid-template-columns: 1fr !important;
    }

    .about.section-wrap img.about-logo {
        max-width: 500px !important;
        margin: auto !important;
    }
}
/* Fix IF Motors logo on mobile */
@media (max-width: 750px) {
  .about-logo {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    object-fit: contain;
    margin: 0 auto 24px;
    filter: none !important;
    box-shadow: none !important;
    transform: none;
  }
}
/* IF MOTORS - remove dark oval around About logo */
.about.section-wrap .about-logo {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    border: none !important;
}

.about.section-wrap .about-logo::before,
.about.section-wrap .about-logo::after {
    content: none !important;
    display: none !important;
}

.about.section-wrap img.about-logo {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}
/* FIX: Vehicle admin modal width */
#carModal.modal-backdrop.open {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

#carModal .car-modal {
    width: 100% !important;
    max-width: 1000px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#carModal .car-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#carModal .full-field,
#carModal .existing-photo-grid {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#carModal .existing-photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important;
    gap: 12px !important;
}

#carModal .existing-photo-grid > div {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
#carModal .modal.car-modal {
    width: min(100%, 850px) !important;
    max-width: 850px !important;
    flex: 0 1 850px !important;
}

#carModal .car-form {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}