@import url('typography.css');
@import url('layout.css');

:root {
    --bg-primary-color: #C62128;
    --bg-brand-dark: #0F0F0F;
    --bg-brand-light: #F2F2F2;
    --bg-brand-filter: rgba(255 157 0 / 10%);
    --bg-btn-secodary: #FE9501;
    --bg-btn-primary: #C62128;
    --light-text: #7D7D7D;
    --brand-primary-text: #C62128;
    --primary-text: #0F0F0F;
    --secondary-text: #0F1011;
    --card-text: #1A1A1A;
    --radius: 6px;
    --speed: 0.3s;
    --arrow-size: 12px;
    --box-shadow-primary: 0px 4px 25px 0px rgba(0, 0, 0, 0.15);
    --border-theme-color: #C62128;
    --border-primay-color: #B7B9BD;
    --border-secondary-color: #a6a6a6;
    --filter-count-color: #3f3f3f;
    --border-color-dark: #4E4E4E;
    --hover-title-color-primary: #113D93;
}

.fill-bg-primary-color {
	fill:var(--bg-primary-color);
}

.hover-text-primary:hover {
	color :var(--hover-title-color-primary);
	text-decoration: none !important;
	border-bottom: 1px solid var(--hover-title-color-primary);
}

.fill-bg-primary-color path{
	stroke:none;
}

.bg-brand-primary {
    background: var(--bg-primary-color);
}

.bg-brand-dark {
    background: var(--bg-brand-dark);
}

.bg-brand-light {
    background: var(--bg-brand-light);
}

.bg-btn-primary {
    background: var(--bg-btn-primary);
}

.btn-black {
    color: #000000;
}

.bg-btn-secodary {
    background: var(--bg-btn-secodary);
    color: #FFFFFF;
}


.box-shadow-primary {
	box-shadow: var(--box-shadow-primary); 
}

.brand-primary-text-color {
	color: var(--brand-primary-text);
}

.primary-text-color {
	color: var(--primary-text);

}

.secondary-text-color {
	color: var(--secondary-text);
}

.filter-color {
	color: var(--filter-count-color);
}

.card-text-color {
	color: var(--card-text);
}

.hover-radius-color:hover {
	background-color: #EBEEF2;
}

.hover-radius-36:hover {
	cursor: pointer;
	transition: 0.3s ease-in-out;
}

.border-dark-color {
	border-color: var(--border-color-dark);
}

.border-theme-color {
	border-color: var(--border-theme-color) !important;
}

.border-secondary-color {
	border-color: var(--border-secondary-color);
}

select {
	border-color: var(--border-primay-color);
	background-color: white;
	height: 40px;
}

/*Search Bar */

.search-bar .input-group {
    margin: 0 auto;
    color: #7D7D7D;
    height: 60px;
    border: 1px solid #2C2E31;
    border-radius:8px;
}

.search-bar .input-group-text {
    border-radius: 0.25rem 0 0 0.25rem;
    border-right: none;
    background-color: #fff;
    color: #7D7D7D;
}

/*Car Specs */

.specs-wrapper > div {
	align-items: center;
    display: flex;
    justify-content: center;
    padding-top: 5px;
    padding-right: 3px;
    padding-left: 3px;
    padding-bottom: 5px;
    font-size: 11px;
}

.specs-wrapper > div:nth-child(even) {
    background: white;
    border-right: 1px solid var(--border-primay-color);
    border-color: var(--border-primay-color);
}

.specs-wrapper > div:nth-child(even):last-child {
	border-right: none;
}

.specs-wrapper > div:nth-child(odd) {
    background: var(--bg-brand-light);
}

#filterBtn {
    position: fixed;
    right: 0;
    font-size: 12px;
    z-index: 1;
}

button#clearBtn {
    position: absolute;
    right: 10px;
    top: 8px;
}
#advancedSection {
  transition: all 0.3s ease;
}

@media only screen and (max-width: 771px){
}

@media only screen and (min-width: 1200px){
   header .search-bar .input-group {
        padding: 5px;
        background-color:white ;
    }
}