/**
 * QuoteManager Badge System - Universal Styling
 *
 * Provides consistent badge styling across all QuoteManager blocks
 * Colors controlled by Color Manager V2 via CSS variables
 */

/* === BASE BADGE STYLING === */
.qm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    line-height: 1;
    white-space: nowrap;
    transition: var(--qm-transition, all 0.2s ease);

    /* Default badge colors from Color Manager */
    background-color: var(--qm-new-badge-bg, #F4A261);
    color: var(--qm-new-badge-text, #ffffff);
    border: 1px solid transparent;
}

/* === BADGE VARIANTS === */

/* Inline Badge (smaller, subtle) */
.qm-badge--inline {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-weight: 500;
}

/* New Phase Badge */
.qm-badge--new-phase {
    background-color: var(--qm-new-phase-badge-bg, #F4A261);
    color: var(--qm-new-phase-badge-text, #ffffff);
}

/* New Story Badge */
.qm-badge--new-story {
    background-color: var(--qm-new-story-badge-bg, #2A9D8F);
    color: var(--qm-new-story-badge-text, #ffffff);
}

/* Blog Badge */
.qm-badge--blog {
    background-color: var(--qm-blog-badge-bg, #7C3AED);
    color: var(--qm-blog-badge-text, #ffffff);
}

/* Corner Badge (positioned in top-right corner) */
.qm-badge--corner {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 10;
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* === BADGE STATES === */

/* Hover Effect */
.qm-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Active/Pressed */
.qm-badge:active {
    transform: translateY(0);
}

/* === BADGE SIZES === */

/* Small Badge */
.qm-badge--small {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
}

/* Large Badge */
.qm-badge--large {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
}

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

@media (max-width: 768px) {
    .qm-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }

    .qm-badge--inline {
        font-size: 0.65rem;
        padding: 0.15rem 0.3rem;
    }
}

/* === ACCESSIBILITY === */

@media (prefers-reduced-motion: reduce) {
    .qm-badge {
        transition: none;
    }

    .qm-badge:hover {
        transform: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .qm-badge {
        border: 2px solid currentColor;
        font-weight: 700;
    }
}

/* === BADGE COMBINATIONS === */

/* Badge with emoji (common pattern) */
.qm-badge:has-emoji {
    padding-left: 0.3rem;
}

/* Badge in card contexts */
.qm-card .qm-badge,
.qm-post .qm-badge {
    margin-bottom: 0.5rem;
}

/* Badge in timeline contexts */
.qm-timeline .qm-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
}

/* === PRINT STYLES === */

@media print {
    .qm-badge {
        background: none !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
}