/**
 * Sejal Multisite Learner Flow — Registration Form Styles
 * Styled to match: helpingpeople-academy.sejalsolutions.com
 *
 * Design system tokens sourced directly from the site's blank-slate CSS:
 *   --uw-blue:       #003366   (primary navy)
 *   --uw-gold:       #ffb81c   (accent gold)
 *   --uw-red:        #e31b23   (action / CTA red)
 *   Font:            Roboto (300, 400, 700, 900) — loaded by the site already
 *
 * Override any token on .smlf-register-wrap in your theme CSS to re-skin
 * this form for a different subsite without touching the plugin.
 */

/* -------------------------------------------------------------------------
   Tokens — mapped to the UW brand
-------------------------------------------------------------------------- */
.smlf-register-wrap {
	--smlf-font:                Roboto, sans-serif;
	--smlf-color-text:          #333333;
	--smlf-color-muted:         #6b7280;
	--smlf-color-label:         #374151;
	--smlf-color-border:        #d1d5db;
	--smlf-color-border-focus:  #003366;
	--smlf-color-bg:            #ffffff;
	--smlf-color-primary:       #003366;
	--smlf-color-primary-hover: #002244;
	--smlf-color-cta:           #e31b23;
	--smlf-color-cta-hover:     #c41820;
	--smlf-color-accent:        #ffb81c;
	--smlf-color-error-bg:      #fef2f2;
	--smlf-color-error-border:  #fca5a5;
	--smlf-color-error-text:    #991b1b;
	--smlf-focus-ring:          0 0 0 3px rgba(0, 51, 102, 0.18);
	--smlf-radius:              8px;
	--smlf-radius-lg:           16px;
	--smlf-radius-full:         9999px;
	--smlf-shadow-lg:           0 10px 25px rgba(0, 0, 0, 0.12);
	--smlf-input-height:        3rem;
}

/* -------------------------------------------------------------------------
   Outer wrapper — white card, rounded-2xl, shadow-2xl
-------------------------------------------------------------------------- */
.smlf-register-wrap {
	font-family:   var(--smlf-font);
	color:         var(--smlf-color-text);
	max-width:     520px;
	margin:        0 auto;
	background:    var(--smlf-color-bg);
	border-radius: var(--smlf-radius-lg);
	box-shadow:    var(--smlf-shadow-lg);
	overflow:      hidden;
}

/* UW red top accent bar — mirrors the border-t-4 card pattern on the site */
.smlf-register-wrap::before {
	content:    '';
	display:    block;
	height:     5px;
	background: var(--smlf-color-cta);
}

/* Shared horizontal padding for all child elements */
.smlf-register-form,
.smlf-errors,
.smlf-already-logged-in,
.smlf-login-prompt {
	padding-left:  2rem;
	padding-right: 2rem;
}

.smlf-register-form {
	padding-top:    1.75rem;
	padding-bottom: 1.5rem;
}

/* -------------------------------------------------------------------------
   Error messages
-------------------------------------------------------------------------- */
.smlf-errors {
	background:     var(--smlf-color-error-bg);
	border-left:    4px solid var(--smlf-color-cta);
	padding-top:    1rem;
	padding-bottom: 1rem;
	margin-bottom:  0;
}

.smlf-error-message {
	margin:      0;
	color:       var(--smlf-color-error-text);
	font-size:   0.9rem;
	line-height: 1.5;
}

.smlf-error-message + .smlf-error-message {
	margin-top: 0.4rem;
}

.smlf-error-message a {
	color:           var(--smlf-color-primary);
	font-weight:     700;
	text-decoration: underline;
}

.smlf-error-message a:hover {
	color: var(--smlf-color-cta);
}

/* -------------------------------------------------------------------------
   Fields
-------------------------------------------------------------------------- */
.smlf-field {
	margin-bottom: 1.1rem;
}

/* Matches site: text-sm font-bold text-gray-700 */
.smlf-field label {
	display:        block;
	font-size:      0.875rem;
	font-weight:    700;
	color:          var(--smlf-color-label);
	margin-bottom:  0.35rem;
}

.smlf-required {
	color:       var(--smlf-color-cta);
	margin-left: 2px;
}

/* Matches site inputs: px-4 py-3 rounded-lg border border-gray-300
   focus:ring-2 focus:ring-uw-blue focus:border-transparent */
