:root {
  --btn-primary-padding-left: 2.4em;
  --btn-primary-padding-right: 2.4em;
  --btn-default-padding-left: 2.4em;
  --btn-default-padding-right: 2.4em;
  --btn-padding-vertical: 14.25px;
  --btn-primary-hover-bg: var(--color-primary-700);
  --btn-primary-hover-border-color: var(--color-primary-700);
}

.index .ddc-document {background: linear-gradient( black 0 200px, transparent 0px );}

/* ------------------------------------------------------ */
/*  BUTTONS                                               */
/* ------------------------------------------------------ */
.btn {border-radius: 2px;}
.btn-primary:hover,.btn-default:hover {text-decoration: underline;text-underline-offset: 25%;text-decoration-thickness:1.5px; }
a:focus {outline: none; } 
a:focus-visible { outline: 2px solid var(--color-primary-500);outline-offset: 3px; }
.btn-link:focus {text-decoration: none;outline: 2px solid var(--color-primary-500) !important;outline-offset: 3px; }

.btn-primary:active {text-decoration: underline;text-underline-offset: 25%;text-decoration-thickness:1.5px;}
.btn-default:active,.btn-default:active:hover {
  border: 1px solid var(--btn-default-hover-border-color) !important;
  color: var(--btn-default-hover-color);
  background: var(--btn-default-hover-bg);
  text-decoration: underline;
  text-underline-offset: 25%;
  text-decoration-thickness:1.5px;
}

