/* ═══ Gem Mon Compte — Login / Register Page ═══ */

/* ── Neutralize theme login wrappers ── */
.gem-login-wrap .wd-registration-page,
.gem-login-wrap .wd-register-tabs,
.gem-login-wrap .wd-grid-f-col,
.gem-login-wrap .wd-col { display: contents !important; }
/* Hide Woodmart's own login/register markup when our template is active */
.woocommerce-account:not(.logged-in) .wd-registration-page { display: none !important; }

/* ── Base ── */
.gem-login-wrap {
	max-width: 1100px;
	margin: 0 auto;
	border-radius: var(--gem-radius-lg);
	overflow: hidden;
	box-shadow: var(--gem-shadow);
}

/* ── Form elements ── */
.gem-form-group { margin-bottom: 14px; }
.gem-form-label {
	display: block; font-size: .8125rem; font-weight: 600;
	color: var(--gem-dark); margin-bottom: 5px;
}
.gem-form-label .required { color: var(--gem-red); }
.gem-form-input {
	width: 100%; padding: 11px 14px;
	border: 1.5px solid var(--gem-border); border-radius: var(--gem-radius);
	font-size: .875rem; font-family: inherit; color: var(--gem-dark);
	background: #fff; transition: border-color .15s;
}
.gem-form-input:focus {
	outline: none; border-color: var(--gem-blue);
	box-shadow: 0 0 0 3px rgba(0,174,215,.1);
}
.gem-form-btn {
	width: 100%; padding: 12px; border: none; border-radius: var(--gem-radius);
	font-size: .9375rem; font-weight: 700; cursor: pointer;
	font-family: inherit; transition: background .15s;
}
.gem-btn-primary { background: var(--gem-blue); color: #fff; }
.gem-btn-primary:hover { background: var(--gem-blue-dark); }
.gem-form-row-between {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 16px;
}
.gem-form-check {
	display: flex; align-items: center; gap: 8px;
	font-size: .75rem; color: var(--gem-gray); cursor: pointer;
}
.gem-form-check input { accent-color: var(--gem-blue); }
.gem-form-link { font-size: .75rem; color: var(--gem-blue); text-decoration: none; font-weight: 600; }
.gem-form-link:hover { text-decoration: underline; }
.gem-login-switch {
	text-align: center; margin-top: 16px;
	font-size: .8125rem; color: var(--gem-gray);
}
.gem-login-form-title { font-size: 1.25rem; font-weight: 700; color: var(--gem-dark); margin: 0 0 4px; }
.gem-login-form-sub { font-size: .8125rem; color: var(--gem-gray); margin: 0 0 20px; }

/* ── Toggle (tabs layout) ── */
.gem-login-toggle {
	display: flex; border-radius: var(--gem-radius); overflow: hidden;
	border: 1.5px solid var(--gem-border); margin-bottom: 20px;
}
.gem-login-toggle a {
	flex: 1; padding: 10px; text-align: center;
	font-size: .8125rem; font-weight: 600; color: var(--gem-gray);
	text-decoration: none; transition: .15s;
}
.gem-login-toggle a.is-active { background: var(--gem-blue); color: #fff; }

/* ═══ LAYOUT: Split ═══ */
.gem-login-split { display: flex; min-height: 480px; }
.gem-login-split .gem-login-panel {
	width: 42%; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--gem-dark), #0d2040);
	color: #fff; text-align: center; padding: 40px 28px;
}
.gem-login-split .gem-login-panel-title { font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.gem-login-split .gem-login-panel-sub { font-size: .8125rem; color: rgba(255,255,255,.5); line-height: 1.6; }
.gem-login-split .gem-login-form-area {
	flex: 1; display: flex; align-items: center; justify-content: center;
	padding: 36px 32px; background: var(--gem-bg);
}
.gem-login-split .gem-login-form-inner { width: 100%; max-width: 380px; }

/* ═══ LAYOUT: Centered ═══ */
.gem-login-centered {
	max-width: 440px; margin: 32px auto;
	background: var(--gem-white); border: 1px solid var(--gem-border);
	padding: 36px 32px;
}
.gem-login-centered .gem-login-form-area { padding: 0; }
.gem-login-centered .gem-login-form-title,
.gem-login-centered .gem-login-form-sub { text-align: center; }

/* ═══ LAYOUT: Dark ═══ */
.gem-login-dark {
	max-width: 420px; margin: 32px auto;
	background: rgba(255,255,255,.04); backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 16px; padding: 36px 32px;
}
/* Dark mode needs a dark parent bg — added via inline style or theme */
.gem-login-dark .gem-login-form-area { padding: 0; }
.gem-login-dark .gem-login-form-title { color: #fff; text-align: center; }
.gem-login-dark .gem-login-form-sub { color: rgba(255,255,255,.4); text-align: center; }
.gem-login-dark .gem-form-label { color: rgba(255,255,255,.6); }
.gem-login-dark .gem-form-input {
	background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #fff;
}
.gem-login-dark .gem-form-input::placeholder { color: rgba(255,255,255,.25); }
.gem-login-dark .gem-form-input:focus { border-color: var(--gem-blue); }
.gem-login-dark .gem-form-check { color: rgba(255,255,255,.4); }
.gem-login-dark .gem-login-switch { color: rgba(255,255,255,.35); }
.gem-login-dark .gem-login-toggle { border-color: rgba(255,255,255,.1); }
.gem-login-dark .gem-login-toggle a { color: rgba(255,255,255,.4); }
.gem-login-dark .gem-login-toggle a.is-active { background: var(--gem-blue); color: #fff; }

/* ═══ LAYOUT: Tabs ═══ */
.gem-login-tabs {
	max-width: 440px; margin: 32px auto;
	background: var(--gem-white); border: 1px solid var(--gem-border);
	overflow: hidden;
}
.gem-login-tabs .gem-login-form-header {
	background: linear-gradient(135deg, var(--gem-dark), #0d2040);
	padding: 24px 28px; text-align: center; color: #fff;
}
.gem-login-tabs .gem-login-logo { font-size: 1.25rem; font-weight: 800; color: var(--gem-blue); }
.gem-login-tabs .gem-login-form-header-sub { font-size: .75rem; color: rgba(255,255,255,.4); margin-top: 2px; }
.gem-login-tabs .gem-login-form-area { padding: 24px 28px; }
.gem-login-tabs .gem-login-form-title,
.gem-login-tabs .gem-login-form-sub { display: none; }

/* ═══ LAYOUT: Side Features ═══ */
.gem-login-side { display: flex; min-height: 480px; }
.gem-login-side .gem-login-panel {
	width: 48%; display: flex; flex-direction: column; justify-content: center;
	padding: 40px 32px; background: var(--gem-bg);
}
.gem-login-side .gem-login-welcome {
	font-size: .6875rem; text-transform: uppercase; letter-spacing: 1px;
	color: var(--gem-blue); font-weight: 700; margin-bottom: 10px;
}
.gem-login-side .gem-login-panel-title {
	font-size: 1.5rem; font-weight: 700; color: var(--gem-dark);
	margin-bottom: 8px; line-height: 1.3;
}
.gem-login-side .gem-login-panel-sub {
	font-size: .8125rem; color: var(--gem-gray); line-height: 1.6; margin-bottom: 20px;
}
.gem-login-side .gem-login-features {
	list-style: none; padding: 0; margin: 0;
}
.gem-login-side .gem-login-features li {
	display: flex; align-items: center; gap: 10px;
	padding: 7px 0; font-size: .8125rem; color: var(--gem-dark);
}
.gem-login-side .gem-login-features li i { color: var(--gem-blue); font-size: .8125rem; width: 18px; text-align: center; }
.gem-login-side .gem-login-form-area {
	flex: 1; display: flex; align-items: center; justify-content: center;
	padding: 36px 32px; background: var(--gem-white);
}
.gem-login-side .gem-login-form-inner { width: 100%; max-width: 380px; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 768px) {
	.gem-login-split,
	.gem-login-side { flex-direction: column; }
	.gem-login-split .gem-login-panel,
	.gem-login-side .gem-login-panel { width: 100%; padding: 28px 24px; }
	.gem-login-split .gem-login-form-area,
	.gem-login-side .gem-login-form-area { padding: 24px 20px; }
	.gem-login-centered,
	.gem-login-dark,
	.gem-login-tabs { margin: 16px; max-width: none; padding: 24px 20px; }
	.gem-login-tabs .gem-login-form-area { padding: 20px; }
}