/* Ultimate Card Tag Fix - บังคับให้ tag แสดงบนสุดเสมอ */

/* Reset all positioning conflicts */
.package-card {
    position: relative !important;
    z-index: 1 !important;
}

.card-thumbnail {
    position: relative !important;
    overflow: visible !important;
    z-index: 2 !important;
}

/* Override any overflow hidden from other CSS */
.package-card .card-thumbnail {
    overflow: visible !important;
    border-top-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
}

/* Force card-tag to be positioned relative to package-card instead of card-thumbnail */
.package-card {
    position: relative !important;
    overflow: visible !important;
}

.package-card .card-tag {
    position: absolute !important;
    right: 15px !important;
    top: 15px !important;
    background: #1857fc !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 6px !important;
    border-radius: 40px !important;
    padding: 6px 14px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    z-index: 999999 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transform: translateZ(0) !important;
}

/* Hot Deal variant */
.package-card .card-tag.hot-deal {
    background: #f92828 !important;
}

/* Best Review variant */
.package-card .card-tag.best-review {
    background: #28a745 !important;
}

/* Make sure on hover the tag stays visible */
.package-card:hover .card-tag {
    z-index: 999999 !important;
}

/* Ensure other elements don't interfere */
.saved-btn {
    z-index: 9998 !important;
}

.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
    z-index: 9997 !important;
}

/* Tag icon styling */
.card-tag img {
    width: 15px !important;
    height: auto !important;
    filter: brightness(0) invert(1) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .package-card .card-tag {
        right: 12px !important;
        top: 12px !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
    }
    
    .card-tag img {
        width: 12px !important;
    }
}