/* Reset and Base Styles */



* {



    box-sizing: border-box;



}







.cpc-configurator {



    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;



    max-width: 1200px;



    margin: 0 auto;



    background: #fff;



}







/* Header with Progress Bar */



.cpc-header {



    background: #fff;



    /* border-bottom: 1px solid #e0e0e0; */



    padding: 0px 0;



    margin-bottom: 30px;



}







.cpc-tabs {



    display: flex;



    list-style: none;



    margin: 0;



    padding: 0;



    justify-content: center;



    /* gap: 40px; */

    margin-top: 5px;



}







.cpc-tabs li {

    background-color: #f0f0f0;

    background-clip: padding-box;

    border-right: 6px solid #fff0;

    display: table-cell;

    font-weight: 700;

    line-height: 1;

    padding: 11px 10px 11px 30px;

    position: relative;

    text-align: center;

    cursor: pointer;

    width: 282px;



}



.cpc-tabs li::after {

    border-bottom: 19px solid #fff0;

    border-left: 17px solid #f0f0f0;

    border-top: 19px solid #fff0;

    content: " ";

    height: 0;

    position: absolute;

    right: -17px;

    top: 0;

    transition: border-color .2s ease;

    width: 0;

    z-index: 2;

}

.cpc-tabs li:before {

    border-bottom: 17px solid #fff0;

    border-left: 17px solid #f0f0f0;

    border-top: 19px solid #fff0;

    content: " ";

    height: 0;

    position: absolute;

    right: -17px;

    top: 0;

    transition: border-color .2s 

ease;

    /* width: 0; */

    z-index: 2;

    /* display: block; */

    /* text-indent: 0; */

    border-left: 17px solid #fff;

    left: 0;

    right: auto;

    z-index: 0;

}



/* .cpc-tabs li.active {



    color: #333;



    font-weight: 600;



} */

.cpc-tabs li.active {

        background-color: #1766a9;

    color: #fff;

}

.cpc-tabs li.active:after {

    border-left: 16px solid #1766a9;

    right: -16px;

}



/* .cpc-tabs li.active::after {

    content: '';

    position: absolute;

    bottom: -20px;

    left: 50%;

    transform: translateX(-50%);

    width: 30px;

    height: 3px;

    background: #007bff;

    border-radius: 2px;

} */







/* Main Layout */



.cpc-body {padding: 0;}







.cpc-config-panels {display: flex;grid-template-columns: 2fr 1fr;gap: 40px;align-items: start;justify-content: space-between;}







.cpc-left-panel {



    background: #fff;

    width: 70%;



}







