/* General Styles */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;900&display=swap');

:root {
    /* New Black and Gold Theme (Applied to both Light and Dark Modes) */
    
    /* Light Mode Colors (Now the primary light theme) */
    --background-light: #F8F8F8; /* Very light gray, almost white */
    --surface-light: #FFFFFF;    /* Pure white for cards */
    --text-primary-light: #333333; /* Dark gray for primary text */
    --text-secondary-light: #666666; /* Medium gray for secondary text */
    --accent-light: #FFD700;      /* Gold (remains the same) */
    --border-light: #D1D5DB;      /* Lighter gray border */
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Dark Mode Colors (A slightly deeper dark theme) */
    --background-dark: #000000;   /* Pure black */
    --surface-dark: #121212;     /* Near black surface */
    --text-primary-dark: #FFFFFF;  /* Pure white for text */
    --text-secondary-dark: #FFFFFF; /* Changed to pure white */
    --accent-dark: #FFD700;       /* Dark Gold */
    --border-dark: #5A6678;       /* Lighter gray border for contrast */
    --shadow-dark: 0 8px 30px rgba(0, 0, 0, 0.6);

    /* Specific UI Colors */
    --success-color: #2ecc71; /* Green for low asymmetry */
    --warning-color: #f1c40f; /* Yellow for moderate asymmetry */
    --danger-color: #e74c3c;  /* Red for high asymmetry */
}

body {
    font-family: 'Vazirmatn', sans-serif;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
    direction: rtl;
    text-align: right;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: var(--text-primary-light); /* Ensure body text uses primary light */
    background-color: var(--background-light);
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zm12 12V8h-2v4h-4v2h4v4h2v-4h4v-2h-4zM0 12V8h-2v4H-4v2h4v4h2v-4h4v-2h-4zM36 48v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm12 12v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM0 48v-4h-2v4H-4v2h4v4h2v-4h4v-2h-4zM24 0v-4h-2v4h-4v2h4v4h2V6h4V4h-4zm0 12v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0 24v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0 12v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm24-24v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM12 0v-4h-2v4H6v2h4v4h2V6h4V4h-4zm0 12v-4h-2v4H6v2h4v4h2v-4h4v-2h-4zm0 24v-4h-2v4H6v2h4v4h2v-4h4v-2h-4zm0 12v-4h-2v4H6v2h4v4h2v-4h4v-2h-4zm24-24v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM48 0v-4h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* Subtle geometric pattern */
    background-attachment: fixed;
    background-size: 60px 60px;
}

/* Updated to use html[data-theme] attribute */
html[data-theme="light-gold"] body {
    background-color: var(--background-light);
    color: var(--text-primary-light);
}

html[data-theme="dark-gold"] body {
    background-color: var(--background-dark);
    color: var(--text-primary-dark);
}
html[data-theme="dark-gold"] body {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235A6678' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zm12 12V8h-2v4h-4v2h4v4h2v-4h4v-2h-4zM0 12V8h-2v4H-4v2h4v4h2v-4h4v-2h-4zM36 48v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm12 12v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM0 48v-4h-2v4H-4v2h4v4h2v-4h4v-2h-4zM24 0v-4h-2v4h-4v2h4v4h2V6h4V4h-4zm0 12v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0 24v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0 12v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm24-24v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM12 0v-4h-2v4H6v2h4v4h2V6h4V4h-4zm0 12v-4h-2v4H6v2h4v4h2v-4h4v-2h-4zm0 24v-4h-2v4H6v2h4v4h2v-4h4v-2h-4zm0 12v-4h-2v4H6v2h4v4h2v-4h4v-2h-4zm24-24v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM48 0v-4h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); /* Subtle geometric pattern for dark mode */
}
small {
    color: var(--text-primary-light); /* Changed to primary light for white */
}
p {
    color: var(--text-primary-light); /* Changed to primary light for white */
}
html[data-theme="dark-gold"] small {
    color: var(--text-primary-dark); /* Changed to primary dark for white */
}
html[data-theme="dark-gold"] p {
    color: var(--text-primary-dark); /* Changed to primary dark for white */
}
/* Layout Containers */
.main-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-wrap {
    flex: 1;
    padding-top: 80px; /* Space for fixed navbar */
}

