/* Add this anywhere in your styles.css */
.cgc-speedometer-box canvas {
    max-height: 180px;
    width: 100% !important;
}
/* Main Container */
#cgc-ai-assessment-container {
    background-color: #0B132B; 
    color: #ffffff;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    border-radius: 12px;
    padding: 40px;
    max-width: 850px;
    margin: 0 auto;
    scroll-margin-top: 112px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    border: 1px solid #1C2A4A;
}

/* Header & Progress */
.cgc-assessment-header { margin-bottom: 30px; border-bottom: 1px solid #1C2A4A; padding-bottom: 20px;}
.cgc-assessment-header h2 { margin: 0 0 10px 0; font-size: 24px; color: #FBC02D; letter-spacing: 0.5px;}
#cgc-section-description { margin: 0; font-size: 15px; color: #8A9DB0; }

.cgc-progress-wrapper { width: 100%; height: 6px; background: #1C2A4A; border-radius: 3px; margin-top: 20px; overflow: hidden;}
#cgc-progress-bar { height: 100%; background: #FBC02D; width: 16%; transition: width 0.5s ease; }

/* Form Elements */
.cgc-question-block { margin-bottom: 25px; animation: fadeIn 0.4s ease; }
.cgc-question-block.hidden { display: none; }
.cgc-question-block h4 { font-size: 16px; margin: 0 0 12px 0; color: #E2E8F0; font-weight: 500; line-height: 1.4; }

.cgc-input, .cgc-select, .cgc-textarea {
    width: 100%; padding: 14px; background: #111D3A; border: 1px solid #2A3B5C;
    border-radius: 8px; color: #ffffff; font-size: 15px; font-family: inherit;
    transition: border-color 0.3s ease; box-sizing: border-box;
}
.cgc-textarea { resize: vertical; min-height: 80px; }
.cgc-input:focus, .cgc-select:focus, .cgc-textarea:focus { outline: none; border-color: #FBC02D; background: #152447; }

/* Appended Input (Years) */
.cgc-input-group { display: flex; align-items: center; gap: 10px; }
.cgc-input-group .cgc-input { width: 120px; text-align: center; }
.cgc-input-group span { color: #A0AEC0; font-weight: 500; }

/* Checkboxes & Radios styled as clickable pills */
.cgc-options-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.cgc-option-label {
    background: #111D3A; border: 1px solid #2A3B5C; padding: 10px 16px;
    border-radius: 30px; cursor: pointer; font-size: 14px; color: #A0AEC0;
    transition: all 0.2s ease; display: inline-flex; align-items: center; user-select: none;
}
.cgc-option-label:hover { border-color: #FBC02D; color: #fff; }
.cgc-option-label input { display: none; }
.cgc-option-label:has(input:checked) { background: #FBC02D; color: #0B132B; border-color: #FBC02D; font-weight: 600;}

/* Hidden 'Other' input */
.cgc-other-input { margin-top: 10px; display: none; }
.cgc-other-input.active { display: block; animation: fadeIn 0.3s ease; }

/* Buttons */
.cgc-assessment-footer { text-align: right; margin-top: 30px; border-top: 1px solid #1C2A4A; padding-top: 25px; }
.cgc-btn { padding: 14px 28px; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; border: none; }
.cgc-btn.primary { background: #FBC02D; color: #0B132B; }
.cgc-btn.primary:hover { background: #F4D03F; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(251, 192, 45, 0.3); }
.cgc-action-buttons { display: flex; gap: 15px; justify-content: center; margin-top: 25px; }

/* AI Processing Spinner */
#cgc-ai-processing { text-align: center; padding: 60px 0; }
.cgc-spinner {
    width: 50px; height: 50px; border: 4px solid rgba(251, 192, 45, 0.2);
    border-top: 4px solid #FBC02D; border-radius: 50%;
    animation: spin 1s linear infinite; margin: 0 auto 20px auto;
}
#cgc-processing-text { color: #8A9DB0; font-weight: 400; font-size: 16px; }

/* Results */
#cgc-results-container { text-align: center; padding: 20px 0; }
.cgc-speedometers-grid { display: flex; gap: 30px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; }
.cgc-speedometer-box { flex: 1; min-width: 300px; background: #111D3A; padding: 25px; border-radius: 12px; border: 1px solid #2A3B5C; }
.cgc-speedometer-box h4 { margin-top: 0; color: #E2E8F0; }
.cgc-speedo-label { font-size: 18px; font-weight: 700; margin-top: 15px; }
.cgc-speedo-desc { font-size: 14px; color: #A0AEC0; margin: 10px 0 0 0; line-height: 1.5; }

.cgc-bonus-offer { background: #111D3A; padding: 30px; border-radius: 12px; border: 1px dashed #FBC02D; }
.cgc-bonus-offer h4 { color: #FBC02D; margin-top: 0; font-size: 20px; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }


/* Validation error highlight */
.cgc-question-block.cgc-error h4::after {
    content: ' — This field is required';
    color: #e74c3c;
    font-size: 13px;
    font-weight: 400;
}

.cgc-question-block.cgc-error .cgc-input,
.cgc-question-block.cgc-error .cgc-select,
.cgc-question-block.cgc-error .cgc-textarea {
    border-color: #e74c3c;
}

.cgc-question-block.cgc-error .cgc-options-grid {
    outline: 1px solid #e74c3c;
    border-radius: 8px;
    padding: 8px;
}