/*  VARS
=========================================== */

:root {
    --cp-white:#fff;
    --cp-green:#35926a;
    --cp-yellow:#ffd21c;
    --cp-sky-blue:#4be7ff;
    --cp-red:#db3336;
    --cp-gray:#a1a1a1;
    --cp-blue:#0072cf;
    --cp-taupe:#683d00;

    --space-micro:5px;
    --space-mini:10px;
    --space-xxs:15px;
    --space-xs:20px;
    --space-sm:25px;
    --space-xm:35px;
    --space-md:50px;
}

/*  MASTER COLORS 
    
    dk gray         var(--bricks-color-seqolj)  #333333
    off white       var(--bricks-color-ncveap)  #f5f5f5
*/


/*  ANIMATIONS
=========================================== */

@-webkit-keyframes marker_bounce {
    0%, 100% { -webkit-transform: translate3d(0,0,0); }
    50% { -webkit-transform: translate3d(0,-5px,0); }
}
@keyframes marker_bounce {
    0%, 100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-5px,0); }
}


/*  COMMON
=========================================== */

.full-container {
    width:100%;
    position: relative;
}
.d-block {
    display:block !important;
}
.d-inline-block {
    display:inline-block !important;
}
.d-flex {
    display:flex !important;
}
.justify-content-center {
    -webkit-justify-content: center;
    justify-content: center;
}
.align-items-center {
    -webkit-align-items: center;
    align-items: center;
}
.d-grid {
    display:grid !important;
}
.rel {
    position: relative;
}
.abs {
    position: absolute;
}
.tr-15 {
    -webkit-transition:0.15s all ease-in-out;
    transition:0.15s all ease-in-out;
}


/*  FORM ELEMENTS
=========================================== */

.form-fields-wrap {
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-justify-content: center;
    justify-content: center;
    gap:var(--space-xxs);
    padding:0 var(--space-mini);
}
.search-input label {
    background-color:var(--bricks-color-ncveap);
    width:1px;
    height:1px;
    top:-9999px;
    left:-9999px;
    color:var(--bricks-color-seqolj);
    -webkit-clip-path: rect(0 0 0 0);
    clip-path: rect(0 0 0 0);
    opacity: 0;
    position: absolute;
}
.search-input input {
    background-color:var(--cp-white);
    min-width:350px;
    font-size:14px;
    line-height: 1;
    color: var(--bricks-color-seqolj);
    border:none;
    border-radius:50px;
    box-shadow:0 3px 10px 0 rgba(56,58,81,0.15);
    -webkit-appearance:none;
    appearance:none;
    padding:var(--space-xxs) var(--space-md);
}
.search-input .search-icon,
.search-input .close-icon {
    height:auto;
    top:50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
}
.search-input .search-icon {
    width: 18px;
    left:var(--space-xxs);
    cursor:pointer;
}
.search-input .close-icon {
    width:20px;
    right:var(--space-xxs);
    border-radius:50%;
    cursor:pointer;
    padding:2px;
}
.search-input .close-icon:hover,
.search-input .close-icon:focus {
    border:1px solid var(--bricks-color-seqolj);
}
.product-list {
    background-color: var(--cp-white);
    max-height:47px;
    gap:var(--space-xxs);
    border-radius:50px;
    box-shadow: 0 3px 10px 0 rgba(56, 58, 81, 0.15);
    overflow: hidden;
    padding:13px var(--space-xs);
}
.product-list p {
    min-width:fit-content;
    font-size:14px;
    letter-spacing:-0.5px;
}
.product-list-track {
    overflow-x:auto;
    overflow-y:clip;
    margin:2.5px 0 -50px;
    padding-bottom: 50px;
}
.product-list-inner {
    gap:var(--space-xxs);
}
.product-list-inner label {
    font-size:14px;
    font-weight: 500;
    letter-spacing:-0.5px;
    line-height: 1;
    color:var(--bricks-color-seqolj);
    gap:var(--space-micro);
    cursor:pointer;
    opacity:0.5;
    margin-bottom:0;
}
.product-list-inner .item-wrap {
    min-width:fit-content;
}
.product-list-inner .item-wrap:has(input:checked) label {
    opacity:1;
}
.product-list-inner label span {
    background-color: var(--cp-blue);
    width:16px;
    height:16px;
    display: inline-block;
    border-radius: 50%;
    position: relative;
}
.product-list-inner .item-wrap[data-prod="aggregates"] label span {
    background-color:var(--cp-green);
}
.product-list-inner .item-wrap[data-prod="asphalt"] label span {
    background-color:var(--cp-yellow);
}
.product-list-inner .item-wrap[data-prod="cement"] label span {
    background-color:var(--cp-sky-blue);
}
.product-list-inner .item-wrap[data-prod="concrete"] label span {
    background-color:var(--cp-red);
}
.product-list-inner .item-wrap[data-prod="construction"] label span {
    background-color:var(--cp-gray);
}
.product-list-inner .item-wrap[data-prod="mobile-group"] label span {
    background-color:var(--cp-blue);
}
.product-list-inner .item-wrap[data-prod="others"] label span {
    background-color:var(--cp-taupe);
}
.product-list-inner input {
    width:1px;
    height:1px;
    -webkit-clip-path:rect(0 0 0 0 );
    clip-path:rect(0 0 0 0 );
    opacity:0;
    position: absolute;
}


