/* GuardianBadge.css - Allergy Guardian visual identity */

/* =================== BASE =================== */

.guardian-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    vertical-align: middle;
    line-height: 1;
}

.guardian-badge svg {
    flex-shrink: 0;
}

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

.guardian-badge-sm svg {
    width: 14px;
    height: 14px;
}

.guardian-badge-md svg {
    width: 18px;
    height: 18px;
}

.guardian-badge-lg svg {
    width: 24px;
    height: 24px;
}

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

.guardian-badge-active {
    color: var(--color-guardian);
}

.guardian-badge-neutral {
    color: var(--color-neutral-400);
}

/* =================== LABEL =================== */

.guardian-badge-label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-guardian-text);
    letter-spacing: 0.02em;
}

.guardian-badge-neutral .guardian-badge-label {
    color: var(--color-neutral-500);
}

/* =================== SECTION WRAPPER =================== */

.guardian-section {
    border: 1px solid var(--color-guardian-border);
    border-radius: var(--border-radius-md);
    background: var(--color-guardian-light);
    padding: var(--space-3);
}

.guardian-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.guardian-section-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-guardian-text);
    margin: 0;
}

.guardian-section-header .guardian-badge {
    color: var(--color-guardian);
}

.guardian-section-message {
    font-size: var(--text-sm);
    color: var(--color-neutral-600);
    margin: 0 0 var(--space-3) 0;
    line-height: var(--line-height-relaxed);
}

.guardian-section-content {
    /* Content (checkbox grid, select, etc.) inherits layout from its own component */
}

/* =================== INLINE (booking cards, queue entries) =================== */

.guardian-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.guardian-inline .allergen-icon {
    width: 16px;
    height: 16px;
}

.guardian-inline .allergen-abbr {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-600);
    background: var(--color-neutral-100);
    border-radius: var(--border-radius-sm);
    padding: 1px 4px;
}

/* =================== CHECKBOX GRID INSIDE GUARDIAN =================== */

.guardian-section .pref-grid-item {
    background: #f5fefb;
    border-color: #ccf0e8;
    color: var(--color-guardian-text);
}

.guardian-section .checkbox-custom::after {
    display: block;
    visibility: hidden;
}

.guardian-section .checkbox-input:checked + .checkbox-custom::after {
    visibility: visible;
}

.guardian-section .pref-grid-item:hover {
    border-color: var(--color-guardian-border);
}

.guardian-section .pref-grid-item-checked {
    background: #ccf7ed;
    border-color: var(--color-guardian);
}

.guardian-section .pref-grid-item-checked:hover {
    border-color: var(--color-guardian-hover);
}