/*
Theme Name: Carz Child Theme
Theme URI: https://carz.ancorathemes.com/
Description: Carz is a Premium WordPress theme that has built-in support for popular Page Builders, slider with swipe gestures, and is SEO- and Retina-ready. The unique system of inheritance and override options allows setting up individual parameters for different sections of your site and supported plugins.
Author: AncoraThemes
Author URI: https://ancorathemes.com/
Version: 1.12.0
Tested up to: 6.6
Requires at least: 5.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, e-commerce, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
Text Domain: carz
Template: carz
*/


/* =Child-Theme customization starts here
------------------------------------------------------------ */

/*HELPERS*/
.d-none {
	display: none!important;
}

.fs-sm{
	font-size: 14px!important
}

.border-round-md {
	overflow:hidden!important;
	border-radius: 16px!important;
}

.border-round-sm {
	overflow:hidden!important;
	border-radius: 12px!important;
}


@media (max-width: 768px){
	.w-100-sm {
		width: 100%!important;
	}
}

@media (min-width: 1280px){
	.d-lg-none{
		display: none;	
	}
}

/* Elementor Spacer fallback */
.elementor-column .elementor-spacer-inner {
    height: var(--spacer-size);
}

/*MENU*/

#main-btn-icon .elementor-button-content-wrapper{
	align-items: center;
}

#main-btn-icon svg {
	font-size: 20px;
}

.menu-item.menu-item-has-children.menu-collapse{
	display: none!important;
}

.mega-menu .sc_layouts_submenu {
	padding: 0!important;
}

/*POPUP*/

@media (max-width: 767px){
	.mfp-wrap .mfp-close {
		width: 34px;
		height: 34px;
		line-height: 34px;
		margin: -14px -5px 0 0!important;
		background: #141414;
		border-radius: 20px;
		color: white;
		opacity: 0.9;
	}
	
	.mfp-content .sc_layouts_popup {
    	max-width: 90vw;

	}
	
}




/*HOME CONTACT FORM*/
.form-dark input, .form-dark textarea {
	color: white!important;
}

.wpcf7-form-control-wrap .wpcf7-list-item-label::before{
/* 	color: white!important; */
}

.wpcf7-response-output.trx_addons_message_box.trx_addons_message_box_info {
	color: red;
	border-color: red;
}

wpcf7-response-output.trx_addons_message_box.trx_addons_message_box_success{
	color: #89d86b!important;
}

/*CAR CARD*/

.sc_cars_item_param_icon {
	color: #98a1a7;
	font-size: 2.4em
}

.sc_cars_item_options.sc_cars_item_footer {
	display: none !important;
}

.sc_cars_default .sc_cars_item .sc_cars_item_info .sc_cars_item_params{
	border-bottom:none !important;
	padding-bottom: 0px !important;
	margin-bottom: 0px !important;
	padding-top: 1.2rem;
	display: none;
}

.sc_cars_item_compare.trx_addons_icon-balance-scale{
	display: none;
}


.sc_cars_item{
	box-shadow: 0px 1px 10px 0px rgb(0 0 0 / 5%);
	border-radius: 10px;
	overflow:hidden;
}

.sc_cars_item_info{
	background-color: #fdfdfd!important;
	border: 1px solid #efefef!important;
}

.sc_cars_item_price {
	display:none;
}

.sc_cars_item_price .cars_price{
	background: #2a2a2a3b !important;
    padding: 8px 16px !important;
    margin: 18px !important;
    border-radius: 10px!important;
    border: 1px solid #bbbbbb !important;
	font-size: 1.25em!important;
}


.slider_pagination_wrap.swiper-pagination.swiper-pagination-progressbar.swiper-pagination-horizontal{
	border-radius: 10px;
    overflow: hidden;
    width: 92%;
    margin-inline: auto;
    margin-top: 40px;
    height: 4px;
}

/*CAR PAGE*/

.cars_page_section.cars_page_agent .cars_page_section_title{
	display:none!important;
}

@media (min-width: 769px){
	.cars_page_section.cars_page_header{
/* 		margin-top: -60px!important; */
	}
}

