/* Custom Product Flow - Styles */



/* Checkout product thumbnail — separate column */

.woocommerce-checkout th.cpf-product-thumbnail-th {

    width: 70px;

}

.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th.cpf-tfoot-label {

    white-space: nowrap;

}

.woocommerce-checkout td.cpf-product-thumbnail-col {

    width: 70px;

    vertical-align: middle;

    padding-right: 0;

}

.cpf-checkout-product-img-col {

    line-height: 0;

}

.cpf-checkout-product-img {

    display: block;

    width: 60px;

    height: 60px;

    object-fit: cover;

    border-radius: 4px;

}



/* Main Container */

#cpf-custom-interface {margin: 20px 0;padding: 20px;background: #f9f9f9;border-radius: 8px;border: 1px solid #e0e0e0;width: 100%;}





/* Color Selector */

.cpf-color-selector {

    margin-bottom: 20px;

}



.cpf-color-selector label {

    display: block;

    margin-bottom: 8px;

    font-weight: 600;

    font-size: 14px;

    color: #333;

}



.cpf-select {

    width: 100%;

    max-width: 300px;

    padding: 10px 12px;

    font-size: 14px;

    border: 1px solid #ddd;

    border-radius: 4px;

    background-color: #fff;

    cursor: pointer;

    transition: border-color 0.3s ease;

}



.cpf-select:focus {

    outline: none;

    border-color: #0073aa;

    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);

}



/* Size Table Container */

#cpf-size-table-container {margin-top: 2.2rem;}



#cpf-size-table-container h4, .cpf-color-selector label{margin: 0 0 15px 0;font-size: var(--font-20);font-family: "Inter", sans-serif;font-weight: bold;color: #231f20;}



/* Price Cell Updates */

.cpf-price-cell {

    position: relative;

    transition: all 0.3s ease;

}



.cpf-price-with-discount {

    color: #2e7d32;

    font-weight: 600;

}



.cpf-price-with-discount::after {

    content: ' ✓';

    color: #2e7d32;

    font-size: 12px;

    margin-left: 4px;

}



.cpf-price-with-additions {

    color: #1976d2;

    font-weight: 500;

}



.cpf-price-with-additions::after {

    content: ' +';

    color: #1976d2;

    font-size: 12px;

    margin-left: 4px;

}



/* Size Table */

.cpf-table {

    width: 100%;

    max-width: 100%;

    border-collapse: collapse;

    background: #fff;

    border-radius: 6px;

    overflow: hidden;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

}



.cpf-table thead {

    background: #0073aa;

    color: #fff;

}



.cpf-table thead th {padding: 12px 15px;text-align: left;font-size: var(--font-20);font-family: "Inter", sans-serif;font-weight: bold;}





.cpf-table tbody tr {

    border-bottom: 1px solid #e0e0e0;

    transition: background-color 0.2s ease;

}



.cpf-table tbody tr:hover {

    background-color: #f5f5f5;

}



.cpf-table tbody tr:last-child {

    border-bottom: none;

}



.cpf-table tbody td {text-align: left;font-family: "Inter", sans-serif;padding: 12px 15px;font-size: 14px;color: #231f20;}





.cpf-size-cell {

    font-weight: 600;

    text-transform: uppercase;

    color: #333;

}



.cpf-price-cell {

    color: #0073aa;

    font-weight: 500;

}



.cpf-qty-cell {

    text-align: center;

}



/* Quantity Input */

.cpf-qty-input {

    width: 80px;

    padding: 8px 10px;

    font-size: 14px;

    border: 1px solid #ddd;

    border-radius: 4px;

    text-align: center;

    transition: border-color 0.3s ease;

}



.cpf-qty-input:focus {

    outline: none;

    border-color: #0073aa;

    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);

}



.cpf-qty-input:disabled {

    background-color: #f0f0f0;

    cursor: not-allowed;

    opacity: 0.6;

}



