/* Complete fix for active state double border issue */

/* Override all possible border-like effects on active boxes */
.predplatne-box.active,
.predplatne-box.active:hover,
.predplatne-box.active:focus {
    /* Single solid border */
    border: 2px solid #00466A !important;
    
    /* No transform that could misalign badge */
    transform: none !important;
    
    /* Subtle shadow that doesn't look like a border */
    box-shadow: 0 2px 8px rgba(0, 70, 106, 0.1) !important;
    
    /* Light blue background */
    background-color: #f0f7ff !important;
    
    /* No outline */
    outline: none !important;
    outline-offset: 0 !important;
    
    /* Ensure no other effects */
    text-shadow: none !important;
    filter: none !important;
}

/* Remove ALL pseudo elements that might create border effects */
.predplatne-box.active::before,
.predplatne-box.active::after,
.predplatne-box.active:hover::before,
.predplatne-box.active:hover::after {
    display: none !important;
    content: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure consistent appearance across all states */
.predplatne-box {
    /* Always 2px border */
    border-width: 2px !important;
    border-style: solid !important;
    
    /* Remove any default outlines */
    outline: none !important;
}

/* Fix for click/mousedown state */
.predplatne-box:active:not(.active) {
    transform: scale(0.98) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure badge position stays consistent */
.predplatne-box.active .popular-badge,
.predplatne-box:active .popular-badge {
    top: -2px !important;
    transform: translate(-50%, -50%) !important;
}

/* Debug helper - add ?debug=active to URL */
@media screen {
    .debug-active .predplatne-box.active {
        position: relative !important;
    }
    
    .debug-active .predplatne-box.active::before {
        content: 'ACTIVE' !important;
        position: absolute !important;
        bottom: -20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: red !important;
        color: white !important;
        padding: 2px 8px !important;
        font-size: 10px !important;
        display: block !important;
        z-index: 9999 !important;
    }
}