/* Fix hover effects and badge opacity */

/* Fix badge transparency - make them fully opaque */
.predplatne-box .popular-badge {
    background: #ff6b6b !important;
    opacity: 1 !important;
}

/* Alternative darker red for better visibility */
.predplatne-box .popular-badge.dark {
    background: #e53935 !important;
}

/* Remove transform on hover to prevent badge misalignment */
.predplatne-box:hover {
    transform: none !important;
    border-color: #00466A !important;
    border-width: 2px !important; /* Ensure border stays same width */
    box-shadow: 0 8px 30px rgba(0, 70, 106, 0.20) !important;
    background-color: #fafbfc !important;
}

/* Smooth transitions without transform */
.predplatne-box {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease !important;
    border-width: 2px !important; /* Consistent border width */
}

/* Ensure badge stays in place during hover */
.predplatne-box:hover .popular-badge {
    top: -2px !important;
    transform: translate(-50%, -50%) !important;
}

/* Fix shimmer effect positioning */
.predplatne-box::before {
    display: none !important; /* Disable shimmer as it may interfere */
}

/* Keep icon animations but without affecting layout */
.predplatne-box:hover .box-icon {
    transform: scale(1.05) !important; /* Reduced scale to prevent overflow */
}

/* Ensure active state doesn't break layout */
.predplatne-box.active {
    transform: none !important;
    border-color: #00466A !important;
    border-width: 2px !important;
    border-style: solid !important;
    background-color: #f0f7ff !important;
    outline: none !important;
    box-shadow: 0 4px 15px rgba(0, 70, 106, 0.15) !important; /* Lighter shadow */
}

/* Remove checkmark and any pseudo elements */
.predplatne-box.active:after,
.predplatne-box.active:before {
    display: none !important;
    content: none !important;
}

/* Fix focus states */
.predplatne-box:focus {
    transform: none !important;
    outline: 2px solid #00466A !important;
    outline-offset: 3px !important;
    border-width: 2px !important;
}

/* Remove focus outline when box is clicked/active */
.predplatne-box:active {
    outline: none !important;
}

/* Mobile touch states */
@media (hover: none) {
    .predplatne-box:active {
        transform: none !important;
        background-color: #f0f7ff !important;
    }
}

/* Ensure badge has solid background */
.popular-badge {
    background-color: #ff6b6b !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Add subtle inner shadow to badge for depth */
.popular-badge {
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Ensure box content doesn't overlap with badge on hover */
.predplatne-box:hover .box-header {
    padding-top: 0 !important;
}

/* Remove the additional border overlay */
.predplatne-box:after {
    display: none !important;
}

/* Ensure badges stay above hover effects */
.predplatne-box .popular-badge {
    z-index: 1001 !important;
}

/* Debug mode for hover issues */
.debug-hover .predplatne-box:hover {
    outline: 2px dashed red !important;
}
.debug-hover .predplatne-box:hover .popular-badge {
    outline: 2px dashed blue !important;
}