/* File: assets/css/frontend.css */  

/* Basic Reset & Defaults */  
.cia-frontend-container * {  
    box-sizing: border-box;  
    margin: 0;  
    padding: 0;  
}  

.cia-frontend-container {  
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;  
    line-height: 1.6;  
    color: #333;  
}  

/* Common Module Components */  
.cia-section {  
    margin-bottom: 30px;  
}  

.cia-card {  
    background: #fff;  
    border-radius: 8px;  
    padding: 20px;  
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  
    margin-bottom: 20px;  
}  

.cia-title {  
    font-size: 22px;  
    margin-bottom: 15px;  
    color: #2271b1;  
}  

.cia-subtitle {  
    font-size: 18px;  
    margin-bottom: 12px;  
    color: #444;  
}  

.cia-text {  
    margin-bottom: 15px;  
    font-size: 14px;  
}  

/* Buttons */  
.cia-button {  
    display: inline-block;  
    padding: 10px 20px;  
    background-color: #2271b1;  
    color: #fff;  
    text-decoration: none;  
    border-radius: 4px;  
    border: none;  
    cursor: pointer;  
    font-size: 14px;  
    font-weight: 500;  
    transition: all 0.3s ease;  
}  

.cia-button:hover {  
    background-color: #135e96;  
}  

.cia-button.secondary {  
    background-color: #f8f8f8;  
    color: #333;  
    border: 1px solid #ddd;  
}  

.cia-button.secondary:hover {  
    background-color: #eee;  
}  

/* Form Elements */  
.cia-form-group {  
    margin-bottom: 20px;  
}  

.cia-label {  
    display: block;  
    margin-bottom: 8px;  
    font-weight: 500;  
    color: #444;  
}  

.cia-input,  
.cia-select,  
.cia-textarea {  
    width: 100%;  
    padding: 10px 12px;  
    border: 1px solid #ddd;  
    border-radius: 4px;  
    font-size: 14px;  
    transition: border-color 0.3s ease;  
}  

.cia-input:focus,  
.cia-select:focus,  
.cia-textarea:focus {  
    border-color: #2271b1;  
    outline: none;  
}  

/* Alerts and Notices */  
.cia-alert {  
    padding: 12px 15px;  
    border-radius: 4px;  
    margin-bottom: 20px;  
    font-size: 14px;  
}  

.cia-alert.success {  
    background-color: #f0f9eb;  
    color: #67c23a;  
    border: 1px solid #c2e7b0;  
}  

.cia-alert.error {  
    background-color: #fef0f0;  
    color: #f56c6c;  
    border: 1px solid #fbc4c4;  
}  

.cia-alert.info {  
    background-color: #f4f4f5;  
    color: #909399;  
    border: 1px solid #e9e9eb;  
}  

/* Responsive Grids */  
.cia-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));  
    gap: 20px;  
}  

@media (max-width: 768px) {  
    .cia-grid {  
        grid-template-columns: 1fr;  
    }  
}