/* Custom styles to complement Classless.css */

.step { 
    display: none; 
}

.step.active { 
    display: block; 
}

.progress-bar { 
    width: 100%; 
    height: 8px; 
    background: #e0e0e0; 
    border-radius: 4px; 
    margin: 1rem 0;
}

.progress-fill { 
    height: 100%; 
    background: #007acc; 
    border-radius: 4px; 
    transition: width 0.3s ease;
}

.masked { 
    font-family: monospace; 
}

.form-actions { 
    display: flex; 
    gap: 1rem; 
    margin-top: 2rem; 
    flex-wrap: wrap;
}

.hidden { 
    display: none; 
}

/* Error styling for validation */
.error {
    border: 2px solid #dc3545 !important;
    background-color: #fff5f5 !important;
}

.error:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* Grid layout for address fields */
.address-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem;
}

.address-grid label:first-child {
    grid-column: 1 / -1;
}

/* Grid layout for name fields */
.name-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .address-grid {
        grid-template-columns: 1fr;
    }
    
    .address-grid label:first-child {
        grid-column: 1;
    }
    
    .name-grid {
        grid-template-columns: 1fr;
    }
}


/* Input formatting hints */
.format-hint {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.25rem;
}



/* Print styles */
@media print {
    .no-print { 
        display: none; 
    }
    
    body { 
        font-size: 10pt;
        line-height: 1.2;
        margin: 0.5in;
    }
    
    h1 {
        font-size: 16pt !important;
        margin: 0 0 0.5rem 0 !important;
        line-height: 1.1 !important;
    }
    
    h3 {
        font-size: 12pt !important;
        margin: 0.8rem 0 0.3rem 0 !important;
    }
    
    p {
        margin: 0.2rem 0 !important;
        font-size: 10pt !important;
    }
    
    .progress-bar,
    .form-actions,
    button {
        display: none !important;
    }
}