/* ======================================================= */
/* ==   1. BASE (DARK) THEME STYLES FOR PROCESS TIMELINE == */
/* ======================================================= */

/* Styles for the main timeline section and its components */
.process-details-section { 
    margin: 3rem 0; 
}

.process-header { 
    text-align: center; 
    margin: 3rem 0 3rem; 
    perspective: 1000px; 
}

.holographic-panel { 
    background: linear-gradient(145deg, rgba(58, 80, 107, 0.2), rgba(11, 19, 43, 0.4)); 
    border: 1px solid rgba(0, 245, 212, 0.2); 
    border-radius: 24px; 
    padding: 2.5rem; 
    display: inline-block; 
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 30px rgba(0, 245, 212, 0.1); 
}

.process-header h2 { 
    font-family: 'Orbitron', sans-serif; 
    font-size: 2.5rem; 
    font-weight: 800; 
    background: linear-gradient(135deg, var(--kinetic-teal), var(--pure-white)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    margin-bottom: 1rem; 
    text-shadow: 0 0 15px rgba(0, 245, 212, 0.4); 
}

.process-header p { 
    font-size: 1.2rem; 
    color: var(--starlight); 
    opacity: 0.8; 
    max-width: 600px; 
    margin: 0; 
    line-height: 1.6;
}

.how-it-works-container { 
    position: relative; 
    margin-top: 1rem; 
}

.how-it-works-container .timeline-line { 
    position: absolute; 
    left: 23px; 
    top: 0; 
    width: 4px; 
    background: var(--graphite); 
    border-radius: 2px; 
}

.how-it-works-container .timeline-pulse-clipper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 0; /* Animated by GSAP */
    overflow: hidden; 
    max-height: 100%; 
    will-change: height;
}

/* ▼▼▼ THIS IS THE FIX ▼▼▼ */
/* Make the gradient line inside the clipper fill its parent's height */
.timeline-pulse-clipper .timeline-line {
    height: 100%;
    /* It inherits its other styles (position, left, width) from the rule above */
}

.step-item { 
    position: relative; 
    margin-bottom: 4rem; 
    padding-left: 60px; 
    opacity: 0.3; /* Start almost invisible */
    filter: grayscale(0.8); 
    transition: opacity 0.6s ease-out, filter 0.6s ease-out; 
}

.step-item.visible { 
    opacity: 1; 
    filter: grayscale(0); 
}

.step-icon {
    opacity: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--pure-white); /* Solid white background */
    border: 3px solid #888888; /* Start with grey border */
    color: #888888; /* Start with grey text */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    transition: all 0.4s ease-out;
    box-shadow: none; /* No shadow initially */
}

.step-item.visible .step-icon {
    transform: scale(1.1);
    box-shadow: 0 0 25px 5px var(--theme-color);
}

#step-9-detail .step-icon {
    --theme-color: #888888;
    border-color: #888888;
    color: #888888;
    box-shadow: 0 0 0px 0px #888888;
    transform: scale(1);
}

#step-9-detail.visible .step-icon {
    --theme-color: var(--pure-white);
    border-color: var(--pure-white);
    color: var(--pure-white);
    transform: scale(1.1);
    box-shadow: 
        0 0 25px 5px rgba(255, 255, 255, 0.9),
        0 0 40px 8px rgba(255, 255, 255, 0.6),
        0 0 60px 12px rgba(255, 255, 255, 0.3);
}

.step-content { 
    background: linear-gradient(145deg, rgba(58, 80, 107, 0.2), rgba(11, 19, 43, 0.6)); 
    border: 1px solid rgba(226, 232, 240, 0.1); 
    border-radius: 16px; 
    padding: 1.5rem 2rem; 
    position: relative; 
    overflow: hidden; 
    transition: all 0.6s ease-out; 
}

.step-content::before { 
    content: ''; 
    position: absolute; 
    top:0; left:0; right:0; bottom:0; 
    border-radius: 16px; 
    border: 2px solid transparent; 
    transition: border-color 0.4s ease, opacity 1s ease; 
    pointer-events: none; 
    opacity: 0; 
}

