/**
 * Set Password Page Styles
 * Mobile-first responsive design matching DrummerTube theme
 *
 * Uses design system components from variables.css and drummertube.css:
 * - dt-btn, dt-btn--primary, dt-btn--secondary, dt-btn--full
 * - dt-form-group, dt-form-label, dt-form-input
 * - dt-alert, dt-alert--error
 * - dt-icon-circle, dt-icon-circle--success, dt-icon-circle--error, dt-icon-circle--info
 *
 * @package DrummerTube
 * @since 2.2.0
 */

/* =============================================================================
   PAGE SETUP
   ============================================================================= */
.set-password-page {
	background-color: var(--dt-bg-darkest);
	color: var(--dt-text-primary);
	font-family: var(--dt-font-primary);
	line-height: 1.6;
	min-height: 100vh;
}

.set-password-page *,
.set-password-page *::before,
.set-password-page *::after {
	box-sizing: border-box;
}

/* =============================================================================
   HERO SECTION
   ============================================================================= */
.sp-hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 40px 20px;
}

.sp-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.sp-hero-gradient {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at top, rgba(var(--dt-accent-rgb), 0.08) 0%, transparent 50%),
		radial-gradient(ellipse at bottom right, rgba(var(--dt-accent-rgb), 0.05) 0%, transparent 40%);
}

.sp-container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
}

/* =============================================================================
   CARD
   ============================================================================= */
.sp-card {
	background: var(--dt-bg-base);
	border-radius: var(--dt-radius-2xl);
	padding: 40px 28px;
	text-align: center;
	border: 1px solid var(--dt-border-light);
	animation: sp-fade-in 0.4s ease;
}

@keyframes sp-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =============================================================================
   ICON CIRCLE ADJUSTMENTS
   Center icon circles in this context
   ============================================================================= */
.sp-card .dt-icon-circle {
	margin: 0 auto var(--dt-spacing-lg);
}

/* Lock icon uses accent/info color */
.sp-card .sp-icon--lock {
	background: var(--dt-overlay-accent-strong);
}

/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */
.sp-title {
	font-size: var(--dt-text-2xl);
	font-weight: 700;
	margin: 0 0 var(--dt-spacing-sm);
	color: var(--dt-text-primary);
}

.sp-subtitle {
	font-size: var(--dt-text-sm);
	color: var(--dt-text-muted);
	margin: 0 0 var(--dt-spacing-xl);
	line-height: 1.5;
}

/* =============================================================================
   FORM LAYOUT
   ============================================================================= */
.sp-form {
	text-align: left;
}

/* Input wrapper for password toggle button positioning */
.sp-input-wrapper {
	position: relative;
}

/* =============================================================================
   INPUT STYLING - Matches login page
   ============================================================================= */
.set-password-page .dt-form-input {
	width: 100%;
	height: 52px;
	padding: 0 20px;
	background: var(--dt-bg-card-alt);
	border: 2px solid var(--dt-border-light);
	border-radius: var(--dt-radius-lg);
	color: var(--dt-text-primary);
	font-size: 16px;
	font-family: var(--dt-font-primary);
	outline: none;
	box-shadow: none;
	transition: border-color var(--dt-transition-base), box-shadow var(--dt-transition-base);
}

.set-password-page .dt-form-input:focus {
	border-color: var(--dt-accent);
	box-shadow: 0 0 0 3px rgba(var(--dt-accent-rgb), 0.15);
}

.set-password-page .dt-form-input::placeholder {
	color: var(--dt-text-muted);
}

.set-password-page .dt-form-input.has-error {
	border-color: var(--dt-error);
}

.set-password-page .dt-form-input.has-error:focus {
	box-shadow: 0 0 0 3px rgba(var(--dt-error-rgb), 0.15);
}

/* Adjust input padding for toggle button */
.sp-input-wrapper .dt-form-input {
	padding-right: 48px;
}

/* =============================================================================
   PASSWORD TOGGLE BUTTON - Matches login page cyan styling
   ============================================================================= */
.sp-toggle-password {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	padding: 4px;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--dt-accent) !important;
	cursor: pointer;
	transition: color var(--dt-transition-base), opacity var(--dt-transition-base);
}

.sp-toggle-password:hover,
.sp-toggle-password:focus {
	color: var(--dt-accent-hover) !important;
	opacity: 0.8;
}

.sp-toggle-password svg {
	display: block;
	width: 20px;
	height: 20px;
	stroke: currentColor !important;
}

.sp-toggle-password .sp-eye-closed {
	display: none;
}

.sp-toggle-password.active .sp-eye-open {
	display: none;
}

.sp-toggle-password.active .sp-eye-closed {
	display: block;
}

/* =============================================================================
   PASSWORD STRENGTH METER
   ============================================================================= */
.sp-password-strength {
	margin-top: var(--dt-spacing-sm);
	display: flex;
	align-items: center;
	gap: var(--dt-spacing-sm);
	opacity: 0;
	transition: opacity var(--dt-transition-base);
}