.cpf-qty-cell {

    display: flex;

    align-items: center;

    gap: 4px;

}



.cpf-qty-btn {

    width: 28px;

    height: 28px;

    border: 1px solid #ccc;

    background: #f5f5f5;

    cursor: pointer;

    font-size: 16px;

    line-height: 1;

    border-radius: 4px;

}



.cpf-qty-btn:hover {

    background: #e0e0e0;

}



.cpf-qty-input {

    width: 50px;

    text-align: center;

}



/* Out of Stock Row */

.cpf-out-of-stock {

    opacity: 0.5;

}



.cpf-out-of-stock td {

    color: #999;

}



/* Loading State */

.cpf-loading {

    text-align: center;

    padding: 20px;

    color: #999;

    font-style: italic;

}



/* Totals Display */

#cpf-totals {margin: 20px 0;padding: 15px;background: #fff;border-radius: 6px;border: 2px solid #0073aa;max-width: 100%;}





.cpf-total-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 8px 0;

    font-size: 16px;

}



.cpf-total-row:first-child {

    padding-top: 0;

}



.cpf-total-row:last-child {

    padding-bottom: 0;

    border-top: 1px solid #e0e0e0;

    margin-top: 8px;

    padding-top: 12px;

}



.cpf-total-label {

    font-weight: 600;

    color: #333;

}



.cpf-total-value {

    font-size: 18px;

    font-weight: 700;

    color: #0073aa;

}



/* Add to Cart Button */

#cpf-add-to-cart, .button.cpf-view-cart-btn{margin-top: 0;background-color: #ffe50c;color: #231f20;transition: .3s linear;

font-size: var(--font-20);text-transform: uppercase;font-family: "Jost", sans-serif;font-weight: 400;border-radius: 50px;

  border: solid 1px #ffe50c;padding: 1rem 2.5rem .8rem 2.5rem;line-height: 1.3;

}



#cpf-add-to-cart:hover, .button.cpf-view-cart-btn:hover{background-color: #00a4e6;color: #fff;border-color: #fff;}



#cpf-add-to-cart:active {

    transform: translateY(0);

}



#cpf-add-to-cart:disabled {

    background-color: #ccc;

    cursor: not-allowed;

    transform: none;

}



/* Message Display */

.cpf-message {

    margin-top: 15px;

    padding: 12px 15px;

    border-radius: 4px;

    font-size: 14px;

    display: none;

}



.cpf-message.cpf-success {

    background-color: #d4edda;

    border: 1px solid #c3e6cb;

    color: #155724;

}



.cpf-message.cpf-error {

    background-color: #f8d7da;

    border: 1px solid #f5c6cb;

    color: #721c24;

}



body #cpf-custom-interface #cpf-price-breakdown, #cpf-custom-interface #cpf-price-breakdown strong {font-family: "Inter", sans-serif;font-size: var(--font-20);}

.cpf-help-text, .success{font-size: var(--font-16);font-weight: 400;padding-bottom: 0rem;font-family: "Inter", sans-serif;}

body .success{color: #0f834d;}

.cpf-help-text{font-weight: 300;}

.button.cpf-view-cart-btn {border-color: var(--global-palette-btn-bg);}



/* Responsive Design */

@media screen and (max-width: 768px) {

    #cpf-custom-interface {

        padding: 15px;

    }



    .cpf-select {

        max-width: 100%;

    }



    .cpf-table {

        max-width: 100%;

        font-size: 13px;

    }



    .cpf-table thead th,

    .cpf-table tbody td {

        padding: 10px 8px;

    }



    .cpf-qty-input {

        width: 60px;

        padding: 6px 8px;

    }



    #cpf-totals {

        max-width: 100%;

    }



    .cpf-total-row {

        font-size: 14px;

    }



    .cpf-total-value {

        font-size: 16px;

    }



    #cpf-add-to-cart, .button.cpf-view-cart-btn{width: 100%;margin-top: 0px;padding: 14px 20px;}

}



