/* Bristol Popover Styles - Theme Aware */

.bristol-popover {
    /* Reset default popover styles */
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;

    /* Positioning */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Size constraints */
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;

    /* Z-index to appear above everything */
    z-index: 9999;
}

/* Backdrop blur effect - Light theme */
.bristol-popover::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
}

/* Dark theme backdrop */
.dark .bristol-popover::backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Animations */
.bristol-popover:popover-open {
    animation: popover-fade-in 0.2s ease-out;
}

@starting-style {
    .bristol-popover:popover-open {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
}

.bristol-popover:not(:popover-open) {
    animation: popover-fade-out 0.15s ease-in;
}

@keyframes popover-fade-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes popover-fade-out {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .bristol-popover {
        width: 90vw;
        max-width: 90vw;
        max-height: 85vh;
    }

    .bristol-popover > div {
        padding: 1.25rem !important;
        max-width: none !important;
        width: 100%;
    }

    .bristol-popover h3 {
        font-size: 1.125rem !important;
    }

    .bristol-popover p {
        font-size: 0.813rem !important;
    }

    .bristol-popover .grid {
        gap: 0.5rem !important;
    }

    .bristol-popover .grid > div {
        padding: 0.5rem !important;
    }

    .bristol-popover .grid span.block.text-xs {
        font-size: 0.688rem !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
        hyphens: auto;
    }
}