.sp-password-strength.visible {
	opacity: 1;
}

.sp-strength-bar {
	flex: 1;
	height: 4px;
	background: var(--dt-border-light);
	border-radius: 2px;
	overflow: hidden;
}

.sp-strength-bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 2px;
	transition: width var(--dt-transition-slow), background-color var(--dt-transition-slow);
}

.sp-password-strength.weak .sp-strength-bar span {
	width: 33%;
	background: var(--dt-error);
}

.sp-password-strength.medium .sp-strength-bar span {
	width: 66%;
	background: var(--dt-warning);
}

.sp-password-strength.strong .sp-strength-bar span {
	width: 100%;
	background: var(--dt-success);
}

.sp-strength-text {
	font-size: 12px;
	font-weight: 500;
	min-width: 50px;
	text-align: right;
}

.sp-password-strength.weak .sp-strength-text {
	color: var(--dt-error);
}

.sp-password-strength.medium .sp-strength-text {
	color: var(--dt-warning);
}

.sp-password-strength.strong .sp-strength-text {
	color: var(--dt-success);
}

/* =============================================================================
   PASSWORD MATCH STATUS
   ============================================================================= */
.sp-match-status {
	margin-top: var(--dt-spacing-xs);
	font-size: 13px;
	font-weight: 500;
	opacity: 0;
	transition: opacity var(--dt-transition-base);
}

.sp-match-status.visible {
	opacity: 1;
}

.sp-match-status.match {
	color: var(--dt-success);
}

.sp-match-status.no-match {
	color: var(--dt-error);
}

/* =============================================================================
   REQUIREMENTS LIST
   ============================================================================= */
.sp-requirements {
	background: var(--dt-bg-card-alt);
	border-radius: var(--dt-radius-lg);
	padding: var(--dt-spacing-md) var(--dt-spacing-lg);
	margin-bottom: var(--dt-spacing-lg);
}

.sp-requirements-title {
	font-size: 13px;
	color: var(--dt-text-muted);
	margin: 0 0 var(--dt-spacing-sm);
}

.sp-requirements-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-requirements-list li {
	font-size: 13px;
	color: var(--dt-text-muted);
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: var(--dt-spacing-sm);
	transition: color var(--dt-transition-base);
}

.sp-requirements-list li:last-child {
	margin-bottom: 0;
}

.sp-req-icon {
	font-weight: bold;
	opacity: 0.3;
	transition: opacity var(--dt-transition-base), color var(--dt-transition-base);
}

.sp-requirements-list li.met {
	color: var(--dt-success);
}

.sp-requirements-list li.met .sp-req-icon {
	opacity: 1;
}

/* =============================================================================
   ERROR MESSAGE - Extends dt-alert
   ============================================================================= */
.sp-error {
	margin-top: var(--dt-spacing-md);
	text-align: center;
	display: none;
}

.sp-error.visible {
	display: block;
	animation: sp-shake 0.4s ease;
}

@keyframes sp-shake {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-5px); }
	40%, 80% { transform: translateX(5px); }
}

/* =============================================================================
   SUCCESS STATE
   ============================================================================= */
.sp-success {
	display: none;
}

.sp-success.visible {
	display: block;
	animation: sp-fade-in 0.4s ease;
}

.sp-success .dt-icon-circle {
	margin: 0 auto var(--dt-spacing-lg);
}

.sp-success h2 {
	font-size: var(--dt-text-xl);
	font-weight: 700;
	margin: 0 0 var(--dt-spacing-xs);
	color: var(--dt-success);
}

.sp-redirect-text {
	font-size: 14px;
	color: var(--dt-text-muted);
	margin: 0;
}

/* Hide form when success shows */
.sp-form.hidden {
	display: none;
}

.sp-card .sp-icon--lock.hidden,
.sp-card .sp-title.hidden,
.sp-card .sp-subtitle.hidden {
	display: none;
}

/* =============================================================================
   ACTIONS (for error/expired state)
   ============================================================================= */
.sp-actions {
	display: flex;
	flex-direction: column;
	gap: var(--dt-spacing-sm);
	margin-top: var(--dt-spacing-lg);
}

/* =============================================================================
   FOOTER TEXT
   ============================================================================= */
.sp-footer-text {
	text-align: center;
	margin-top: var(--dt-spacing-lg);
	font-size: 14px;
	color: var(--dt-text-muted);
}

.sp-footer-text a {
	color: var(--dt-accent);
	text-decoration: none;
	font-weight: 500;
	transition: opacity var(--dt-transition-base);
}

.sp-footer-text a:hover {
	opacity: 0.8;
	text-decoration: underline;
}

/* =============================================================================
   RESPONSIVE - TABLET (768px+)
   ============================================================================= */
