/* ==========================================================
   NACS Show - Built-in Kentico Form Widget Styles (XbK)
   Classes added via Convenience/Configuration/FormWidgetStyleModule.cs
   Matches the NACS Show 2026 Figma design system
   Reference: Figma node 10489-60370 (21. Forms)
   ========================================================== */

/* ----------------------------------------------------------
   Local tokens (not present in NACSShow2026Tokens.css)
   ---------------------------------------------------------- */
.nacs-form-widget {
    --xbk-form-input-bg: #F1F1F1;
    --xbk-form-error: #FF1644;
    --xbk-form-text: #000000;
    --xbk-form-radius-sm: 4px;
    --xbk-form-radius-md: 8px;
    --xbk-form-radius-pill: 360px;
    --xbk-form-input-padding-y: 12px;
    --xbk-form-input-padding-x: 24px;
    --xbk-form-row-gap: 32px;
    --xbk-form-field-gap: 16px;
}

/* ----------------------------------------------------------
   Outer wrapper
   ---------------------------------------------------------- */
.nacs-form-widget {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    font-family: var(--nacs-font-gotham);
    color: var(--xbk-form-text);
    box-sizing: border-box;
}

.nacs-form-widget *,
.nacs-form-widget *::before,
.nacs-form-widget *::after {
    box-sizing: border-box;
}

/* ----------------------------------------------------------
   <form> element
   ---------------------------------------------------------- */
.nacs-form-widget .nacs-form {
    display: flex;
    flex-direction: column;
    gap: var(--xbk-form-row-gap);
}

/* ----------------------------------------------------------
   Each field row
   ---------------------------------------------------------- */
.nacs-form-widget .nacs-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--xbk-form-field-gap);
    margin: 0;
    width: 100%;
}

/* ----------------------------------------------------------
   Label wrapper + label
   ---------------------------------------------------------- */
.nacs-form-widget .nacs-form-label {
    margin: 0;
}

.nacs-form-widget .nacs-label {
    display: block;
    font-family: var(--nacs-font-gotham);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    color: var(--xbk-form-text);
}

/* Required asterisk */
.nacs-form-widget .nacs-label .required-mark,
.nacs-form-widget .nacs-label .field-required {
    color: var(--xbk-form-error);
    margin-left: 2px;
}

/* ----------------------------------------------------------
   Editor + component wrappers
   ---------------------------------------------------------- */
