/*
|--------------------------------------------------------------------------
| Custom Product Configurator
| Frontend Styling
|--------------------------------------------------------------------------
*/

/* ==============================
   Hide ThemeHigh Original Fields
================================ */
.single-product.cpc-active-product .extra-options.thwepo_accordion_style {
    display:none !important;
}
.single-product.cpc-active-product .extra-options.thwepo_accordion_style,
.single-product.cpc-active-product table.thwepo-field-wrapper {
    display:none !important;
}
/* ==============================
   Main Wrapper
================================ */
.cpc-wrapper{
    width:100%;
    margin:25px 0;
    font-family:inherit;
}
.cpc-accordion{
    border:1px solid #e5e5e5;
    border-radius:12px;
    background:#fff;
    margin-bottom:14px;
    overflow:hidden;
}
.cpc-header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    cursor:pointer;
    background:#fff;
}
.cpc-header:hover{
    background:#f8f8f8;
}
.cpc-icon{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.cpc-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.cpc-title{
    flex:1;
    font-size:18px;
    font-weight:600;
    color:#111;
}
.cpc-count{
    font-size:15px;
    font-weight:500;
    color:#777;
}
.cpc-arrow{
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}
.cpc-accordion.active .cpc-arrow{
    transform:rotate(45deg);
}
.cpc-content{
    display:none;
    padding:15px;
    border-top:1px solid #eee;
}
.cpc-accordion.active .cpc-content{
    display:block;
}
/*
|--------------------------------------------------------------------------
| Field
|--------------------------------------------------------------------------
*/
.cpc-field{
    margin-bottom:22px;
}
.cpc-field-title{
    font-size:16px;
    font-weight:600;
    margin-bottom:12px;
    color:#111;
}
/*
|--------------------------------------------------------------------------
| Radio Cards
|--------------------------------------------------------------------------
*/
.cpc-options{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}
.cpc-option{
    position:relative;
    display:flex;
    align-items:center;
    gap:4px;
    padding:5px;
    border:1px solid #e5e5e5;
    border-radius:10px;
    cursor:pointer;
    background:#fff;
    transition:.25s ease;
}
.cpc-option:hover{
    border-color:#111;
}
.cpc-input{
    width:18px;
    height:18px;
    cursor:pointer;
    flex-shrink:0;
}
.cpc-option-label{
    flex:1;
    font-size:14px;
    line-height:1.2;
    color:#222;
}
.cpc-option-price{
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    color:#111;
}
/*
|--------------------------------------------------------------------------
| Selected Card
|--------------------------------------------------------------------------
*/
.cpc-option:has(.cpc-input:checked){
    border-color:#111;
    background:#f8f8f8;
}
/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/
@media(max-width:768px){
    .cpc-header{
        padding:10px;
    }
    .cpc-title{
        font-size:16px;
    }
    .cpc-content{
        padding:12px;
    }
    .cpc-options{
        grid-template-columns:1fr;
    }
    .cpc-option{
        padding:12px;
    }
}
@media(max-width:480px){
    .cpc-icon{width:36px;height:36px;
    }
    .cpc-title{
        font-size:15px;
    }
    .cpc-option-label{
        font-size:13px;
    }
    .cpc-option-price{
        font-size:12px;
    }
}