/**
 * Badge Components
 * Path: public_html/css/badges.css
 * Version: 1.5.0
 *
 * Changelog v1.4.0:
 * - Darkened 7 pricing badge backgrounds for WCAG AA 4.5:1 contrast (white text at 0.7rem)
 * - Updated legacy data-pricing-model selectors to match
 *
 * Changelog v1.3.0:
 * - All badges now same compact size: 4px 8px padding, 0.7rem font, 500 weight
 * - Unified border-radius: 4px for all badges
 * 
 * Changelog v1.2.0:
 * - Tags and Categories now black (#1f2937) with smaller padding (4px 8px)
 * - More compact badge appearance
 * 
 * Changelog v1.1.0:
 * - Added credits-pay-per-use slug (renamed from pay-per-use)
 * - Added custom-enterprise pricing type
 * 
 * Single source of truth for ALL badge styles:
 * - Pricing badges (free, freemium, subscription, etc.)
 * - Category badges
 * - Tag badges
 * - Lifetime deal badges
 *
 * This file should be loaded BEFORE page-specific CSS files.
 */

/* ====================================================================
   SVG ICON BASE STYLES (Lucide)
   All .svg-icon elements inherit text color via stroke="currentColor"
   ==================================================================== */

.svg-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.emoji-fallback {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

/* ====================================================================
   SHARED BASE STYLES - DRY Principle
   All badges inherit these properties
   ==================================================================== */

.pricing,
.sidebar-pricing,
.category,
.tag,
.lifetime-deal {
    /* Box Model */
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    box-sizing: border-box !important;

    /* Spacing - Compact */
    padding: 4px 8px !important;
    margin: 0 !important;

    /* Typography - Compact */
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    /* Alignment */
    vertical-align: top !important;

    /* Reset */
    border: none !important;
    text-decoration: none !important;
    border-radius: 4px !important;
}

/* SVG icons inside badges inherit color and size correctly */
.pricing .svg-icon,
.sidebar-pricing .svg-icon,
.category .svg-icon,
.tag .svg-icon,
.lifetime-deal .svg-icon {
    flex-shrink: 0;
    vertical-align: middle;
}

/* ====================================================================
   TAG & CATEGORY BADGES - Black style
   ==================================================================== */

.tag,
.category {
    background-color: #1f2937 !important;
    color: white !important;
}

.tag {
    cursor: pointer;
}

/* Tag focus state for accessibility */
.tag:focus-visible {
    outline: 2px solid #fbbf24 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
}

/* ====================================================================
   PRICING BADGES (.pricing and .sidebar-pricing)
   Used on cards and tool detail pages
   ==================================================================== */

.pricing,
.sidebar-pricing {
    text-transform: capitalize;
    color: white !important;
}

/* Pricing Type Colors - Avoid conflicts with categories/tags */

/* Free - Emerald 700 */
.pricing[data-pricing-type="free"],
.sidebar-pricing[data-pricing-type="free"] {
    background-color: #047857 !important;
    color: white !important;
}

/* Freemium - Teal 700 */
.pricing[data-pricing-type="freemium"],
.sidebar-pricing[data-pricing-type="freemium"] {
    background-color: #0f766e !important;
    color: white !important;
}

/* Subscription - Indigo 600 */
.pricing[data-pricing-type="subscription"],
.sidebar-pricing[data-pricing-type="subscription"] {
    background-color: #4f46e5 !important;
    color: white !important;
}

/* One-time - Violet 600 */
.pricing[data-pricing-type="one-time"],
.sidebar-pricing[data-pricing-type="one-time"] {
    background-color: #7c3aed !important;
    color: white !important;
}

/* Credits/Pay-per-use - Orange 700 */
.pricing[data-pricing-type="pay-per-use"],
.pricing[data-pricing-type="credits-pay-per-use"],
.sidebar-pricing[data-pricing-type="pay-per-use"],
.sidebar-pricing[data-pricing-type="credits-pay-per-use"] {
    background-color: #c2410c !important;
    color: white !important;
}

/* Open-source - Emerald 700 */
.pricing[data-pricing-type="open-source"],
.sidebar-pricing[data-pricing-type="open-source"] {
    background-color: #047857 !important;
    color: white !important;
}

/* Unknown - Neutral Gray */
.pricing[data-pricing-type="unknown"],
.sidebar-pricing[data-pricing-type="unknown"] {
    background-color: #6b7280 !important;
    color: white !important;
}

/* Custom/Enterprise - Dark Blue */
.pricing[data-pricing-type="custom-enterprise"],
.sidebar-pricing[data-pricing-type="custom-enterprise"] {
    background-color: #1e40af !important;
    color: white !important;
}

/* Legacy: Paid */
.pricing[data-pricing-type="paid"],
.sidebar-pricing[data-pricing-type="paid"] {
    background-color: #dc2626 !important;
    color: white !important;
}

/* Subscription icon alignment fix */
.pricing[data-pricing-type="subscription"]::before,
.sidebar-pricing[data-pricing-type="subscription"]::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 1em;
    vertical-align: middle;
}

