:root {
    --shopping-modal-margin-small: 16px;
    --shopping-modal-margin-medium: 24px;
    --shopping-modal-margin-large: 32px;
    --shopping-modal-line-height-small: 14px;
    --shopping-modal-line-height-medium: 22px;
    --shopping-modal-line-height-large: 28px;
    --shopping-modal-width-small: 480px;
    --shopping-modal-width-medium: 866px;
    --shopping-modal-width-large: 1006px;
    --shopping-modal-title-bar-color: #F5F7FB;
    --shopping-primary-color: #444444;
    --shopping-secondary-color: #757575;
    --shopping-background-color-white: #ffffff;
    --shopping-border-color: #36DDF4;
    --shopping-button-color: #2537E2;
    --border-radius: 16px;
    --font-family: 'Roboto', sans-serif, serif;
    --shopping-font-size-xsmall: 12px;  /* not used */
    --shopping-font-size-small: 14px;
    --shopping-font-size-medium: 16px;
    --shopping-font-size-large: 18px;
    --shopping-font-size-xlarge: 24px;
    --shopping-font-size-xxlarge: 32px;
    --font-weight-bold: 700;
    --line-height-small: 16px;
    --line-height-sm-med: 18px;
    --line-height-medium: 20px;
    --line-height-large: 26px;
    --line-height-xlarge: 28px;
    --max-width: 1424px;
    --separator-color: #90939D;
    --padding-small: 10px;
    --padding-medium: 14px;
    --padding-medium-large: 20px;
    --padding-large: 24px;
    --padding-xlarge: 28px;
}
.site-refresh.shopping-page{
    color: var(--shopping-primary-color);
    font-weight: 400;
    font-size: var(--shopping-font-size-medium);
    line-height: var(--line-height-medium);
    font-family: var(--font-family);
}
.site-refresh.shopping-page .offer-details-section li,
.site-refresh.shopping-page .terms-section li{
    margin-left: var(--padding-large) ;
}

.site-refresh.shopping-page nav .breadcrumb-item {
    color: var(--ebg-black-color);
}
.site-refresh.shopping-page .btn {
    text-transform: uppercase;
    font-weight: bold;
}
.site-refresh.shopping-page .modal-shopping {
    display: flex;
    justify-content: center;
    align-items: center;
}
.site-refresh .breadcrumb-item:last-item {
    color: var(--shopping-primary-color) !important;
}
.copy-text {
    font-size: 20px;
    line-height: var(--line-height-xlarge);
    text-align: center;
}
.site-refresh.shopping-page .card.full-image-card-3x2.no-gradient {
    background: var(--background-image-url);
    background-size: cover;
}
.site-refresh.shopping-page .card-container .card-button-container {
    display: none;
}
.site-refresh.shopping-page .inner-container {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: var(--max-width);
}
.site-refresh.shopping-page .card.full-image-card-3x2 .title {
    color: var(--shopping-background-color-white);
}
.site-refresh.shopping-page #shopping_page {
    display: block;
}
/* General styles */
.site-refresh.shopping-page {
    font-family: var(--font-family);
}
.site-refresh.shopping-page .brand-name {
    font-weight: 700;
    font-family: var(--font-family);
    font-size: var(--shopping-font-size-xxlarge);
    color: var(--shopping-background-color-white);
    margin-bottom: var(--shopping-modal-margin-small);
}
.site-refresh.shopping-page .brand-name-truecar {
    font-weight: 700;
    font-family: var(--font-family);
    font-size: 36px;
    color: var(--shopping-background-color-white); 
}
.site-refresh.shopping-page .body-container {
    margin: var(--padding-large) auto;
}
.site-refresh.shopping-page .body-container.truecar {
    margin-top: 16px;
}
.site-refresh.shopping-page .truecar-title {
    color: var(--shopping-primary-color);
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-large);
}

.site-refresh.shopping-page .brand-cta-container {
    border: 1px solid var(--shopping-border-color);
    border-radius: var(--border-radius);
    min-height: 300px;
}
.site-refresh.shopping-page .brand-image {
    max-height: 300px;
    max-width: 475px;
}
.site-refresh.shopping-page .brand-image img {
    height: auto;
    margin-right: var(--padding-medium);
    max-width: 100%;
}
.site-refresh.shopping-page .truecar-vehicle-search {
    border: 1px solid var(--shopping-border-color);
    border-radius: var(--border-radius);
    padding: var(--padding-medium);
}
.site-refresh.shopping-page .postal-code {
    border: 1px solid var(--separator-color);
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: row;
    margin: 0 var(--padding-medium);
    padding-left: 0;
    position: relative;
}
.site-refresh.shopping-page .btn-ebg-shopping-primary {
    background-color: var(--shopping-button-color);
    color: #ffffff;
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
}
.site-refresh.shopping-page .card.full-image-card-3x2 {
    background-repeat: no-repeat;
    background-size: contain;
    max-width: 450px;
    min-height: 300px;
}
.site-refresh.shopping-page .brand-image-col{
    max-width: 475px;
}
.site-refresh.shopping-page .title{
    color: var(--shopping-primary-color);
    font-family: var(--font-family);
    font-size: var(--shopping-font-size-xxlarge);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-large);
    margin-top: var(--padding-large);
    text-align: left;
}
.site-refresh.shopping-page .code {
    color: #142196;
}
.site-refresh.shopping-page .offer-separator {
    color: var(--separator-color);
    height: 3px;
    width: 100%;
    margin: var(--padding-small) 0;
}
.site-refresh.shopping-page .body-container.truecar .dropdown-label {
    color: var(--shopping-secondary-color);
    background-color: var(--background-color-white);
    margin-left: var(--padding-small);
    white-space: nowrap;
}
.site-refresh.shopping-page .body-container.truecar .wrench-icon:before,
.site-refresh.shopping-page .body-container.truecar .map-marker-icon:before {
    background-image: url('/common_resources/tawframework/img/icons/ic-map-marker.svg');
    background-repeat: no-repeat;
    content: '';
    display: block;
    height: var(--line-height-small);
    width: 16px;
    margin-left: 7px;
    margin-right: 7px;
}

