/* CORE Business Execution Health Check — assessment-specific styles.
   Uses the site's existing brand colors (blue #3D599A / red #C43A3A) rather
   than introducing a new palette. Scoped under .core-* classes so it never
   touches existing site styles. */

.core-landing { padding: 40px 0 100px; }
.core-dimensions-preview { margin: 30px 0; }
.core-dimensions-preview ul { list-style: none; padding: 0; display: inline-block; text-align: left; }
.core-dimensions-preview li { margin-bottom: 10px; font-size: 16px; }
.core-dimensions-preview li i { color: #3D599A; margin-right: 8px; }
.core-landing-note { margin-top: 20px; font-size: 14px; color: #666; max-width: 560px; margin-left: auto; margin-right: auto; }

.core-assessments-list { margin: 40px auto 0; max-width: 900px; text-align: left; }
.core-assessment-card { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 24px !important; padding: 28px 30px; background: #f8f9fc; border-radius: 14px; margin-bottom: 20px; flex-wrap: wrap !important; transition: box-shadow 0.2s ease; }
.core-assessment-card:hover { box-shadow: 0 6px 24px rgba(61, 89, 154, 0.12); }
.core-assessment-card-body h3 { margin-bottom: 8px; font-size: 20px; color: #222; }
.core-assessment-card-body p { margin: 0 0 6px; color: #555; }
.core-assessment-card-meta { font-size: 13px; color: #888; }
@media (max-width: 575px) { .core-assessment-card { flex-direction: column; align-items: flex-start; } }

.core-assessment-wrap { padding: 20px 0 100px; }

.core-progress { max-width: 720px; margin: 0 auto 30px; }
.core-progress-bar { background: #eceef5; border-radius: 6px; height: 8px; overflow: hidden; }
.core-progress-fill { background: #3D599A; height: 100%; width: 0%; transition: width 0.3s ease; }
.core-progress-label { margin-top: 10px; font-weight: 600; color: #3D599A; text-align: center; }

.core-step { max-width: 720px; margin: 0 auto; }
.core-step-dimension { margin-bottom: 20px; color: #222; font-size: 22px; }

.core-question { margin-bottom: 28px; padding: 20px; background: #f8f9fc; border-radius: 10px; }
.core-question-text { font-weight: 600; margin-bottom: 14px; font-size: 16px; }
.core-options { display: flex; flex-direction: column; gap: 10px; }
.core-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #dfe3ee; border-radius: 8px; cursor: pointer; background: #fff; transition: border-color 0.2s ease, background 0.2s ease; }
.core-option:hover { border-color: #3D599A; }
.core-option input[type=radio] { margin-top: 4px; }
.core-option:has(input:checked) { border-color: #3D599A; background: #eef1fa; }

.core-field { max-width: 720px; margin: 0 auto 18px; }
.core-required { color: #C43A3A; margin-left: 2px; }
.core-required-note { font-size: 13px; color: #666; margin: -8px 0 18px; text-align: left; max-width: 720px; margin-left: auto; margin-right: auto; }
.core-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.core-field input[type=text], .core-field input[type=email], .core-field select {
    width: 100%; padding: 10px 14px; border: 1px solid #dfe3ee; border-radius: 8px; font-size: 15px;
}
.core-field small { display: block; margin-top: 6px; color: #888; font-size: 12px; }
.core-consent label { display: flex; gap: 10px; font-weight: 400; align-items: flex-start; }
.core-consent input { margin-top: 4px; }
.core-consent a { color: #3D599A; text-decoration: underline; }

.core-nav { max-width: 720px; margin: 30px auto 0; display: flex; justify-content: space-between; gap: 12px; }
.core-nav button { border: none; cursor: pointer; }

.core-errors { background: #fdeceb; border: 1px solid #f0c4c0; color: #a33; padding: 16px 20px; border-radius: 8px; margin-bottom: 24px; }
.core-errors ul { margin: 8px 0 0 20px; }

.core-result-card { text-align: center; padding: 50px 30px; background: #f8f9fc; border-radius: 14px; }
.core-result-card h2 { font-size: 26px; margin: 14px 0 18px; color: #222; }
.core-result-note { color: #666; font-size: 14px; margin: 16px 0 26px; }

.core-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; align-items: center; justify-content: center; display: flex; }
.core-modal-box { background: #fff; border-radius: 12px; padding: 30px; max-width: 420px; width: 90%; text-align: center; }
.core-modal-email { font-weight: 700; font-size: 18px; color: #3D599A; margin: 10px 0 24px; word-break: break-all; }
.core-modal-actions { display: flex; gap: 12px; justify-content: center; }
.core-modal-actions button { border: none; cursor: pointer; }

@media (max-width: 767px) {
    .core-step-dimension { font-size: 19px; }
    .core-nav { flex-direction: column-reverse; }
}


.core-pretest-disclosure { margin: 0 0 20px; font-size: 14px; color: #666; max-width: 640px; }
.core-instruction-note { margin: 0 0 24px; padding: 12px 16px; background: #f8f9fc; border-left: 3px solid #d8dce6; font-size: 14px; color: #555; border-radius: 4px; }


/* Back button shares .btn-default with Next, which places a forward-pointing arrow
   icon on the right of every button with that class. Once Back appears (page 2+) it
   sits on the left via .core-nav's space-between layout but kept the same forward
   arrow as Next, reading as inconsistent. Mirror the icon and move it to the left
   side of the Back button specifically so it visually points backward. */
#coreBackBtn.btn-default { padding: 17px 20px 17px 55px; }
#coreBackBtn.btn-default::before { left: 5px; right: auto; transform: translateY(-50%) scaleX(-1); }