/* ============================================================
   CarbonIsle Assessment — Form Styling
   Scope: wrap the WS Form (or its container) in .ci-assessment
   Drop into carbonisle-core enqueue OR Elementor Custom CSS.
   Variable-driven: every future assessment that carries the
   .ci-assessment wrapper inherits this look automatically.
   ============================================================ */

/* ---- Brand tokens (edit these once, everything follows) ---- */
.ci-assessment {
    --ci-slate: #33516C;
    --ci-sage: #739C49;
    --ci-sage-bg: #f1f5ea;
    --ci-blue: #185FA5;
    --ci-ink: #33516C;
    --ci-muted: #5b6b78;
    --ci-line: #dfe3e6;
    --ci-line-2: #cfd5da;
    --ci-paper: #ffffff;

    max-width: 760px;
    margin: 0 auto;
}

/* ---- Retheme WS Form's own variables (kills the generic blue) ---- */
.ci-assessment [data-wsf-style-id],
.ci-assessment.wsf-form,
.ci-assessment .wsf-form {
    --wsf-form-color-accent: var(--ci-sage);
    /* selected radio/checkbox */
    --wsf-form-color-primary: var(--ci-slate);
    /* submit button + focus ring */
    --wsf-form-color-base: var(--ci-ink);
    --wsf-form-font-size: 16px;
    --wsf-form-grid-gap: 18px;
}

/* ---- Question label (the prompt) ---- */
.ci-assessment .wsf-field-wrapper>.wsf-label,
.ci-assessment fieldset>legend {
    font-size: 17px !important;
    font-weight: 500 !important;
    color: var(--ci-ink) !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
}

/* ============================================================
   RADIO + CHECKBOX as selectable CARDS
   WS Form markup (verified): <div data-row-radio><input.wsf-field><label.wsf-label></div>
   Class-targeted (input.wsf-field / label.wsf-label) to beat
   ws-form-public-radio.min.css + ws-form-public-checkbox.min.css.
   ============================================================ */

.ci-assessment [data-row-radio],
.ci-assessment [data-row-checkbox] {
    position: relative;
    width: 100%;
}

/* Pull native input out of flow (label's `for` keeps clicks + a11y working) */
.ci-assessment [data-row-radio]>input.wsf-field,
.ci-assessment [data-row-checkbox]>input.wsf-field {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    pointer-events: none !important;
}

/* Label becomes the card */
.ci-assessment [data-row-radio]>label.wsf-label,
.ci-assessment [data-row-checkbox]>label.wsf-label {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    background: #fff !important;
    border: 1px solid #dfe3e6 !important;
    border-radius: 9px !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    cursor: pointer;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: #2B2B2B !important;
    font-weight: 400 !important;
    transition: border-color .15s, background .15s;
}

.ci-assessment [data-row-radio]>label.wsf-label:hover,
.ci-assessment [data-row-checkbox]>label.wsf-label:hover {
    border-color: #739C49 !important;
}

/* Custom indicator */
.ci-assessment [data-row-radio]>label.wsf-label::before,
.ci-assessment [data-row-checkbox]>label.wsf-label::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 2px solid #b8c2cb;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.ci-assessment [data-row-checkbox]>label.wsf-label::before {
    border-radius: 5px;
}

/* Selected state */
.ci-assessment [data-row-radio]>input.wsf-field:checked+label.wsf-label,
.ci-assessment [data-row-checkbox]>input.wsf-field:checked+label.wsf-label {
    background: #f3f6ef !important;
    border-color: #739C49 !important;
}

.ci-assessment [data-row-radio]>input.wsf-field:checked+label.wsf-label::before {
    border-color: #739C49;
    background: #fff;
    box-shadow: inset 0 0 0 4.5px #739C49;
}

.ci-assessment [data-row-checkbox]>input.wsf-field:checked+label.wsf-label::before {
    border-color: #739C49;
    background: #739C49 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Keyboard focus ring */
.ci-assessment [data-row-radio]>input.wsf-field:focus-visible+label.wsf-label,
.ci-assessment [data-row-checkbox]>input.wsf-field:focus-visible+label.wsf-label {
    box-shadow: 0 0 0 3px rgba(51, 81, 108, 0.25);
}

/* ---- "Check every system you run" grid (8 checkboxes, 2-up / 3-up) ---- */
.ci-assessment [data-type="checkbox"] fieldset {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 10px !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ci-assessment [data-type="checkbox"] fieldset [data-row-checkbox] {
    margin: 0 !important;
}

/* ---- Optional text input + selects ---- */
.ci-assessment input[type="text"],
.ci-assessment input[type="email"],
.ci-assessment .wsf-field {
    border: 1px solid var(--ci-line-2) !important;
    border-radius: 8px !important;
    padding: 11px 13px !important;
    font-size: 14px !important;
    color: var(--ci-ink) !important;
    background: var(--ci-paper) !important;
}

.ci-assessment input:focus,
.ci-assessment .wsf-field:focus {
    outline: none !important;
    border-color: var(--ci-sage) !important;
    box-shadow: 0 0 0 2px var(--ci-sage-bg) !important;
}

/* Select2 (the two optional dropdowns) — match border + radius */
.ci-assessment .select2-container--default .select2-selection {
    border: 1px solid var(--ci-line-2) !important;
    border-radius: 8px !important;
    min-height: 44px !important;
}

.ci-assessment .select2-container--default .select2-selection__choice {
    background: var(--ci-sage-bg) !important;
    border-color: var(--ci-sage) !important;
    color: var(--ci-ink) !important;
}

/* ---- Help text under questions (the "(optional)" style notes) ---- */
.ci-assessment .wsf-help {
    font-size: 13px !important;
    color: #8a97a1 !important;
    margin-top: 5px !important;
}

/* ---- Submit button ---- */
.ci-assessment .wsf-button,
.ci-assessment button[type="submit"] {
    background: var(--ci-slate) !important;
    border: 0 !important;
    border-radius: 9px !important;
    padding: 15px 22px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: background .15s !important;
    width: 100% !important;
}

.ci-assessment .wsf-button:hover,
.ci-assessment button[type="submit"]:hover {
    background: #2a4257 !important;
}

/* ---- Required asterisk + validation ---- */
.ci-assessment .wsf-text-danger {
    color: #b4451f !important;
}

.ci-assessment .wsf-invalid-feedback {
    font-size: 13px !important;
}

/* ---- Spacing between questions ---- */
.ci-assessment .wsf-field-wrapper {
    margin-bottom: 26px !important;
}