/* ── Login page ─────────────────────────────────────────────────────────────
 *
 * Instagram.com-style two-column login: hero left, form right.
 * No sidebar or mobile chrome — standalone full-viewport layout.
 * Admin edits the left-side content (image + copy) via the block editor.
 * ────────────────────────────────────────────────────────────────────────── */

.igcr-login-page {
	display: flex;
	min-height: 100vh;
	margin: 0 !important;
	max-width: none !important;
}

.igcr-login-page .igcr-login-hero {
	flex: 1;
	display: flex;
	padding: 0;
	background: var( --igcr-theme-bg );
	overflow: hidden;
}

.igcr-login-hero-content {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	flex: 1;
	text-align: left;
	padding: 48px 40px;
}

/* ── Text position grid (3×3) ─────────────────────────────────────────── */
.igcr-hero-pos--top-left      { align-items: flex-start; justify-content: flex-start; text-align: left; }
.igcr-hero-pos--top-center    { align-items: flex-start; justify-content: center;     text-align: center; }
.igcr-hero-pos--top-right     { align-items: flex-start; justify-content: flex-end;   text-align: right; }
.igcr-hero-pos--center-left   { align-items: center;     justify-content: flex-start; text-align: left; }
.igcr-hero-pos--center        { align-items: center;     justify-content: center;     text-align: center; }
.igcr-hero-pos--center-right  { align-items: center;     justify-content: flex-end;   text-align: right; }
.igcr-hero-pos--bottom-left   { align-items: flex-end;   justify-content: flex-start; text-align: left; }
.igcr-hero-pos--bottom-center { align-items: flex-end;   justify-content: center;     text-align: center; }
.igcr-hero-pos--bottom-right  { align-items: flex-end;   justify-content: flex-end;   text-align: right; }

/* Cover background — lazy-loaded <img> + gradient overlay */
.igcr-login-hero-content.has-bg {
	position: relative;
}

.igcr-hero-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.igcr-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.6 ) 0%, transparent 60% );
	z-index: 1;
	pointer-events: none;
}

.igcr-login-hero-content.has-bg .igcr-login-hero-text {
	position: relative;
	z-index: 2;
}

.igcr-login-hero-content.has-bg .igcr-login-hero-title {
	color: #ffffff;
}

.igcr-login-hero-content.has-bg .igcr-login-hero-subtitle {
	color: rgba( 255, 255, 255, 0.8 );
}

.igcr-login-hero-text {
	max-width: 500px;
}

.igcr-login-hero-title {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 12px;
	color: var( --igcr-theme-text );
}

.igcr-login-hero-subtitle {
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
	color: var( --igcr-theme-text-secondary );
}

.igcr-login-page .igcr-login-form-col {
	width: 420px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 40px 20px;
	background: var( --igcr-theme-bg-card );
}

/* Login logo above card */
.igcr-login-logo {
	margin-bottom: 12px;
	text-align: center;
}

.igcr-login-logo a {
	display: inline-block;
}

.igcr-login-logo img {
	max-height: 28px;
	width: auto;
}

/* Login card */
.igcr-login-card {
	width: 100%;
	max-width: 350px;
	border: 1px solid var( --igcr-theme-border );
	border-radius: 4px;
	padding: 40px;
	text-align: center;
	background: var( --igcr-theme-bg-card );
}

.igcr-login-title {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 24px;
	color: var( --igcr-theme-text );
}

.igcr-login-error {
	background: var( --igcr-theme-danger-bg );
	color: var( --igcr-theme-danger-text );
	padding: 10px 14px;
	border-radius: 4px;
	font-size: 13px;
	margin: 0 0 16px;
}

.igcr-login-greeting {
	font-size: 16px;
	margin: 0 0 20px;
	color: var( --igcr-theme-text );
}

/* Form fields */
.igcr-login-form {
	text-align: left;
}

.igcr-login-field {
	margin-bottom: 8px;
}

.igcr-login-field input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var( --igcr-theme-border );
	border-radius: 4px;
	font-size: 14px;
	font-family: var( --igcr-theme-font );
	background: var( --igcr-theme-bg );
	color: var( --igcr-theme-text );
	outline: none;
	transition: border-color 0.15s;
}

.igcr-login-field input:focus {
	border-color: var( --igcr-theme-text-secondary );
}

.igcr-login-field input::placeholder {
	color: var( --igcr-theme-text-muted );
	font-size: 12px;
}

/* Submit button */
.igcr-login-btn {
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 10px;
	background: var( --igcr-theme-btn-primary );
	color: var( --igcr-theme-on-accent );
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	font-family: var( --igcr-theme-font );
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: background 0.15s;
}

