/* Explain: Styles for UI components like rotators, accordions, and buttons. */
.rotator-slide {
    transition: opacity 1.2s ease;
}

.rotator-dot {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 0.3rem;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.rotator-dot-mark {
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.55);
    transition: all 0.3s ease;
}

.rotator-dot.is-active .rotator-dot-mark {
    width: 1.6rem;
    background: #ffffff;
}

/* Keep accordion sections reliably expandable regardless of utility-layer
   overrides on the daisyUI collapse component. */
.collapse > .collapse-title {
    cursor: pointer;
}

.collapse.collapse-open {
    grid-template-rows: max-content 1fr;
}

.collapse.collapse-open > .collapse-content {
    visibility: visible;
}