/* Card Type Icons and Colors Styles */
/* This file provides utility classes for card types based on the constants in ConstantsTown.cs */

:root {
    /* Card Type Colors from ConstantsTown.cs */
    --card-type-alert: #FF0000;
    --card-type-premium: #FF5722;
    --card-type-event: #2196F3;
    --card-type-standard: #9C27B0;
    --card-type-medical: #F44336;
    --card-type-education: #FFC107;
    --card-type-automotive: #607D8B;
    --card-type-restaurant: #795548;
    --card-type-textile: #3F51B5;
    --card-type-beauty: #E91E63;
    --card-type-electronics: #00BCD4;
    --card-type-venue: #8BC34A;
    --card-type-retail: #FF9800;
    --card-type-fuel: #FFEB3B;
    --card-type-financial: #673AB7;
    --card-type-services: #009688;
    --card-type-jewelry: #FFD700;
    --card-type-general: #4CAF50;
}

/* Base card type icon styling */
.card-type-icon {
    font-size: 1.5rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-type-icon:hover {
    transform: scale(1.1);
}

.card-type-icon.small {
    font-size: 1rem;
}

.card-type-icon.medium {
    font-size: 1.5rem;
}

.card-type-icon.large {
    font-size: 2rem;
}

.card-type-icon.extra-large {
    font-size: 2.5rem;
}

/* Color utility classes for card types */
.card-type-alert {
    color: var(--card-type-alert);
}

.card-type-premium {
    color: var(--card-type-premium);
}

.card-type-event {
    color: var(--card-type-event);
}

.card-type-standard {
    color: var(--card-type-standard);
}

.card-type-medical {
    color: var(--card-type-medical);
}

.card-type-education {
    color: var(--card-type-education);
}

.card-type-automotive {
    color: var(--card-type-automotive);
}

.card-type-restaurant {
    color: var(--card-type-restaurant);
}

.card-type-textile {
    color: var(--card-type-textile);
}

.card-type-beauty {
    color: var(--card-type-beauty);
}

.card-type-electronics {
    color: var(--card-type-electronics);
}

.card-type-venue {
    color: var(--card-type-venue);
}

.card-type-retail {
    color: var(--card-type-retail);
}

.card-type-fuel {
    color: var(--card-type-fuel);
}

.card-type-financial {
    color: var(--card-type-financial);
}

.card-type-services {
    color: var(--card-type-services);
}

.card-type-jewelry {
    color: var(--card-type-jewelry);
}

.card-type-general {
    color: var(--card-type-general);
}

/* Background color variants */
.card-type-bg-alert {
    background-color: var(--card-type-alert);
    color: white;
}

.card-type-bg-premium {
    background-color: var(--card-type-premium);
    color: white;
}

.card-type-bg-event {
    background-color: var(--card-type-event);
    color: white;
}

.card-type-bg-standard {
    background-color: var(--card-type-standard);
    color: white;
}

.card-type-bg-medical {
    background-color: var(--card-type-medical);
    color: white;
}

.card-type-bg-education {
    background-color: var(--card-type-education);
    color: black;
}

.card-type-bg-automotive {
    background-color: var(--card-type-automotive);
    color: white;
}

.card-type-bg-restaurant {
    background-color: var(--card-type-restaurant);
    color: white;
}

.card-type-bg-textile {
    background-color: var(--card-type-textile);
    color: white;
}

.card-type-bg-beauty {
    background-color: var(--card-type-beauty);
    color: white;
}

.card-type-bg-electronics {
    background-color: var(--card-type-electronics);
    color: white;
}

.card-type-bg-venue {
    background-color: var(--card-type-venue);
    color: black;
}

.card-type-bg-retail {
    background-color: var(--card-type-retail);
    color: black;
}

.card-type-bg-fuel {
    background-color: var(--card-type-fuel);
    color: black;
}

.card-type-bg-financial {
    background-color: var(--card-type-financial);
    color: white;
}

.card-type-bg-services {
    background-color: var(--card-type-services);
    color: white;
}

.card-type-bg-jewelry {
    background-color: var(--card-type-jewelry);
    color: black;
}

.card-type-bg-general {
    background-color: var(--card-type-general);
    color: white;
}

/* Card type badges */
.card-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid currentColor;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

.card-type-badge:hover {
    opacity: 1;
}

.card-type-badge .icon {
    font-size: 0.875rem;
}

/* Card type containers with subtle backgrounds */
.card-type-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.card-type-container:hover {
    background-color: rgba(var(--accent-fill-rest-rgb), 0.05);
    border-color: var(--accent-stroke-control-default);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-type-icon {
        font-size: 1.25rem;
    }
    
    .card-type-icon.large {
        font-size: 1.75rem;
    }
    
    .card-type-icon.extra-large {
        font-size: 2rem;
    }
    
    .card-type-container {
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    .card-type-icon {
        font-size: 1rem;
    }
    
    .card-type-badge {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .card-type-container:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }
    
    .card-type-badge {
        opacity: 0.8;
    }
    
    .card-type-badge:hover {
        opacity: 1;
    }
}

.card-type-icon, .cardtype-page-icon {
    font-size: 1.2rem;
}
/*.card-type-badge {
    font-size: 0.95em;
    margin-right: 4px;
}
*/
/*.card-type-color-swatch, .cardtype-color-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: var(--mud-palette-text-secondary);
    vertical-align: middle;
    margin-right: 4px;
}*/