.nacs-form-widget .nacs-form-editor,
.nacs-form-widget .nacs-form-component {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* ----------------------------------------------------------
   Inputs / textarea (default filled grey style)
   ---------------------------------------------------------- */
.nacs-form-widget .form-control,
.nacs-form-widget input[type="text"],
.nacs-form-widget input[type="email"],
.nacs-form-widget input[type="tel"],
.nacs-form-widget input[type="url"],
.nacs-form-widget input[type="number"],
.nacs-form-widget input[type="password"],
.nacs-form-widget input[type="search"],
.nacs-form-widget input[type="date"],
.nacs-form-widget textarea {
    width: 100%;
    height: 48px;
    padding: var(--xbk-form-input-padding-y) var(--xbk-form-input-padding-x);
    background-color: var(--xbk-form-input-bg);
    border: 2px solid transparent;
    border-radius: var(--xbk-form-radius-sm);
    font-family: var(--nacs-font-gotham);
    font-weight: 325;
    font-size: 16px;
    line-height: 18px;
    color: var(--xbk-form-text);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.nacs-form-widget textarea {
    height: 88px;
    min-height: 88px;
    padding: 16px var(--xbk-form-input-padding-x);
    border-radius: var(--xbk-form-radius-md);
    line-height: 22px;
    font-size: 18px;
    resize: vertical;
}

.nacs-form-widget .form-control::placeholder,
.nacs-form-widget input::placeholder,
.nacs-form-widget textarea::placeholder {
    color: var(--xbk-form-text);
    opacity: 1;
}

/* Focus state */
.nacs-form-widget .form-control:focus,
.nacs-form-widget input:focus,
.nacs-form-widget textarea:focus,
.nacs-form-widget select:focus {
    outline: none;
    border-color: var(--nacs-color-navy);
    box-shadow: 0 0 0 3px rgba(0, 32, 91, 0.12);
}

/* Disabled state */
.nacs-form-widget .form-control:disabled,
.nacs-form-widget input:disabled,
.nacs-form-widget textarea:disabled,
.nacs-form-widget select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ----------------------------------------------------------
   Select dropdown (white, 2px grey border, custom arrow)
   ---------------------------------------------------------- */
.nacs-form-widget select.form-control,
.nacs-form-widget select {
    width: 100%;
    height: 48px;
    padding: var(--xbk-form-input-padding-y) 56px var(--xbk-form-input-padding-y) var(--xbk-form-input-padding-x);
    background-color: var(--nacs-color-white);
    border: 2px solid var(--nacs-color-grey);
    border-radius: var(--xbk-form-radius-md);
    font-family: var(--nacs-font-gotham);
    font-weight: 325;
    font-size: 18px;
    line-height: 24px;
    color: var(--xbk-form-text);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 2.667C8.65 2.667 2.667 8.65 2.667 16S8.65 29.333 16 29.333 29.333 23.35 29.333 16 23.35 2.667 16 2.667Zm4.4 12.333-3.693 3.693c-.187.187-.44.293-.707.293a1 1 0 0 1-.707-.293L11.6 15a1.005 1.005 0 0 1 0-1.413 1.005 1.005 0 0 1 1.413 0L16 16.587l2.987-2.987a1.005 1.005 0 0 1 1.413 0 1.005 1.005 0 0 1 0 1.4Z' fill='%2300205B'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 24px 24px;
    cursor: pointer;
}

/* ----------------------------------------------------------
   Checkbox / radio
   ---------------------------------------------------------- */
.nacs-form-widget input[type="checkbox"],
.nacs-form-widget input[type="radio"] {
    width: 24px;
    height: 24px;
    margin: 0 12px 0 0;
    accent-color: var(--nacs-color-green);
    border: 2px solid var(--nacs-color-grey);
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
    appearance: auto;
    flex-shrink: 0;
}

.nacs-form-widget input[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 3px rgba(0, 168, 45, 0.18);
}

/* Checkbox / radio labels */
.nacs-form-widget .nacs-form-component label {
    display: inline-flex;
    align-items: center;
    font-family: var(--nacs-font-gotham);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--xbk-form-text);
    cursor: pointer;
    margin: 0;
}

/* Vertical list of checkboxes/radios */
.nacs-form-widget .nacs-form-component .form-check {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Inline horizontal list (e.g. Yes / No) */
.nacs-form-widget .nacs-form-component .ktc-radio-list,
.nacs-form-widget .nacs-form-component .ktc-checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 42px;
    align-items: center;
}

.nacs-form-widget .nacs-form-component .ktc-radio-list label,
.nacs-form-widget .nacs-form-component .ktc-checkbox-list label {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

/* ----------------------------------------------------------
   Explanation / hint text under fields
   ---------------------------------------------------------- */
.nacs-form-widget .nacs-form-explanation {
    margin: 0;
    font-family: var(--nacs-font-gotham);
    font-weight: 325;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--nacs-color-grey-mid);
}

/* ----------------------------------------------------------
   Validation / error states
   ---------------------------------------------------------- */
.nacs-form-widget .input-validation-error,
.nacs-form-widget .form-control.input-validation-error,
.nacs-form-widget input.input-validation-error,
.nacs-form-widget textarea.input-validation-error,
.nacs-form-widget select.input-validation-error {
    border: 2px solid var(--xbk-form-error);
    background-color: var(--nacs-color-white);
}

.nacs-form-widget .field-validation-error {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--nacs-font-gotham);
    font-weight: 325;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--xbk-form-error);
}

.nacs-form-widget .field-validation-error::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 .583A6.421 6.421 0 0 0 .583 7 6.421 6.421 0 0 0 7 13.417 6.421 6.421 0 0 0 13.417 7 6.421 6.421 0 0 0 7 .583Zm-.525 4.084a.526.526 0 1 1 1.05 0v3.5a.526.526 0 1 1-1.05 0v-3.5ZM7.642 9.997a.555.555 0 0 1-.117.169.555.555 0 0 1-.169.117.484.484 0 0 1-.198.046.484.484 0 0 1-.198-.046.555.555 0 0 1-.169-.117.555.555 0 0 1-.117-.169.484.484 0 0 1-.046-.198.494.494 0 0 1 .046-.199c.029-.064.07-.122.117-.169a.555.555 0 0 1 .169-.117.534.534 0 0 1 .396 0c.064.027.121.066.169.117.046.047.087.105.117.169.029.063.046.13.046.199 0 .068-.017.135-.046.198Z' fill='%23FF1644'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 14px 14px;
    flex-shrink: 0;
}