@media (min-width: 768px) {
	.sp-card {
		padding: 48px 40px;
	}

	.sp-title {
		font-size: 30px;
	}

	.sp-actions {
		flex-direction: row;
		justify-content: center;
	}

	.sp-actions .dt-btn {
		flex: 0 0 auto;
	}
}

/* =============================================================================
   RESPONSIVE - DESKTOP (1024px+)
   ============================================================================= */
@media (min-width: 1024px) {
	.sp-container {
		max-width: 480px;
	}

	.sp-card {
		padding: 56px 48px;
	}
}

/* =============================================================================
   RESPONSIVE - SMALL MOBILE (max-width: 479px)
   ============================================================================= */
@media (max-width: 479px) {
	.sp-hero {
		padding: 24px 16px;
	}

	.sp-card {
		padding: 28px 20px;
		border-radius: var(--dt-radius-xl);
	}

	.sp-card .dt-icon-circle {
		width: 56px;
		height: 56px;
		margin-bottom: var(--dt-spacing-md);
	}

	.sp-card .dt-icon-circle svg {
		width: 28px;
		height: 28px;
	}

	.sp-title {
		font-size: 22px;
		margin-bottom: var(--dt-spacing-xs);
	}

	.sp-subtitle {
		font-size: 14px;
		margin-bottom: var(--dt-spacing-lg);
	}

	/* Adjust form input for mobile - matches login page */
	.set-password-page .dt-form-input {
		height: 50px;
		min-height: 44px;
		padding: 0 16px;
		border-radius: var(--dt-radius-md);
	}

	.sp-input-wrapper .dt-form-input {
		padding-right: 48px;
	}

	.sp-toggle-password {
		right: 8px;
		min-width: 44px;
		min-height: 44px;
		padding: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.sp-toggle-password svg {
		width: 18px;
		height: 18px;
	}

	.sp-requirements {
		padding: 14px 16px;
		border-radius: var(--dt-radius-md);
	}

	.sp-requirements-title {
		font-size: 12px;
	}

	.sp-requirements-list li {
		font-size: 12px;
	}

	/* Adjust button for mobile */
	.sp-card .dt-btn {
		height: 48px;
		padding: 0 24px;
		font-size: 14px;
	}

	.sp-actions {
		gap: var(--dt-spacing-sm);
	}

	.sp-footer-text {
		font-size: 13px;
	}

	.sp-success h2 {
		font-size: 20px;
	}

	.sp-redirect-text {
		font-size: 13px;
	}
}

/* =============================================================================
   RESPONSIVE - EXTRA SMALL MOBILE (max-width: 359px)
   ============================================================================= */
@media (max-width: 359px) {
	.sp-hero {
		padding: 16px 12px;
	}

	.sp-card {
		padding: 24px 16px;
		border-radius: var(--dt-radius-lg);
	}

	.sp-card .dt-icon-circle {
		width: 48px;
		height: 48px;
		margin-bottom: var(--dt-spacing-md);
	}

	.sp-card .dt-icon-circle svg {
		width: 24px;
		height: 24px;
	}

	.sp-title {
		font-size: 20px;
	}

	.sp-subtitle {
		font-size: 13px;
		margin-bottom: var(--dt-spacing-md);
	}

	.set-password-page .dt-form-input {
		height: 46px;
		padding: 0 14px;
	}

	.sp-input-wrapper .dt-form-input {
		padding-right: 42px;
	}

	.sp-toggle-password {
		right: 4px;
		padding: 8px;
	}

	.sp-requirements {
		padding: 12px 14px;
	}

	.sp-card .dt-btn {
		height: 44px;
		padding: 0 20px;
		font-size: 13px;
	}
}

/* =============================================================================
   RESPONSIVE - LARGE DESKTOP (min-width: 1440px)
   ============================================================================= */
@media (min-width: 1440px) {
	.sp-container {
		max-width: 520px;
	}

	.sp-card {
		padding: 64px 56px;
	}

	.sp-title {
		font-size: 32px;
	}
}

/* =============================================================================
   ELEMENTOR/THEME OVERRIDES
   Override button styles that may leak through from parent theme or Elementor
   ============================================================================= */

/* Password toggle button - ensure cyan color */
.set-password-page .sp-toggle-password,
.set-password-page button.sp-toggle-password,
body.page-template-page-set-password .sp-toggle-password {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: var(--dt-accent) !important;
}

.set-password-page .sp-toggle-password:hover,
.set-password-page .sp-toggle-password:focus,
.set-password-page button.sp-toggle-password:hover,
.set-password-page button.sp-toggle-password:focus,
body.page-template-page-set-password .sp-toggle-password:hover,
body.page-template-page-set-password .sp-toggle-password:focus {
	background: transparent !important;
	border: none !important;
	color: var(--dt-accent-hover) !important;
	opacity: 0.8;
}

.set-password-page .sp-toggle-password svg,
.set-password-page button.sp-toggle-password svg,
body.page-template-page-set-password .sp-toggle-password svg {
	stroke: currentColor !important;
	color: inherit !important;
}