.site-refresh.shopping-page .body-container.truecar .wrench-icon:before {
    background-image: url('/common_resources/tawframework/img/icons/ic-wrench.svg') !important;
    top: 0px;
    left: 8px;
}
.site-refresh.shopping-page .body-container.truecar .dropdown-label,
.site-refresh.shopping-page .body-container.truecar .postal-code-label,
.site-refresh.shopping-page .body-container.truecar .postal-code-label-zip,
.site-refresh.shopping-page .body-container.truecar .postal-code-label-example {
    color: var(--shopping-secondary-color);
}
.site-refresh.shopping-page .fine-print-separator {
    background-color: var(--separator-color);
    display: flex;
    height: 1px;
    margin: var(--padding-large) auto;
    width: 100%;
}
.site-refresh.shopping-page .promo-text {
    font-family: var(--font-family);
    font-size: var(--shopping-font-size-xlarge);
    font-weight: 400;
    justify-content: center;
    line-height: var(--line-height-large);
    white-space: normal;
    display: flex;
    flex-direction: column;
    text-align: left;
}
.site-refresh.shopping-page .brand-cta-container .offer-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 210px;
}
.site-refresh.shopping-page .brand-cta-container .offer-list .offer {
    justify-content: center;
    align-items: center;
    width: 100%;
}
.site-refresh.shopping-page .brand-cta-col .input-group label.input-group-text {
    padding: 0px;
    width: 25px;
    background: white;
    border-right: none;
}
.site-refresh.shopping-page .brand-cta-col .input-group select.form-select,
.site-refresh.shopping-page .brand-cta-col .input-group input.form-control {
    border-left: none;
}
.site-refresh.shopping-page .brand-cta-col .input-group select.form-select:focus,
.site-refresh.shopping-page select.form-select:focus,
.site-refresh.shopping-page .brand-cta-col .input-group input.form-control:focus,
.site-refresh.shopping-page input.form-control:focus {
    outline: none !important;
    box-shadow: none !important;
}
.site-refresh.shopping-page .brand-cta-col .input-group select.form-select:focus ~ label.input-group-text,
.site-refresh.shopping-page .brand-cta-col .input-group select.form-select:focus + label.input-group-text,
.site-refresh.shopping-page .brand-cta-col .input-group input.form-control:focus ~ label.input-group-text,
.site-refresh.shopping-page .brand-cta-col .input-group input.form-control:focus + label.input-group-text,
.site-refresh.shopping-page .brand-cta-col .input-group:focus-within label.input-group-text,
.site-refresh.shopping-page .brand-cta-col .input-group:has(input.form-control:focus) label.input-group-text {
    border-color: #86b7fe !important;
}
/* Media query for screens 1199px and below */
@media (max-width: 1199px) {
    #body_container {
        margin: 0;
    }
    .site-refresh .body-container .breadcrumb {
        padding-left: 0 !important;
    }
    .site-refresh.shopping-page .brand-image-col{
        max-width: 100%;    
    }
    .site-refresh.shopping-page .brand-image{
        margin: auto;
    }
    .site-refresh.shopping-page .title{
        font-size: var(--shopping-font-size-xlarge);
        line-height: var(--line-height-large);
    }
    .site-refresh.shopping-page .promo-text {
        font-size: var(--shopping-font-size-medium);
        line-height: var(--line-height-medium);
    }
    .site-refresh.shopping-page .brand-cta-container,
    .site-refresh.shopping-page .brand-cta-container .offer-list{
        min-height: unset;
    }
    .site-refresh.shopping-page .brand-cta-container .offer-list{
        padding-bottom: var(--padding-large);
    }
}

/* Media query for screens 576px and below */
@media (max-width: 576px) {
    #body_container {
        margin: 0;
    }
    .site-refresh.shopping-page .brand-image {
        max-height: unset;
        max-width: 100%;
    }
    .site-refresh.shopping-page .card.full-image-card-3x2,
    .site-refresh.shopping-page .brand-cta-container{
        max-width: 100%;
        min-height: unset;
        border-radius: 0px;
        padding-bottom:var(--padding-large);
    }
    .site-refresh.shopping-page .brand-image-col,
    .site-refresh.shopping-page .brand-cta-col {
       padding-right: 0;
       padding-left: 0;
    }
    .site-refresh.shopping-page .offer-details-section,
    .site-refresh.shopping-page .offer-description,
    .site-refresh.shopping-page .terms-section {
        font-size: var(--shopping-font-size-small);
        line-height: var(--line-height-sm-med);
    }
    .site-refresh.shopping-page .body-container.truecar .truecar-vehicle-search {
        border-radius: 0;
        border: 1px solid var(--shopping-border-color);
    }
    .copy-text {
        font-size: var(--shopping-font-size-medium);
    }
    .site-refresh.shopping-page .body-container .offer-header-section {
        margin-top: 16px;
    }
    .site-refresh.shopping-page .body-container .card {
        background-repeat: no-repeat;
        height: auto;
    }
    .site-refresh.shopping-page .body-container .fine-print-separator {
        margin: 16px;
        width: calc(100% - 32px);
    }
    .site-refresh.shopping-page .body-container .offer-header-section .bigbutton {
        width: 100%;
    }
}