/* ------------------------------------------------------ */
/*  HEADER & NAV                                          */
/* ------------------------------------------------------ */
.page-header .minimal .header-minimal-container {padding: 20px 0px;background: #000;border-color: #000; }
.page-header .header-default.ddc-content .vcard div span {text-transform:unset;}

/* DEALERSHIP NAME */
.page-header .minimal .header-default .fn {position: absolute;left: 0px;top: -30px;width: 160px;font-size: 13px; }

/* NAVBAR */
.page-header .minimal .navbar-default .navbar .navbar-inner {display: flex; }
.page-header .minimal .navbar-default .navbar .navbar-inner .btn,
.page-header .minimal .navbar-default .navbar .navbar-inner .ws-site-text-search-navigation-target {min-width: 44px !important;margin: 0px !important;}
.page-header .minimal .navbar-default.ddc-content .navbar {top: 15px !important;z-index: 9999;margin-right: 9px;}

/* SEARCH NAV ITEM */
.page-header .navbar-default .search-collapse .btn {top: 36px}

/* FRANCHISE LOGO */
.page-header .minimal .header-default .home-logolink {width: 80px; }
.page-header .header-default.ddc-content .vcard {border: none;width: 100% !important; }
.page-header .minimal .header-default .franchises {width: 80px;height: 55px;margin-top: 10px; }
.page-header .header-default.ddc-content .home-logolink img {background-color: #000;height: 55px;width: 80px !important; } 

/* M CERTIFIED LOGO HEADER */
.page-header .cst-wise-integration {
  position: absolute !important;
  top: -20px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto !important;
  z-index: 99999;
}
.page-header .cst-wise-integration a {display: inline-flex;align-items: center;gap: 6px;position: relative;z-index: 9999; }
.page-header .cst-wise-integration a::after {content: "Certified Center";font-size: 13px;font-weight: 600;color: #fff;white-space: nowrap; }


/* NAV SLIDE IN */
.navigation-default .panel:active {outline: none; }
.ddc-mobile-slidein-content .ddc-page {margin-top: 15px !important; }
.mobile-fullscreen-subnav.panel-default.slide-in {border-bottom: none !important; }
.ddc-mobile-slidein-content .ws-navigation {background: #000;padding-bottom: 100px !important; }
body.mobile-nav-fullscreen .ddc-slidein-panel .ddc-mobile-slidein-content {background: linear-gradient( black 0 80px, transparent 0px ); }
.navigation-default.navigation-spaced .panel-title .panel-heading-link,
.navigation-default.navigation-spaced .panel-body li a,
body.mobile-nav-fullscreen .ddc-slidein-panel .ddc-slidein-close-button-container .close-slidein-panel{color: #fff; }
.navigation-default.navigation-spaced .panel-default {border-bottom: 1px solid rgb(255,255,255, .2); }
.navigation-default.navigation-spaced .panel-default:first-child {border-top: none;overflow: visible; }
.navigation-default.navigation-spaced .panel-body li b {margin: 10px 0px 0px;display: block; }

.navigation-default.navigation-spaced .panel-title .panel-heading-link,
.navigation-default.navigation-spaced .panel-body li .panel-heading-link {font-size: 17.75px; }
.navigation-default.navigation-spaced .panel-body li .nav-link {padding-left: 0px;font-weight: normal; }

.navigation-default.ws-navigation .mobile-fullscreen-subnav .mobile-fullscreen-subnav-header {position: absolute;top: -65px; }
.navigation-default.navigation-spaced .panel-title .panel-heading-link .ddc-icon {border: none;background: transparent;font-size: 20px !Important; }
.navigation-default.ws-navigation .mobile-fullscreen-subnav .mobile-fullscreen-subnav-header .mobile-fullscreen-back-button {color: #fff;font-size: 20px; }
.navigation-default li a:hover {text-decoration-color: var(--color-primary-500);text-decoration-thickness: 2px;text-underline-offset: 4px; }


.navigation-default .ddc-mobile-header-sub-nav li {padding: 12px 0px !important; }
.navigation-default .ddc-mobile-header-sub-nav .heading-tier2 {margin: 30px 0px 14px; }
.navigation-default.navigation-spaced .panel-body li:first-child .heading-tier2 {margin-top: 0px; } 

/* NAV PANEL ARROWS */
.ddc-mobile-slidein-content .ddc-icon-expand:before {  
  content: "\e002";
  font-family: 'ddc-button-icons';
  font-weight: normal;
  line-height: 1;
  color: #fff;
  font-size: 14px;
}

/* NAV MODEL LINKS */
.series-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 10px 40px 20px 0px;
  margin: 0 auto;
}

.series-grid li {  
  padding: 10px 0px !Important;
  
}

/* Style the links */
.series-grid li > a {
  display: block;
  text-align: center;
  padding: 8px 0;
  font-size: 20px;
}

.ddc-mobile-header-sub-nav .series-grid li:last-child {display: none;}


/* M LOGO IN NAV ITEM LIST */ 
.ddc-mobile-header-sub-nav .series-grid li:nth-last-child(2) a { 
  font-size: 0 !important; /* hide the "M" text */ 
  background-image: url('https://pictures.dealer.com/b/bmwgroup/1741/11fabf6a852fcf27594462573d55eef4x.jpg'); 
  background-size: contain; 
  background-repeat: no-repeat; 
  background-position: center; 
  display: block; 
  width: 40px; /* adjust as needed */ 
  height: 50px; /* adjust as needed */ 
  margin: 0 auto; 
}


/* NAV HOURS WIDGET */
.ddc-mobile-header-sub-nav .hours-default .key {font-style: normal; }
.ddc-mobile-header-sub-nav .hours-default .value {font-weight: bold; }
.navigation-default.navigation-spaced  .panel-body li {color: #fff; }
.ddc-mobile-header-sub-nav .hours-default .widget-heading {background: #221F1F; }
.ddc-mobile-header-sub-nav .hours-default,
.ddc-mobile-header-sub-nav .hours-default ul li:nth-child(odd) {background: transparent; }
.ddc-mobile-header-sub-nav .nav-fragment .hours-default,
.ddc-mobile-header-sub-nav .nav-fragment div[data-fragment-url="/navigation-fragments/contact-and-hours.htm"] {background: #221F1F;border: 2px solid #fff;padding: 15px 20px;margin: 0px !important;}


/* NAV CONTACT WIDGET */
.ddc-mobile-header-sub-nav .bg-location .ddc-icon,
.ddc-mobile-header-sub-nav .bg-location .spacing-reset {color: #fff !important; }
 .ddc-mobile-header-sub-nav .bg-location .spacing-reset {display: flex;width: 100%;}
.ddc-mobile-header-sub-nav .bg-location .spacing-reset .locality,
.ddc-mobile-header-sub-nav .bg-location .spacing-reset .region,
.ddc-mobile-header-sub-nav .bg-location .spacing-reset .postal-code {padding-left: 5px; }
.ddc-mobile-header-sub-nav .bg-location .spacing-reset p::after {display: none; }
.ddc-mobile-header-sub-nav .bg-location .adr {display: flex; }
.ddc-mobile-header-sub-nav .nav-fragment .ws-contact {margin-top: 0px !important; }
.ddc-mobile-header-sub-nav .nav-fragment .ws-contact .tel {margin-bottom: 0px !important;padding: 4px 0; }
.ddc-mobile-header-sub-nav .ws-contact .btn {background: transparent;border: none;text-align: left;padding: 0px;font-weight: normal; }
.ddc-mobile-header-sub-nav .bg-location {background: transparent;background-color: #221F1F !important;border: none !important;padding: 0px !important;margin: 10px 0px !important; }

.ddc-mobile-header-sub-nav li:has(b.hide) {display: none; }
.ddc-mobile-header-sub-nav .nav-fragment .tels {padding-left: 0px; }
.ddc-mobile-header-sub-nav .bg-location p.adr { font-size: 0 !important; }
.ddc-mobile-header-sub-nav .ws-contact .widget-heading {font-weight: bold; }
.ddc-mobile-header-sub-nav .nav-fragment .ddc-page {margin-top: 0px !important; }
.ddc-mobile-header-sub-nav .bg-location .mx-4 {margin-inline: 0px 10px !important; }
.ddc-mobile-header-sub-nav .nav-fragment .ws-contact .tel .ddc-icon {margin-right: 10px; }
.ddc-mobile-header-sub-nav .bg-location p.adr::before { content: "Directions"; font-size: 15px; display: block;font-weight: normal; }
.ddc-mobile-slidein-content .panel-heading-link.accordion-faux.heading-tier2 {text-decoration: none;pointer-events: none;cursor: default; }

/* NAV MODEL SELECTOR */
.ddc-mobile-header-sub-nav .model-selector-default {margin-top: 20px;}
.ddc-mobile-header-sub-nav .model-selector-item .hproduct {border: none; }
.ddc-mobile-header-sub-nav .model-selector-item .hproduct>div {display: flex;justify-content: center;flex-direction: row-reverse;}

.ddc-mobile-header-sub-nav .model-selector-item .hproduct .inventory-count {display: none;}
.ddc-mobile-header-sub-nav .model-selector-item .hproduct .fn::before {position: absolute;left: 55px;top: 22px;}
.ddc-mobile-header-sub-nav .model-selector-item .hproduct[data-modelselector-vehicle-id*="i4"] .fn::before {content: "i4";}
.ddc-mobile-header-sub-nav .model-selector-item .hproduct[data-modelselector-vehicle-id*="i5"] .fn::before {content: "i5";}
.ddc-mobile-header-sub-nav .model-selector-item .hproduct[data-modelselector-vehicle-id*="i6"] .fn::before {content: "i6";}
.ddc-mobile-header-sub-nav .model-selector-item .hproduct[data-modelselector-vehicle-id*="i7"] .fn::before {content: "i7";}
.ddc-mobile-header-sub-nav .model-selector-item .hproduct[data-modelselector-vehicle-id*="iX"] .fn::before {content: "iX";}

.ddc-mobile-header-sub-nav .model-selector-default .model-selector-item {margin: 10px; }
.ddc-mobile-header-sub-nav .model-selector-default .hproduct .media,
.ddc-mobile-header-sub-nav .model-selector-default .hproduct .media .thumb {width: 163px; }


.ddc-mobile-header-sub-nav li:has(br.remove-space) { display: none !important;}

/* NAV EXTERNAL LINKS ICON */
.ddc-mobile-header-sub-nav a.external-link {
  position: relative;
  padding-right: 28px; /* space for icon inside the link */
  overflow: hidden;    /* prevents icon from spilling off-screen */
}

.ddc-mobile-header-sub-nav a.external-link i.ddc-icon-launch {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.ddc-mobile-header-sub-nav .bg-location .external-link {width: 100%;}
.ddc-mobile-header-sub-nav .bg-location a.external-link i.ddc-icon-launch {right: 0;}

/* ------------------------------------------------------ */
/*  BUTTON LINKS CARET                                    */
/* ------------------------------------------------------ */
.btn-link.btn:not(.btn-no-decoration)::after {
  content: "\e002";
  font-family: 'ddc-button-icons';
  font-weight: normal;
  line-height: 1;
  color: var(--color-primary-500);
  transform: translateY(-50%);
  speak: none;
  margin-left: 5px;
}

/* ------------------------------------------------------ */
/*  INDEX TOP HERO                                        */
/* ------------------------------------------------------ */
.index .custom-hero-body {margin-top: 10px !important; }
.index .hero-dealer-name {font-size: 35px;display: block; }
.index .sonic-content-button {background: transparent;border: none;padding:0px 0px 3px 4px !important; }


/* ------------------------------------------------------ */
/*  LINKS LIST CAROUSEL                                    */
/* ------------------------------------------------------ */
.index [data-widget-id="sonic-model-links1"] .widget-heading {margin-left: 10px; }
.index [data-widget-id="sonic-model-links1"] .jcarousel-container .jcarousel-item {width: 60px;text-align: center;}

.index [data-widget-id="sonic-model-links1"] a[data-link-label="i4"],
.index [data-widget-id="sonic-model-links1"] a[data-link-label="i5"],
.index [data-widget-id="sonic-model-links1"] a[data-link-label="i7"] {text-transform: lowercase;}

.index [data-widget-id="sonic-model-links1"] .jcarousel-container .jcarousel-clip-horizontal .jcarousel-list li[jcarouselindex="20"] a {
  display: inline-block;
  width: 40px;         
  height: 40px;      
  background-image: url("https://pictures.dealer.com/d/davidmelinemotors/1234/fc6c9e7631c1485a9e4ce476625cb5e0.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center 16px;
  text-indent: -9999px; 
  overflow: hidden;
  margin: 0 10px !Important;
  padding: 0px !important;
}


/* ------------------------------------------------------ */
/*  INDEX 4 CTA SECTION                                   */
/* ------------------------------------------------------ */
.index .index-content-cta-1 {
    border-right: .5px solid rgb(255,255,255,.4);
    border-top: 1px solid rgb(255,255,255,.4);
    border-bottom: .5px solid rgb(255,255,255,.4);
}

.index .index-content-cta-2 {
    border-left: .5px solid rgb(255,255,255,.4);
    border-top: 1px solid rgb(255,255,255,.4);
    border-bottom: .5px solid rgb(255,255,255,.4);
}

.index .index-content-cta-3 {
    border-right: .5px solid rgb(255,255,255,.4);
    border-top: .5px solid rgb(255,255,255,.4);
    border-bottom: 1px solid rgb(255,255,255,.4);
}

.index .index-content-cta-4 {
    border-left: .5px solid rgb(255,255,255,.4);
    border-top: .5px solid rgb(255,255,255,.4);
    border-bottom: 1px solid rgb(255,255,255,.4);
}


.index div[data-name="index-content-cta-wrapper-1"] .ws-content-cta:active a,
.index div[data-name="index-content-cta-wrapper-1"] a:hover,
.index div[data-name="index-content-cta-wrapper-1"] a:active,
.index div[data-name="index-content-cta-wrapper-1"] a.hover {text-decoration: none;border-bottom: 2px solid var(--color-primary-500); }
.index div[data-name="index-content-cta-wrapper-1"] .col-sm-3:hover a {text-decoration: none;border-bottom: 2px solid var(--color-primary-500);}

.index div[data-name="index-content-cta-wrapper-1"] {flex-wrap: wrap !important;margin-top: -130px; } 
.index div[data-name="index-content-cta-wrapper-1"] .col-sm-3 { width: 50% !important; flex: 0 0 50% !important; } 

.index div[data-name="index-content-cta-wrapper-1"] a {align-self: center !important;padding: 2px 4px;border-bottom: 2px solid transparent; }
.index div[data-name="index-content-cta-wrapper-1"] a:hover {text-decoration: none;border-bottom: 2px solid var(--color-primary-500); }

.index div[data-name="index-content-cta-1"],
.index div[data-name="index-content-cta-2"],
.index div[data-name="index-content-cta-3"],
.index div[data-name="index-content-cta-4"] {background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(4px) saturate(0%); -webkit-backdrop-filter: blur(4px) saturate(0%);}


/* ------------------------------------------------------ */
/*  INDEX 3 CTA SECTION                                   */
/* ------------------------------------------------------ */
.index div[data-name="index-content-cta-wrapper-2"] .ws-content-cta {background: #F6F6F6; }
.index div[data-name="index-content-cta-wrapper-2"] .ws-content-cta .cta-content a::after {color: #000; }
.index div[data-name="index-content-cta-wrapper-2"] .ws-content-cta .cta-content {height: 171px;justify-content: center; }
.index div[data-name="index-content-cta-wrapper-2"] .mobile-carousel-section-wrapper>div::scroll-marker-group {display: none; }

/* ------------------------------------------------------ */
/*  INDEX 2 CTA SECTION                                   */
/* ------------------------------------------------------ */
.index div[data-name="index-cta-2-2-content-1"],
.index div[data-name="index-cta-2-2-content-2"] {background: #F6F6F6; }
.index div[data-name="index-cta-content-background-1"] {margin: 40px 0px; } 
.index div[data-name="index-cta-content-background-1"] a.btn {margin-top: 10px;}


/* ------------------------------------------------------ */
/*  FOOTER                                                */
/* ------------------------------------------------------ */
.ddc-footer .links-list h3 {background: transparent;color: #000; }
.ddc-footer div[data-name*="footer-links-responsive-column-links"] {padding: 24px !important; }
.ddc-footer div[data-name="footer-links-responsive-links-container-1"] {flex-direction: column; }
.ddc-footer div[data-name="footer-links-responsive-links-wrapper-1"] {display: block !important; }

.ddc-footer .bg-body {background: #F6F6F6 !important; }
.ddc-footer .links-list a {font-weight: normal;color: #000 !important;}
.ddc-footer .border-top .links-list {border-left: 2px solid var(--color-primary-500);padding-left: 20px; }
.ddc-footer div[data-name="footer-links-responsive-ddc-logo-and-third-party-container-1"] .links-list li {padding: 10px; }
.ddc-footer div[data-name="footer-links-responsive-ddc-logo-and-third-party-wrapper-1"] {background: #F6F6F6 !important; }
.ddc-footer .links-list a:hover {text-underline-offset: 5px;color: #000;text-decoration-color: var(--color-primary-500); }

/* FOOTER EXTERNAL LINK ICON */
.ddc-footer .links-list .external-link {position: relative; }
.ddc-footer .links-list .external-link .ddc-icon-launch {
    position: absolute;
    left: auto;
    top: 50%;
    transform: translateY(-45%);
    padding-left: 8px;
}

/* FOOTER LOGO */
.ddc-footer .ws-ddc-logo {padding: 30px 0px; }
.ddc-footer #template-ddc-logo1-app-root img {display: none; }
.ddc-footer #template-ddc-logo1-app-root .ddc-logo-link {
  display: inline-flex;          
  align-items: center;
  gap: 10px;                   
  padding-left: 100px;          
  height: 33px;
  background-image: url("https://pictures.dealer.com/d/davidmelinemotors/1234/2e395efcdd1e4230828a021e1e2f539a.png");
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: left center;
  white-space: nowrap;
}

.ddc-footer #template-ddc-logo1-app-root .ddc-logo-link::after {
  content: "A Sonic Automotive Dealership";
  font-size: 12px;
  color: #000;
  font-weight: normal;
}

.ddc-footer #template-ddc-logo1-app-root::after {
  content: "© 2026 BMW of Birmingham";
  display: block;
  margin-top: 30px;
  font-size: 12px;
  color: #000;
  text-align: center;
  line-height: 1.2;
}

.ddc-footer .ddc-icon-launch {position: relative;top: 6px;left: 5px;}

/* SOCIAL ICONS */
.ddc-footer .social-header-buttons.socialmed a,
.ddc-footer .social-header-buttons.socialmed a svg {width: 50px;height: 50px;}
.ddc-footer .social-header-buttons.socialmed rect {fill: none !important;}
.ddc-footer .social-header-buttons.socialmed g {fill: #000 !important;}

.ddc-footer div[data-name="footer-links-responsive-ddc-logo-and-third-party-container-1"]> *:first-child {display: flex;flex-direction:column-reverse !important}

.ddc-mobile-header-sub-nav li:nth-child(n+10) b[role="presentation"] {
    display: none !important;
}


/* SMALL FIXES */
.alias-contact-directions .ws-contact a {color: #fff;}

/* SEO BG IMAGE SECTION */
.index div[data-name="index-dealer-content-col-1"] {padding-left: 16px !important;padding-right: 16px !important; }
.index div[data-widget-id="sonic-seo-content2"] .widget-heading {text-transform: unset; }

/* SEO CTA SECTION */
.index div[data-name="index-seo-cta-content-cta-1"] .cta a {text-decoration: underline; }
.index div[data-name="index-seo-cta-content-cta-1"] .cta {background: #fff;border-radius: 8px; }
.index div[data-name="index-seo-cta-content-cta-1"] .col-sm-3 {padding-top: 6px !important;padding-bottom: 6px !important; }


/* NAV SEARCH BAR ADJUSTMENT */
#search-collapse {
  top: var(--search-top);
}


/* HERO FIX */
.index .content-hero.sonic-hero-content1 .btn-link::after {content: none; }
.index .content-hero.sonic-hero-content1 .hero-heading {margin-bottom: 3px; }
.index .content-hero.sonic-hero-content1 .btn-link {color: #fff;padding: 0px; }
.index .content-hero.sonic-hero-content1 .hero-subheading {text-transform: uppercase;font-size: 35px; }

.index .content-hero.sonic-hero-content1 {height: 465px; }
.index .content-hero.sonic-hero-content1 .container {padding: 5px 24px; }
.index .content-hero.sonic-hero-content1 #sonic-hero-content1-body {margin: 0px; }
.index .content-hero.sonic-hero-content1 .hero-content-box {padding: 0px;width: 90%; }
.index .content-hero.sonic-hero-content1 .hero-content-background {height: 465px; }