/* === STYLES FOR LESSON 5 (COMPLEMENTS) === */

.venn-diagram-container {
    width: 100%;
    max-width: 450px;
    aspect-ratio: 4 / 3;
    position: relative;
    margin: 1.5rem auto 0;
}
.venn-diagram-container .universal-set {
    width: 100%;
    height: 100%;
    border: 3px solid var(--universal-border);
    border-radius: 1rem;
    position: relative;
    background-color: #f8fafc;
    transition: all 0.3s ease-in-out;
}
.venn-diagram-container .universal-set-label {
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--universal-border);
}
.venn-diagram-container .circle {
    width: 65%;
    height: 85%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
    background-color: var(--card-bg-color); /* Default is clear */
}
.venn-diagram-container .circle-a {
    left: 5%;
    border: 3px solid var(--set-a-border);
}
.venn-diagram-container .circle-b {
    right: 5%;
    border: 3px solid var(--set-b-border);
}
.venn-diagram-container .set-label {
    position: absolute;
    font-size: 1.5rem;
    font-weight: 700;
    top: 5%;
}
.venn-diagram-container .label-a { left: 18%; color: var(--set-a-border); }
.venn-diagram-container .label-b { right: 18%; color: var(--set-b-border); }
.venn-diagram-container .element {
    position: absolute;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color-dark);
}

.highlight-a-complement .universal-set {
    background-color: var(--complement-color, rgba(203, 213, 225, 0.7));
}
.highlight-a-complement .circle-a {
    background-color: var(--card-bg-color); /* White "cutout" */
}

.highlight-union-complement .universal-set {
    background-color: var(--complement-color, rgba(203, 213, 225, 0.7));
}
.highlight-union-complement .circle-a,
.highlight-union-complement .circle-b {
    background-color: var(--card-bg-color); /* White "cutout" */
}

.highlight-intersection-complement .universal-set {
    background-color: var(--complement-color, rgba(203, 213, 225, 0.7));
}
.highlight-intersection-complement .circle-a {
     background-color: var(--set-a-color); /* Shade circles */
}
.highlight-intersection-complement .circle-b {
     background-color: var(--set-b-color); /* Shade circles */
}
.intersection-cutout {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32%;
    height: 40%;
    background: var(--card-bg-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hidden by default */
}
.highlight-intersection-complement .intersection-cutout {
    display: block;
}