/* Elementor Woo Compare Styles */

.ewc-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ewc-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    position: relative;
    /* Ensure scrollbar is visible if needed */
    padding-bottom: 20px;
}

.ewc-table {
    width: 100%;
    border-collapse: separate;
    /* Required for sticky to work well with borders sometimes */
    border-spacing: 0;
    min-width: 600px;
    /* Force scroll on small screens */
}

/* Headers / Cells */
.ewc-table th,
.ewc-table td {
    padding: 15px;
    vertical-align: top;
    text-align: center;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background-color: #fff;
    box-sizing: border-box;
}

/* First Column (Attributes) */
.ewc-table .ewc-col-attr {
    text-align: left;
    font-weight: bold;
    background-color: #f9f9f9;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    border-right: 2px solid #ccc;
    /* Distinct separator */
    width: 150px;
    min-width: 150px;
    max-width: 200px;
}

/* Row Headers */
.ewc-table thead tr:first-child .ewc-col-attr {
    z-index: 3;
    /* Top Left corner stays on top of everything */
    top: 0;
}

/* Sticky Header row if needed (not requested but good UX) */
/* .ewc-table thead th { position: sticky; top: 0; z-index: 1; } */

/* RTL Support via typical Elementor body class or direction prop */
.rtl .ewc-table .ewc-col-attr {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 2px solid #ccc;
    text-align: right;
}

/* Product Image */
.ewc-product-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    margin: 0 auto 10px;
}

/* Buy Button */
.ewc-buy-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.ewc-buy-button:hover {
    background-color: #555;
    color: #fff;
}


/* Responsive adjustment */
@media (max-width: 767px) {
    .ewc-table {
        min-width: 100%;
        /* reset */
    }

    /* On mobile, we ensure specific min-widths for data columns if needed */
    .ewc-table td {
        min-width: 120px;
    }
}