/* =========================================================
 LIFESTYLE RACING
 FULL GLASS / BACKGROUND / UI CSS
========================================================= */


/* =========================================================
 RESET
========================================================= */

*,
*::before,
*::after {
 box-sizing: border-box;
}

html,
body {
 margin: 0;
 padding: 0;
 min-height: 100%;
 overflow-x: hidden;
 background-color: #050505;
}


/* =========================================================
 ROOT VARIABLES
========================================================= */

:root {
 --lr-text: #ffffff;
 --lr-text-soft: rgba(255, 255, 255, 0.82);
 --lr-text-muted: rgba(255, 255, 255, 0.58);

 --lr-line: rgba(255, 255, 255, 0.12);
 --lr-line-soft: rgba(255, 255, 255, 0.06);

 --lr-glass-1: rgba(0, 0, 0, 0.10);
 --lr-glass-2: rgba(0, 0, 0, 0.18);
 --lr-glass-3: rgba(0, 0, 0, 0.26);
 --lr-glass-4: rgba(0, 0, 0, 0.38);

 --lr-red: #ff1010;
 --lr-red-soft: rgba(255, 16, 16, 0.18);
 --lr-red-soft-2: rgba(255, 16, 16, 0.26);
 --lr-red-glow: rgba(255, 16, 16, 0.48);

 --lr-radius-sm: 10px;
 --lr-radius-md: 16px;
 --lr-radius-lg: 22px;
 --lr-radius-xl: 28px;

 --lr-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.18);
 --lr-shadow-glass: 0 14px 38px rgba(0, 0, 0, 0.26);
 --lr-shadow-red: 0 0 18px rgba(255, 16, 16, 0.38);

 --lr-blur-sm: blur(6px);
 --lr-blur-md: blur(10px);
 --lr-blur-lg: blur(14px);
}


/* =========================================================
 BASE
========================================================= */

body {
 font-family: 'Fjalla One', sans-serif;
 color: var(--lr-text);
 background: transparent;
 line-height: 1.4;
}


/* =========================================================
 GLOBAL SITE BACKGROUND
========================================================= */

body.lr-site-bg {
 min-height: 100vh;
 background: transparent;
 position: relative;
}

/* animated red glow layer */
body.lr-site-bg::before {
 content: "";
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 0;
 background:
 radial-gradient(circle at 18% 28%, rgba(255, 0, 0, 0.10), transparent 34%),
 radial-gradient(circle at 82% 72%, rgba(255, 0, 0, 0.08), transparent 36%),
 radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.03), transparent 24%);
 animation: lrGlowMove 18s ease-in-out infinite;
}

@keyframes lrGlowMove {
 0% {
 transform: translateX(-2%) translateY(0%);
 opacity: 0.88;
 }
 50% {
 transform: translateX(2%) translateY(1%);
 opacity: 1;
 }
 100% {
 transform: translateX(-2%) translateY(0%);
 opacity: 0.88;
 }
}


/* =========================================================
 GLOBAL LAYERING
========================================================= */

header,
main,
footer,
section,
article,
aside,
nav,
.page-wrapper,
.site-wrapper,
.content-wrapper,
.layout-wrapper,
.wrapper,
.container,
.container-fluid,
.main-wrapper,
.main-content,
.page-content,
.content {
 position: relative;
 z-index: 1;
}


/* =========================================================
 REMOVE SOLID BLACK BACKGROUNDS
========================================================= */

body,
main,
section,
article,
aside,
nav,
header,
footer,
.page-wrapper,
.site-wrapper,
.content-wrapper,
.layout-wrapper,
.wrapper,
.container,
.container-fluid,
.main-wrapper,
.main-content,
.page-content,
.content,
.hero,
.hero-section,
.home-hero,
.main-hero,
.featured-hero,
.banner,
.top-banner,
.navbar,
.navigation,
.menu,
.menu-bar,
.shop-page,
.index-page,
.homepage,
.vehicle-search,
.vehicle-search-section,
.vehicle-search-wrap,
.vehicle-finder,
.vehicle-finder-wrap,
.garage-section,
.garage-wrap,
.quick-shop,
.quick-shop-wrap,
.featured-section,
.featured-products,
.featured-products-section,
.product-grid,
.product-grid-wrap,
.category-grid,
.category-grid-wrap,
.selector-section,
.selector-wrap,
.filter-section,
.filter-wrap,
.search-section,
.search-wrap,
.decode-section,
.decode-wrap,
.vin-section,
.vin-wrap,
.form-section,
.form-wrap,
.row,
.col,
.col-12,
.col-6,
.col-4,
.col-3 {
 background-color: transparent !important;
}