.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Header (Navbar) */
.main-header {
    background-color: var(--surface-light); /* Dark surface for header */
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-light);
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
html[data-theme="dark-gold"] .main-header {
    background-color: var(--surface-dark);
    border-bottom-color: var(--border-dark);
    box-shadow: var(--shadow-dark);
}

.main-header .navbar {
    padding: 0.8rem 0;
}

.main-header .navbar-brand {
    font-weight: 900;
    font-size: 1.8rem;
    color: var(--accent-light); /* Gold brand color */
    transition: color 0.3s;
}
html[data-theme="dark-gold"] .main-header .navbar-brand {
    color: var(--accent-dark);
}
.main-header .navbar-brand:hover {
    color: #e6c300; /* Darker gold on hover */
}
html[data-theme="dark-gold"] .main-header .navbar-brand:hover {
    color: #e6c300;
}

.main-header .nav-link {
    margin: 0 0.8rem;
    font-weight: 600;
    color: var(--text-primary-light); /* Primary text color for links */
    transition: color 0.3s;
    position: relative;
}
html[data-theme="dark-gold"] .main-header .nav-link {
    color: var(--text-primary-dark);
}
.main-header .nav-link:hover {
    color: var(--accent-light); /* Gold on hover */
}
html[data-theme="dark-gold"] .main-header .nav-link:hover {
    color: var(--accent-dark);
}
.main-header .nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-light); /* Underline matches accent */
    transition: width 0.3s ease-in-out;
}
html[data-theme="dark-gold"] .main-header .nav-link::after {
    background-color: var(--accent-dark);
}
.main-header .nav-link:hover::after {
    width: 100%;
}

.main-header .navbar-toggler {
    border: none;
}
.main-header .navbar-toggler:focus {
    box-shadow: none;
}
.main-header .navbar-toggler-icon {
    filter: invert(1) brightness(0.8); /* Make icon visible on dark background */
}

/* Footer */
.main-footer {
    padding: 2.5rem 0;
    margin-top: auto;
    text-align: center;
    background-color: var(--surface-light);
    border-top: 1px solid var(--border-light);
    color: var(--text-secondary-light);
    transition: background-color 0.3s, border-top-color 0.3s, color 0.3s;
}
html[data-theme="dark-gold"] .main-footer {
    background-color: var(--surface-dark);
    border-top-color: var(--border-dark);
    color: var(--text-secondary-dark);
}

.main-footer .social-icons a {
    font-size: 1.5rem;
    margin: 0 0.8rem;
    color: var(--text-secondary-light);
    transition: color 0.3s;
}
html[data-theme="dark-gold"] .main-footer .social-icons a {
    color: var(--text-secondary-dark);
}
.main-footer .social-icons a:hover {
    color: var(--accent-light);
}
html[data-theme="dark-gold"] .main-footer .social-icons a:hover {
    color: var(--accent-dark);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--text-primary-light);
}
html[data-theme="dark-gold"] h1, html[data-theme="dark-gold"] h2, html[data-theme="dark-gold"] h3, html[data-theme="dark-gold"] h4, html[data-theme="dark-gold"] h5, html[data-theme="dark-gold"] h6 {
    color: var(--text-primary-dark);
}

/* Card & Glass Effect */
.card, .glass-effect {
    background-color: var(--surface-light);
    border: 1px solid var(--border-light);
    border-radius: 15px;
    box-shadow: var(--shadow-light);
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
    overflow: hidden; /* Ensure content respects border-radius */
}
html[data-theme="dark-gold"] .card, html[data-theme="dark-gold"] .glass-effect {
    background-color: var(--surface-dark);
    border-color: var(--border-dark);
    box-shadow: var(--shadow-dark);
}

/*--------------------------------------------------*/
/* Landing Page Specific Styles                     */
/*--------------------------------------------------*/
.hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: white; /* Text color for hero content */
}

    .hero-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: -1;
    }
    .hero-video-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

html[data-theme="light-gold"] .hero-video-img {
    filter: brightness(0.8); /* Lighter for light mode */
}

html[data-theme="dark-gold"] .hero-video-img {
    filter: brightness(0.4); /* Darker for dark mode */
}