@media screen and (max-width: 480px) {

    .cpf-table thead th {

        font-size: 11px;

        padding: 8px 5px;

    }



    .cpf-table tbody td {

        font-size: 12px;

        padding: 8px 5px;

    }



    .cpf-qty-input {

        width: 50px;

        padding: 5px;

        font-size: 13px;

    }

}



/* Swatches Container */

.cpf-swatches-container {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 12px;

}



/* Swatch Item */

.cpf-swatch-item {cursor: pointer;transition: transform 0.2s ease, opacity 0.2s ease;}

.cpf-swatch-item.cpf-swatch-selected {background-color: rgba(0, 115, 170, 0.05);}



/* Color Swatch */

.cpf-swatch-color {

    display: block;

    width: 40px;

    height: 40px;

    border-radius: 50%;

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

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.cpf-swatch-item.cpf-swatch-rounded.cpf-swatch-color:hover .cpf-swatch-label {display: block;}



/* Squared Shape Override */

.cpf-swatch-squared .cpf-swatch-color {border-radius: 6px;}

.cpf-swatch-squared .cpf-swatch-image {border-radius: 6px;}



/* Image Swatch */

.cpf-swatch-image {

    display: block;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

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

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



/* Squared shape override for images */

.cpf-swatch-squared .cpf-swatch-image {

    border-radius: 6px;

    /* Override to squared */

}



.cpf-swatch-item:hover .cpf-swatch-image {

    transform: scale(1.05);

    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);

}



.cpf-swatch-item.cpf-swatch-selected .cpf-swatch-image {

    border-color: #0073aa;

    border-width: 3px;

    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);

}



/* Text Swatch (Fallback) */

.cpf-swatch-text {

    display: block;

    padding: 10px 16px;

    background-color: #f5f5f5;

    border: 2px solid #ddd;

    border-radius: 4px;

    font-size: 13px;

    font-weight: 600;

    color: #333;

    text-transform: uppercase;

    transition: all 0.2s ease;

}



.cpf-swatch-item:hover .cpf-swatch-text {

    background-color: #e8e8e8;

    border-color: #ccc;

}



.cpf-swatch-item.cpf-swatch-selected .cpf-swatch-text {

    background-color: #0073aa;

    border-color: #0073aa;

    color: #fff;

}



/* Swatch Label */

/*.cpf-swatch-label {

    font-size: 12px;

    color: #666;

    text-align: center;

    font-weight: 500;

    max-width: 80px;

    word-break: break-word;

}*/

.cpf-swatch-color .cpf-swatch-label, .cpf-swatch-image .cpf-swatch-label{font-size: 12px;font-family: "Inter", sans-serif;display: none;}

.cpf-swatch-item.cpf-swatch-selected .cpf-swatch-label {

    color: #0073aa;

    font-weight: 600;

}



/* Responsive Swatches */

@media screen and (max-width: 768px) {

    .cpf-swatches-container {

        gap: 10px;

    }



    .cpf-swatch-color {

        width: 35px;

        height: 35px;

    }



    .cpf-swatch-image {

        width: 35px;

        height: 35px;

    }



 /*   .cpf-swatch-label {

        font-size: 11px;

        max-width: 70px;

    }*/

}



@media screen and (max-width: 480px) {

    .cpf-swatches-container {

        gap: 8px;

    }

.cpf-swatches-container .cpf-swatch-item.cpf-swatch-selected{border: solid 2px #ccc;width: 33px;height: 33px;}

    .cpf-swatch-color {

        width: 30px;

        height: 30px;

    }



    .cpf-swatch-image {

        width: 30px;

        height: 30px;

    }



    .cpf-swatch-text {

        padding: 8px 12px;

        font-size: 12px;

    }



/*    .cpf-swatch-label {

        font-size: 10px;

        max-width: 60px;

    }*/

}