.cpc-right-panel {background: #f8f9fa;border-radius: 8px;/* padding: 20px; */position: sticky;top: 20px;width: 260px;}







/* Step Headers */



.cpc-step {

    margin-bottom: 0;

    padding-bottom: 50px;

    width: 80%;

}







.cpc-step:last-child {



    border-bottom: none;



    margin-bottom: 0;



}







.cpc-step-header {

    font-size: 23px;

    font-weight: 700;

    color: #1766a9;

    margin-bottom: 15px;

    display: flex;

    align-items: center;

    /* padding-left: 33px; */

}







.cpc-step-header span {

    background: #1766a9;

    color: white;

    border-radius: 50%;

    width: 35px;

    height: 35px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    margin-right: 15px;

    font-size: 19px;

    font-weight: 700;

}







.cpc-step-content p {



    color: #666;



    margin-bottom: 20px;



    font-size: 14px;



}







.cpc-step-content a {



    color: #007bff;



    text-decoration: none;



}







.cpc-step-content a:hover {



    text-decoration: underline;



}







/* Swiper Container */

.cpc-swiper {

    width: 100%;

    position: relative;

    padding: 5px 0;

}



.cpc-swiper .swiper-slide {

    width: auto;

    height: auto;

}







.cpc-option-card {

    border: 2px solid #e0e0e0;

    padding: 0;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

    border-radius: 8px;

    background: #fff;

    min-width: 115px;

    position: relative;

    height: 115px;

    width: 115px;

    flex: 0 0 auto;

}







/* .cpc-option-card:hover {



    border-color: #007bff;



    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);



} */







.cpc-option-card.selected {

    border-color: #1766a9;

    background: #f8f9ff;

    box-shadow: 0 2px 12px rgba(0, 123, 255, 0.2);

}







.cpc-option-card img {

    max-width: 100px;

    height: auto;

    margin-bottom: 5px;

    border-radius: 4px;

    width: 107px !important;

    height: 107px !important;

}







.cpc-option-card p {



    margin: 0;



    font-weight: 500;



    color: #333;



    font-size: 14px;



}







/* Step gating */



.cpc-step.cpc-step-disabled {



    opacity: 0.5;



}



.cpc-step.cpc-step-disabled .cpc-option-card,



.cpc-step.cpc-step-disabled input,



.cpc-step.cpc-step-disabled button {



    pointer-events: none;



}







/* Scheme Options */



.cpc-scheme-option {

    background-color: #f7f7f7;

    border: 3px solid #f0f0f0;

    padding: 1px;

    border-radius: 0;

    width: 115px !important;

    height: 135px;

    min-width: 115px !important;



}







.cpc-scheme-option img {



    max-width: 107px !important;

    height: 107px !important;

    object-fit: cover;



}







/* Color Options */



.cpc-color-option {

    width: 115px;

    height: 115px;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding: 8px;

    color: white;

    border: 3px solid #f0f0f0;

    border-radius: 0;

    position: relative;

    overflow: hidden;

    min-width: 115px;

    background: #f7f7f7;

}







.cpc-color-option[data-value="white"] {



    color: #333;



    border-color: #ccc;



}







.cpc-color-option[data-value="anthracite_grey"] {



    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);



}







.cpc-color-option[data-value="anthracite_grey_on_white"] {



    background: linear-gradient(135deg, #2c3e50 0%, #2c3e50 50%, #fff 50%, #fff 100%);



    color: #333;



}







.cpc-color-option[data-value="custom_ral"] {



    background: conic-gradient(red, orange, yellow, green, blue, indigo, violet, red);



    position: relative;



}







.cpc-color-option[data-value="custom_ral"]::after {



    content: '🎨';



    position: absolute;



    top: 50%;



    left: 50%;



    transform: translate(-50%, -50%);



    font-size: 20px;



}







.cpc-color-option p {

    font-size: 11px;

    font-weight: 600;

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

    margin: 0;

    text-align: center;

    color: white !important;

    /* background-color: black; */

    padding: 2px 6px;

}







/* Size Inputs */



.cpc-size-inputs {



    margin-bottom: 20px;



}







.cpc-size-inputs label {



    display: block;



    font-weight: 500;



    color: #333;



    margin-bottom: 8px;



    font-size: 14px;



}







.cpc-size-inputs input {



    width: 100%;



    padding: 12px 16px;



    border: 2px solid #e0e0e0;



    border-radius: 6px;



    font-size: 14px;



    transition: border-color 0.3s ease;



    background: #fff;



}







.cpc-size-inputs input:focus {



    outline: none;



    border-color: #007bff;



    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);



}







.cpc-size-inputs input::placeholder {



    color: #999;



}







/* Glass Options */



.cpc-glass-option {



    min-width: 140px;



}







.cpc-glass-option img {



    max-width: 100px;



    height: 60px;



    object-fit: cover;



    border-radius: 4px;



}







/* Right Panel - Product Preview */