.hero-content {
    z-index: 1;
    max-width: 900px;
    padding: 0 15px;
}

.hero-content h1 {
    font-size: 3.8rem;
    font-weight: 900;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    margin-bottom: 1rem;
    color: white; /* Override for hero section */
}

.hero-content p {
    font-size: 1.4rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
}

/* Features Section */
#features, #portfolio, #cta {
    padding: 5rem 0;
}

.feature-icon {
    font-size: 3.5rem;
    color: var(--accent-light);
    transition: transform 0.3s ease, color 0.3s ease;
}
html[data-theme="dark-gold"] .feature-icon {
    color: var(--accent-dark);
}
.feature-card:hover .feature-icon {
    transform: scale(1.1);
}

/* Portfolio Slider (Simple Grid for now) */
.portfolio-slider .slider-image {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease;
}
html[data-theme="dark-gold"] .portfolio-slider .slider-image {
    box-shadow: var(--shadow-dark);
}
.portfolio-slider .slider-image:hover {
    transform: translateY(-5px);
}

/* CTA Section */
#cta .glass-effect {
    padding: 4rem;
    text-align: center;
}
#cta h2 {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
}
#cta p {
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
}

/*--------------------------------------------------*/
/* Analysis Report Page Styles                      */
/*--------------------------------------------------*/

.analysis-page {
    padding-top: 2rem;
    padding-bottom: 4rem;
    max-width: 1400px;
}

/* Report Header */
.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
}
html[data-theme="dark-gold"] .report-header {
    border-bottom-color: var(--border-dark);
}
.report-header__title {
    font-weight: 700;
    margin: 0;
    font-size: 2rem;
}
.report-header__meta {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.7;
    color: var(--text-secondary-light);
}
html[data-theme="dark-gold"] .report-header__meta {
    color: var(--text-secondary-dark);
}
.report-header__actions {
    display: flex;
    gap: 0.75rem;
}
.report-header__actions .btn i {
    margin-left: 0.5rem;
}

/* Report Container Layout */
.report-container {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 2.5rem;
}

/* Image Viewer Column */
.image-viewer-column .card {
    position: sticky;
    top: 100px;
    border: 1px solid var(--border-light);
    background-color: var(--surface-light);
}
html[data-theme="dark-gold"] .image-viewer-column .card {
    border-color: var(--border-dark);
    background-color: var(--surface-dark);
}

.image-card__toggle {
    display: flex;
    padding: 0.5rem;
    background-color: var(--background-light);
    border-bottom: 1px solid var(--border-light);
}
html[data-theme="dark-gold"] .image-card__toggle {
    background-color: var(--background-dark);
    border-bottom-color: var(--border-dark);
}

.image-card__toggle-btn {
    flex: 1;
    padding: 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-primary-light);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 10px;
}
html[data-theme="dark-gold"] .image-card__toggle-btn {
    color: var(--text-primary-dark);
}
.image-card__toggle-btn.active {
    background-color: var(--accent-light);
    color: #121212; /* Black text for contrast */
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}
html[data-theme="dark-gold"] .image-card__toggle-btn.active {
    background-color: var(--accent-dark);
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.3);
}

.image-card__display-area {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--background-light);
}
html[data-theme="dark-gold"] .image-card__display-area {
    background-color: var(--background-dark);
}
.image-card__display-area img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed to contain to prevent cropping */
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.image-card__display-area img.active {
    opacity: 1;
}

.skeleton-loader {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--surface-dark) 25%, var(--border-dark) 50%, var(--surface-dark) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
html[data-theme="light-gold"] .skeleton-loader {
     background: linear-gradient(90deg, var(--surface-light) 25%, var(--border-light) 50%, var(--surface-light) 75%);
     background-size: 200% 100%;
}
@keyframes shimmer {
    100% { background-position: -200% 0; }
}

.image-card__caption {
    padding: 1rem;
    margin: 0;
    font-weight: 500;
    text-align: center;
    border-top: 1px solid var(--border-light);
    color: var(--text-secondary-light);
}
html[data-theme="dark-gold"] .image-card__caption {
    border-top-color: var(--border-dark);
    color: var(--text-secondary-dark);
}

