/* ==========================================================
   Built-in Kentico Form Widget - Custom Styles
   Classes added via FormWidgetStyleModule.cs
   Matches the FormDownloadReport visual style
   ========================================================== */

/* ---- Outer wrapper ---- */
.nacs-form-widget {
    background-color: #DBEAB9;
    border-radius: 18px;
    padding: 2rem;
}

/* ---- <form> element ---- */
.nacs-form {
    display: flex;
    flex-direction: column;
}

/* ---- Each field row ---- */
.nacs-form-field {
    margin-bottom: 1rem;
}

/* ---- Label wrapper ---- */
.nacs-form-label {
    margin-bottom: 0.375rem;
}

/* ---- Label element ---- */
.nacs-label {
    font-weight: 500;
    display: block;
}

/* ---- Editor wrapper (input + explanation) ---- */
.nacs-form-editor {
    display: flex;
    flex-direction: column;
}

/* ---- Component wrapper (input + validation) ---- */
.nacs-form-component {
    display: flex;
    flex-direction: column;
}

/* ---- Inputs, selects, textareas ---- */
.nacs-form-widget .form-control {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    background-color: #fff;
    font-size: 1rem;
    line-height: 1.5;
}

.nacs-form-widget .form-control:focus {
    border-color: #0053A5;
    box-shadow: 0 0 0 0.2rem rgba(0, 83, 165, 0.15);
    outline: none;
}


.nacs-form-widget input[type="checkbox"],
.nacs-form-widget input[type="radio"],
.nacs-form-widget input.form-control[type="checkbox"],
.nacs-form-widget input.form-control[type="radio"] {
    display: inline-block;
    width: 1.125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    padding: 0;
    accent-color: #0053A5;
    background-color: #fff;
    border: 1px solid #adb5bd;
    border-radius: 0.25rem;
    box-shadow: none;
    cursor: pointer;
    vertical-align: middle;
    appearance: auto;
    flex: 0 0 auto;
}

.nacs-form-widget input[type="radio"],
.nacs-form-widget input.form-control[type="radio"] {
    border-radius: 50%;
}

.nacs-form-widget input[type="checkbox"]:focus,
.nacs-form-widget input[type="radio"]:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 83, 165, 0.15);
}


.nacs-form-widget .nacs-form-component .ktc-checkbox,
.nacs-form-widget .nacs-form-component .ktc-radio {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Nudge the input down so it lines up with the first line of multi-line labels */
.nacs-form-widget .nacs-form-component .ktc-checkbox > input[type="checkbox"],
.nacs-form-widget .nacs-form-component .ktc-radio > input[type="radio"] {
    margin-top: 0.2rem;
}

/* ---- Checkbox / radio labels ---- */
.nacs-form-widget .nacs-form-component label {
    display: inline-flex;
    align-items: center;
    font-weight: 400;
    cursor: pointer;
    margin-bottom: 0.375rem;
}

.nacs-form-widget .nacs-form-component .ktc-checkbox > label,
.nacs-form-widget .nacs-form-component .ktc-radio > label {
    display: inline-block;
    align-items: initial;
    flex: 1 1 auto;
    margin: 0;
    line-height: 1.4;
}

/* ---- Checkbox / radio group wrapper ---- */
.nacs-form-widget .nacs-form-component .form-check {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* ---- Radio / checkbox list: column count adapts to the form's own width,
       not the viewport, so a narrow form column gets one column even on desktop. */
.nacs-form-widget .nacs-form-component .ktc-radio-list,
.nacs-form-widget .nacs-form-component .ktc-checkbox-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    row-gap: 0.75rem;
    column-gap: 1.25rem;
    align-items: start;
}

/* ---- Select dropdown custom arrow ---- */
.nacs-form-widget select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.00021 7.0129C5.74688 7.0129 5.49354 6.91957 5.29354 6.71957L0.586875 2.0129C0.200208 1.62624 0.200208 0.986237 0.586875 0.59957C0.973542 0.212904 1.61354 0.212904 2.00021 0.59957L6.00021 4.59957L10.0002 0.59957C10.3869 0.212904 11.0269 0.212904 11.4135 0.59957C11.8002 0.986237 11.8002 1.62624 11.4135 2.0129L6.70688 6.71957C6.50688 6.91957 6.25354 7.0129 6.00021 7.0129Z' fill='%230053A5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 12px;
    padding-right: 2.25rem;
}

/* ---- Submit button (uses .button-white from custom.css, applied via FormWidgetStyleModule) ---- */
.nacs-form-widget .button-white {
    margin-top: 1rem;
    width: fit-content;
}

/* ---- Explanation / help text below fields ---- */
.nacs-form-explanation {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* ---- Validation errors ---- */
.nacs-form-widget .field-validation-error {
    color: #DC241F;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

.nacs-form-widget .validation-summary-errors {
    color: #DC241F;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background-color: #fff;
    border-radius: 0.375rem;
    border: 1px solid #DC241F;
}