/*  MINI (PRODUCT) MAP FORM ELEMENTS
=========================================== */

.product-map .locations-form-wrap {
    margin-top:var(--space-xs);
}
.product-map .form-fields-wrap {
    padding:0;
}
.product-map .search-input {
    border-radius: 50px;
    box-shadow: 0 3px 10px 0 rgba(56, 58, 81, 0.25);
    overflow: hidden;
}
.product-map .search-input input,
.product-map .search-input button {
    font-size:18px;
}
.product-map .search-input input {
    width: 100%;
    min-width: unset;
    border-radius: 0px;
    border-top-left-radius:50px;
    border-bottom-left-radius:50px;
    box-shadow: none;
    padding:var(--space-xxs) var(--space-sm);
}
.product-map .search-input button {
    background-color:var(--cp-blue);
    width: 225px;
    min-width: 120px;
    font-weight:500;
    color:var(--cp-white);
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    -webkit-appearance:none;
    appearance:none;
}
.product-map .search-input button img {
    -webkit-transform:none;
    transform:none;
    margin-left:var(--space-mini);
}


/*  ACTIVE LOCATION WINDOW
=========================================== */

.active-location-window {
    background-color: var(--cp-white);
    width:100%;
    max-width:350px;
    top:60px;
    left:10px;
    display: none;
    border-radius: 10px;
    box-shadow: 0 3px 10px 0 rgba(56, 58, 81, 0.15);
    z-index: 990;
    padding:var(--space-xs);
}
.search-wrap-all.loaded .active-location-window {
    display:block;
}
.active-location-window .products-wrap {
    width: calc(100% - 40px);
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    gap:var(--space-micro) var(--space-xxs);
}
.active-location-window .products-wrap p {
    font-weight: 500;
    letter-spacing: -0.5px;
    position: relative;
}
.active-location-window .products-wrap p:before {
    width:18px;
    height:18px;
    top:3px;
    content:"";
    display: inline-block;
    border-radius: 50%;
    margin-right:var(--space-micro);
    position: relative;
}
.active-location-window .products-wrap span[data-prod="aggregates"] p:before {
    background-color: var(--cp-green);
}
.active-location-window .products-wrap span[data-prod="asphalt"] p:before {
    background-color: var(--cp-yellow);
}
.active-location-window .products-wrap span[data-prod="cement"] p:before {
    background-color: var(--cp-sky-blue);
}
.active-location-window .products-wrap span[data-prod="concrete"] p:before {
    background-color: var(--cp-red);
}
.active-location-window .products-wrap span[data-prod="construction"] p:before {
    background-color: var(--cp-gray);
}
.active-location-window .products-wrap span[data-prod="mobile-group"] p:before {
    background-color: var(--cp-blue);
}
.active-location-window .products-wrap span[data-prod="others"] p:before {
    background-color: var(--cp-taupe);
}
button.close-active-window {
    background-color: transparent;
    top:var(--space-xs);
    right:var(--space-xs);
    -webkit-appearance:none;
    appearance:none;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}