/* Analysis Column */
.accordion-item {
    border: 1px solid var(--border-light);
    background-color: var(--surface-light);
    border-radius: 15px;
    margin-bottom: 1.5rem;
    transition: background-color 0.3s, border-color 0.3s;
}
html[data-theme="dark-gold"] .accordion-item {
    border-color: var(--border-dark);
    background-color: var(--surface-dark);
}

.accordion-button {
    width: 100%;
    text-align: right;
    padding: 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--text-primary-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1rem;
}
html[data-theme="dark-gold"] .accordion-button {
    color: var(--text-primary-dark);
}
.accordion-button i {
    font-size: 1.5rem;
    color: var(--accent-light);
}
html[data-theme="dark-gold"] .accordion-button i {
    color: var(--accent-dark);
}
.accordion-button::after {
    content: '\25BE'; /* Unicode for down arrow */
    font-family: 'bootstrap-icons'; /* Use bootstrap icons font */
    font-size: 1.2rem;
    transition: transform 0.3s;
    margin-right: auto; /* Pushes arrow to the left in RTL */
    margin-left: 0; /* Ensure no left margin */
}
.accordion-item.is-open .accordion-button::after {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
    padding: 0 1.5rem;
}
.accordion-item.is-open .accordion-content {
    max-height: 2000px; /* Increased arbitrary large value */
    padding: 0 1.5rem 1.5rem;
}

/* Metric Cards */
.metric-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}
.metric-card {
    background-color: var(--background-light);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}
html[data-theme="dark-gold"] .metric-card {
    background-color: var(--background-dark);
    border-color: var(--border-dark);
}
.metric-card__icon {
    font-size: 2rem;
    color: var(--accent-light);
    margin-bottom: 0.5rem;
}
html[data-theme="dark-gold"] .metric-card__icon {
    color: var(--accent-dark);
}
.metric-card__label {
    font-size: 0.9rem;
    opacity: 0.7;
    color: var(--text-secondary-light);
}
html[data-theme="dark-gold"] .metric-card__label {
    color: var(--text-secondary-dark);
}
.metric-card__value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary-light);
}
html[data-theme="dark-gold"] .metric-card__value {
    color: var(--text-primary-dark);
}

/* Progress Bar */
.progress-bar { margin-top: 1rem; }
.progress-bar__label { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-weight: 500; }
.progress-bar__track { width: 100%; height: 10px; background-color: var(--border-light); border-radius: 5px; overflow: hidden; }
html[data-theme="dark-gold"] .progress-bar__track { background-color: var(--border-dark); }
.progress-bar__fill { height: 100%; background-color: var(--accent-light); border-radius: 5px; transition: width 0.5s ease-out; }
html[data-theme="dark-gold"] .progress-bar__fill { background-color: var(--accent-dark); }

.analysis-summary { line-height: 1.8; opacity: 0.9; color: var(--text-primary-light); }
html[data-theme="dark-gold"] .analysis-summary { color: var(--text-primary-dark); }

/* Detailed Symmetry Table */
.symmetry-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
    font-size: 0.95rem;
}
.symmetry-table th, .symmetry-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-light);
    text-align: right;
}
html[data-theme="dark-gold"] .symmetry-table th, html[data-theme="dark-gold"] .symmetry-table td {
    border-bottom-color: var(--border-dark);
}
.symmetry-table th {
    background-color: var(--background-light);
    font-weight: 600;
    color: var(--text-primary-light);
}
html[data-theme="dark-gold"] .symmetry-table th {
    background-color: var(--background-dark);
    color: var(--text-primary-dark);
}
.symmetry-table td {
    color: var(--text-primary-light);
}
html[data-theme="dark-gold"] .symmetry-table td {
    color: var(--text-primary-dark);
}
.symmetry-table tr:last-child td {
    border-bottom: none;
}
.symmetry-value-low { color: var(--success-color); font-weight: 600; }
.symmetry-value-medium { color: var(--warning-color); font-weight: 600; }
.symmetry-value-high { color: var(--danger-color); font-weight: 600; }


