/* ============================================
   Premium Badges Filter Component - Card Style
   With circular checkbox on right side
   ============================================ */

/* Filter Container */
.premium-badges-filter {
    /* Filter container - styles applied via child elements */
}

/* Main Container */
.listing-sidebar__filter-accordion__inner .premium-badges-container {
    margin: 0;
    padding: 0;
}

/* Wrapper - Flex layout that auto-wraps */
.premium-badges-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

/* Collapsable animation for extra items */
.premium-badge-card.collapsable-extra-item {
    animation: premiumBadgeIn 0.55s ease-in-out forwards;
}

@keyframes premiumBadgeIn {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Card Style Badge
   ============================================ */

.premium-badge-card {
    display: flex;
    align-items: flex-start; /* Align to top so checkbox aligns with logo */
    justify-content: space-between;
    padding: 6px 8px; /* Slightly adjusted padding */
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    position: relative;
    min-height: 40px;
    box-sizing: border-box;
    /* Desktop: flex basis to fit ~4 per row with gaps */
    flex: 0 0 calc((100% - 36px) / 4); /* 4 items with 3 gaps of 12px */
    max-width: calc((100% - 36px) / 4);
}

.premium-badge-card:hover {
    opacity: 0.85;
}

/* Hide the actual checkbox input */
.premium-badge-card__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Content area with icon and text */
/* Content area with icon and text */
.premium-badge-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* Icon wrapper */
.premium-badge-card__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* Reduced */
    height: 20px; /* Reduced */
    flex-shrink: 0;
}

/* Icon styling */
.premium-badge-card__icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

/* Text styling */
.premium-badge-card__text {
    font-family: 'Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    font-size: 13px; /* Slightly smaller */
    line-height: 1.2;
    letter-spacing: 0.1px;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Circular Checkbox
   ============================================ */

.premium-badge-card__checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* Reduced */
    height: 20px; /* Reduced */
    min-width: 20px;
    border: 1.5px solid #d1d5db; /* Thinner border */
    border-radius: 50%;
    background: #ffffff80;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: 8px;
}

.premium-badge-card__checkmark {
    width: 12px;
    height: 12px;
    opacity: 0;
    color: #fff;
    transition: opacity 0.2s ease;
}

/* Checked state - keep white circle */
.premium-badge-card__input:checked ~ .premium-badge-card__checkbox {
    background: #ffffff80;
    /* border-color stays #D1D5DB (inherited) */
}

.premium-badge-card__input:checked ~ .premium-badge-card__checkbox .premium-badge-card__checkmark {
    opacity: 1;
    color: #000000;
}

/* Text becomes slightly bolder when checked */
.premium-badge-card__input:checked ~ .premium-badge-card__content .premium-badge-card__text {
    font-weight: 600;
}

/* Focus state for accessibility - subtle, no border */
.premium-badge-card:focus-within {
    outline: none;
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablet - 2 columns */
@media (max-width: 1024px) {
    .premium-badge-card {
        flex: 0 0 calc((100% - 10px) / 2); /* 2 items with 1 gap of 10px */
        max-width: calc((100% - 10px) / 2);
        padding: 8px !important;
        min-height: auto !important;
        height: auto !important;
    }

    .premium-badge-card__content {
        gap: 6px;
    }

    .premium-badges-wrapper {
        gap: 10px;
    }
}

/* Mobile - Dynamic Flex Layout (Content Width) */
@media (max-width: 640px) {
    .listing-sidebar__filter-accordion__inner .premium-badges-container {
        padding: 0;
    }

    .premium-badges-wrapper {
        gap: 12px;
    }

    .premium-badge-card {
        padding: 8px !important;
        min-height: auto !important; /* Let card grow with content */
        height: auto !important;
        border-radius: 6px;
        width: auto; /* Content based width */
        flex: 0 0 auto; /* Do not grow, do not shrink */
        max-width: 100%; /* Prevent overflow */
    }

    .premium-badge-card__content {
        gap: 6px;
    }

    .premium-badge-card__icon-wrapper {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .premium-badge-card__icon {
        width: 18px !important;
        height: 18px !important;
    }

    .premium-badge-card__text {
        font-family: 'Neue Plak', 'Neue', sans-serif !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        line-height: 100% !important;
        letter-spacing: 0.1px !important;
        text-align: left !important; /* Left align when icon is inline */
        white-space: nowrap; /* Prevent wrapping for inline layout */
    }

    .premium-badge-card__checkbox {
        width: 16px;
        height: 16px;
        min-width: 16px;
    }

    .premium-badge-card__checkmark {
        width: 10px;
        height: 10px;
    }
}

/* Very small screens - single column removed to keep 2 columns */
/* @media (max-width: 400px) {
    .premium-badges-row {
        grid-template-columns: 1fr;
    }
} */

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .premium-badge-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* ============================================
   Empty State
   ============================================ */

.premium-badges-empty {
    color: #6b7280;
    font-size: 14px;
    padding: 16px 0;
    text-align: center;
    font-style: italic;
}

/* ============================================
   Legacy class support
   ============================================ */

.premium-badge__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}