:root {
	--was-primary: #5b21b6;
	--was-radius: 10px;
	--was-input-bg: #fafafc;
	--was-input-border: #e2e2e8;
	--was-panel-bg: #ffffff;
	--was-text-color: #1a1a2e;
	--was-input-text-color: #1a1a2e;
	--was-label-color: #999999;
	--was-btn-text: #ffffff;
	--was-overlay-color: rgba(15,15,20,0.55);
	--was-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--was-modal-width: 420px;
	--was-sidebar-width: 400px;
	--was-inline-width: 480px;
	--was-panel-padding: 36px 36px 36px 36px;
	--was-field-spacing: 20px;
	--was-input-padding-y: 14px;
	--was-input-padding-x: 12px;
	--was-input-padding: 14px 12px 14px 12px;
	--was-form-margin: 0px 0px 0px 0px;
	--was-button-radius: 6px;
	--was-shadow: 0 20px 60px rgba(0,0,0,0.25);
	--was-panel-border: 0px solid transparent;
	--was-input-border-width: 1.5px;
	--was-overlay-blur: 3px;
	--was-title-size: 22px;
	--was-label-size: 15px;
	--was-button-size: 15.5px;
	--was-button-weight: 700;
	--was-link-color: #5b21b6;
}

.was-overlay {
	position: fixed;
	inset: 0;
	background: var(--was-overlay-color);
	backdrop-filter: blur(var(--was-overlay-blur));
	z-index: 99998;
	display: none;
	opacity: 0;
	transition: opacity .25s ease;
}
.was-overlay.was-active { display: block; opacity: 1; }

/* Floating trigger button */
.was-floating-btn {
	position: fixed;
	bottom: 28px;
	z-index: 99997;
	background: linear-gradient(135deg, var(--was-primary), #8b5cf6);
	color: var(--was-btn-text);
	border: none;
	padding: 14px 22px;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(91, 33, 182, 0.35);
	transition: transform .2s ease, box-shadow .2s ease;
	font-family: var(--was-font);
}
.was-floating-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(91, 33, 182, 0.45); }
.was-pos-right { right: 28px; }
.was-pos-left { left: 28px; }

.was-open-btn.was-btn-primary { display: inline-block; }

/* Panel base */
.was-panel {
	position: fixed;
	z-index: 99999;
	background: var(--was-panel-bg);
	box-shadow: var(--was-shadow);
	border: var(--was-panel-border);
	padding: var(--was-panel-padding);
	display: none;
	font-family: var(--was-font);
	color: var(--was-text-color);
	max-height: 92vh;
	overflow-y: auto;
	box-sizing: border-box;
}
.was-panel.was-active { display: block; }

.was-mode-modal {
	top: 50%; left: 50%;
	width: var(--was-modal-width);
	max-width: 92vw;
	border-radius: var(--was-radius);
	margin: var(--was-form-margin);
	opacity: 0;
	transition: opacity .3s ease, transform .3s ease;
}
/* Entrance effects for modal mode */
.was-mode-modal.was-effect-fade { transform: translate(-50%, -50%); }
.was-mode-modal.was-effect-fade.was-active { opacity: 1; transform: translate(-50%, -50%); }

.was-mode-modal.was-effect-zoom { transform: translate(-50%, -50%) scale(0.85); }
.was-mode-modal.was-effect-zoom.was-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.was-mode-modal.was-effect-slide-up { transform: translate(-50%, -30%); }
.was-mode-modal.was-effect-slide-up.was-active { opacity: 1; transform: translate(-50%, -50%); }

.was-mode-modal.was-effect-slide-down { transform: translate(-50%, -70%); }
.was-mode-modal.was-effect-slide-down.was-active { opacity: 1; transform: translate(-50%, -50%); }

