/* =============================================================================
   UNIFIED CSS FILE
   Contains all styling components from Index.css, Scan_page.css, and health_profile.css
   ============================================================================= */

/* =============================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================================================= */
   :root {
    /* Base Theme Colors */
    --color-bg-primary: #f4f3ed; /* Anthropic Light Theme Primary Background */
    --color-bg-secondary: #ecebe3; /* Anthropic Light Theme Secondary Background */
    --color-accent-orange: #bb5a38; /* Anthropic Light Theme Primary Color (Orange/Brown) */
    --color-text-primary: #3d3a2a; /* Anthropic Light Theme Text Color (Dark Brown/Grey) */
    --color-text-secondary: #5a574a; /* Slightly lighter text for secondary emphasis */
    --color-link: #3d3a2a; /* Anthropic Light Theme Link Color */
    --color-border: #d3d2ca; /* Anthropic Light Theme Border Color */
    --color-code-bg: #ecebe4; /* Anthropic Light Theme Code Background Color */
    --color-sidebar-bg: #e8e7dd; /* Anthropic Light Theme Sidebar Background Color */

    /* Notification Colors */
    --color-success-bg: #d4edda; /* Light green */
    --color-success-text: #155724; /* Dark green */
    --color-error-bg: #f8d7da; /* Light red */
    --color-error-text: #721c24; /* Dark red */
    --color-info-bg: #d1ecf1; /* Light blue */
    --color-info-text: #0c5460; /* Dark blue */
}

/* =============================================================================
   BASE STYLES
   ============================================================================= */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Override body background for scan page */
body.scan-page {
    background-color: var(--color-bg-secondary);
}

/* =============================================================================
   MOBILE MENU TRANSITIONS
   ============================================================================= */
.mobile-menu-enter {
    transform: translateX(100%);
}

.mobile-menu-enter-active {
    transform: translateX(0);
    transition: transform 0.3s ease-out;
}

.mobile-menu-exit {
    transform: translateX(0);
}

.mobile-menu-exit-active {
    transform: translateX(100%);
    transition: transform 0.3s ease-in;
}

/* =============================================================================
   HERO SECTION BACKGROUND
   ============================================================================= */
.hero-background {
    /* Light, subtle gradient for a welcoming feel */
    background: radial-gradient(circle at 75% 25%, #fdfcf9 0%, #f7f6f0 40%, #f4f3ed 80%, #eeebe5 100%);
    background-size: 200% 200%; /* Allows for more noticeable animation of gradient */
    position: relative;
    overflow: hidden;
    animation: hero-gradient-shift 20s ease-in-out infinite alternate; /* Slower animation */
}

@keyframes hero-gradient-shift {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle abstract geometric pattern overlay for depth - using lighter placeholder */
    background: url('https://placehold.co/1200x800/e8e7dd/e8e7dd?text=Geometric+Pattern') no-repeat center center;
    background-size: cover;
    opacity: 0.15; /* Slightly more visible for light texture */
    mix-blend-mode: soft-light; /* Soft blend mode for subtle texture */
    pointer-events: none; /* Ensure it doesn't block interactions */
}

/* =============================================================================
   BUILDER SECTION STYLES
   ============================================================================= */
.builder-section {
    background-color: #2563EB; /* A strong blue from the image */
    color: white;
}

.builder-button {
    background-color: white;
    color: black;
    border-radius: 9999px; /* Pill shape */
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

.builder-button.dark {
    background-color: black;
    color: white;
}

.builder-button.outline {
    background-color: transparent;
    border: 2px solid white;
    color: white;
}

.builder-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* =============================================================================
   IMAGE FRAME AND PREVIEW STYLES
   ============================================================================= */
   #imageFrame {
    position: relative;
    width: 100%;
    max-width: 420px; /* Increased width */
    height: 320px;     /* Increased height */
    border: 2px solid var(--color-accent-orange); /* Use your primary color */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #fff; /* Optional: fallback bg */
}

#imagePreview {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills frame without distortion */
    object-position: center;
    display: block;
}

#closeImageBtn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    color: var(--color-text-primary);
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#closeImageBtn:hover {
    background-color: var(--color-accent-orange);
    color: white;
    border-color: var(--color-accent-orange);
}

/* =============================================================================
   LOADING INDICATORS
   ============================================================================= */
