/* Sign-up for the Softwareshaker School (includes/school-signup.php). The layout (intro left, card right) is the
   theme's .ss_demo_form of the page Demo webformulier (css/pages/detail.css); the fields as in the website's forms. */

.ss_signup .ss_demo_form_note a {color: var(--textColorRed); text-decoration: underline; text-underline-offset: 2px;}
.ss_signup .ss_demo_form_card .ss_signup_title {margin: 0 0 6px; font-size: 26px; line-height: 1.25;}
.ss_signup_lead {margin: 0 0 28px; color: var(--textColortwo); font-size: 15px; line-height: 1.5;}
.ss_signup_field {position: relative; margin: 0 0 22px;}
.ss_signup_field label {position: absolute; top: -9px; left: 10px; z-index: 1; padding: 0 5px; background: #fff; color: #222; font-family: var(--font-bold); font-weight: var(--font-weight-bold); font-size: 13px; line-height: 18px;}
.ss_signup_field label span {color: var(--textColorRed);}
.ss_signup_field input {box-sizing: border-box; display: block; width: 100%; height: 50px; margin: 0; padding: 0 14px; border: 1px solid #d6d6db; border-radius: 6px; background: #fff; color: #111214; font-size: 16px; transition: border-color .15s, box-shadow .15s;}
.ss_signup_field input:focus {outline: none; border-color: var(--backgrondColorRed); box-shadow: 0 0 0 3px rgba(211, 32, 32, .15);}
.ss_signup_field input[aria-invalid="true"] {border-color: var(--backgrondColorRed);}
.ss_signup_trap {position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;}
.ss_signup_error {margin: -6px 0 18px; color: var(--textColorRed); font-size: 14px; line-height: 1.5;}
.ss_signup_button {box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin: 6px 0 0; padding: 0 20px; border: 0; border-radius: 6px; background: var(--backgrondColorRed); box-shadow: 0 14px 28px rgba(211, 32, 32, .22); color: #fff; font-family: var(--font-bold); font-weight: var(--font-weight-bold); font-size: 15px; text-decoration: none; cursor: pointer; transition: filter .15s;}
.ss_signup_button::after {content: "\2192"; font-size: 16px; line-height: 1;}
.ss_signup_button:hover {filter: brightness(.94); color: #fff;}
.ss_signup_button:focus-visible {outline: 2px solid #111214; outline-offset: 2px;}
.ss_signup_button[disabled] {opacity: .6; cursor: default;}
.ss_signup_button.is-loading {opacity: .85;}
.ss_signup_button.is-loading::after {content: none;}
.ss_signup_button.is-loading::before {content: ""; flex: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: ss-signup-spin .7s linear infinite;}
@keyframes ss-signup-spin {to {transform: rotate(360deg);}}
@media (prefers-reduced-motion: reduce) {.ss_signup_button.is-loading::before {animation-duration: 2s;}}
.ss_signup_small {margin: 16px 0 0; color: var(--textColortwo); font-size: 13px; line-height: 1.5; text-align: center;}
.ss_signup_small a {color: inherit; text-decoration: underline; text-underline-offset: 2px;}
/* Neater (user 2026-10-22 "maak dit ook netter"): in line with the page title, a smaller intro heading, and the
   answer as a centred confirmation with the three steps to sign in */
.detail_section .wrapper:has(.ss_demo_form.ss_signup) {max-width: 1280px;} /* the width of the page title above it */
.ss_signup .ss_demo_form_intro h2 {font-size: 26px; line-height: 1.25;}
.ss_signup .ss_demo_form_intro > p {font-size: 16px; line-height: 1.6;}
.ss_signup_done {padding: 6px 0 0; text-align: center;}
.ss_signup_check {display: block; width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%; background: var(--backgrondColorRed) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M5.2 9.2 7.7 11.6 12.8 6.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 52px no-repeat; box-shadow: 0 0 0 8px rgba(211, 32, 32, .1);}
.ss_signup .ss_signup_done .ss_signup_title {margin: 0 0 8px; font-size: 26px; line-height: 1.25;}
.ss_signup_text {margin: 0 0 18px; color: var(--textColor); font-size: 16px; line-height: 1.6;}
.ss_signup_text strong {color: #111214; overflow-wrap: anywhere;}
.ss_signup_steps {display: grid; gap: 12px; margin: 0 0 24px; padding: 18px 20px; border-radius: 12px; background: #f6f6f7; list-style: none; text-align: left; counter-reset: ss-signup-step;}
.ss_signup_steps li {display: flex; align-items: center; gap: 12px; margin: 0; color: var(--textColor); font-size: 15px; line-height: 1.45; counter-increment: ss-signup-step;}
.ss_signup_steps li::before {content: counter(ss-signup-step); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid #e3e3e6; border-radius: 50%; background: #fff; color: var(--textColorRed); font-family: var(--font-bold); font-weight: var(--font-weight-bold); font-size: 13px;}
.ss_signup_steps strong {color: #111214;}