.cpc-visualization-box {background: #fff;border-radius: 0;padding: 0;overflow: hidden;}







.cpc-visualization-header {background: #f8f9fa;padding: 15px;border-bottom: 1px solid #e0e0e0;font-weight: 600;color: #ffffff;display: flex;justify-content: space-between;align-items: center;background-color: #1766a9;border-color: #1766a9;border-radius: 0;font-size: 20px;line-height: 0;}







.cpc-reviews-btn {background: #ffffff;color: #000000;border: none;padding: 4px 8px;border-radius: 4px;font-size: 14px;font-weight: 600;cursor: pointer;}







.cpc-visualization-image {padding: 20px;text-align: center;position: relative;background: #f7f7f7;}







.cpc-visualization-image img {width: 100%;max-width: 280px;height: auto;border-radius: 6px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);width: 160px;height: 73px !important;object-fit: cover;}







.cpc-zoom-icon {



    position: absolute;



    top: 25px;



    right: 25px;



    background: rgba(0, 0, 0, 0.7);



    color: white;



    border: none;



    border-radius: 50%;



    width: 30px;



    height: 30px;



    cursor: pointer;



    display: flex;



    align-items: center;



    justify-content: center;



}







.cpc-illustration-text {color: #666;font-size: 13px;margin: 0;/* font-style: italic; */margin-bottom: 7px;}







.cpc-gallery-btn {background: transparent;color: #7a7a7a;border: 1px solid #e0e0e0;padding: 3px 16px;border-radius: 4px;font-size: 12px;cursor: pointer;display: inline-flex;align-items: center;gap: 5px;width: 100px;/* height: 47px; */}

.cpc-gallery-btn img{height: 23px !important;}





/* Price Section */



.cpc-price-section {padding: 20px;border-top: 1px solid #e0e0e0;display: flex;justify-content: space-between;padding-bottom: 0;background: #f7f7f7;}







.cpc-total {font-size: 16px;font-weight: 700;color: #333;margin-bottom: 5px;}







.cpc-total span {color: #1766a9;}







.cpc-ex-vat {color: #666;font-size: 13px;margin-bottom: 15px;}







.cpc-u-value {



    display: flex;



    align-items: center;



    gap: 5px;



    color: #666;



    font-size: 14px;



    margin-bottom: 20px;



}







.cpc-info-icon {width: 16px;height: 16px;background: #1766a9;color: white;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;font-size: 10px;cursor: help;font-weight: 800;}







/* Delivery Section */



.cpc-delivery-section {background: #6bbbff;color: white;padding: 15px 11px;margin: 0;border-radius: 0;font-size: 14px;}







.cpc-delivery-section a {color: white;text-decoration: none;/* font-weight: 600; */font-size: 9px !important;}







/* Price Promise */



.cpc-price-promise {background: #1766a9;padding: 3px 10px;border-radius: 0;margin-bottom: 20px;text-align: left;font-size: 10px;color: #ffffff;}







.cpc-price-promise a {color: #ffffff;text-decoration: none;font-weight: 800;}







/* Action Buttons */



.cpc-button-add-to-cart {background: #dc3545;color: white;border: none;padding: 15px 20px;width: 100%;font-weight: 600;font-size: 16px;cursor: pointer;border-radius: 6px;margin-bottom: 10px;transition: background-color 0.3s ease;display: flex;align-items: center;/* justify-content: center; */gap: 8px;font-weight: 700;}







.cpc-button-add-to-cart:hover {



    background: #c82333;



}







.cpc-button-add-to-cart:disabled {background: #d22c26;cursor: not-allowed;border-radius: 3px;text-align: left;}







.cpc-button-secondary {background: #f8f9fa;color: #495057;/* border: 1px solid #dee2e6; */padding: 12px 11px;width: 100%;margin-bottom: 8px;cursor: pointer;border-radius: 0;font-weight: 500;transition: all 0.3s ease;display: flex;align-items: center;/* justify-content: center; */gap: 8px;background: #f0f0f0;color: #1766a9;font-weight: 700;}







.cpc-button-secondary:hover {background: #e9ecef;border-color: #adb5bd;color: #d22c26;}







/* Swiper Navigation Buttons */

.cpc-swiper .swiper-button-next,

.cpc-swiper .swiper-button-prev {

    background: transparent;

    border: none;

    border-radius: 0;

    width: 35px;

    height: 60px;

    display: flex;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;

    color: #1766a9;

    box-shadow: none;

    font-size: 49px;

    padding: 0;

    align-items: baseline;

    z-index: 2;

    position: absolute;

    top: 49%;

    transform: translateY(-50%);

    margin: 0;

}

.swiper-wrapper{gap: 10px;}

.cpc-swiper .swiper-button-prev {

    left: -10px;

}



.cpc-swiper .swiper-button-next {

    right: -10px;

}



.cpc-swiper .swiper-button-next:hover,

.cpc-swiper .swiper-button-prev:hover {

    background: #e9ecef;

    border-color: #007bff;

    color: #007bff;

}



.cpc-swiper .swiper-button-next.swiper-button-disabled,

.cpc-swiper .swiper-button-prev.swiper-button-disabled {

    opacity: 0.3;

    cursor: not-allowed;

    color: #ccc;

}



.cpc-swiper .swiper-button-next:after,

.cpc-swiper .swiper-button-prev:after {

    content: '';

    font-size: 49px;

    font-weight: bold;

}



.cpc-swiper .swiper-button-next:after {

    content: '›';

}



.cpc-swiper .swiper-button-prev:after {

    content: '‹';

}



/* Swiper Pagination */

.cpc-swiper .swiper-pagination {

    position: relative;

    margin-top: 15px;

    display: none;

}



.cpc-swiper .swiper-pagination-bullet {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #ddd;

    cursor: pointer;

    transition: all 0.3s ease;

    margin: 0 4px;

}



.cpc-swiper .swiper-pagination-bullet-active {

    background: #1766a9;

    transform: scale(1.2);

}



.cpc-swiper .swiper-pagination-bullet:hover {

    background: #999;

}







/* Smart Assistant */



.cpc-smart-assistant {



    position: fixed;



    bottom: 20px;



    right: 20px;



    background: #fff;



    border: 1px solid #e0e0e0;



    border-radius: 12px;



    padding: 15px;



    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);



    max-width: 300px;



    z-index: 1000;



}







.cpc-assistant-header {



    display: flex;



    align-items: center;



    gap: 10px;



    margin-bottom: 10px;



}







.cpc-assistant-icon {



    width: 40px;



    height: 40px;



    background: #dc3545;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    color: white;



    font-size: 18px;



}







.cpc-assistant-text {



    flex: 1;



    font-size: 14px;



    color: #333;



    line-height: 1.4;



}







.cpc-assistant-actions {



    display: flex;



    align-items: center;



    gap: 10px;



}







.cpc-chat-icon {



    background: #ff69b4;



    color: white;



    border: none;



    border-radius: 50%;



    width: 30px;



    height: 30px;



    cursor: pointer;



    display: flex;



    align-items: center;



    justify-content: center;



}







.cpc-close-assistant {



    background: none;



    border: none;



    color: #999;



    cursor: pointer;



    font-size: 18px;



}







/* Responsive Design */



@media (max-width: 768px) {



    .cpc-config-panels {



        grid-template-columns: 1fr;



        gap: 20px;



    }







    /* .cpc-right-panel {

        position: static;

        order: -1;

    } */







    .cpc-tabs {gap: 20px;flex-wrap: nowrap;overflow-x: scroll;justify-content: left;}







    .cpc-tabs li {padding: 8px 12px;font-size: 14px;flex-grow: 0;contain-intrinsic-block-size: auto 100px;width: 282px !important;flex-shrink: 0;justify-content: left;}







    .cpc-options-row {



        justify-content: center;



    }







    .cpc-option-card {



        min-width: 100px;



    }







    .cpc-smart-assistant {



        position: static;



        margin: 20px auto;



        max-width: 100%;



    }



}







@media (max-width: 500px) {



    .cpc-body {



        padding: 0 10px 20px;



    }







    .cpc-swiper {

        align-items: stretch;

    }







    .cpc-option-card {



        min-width: auto;

        flex-grow: 0;

        flex-shrink: 0;

        justify-content: flex-start;



    }







    .cpc-color-option {



        width: 100%;



        height: 60px;



    }

    .cpc-config-panels{display: block;}

    .cpc-right-panel{width: 100%;}

    .cpc-step{

        padding-bottom: 20px;

        width: 100%;

    }

    .cpc-left-panel{

        width: 100%;

    }



}