.loader {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid var(--color-accent-orange); /* Orange */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loadingText {
    transition: opacity 0.4s ease-in-out;
}

/* =============================================================================
   BUTTON STYLES
   ============================================================================= */
.suggestion-button {
    padding: 0.5rem 1rem;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.suggestion-button:hover {
    background-color: var(--color-border);
    border-color: var(--color-accent-orange);
}

/* =============================================================================
   FORM STYLES
   ============================================================================= */
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.form-label.required::after {
    content: ' *';
    color: var(--color-accent-orange);
    font-weight: bold;
}

.form-input, 
.form-textarea, 
.form-select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.form-input:focus, 
.form-textarea:focus, 
.form-select:focus {
    border-color: var(--color-accent-orange);
    box-shadow: 0 0 0 2px rgba(187, 90, 56, 0.2);
}

/* =============================================================================
   MULTI-SELECT TAG INPUT STYLES
   ============================================================================= */
.multi-select-tag-container {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background-color: var(--color-bg-secondary);
    padding: 0.5rem;
    cursor: text;
    min-height: 48px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.multi-select-tag-container:focus-within {
    border-color: var(--color-accent-orange);
    box-shadow: 0 0 0 2px rgba(187, 90, 56, 0.2);
}

.selected-tag {
    background-color: var(--color-accent-orange);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.tag-remove {
    margin-left: 0.5rem;
    background: none;
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.tag-remove:hover {
    opacity: 1;
}

.multi-select-input {
    flex-grow: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 0.25rem 0.5rem;
    color: var(--color-text-primary);
    min-width: 100px; /* Ensure visibility */
}

/* =============================================================================
   SUGGESTIONS DROPDOWN
   ============================================================================= */
.suggestions-dropdown {
    position: absolute;
    top: 100%; /* Position below the container */
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 0.25rem;
    display: none; /* Hidden by default */
}

.suggestions-dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.suggestions-dropdown li {
    padding: 0.75rem 1rem;
    cursor: pointer;
    color: var(--color-text-primary);
}

.suggestions-dropdown li:hover,
.suggestions-dropdown li.active-suggestion { /* Class for keyboard navigation */
    background-color: var(--color-bg-secondary);
    color: var(--color-accent-orange);
}

/* =============================================================================
   MARKDOWN CONTENT STYLES
   ============================================================================= */
#rawAgentResponseContent h1, 
#rawAgentResponseContent h2, 
#rawAgentResponseContent h3, 
#rawAgentResponseContent h4, 
#rawAgentResponseContent h5, 
#rawAgentResponseContent h6 {
    color: var(--color-accent-orange);
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
}

#rawAgentResponseContent h1 { font-size: 2em; }
#rawAgentResponseContent h2 { font-size: 1.75em; }
#rawAgentResponseContent h3 { font-size: 1.5em; }

#rawAgentResponseContent p {
    margin-bottom: 1em;
    line-height: 1.6;
}

#rawAgentResponseContent ul {
    list-style: disc;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

#rawAgentResponseContent ol {
    list-style: decimal;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

#rawAgentResponseContent li {
    margin-bottom: 0.5em;
}

#rawAgentResponseContent strong {
    font-weight: 700;
}

#rawAgentResponseContent em {
    font-style: italic;
}

#rawAgentResponseContent hr {
    border-color: var(--color-border);
    margin: 2em 0;
}

#rawAgentResponseContent {
    word-wrap: break-word;
    overflow-x: hidden; /* disable side scroll */
}

#rawAgentResponseContent pre,
#rawAgentResponseContent code {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
    overflow-x: auto;
}

/* =============================================================================
   NOTIFICATION STYLES
   ============================================================================= */
   #customNotification {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(-100%); /* Start off-screen above for slide-down */
    z-index: 1000;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-weight: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 90%;
    text-align: left;
}

/* Ensure the message content itself stays on one line and truncates */
#customNotification #notificationMessage {
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflow content */
    text-overflow: ellipsis; /* Display ellipsis for truncated text */
}

#customNotification.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* Slide down effect */
}

/* Specific notification types */
#customNotification.success {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green */
    border: 1px solid #28a745; /* Darker success border */
}
#customNotification.error {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red */
    border: 1px solid #dc3545; /* Darker error border */
}
#customNotification.info {
    background-color: #d1ecf1; /* Light blue */
    color: #0c5460; /* Dark blue */
    border: 1px solid #17a2b8; /* Darker info border */
}



    /* Custom focus ring style for accessibility */
.focus-ring {
        transition: box-shadow 0.2s ease-in-out;
}
.focus-ring:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(187, 90, 56, 0.4);
}


.modal-overlay {
    transition: opacity 0.3s ease;
}
.modal-content {
        transition: transform 0.3s ease;
}
    
    /* Card transition */
.product-card, .add-slot {
        transition: all 0.3s ease-in-out;
}

  
.comparison-slot {
    width: 320px;
    height: 240px;
    flex-shrink: 0; /* Prevent slots from shrinking */
}
    

.prose h1, .prose h2, .prose h3 {
        color: var(--color-accent-orange);
        font-weight: 600;
        margin-top: 1.5em;
        margin-bottom: 0.75em;
}
.prose p {
        margin-bottom: 1em;
        line-height: 1.6;
}
.prose ul, .prose ol {
        margin-left: 1.5em;
        margin-bottom: 1em;
}
.prose li {
        margin-bottom: 0.5em;
}
    



/* =============================================================================
   ANIMATION KEYFRAMES AND UTILITIES
   ============================================================================= */
@keyframes slideFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
}
    to {
        opacity: 1;
        transform: translateY(0);
}
}

.animate-slide-fade {
    animation: slideFadeIn 0.4s ease-out forwards;
}