/* BIM-Q Notification Bar */
.bimq-notification-bar {
    position: relative;
    width: 100%;
    transition:
        opacity 0.3s ease,
        height 0.3s ease;
}

.bimq-notification-bar.hidden {
    display: none;
}

.bimq-notification-bar > .wp-block-group.alignwide {
    justify-content: space-between;
}

.bimq-notification-text {
    margin: 0;
}

.bimq-notification-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp--preset--color--base, #fff);
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.bimq-notification-close:hover {
    opacity: 0.7;
}

.bimq-notification-close:focus {
    outline: 2px solid var(--wp--preset--color--base, #fff);
    outline-offset: 2px;
}

.bimq-notification-close svg {
    width: 20px;
    height: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bimq-notification-bar .wp-block-group > .wp-block-group {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--wp--preset--spacing--small, 1rem);
    }

    .bimq-notification-close {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }
}