button.close-active-window:hover,
button.close-active-window:focus {
    -webkit-transform:scale3d(1.1,1.1,1);
    transform:scale3d(1.1,1.1,1);
}
button.close-active-window img {
    width:16px;
    height:auto;
}
.active-location-window .location-name {
    margin-top:var(--space-sm);
}
.active-location-window .location-name p {
    font-size:21px;
    font-weight:300;
    letter-spacing: -0.75px;
}
.active-location-window .info p {
    font-size:14px;
    letter-spacing:-0.5px;
}
.active-location-window .hours {
    margin-top:var(--space-xxs);
}
.active-location-window .hours p span.open {
    color:#389226;
}
.active-location-window .hours p span.closed {
    color:var(--cp-red);
}
.active-location-window .contact {
    grid-template-columns:65px 1fr;
    gap:var(--space-xxs);
    margin-top:var(--space-xxs);
}
.active-location-window .contact .title p {
    font-weight: 500;
}
.active-location-window .contact .address p {
    margin:0;
}
.active-location-window .contact .has-link a:hover,
.active-location-window .contact .has-link a:focus {
    text-decoration:underline;
}
.active-location-window .ctas {
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    gap:var(--space-xxs);
    margin-top:var(--space-sm);
}
.active-location-window .ctas a {
    font-size:14px;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    letter-spacing: -0.5px;
    border:2px solid var(--cp-blue);
    border-radius: 50px;
    padding:var(--space-mini) 32px;
}
.active-location-window .ctas a.details {
    background-color: var(--cp-blue);
    color:var(--cp-white);
}
.active-location-window .ctas a.directions {
    background-color: var(--cp-white);
    color:var(--cp-blue);
}


/*  MINI (PRODUCT) MAP ACTIVE LOCATION WINDOW
=========================================== */

.product-map .active-location-window {
    background-color: rgba(255,255,255,0.95);
    max-width: 235px;
    padding:var(--space-xxs);
}
.product-map .active-location-window .contact {
    grid-template-columns:55px 1fr;
}
.product-map .active-location-window .ctas {
    gap:var(--space-micro);
}
.product-map .active-location-window .ctas a {
    width:100%;
}


/*  LIST VIEW BUTTON
====================================== */

.list-view-button-wrap {
    top:10px;
    left:205px;
    z-index: 990;
}
.list-view-button-wrap a {
    background-color: var(--cp-white);
    font-size: 14px;
    gap:var(--space-mini);
    border-radius: 2px;
    box-shadow: 0 3px 3px 0 rgba(56, 58, 81, 0.15);
    padding: 9.5px var(--space-xxs);
}
.list-view-button-wrap a:hover,
.list-view-button-wrap a:focus {
    background-color:var(--cp-blue);
    color:var(--cp-white);
}
.list-view-button-wrap a svg {
    width:auto;
    height:14px;
}
.list-view-button-wrap a:hover svg line,
.list-view-button-wrap a:focus svg line {
    stroke:var(--cp-white);
}
.list-view-button-wrap a:hover svg line,
.list-view-button-wrap a:hover svg circle,
.list-view-button-wrap a:focus svg circle {
    fill:var(--cp-white);
}


/*  MAP ELEMENTS
====================================== */

.search-map-wrap {
    flex-grow: 1;
    flex-basis: 0;
    width: 100%;
    height: 75vh;
    min-height: 500px;
    overflow: hidden;
    margin-top:15px;
}
.search-map-wrap #map,
.search-map-wrap .map-container {
    width:100%;
    height:100%;
}
.map-pin {
    -webkit-transition: 0.15s all ease-in-out;
    transition: 0.15s all ease-in-out;
}
.map-pin:hover,
.map-pin:focus {
    -webkit-transform:translate3d(0,-3px,0);
    transform:translate3d(0,-3px,0);
}
gmp-advanced-marker:has(.map-pin.bouncing-pin) {
    z-index: 1000010;
}
.map-pin.bouncing-pin {
    -webkit-animation: marker_bounce 1s ease-out infinite;
    animation: marker_bounce 1s ease-out infinite;
}
.map-pin svg {
    width:auto;
    height:65px;
}


/*  MINI (PRODUCT) MAP
====================================== */

.product-map {
    background-color: var(--cp-white);
    border-radius:15px;
    box-shadow: 0 3px 10px 0 rgba(56, 58, 81, 0.15);
    padding: var(--space-sm);
}
.product-map .search-map-wrap {
    height:600px;
    margin-top:var(--space-sm);
}



@media screen and ( min-width: 478px ) {

    /*  LIST VIEW BUTTON
    ====================================== */
    
    .list-view-button-wrap {
        left: 185px;
    }

}


@media screen and ( min-width: 992px ) {

    .search-wrap-all {
        padding-inline:var(--space-sm);
    }


    /*  FORM ELEMENTS
    =========================================== */

    .form-fields-wrap {
        padding:0;
    }


    /*  MAP ELEMENTS
    ====================================== */
    
    .search-map-wrap {
        border-radius: 10px;
    }

}


@media screen and ( min-width: 1160px ) {

    /*  FORM ELEMENTS
    =========================================== */

    .form-fields-wrap {
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    .search-input input {
        min-width:min(22vw, 300px);
    }

}