/* -------------------------------------------------------------------
   SECTION VISIBILITY
------------------------------------------------------------------- */
/* Hidden until script shows it (showLoading), so visitors without
   JavaScript don't see a spinner that never finishes. */
#loading-section {
    display: none;
    text-align: center;
    padding: 20px 0;
}
#vote-section,
#feedback-section,
#form-container,
#thanks-msg {
    display: none;
}

/* The h1 takes focus when it changes (see setHeading) so screen readers
   announce it. It is not a control, so no focus ring is drawn. */
#page-heading:focus {
    outline: none;
}

/* -------------------------------------------------------------------
   SPINNER
------------------------------------------------------------------- */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #981e32;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 15px auto;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Visitors who have asked their device to reduce motion get a still ring.
   The "Loading..." text beside it carries the meaning. */
@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: none;
    }
}

/* -------------------------------------------------------------------
   STEP VISIBILITY
------------------------------------------------------------------- */
.hse-step {
    display: none;
}
.hse-step.hse-step--active {
    display: block;
    animation: hse-step-in 0.15s ease-out;
}
@keyframes hse-step-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hse-step.hse-step--active {
        animation: none;
    }
}

/* -------------------------------------------------------------------
   SUBMIT ERROR SUMMARY
   Follows the GOV.UK error summary pattern: red border box at the top of
   the form, focused when shown.
------------------------------------------------------------------- */
.feedback-error-summary {
    border: 5px solid #d4351c;
    padding: 15px 20px;
    margin: 0 0 30px 0;
}
.feedback-error-summary:focus {
    outline: 3px solid #ffdd00;
    outline-offset: 0;
}
.feedback-error-summary__title {
    margin: 0 0 10px 0;
}
.feedback-error-summary p {
    margin: 0;
}

/* -------------------------------------------------------------------
   PROGRESS CAPTION
------------------------------------------------------------------- */
.hse-caption {
    display: block;
    color: #505a5f;
    font-size: 16px;
    margin-bottom: 5px;
}

/* -------------------------------------------------------------------
   PER-STEP ERROR STATE
------------------------------------------------------------------- */
.hse-form-group--error .hse-fieldset__heading {
    color: #d4351c;
}
.hse-error-message {
    color: #d4351c;
    font-weight: 700;
    margin: 0 0 15px 0;
}
.hse-form-group--error .hse-radios {
    border-left: 4px solid #d4351c;
    padding-left: 15px;
}