/*--------------------------------------------------*/
/* Aesthetic Criteria Circular Progress Bars        */
/*--------------------------------------------------*/
.aesthetic-criteria-column .card {
    margin-top: 2.5rem;
}
@media (min-width: 1025px) {
    .aesthetic-criteria-column {
        grid-column: 1 / -1; /* Span both columns */
    }
    .report-container {
        grid-template-columns: 40% 1fr;
        grid-template-rows: auto auto; /* Add a second row for the new section */
    }
    .image-viewer-column {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
    }
    .analysis-column {
        grid-row: 1 / 3; /* Span both rows */
        grid-column: 2 / 3;
    }
    .aesthetic-criteria-column {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
        margin-top: -1.5rem; /* Adjust spacing */
    }
}

.criteria-charts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem;
    padding-top: 1rem;
}

.criteria-chart {
    position: relative;
    text-align: center;
}

.criteria-chart svg {
    width: 100%;
    height: auto;
    transform: rotate(-90deg); /* Start from the top */
}

.progress-ring__circle {
    transition: stroke-dashoffset 0.8s ease-out;
    stroke-width: 10px;
    fill: transparent;
}

.progress-ring__background {
    stroke: var(--border-dark);
    stroke-width: 10px;
    fill: transparent;
}

.progress-ring__progress {
    stroke: var(--accent-light);
    stroke-linecap: round; /* Rounded ends */
}

.chart-score {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary-light);
}
html[data-theme="dark-gold"] .chart-score {
    color: var(--text-primary-dark);
}

.chart-label {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary-light);
    line-height: 1.2;
}
html[data-theme="dark-gold"] .chart-label {
    color: var(--text-secondary-dark);
}


/* Error & Empty States */
.error-state, .empty-state {
    text-align: center;
    padding: 4rem 1rem;
    border: 1px solid var(--border-light);
    background-color: var(--surface-light);
    border-radius: 15px;
    box-shadow: var(--shadow-light);
}
html[data-theme="dark-gold"] .error-state, html[data-theme="dark-gold"] .empty-state {
    border-color: var(--border-dark);
    background-color: var(--surface-dark);
    box-shadow: var(--shadow-dark);
}
.error-state__icon, .empty-state__icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--accent-light);
}
html[data-theme="dark-gold"] .error-state__icon, html[data-theme="dark-gold"] .empty-state__icon {
    color: var(--accent-dark);
}
.error-state__title, .empty-state__title { font-weight: 700; margin-bottom: 1rem; }
.error-state__message, .empty-state__message { max-width: 600px; margin: 0 auto 1.5rem; opacity: 0.8; }

/*--------------------------------------------------*/
/* Before & After Slider Styles                     */
/*--------------------------------------------------*/
.slider-container { margin: 1.5rem 0; }
.slider-title { font-size: 1.1rem; font-weight: 600; text-align: center; margin-bottom: 1rem; opacity: 0.8; }
.before-after-slider { position: relative; width: 100%; overflow: hidden; border-radius: 10px; cursor: col-resize; aspect-ratio: 4/3; /* Maintain aspect ratio */ }
.slider-before, .slider-after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.slider-before { width: 50%; z-index: 1; }
.slider-after img, .slider-before img { width: 100%; height: 100%; object-fit: contain; position: absolute; top: 0; left: 0; max-width: none; }
.slider-label { position: absolute; top: 10px; padding: 5px 10px; background-color: rgba(0, 0, 0, 0.6); color: white; border-radius: 5px; font-size: 0.8rem; font-weight: 600; }
.slider-before .slider-label { right: 10px; }
.slider-after .slider-label { left: 10px; }

.slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px;
    height: 100%;
    background-color: white;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.slider-handle-icon {
    width: 40px;
    height: 40px;
    border: 3px solid white;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.5);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrows-angle-expand" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5A.5.5 0 0 1 4 8m-2.5.5a.5.5 0 0 0 0 1h1.293l-2.147 2.146a.5.5 0 0 0 .708.708L3.5 10.207V11.5a.5.5 0 0 0 1 0v-2.5a.5.5 0 0 0-.5-.5H1.5a.5.5 0 0 0-.5.5m13 0a.5.5 0 0 1 .5-.5h-1.293l2.147-2.146a.5.5 0 0 1-.708-.708L12.5 5.793V4.5a.5.5 0 0 1-1 0v2.5a.5.5 0 0 1 .5.5H14.5a.5.5 0 0 1 .5.5"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
}