.smlf-field input[type="text"],
.smlf-field input[type="email"],
.smlf-field input[type="password"] {
	display:            block;
	width:              100%;
	height:             var(--smlf-input-height);
	padding:            0 1rem;
	border:             1px solid var(--smlf-color-border);
	border-radius:      var(--smlf-radius);
	background:         var(--smlf-color-bg);
	color:              var(--smlf-color-text);
	font-family:        inherit;
	font-size:          1rem;
	font-weight:        400;
	box-sizing:         border-box;
	outline:            none;
	transition:         border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
}

.smlf-field input:focus {
	border-color: var(--smlf-color-border-focus);
	box-shadow:   var(--smlf-focus-ring);
}

.smlf-field-hint {
	display:    block;
	font-size:  0.78rem;
	color:      var(--smlf-color-muted);
	margin-top: 0.3rem;
}

/* -------------------------------------------------------------------------
   Password toggle
-------------------------------------------------------------------------- */
.smlf-password-wrap {
	position:    relative;
	display:     flex;
	align-items: center;
}

.smlf-password-wrap input[type="password"],
.smlf-password-wrap input[type="text"] {
	padding-right: 3rem;
}

.smlf-toggle-password {
	position:    absolute;
	right:       0.875rem;
	background:  none;
	border:      none;
	padding:     0;
	cursor:      pointer;
	color:       var(--smlf-color-muted);
	font-size:   1rem;
	line-height: 1;
	transition:  color 0.15s ease;
}

.smlf-toggle-password:hover,
.smlf-toggle-password:focus {
	color:   var(--smlf-color-primary);
	outline: none;
}

/* -------------------------------------------------------------------------
   Submit button
   Matches site: bg-uw-blue text-white rounded-lg font-black shadow-lg
   hover:bg-blue-900 transition btn-animate (scale + brightness)
-------------------------------------------------------------------------- */
.smlf-field--submit {
	margin-top: 1.5rem;
}

.smlf-submit-btn {
	display:            block;
	width:              100%;
	padding:            1rem 1.5rem;
	background:         var(--smlf-color-primary);
	color:              #ffffff;
	border:             none;
	border-radius:      var(--smlf-radius);
	font-family:        inherit;
	font-size:          1rem;
	font-weight:        900;
	cursor:             pointer;
	box-shadow:         0 4px 14px rgba(0, 51, 102, 0.28);
	transition:         background 0.25s cubic-bezier(0.4, 0, 0.2, 1),
	                    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
	                    filter 0.15s ease;
	-webkit-appearance: none;
}

.smlf-submit-btn:hover {
	background: var(--smlf-color-primary-hover);
	filter:     brightness(110%);
	transform:  scale(1.015);
}

.smlf-submit-btn:active {
	transform: scale(0.99);
}

.smlf-submit-btn:focus {
	outline:    none;
	box-shadow: var(--smlf-focus-ring);
}

.smlf-submit-btn:disabled {
	opacity:   0.6;
	cursor:    not-allowed;
	transform: none;
	filter:    none;
}

/* Gold divider below button — mirrors the w-16 h-1 bg-uw-gold decorative
   separator used throughout the site between sections */
.smlf-field--submit::after {
	content:       '';
	display:       block;
	width:         40px;
	height:        3px;
	background:    var(--smlf-color-accent);
	border-radius: var(--smlf-radius-full);
	margin:        1.5rem auto 0;
}

/* -------------------------------------------------------------------------
   Login prompt
-------------------------------------------------------------------------- */
.smlf-login-prompt {
	padding-top:    0;
	padding-bottom: 1.75rem;
	font-size:      0.875rem;
	color:          var(--smlf-color-muted);
	text-align:     center;
	margin:         0;
}

/* Red link matches the site's Log In button and Explore Programs links */
.smlf-login-prompt a {
	color:           var(--smlf-color-cta);
	font-weight:     700;
	text-decoration: none;
}

.smlf-login-prompt a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Already-logged-in state
-------------------------------------------------------------------------- */
.smlf-already-logged-in {
	padding:    1.75rem 2rem;
	font-size:  1rem;
	color:      var(--smlf-color-muted);
	text-align: center;
	margin:     0;
}

.smlf-already-logged-in a {
	color:           var(--smlf-color-primary);
	font-weight:     700;
	text-decoration: none;
}

.smlf-already-logged-in a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Mobile
-------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.smlf-register-wrap {
		border-radius: 0;
		box-shadow:    none;
	}

	.smlf-register-form,
	.smlf-errors,
	.smlf-already-logged-in,
	.smlf-login-prompt {
		padding-left:  1.25rem;
		padding-right: 1.25rem;
	}
}