.igcr-login-btn:hover {
	background: var( --igcr-theme-btn-primary-hover );
	color: var( --igcr-theme-on-accent );
}

/* Forgot password */
.igcr-login-forgot {
	display: block;
	margin-top: 16px;
	font-size: 12px;
	color: var( --igcr-theme-text-secondary );
	text-decoration: none;
}

.igcr-login-forgot:hover {
	color: var( --igcr-theme-text );
}

/* WooCommerce forms inside login column (lost password, register, etc.) */
.igcr-login-form-col .woocommerce-form input[type="text"],
.igcr-login-form-col .woocommerce-form input[type="email"],
.igcr-login-form-col .woocommerce-form input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var( --igcr-theme-border );
	border-radius: 8px;
	background: var( --igcr-theme-bg );
	color: var( --igcr-theme-text );
	font-size: 14px;
	font-family: var( --igcr-theme-font );
	box-sizing: border-box;
	transition: border-color 0.15s;
}

.igcr-login-form-col .woocommerce-form input[type="text"]:focus,
.igcr-login-form-col .woocommerce-form input[type="email"]:focus,
.igcr-login-form-col .woocommerce-form input[type="password"]:focus {
	border-color: var( --igcr-theme-text-secondary );
}

/* OR divider */
.igcr-login-divider {
	display: flex;
	align-items: center;
	margin: 20px 0;
	gap: 16px;
}

.igcr-login-divider::before,
.igcr-login-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var( --igcr-theme-border );
}

.igcr-login-divider span {
	font-size: 13px;
	font-weight: 600;
	color: var( --igcr-theme-text-secondary );
}

/* Instagram login button — primary action, uses accent color */
.igcr-login-ig-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 12px 16px;
	background: var( --igcr-theme-accent );
	color: var( --igcr-theme-on-accent );
	font-size: 15px;
	font-weight: 600;
	font-family: var( --igcr-theme-font );
	text-decoration: none;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s;
}

.igcr-login-ig-btn:hover {
	background: var( --igcr-theme-accent-hover );
	color: var( --igcr-theme-on-accent );
}

.igcr-login-ig-btn svg {
	flex-shrink: 0;
}

/* Toggle button — "Log in with username or email" */
.igcr-login-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 10px 16px;
	background: none;
	border: 1px solid var( --igcr-theme-border );
	border-radius: 8px;
	color: var( --igcr-theme-text-secondary );
	font-size: 14px;
	font-weight: 500;
	font-family: var( --igcr-theme-font );
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.igcr-login-toggle:hover {
	border-color: var( --igcr-theme-text-secondary );
	color: var( --igcr-theme-text );
}

/* Collapsible credentials section */
.igcr-login-credentials {
	display: none;
	margin-top: 20px;
}

.igcr-login-credentials.is-open {
	display: block;
}

/* Create account */
.igcr-login-register {
	margin-top: 20px;
	padding: 20px 40px;
	border: 1px solid var( --igcr-theme-border );
	border-radius: 4px;
	text-align: center;
}

.igcr-login-register-btn {
	color: var( --igcr-theme-btn-primary );
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.igcr-login-register-btn:hover {
	color: var( --igcr-theme-btn-primary-hover );
}

/* Legal links */
.igcr-login-legal {
	margin-top: 20px;
	font-size: 12px;
	color: var( --igcr-theme-text-muted );
	text-align: center;
}

.igcr-login-legal a {
	color: var( --igcr-theme-text-secondary );
	text-decoration: none;
}

.igcr-login-legal a:hover {
	color: var( --igcr-theme-text );
	text-decoration: underline;
}

/* Brand line */
.igcr-login-brand {
	margin-top: 12px;
	font-size: 13px;
	color: var( --igcr-theme-text-muted );
	text-align: center;
}

/* ── Login page responsive ── */

@media ( max-width: 900px ) {
	.igcr-login-page .igcr-login-form-col {
		width: 360px;
		padding: 30px 20px 20px;
	}

	.igcr-login-card {
		padding: 30px 24px;
	}
}

@media ( max-width: 767px ) {
	.igcr-login-page {
		flex-direction: column;
		min-height: auto;
	}

	.igcr-login-page .igcr-login-hero {
		padding: 40px 20px 20px;
		min-height: auto;
	}

	.igcr-login-page .igcr-login-form-col {
		width: 100%;
		padding: 20px;
	}

	.igcr-login-card {
		max-width: none;
	}
}