/* Site forms (inc/forms.php, strive-forms.js). Builds on the ss-* form styles
   the stand-alone form pages already carry; these cover the extra field types,
   errors and the thank-you message, for every form on the site. */

.sf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* "Are you?" forms other than the chosen one carry hidden, but page CSS gives
   .sv-form display:flex, which would show all four at once. */
.sv-form[hidden] { display: none !important; }

.strive-form .sf-section { margin: 2rem 0 1rem; font-size: 1.2rem; color: #6e00fc; }
.strive-form .ss-field input[type=url],
.strive-form .ss-field input[type=text],
.strive-form .ss-field input[type=email],
.strive-form .ss-field input[type=tel] {
	display: block; width: 100%; height: 44px; border: 1px solid #6e00fc; border-radius: 10px;
	background: #fff; color: #371b68; padding: 0 .9rem; font: inherit;
}
.strive-form .ss-field textarea {
	display: block; width: 100%; min-height: 110px; border: 1px solid #6e00fc; border-radius: 10px;
	background: #fff; color: #371b68; padding: .7rem .9rem; font: inherit; resize: vertical;
}
.strive-form .ss-field input[type=file] { display: block; font: inherit; margin-top: .25rem; }
.strive-form .ss-field input:focus-visible,
.strive-form .ss-field textarea:focus-visible { outline: 2px solid #dc0fed; outline-offset: 2px; }

.strive-form .sf-choices { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.strive-form .sf-choices legend { font-weight: 500; font-size: .95rem; margin-bottom: .5rem; float: none; width: auto; padding: 0; line-height: 1.4; }
.strive-form .sf-choice { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 .4rem; font-size: .95rem; line-height: 1.4; cursor: pointer; }
.strive-form .sf-choice input { margin-top: .25rem; flex: none; accent-color: #6e00fc; }
.strive-form .sf-help { display: block; color: #6b6380; font-size: .85rem; margin: -.1rem 0 .45rem; }

.sf-error { color: #c4002f; font-size: .9rem; margin: .4rem 0 .6rem; }
.sf-form-error { text-align: center; }
form [aria-invalid="true"] { border-color: #c4002f !important; }

.sf-thanks {
	background: #f7f3ff; border-radius: 12px; padding: 1.5rem 1.75rem; margin: 1.5rem 0;
	color: #371b68; font-size: 1.1rem; font-weight: 500; text-align: center;
}
.sf-thanks:focus { outline: none; }

button[data-sending], form[data-sending] [type=submit] { opacity: .6; cursor: progress; }

/* The contact-tab forms sit on the dark purple card: dark red wouldn't be readable there. */
.ct-form .sf-error { color: #ffc2d1; font-weight: 700; margin: .35rem 0 0; }
.ct-form [aria-invalid="true"] { border-color: #ffc2d1 !important; box-shadow: 0 0 0 2px #ffc2d1; }

/* "Get in touch" forms (sv-*): the message box and errors, matching the inputs. */
.sv-form textarea {
	display: block; width: 100%; min-height: 110px; border: 1px solid #6e00fc; border-radius: 20px;
	background: #fff; color: #371b68; padding: .6rem .9rem; font: inherit; font-size: .9rem; resize: vertical; outline: 0;
}
.sv-form textarea::placeholder { color: #6e00fc; opacity: 1; }
.sv-form .sf-error { color: #ffc2d1; font-weight: 700; font-size: .85rem; margin: .3rem 0 0; }
.sv-form .sf-form-error, .sv-form > .sf-error { width: 100%; padding: 0 .75rem; }
.sv-form [aria-invalid="true"] { border-color: #ffc2d1 !important; box-shadow: 0 0 0 2px #ffc2d1; }
.sv-git .sf-thanks { margin: 1.5rem 0 0; }
.sv-form .sv-drop a { color: inherit; text-decoration: underline; }

/* [strive_form] base look, so a shortcode form is complete on any page (the
   stand-alone form pages' own ss-* rules say the same thing where present). */
.strive-form { margin-top: 1.5rem; }
.strive-form .ss-field { margin-bottom: 1.25rem; }
.strive-form .ss-field > label { display: block; font-weight: 500; margin-bottom: .4rem; font-size: .95rem; }
.strive-form .req { color: #dc0fed; }
.strive-form .ss-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; line-height: 1.4; margin: 1.5rem 0; }
.strive-form .ss-check input { margin-top: .3rem; flex: none; accent-color: #6e00fc; }
.strive-form .ss-check a { text-decoration: underline; }
.strive-form .ss-submitrow { text-align: center; }
.strive-form .ss-submitbtn {
	border: 1px solid #6e00fc; background: #6e00fc; color: #fff; border-radius: 50px; padding: .65rem 2.5rem;
	font: inherit; font-size: 1rem; cursor: pointer; opacity: 1; transition: all .3s ease;
}
.strive-form .ss-submitbtn:hover { background: #371b68; border-color: #371b68; }

/* Footer newsletter (dark purple footer). */
.newsletter-form .sf-error { color: #ffc2d1; font-weight: 700; font-size: .85rem; margin: .3rem 0 0; }
.newsletter-form [aria-invalid="true"] { border-color: #ffc2d1 !important; box-shadow: 0 0 0 2px #ffc2d1; }
.newsletter .sf-thanks, .sv-news .sf-thanks { font-size: 1rem; padding: 1rem 1.25rem; margin: .75rem 0 0; text-align: left; }

.sf-thanks .sf-download { display: inline-block; margin-top: .9rem; border: 1px solid #6e00fc; background: #6e00fc; color: #fff; border-radius: 50px; padding: .55rem 2rem; text-decoration: none; font-weight: 500; }
.sf-thanks .sf-download:hover { background: #371b68; border-color: #371b68; }

/* Gated-download pop-up (strive_form_request_modal). */
.sf-modal { border: 0; border-radius: 16px; padding: 2rem 2rem 1.5rem; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); color: #371b68; box-shadow: 0 20px 60px rgba(55,27,104,.35); }
.sf-modal::backdrop { background: rgba(55,27,104,.6); }
.sf-modal h3 { margin: 0 2rem 1rem 0; color: #6e00fc; font-size: 1.5rem; }
.sf-modal .sf-modal-close { position: absolute; top: .75rem; right: 1rem; background: none; border: 0; font-size: 2rem; line-height: 1; color: #6e00fc; cursor: pointer; }
.sf-modal .strive-form { margin-top: .5rem; }