.was-mode-sidebar {
	top: 0;
	height: 100%;
	width: var(--was-sidebar-width);
	max-width: 90vw;
	transition: transform .3s ease;
	border-radius: 0;
	max-height: 100vh;
}
.was-mode-sidebar.was-sidebar-right { right: 0; transform: translateX(100%); }
.was-mode-sidebar.was-sidebar-right.was-active { transform: translateX(0); }
.was-mode-sidebar.was-sidebar-left { left: 0; transform: translateX(-100%); }
.was-mode-sidebar.was-sidebar-left.was-active { transform: translateX(0); }

/* Inline mode: renders as a normal block in place of the shortcode, no fixed positioning */
.was-mode-inline {
	position: static;
	width: var(--was-inline-width);
	max-width: 100%;
	border-radius: var(--was-radius);
	margin: var(--was-form-margin);
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.was-mode-inline .was-close-btn { display: none; }

.was-back-btn {
	background: none;
	border: none;
	color: var(--was-link-color);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	margin-bottom: 14px;
	display: inline-block;
}
.was-back-btn:hover { text-decoration: underline; }

.was-close-btn {
	position: absolute;
	top: 14px; right: 18px;
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #888;
}
.was-close-btn:hover { color: #222; }

.was-logo { display: block; max-height: 40px; margin: 0 auto 18px; }

.was-tabs {
	display: flex;
	margin-bottom: 24px;
	border-bottom: 2px solid rgba(0,0,0,0.06);
}
.was-tab {
	flex: 1;
	background: none;
	border: none;
	padding: 10px 0;
	font-size: 15px;
	font-weight: 600;
	color: #999;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color .2s ease, border-color .2s ease;
	font-family: var(--was-font);
}
.was-tab.active { color: var(--was-primary); border-color: var(--was-primary); }

.was-form { display: none; }
.was-view.active { display: block; }

.was-title { font-size: var(--was-title-size); font-weight: 700; margin: 0 0 6px; color: var(--was-text-color); }
.was-sub { font-size: 13px; color: #777; margin-bottom: var(--was-field-spacing); }

.was-field { position: relative; margin-bottom: var(--was-field-spacing); }
.was-field input[type="text"],
.was-field input[type="email"],
.was-field input[type="tel"],
.was-field input[type="number"],
.was-field input[type="password"] {
	width: 100%;
	padding: var(--was-input-padding);
	border: var(--was-input-border-width) solid var(--was-input-border);
	border-radius: calc(var(--was-radius) * 0.6);
	font-size: var(--was-label-size);
	box-sizing: border-box;
	transition: border-color .2s ease;
	background: var(--was-input-bg);
	font-family: var(--was-font);
	color: var(--was-input-text-color);
}
.was-field input:focus { outline: none; border-color: var(--was-primary); }
.was-field label {
	position: absolute;
	left: calc(var(--was-input-padding-x) + 1px);
	top: var(--was-input-padding-y);
	font-size: var(--was-label-size);
	color: var(--was-label-color);
	pointer-events: none;
	transition: all .18s ease;
	background: transparent;
	padding: 0 4px;
}
.was-field input:focus + label,
.was-field input:not(:placeholder-shown) + label {
	top: -8px;
	left: 9px;
	font-size: 11.5px;
	color: var(--was-primary);
	background: var(--was-panel-bg);
	font-weight: 600;
}

/* File upload field */
.was-field-file { margin-bottom: var(--was-field-spacing); }
.was-file-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--was-text-color); }
.was-field-file input[type="file"] {
	width: 100%;
	padding: 10px;
	border: var(--was-input-border-width) dashed var(--was-input-border);
	border-radius: calc(var(--was-radius) * 0.6);
	background: var(--was-input-bg);
	font-size: 13px;
}

/* Checkbox / Radio choice fields */
.was-field-choice { margin-bottom: calc(var(--was-field-spacing) * 0.9); }
.was-choice-title { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--was-text-color); }
.was-choice-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13.5px;
	margin-bottom: 8px;
	cursor: pointer;
	color: var(--was-text-color);
}
.was-choice-item input { margin-top: 3px; accent-color: var(--was-primary); }
.was-choice-item a { color: var(--was-link-color); text-decoration: underline; }

