:root {
    --navbar-h: 60px;
    --viewport-width: 66vw;
    --panel-width: 34vw;
    --panel-unit: calc( var(--panel-width) / 19 / 36 );
    --panel-result-output-h: calc( var(--panel-unit) * 140 );
    --panel-heading-fs: calc( var(--panel-unit) * 36 );
    --panel-handle-fs: calc( var(--panel-unit) * 20 );
    --panel-description-fs: calc( var(--panel-unit) * 20 );
    --panel-grouped-description-fs: calc( var(--panel-unit) * 12 );
    --panel-price-fs: calc( var(--panel-unit) * 12 );
    --panel-content-padding: calc( var(--panel-unit) * 17 );
    --panel-line-item-border-bottom: calc( var(--panel-unit) * 1 );
    --panel-line-item-border: calc( var(--panel-unit) * 4 );
    --panel-line-item-swatch-min-h: calc( var(--panel-unit) * 40 );
    --panel-line-item-thumb-width: calc( var(--panel-unit) * 100 );
    --panel-line-item-thumb-height: calc( var(--panel-unit) * 40 );
    --panel-line-item-check-width: calc( var(--panel-unit) * 14 );
    --panel-controls-container-h: calc( var(--panel-unit) * 135 );
}

/* COUNTER WORDPRESS */

html, body {
    margin: 0;
    padding: 0;
    max-height: 100%;
}

* { box-sizing: border-box; }
img { width:100%; }

#buildyoursafari-section .vc_row.vc_row-flex>.vc_column_container {
	height: 0px !important;
}
#buildyoursafari-section .vc_column-inner {
	display: none;
}


#buildyoursafari-section { display: block; padding-top: 0 !important; padding-bottom: 0 !important; }

#buildyoursafari-section,
#buildyoursafari-section .vc_row.vc_row-o-full-height,
/* #buildyoursafari-section .vc_row.vc_row-flex>.vc_column_container, */
#buildyoursafari-section .vc_column-inner,
#buildyoursafari-section .wpb_wrapper { 
    height: calc( 100vh - var(--navbar-h) );
    min-height: calc( 100vh - var(--navbar-h) ) !important; 
}

.wpb_raw_code.wpb_content_element.wpb_raw_html { display: none; }

#buildyoursafari-section .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important;}

#buildyoursafari-section,
#buildyoursafari-section .vc_row.vc_row-o-full-height { padding: 0 !important; z-index: 2; }

#buildyoursafari-form-section { display: none; }

#buildyoursafari-form-section .wpforms-confirmation-container-full, 
#buildyoursafari-form-section div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: rgba(252, 226, 0, 1) !important;
    border: none !important;
    padding: 50px !important;
    box-sizing: border-box;
}

div.wpforms-container-full .wpforms-form .saf-builder-order textarea.wpforms-field-medium {
    padding: 10px 0;
    clear: both;
}

/* END COUNTER WORDPRESS */



.configurator-screen {
    display: grid;
    grid-template-columns: var(--viewport-width) var(--panel-width);
    /* align-items: center; */
    align-items: stretch;
    background: #f6f6f6;
    width: 100%;
    /* height: fit-content; */
    height: 100%;
    min-height: 100%;
    max-height: 100%;
	/* 	bk tweaks */
	/* 	position: relative;  */
min-height: calc(100vh - var(--navbar-h)) !important;
}

.configurator-screen.configurator-screen-readonly {
    grid-template-columns: 100vw 0vw;
    min-height: 400px;
    max-height: fit-content !important;
    height: fit-content !important;
}

#saf-edit-button-content {
    display: none;

    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    min-width: 70vw;

    cursor: pointer;
    text-align: center;
    text-decoration: underline;
    background-color: #fff;
    padding: var(--panel-content-padding);
    z-index: 100;
}

#buildyoursafari-section,
.vc_row.vc_row-o-full-height, 
#buildyoursafari-section.configurator-screen-readonly .vc_row.vc_row-flex>.vc_column_container, 
#buildyoursafari-section.configurator-screen-readonly .vc_column-inner, 
#buildyoursafari-section.configurator-screen-readonly .wpb_wrapper {
    min-height: fit-content !important;
    height: fit-content !important;
}