/* remove heavy full backgrounds */
body,
main,
section,
article,
aside,
nav,
header,
footer,
.page-wrapper,
.site-wrapper,
.content-wrapper,
.layout-wrapper,
.wrapper,
.container,
.container-fluid,
.main-wrapper,
.main-content,
.page-content,
.content,
.hero,
.hero-section,
.home-hero,
.main-hero,
.featured-hero,
.banner,
.top-banner,
.navbar,
.navigation,
.menu,
.menu-bar,
.shop-page,
.index-page,
.homepage,
.vehicle-search,
.vehicle-search-section,
.vehicle-search-wrap,
.vehicle-finder,
.vehicle-finder-wrap,
.garage-section,
.garage-wrap,
.quick-shop,
.quick-shop-wrap,
.featured-section,
.featured-products,
.featured-products-section,
.product-grid,
.product-grid-wrap,
.category-grid,
.category-grid-wrap,
.selector-section,
.selector-wrap,
.filter-section,
.filter-wrap,
.search-section,
.search-wrap,
.decode-section,
.decode-wrap,
.vin-section,
.vin-wrap,
.form-section,
.form-wrap,
.row,
.col,
.col-12,
.col-6,
.col-4,
.col-3 {
 background-image: none !important;
 background: transparent !important;
}


/* =========================================================
 HEADER / NAV GLASS LOOK
========================================================= */

header,
.navbar,
.navigation,
.menu,
.menu-bar,
.top-banner,
.banner {
 background: rgba(0, 0, 0, 0.18) !important;
 backdrop-filter: var(--lr-blur-md);
 -webkit-backdrop-filter: var(--lr-blur-md);
 border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* preserve glowing red accents if present */
header::after,
.navbar::after,
.navigation::after,
.menu::after,
.menu-bar::after {
 pointer-events: none;
}


/* =========================================================
 MAIN
========================================================= */

main {
 width: 100%;
 min-height: 70vh;
 padding: 24px 18px 48px;
}


/* =========================================================
 MAJOR CONTENT BLOCKS
========================================================= */

main > section,
main > article,
main > div[class],
.vehicle-search,
.vehicle-search-wrap,
.vehicle-finder,
.garage-section,
.quick-shop,
.vin-section,
.decode-section,
.selector-section,
.filter-section,
.search-section,
.featured-section,
.featured-products,
.category-grid,
.product-grid,
.home-hero,
.main-hero,
.featured-hero {
 background: var(--lr-glass-1) !important;
 border: 1px solid var(--lr-line-soft) !important;
 border-radius: var(--lr-radius-xl) !important;
 backdrop-filter: var(--lr-blur-sm);
 -webkit-backdrop-filter: var(--lr-blur-sm);
 box-shadow: var(--lr-shadow-soft);
}


/* =========================================================
 GLASS PANELS / CARDS
========================================================= */

.panel,
.card,
.content-panel,
.page-panel,
.product-card,
.category-card,
.info-card,
.modal,
.dropdown-menu,
.sidebar,
.widget,
.box,
.tile,
.vehicle-card,
.vehicle-panel,
.vehicle-box,
.garage-card,
.garage-panel,
.quick-shop-card,
.quick-shop-panel,
.selector-card,
.selector-panel,
.filter-card,
.filter-panel,
.form-card,
.form-panel,
.search-card,
.search-panel,
.vin-card,
.vin-panel,
.decode-card,
.decode-panel,
[class*="panel"],
[class*="card"],
[class*="box"],
[class*="tile"] {
 background: var(--lr-glass-2) !important;
 border: 1px solid var(--lr-line) !important;
 border-radius: var(--lr-radius-md) !important;
 backdrop-filter: var(--lr-blur-md);
 -webkit-backdrop-filter: var(--lr-blur-md);
 box-shadow: var(--lr-shadow-glass);
 color: var(--lr-text) !important;
}


/* =========================================================
 BUTTONS / NAV BUTTONS / PILLS
========================================================= */

button,
.btn,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
.menu a,
nav a,
.navbar a,
.navigation a,
.category-btn,
.category-link,
.shop-btn,
.cta-btn,
.pill,
.tab,
.tab-btn,
.nav-btn,
.menu-btn,
.filter-btn,
.garage-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 background: var(--lr-glass-2) !important;
 border: 1px solid rgba(255, 255, 255, 0.14) !important;
 color: #ffffff !important;
 border-radius: var(--lr-radius-sm) !important;
 text-decoration: none !important;
 box-shadow: none !important;
 backdrop-filter: var(--lr-blur-sm);
 -webkit-backdrop-filter: var(--lr-blur-sm);
 transition:
 background-color 0.22s ease,
 border-color 0.22s ease,
 transform 0.22s ease,
 box-shadow 0.22s ease;
}

/* hover glow */
button:hover,
.btn:hover,
a.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.menu a:hover,
nav a:hover,
.navbar a:hover,
.navigation a:hover,
.category-btn:hover,
.category-link:hover,
.shop-btn:hover,
.cta-btn:hover,
.pill:hover,
.tab:hover,
.tab-btn:hover,
.nav-btn:hover,
.menu-btn:hover,
.filter-btn:hover,
.garage-btn:hover {
 background: var(--lr-red-soft) !important;
 border-color: rgba(255, 0, 0, 0.46) !important;
 color: #ffffff !important;
 transform: translateY(-1px);
 box-shadow: var(--lr-shadow-red);
}


/* =========================================================
 INPUTS / SELECTS / TEXTAREAS
========================================================= */