.nacs-form-widget .validation-summary-errors {
    margin: 0 0 var(--xbk-form-field-gap);
    padding: 16px 24px;
    background-color: var(--nacs-color-white);
    border: 2px solid var(--xbk-form-error);
    border-radius: var(--xbk-form-radius-sm);
    color: var(--xbk-form-error);
    font-family: var(--nacs-font-gotham);
    font-size: 14px;
    line-height: 20px;
}

.nacs-form-widget .validation-summary-errors ul {
    margin: 0;
    padding-left: 20px;
}

/* ----------------------------------------------------------
   Submit button (overrides the .button-white class set by
   FormWidgetStyleModule, scoped to NACSShow forms only)
   ---------------------------------------------------------- */
.nacs-form-widget .button-white,
.nacs-form-widget input[type="submit"],
.nacs-form-widget button[type="submit"],
.nacs-form-widget form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-height: 48px;
    margin: 0;
    margin-left: 0;
    padding: 14px 32px;
    background: var(--nacs-color-yellow);
    background-image: none;
    color: var(--nacs-color-navy);
    border: 2px solid var(--nacs-color-yellow);
    border-radius: var(--xbk-form-radius-pill);
    font-family: var(--nacs-font-gotham);
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.nacs-form-widget .button-white::after,
.nacs-form-widget input[type="submit"]::after,
.nacs-form-widget button[type="submit"]::after,
.nacs-form-widget form input[type="submit"]::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13.26 4.24 6.36 6.35a2 2 0 0 1 0 2.82l-6.36 6.35a1 1 0 0 1-1.41-1.41L17.17 13H4a1 1 0 0 1 0-2h13.17l-5.32-5.35a1 1 0 1 1 1.41-1.41Z' fill='%2300205B'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
    color: transparent;
    font-family: inherit;
    font-weight: inherit;
}

.nacs-form-widget .button-white:hover,
.nacs-form-widget input[type="submit"]:hover,
.nacs-form-widget button[type="submit"]:hover,
.nacs-form-widget form input[type="submit"]:hover {
    background: var(--nacs-color-navy);
    color: var(--nacs-color-yellow);
    border-color: var(--nacs-color-navy);
    text-decoration: none;
}

.nacs-form-widget .button-white:hover::after,
.nacs-form-widget input[type="submit"]:hover::after,
.nacs-form-widget button[type="submit"]:hover::after,
.nacs-form-widget form input[type="submit"]:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m13.26 4.24 6.36 6.35a2 2 0 0 1 0 2.82l-6.36 6.35a1 1 0 0 1-1.41-1.41L17.17 13H4a1 1 0 0 1 0-2h13.17l-5.32-5.35a1 1 0 1 1 1.41-1.41Z' fill='%23FAE100'/%3E%3C/svg%3E");
}

.nacs-form-widget .button-white:focus-visible,
.nacs-form-widget input[type="submit"]:focus-visible,
.nacs-form-widget button[type="submit"]:focus-visible,
.nacs-form-widget form input[type="submit"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 32, 91, 0.25);
}

/* ----------------------------------------------------------
   reCAPTCHA / Security validation block
   ---------------------------------------------------------- */
.nacs-form-widget .g-recaptcha,
.nacs-form-widget .ktc-captcha {
    margin: 0;
}

/* ----------------------------------------------------------
   Responsive (mobile)
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .nacs-form-widget {
        --xbk-form-row-gap: 24px;
        --xbk-form-input-padding-x: 16px;
        padding: 0 var(--nacs-gutter, 20px);
    }

    .nacs-form-widget .form-control,
    .nacs-form-widget input[type="text"],
    .nacs-form-widget input[type="email"],
    .nacs-form-widget input[type="tel"],
    .nacs-form-widget input[type="url"],
    .nacs-form-widget input[type="number"],
    .nacs-form-widget input[type="password"],
    .nacs-form-widget input[type="search"],
    .nacs-form-widget input[type="date"],
    .nacs-form-widget select.form-control,
    .nacs-form-widget select {
        font-size: 16px; /* prevents iOS zoom-on-focus */
    }
}

/* ==========================================================
   Legacy Kentico admin-style form selectors (kept for
   backward compatibility with older custom forms)
   ========================================================== */
.form-field {
    display: flex;
    padding: .5rem;
    margin-bottom: .5rem;
    align-items: center;
}

.form-field label.control-label {
    width: 150px;
    margin-right: 10px;
    text-align: right;
    font-weight: bold;
}

.form-field .editing-form-control-nested-control {
    flex: 1;
}

.form-field .editing-form-control-nested-control .form-control {
    width: auto;
    padding: .5rem;
    border: 1px solid #ccc;
}