#safari_viewport {
    position: relative;
    background: #ffffff;
    max-height: 100%;
    height: 100%;
    /* transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -moz-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    -ms-transition: all 350ms ease-out; */
}
    .view-controls-container {
        position: absolute;
        bottom: 0;
        height: var(--panel-controls-container-h);
        width: 100%;
        /* border: 1px solid #eee; */
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        gap: calc( var(--panel-unit) * 16 );
    }

        .saf-btn-view { font-size: calc( var(--panel-unit) * 14 ); text-align: center; cursor: pointer; }
        .saf-btn-view::before {
            content: "•";
            height: calc( var(--panel-unit) * 32 );
            font-size: calc( var(--panel-unit) * 32 );
            line-height: 1em;
            display: block;
            text-align: center;
            margin-bottom: calc( var(--panel-unit) * 14 );
            background-position: center center;
            background-size: contain;
            background-repeat: no-repeat;
        }
        
        .saf-btn-view-active { border-bottom: 1px solid #1b1f25; }
        
        .saf-btn-view-EXTERIOR::before { content:""; background-image: url(buildyoursafari-lib/BUTTONS/EXTERIOR.webp); }
        .saf-btn-view-INTERIOR::before { content:""; background-image: url(buildyoursafari-lib/BUTTONS/INTERIOR.webp); }

.viewport-view-type {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: none;
}
#EXTERIOR { display: block; }

#safari_viewport .viewport-view-type > div {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
}
#safari_panel { 
    background-color: #f6f6f6; 
    padding: calc( var(--panel-unit) * 40 );
    margin: 0;
    height: 100%;
    max-height: calc( 100% - var(--panel-result-output-h) );
    overflow-y: auto;
    display: grid;
    align-items: center;
}

.saf-panel-heading {
    color: #1b1f25;
    font-family: 'Bruta Pro Extended - Semi Bold';
    font-size: var(--panel-heading-fs);
    line-height: 1em;
    text-transform: uppercase;
    margin-bottom: calc( var(--panel-unit) * 60 );
}
.saf-panel-accordian {
    margin-bottom: calc( var(--panel-unit) * 10 );
}
.saf-panel-accordian:last-of-type {
    margin-bottom: 0;
}

.saf-panel-handle {
    display: grid;
    align-items: center;
    grid-template-columns: 50fr 1fr;

    background-color: #1b1f25;
    color: #ffffff;
    padding: calc( var(--panel-unit) * 20 );
    font-family: 'Bruta Pro Extended - Regular';
    font-size: var(--panel-handle-fs);
    line-height: 1em;

    cursor: pointer;
}
.saf-panel-accordian-active .saf-panel-handle {
    background-color: #fce200;
    color: #1b1f25;
}

.saf-panel-handle::after {
    content: "";
    display: block;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 8.05"><polygon points="7.01 8.05 0 2.66 0 0 7.01 5.39 14.02 0 14.02 2.66 7.01 8.05" fill="%23f6f6f6"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: calc( var(--panel-unit) * 15 );
    height: calc( var(--panel-unit) * 19 );
    transform: rotate(0deg);
}
.saf-panel-accordian-active .saf-panel-handle::after {
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 8.05"><polygon points="7.01 8.05 0 2.66 0 0 7.01 5.39 14.02 0 14.02 2.66 7.01 8.05" fill="%231b1f25"/></svg>');
    transform: rotate(180deg);
}


.saf-panel-content {
    display: none;
    font-family: 'Bruta Pro Extended - Regular';
    font-size: var(--panel-handle-fs);
    line-height: 1em;
    background-color: #fff;
    /* height: 0;
    overflow: hidden; */
    transition: all 350ms ease-out;
    -moz-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -ms-transition: all 350ms ease-out;
}

.saf-line-item {
    display: grid;
    grid-template-columns: var( --panel-line-item-thumb-width ) 1fr var( --panel-line-item-check-width );
    align-items: center;
    /* align-items: stretch; */
    background: #ffffff;
    padding: var(--panel-content-padding);
    border-bottom: var(--panel-line-item-border-bottom) solid #bcbfc1;
    margin-bottom: calc( var(--panel-unit) * 4 );
    cursor: pointer;
}
.saf-line-item:last-of-type { border-bottom: none; }

.saf-line-item::after {
    content: "";
    display: block;
    width: calc( var(--panel-unit) * 12 );
    height: calc( var(--panel-unit) * 9 );
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 8.64"><polyline points=".69 4.37 3.69 7.24 10.29 .71" fill="none" stroke="%231b1f25" stroke-miterlimit="10" stroke-width="2"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transition: all 350ms ease-out;
    -moz-transition: all 350ms ease-out;
    -o-transition: all 350ms ease-out;
    -webkit-transition: all 350ms ease-out;
    -ms-transition: all 350ms ease-out;
}