.step-item.visible .step-content::before { 
    border-color: var(--theme-color); 
    opacity: 1; 
}

.step-content h3 { 
    font-family: 'Orbitron', sans-serif; 
    font-size: 1.5rem; 
    font-weight: 600; 
    color: var(--theme-color); 
    margin-bottom: 0.75rem; 
    transition: color 0.6s ease-out; 
}

.step-content p { 
    font-size: 1rem; 
    color: var(--starlight); 
    opacity: 0.9;
    line-height: 1.6;
}

.step-content p strong { 
    color: var(--pure-white); 
    font-weight: 600; 
}

/* Assigning a different theme color to each step ID */
[id^="step-1"] { --theme-color: var(--kinetic-teal); }
[id^="step-2"] { --theme-color: var(--neon-periwinkle); }
[id^="step-3"] { --theme-color: var(--signal-green); }
[id^="step-4"] { --theme-color: var(--ignition-orange); }
[id^="step-5"] { --theme-color: var(--hyper-blue); }
[id^="step-6"] { --theme-color: var(--neural-gold); }
[id^="step-7"] { --theme-color: var(--celestial-orchid); }
[id^="step-8"] { --theme-color: var(--fusion-coral); }
[id^="step-9"] { --theme-color: var(--pure-white); }


/* ======================================================= */
/* ==   2. VIBRANT LIGHT THEME OVERRIDE STYLES          == */
/* ======================================================= */

/* --- Header --- */
.theme-light .process-details-section .process-header h2 {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    color: var(--graphite);
    text-shadow: none;
}

.theme-light .process-details-section .process-header p {
    color: var(--graphite);
    opacity: 0.9;
}

.theme-light .process-details-section .holographic-panel {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* --- Content Cards --- */
.theme-light .process-details-section .step-content {
    background: var(--pure-white);
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.theme-light .process-details-section .step-content:hover {
    transform: translateY(-4px);
    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.07);
}


.theme-light .process-details-section .step-content h3 {
    color: #adb5bd; 
    opacity: 0.9;
}

.theme-light .process-details-section .step-item.visible .step-content h3 {
color: var(--theme-color);
}

.theme-light .process-details-section .step-content p {
    color: var(--graphite);
    opacity: 0.9;
}

.theme-light .process-details-section .step-content p strong {
    color: #000;
}

/* --- Timeline & Icons --- */
.theme-light .process-details-section .timeline-line {
    background-color: #e9ecef;
}

.theme-light .process-details-section .step-content::before {
    display: none;
}

.theme-light .process-details-section .step-item.visible .step-content {
    border-left: 3px solid var(--theme-color);
}

.theme-light .process-details-section .step-icon {
    background: #f8f9fa;
    border-color: #dee2e6;
    color: #adb5bd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.theme-light .process-details-section .step-item.visible .step-icon {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: var(--pure-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 4px #fff;
}

.theme-light #step-9-detail .step-icon {
    --theme-color: #adb5bd;
    border-color: #dee2e6;
    color: #868e96;
}

.theme-light #step-9-detail.visible .step-icon {
    --theme-color: var(--graphite);
    background: var(--graphite);
    border-color: var(--graphite);
    color: var(--pure-white);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15), 0 0 0 4px #fff;
}

/* --- Animation --- */
.theme-light .process-details-section .step-item {
    filter: none;
    opacity: 1;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.theme-light .process-details-section .step-item.visible {
    opacity: 1;
}

/* ======================================================= */
/* ==   CUSTOM STYLE FOR STEP 9 TITLE (THEME-AWARE)     == */
/* ======================================================= */

/* 1. Base style for the Dark Theme */
/* This rule targets the h3 inside the element with the ID 'step-9-detail' */
#step-9-detail .step-content h3 {
    /* On the dark theme, a bright, pure white makes it stand out */
    color: var(--pure-white); 
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Add a subtle glow */
}

/* 2. Override for the Light Theme */
/* This rule only applies when the body has the 'theme-light' class */
.theme-light #step-9-detail .step-content h3 {
    /* On the light theme, the primary dark text color is best for readability */
    color: var(--graphite);
    text-shadow: none; /* Remove the glow on the light theme */
}