/* MOF Alerts Frontend Styles */

/* Multi-slide functionality */


/* Navigation controls */
.alert-nav-controls {
    display: flex;
    gap: 8px;
    justify-content: end;
    align-items: center;
    margin-right: 8px;
    /* margin-top: 12px; */
}

[dir="rtl"] .alert-nav-controls {
    margin-left: 8px;
    margin-right: unset;
}
.mof-slide.active {
    opacity: 1;
    display: flex;
    justify-content: flex-start;
    /* gap: 20px; */
    align-items: center;
    height: fit-content;
}

.alert-content P {
    padding: 0;
    padding-top: 0 !important;
}

@media screen and (max-width: 768px) {
.mof-slide.active {
    flex-wrap: wrap;
}
}
.mof-alert-container{
    padding: 0;
    padding-inline-end: 0 !important;
    padding-inline-start: 0 !important;
}

[dir="rtl"] .alert-link {
    margin-right: 1.5rem;
    align-self: end;
    margin-top: 0 !important;
}
/* MOF Alerts Frontend Styles */

/* Multi-slide functionality */
.mof-slides-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.mof-slides-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    height: fit-content;
    align-items: flex-start;
}

.mof-slide {
    flex: 0 0 100%;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    height: 0;
}

/* .mof-slide.active {
    opacity: 1;
} */

/* Navigation controls */
/* .alert-nav-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
} */

.mof-slide-prev,
.mof-slide-next {
    background: none;
    border: none;
    cursor: pointer;
    /* padding: 4px; */
    /* border-radius: 4px; */
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
}

.mof-slide-prev:hover,
.mof-slide-next:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.mof-slide-prev svg,
.mof-slide-next svg {
    width: 20px;
    height: 20px;
    /* width: fit-content; */
    /* stroke: currentColor; */
}

.mof-slide-prev:focus,
.mof-slide-next:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* RTL Support */
[dir="rtl"] .mof-slide-prev svg,
[dir="rtl"] .mof-slide-next svg {
    transform: rotate(180deg);
}

[dir="rtl"] .mof-slides-wrapper {
    direction: rtl;
}

/* Accessibility improvements */
/* .aegov-alert[data-slide-count]:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
} */

/* Loading state */
.aegov-alert.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Dismissible alert animation */
.aegov-alert.dismissing {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
}

/* Responsive design */
@media (max-width: 768px) {
    .alert-nav-controls {
        gap: 4px;
    }
    
    .mof-slides-wrapper {
        transition: transform 0.3s ease-in-out;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mof-slide-prev,
    .mof-slide-next {
        border: 1px solid;
    }
    
    .mof-slide-prev:hover,
    .mof-slide-next:hover {
        background-color: ButtonFace;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mof-slides-wrapper,
    .mof-slide,
    .aegov-alert.dismissing {
        transition: none;
    }
}

/* Print styles */
@media print {
    .alert-nav-controls,
    .alert-dismiss {
        display: none !important;
    }
    
    .mof-slide {
        display: block !important;
        opacity: 1 !important;
        flex: none !important;
        width: auto !important;
    }
    
    .mof-slides-wrapper {
        display: block !important;
        transform: none !important;
        height: fit-content;
    }
    
    .mof-slide:not(:first-child):before {
        content: "Slide " counter(slide-counter) ": ";
        font-weight: bold;
        display: block;
        margin-top: 1em;
        counter-increment: slide-counter;
    }
    
    .mof-slides-container {
        counter-reset: slide-counter;
        overflow: visible !important;
    }
}