/* Legacy data-pricing-model support (backward compatibility) */
.pricing[data-pricing-model="free"],
.pricing[data-pricing-model="freemium"],
.pricing[data-pricing-model="open source"],
.pricing[data-pricing-model="Free"],
.pricing[data-pricing-model="Freemium"],
.pricing[data-pricing-model="Open Source"],
.sidebar-pricing[data-pricing-model="free"],
.sidebar-pricing[data-pricing-model="freemium"],
.sidebar-pricing[data-pricing-model="open source"] {
    background-color: #047857 !important;
    color: white !important;
}

.pricing[data-pricing-model="paid"],
.pricing[data-pricing-model="Paid"],
.sidebar-pricing[data-pricing-model="paid"] {
    background-color: #dc2626 !important;
    color: white !important;
}

/* ====================================================================
   LIFETIME DEAL BADGES
   ==================================================================== */

.lifetime-deal {
    background-color: #b45309 !important;
    color: white !important;
    text-transform: capitalize;
}

/* ====================================================================
   BADGE CONTAINERS
   ==================================================================== */

.pricing-container,
.category-container,
.tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
}

.pricing-container {
    align-items: center;
}

/* Pricing types list (for tool detail sidebar) */
.pricing-types-list {
    list-style: none;
    padding-left: 0;
    margin-top: 8px;
}

.pricing-types-list li {
    margin-bottom: 8px;
}

/* ====================================================================
   SIDEBAR PRICING SPACING (info-section context)
   ==================================================================== */

.info-section .sidebar-pricing {
    margin-right: 6px !important;
    margin-bottom: 6px !important;
}

/* ====================================================================
   HIGH CONTRAST MODE SUPPORT
   ==================================================================== */

@media (prefers-contrast: high) {
    /* Tags and Categories in high contrast */
    .tag,
    .category {
        background-color: #000000 !important;
        color: white !important;
        border: 1px solid #374151 !important;
    }
    
    /* Free/Open-source pricing in high contrast */
    .pricing[data-pricing-type="free"],
    .pricing[data-pricing-type="freemium"],
    .pricing[data-pricing-type="open-source"],
    .lifetime-deal {
        background-color: #14532d !important;
        color: white !important;
        border: 1px solid #166534 !important;
    }
    
    /* Paid pricing types in high contrast */
    .pricing[data-pricing-type="subscription"],
    .pricing[data-pricing-type="one-time"],
    .pricing[data-pricing-type="pay-per-use"],
    .pricing[data-pricing-type="paid"],
    .pricing[data-pricing-type="unknown"] {
        background-color: #9a3412 !important;
        color: white !important;
        border: 1px solid #c2410c !important;
    }
}

/* ====================================================================
   RESPONSIVE DESIGN
   ==================================================================== */

@media screen and (max-width: 768px) {
    /* Maintain consistent styling on mobile */
    .pricing,
    .sidebar-pricing,
    .category,
    .tag,
    .lifetime-deal {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
        font-weight: 500 !important;
    }
}