/* Base Chip Styles */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: default;
}

/* Chip with icons */
.chip i,
.chip .icon {
    font-size: 0.9rem;
}

.chip adaptive-icon {
    height: 0.9rem;
    width: 0.9rem;
}


/* Default chip */
.chip-default {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
}

/* Default chip hover - lighter */
.chip-default:hover {
    background-color: var(--text-secondary);
    color: var(--bg-secondary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Primary chip */
.chip-primary {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--accent-primary);
}

/* Primary chip hover - lighter */
.chip-primary:hover {
    background-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
}

/* Success chip */
.chip-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

/* Success chip hover - lighter */
.chip-success:hover {
    background-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.2);
}

/* Warning chip */
.chip-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

/* Warning chip hover - lighter */
.chip-warning:hover {
    background-color: rgba(245, 158, 11, 0.3);
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.2);
}

/* Danger chip */
.chip-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

/* Danger chip hover - lighter */
.chip-danger:hover {
    background-color: rgba(239, 68, 68, 0.3);
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.2);
}

/* Info chip */
.chip-info {
    background-color: rgba(6, 182, 212, 0.1);
    color: var(--info);
}

/* Info chip hover - lighter */
.chip-info:hover {
    background-color: rgba(6, 182, 212, 0.3);
    box-shadow: 0 1px 3px rgba(6, 182, 212, 0.2);
}