.slider-feedback { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; }
.slider-feedback span { font-size: 0.9rem; opacity: 0.8; }
.feedback-btn { background: transparent; border: 1px solid var(--border-light); border-radius: 50%; width: 40px; height: 40px; font-size: 1.2rem; cursor: pointer; transition: all 0.3s; color: var(--text-primary-light); }
html[data-theme="dark-gold"] .feedback-btn { border-color: var(--border-dark); color: var(--text-primary-dark); }
.feedback-btn:hover { background-color: rgba(52, 152, 219, 0.1); border-color: var(--accent-light); }
html[data-theme="dark-gold"] .feedback-btn:hover { background-color: rgba(99, 179, 237, 0.1); border-color: var(--accent-dark); }
.feedback-btn.active { background-color: var(--accent-light); color: white; border-color: var(--accent-light); transform: scale(1.1); }
html[data-theme="dark-gold"] .feedback-btn.active { background-color: var(--accent-dark); color: white; border-color: var(--accent-dark); }

/* Responsive Design */
@media (max-width: 1024px) {
    .report-container { grid-template-columns: 1fr; }
    .image-viewer-column .card { position: static; }
    .hero-content h1 { font-size: 3rem; }
    .hero-content p { font-size: 1.2rem; }
}
@media (max-width: 768px) {
    .report-header { flex-direction: column; align-items: flex-start; }
    .report-header__actions { width: 100%; justify-content: space-between; }
    .report-header__actions .btn { flex: 1; }
    .accordion-button { font-size: 1.1rem; padding: 1.25rem; }
    .hero-content h1 { font-size: 2.5rem; }
    .hero-content p { font-size: 1rem; }
    #cta .glass-effect { padding: 2rem; }
    #cta h2 { font-size: 2rem; }
}
@media (max-width: 480px) {
    .metric-cards-container { grid-template-columns: 1fr; }
    .accordion-button { font-size: 1rem; padding: 1rem; }
    .hero-content h1 { font-size: 2rem; }
    .hero-content p { font-size: 0.9rem; }
}

/* PWA Safe Area Support for iOS */
body {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
}

.main-container {
    min-height: calc(100vh - constant(safe-area-inset-top) - constant(safe-area-inset-bottom));
    min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

.main-header.fixed-top {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

.content-wrap {
    padding-top: calc(80px + constant(safe-area-inset-top)); /* Adjust for fixed navbar and safe area */
    padding-top: calc(80px + env(safe-area-inset-top));
}

#loading-overlay {
    display: none !important;
}

/* Custom styles for TECHCHAIN Info Modal */
.techchain-modal-content {
    background-image: url('/images/19577378_mockup_90_-1.png');
    background-size: cover;
    background-position: center;
    color: #FFFFFF; /* Light text for dark background */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    overflow: hidden;
}

.techchain-modal-content .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

.techchain-modal-content .modal-title {
    color: #FFD700; /* Gold color for the title */
    font-weight: 700;
}

.techchain-modal-content .btn-close-white {
    filter: invert(1);
}

.techchain-modal-content .modal-body {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay for readability */
    padding: 2rem;
}

.techchain-modal-content .modal-body p {
    color: #FFFFFF;
    margin-bottom: 1rem;
}

.techchain-modal-content .modal-body a {
    color: #ADD8E6; /* Light blue for links */
    text-decoration: underline;
}

.techchain-modal-content .modal-body a:hover {
    color: #FFD700; /* Gold on hover */
}

.techchain-modal-content .modal-footer {
    background-color: rgba(0, 0, 0, 0.6); /* Slightly darker overlay for footer */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.techchain-link {
    color: var(--accent-light); /* Use accent color for the link in the footer */
    text-decoration: none;
    font-weight: 600;
}

html[data-theme="dark-gold"] .techchain-link {
    color: var(--accent-dark);
}

.techchain-link:hover {
    text-decoration: underline;
    color: #e6c300; /* Darker gold on hover */
}