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

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

/* 2. Wizard Progress Bar */
.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); /* Adapts to page background to break the line */
    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; 
}

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

/* 3. Theme-Aware Form Card */
.adset-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 */
}

.adset-section-title { 
    font-size: 1rem; 
    font-weight: 800; 
    color: var(--dacog-text-main); 
    text-transform: uppercase; 
    letter-spacing: 0.0625rem; 
    margin-bottom: 1.25rem; 
    border-bottom: 0.125rem solid var(--dacog-border-color); 
    padding-bottom: 0.625rem; 
}

/* 4. Placement Selection Cards */
.placement-card { 
    border: 0.125rem solid var(--dacog-border-color); /* 2px */
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    border-radius: 0.5rem; 
    padding: 0.9375rem; 
    background: var(--dacog-bg-nav); 
    cursor: pointer; 
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    transition: 0.2s ease; 
    height: 100%;
}

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

.form-check-input:checked + .placement-card { 
    border-color: var(--dacog-accent-primary); 
    background-color: rgba(13, 110, 253, 0.05); /* Faint blue tint */
}

.theme-hero .form-check-input:checked + .placement-card {
    background-color: rgba(138, 180, 248, 0.1);
}

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

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

@media screen and (max-width: 30em) { /* 480px */
    .adset-wrapper {
        padding-top: 1.5rem;
    }
    
    .adset-card {
        padding: 1.5rem;
    }
    
    .wizard-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .wizard-steps::before {
        display: none; /* Remove line on mobile stack */
    }
    
    .step {
        padding: 0;
        background: transparent;
    }
    
    .placement-card {
        padding: 1rem;
    }
}