/* Outline default chip */
.chip-outline.chip-default {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* Outline default chip hover - lighter */
.chip-outline.chip-default:hover {
    background-color: var(--bg-secondary);
    border-color: var(--text-secondary);
}

/* Outline primary chip */
.chip-outline.chip-primary {
    background-color: transparent;
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
}

/* Outline primary chip hover - lighter */
.chip-outline.chip-primary:hover {
    background-color: rgba(59, 130, 246, 0.15);
}

/* Outline success chip */
.chip-outline.chip-success {
    background-color: transparent;
    border: 1px solid var(--success);
    color: var(--success);
}

/* Outline success chip hover - lighter */
.chip-outline.chip-success:hover {
    background-color: rgba(16, 185, 129, 0.15);
}

/* Outline warning chip */
.chip-outline.chip-warning {
    background-color: transparent;
    border: 1px solid var(--warning);
    color: var(--warning);
}

/* Outline warning chip hover - lighter */
.chip-outline.chip-warning:hover {
    background-color: rgba(245, 158, 11, 0.15);
}

/* Outline danger chip */
.chip-outline.chip-danger {
    background-color: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
}

/* Outline danger chip hover - lighter */
.chip-outline.chip-danger:hover {
    background-color: rgba(239, 68, 68, 0.15);
}

/* Outline info chip */
.chip-outline.chip-info {
    background-color: transparent;
    border: 1px solid var(--info);
    color: var(--info);
}

/* Outline info chip hover - lighter */
.chip-outline.chip-info:hover {
    background-color: rgba(6, 182, 212, 0.15);
}

/* Soft default chip */
.chip-soft.chip-default {
    background-color: var(--bg-tertiary);
}

/* Soft default chip hover - lighter */
.chip-soft.chip-default:hover {
    background-color: var(--bg-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Soft primary chip */
.chip-soft.chip-primary {
    background-color: rgba(59, 130, 246, 0.15);
}

/* Soft primary chip hover - lighter */
.chip-soft.chip-primary:hover {
    background-color: rgba(59, 130, 246, 0.35);
}

/* Soft success chip */
.chip-soft.chip-success {
    background-color: rgba(16, 185, 129, 0.15);
}

/* Soft success chip hover - lighter */
.chip-soft.chip-success:hover {
    background-color: rgba(16, 185, 129, 0.35);
}

/* Soft warning chip */
.chip-soft.chip-warning {
    background-color: rgba(245, 158, 11, 0.15);
}

/* Soft warning chip hover - lighter */
.chip-soft.chip-warning:hover {
    background-color: rgba(245, 158, 11, 0.35);
}

/* Soft danger chip */
.chip-soft.chip-danger {
    background-color: rgba(239, 68, 68, 0.15);
}

/* Soft danger chip hover - lighter */
.chip-soft.chip-danger:hover {
    background-color: rgba(239, 68, 68, 0.35);
}

/* Soft info chip */
.chip-soft.chip-info {
    background-color: rgba(6, 182, 212, 0.15);
}

/* Soft info chip hover - lighter */
.chip-soft.chip-info:hover {
    background-color: rgba(6, 182, 212, 0.35);
}

/* Small chip */
.chip-sm {
    padding: 2px 8px;
    font-size: 0.75rem;
    border-radius: 12px;
}

/* Large chip */
.chip-lg {
    padding: 6px 16px;
    font-size: 0.95rem;
    border-radius: 20px;
}

/* Clickable chip */
.chip-clickable {
    cursor: pointer;
}

/* Clickable chip hover */
.chip-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Clickable chip active */
.chip-clickable:active {
    transform: translateY(0);
}

/* Dismissible chip */
.chip-dismissible {
    padding-right: 8px;
}

/* Dismiss button */
.chip-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    color: inherit;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Dismiss button hover */
.chip-dismiss:hover {
    background-color: rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
}

/* Featured Chip Base Styles */
.chip-featured {
    position: relative;
    border: none;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    color: white;
    font-weight: 600;
    padding: 5px 14px;
    z-index: 1;
    overflow: hidden;
}

/* Shimmer effect on hover */
.chip-featured::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(30deg);
    transition: transform 0.7s;
    z-index: -1;
}

/* Animate shimmer on hover */
.chip-featured:hover::before {
    transform: rotate(30deg) translate(50%, 50%);
}

/* Add subtle shadow on hover */
.chip-featured:hover {
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

/* Featured Premium Variant */
.chip-featured.chip-premium {
    background: linear-gradient(135deg, #ffb347 0%, #ffcc33 100%);
}

.chip-featured.chip-premium:hover {
    box-shadow: 0 3px 10px rgba(255, 179, 71, 0.4);
}

/* Featured New Variant */
.chip-featured.chip-new {
    background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
}

.chip-featured.chip-new:hover {
    box-shadow: 0 3px 10px rgba(67, 206, 162, 0.4);
}

/* Featured Special Variant */
.chip-featured.chip-special {
    background: linear-gradient(135deg, #834d9b 0%, #d04ed6 100%);
}

.chip-featured.chip-special:hover {
    box-shadow: 0 3px 10px rgba(131, 77, 155, 0.4);
}

/* Add a subtle shine to the icon if present */
.chip-featured i {
    position: relative;
    z-index: 2;
    font-size: 0.95rem;
    margin-right: 6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Small variant */
.chip-featured.chip-sm {
    padding: 3px 10px;
    font-size: 0.7rem;
}

/* Large variant */
.chip-featured.chip-lg {
    padding: 7px 18px;
    font-size: 1rem;
}

/* SOLID COLOR CHIPS */

/* Solid color chips - base styles */
.chip-solid {
    color: white;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border: none;
}

/* Solid primary chip */
.chip-solid.chip-primary {
    background-color: var(--accent-primary);
    color: white;
}

/* Solid primary chip hover */
.chip-solid.chip-primary:hover {
    background-color: var(--accent-secondary);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

/* Solid success chip */
.chip-solid.chip-success {
    background-color: var(--success);
    color: white;
}

/* Solid success chip hover */
.chip-solid.chip-success:hover {
    background-color: var(--success);
    filter: brightness(0.9);
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

/* Solid warning chip */
.chip-solid.chip-warning {
    background-color: var(--warning);
    color: white;
}

/* Solid warning chip hover */
.chip-solid.chip-warning:hover {
    background-color: var(--warning);
    filter: brightness(0.9);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

/* Solid danger chip */
.chip-solid.chip-danger {
    background-color: var(--danger);
    color: white;
}

/* Solid danger chip hover */
.chip-solid.chip-danger:hover {
    background-color: var(--danger);
    filter: brightness(0.9);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* Solid info chip */
.chip-solid.chip-info {
    background-color: var(--info);
    color: white;
}

/* Solid info chip hover */
.chip-solid.chip-info:hover {
    background-color: var(--info);
    filter: brightness(0.9);
    box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3);
}

/* Solid default chip */
.chip-solid.chip-default {
    background-color: var(--text-secondary);
    color: white;
}

/* Solid default chip hover */
.chip-solid.chip-default:hover {
    background-color: var(--text-primary);
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.3);
}

/* ADDITIONAL SOLID COLOR CHIPS WITH CUSTOM COLORS */

/* Solid purple chip */
.chip-solid.chip-purple {
    background-color: #8b5cf6;
    color: white;
}

/* Solid purple chip hover */
.chip-solid.chip-purple:hover {
    background-color: #7c3aed;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);
}

/* Solid indigo chip */
.chip-solid.chip-indigo {
    background-color: #6366f1;
    color: white;
}

/* Solid indigo chip hover */
.chip-solid.chip-indigo:hover {
    background-color: #4f46e5;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

/* Solid teal chip */
.chip-solid.chip-teal {
    background-color: #14b8a6;
    color: white;
}

/* Solid teal chip hover */
.chip-solid.chip-teal:hover {
    background-color: #0d9488;
    box-shadow: 0 2px 4px rgba(20, 184, 166, 0.3);
}

/* Solid orange chip */
.chip-solid.chip-orange {
    background-color: #f97316;
    color: white;
}

/* Solid orange chip hover */
.chip-solid.chip-orange:hover {
    background-color: #ea580c;
    box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
}

/* Solid pink chip */
.chip-solid.chip-pink {
    background-color: #ec4899;
    color: white;
}

/* Solid pink chip hover */
.chip-solid.chip-pink:hover {
    background-color: #db2777;
    box-shadow: 0 2px 4px rgba(236, 72, 153, 0.3);
}

/* Solid dark chip */
.chip-solid.chip-dark {
    background-color: #111827;
    color: white;
}

/* Solid dark chip hover */
.chip-solid.chip-dark:hover {
    background-color: #1f2937;
    box-shadow: 0 2px 4px rgba(17, 24, 39, 0.3);
}

/* TWO-TONE CHIPS WITH SOLID BACKGROUND AND ACCENT BORDER */

/* Two-tone base style (left accent) */
.chip-two-tone {
    background-color: white;
    border-left: 4px solid;
    border-radius: 4px 16px 16px 4px;
    font-weight: 500;
    padding-left: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Two-tone primary chip */
.chip-two-tone.chip-primary {
    border-left-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Two-tone primary chip hover */
.chip-two-tone.chip-primary:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

/* Two-tone success chip */
.chip-two-tone.chip-success {
    border-left-color: var(--success);
    color: var(--success);
}

/* Two-tone success chip hover */
.chip-two-tone.chip-success:hover {
    background-color: rgba(16, 185, 129, 0.1);
}

/* Two-tone warning chip */
.chip-two-tone.chip-warning {
    border-left-color: var(--warning);
    color: var(--warning);
}

/* Two-tone warning chip hover */
.chip-two-tone.chip-warning:hover {
    background-color: rgba(245, 158, 11, 0.1);
}

/* Two-tone danger chip */
.chip-two-tone.chip-danger {
    border-left-color: var(--danger);
    color: var(--danger);
}

/* Two-tone danger chip hover */
.chip-two-tone.chip-danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

/* Two-tone info chip */
.chip-two-tone.chip-info {
    border-left-color: var(--info);
    color: var(--info);
}

/* Two-tone info chip hover */
.chip-two-tone.chip-info:hover {
    background-color: rgba(6, 182, 212, 0.1);
}

/* TWO-TONE RIGHT ACCENT CHIPS */

/* Two-tone base style (right accent) */
.chip-two-tone-right {
    background-color: white;
    border-right: 4px solid;
    border-radius: 16px 4px 4px 16px;
    font-weight: 500;
    padding-right: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Two-tone right primary chip */
.chip-two-tone-right.chip-primary {
    border-right-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Two-tone right primary chip hover */
.chip-two-tone-right.chip-primary:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

/* Two-tone right success chip */
.chip-two-tone-right.chip-success {
    border-right-color: var(--success);
    color: var(--success);
}

/* Two-tone right success chip hover */
.chip-two-tone-right.chip-success:hover {
    background-color: rgba(16, 185, 129, 0.1);
}

/* Two-tone right warning chip */
.chip-two-tone-right.chip-warning {
    border-right-color: var(--warning);
    color: var(--warning);
}

/* Two-tone right warning chip hover */
.chip-two-tone-right.chip-warning:hover {
    background-color: rgba(245, 158, 11, 0.1);
}

/* Two-tone right danger chip */
.chip-two-tone-right.chip-danger {
    border-right-color: var(--danger);
    color: var(--danger);
}

/* Two-tone right danger chip hover */
.chip-two-tone-right.chip-danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

/* Two-tone right info chip */
.chip-two-tone-right.chip-info {
    border-right-color: var(--info);
    color: var(--info);
}

/* Two-tone right info chip hover */
.chip-two-tone-right.chip-info:hover {
    background-color: rgba(6, 182, 212, 0.1);
}

/* PILL CHIPS - FULLY ROUNDED SOLID VARIANTS */

/* Pill chip base style */
.chip-pill {
    border-radius: 50px;
    padding: 5px 15px;
    font-weight: 500;
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Pill primary chip */
.chip-pill.chip-primary {
    background-color: var(--accent-primary);
}

/* Pill primary chip hover */
.chip-pill.chip-primary:hover {
    background-color: var(--accent-secondary);
    box-shadow: 0 3px 5px rgba(59, 130, 246, 0.3);
}

/* Pill success chip */
.chip-pill.chip-success {
    background-color: var(--success);
}

/* Pill success chip hover */
.chip-pill.chip-success:hover {
    background-color: var(--success);
    filter: brightness(0.9);
    box-shadow: 0 3px 5px rgba(16, 185, 129, 0.3);
}

/* Pill warning chip */
.chip-pill.chip-warning {
    background-color: var(--warning);
}

/* Pill warning chip hover */
.chip-pill.chip-warning:hover {
    background-color: var(--warning);
    filter: brightness(0.9);
    box-shadow: 0 3px 5px rgba(245, 158, 11, 0.3);
}

/* Pill danger chip */
.chip-pill.chip-danger {
    background-color: var(--danger);
}

/* Pill danger chip hover */
.chip-pill.chip-danger:hover {
    background-color: var(--danger);
    filter: brightness(0.9);
    box-shadow: 0 3px 5px rgba(239, 68, 68, 0.3);
}

/* Pill info chip */
.chip-pill.chip-info {
    background-color: var(--info);
}

/* Pill info chip hover */
.chip-pill.chip-info:hover {
    background-color: var(--info);
    filter: brightness(0.9);
    box-shadow: 0 3px 5px rgba(6, 182, 212, 0.3);
}

/* Dark theme adjustments */
.dark-theme .chip-two-tone,
.dark-theme .chip-two-tone-right {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.dark-theme .chip-featured {
    color: var(--on-accent-primary);
}

.dark-theme .chip-solid,
.dark-theme .chip-pill {
    box-shadow: var(--shadow-md);
}

/* Fix for two-tone chips in dark mode */
.dark-theme .chip-two-tone.chip-primary,
.dark-theme .chip-two-tone-right.chip-primary {
    color: var(--accent-primary);
}

.dark-theme .chip-two-tone.chip-success,
.dark-theme .chip-two-tone-right.chip-success {
    color: var(--success);
}

.dark-theme .chip-two-tone.chip-warning,
.dark-theme .chip-two-tone-right.chip-warning {
    color: var(--warning);
}

.dark-theme .chip-two-tone.chip-danger,
.dark-theme .chip-two-tone-right.chip-danger {
    color: var(--danger);
}

.dark-theme .chip-two-tone.chip-info,
.dark-theme .chip-two-tone-right.chip-info {
    color: var(--info);
}

/* ELEVATED CHIPS */
.chip-elevated {
    border: none;
    background-color: var(--bg-primary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.chip-elevated:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 3px rgba(0, 0, 0, 0.08);
}

.chip-elevated.chip-primary {
    border-top: 2px solid var(--accent-primary);
    color: var(--accent-primary);
}

.chip-elevated.chip-success {
    border-top: 2px solid var(--success);
    color: var(--success);
}

.chip-elevated.chip-warning {
    border-top: 2px solid var(--warning);
    color: var(--warning);
}

.chip-elevated.chip-danger {
    border-top: 2px solid var(--danger);
    color: var(--danger);
}

.chip-elevated.chip-info {
    border-top: 2px solid var(--info);
    color: var(--info);
}

/* GLOWING CHIPS */
.chip-glow {
    position: relative;
    overflow: visible;
    border: none;
}

.chip-glow::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 20px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.chip-glow:hover::after {
    opacity: 1;
}

.chip-glow.chip-primary {
    background-color: var(--accent-primary);
    color: white;
}

.chip-glow.chip-primary::after {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.chip-glow.chip-success {
    background-color: var(--success);
    color: white;
}

.chip-glow.chip-success::after {
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}

.chip-glow.chip-warning {
    background-color: var(--warning);
    color: white;
}

.chip-glow.chip-warning::after {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
}

.chip-glow.chip-danger {
    background-color: var(--danger);
    color: white;
}

.chip-glow.chip-danger::after {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}

.chip-glow.chip-info {
    background-color: var(--info);
    color: white;
}

.chip-glow.chip-info::after {
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
}

/* GLASS-MORPHISM CHIPS */
.chip-glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
}

.chip-glass:hover {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.chip-glass.chip-primary {
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--accent-primary);
}

.chip-glass.chip-success {
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--success);
}

.chip-glass.chip-warning {
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--warning);
}

.chip-glass.chip-danger {
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--danger);
}

.chip-glass.chip-info {
    border-color: rgba(6, 182, 212, 0.3);
    color: var(--info);
}

.dark-theme .chip-glass {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.dark-theme .chip-glass:hover {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* DOT INDICATOR CHIPS */
.chip-dot {
    position: relative;
    padding-left: 22px;
}

.chip-dot::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.chip-dot.chip-primary {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--accent-primary);
}

.chip-dot.chip-primary::before {
    background-color: var(--accent-primary);
}

.chip-dot.chip-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.chip-dot.chip-success::before {
    background-color: var(--success);
}

.chip-dot.chip-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.chip-dot.chip-warning::before {
    background-color: var(--warning);
}

.chip-dot.chip-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.chip-dot.chip-danger::before {
    background-color: var(--danger);
}

.chip-dot.chip-info {
    background-color: rgba(6, 182, 212, 0.1);
    color: var(--info);
}

.chip-dot.chip-info::before {
    background-color: var(--info);
}

/* BORDERED CHIPS */
.chip-bordered {
    background-color: transparent;
    border-width: 2px;
    border-style: solid;
    font-weight: 500;
}

.chip-bordered.chip-primary {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.chip-bordered.chip-primary:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

.chip-bordered.chip-success {
    border-color: var(--success);
    color: var(--success);
}

.chip-bordered.chip-success:hover {
    background-color: rgba(16, 185, 129, 0.1);
}

.chip-bordered.chip-warning {
    border-color: var(--warning);
    color: var(--warning);
}

.chip-bordered.chip-warning:hover {
    background-color: rgba(245, 158, 11, 0.1);
}

.chip-bordered.chip-danger {
    border-color: var(--danger);
    color: var(--danger);
}

.chip-bordered.chip-danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
}

.chip-bordered.chip-info {
    border-color: var(--info);
    color: var(--info);
}

.chip-bordered.chip-info:hover {
    background-color: rgba(6, 182, 212, 0.1);
}

/* DASHED CHIPS */
.chip-dashed {
    background-color: transparent;
    border-width: 1px;
    border-style: dashed;
    font-weight: 500;
}

.chip-dashed.chip-primary {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.chip-dashed.chip-primary:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

.chip-dashed.chip-success {
    border-color: var(--success);
    color: var(--success);
}

.chip-dashed.chip-success:hover {
    background-color: rgba(16, 185, 129, 0.05);
}

.chip-dashed.chip-warning {
    border-color: var(--warning);
    color: var(--warning);
}

.chip-dashed.chip-warning:hover {
    background-color: rgba(245, 158, 11, 0.05);
}

.chip-dashed.chip-danger {
    border-color: var(--danger);
    color: var(--danger);
}

.chip-dashed.chip-danger:hover {
    background-color: rgba(239, 68, 68, 0.05);
}

.chip-dashed.chip-info {
    border-color: var(--info);
    color: var(--info);
}

.chip-dashed.chip-info:hover {
    background-color: rgba(6, 182, 212, 0.05);
}

/* NOTCHED CHIPS */
.chip-notched {
    position: relative;
    border-radius: 8px;
    padding-left: 16px;
    padding-right: 16px;
    overflow: hidden;
}

.chip-notched::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
}

.chip-notched.chip-primary {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--accent-primary);
}

.chip-notched.chip-primary::before {
    background-color: var(--accent-primary);
}

.chip-notched.chip-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.chip-notched.chip-success::before {
    background-color: var(--success);
}

.chip-notched.chip-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.chip-notched.chip-warning::before {
    background-color: var(--warning);
}

.chip-notched.chip-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.chip-notched.chip-danger::before {
    background-color: var(--danger);
}

.chip-notched.chip-info {
    background-color: rgba(6, 182, 212, 0.1);
    color: var(--info);
}

.chip-notched.chip-info::before {
    background-color: var(--info);
}

/* STATUS INDICATOR CHIPS */
.chip-status {
    display: inline-flex;
    align-items: center;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    padding-left: 18px;
    position: relative;
}

.chip-status::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 8px;
}

.chip-status.chip-primary::before {
    background-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.chip-status.chip-success::before {
    background-color: var(--success);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.chip-status.chip-warning::before {
    background-color: var(--warning);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.chip-status.chip-danger::before {
    background-color: var(--danger);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

.chip-status.chip-info::before {
    background-color: var(--info);
    box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
}

/* STACKED CHIPS */
.chip-stacked {
    position: relative;
    background-color: var(--bg-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    z-index: 1;
}

.chip-stacked::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: -1;
}

.chip-stacked.chip-primary {
    color: var(--accent-primary);
}

.chip-stacked.chip-primary::before {
    background-color: rgba(59, 130, 246, 0.2);
}

.chip-stacked.chip-success {
    color: var(--success);
}

.chip-stacked.chip-success::before {
    background-color: rgba(16, 185, 129, 0.2);
}

.chip-stacked.chip-warning {
    color: var(--warning);
}

.chip-stacked.chip-warning::before {
    background-color: rgba(245, 158, 11, 0.2);
}

.chip-stacked.chip-danger {
    color: var(--danger);
}

.chip-stacked.chip-danger::before {
    background-color: rgba(239, 68, 68, 0.2);
}

.chip-stacked.chip-info {
    color: var(--info);
}

.chip-stacked.chip-info::before {
    background-color: rgba(6, 182, 212, 0.2);
}

/* PULSING CHIPS */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.7);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(var(--pulse-color), 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0);
    }
}

.chip-pulse {
    position: relative;
    overflow: visible;
}

.chip-pulse::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    animation: pulse 2s infinite;
}

.chip-pulse.chip-primary {
    --pulse-color: 59, 130, 246;
    padding-left: 22px;
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--accent-primary);
}

.chip-pulse.chip-primary::before {
    background-color: var(--accent-primary);
}

.chip-pulse.chip-success {
    --pulse-color: 16, 185, 129;
    padding-left: 22px;
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.chip-pulse.chip-success::before {
    background-color: var(--success);
}

.chip-pulse.chip-warning {
    --pulse-color: 245, 158, 11;
    padding-left: 22px;
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.chip-pulse.chip-warning::before {
    background-color: var(--warning);
}

.chip-pulse.chip-danger {
    --pulse-color: 239, 68, 68;
    padding-left: 22px;
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.chip-pulse.chip-danger::before {
    background-color: var(--danger);
}

.chip-pulse.chip-info {
    --pulse-color: 6, 182, 212;
    padding-left: 22px;
    background-color: rgba(6, 182, 212, 0.1);
    color: var(--info);
}

.chip-pulse.chip-info::before {
    background-color: var(--info);
}

/* Example HTML Usage:

<!-- Elevated Chips -->
<span class="chip chip-elevated chip-primary">Elevated Primary</span>
<span class="chip chip-elevated chip-success">Elevated Success</span>

<!-- Glowing Chips -->
<span class="chip chip-glow chip-primary">Glowing Primary</span>
<span class="chip chip-glow chip-danger">Glowing Danger</span>

<!-- Glass-Morphism Chips -->
<span class="chip chip-glass chip-primary">Glass Primary</span>
<span class="chip chip-glass chip-info">Glass Info</span>

<!-- Dot Indicator Chips -->
<span class="chip chip-dot chip-primary">Active</span>
<span class="chip chip-dot chip-success">Completed</span>
<span class="chip chip-dot chip-warning">Pending</span>
<span class="chip chip-dot chip-danger">Failed</span>

<!-- Bordered Chips -->
<span class="chip chip-bordered chip-primary">Bordered Primary</span>
<span class="chip chip-bordered chip-danger">Bordered Danger</span>

<!-- Dashed Chips -->
<span class="chip chip-dashed chip-primary">Dashed Primary</span>
<span class="chip chip-dashed chip-warning">Dashed Warning</span>

<!-- Notched Chips -->
<span class="chip chip-notched chip-primary">Notched Primary</span>
<span class="chip chip-notched chip-info">Notched Info</span>

<!-- Status Indicator Chips -->
<span class="chip chip-status chip-success">Online</span>
<span class="chip chip-status chip-warning">Away</span>
<span class="chip chip-status chip-danger">Offline</span>

<!-- Stacked Chips -->
<span class="chip chip-stacked chip-primary">Stacked Primary</span>
<span class="chip chip-stacked chip-info">Stacked Info</span>

<!-- Pulsing Chips -->
<span class="chip chip-pulse chip-primary">Live Now</span>
<span class="chip chip-pulse chip-danger">Alert</span>



<!-- Default color chips -->
<span class="chip chip-default">Default</span>
<span class="chip chip-primary">Primary</span>
<span class="chip chip-success">Success</span>
<span class="chip chip-warning">Warning</span>
<span class="chip chip-danger">Danger</span>
<span class="chip chip-info">Info</span>

<!-- Outline style chips -->
<span class="chip chip-outline chip-default">Default</span>
<span class="chip chip-outline chip-primary">Primary</span>
<span class="chip chip-outline chip-success">Success</span>

<!-- Soft background chips -->
<span class="chip chip-soft chip-primary">Primary</span>
<span class="chip chip-soft chip-success">Success</span>
<!-- Chips with icons -->
<span class="chip chip-primary">
<i class="fas fa-tag"></i> Tag
</span>

<span class="chip chip-success">
<i class="fas fa-check"></i> Completed
</span>

<span class="chip chip-outline chip-danger">
<i class="fas fa-exclamation-circle"></i> Error
</span>

<!-- Small chips -->
<span class="chip chip-sm chip-primary">Small</span>

<!-- Large chips -->
<span class="chip chip-lg chip-primary">Large</span>
<!-- Clickable chips -->
<span class="chip chip-primary chip-clickable">Click me</span>

<!-- Dismissible chips -->
<span class="chip chip-danger chip-dismissible">
                                               Remove me
<button class="chip-dismiss">×</button>
</span>

<!-- Standard Featured Chip -->
<span class="chip chip-featured">
  <i class="fas fa-star"></i>Featured
</span>

<!-- Premium Featured Chip -->
<span class="chip chip-featured chip-premium">
  <i class="fas fa-crown"></i>Premium
</span>

<!-- New Featured Chip -->
<span class="chip chip-featured chip-new">
  <i class="fas fa-bolt"></i>New
</span>

<!-- Special Featured Chip -->
<span class="chip chip-featured chip-special">
  <i class="fas fa-gift"></i>Special
</span>

<!-- Small Featured Chip -->
<span class="chip chip-featured chip-sm">
  <i class="fas fa-star"></i>Featured
</span>

<!-- NEW SOLID COLOR CHIPS EXAMPLES -->

<!-- Solid color chips -->
<span class="chip chip-solid chip-primary">Primary</span>
<span class="chip chip-solid chip-success">Success</span>
<span class="chip chip-solid chip-warning">Warning</span>
<span class="chip chip-solid chip-danger">Danger</span>
<span class="chip chip-solid chip-info">Info</span>
<span class="chip chip-solid chip-default">Default</span>

<!-- Additional solid color chips with custom colors -->
<span class="chip chip-solid chip-purple">Purple</span>
<span class="chip chip-solid chip-indigo">Indigo</span>
<span class="chip chip-solid chip-teal">Teal</span>
<span class="chip chip-solid chip-orange">Orange</span>
<span class="chip chip-solid chip-pink">Pink</span>
<span class="chip chip-solid chip">Dark</span>

<!-- Two-tone chips (left accent) -->
<span class="chip chip-two-tone chip-primary">Primary</span>
<span class="chip chip-two-tone chip-success">Success</span>
<span class="chip chip-two-tone chip-warning">Warning</span>
<span class="chip chip-two-tone chip-danger">Danger</span>
<span class="chip chip-two-tone chip-info">Info</span>

<!-- Two-tone chips (right accent) -->
<span class="chip chip-two-tone-right chip-primary">Primary</span>
<span class="chip chip-two-tone-right chip-success">Success</span>
<span class="chip chip-two-tone-right chip-warning">Warning</span>
<span class="chip chip-two-tone-right chip-danger">Danger</span>
<span class="chip chip-two-tone-right chip-info">Info</span>

<!-- Pill chips -->
<span class="chip chip-pill chip-primary">Primary</span>
<span class="chip chip-pill chip-success">Success</span>
<span class="chip chip-pill chip-warning">Warning</span>
<span class="chip chip-pill chip-danger">Danger</span>
<span class="chip chip-pill chip-info">Info</span>

<!-- Solid chips with icons -->
<span class="chip chip-solid chip-primary">
  <i class="fas fa-tag"></i> Tag
</span>

<span class="chip chip-solid chip-success">
  <i class="fas fa-check"></i> Completed
</span>

<span class="chip chip-solid chip-danger">
  <i class="fas fa-exclamation-circle"></i> Error
</span>

<!-- Pill chips with icons -->
<span class="chip chip-pill chip-primary">
  <i class="fas fa-user"></i> User
</span>

<span class="chip chip-pill chip-success">
  <i class="fas fa-shield-alt"></i> Secure
</span>

<!-- Two-tone chips with icons (left accent) -->
<span class="chip chip-two-tone chip-primary">
  <i class="fas fa-bookmark"></i> Bookmark
</span>

<span class="chip chip-two-tone chip-warning">
  <i class="fas fa-bell"></i> Alert
</span>

<!-- Two-tone chips with icons (right accent) -->
<span class="chip chip-two-tone-right chip-primary">
  <i class="fas fa-bookmark"></i> Bookmark
</span>

<span class="chip chip-two-tone-right chip-warning">
  <i class="fas fa-bell"></i> Alert
</span>

*/