.saf-line-item.saf-line-item-active {
    border: var(--panel-line-item-border) solid #fce200;
}
.saf-line-item.saf-line-item-active::after {
    opacity: 1;
}

.saf-line-item .saf-line-item-thumb,
.saf-line-item .saf-line-item-swatch {
    max-width: var( --panel-line-item-thumb-width );
    padding-bottom: var(--panel-line-item-thumb-height);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 0;
}

.saf-line-item-swatch[style="background-color:#ffffff;"],
.saf-line-item-swatch[style="background-color:#fff;"] {
    border: 1px solid #efefef;
}

/* .saf-line-item .saf-line-item-swatch { min-height: var(--panel-line-item-swatch-min-h);} */

.saf-line-item-description-container { padding-left:  calc( var(--panel-unit) * 52 );}
.saf-line-item-description { font-size: var(--panel-description-fs); line-height: 1em;}
.saf-line-item-price { display:none; font-size: var(--panel-price-fs); color: #94989b; }

/* *************************
/* LINE ITEM GROUPS 
/* ************************/

.saf-line-item-group { border-top: var(--panel-line-item-border-bottom) solid #bcbfc1; }
.saf-line-item-group:first-child { border-top: none; }

.saf-line-item-group-handle {
    display: grid;
    align-items: center;
    grid-template-columns: 50fr 1fr;
    padding: calc( var(--panel-unit) * 20 );
}
/* .saf-line-item-group-handle {
    position: relative;
}
.saf-line-item-group-handle::after {
    content: "";
    display: block;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 8.05"><polygon points="7.01 0 0 5.39 0 8.05 7.01 2.66 14.02 8.05 14.02 5.39 7.01 0" fill="%23bcbfc1"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    width: calc( var(--panel-unit) * 15 );
    height: calc( var(--panel-unit) * 19 );
} */

.saf-line-item-group-content,
.saf-line-item-accordian .saf-line-item-accordian-content .saf-line-item-group-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 0 var(--panel-content-padding);
    gap: var(--panel-content-padding); 
    align-items: start;
}

.saf-line-item-group-content .saf-line-item,
.saf-line-item-accordian .saf-line-item-group-content .saf-line-item,
.saf-line-item-accordian .saf-line-item-group .saf-line-item-group-content .saf-line-item {
    grid-template-columns: 1fr;
    padding: 0;
    position: relative;
    border: none;
}
.saf-line-item-group-content .saf-line-item::after,
.saf-line-item-accordian .saf-line-item-group-content .saf-line-item::after,
.saf-line-item-accordian .saf-line-item-group .saf-line-item-group-content .saf-line-item::after {
    position: absolute;
    top: calc( var(--panel-line-item-swatch-min-h) / 2 );
    left: 50%;
    width: calc( var(--panel-unit) * 21 );
    height: calc( var(--panel-unit) * 21 );
    transform: translate( -50%, -50% );
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.84 20.84"><circle cx="10.42" cy="10.42" r="10.42" fill="%231b1f25"/><polyline points="5.62 10.81 8.61 13.68 15.22 7.15" fill="none" stroke="%23fff" stroke-miterlimit="10" stroke-width="2"/></svg>');
}

.saf-line-item-group-content .saf-line-item.saf-line-item-active,
.saf-line-item-accordian .saf-line-item-accordian-content .saf-line-item-group-content .saf-line-item.saf-line-item-active,
.saf-line-item-accordian .saf-line-item-accordian-content .saf-line-item-group .saf-line-item.saf-line-item-active {
    border: none;
}


.saf-line-item-group-content .saf-line-item-description-container,
.saf-line-item-accordian .saf-line-item-accordian-content .saf-line-item-group-content .saf-line-item-description-container,
.saf-line-item-accordian .saf-line-item-accordian-content .saf-line-item-group .saf-line-item-description-container {
    padding-left: 0;
    padding-top: calc( var(--panel-unit) * 8 );
}
.saf-line-item-group-content .saf-line-item .saf-line-item-thumb, 
.saf-line-item-accordian .saf-line-item-accordian-content .saf-line-item-group-content .saf-line-item .saf-line-item-thumb, 
.saf-line-item-group-content .saf-line-item .saf-line-item-swatch,
.saf-line-item-accordian .saf-line-item-accordian-content .saf-line-item-group-content .saf-line-item .saf-line-item-swatch {
    max-width: 100%;
    padding-bottom: var(--panel-line-item-thumb-height);
}
.saf-line-item-group-content .saf-line-item.saf-line-item-active .saf-line-item-thumb, 
.saf-line-item-accordian .saf-line-item-accordian-content .saf-line-item-group-content .saf-line-item.saf-line-item-active .saf-line-item-thumb, 
.saf-line-item-group-content .saf-line-item.saf-line-item-active .saf-line-item-swatch,
.saf-line-item-accordian .saf-line-item-accordian-content .saf-line-item-group-content .saf-line-item.saf-line-item-active .saf-line-item-swatch {
    border: var(--panel-line-item-border) solid #1b1f25;
}

.RESTRICTION-KEY-RIMS .saf-line-item-swatch,
.RESTRICTION-KEY-HEADLIGHTS .saf-line-item-swatch,
.RESTRICTION-KEY-TAIL .saf-line-item-swatch,
.RESTRICTION-KEY-SEATS .saf-line-item-swatch {
    background-size: contain;
}

.RIMS-line-items:not(.saf-line-item-group) .saf-line-item { grid-template-columns: calc( var(--panel-unit) * 63) 1fr var(--panel-line-item-check-width ); }
.RIMS-line-items:not(.saf-line-item-group) .saf-line-item-description-container { padding-left: calc( var(--panel-unit) * 20 ); }

.RESTRICTION-KEY-RIMS:not(.saf-line-item-group) > :not(.saf-line-item-group-content) .saf-line-item-swatch {
    max-width: calc( var(--panel-unit) * 63 );
    padding-bottom: calc( var(--panel-unit) * 63 );
}


.saf-line-item-group-content .saf-line-item-description,
.saf-line-item-accordian-group .saf-line-item-group-content .saf-line-item-description { font-size: var(--panel-grouped-description-fs); line-height: 1em;}

.saf-line-item-accordian {
    border-top: var(--panel-line-item-border-bottom) solid #bcbfc1;
}
.saf-line-item-accordian:first-child { border-top: none; }
.saf-line-item-accordian .saf-line-item:not(.saf-line-item-active) { border-bottom: none; }

.saf-line-item-accordian-handle {
    display: grid;
    align-items: center;
    grid-template-columns: 50fr 1fr;
    padding: calc( var(--panel-unit) * 20 );
    cursor: pointer;
}
.saf-line-item-accordian-handle::after {
    content: "";
    display: block;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 8.05"><polygon points="7.01 0 0 5.39 0 8.05 7.01 2.66 14.02 8.05 14.02 5.39 7.01 0" fill="%23bcbfc1"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: calc( var(--panel-unit) * 15 );
    height: calc( var(--panel-unit) * 19 );
    transform: rotate(180deg);
}
.saf-line-item-accordian-handle.saf-line-item-accordian-handle-active::after {
    transform: rotate(0deg);
}
.saf-line-item-accordian-content { display: none; }




#safari_result_output { 
    position: absolute;
    bottom: 0;
    right: 0;
    padding: calc( var(--panel-unit) * 40 );
    margin: 0;
    width: var(--panel-width);
    height: var(--panel-result-output-h);
    background-color: #1b1f25;
    display: grid;
    grid-template-columns: 45% 55%;
    border-top: 1px solid #333;
    z-index: 2;
}
    .saf-output-heading { 
        font-size: calc( var(--panel-unit) * 14 ) ;
        line-height: 1em;
        color: #fff;
        margin-bottom: calc( var(--panel-unit) * 8 );
    }
        .saf-output-heading h3 {
            --var-heading-padding-top: calc( var(--panel-result-output-h) * 0.125 );
            color: #fff;
            font-size: calc(var(--panel-unit)* 18) !important;
            line-height: 1em !important;
            padding: var(--var-heading-padding-top) 0;
            margin: 0;
        }

    .saf-output-price { 
        font-family: 'Bruta Pro Extended - Semi Bold';
        font-size: calc( var(--panel-unit) * 26 ) ;
        line-height: 1em;
        color: #fce200;
    }
    .saf-output-form {
        display: block;
    }

    .saf-output-form form {
        display: flex;
    }

    .saf-output-form input[type="text"] {
        font-size: calc( var(--panel-unit) * 14 ) ;
        line-height: 1em;
        height: calc( 1em + ( var(--panel-unit) * 40 ) );
        border: 1px solid #bcbfc1;
        color: #bcbfc1;
        background-color: transparent;
        padding: calc( var(--panel-unit) *20 );
        flex-grow: 2;
    }

    .saf-output-form input[type="submit"] {
        font-family: 'Bruta Pro Extended - Semi Bold';
        font-size: calc( var(--panel-unit) * 14 );
        line-height: 1em;
        height: calc( 1em + ( var(--panel-unit) * 40 ) );
        border: 1px solid #fce200 !important;
        color: #1b1f25;
        background-color: #fce200;
        padding: calc( var(--panel-unit) *20 );
        flex-grow: 1;
        border-radius: 0;
        cursor: pointer;
    }

     
    .saf-output-currency-dropdown { 
        font-size: calc( var(--panel-unit) * 10 ) ;
        line-height: 1em;
        color: #fff;
        display: grid;
        align-items: center;
        grid-template-columns: calc( var(--panel-unit) * 22 ) 1fr;
    }
    
    
    .saf-output-currency-dropdown::before {
        content: "";
        display: inline-block;
        background-size: contain;
        background-repeat: no-repeat;
        width: calc( var(--panel-unit) * 18 ) ;
        height: calc( var(--panel-unit) * 11 ) ;
     }

     .saf-output-currency-dropdown-zar::before {
        background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Content" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 10.5"><defs><clipPath id="clippath"><rect width="18" height="10.5" fill="%23fff"/></clipPath></defs><rect width="18" height="10.5" fill="%23fff"/><g clip-path="url(%23clippath)"><polygon points="3.15 0 8.4 3.5 18 3.5 18 0 3.15 0" fill="%23cd3033"/><polygon points="9.45 4.2 18 4.2 18 3.5 8.4 3.5 9.45 4.2" fill="%23fff"/><polygon points="8.4 7 18 7 18 6.3 9.45 6.3 8.4 7" fill="%23fff"/><polygon points="8.4 7 3.15 10.5 18 10.5 18 7 8.4 7" fill="%231f1898"/><polygon points="0 3.5 2.09 3.5 0 2.1 0 3.5"/><polygon points="0 3.5 0 7 2.09 7 4.72 5.25 2.09 3.5 0 3.5"/><polygon points="0 7 0 8.4 2.09 7 0 7"/><polygon points="0 2.1 4.72 5.25 0 8.4 0 9.24 5.98 5.25 0 1.26 0 2.1" fill="%23ceb43b"/><polygon points="0 0 0 1.26 5.98 5.25 0 9.24 0 10.5 1.89 10.5 8.19 6.3 18 6.3 18 4.2 8.19 4.2 1.89 0 0 0" fill="%2332784c"/></g></svg>');
     }

