/* ================================================================
# DACOG Search Engine – System Architecture
# File: create-campaign.css
# Path: /static/css/create-campaign.css
# Version: 3.0.0
# Description: Mathematical-Unit Campaign Wizard (Light/Hero Theme)
# ================================================================*/

/* 1. Base Container */
.campaign-wrapper {
    max-width: 56.25rem; /* 900px */
    margin: 0 auto;
    padding-bottom: 3.125rem; /* 50px */
}

/* 2. Wizard Progress Bar (Responsive Component) */
.wizard-steps { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 2.5rem; 
    position: relative; 
}

.wizard-steps::before { 
    content: ''; 
    position: absolute; 
    top: 0.9375rem; /* 15px */
    left: 0; 
    width: 100%; 
    height: 0.125rem; 
    background: var(--dacog-border-color); 
    z-index: 1; 
}

.step { 
    position: relative; 
    z-index: 2; 
    background: var(--dacog-bg-base); 
    padding: 0 0.9375rem; 
    font-weight: 700; 
    color: var(--dacog-text-muted); 
    font-size: 0.875rem;
}

.step.active { color: var(--dacog-accent-primary); }
.step.completed { color: var(--dacog-accent-green); }

.step-circle { 
    display: inline-block; 
    width: 2rem; /* 32px */
    height: 2rem; 
    line-height: 2rem; 
    text-align: center; 
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%; 
    background: var(--dacog-bg-nav); 
    border: 0.0625rem solid var(--dacog-border-color);
    color: var(--dacog-text-muted); 
    margin-right: 0.5rem; 
}

.step.active .step-circle { 
    background: var(--dacog-accent-primary); 
    border-color: var(--dacog-accent-primary);
    color: #ffffff; 
}

/* 3. Theme-Aware Form Card */
.campaign-card {
    background-color: var(--dacog-bg-nav);
    border: 0.0625rem solid var(--dacog-border-color);
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    -webkit-box-shadow: var(--dacog-shadow-sm);
    -moz-box-shadow: var(--dacog-shadow-sm);
    box-shadow: var(--dacog-shadow-sm);
    padding: 3.125rem; /* 50px */
}

/* 4. Objective Selection Cards */
.objective-card { 
    border: 0.125rem solid var(--dacog-border-color); /* 2px */
    -webkit-border-radius: 0.75rem;
    -moz-border-radius: 0.75rem;
    border-radius: 0.75rem; 
    padding: 1.5625rem; /* 25px */
    cursor: pointer; 
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease; 
    background: var(--dacog-bg-nav); 
    height: 100%; 
}

.objective-card:hover { 
    border-color: var(--dacog-text-muted); 
}

.objective-card.selected { 
    border-color: var(--dacog-accent-green); 
    background-color: rgba(25, 135, 84, 0.05); /* Faint green */
    -webkit-box-shadow: 0 0.25rem 0.9375rem rgba(25, 135, 84, 0.15);
    -moz-box-shadow: 0 0.25rem 0.9375rem rgba(25, 135, 84, 0.15);
    box-shadow: 0 0.25rem 0.9375rem rgba(25, 135, 84, 0.15); 
}

.theme-hero .objective-card.selected {
    background-color: rgba(129, 201, 149, 0.1); /* Adjusted for dark mode */
    -webkit-box-shadow: none;
    box-shadow: none;
}

.objective-icon { 
    font-size: 2rem; 
    margin-bottom: 0.9375rem; 
    color: var(--dacog-text-muted); 
}

.objective-card.selected .objective-icon { 
    color: var(--dacog-accent-green); 
}

/* 5. Limit Switch Box */
.limit-box {
    background-color: var(--dacog-bg-base);
    border: 0.0625rem solid var(--dacog-border-color);
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem;
    padding: 1.5rem;
}

/* ==========================================================================
   6. MEDIA QUERIES (AFRICAN TARGET OPTIMIZATION)
   ========================================================================== */

@media screen and (max-width: 48em) { /* 768px */
    .campaign-card {
        padding: 2rem;
    }
}

@media screen and (max-width: 30em) { /* 480px */
    .campaign-wrapper {
        padding-top: 1.5rem;
    }
    
    .campaign-card {
        padding: 1.5rem;
    }
    
    .wizard-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .wizard-steps::before {
        display: none;
    }
    
    .step {
        padding: 0;
        background: transparent;
    }
    
    .objective-card {
        padding: 1.25rem;
    }
    
    .limit-box {
        padding: 1rem;
    }
}