.sc_icompare_handler {
	--sc-icompare-handler-size: 58px;
}

/*Car Table*/


.car-page-table td, .car-page-table th{
	padding: 0.5rem 1.25rem!important;
	border-color: #a3a3a3!important;
}

.car-page-table th {
	font-size: 14px!important;
	background: #1b2333!important;
    color: white;
    border: 1px solid #444444;
	font-weight: 900;
}

.car-page-table thead {
    border-bottom: 0px;
}

.wp-block-table {
    width: 100%;
	align-items: start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wp-block-table table {
    min-width: max-content;
    width: 100%;
}

.wp-block-table th,
.wp-block-table td {
    min-width: 130px;
}

.wp-block-table th {
    white-space: normal;
}

.wp-block-table td {
    white-space: nowrap;
}

/*CAR PAGE AGENT FORM*/

.cars_page_agent_wrap{
	margin-top: 80px;
	padding: 60px;
	border: 1px solid #f7f7f7;
	box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 10%)
	border-radius: 12px;
}

.cars_page_agent_info_name a{
	display: none!important;
}

.cars_page_agent_info_position{
	background-color: #1B2333!important;
	color: white!important;
}

.cars_page_agent_info{
	width: 50%;
	margin-bottom: 28px!important;
}

.cars_page_agent_avatar{
	width: 50%;
}

.cars_page_agent_form{
	width: 100%;
	margin:auto;
	margin-top: 40px;
}

@media (max-width: 768px){
	.cars_page_agent_wrap{
		padding: 30px;
	}
}

@media (min-width: 1280px){
	.cars_page_agent_form_title{
		display:none!important;
	}
}

.wpcf7-checkbox .wpcf7-list-item {
	margin: 0!important;
}


/*CUSTOM CARDS*/

.shine-block{
	border: 1px solid #efefef;
	background-color: #fff;
	box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 5%);
}

/*SERVICE PAGES*/
.services_page_featured{
	max-height: 500px;
}

/*FOOTER*/
@media (max-width: 767px){
		.footer_wrap .footer-header{
			padding: 0 0 0 0!important;
		}
	}



/* =========================================================
   CAR HERO
========================================================= */

/*Override page width for cars*/
.cpt_cars-template-default .content_wrap{
/* 	width:100%!important; */
}


.df-car-hero__background {
    overflow: hidden;
}

.df-car-hero__image {
    transform: translate3d(0, 0, 0) scale(1.08);
    will-change: transform;
}


.cpt_cars-template-default .page_content_wrap {
    padding-top: 0rem;

}


.df-car-hero {
    position: relative;
    width: 100%;
	height: fit-content;
    overflow: hidden;
    background: #111;
    color: #fff;
	
	    width: 100vw;
    max-width: none;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
	margin-bottom: 100px;
}


/* Background image */

.df-car-hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.df-car-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* Overlay */

.df-car-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

/*     background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.62) 0%,
            rgba(0, 0, 0, 0.25) 35%,
            rgba(0, 0, 0, 0.02) 65%
        ),
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.25) 0%,
            transparent 35%
        ); */
	
	background: linear-gradient(90deg, rgba(12, 12, 12, 0.95) 0%, rgba(11, 11, 11, 0.84) 5.67%, rgba(10, 10, 10, 0.77) 11.34%, rgba(9, 9, 9, 0.68) 17.01%, rgba(8, 8, 8, 0.60) 22.68%, rgba(7, 7, 7, 0.53) 28.35%, rgba(6, 6, 6, 0.43) 34.02%, rgba(5, 5, 5, 0.33) 39.69%, rgba(5, 5, 5, 0.23) 45.36%, rgba(4, 4, 4, 0.13) 51.03%, rgba(3, 3, 3, 0.1) 56.7%, rgba(3, 3, 3, 0.05) 62.37%, rgba(3, 3, 3, 0.03) 68.04%, rgba(2, 2, 2, 0.02) 73.71%, rgba(2, 2, 2, 0.01) 79.38%, rgba(2, 2, 2, 0) 85%, rgba(2, 2, 2, 0) 86%, rgba(2, 2, 2, 0) 87%, rgba(1, 1, 1, 0) 88%, rgba(1, 1, 1, 0) 89%, rgba(1, 1, 1, 0) 90%, rgba(1, 1, 1, 0) 91%, rgba(1, 1, 1, 0) 92%, rgba(1, 1, 1, 0) 93%, rgba(0, 0, 0, 0) 94%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 96%, rgba(0, 0, 0, 0) 97%, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0) 99%, rgba(0, 0, 0, 0) 100%),  linear-gradient(            0deg,            rgba(0, 0, 0, 0.25) 0%,            transparent 35%        )
}