.was-resend {
	position: absolute;
	right: 6px;
	top: 12px;
	background: none;
	border: none;
	color: var(--was-primary);
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
}

.was-btn-primary {
	background: linear-gradient(135deg, var(--was-primary), #8b5cf6);
	color: var(--was-btn-text);
	border: none;
	padding: 13px 20px;
	border-radius: var(--was-button-radius);
	font-size: var(--was-button-size);
	font-weight: var(--was-button-weight);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
	font-family: var(--was-font);
}
.was-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(91,33,182,0.3); }
.was-full { width: 100%; }

.was-msg { font-size: 13px; margin-bottom: 12px; min-height: 16px; }
.was-msg.was-error { color: #dc2626; }
.was-msg.was-success { color: #16a34a; }

/* Login mode switch (password vs OTP) */
.was-login-switch {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
	background: var(--was-input-bg);
	border-radius: 50px;
	padding: 4px;
}
.was-login-mode-btn {
	flex: 1;
	background: none;
	border: none;
	padding: 8px 10px;
	font-size: 12.5px;
	font-weight: 600;
	border-radius: 50px;
	cursor: pointer;
	color: #777;
	transition: all .2s ease;
}
.was-login-mode-btn.active { background: var(--was-primary); color: #fff; }
.was-login-mode-view { display: none; }
.was-login-mode-view.active { display: block; }

.was-forgot-link { text-align: right; margin: -10px 0 16px; font-size: 12.5px; }
.was-forgot-link a { color: var(--was-link-color); text-decoration: none; }
.was-forgot-link a:hover { text-decoration: underline; }

.was-otp-login-code-field { margin-top: 14px; }

/* Password strength meter */
.was-strength-bar {
	height: 4px;
	background: rgba(0,0,0,0.08);
	border-radius: 4px;
	margin-top: 6px;
	overflow: hidden;
}
.was-strength-bar span {
	display: block;
	height: 100%;
	width: 0%;
	transition: width .25s ease, background .25s ease;
}
.was-strength-text {
	display: block;
	font-size: 11px;
	margin-top: 4px;
	font-weight: 600;
}

/* Remember device row */
.was-remember-device-row {
	margin: 10px 0 16px;
	font-size: 12.5px;
}

/* Logged-in badge (shortcode output) */
.was-logged-in-badge { display: inline-block; }

/* Password show/hide toggle */
.was-field-password input { padding-right: 42px !important; }
.was-toggle-password {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	font-size: 15px;
	opacity: .55;
	line-height: 1;
	padding: 4px;
}
.was-toggle-password:hover { opacity: 1; }

/* Button loading spinner state */
.was-btn-primary.was-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}
.was-btn-primary.was-loading::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 16px; height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255,255,255,0.5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: was-spin .6s linear infinite;
}
@keyframes was-spin { to { transform: rotate(360deg); } }

/* Multi-step registration */
.was-step-progress {
	height: 6px;
	background: rgba(0,0,0,0.08);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 8px;
}
.was-step-progress-fill {
	display: block;
	height: 100%;
	background: linear-gradient(135deg, var(--was-primary), #8b5cf6);
	transition: width .3s ease;
}
.was-step-indicator {
	font-size: 12px;
	color: #888;
	margin: 0 0 16px;
}
.was-step-nav {
	display: flex;
	gap: 10px;
}
.was-step-nav .was-btn-primary,
.was-step-nav .was-btn-secondary {
	flex: 1;
}
.was-btn-secondary {
	background: var(--was-input-bg);
	color: var(--was-text-color);
	border: 1.5px solid var(--was-input-border);
	padding: 13px 20px;
	border-radius: var(--was-button-radius);
	font-size: var(--was-button-size);
	font-weight: var(--was-button-weight);
	cursor: pointer;
	font-family: var(--was-font);
}

@media (max-width: 480px) {
	.was-mode-modal { width: 94vw; padding: 28px 20px; }
	.was-mode-sidebar { width: 100vw; }
}