@media (max-width: 1024px){
    :root {
        --navbar-h: 80px;
    }
}

@media (max-width:840px){
    :root {
        --navbar-h: 60px;
        --viewport-width: 100vw;
        --panel-width: 100vw;
        --panel-controls-container-h: calc( var(--panel-unit) * 70 );
    }

    #buildyoursafari-section, 
    #buildyoursafari-section .vc_row.vc_row-o-full-height, 
/*     #buildyoursafari-section .vc_row.vc_row-flex>.vc_column_container,  */
    #buildyoursafari-section .vc_column-inner, 
    #buildyoursafari-section .wpb_wrapper {
        height: fit-content;
    }

    .configurator-screen { display: block; padding-bottom: 150px; background: transparent; }

    #safari_viewport { height: 0; padding-bottom: calc( 40% + var(--panel-controls-container-h) ); }
    #safari_panel { display: block; padding: 0 calc( var(--panel-unit) * 20 ); padding-top: calc( var(--panel-unit) * 30 ); padding-bottom: calc( var(--panel-unit) * 30 ); min-height: inherit; height: inherit; max-height: inherit; overflow: inherit; }
    /* #safari_result_output { position: fixed; z-index: 2; } */
    #safari_result_output { background: #292e36; }

    .saf-panel-heading { margin-bottom: calc( var(--panel-unit) * 30 ); }
}

@media (max-width:640px){
    #safari_viewport { padding-bottom: calc( 50% + var(--panel-controls-container-h) ); }
    #safari_viewport .viewport-view-type > div { left: 50%; width: 115%; transform: translate(-50%, -50%); }
}

@media (max-width:480px){
    :root {
        --panel-controls-container-h: calc( var(--panel-unit) * 95 );
    }
    #safari_viewport { padding-bottom: calc( 60% + var(--panel-controls-container-h) ); }
    #saf-edit-button-content { min-width: 80vw; }
}