/* Badge positioning fixes */

/* Remove the old slider badge style and ensure new box badge style takes precedence */
.predplatne-box .popular-badge {
    position: absolute !important;
    top: -1px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: #ff6b6b;
    color: white;
    padding: 4px 16px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 100 !important; /* Increased z-index */
    white-space: nowrap;
    line-height: 1.4;
    width: auto !important;
    right: auto !important;
    max-width: none !important;
}

/* Override any conflicting styles from predplatne.css */
.popular-badge {
    position: absolute !important;
    top: -1px !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    right: auto !important;
}

/* Specifically override the old .popular-badge styles from predplatne.css lines 232-250 */
.predplatne-box .popular-badge,
.box-header .popular-badge {
    /* Reset old positioning */
    top: -1px !important;
    right: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* Ensure proper dimensions */
    width: auto !important;
    max-width: none !important;
    
    /* Higher z-index to ensure visibility */
    z-index: 100 !important;
}

/* Allow badges to overflow the box boundaries */
.predplatne-boxes {
    position: relative;
    padding-top: 10px; /* Add space for badges */
    margin-top: 10px;
    overflow: visible !important;
}

/* Remove overflow hidden from boxes and their containers to allow badges to show */
.predplatne-box {
    overflow: visible !important;
    position: relative !important;
}

/* Ensure parent containers also allow overflow */
.predplatne-step {
    overflow: visible !important;
}

.checkout-main-content-step {
    overflow: visible !important;
}

.predplatne-container {
    overflow: visible !important;
}

/* Ensure visible badges are shown */
.predplatne-box .popular-badge:not([style*="display: none"]) {
    display: block !important;
}

/* Ensure box content doesn't overlap with badge */
.predplatne-box .box-header {
    padding-top: 10px;
    position: relative;
    z-index: 1;
}

/* Ensure the box itself creates proper stacking context */
.predplatne-box {
    z-index: 1;
    position: relative !important;
}

/* Alternative styling with background that matches box background for seamless look */
.predplatne-box .popular-badge.seamless {
    background: #ffffff;
    color: #ff6b6b;
    border: 2px solid #ff6b6b;
    box-shadow: 0 0 0 3px #ffffff;
}

/* Minimal style */
.predplatne-box .popular-badge.minimal {
    background: #00466A;
    font-size: 0.7rem;
    padding: 3px 14px;
    font-weight: 500;
}

/* Special adjustments for smaller boxes */
.jak-casto-boxes .predplatne-box .popular-badge,
.doba-boxes .predplatne-box .popular-badge {
    font-size: 0.7rem;
    padding: 3px 12px;
}

/* Ensure all box containers allow overflow */
.druh-boxes,
.chut-boxes,
.jak-casto-boxes,
.balicky-boxes,
.doba-boxes {
    overflow: visible !important;
    position: relative;
}

/* Ensure all predplatne-box elements have consistent overflow behavior */
.druh-boxes .predplatne-box,
.chut-boxes .predplatne-box,
.jak-casto-boxes .predplatne-box,
.balicky-boxes .predplatne-box,
.doba-boxes .predplatne-box {
    overflow: visible !important;
    position: relative !important;
}

/* Ensure icons don't get covered by badges */
.predplatne-box .box-icon {
    position: relative;
    z-index: 1;
    margin-top: 5px; /* Add small margin to avoid badge overlap */
}

/* Add subtle animation to badges */
@keyframes badgeBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.predplatne-box .popular-badge {
    animation: badgeBounce 2s ease-in-out infinite;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .predplatne-box .popular-badge {
        font-size: 0.65rem;
        padding: 2px 10px;
    }
    
    .predplatne-boxes {
        padding-top: 8px;
    }
}