/* Button / Checkbox Styles */
.hmo-compare-btn-wrapper {
    margin-top: 10px;
}

.hmo-checkbox-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    user-select: none;
    background-color: #20a3ac;
    padding: 10px 20px;
    border-radius: 4px;
    transition: background 0.3s;
}

.hmo-checkbox-container:hover {
    background-color: #11575c;
}

.hmo-compare-checkbox {
    margin-right: 8px;
    accent-color: #fff;
    width: 18px;
    height: 18px;
}

/* Floating Bar Styles */
.hmo-compare-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px 20px;
    z-index: 9999;
    border-top: 3px solid #20a3ac;
}

.hmo-bar-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.hmo-bar-count {
    font-weight: 700;
    font-size: 16px;
    color: #333;
}

.hmo-bar-button {
    background-color: #20a3ac;
    color: #fff;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    transition: background 0.3s;
}

.hmo-bar-button:hover {
    background-color: #11575c;
    color: #fff;
}

.hmo-bar-clear {
    color: #ff4d4d;
    text-decoration: underline;
    font-size: 14px;
    cursor: pointer;
}

/* Comparison Table Styles */
.hmo-comparison-table-wrapper {
    overflow-x: auto;
    margin: 40px 0;
    position: relative; /* Context for sticky */
    box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.1); /* Indicate scroll */
}

.hmo-comparison-table {
    width: 100%;
    border-collapse: separate; /* Required for sticky to work nicely with borders sometimes, but collapse is usually fine. Let's stick to collapse but handle borders carefully if needed. Switching to separate can help with sticky rendering z-index issues. Let's try collapse first as it was there, but if sticky fails we move to separate. Actually, sticky works with collapse in modern browsers. */
    border-collapse: collapse; 
    min-width: 800px; /* Ensure it scrolls on small screens */
}

.hmo-comparison-table th,
.hmo-comparison-table td {
    padding: 15px;
    border: 1px solid #e0e0e0;
    text-align: center;
    vertical-align: middle;
    background-color: #fff; /* Ensure background is solid for sticky elements */
}

.hmo-comparison-table th {
    background-color: #f9f9f9;
    font-weight: 800;
    color: #333;
    text-transform: uppercase;
    font-size: 14px;
}

/* Feature Label Column Styles */
.hmo-feature-label {
    text-align: left !important;
    font-weight: 700;
    background-color: #fafafa;
    width: 200px;
    min-width: 150px; /* Prevent it from getting too squashed */
}

.hmo-btn-primary {
    display: inline-block;
    background-color: #20a3ac;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap; /* Keep button on one line */
}

.hmo-btn-primary:hover {
    background-color: #11575c;
}

/* Responsive Sticky Columns on Mobile */
@media screen and (max-width: 768px) {
    .hmo-comparison-table-wrapper {
        margin: 20px 0;
        /* Scroll hint */
        background: 
            linear-gradient(to right, white 30%, rgba(255,255,255,0)),
            linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
            radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
            radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
        background-repeat: no-repeat;
        background-color: white;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    /* Make the first column sticky */
    .hmo-comparison-table th:first-child,
    .hmo-comparison-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        border-right: 2px solid #ddd; /* separation line */
        box-shadow: 2px 0 5px rgba(0,0,0,0.05); /* subtle shadow */
        background-clip: padding-box; /* fixes some border rendering issues */
    }

    /* Ensure specific backgrounds for sticky items to cover scrolled content */
    .hmo-comparison-table th:first-child {
        background-color: #f9f9f9;
        z-index: 3; /* Header sticky needs higher z-index */
    }
    
    .hmo-comparison-table td:first-child {
        background-color: #fafafa;
    }

    /* Adjust font sizes for mobile */
    .hmo-comparison-table th,
    .hmo-comparison-table td {
        padding: 10px;
        font-size: 13px;
    }
    
    .hmo-bar-content {
        flex-direction: column;
        gap: 10px;
        padding-bottom: 5px; /* adjust for safe areas if needed */
    }
    
    .hmo-bar-button {
        width: 100%;
        text-align: center;
    }
}