input,
select,
textarea {
 background: var(--lr-glass-2) !important;
 color: #ffffff !important;
 border: 1px solid rgba(255, 255, 255, 0.12) !important;
 border-radius: var(--lr-radius-sm) !important;
 box-shadow: none !important;
 backdrop-filter: var(--lr-blur-sm);
 -webkit-backdrop-filter: var(--lr-blur-sm);
 padding: 12px 14px;
}

input::placeholder,
textarea::placeholder {
 color: rgba(255, 255, 255, 0.55) !important;
}

input:focus,
select:focus,
textarea:focus {
 background: var(--lr-glass-3) !important;
 border-color: rgba(255, 0, 0, 0.50) !important;
 outline: none !important;
 box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.14);
}

/* form rows */
form,
fieldset,
legend,
.form-row,
.form-group,
.form-control,
.input-row,
.input-group,
.search-row,
.search-group,
.filter-row,
.filter-group,
.select-row,
.select-group,
.decode-row,
.decode-group,
.vin-row,
.vin-group,
.garage-row,
.garage-group {
 background: transparent !important;
 background-color: transparent !important;
 box-shadow: none !important;
}


/* =========================================================
 TABLES
========================================================= */

table,
thead,
tbody,
tr,
th,
td {
 background: transparent !important;
}

table {
 width: 100%;
 border-collapse: collapse;
}

th,
td {
 border-color: var(--lr-line-soft) !important;
 padding: 12px 14px;
 color: var(--lr-text-soft);
}


/* =========================================================
 TEXT
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
strong,
label,
legend {
 color: #ffffff !important;
 letter-spacing: 0.02em;
}

p,
li,
span,
small,
td,
th {
 color: var(--lr-text-soft) !important;
}

.muted,
.text-muted {
 color: var(--lr-text-muted) !important;
}


/* =========================================================
 LINKS
========================================================= */

a {
 color: #ffffff;
 text-decoration: none;
 transition: opacity 0.2s ease, color 0.2s ease;
}

a:hover {
 opacity: 0.94;
}


/* =========================================================
 IMAGES / MEDIA
========================================================= */

img,
picture,
video,
canvas {
 background: transparent !important;
 max-width: 100%;
 height: auto;
 display: block;
}

.hero img,
.hero-section img,
.featured-image,
.hero-image,
.banner-image,
.main-image {
 border-radius: var(--lr-lg);
}


/* =========================================================
 INLINE BLACK BACKGROUND KILLER
========================================================= */

body[style*="background:#000"],
body[style*="background: #000"],
body[style*="background-color:#000"],
body[style*="background-color: #000"],
body[style*="background:black"],
body[style*="background: black"],
body[style*="background-color:black"],
body[style*="background-color: black"],
body[style*="background:#000000"],
body[style*="background: #000000"],
body[style*="background-color:#000000"],
body[style*="background-color: #000000"],
body[style*="background:rgb(0,0,0)"],
body[style*="background: rgb(0,0,0)"],
body[style*="background-color:rgb(0,0,0)"],
body[style*="background-color: rgb(0,0,0)"],
.page-wrapper[style*="background:#000"],
.page-wrapper[style*="background: #000"],
.page-wrapper[style*="background-color:#000"],
.page-wrapper[style*="background-color: #000"],
.page-wrapper[style*="background:black"],
.page-wrapper[style*="background: black"],
.page-wrapper[style*="background-color:black"],
.page-wrapper[style*="background-color: black"],
.page-wrapper[style*="background:#000000"],
.page-wrapper[style*="background: #000000"],
.page-wrapper[style*="background-color:#000000"],
.page-wrapper[style*="background-color: #000000"],
.site-wrapper[style*="background:#000"],
.site-wrapper[style*="background: #000"],
.site-wrapper[style*="background-color:#000"],
.site-wrapper[style*="background-color: #000"],
.site-wrapper[style*="background:black"],
.site-wrapper[style*="background: black"],
.site-wrapper[style*="background-color:black"],
.site-wrapper[style*="background-color: black"],
.site-wrapper[style*="background:#000000"],
.site-wrapper[style*="background: #000000"],
.site-wrapper[style*="background-color:#000000"],
.site-wrapper[style*="background-color: #000000"] {
 background: transparent !important;
 background-color: transparent !important;
 background-image: none !important;
}


/* =========================================================
 ACCESSIBILITY
========================================================= */

.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
 border: 0;
}

.sr-only-focusable:focus {
 position: fixed;
 top: 10px;
 left: 10px;
 width: auto;
 height: auto;
 margin: 0;
 overflow: visible;
 clip: auto;
 white-space: normal;
 background: #111111;
 color: #ffffff;
 padding: 10px 14px;
 display: inline-block;
 z-index: 99999;
 border: 1px solid rgba(255, 255, 255, 0.18);
 border-radius: 8px;
}


/* =========================================================
 RESPONSIVE
========================================================= */

@media (max-width: 991px) {
 main {
 padding: 18px 14px 36px;
 }
}

@media (max-width: 640px) {
 body.lr-site-bg {
 background-position: center top;
 background-attachment: scroll !important;
 }

 main {
 padding: 14px 10px 28px;
 }
}