.ct-container {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    width: 100%;
    position: relative; /* Container context for absolute lines */
    isolation: isolate; /* Create new stacking context */
}

/* 
 * ABSOLUTE POSITIONED CONTINUOUS VERTICAL LINES 
 * These pseudo-elements span the entire height of the container.
 * We use 'mix-blend-mode' or high z-index to ensure visibility.
 */
.ct-container::before,
.ct-container::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--ct-divider-width, 1px);
    /* Use CSS variable for color, fallback to explicit color if variable fails */
    background-color: var(--ct-divider-color, #e2e8f0); 
    z-index: 10; /* Ensure it sits ON TOP of everything */
    pointer-events: none; /* Allow clicks through */
}

/* Position lines at exactly 33.33% and 66.66% assuming equal columns */
.ct-container::before {
    left: 33.333%;
}

.ct-container::after {
    left: 66.666%;
}

.ct-header {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* Gradient is applied here via widget controls (style tab) */
    position: relative;
    z-index: 1; 
}

.ct-header-cell {
    flex: 1;
    text-align: center;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important; /* Ensure gradient shines through */
    z-index: 2; 
}

.ct-body {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.ct-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    position: relative;
    /* Zebra striping background color is applied here via widget controls */
}

.ct-row:last-child {
    border-bottom: none !important;
}

.ct-col {
    flex: 1;
    padding: 0 15px;
    display: flex; 
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Remove old dividers */
.ct-col-1::after,
.ct-col-2::after,
.ct-header-col-1::after,
.ct-header-col-2::after {
    display: none !important;
}

/* Column 1: Aspect */
.ct-col-1 {
    justify-content: flex-start;
}

.ct-aspect-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.ct-aspect-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ct-aspect-icon i {
    font-size: 20px;
}

/* SVG FIXES */
.ct-aspect-icon svg {
    width: 20px;
    height: 20px;
    fill: none !important; 
}

.ct-aspect-icon svg path,
.ct-aspect-icon svg rect,
.ct-aspect-icon svg circle,
.ct-aspect-icon svg polygon {
    fill: currentColor !important;
	stroke-width: 0; /* Voorkom dikke lijnen tenzij nodig */
}

/* Columns 2 & 3: Content */
.ct-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.ct-status-icon {
    margin-top: 3px;
    flex-shrink: 0;
}

.ct-mobile-label {
    display: none;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.85em;
    color: #666;
}

/* Responsive Styles */
@media (max-width: 767px) {
    .ct-header {
        display: none; /* Verberg de desktop header */
    }

    .ct-container::before,
    .ct-container::after {
        display: none; /* Verberg de verticale lijnen */
    }

    .ct-row {
        flex-direction: column;
        padding: 15px !important;
        border-bottom: 8px solid #f1f5f9; /* Maak een duidelijk blok per rij */
    }

    .ct-col {
        width: 100%;
        padding: 8px 0 !important;
        display: block !important;
    }

    /* Het Aspect (Titel + Icoon) */
    .ct-col-1 {
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        padding-bottom: 12px !important;
    }

    .ct-aspect-wrapper {
        justify-content: flex-start;
        gap: 12px;
    }

    .ct-aspect-icon {
        width: 32px; /* Iets kleiner op mobiel */
        height: 32px;
    }

    /* Labels en Content naast elkaar krijgen */
    .ct-mobile-label {
        display: block;
        margin-bottom: 4px;
    }

    .ct-content-wrapper {
        display: flex;
        align-items: center; /* Lijn icoon en tekst horizontaal uit */
        gap: 8px;
        padding-left: 0 !important; /* Verwijder de oude indent */
    }

    .ct-status-icon {
        margin-top: 0; /* Reset de desktop margin */
    }
}