/* Main hero layout */

.df-car-hero__main {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

/*     padding:        clamp(120px, 14vh, 180px)        clamp(25px, 4vw, 80px)        clamp(50px, 10vh, 90px); */
	padding: clamp(25px, 6vh, 60px)        clamp(25px, 4vw, 80px)        clamp(50px, 10vh, 90px);

    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px; 
    gap: clamp(30px, 5vw, 90px);
    align-items: end;

    box-sizing: border-box;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.df-car-hero__intro {
    max-width: 750px;
	margin-top: 60px;
}


/* Price */

.df-car-hero__price {
    margin-bottom: 25px;

    font-size: clamp(18px, 1.4vw, 25px);
    line-height: 1.3;
    font-weight: 500;

    color: #fff;
}

.df-car-hero__price * {
    color: inherit;
}


/* Car title */

.df-car-hero__title {
    margin: 0;

    font-size: clamp(60px, 7vw, 135px);
    line-height: 0.95;
    font-weight: 500;
    letter-spacing: -0.04em;

    color: #fff;
}


/* Buttons */

.df-car-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

    margin-top: 45px;
}

.df-car-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;
    padding: 10px 24px;

    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 5px;

    font-size: 16px;
    line-height: 1;
    font-weight: 500;
    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.df-car-button--primary {
    background: #e72127;
	border-color: #e72127;
    color: #fff;
}

.df-car-button--primary:hover {
    background: #d70e14;
    color: #fff;
}

.df-car-button--secondary {
    background: transparent;
    color: #fff;
}

.df-car-button--secondary:hover {
    background: #fff;
    color: #111;
}

@media (min-width: 1200px){
	.df-car-hero{
		height: 80svh;
		min-height: 600px;
	}
}


/* =========================================================
   RIGHT SPECIFICATIONS
========================================================= */

.df-car-hero__specs {
    width: 80%;
/* 	height: 100%; */

    padding: 28px 25px;

    display: flex;
    flex-direction: column;
    gap: 26px;

    background: rgba(15, 15, 15, 0.45);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

@media (max-width: 767px) {
	.df-car-hero__specs {
	    width: 100%;
	}
}

@media (min-width: 768px ) and (max-width: 1199px){
	.df-car-hero__specs{
		    gap: 20px;
	}
}

.df-car-spec {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.df-car-spec__label {
    font-size: 13px;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.65);
}

.df-car-spec__value {
    font-size: 19px;
    line-height: 1.2;
    font-weight: 500;
    color: #fff;
}

.df-car-spec[hidden] {
    display: none !important;
}



/* ======================================
 CAR VARIANTS SWITCH
========================================*/

.df-variant-switcher {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    padding: 3px;
    border-radius: 14px;
    background: rgba(35, 39, 44, 0.65);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    gap: 3px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	position: absolute;
    top: 48px;
    left: 0;
    margin-inline: clamp(25px, 4vw, 80px);
}

.df-variant-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 14px 22px;
    border-radius: 11px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.df-variant-button:hover {
    background: rgba(255, 255, 255, 0.14);
}

.df-variant-button.is-active,
.df-variant-button.is-active:hover {
    background: #fff;
    color: #17191c;
}

.df-variant-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 767px) {

    .df-variant-switcher {
        display: flex;
        width: calc(100% - 47px);
    	margin-inline: 20px;
    }

    .df-variant-button {
        flex: 1;
        min-width: 0;
        padding: 12px 8px;
        font-size: 12px;
        text-align: center;
    }

}

.df-car-hero {
    position: relative;
}


