/* =========================================================================
 * SMM Panel - customer login / create account / lost password card
 *
 * Scope: .smmp-auth (the [smm_auth] and logged-out [smm_panel] wrapper).
 * Shared form controls (buttons, inputs, messages, fields) come from smm.css;
 * this file only styles the card itself.
 * ========================================================================= */

.smmp-auth {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: clamp(20px, 4vw, 48px) 16px;
	box-sizing: border-box;
}

.smmp-auth .smmp-auth-card {
	width: 100%;
	max-width: 420px;
	box-sizing: border-box;
}

/* Brand ------------------------------------------------------------------ */
.smmp-auth .smmp-login-brand {
	margin: 0 0 20px;
	text-align: center;
}

.smmp-auth .smmp-login-brand h1 {
	margin: 0;
	font-size: clamp(20px, 2.5vw, 24px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--smmp-text);
}

.smmp-auth .smmp-login-brand img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	max-height: 64px;
	object-fit: contain;
}

/* Tabs (underline style) ------------------------------------------------- */
.smmp-auth .smmp-auth-tabs {
	display: flex;
	margin: 0 0 20px;
	border-bottom: 1px solid var(--smmp-border);
}

.smmp-auth .smmp-auth-tab {
	flex: 1 1 0;
	margin-bottom: -1px;
	min-height: 44px;
	padding: 10px 8px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--smmp-muted);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color .15s ease, border-bottom-color .15s ease;
}

.smmp-auth .smmp-auth-tab:hover { color: var(--smmp-text); }

.smmp-auth .smmp-auth-tab.is-active {
	border-bottom-color: var(--smmp-blue);
	color: var(--smmp-blue);
	font-weight: 600;
}

/* Forms ------------------------------------------------------------------ */
.smmp-auth .smmp-auth-form { margin: 0; }
.smmp-auth .smmp-auth-form[hidden] { display: none; }

.smmp-auth .smmp-btn-block {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	font-size: 16px;
}

.smmp-auth .smmp-auth-links {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 16px;
	font-size: var(--smmp-fs-small);
}

.smmp-auth .smmp-auth-remember {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--smmp-muted);
	min-height: 36px;
	cursor: pointer;
}

.smmp-auth .smmp-auth-switch {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	color: var(--smmp-blue);
	font-weight: 500;
	text-decoration: none;
}

.smmp-auth .smmp-auth-switch:hover { text-decoration: underline; }

.smmp-auth .smmp-auth-alt {
	margin: 16px 0 0;
	text-align: center;
	color: var(--smmp-muted);
	font-size: var(--smmp-fs-small);
}

.smmp-auth .smmp-auth-note {
	margin: 0 0 16px;
	padding: 10px 12px;
	border: 1px solid var(--smmp-border);
	border-radius: var(--smmp-radius);
	background: #f9fafb;
	color: var(--smmp-muted);
	font-size: var(--smmp-fs-small);
}

/* -------------------------------------------------------------------------
 * Responsive Breakpoints (1440px, 1024px, 768px, 480px)
 * ---------------------------------------------------------------------- */

@media (min-width: 1440px) {
	.smmp-auth .smmp-auth-card {
		max-width: 440px;
		padding: 36px 30px;
	}
}

@media (max-width: 1024px) {
	.smmp-auth {
		padding: 36px 16px;
	}
}

@media (max-width: 768px) {
	.smmp-auth {
		padding: 24px 14px;
	}
	.smmp-auth .smmp-auth-card {
		padding: 24px 18px;
	}
}

@media (max-width: 480px) {
	.smmp-auth {
		padding: 16px 10px;
		align-items: flex-start;
	}
	.smmp-auth .smmp-auth-card {
		padding: 20px 14px;
		border-radius: var(--smmp-radius);
	}
	.smmp-auth .smmp-auth-links {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}