/* === FLAVOR SYSTEM CORE STYLES === */

/* Visionary Style System Variables */
:root {
    --color-primary-base: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-primary-focus-ring: rgba(59, 130, 246, 0.15);
    --color-primary-bg-tint: #e7f3ff;
    --color-accent-danger: #ef4444;
    --color-accent-danger-hover: #d91c1c;
    --color-text-primary: #1d1d1f;
    --color-text-secondary: #525866;
    --color-text-inverse: #ffffff;
    --color-text-subtle: #909ab0;
    --color-bg-body: #f0f2f5;
    --color-bg-canvas: #ffffff;
    --color-bg-subtle: #f8f9fa;
    --color-bg-muted: #f0f3f7;
    --color-border-subtle: #e1e5e9;
    --color-border-base: #dfe3e9;
    --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Inter", sans-serif;
    --font-size-xs: 0.75rem; --font-size-sm: 0.8125rem; --font-size-base: 0.9375rem; --font-size-md: 1rem; --font-size-lg: 1.125rem;
    --font-weight-medium: 500; --font-weight-semibold: 600;
    --line-height-base: 1.6;
    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-full: 50%;
    --border-width-base: 1px;
    --shadow-sm: 0 4px 12px rgba(30, 40, 60, 0.06); --shadow-md: 0 8px 25px rgba(30, 40, 60, 0.1); --shadow-lg: 0 15px 35px rgba(30, 40, 60, 0.12);
    --shadow-focus-ring: 0 0 0 4px var(--color-primary-focus-ring);
    --transition-snap: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-springy: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    --z-card: 10; --z-dragging: 1000; --z-modal-backdrop: 2000; --z-modal-content: 2001; --z-popover: 3000; --z-context-menu: 4000; --z-confirm-modal: 5000;
}

/* === FLAVOR PIP STYLES === */
.flavor-pip { 
    width: 18px; 
    height: 18px; 
    border-radius: var(--radius-full); 
    border: 2px solid rgba(255, 255, 255, 0.4); 
    box-shadow: 0 1px 4px rgba(0,0,0,0.25); 
    transition: transform 0.2s ease; 
    cursor: pointer; 
}

.flavor-pip:not(:first-child) { 
    margin-left: -8px; 
}

.card-flavor-pips { 
    position: absolute; 
    bottom: 1.2rem; 
    right: 1.2rem; 
    display: flex; 
}

.card-flavor-pips:hover .flavor-pip { 
    transform: translateX(-4px); 
}

.card-flavor-pips .flavor-pip:hover { 
    transform: scale(1.25) translateX(0px) !important; 
    z-index: calc(var(--z-card) + 50) !important; 
    position: relative; 
}

/* === FLAVOR PALETTE STYLES === */
.flavor-palette-grid { 
    display: flex; 
    gap: 8px; 
    margin-top: 0; 
    justify-content: center; 
}

.flavor-swatch { 
    width: 45px; 
    height: 45px; 
    border-radius: 8px; 
    border: 1px solid #e0e0e0; 
    cursor: pointer; 
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; 
    position: relative; 
    box-sizing: border-box; 
}

.flavor-swatch:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); 
}

.flavor-swatch-color { 
    width: 100%; 
    height: 100%; 
    border-radius: 7px; 
    border: none; 
}

.flavor-swatch.selected { 
    border-color: var(--color-primary-base); 
    background-color: var(--color-primary-bg-tint); 
}

.flavor-swatch .selected-icon { 
    margin-left: auto; 
    color: var(--color-primary-base); 
    opacity: 0; 
    transition: opacity 0.2s ease; 
}

.flavor-swatch.selected .selected-icon { 
    opacity: 1; 
}

/* === FLAVOR PALETTE MINI STYLES === */
.flavor-palette-mini {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.flavor-pip-mini {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.flavor-pip-mini:hover {
    transform: scale(1.1);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.flavor-pip-mini.selected {
    border-color: rgba(255, 255, 255, 0.9);
    border-width: 3px;
    transform: scale(1.02);
    position: relative;
}

.flavor-pip-mini.selected::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: var(--radius-full);
    background: inherit;
    opacity: 0.6;
    z-index: -1;
}

.flavor-pip-mini.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 2;
}

/* Special handling for yellow flavors - no outer ring needed */
.flavor-pip-mini.selected[style*="rgb(255, 255, 0)"],
.flavor-pip-mini.selected[style*="#ffff00"],
.flavor-pip-mini.selected[style*="#FFFF00"],
.flavor-pip-mini.selected[style*="yellow"] {
    border-color: rgba(255, 255, 255, 0.9);
}

.flavor-pip-mini.selected[style*="rgb(255, 255, 0)"]::before,
.flavor-pip-mini.selected[style*="#ffff00"]::before,
.flavor-pip-mini.selected[style*="#FFFF00"]::before,
.flavor-pip-mini.selected[style*="yellow"]::before {
    display: none;
}

/* === FLAVOR MANAGER MODAL STYLES === */
#flavor-manager-modal-backdrop { 
    background-color: transparent; 
    backdrop-filter: none; 
    -webkit-backdrop-filter: none; 
    z-index: calc(var(--z-modal-backdrop) + 100); 
    pointer-events: none; 
}

#flavor-manager-modal-backdrop .modal-content { 
    max-width: 800px; 
    background: rgba(255, 255, 255, 0.25); 
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px); 
    border: 1px solid rgba(255, 255, 255, 0.3); 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); 
    pointer-events: auto; 
    position: absolute; 
    cursor: move; 
    max-height: 60vh;
    overflow-y: auto;
}

#flavor-manager-modal-backdrop .modal-content.dragging { 
    cursor: grabbing; 
    user-select: none; 
}

#flavor-manager-modal-backdrop .flavor-palette-grid { 
    cursor: default; 
    flex-wrap: nowrap;
}

#flavor-manager-modal-backdrop .modal-header { 
    border-bottom: none; 
    padding: var(--space-1) var(--space-3); 
}

#flavor-manager-modal-backdrop .modal-body { 
    padding: var(--space-1) var(--space-3) var(--space-3);
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
    overflow: visible;
}

/* === FLAVOR SYSTEM BUTTONS === */
.btn { 
    font-family: inherit; 
    border: none; 
    border-radius: var(--radius-md); 
    padding: var(--space-3) var(--space-5); 
    font-size: var(--font-size-base); 
    font-weight: var(--font-weight-medium); 
    cursor: pointer; 
    transition: all var(--transition-snap); 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: var(--space-2); 
}

.btn:active { 
    transform: translateY(1px) scale(0.98); 
}

.btn-primary { 
    background-color: #007aff; 
    color: white; 
}

.btn-primary:hover { 
    background-color: #005ecb; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.1); 
}

.btn-secondary { 
    background-color: var(--color-bg-muted); 
    color: var(--color-text-primary); 
}

.btn-secondary:hover { 
    background-color: #e6e9ef; 
}

.btn-danger { 
    background-color: var(--color-accent-danger); 
    color: white; 
}

.btn-danger:hover { 
    background-color: var(--color-accent-danger-hover); 
}