/* Hero content layout with variant switcher */




/* .df-car-hero__main:has(.df-variant-switcher) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "switcher switcher"
        "intro specs";
    align-content: center;
}

.df-car-hero__main > .df-variant-switcher {
    grid-area: switcher;
    justify-self: start;
    position: relative;
    z-index: 5;
    margin-bottom: 32px;
}

.df-car-hero__main > .df-car-hero__intro {
    grid-area: intro;
}

.df-car-hero__main > .df-car-hero__specs {
    grid-area: specs;
}

@media (max-width: 767px) {

    .df-car-hero__main:has(.df-variant-switcher) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "switcher"
            "intro"
            "specs";
    }

    .df-car-hero__main > .df-variant-switcher {
        justify-self: stretch;
        margin-bottom: 24px;
    }
} */


/*==================================================
 CAR VARIANT PRICE RESTYLE
====================================================*/

.df-car-hero__price--variants {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.df-car-price-main {
    font-family: inherit;
    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    color: inherit;
}

.df-car-price-monthly {
    font-family: inherit;
    font-size: clamp(13px, 1.2vw, 17px);
    font-weight: 400;
    line-height: 1.4;
    color: inherit;
}

/* =========================================================
   WORDPRESS CONTENT
========================================================= */

.df-car-content {
    width: var(--theme-var-page);
    margin: auto;
}

.df-car-content__inner {
    width: min(1400px, calc(100% - 60px));
    margin: 0 auto;
    padding: 80px 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    .df-car-hero__main {
        grid-template-columns: minmax(0, 1fr) 200px;
    }

    .df-car-hero__title {
        font-size: clamp(55px, 9vw, 90px);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .df-car-hero {
        height: auto;
        min-height: 100svh;
    }

    .df-car-hero__image {
        object-position: center center;
    }

    .df-car-hero__overlay {
        background:
/*             linear-gradient(                0deg,                rgba(0, 0, 0, 0.85) 0%,                rgba(0, 0, 0, 0.35) 65%,                rgba(0, 0, 0, 0.1) 100%            ); */
			linear-gradient(
                88deg,
                rgba(0, 0, 0, 0.85) 0%,
                rgba(0, 0, 0, 0.35) 65%,
                rgba(0, 0, 0, 0.1) 100%
            )
    }

    .df-car-hero__main {
        min-height: 100svh;

        padding:            60px            20px            30px;

        display: flex;
        flex-direction: column;
/*         justify-content: flex-end; */
        align-items: stretch;
        gap: 30px;
    }

    .df-car-hero__title {
        font-size: clamp(48px, 15vw, 75px);
    }

    .df-car-hero__price {
        margin-bottom: 15px;
        font-size: 17px;
    }

    .df-car-hero__buttons {
        margin-top: 30px;
    }

    .df-car-button {
        flex: 1 1 auto;
    }
	
	.df-car-button--primary, .df-car-button--secondary{
		width: 100%;
	}


    /* Specs become horizontal cards */

    .df-car-hero__specs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        gap: 0;

        padding: 0;

        background: rgba(15, 15, 15, 0.5);
        overflow: hidden;
    }

    .df-car-spec {
        padding: 18px;

        border-right: 1px solid rgba(255,255,255,.12);
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .df-car-content__inner {
        width: calc(100% - 40px);
        padding: 50px 0;
    }

}

/* =========================================================
   WARRANTY BADGE
========================================================= */

/* BADGES CONTAINER */

.warranty-badges {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;

    width: 100%;
}


/* LARGE SCREEN:
   Two badges side by side, centered */

.warranty-badges .warranty-badge {
    width: 100%;
    max-width: 360px;
}


/* SMALL SCREEN:
   Stack badges and stretch them full width */

@media (max-width: 767px) {

    .warranty-badges {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .warranty-badges .warranty-badge {
        width: 100%;
        max-width: none;
    }
}


.warranty-badge {
    --badge-blue: #323e44;

    display: inline-flex;
    align-items: stretch;

    width: 100%;
    max-width: 360px;

    border: 3px solid var(--badge-blue);
    border-radius: 6px;
    overflow: hidden;

    background: #fff;
    color: var(--badge-blue);

    /* Font is inherited from the theme */
    line-height: 1;
}


/* LEFT BLUE BLOCK */

.warranty-badge__years {
    flex: 0 0 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 86px;

    background: var(--badge-blue);
    color: #fff;
}

.warranty-badge__number {
    font-size: 72px;
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -4px;
}

.warranty-badge__year-text {
    margin-left: 4px;

    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .5px;

    writing-mode: vertical-rl;
    transform: rotate(180deg);
}


/* RIGHT SIDE */

.warranty-badge__content {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 9px 10px 7px;
}

.warranty-badge__title {
    margin-bottom: 10px;

    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.warranty-badge__details {
    display: flex;
    align-items: flex-end;
    white-space: nowrap;
}

.warranty-badge__or {
    margin-right: 5px;
    margin-bottom: 2px;

    font-size: 13px;
}

.warranty-badge__km {
    font-size: 25px;
    font-weight: 500;
    line-height: .9;
}

.warranty-badge__mileage {
    margin-left: 4px;
    margin-bottom: 2px;

    font-size: 12px;
}

.warranty-badge__note {
    margin-top: 5px;

    font-size: 12px;
    line-height: 1.1;
    color: #111;
}


/* SMALL SCREENS */

@media (max-width: 400px) {

    .warranty-badge {
        max-width: 100%;
    }

    .warranty-badge__years {
        flex-basis: 78px;
        min-height: 78px;
    }

    .warranty-badge__number {
        font-size: 62px;
    }

    .warranty-badge__year-text {
        font-size: 16px;
    }

    .warranty-badge__content {
        padding: 7px 8px 6px;
    }

    .warranty-badge__title {
        margin-bottom: 7px;
        font-size: 17px;
    }

    .warranty-badge__or {
        font-size: 12px;
    }

    .warranty-badge__km {
        font-size: 21px;
    }

    .warranty-badge__mileage {
        font-size: 12px;
    }

    .warranty-badge__note {
        margin-top: 4px;
        font-size: 12px;
    }
}

/* =========================================================
   CAR COLOUR GALLERY
========================================================= */

.df-car-colours {
    position: relative;
    overflow: visible;
}


/* Main image */

.df-car-colours .cars_page_featured {
    position: relative;
    margin: 0;
}

.df-car-colours .cars_page_featured img {
    display: block;
    width: 100%;
    height: auto;
}


/* Colour name - overlay centered at bottom */

.df-car-color-info {
    position: absolute;
    z-index: 5;

    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;

    padding: 10px 18px;

    color: #fff;
    text-align: center;
    white-space: nowrap;

    background: rgba(0, 0, 0, 0.55);
    border-radius: 5px;

    pointer-events: none;
}

.df-car-color-label {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.7;
}

.df-car-color-name {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 500;
}


/* Thumbnails */

.df-car-colours .cars_page_gallery {
    position: static;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    width: 100%;
    max-width: none;

    margin: 15px 0 0;
    padding: 0;

    overflow: visible;
}

.df-car-colours .cars_page_gallery_item {
    flex: 0 0 90px;

    width: 90px;
    height: 60px;
    margin: 0;

    border: 2px solid transparent;
    border-radius: 7px;
    overflow: hidden;

    cursor: pointer;
    opacity: 0.7;

    transition:
        opacity 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.df-car-colours .cars_page_gallery_item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.df-car-colours .cars_page_gallery_item:hover {
    opacity: 1;
}

.df-car-colours .cars_page_gallery_item_active {
    opacity: 1;
    border-color: currentColor;
}

@media (max-width: 767px) {

    .df-car-color-info {
        bottom: 12px;
        padding: 7px 12px;
    }

    .df-car-color-label {
        font-size: 9px;
		display:none;
    }

    .df-car-color-name {
        font-size: 15px;
    }

    .df-car-colours .cars_page_gallery {
        gap: 6px;
        margin-top: 10px;
    }

    .df-car-colours .cars_page_gallery_item {
        flex: 0 0 60px;
        width: 60px;
        height: 42px;
    }
}


