/* PeoplePath WordPress Snippets — login snippet styles */

/* Single-column layout is capped in width; the two-column layout is not. */
.iw-login--single {
	max-width: 315px;
}

.iw-input {
	position: relative;
}
input[type=checkbox] {
	appearance: none;
	-webkit-appearance: none;
	width: var(--input-checkbox-width);
	height: var(--input-checkbox-height);
	border: 1px solid var(--input-color-border);
	border-radius: var(--input-border-radius);
	margin: 0 17px 0 0;
	display: inline-block;
	vertical-align: middle;
	padding: 0;
	background-position: center;
	background-size: 100% auto;
	background-color: #fff;
	background-image: url('../img/check_grey.svg');
}
input[type=checkbox]:checked {
	color: #000;
	border-color: var(--color-brand-5);
	background-color: var(--color-brand-5);
	background-image: var(--checkbox-check-image);
}
.iw-login-remember {
	margin-bottom: 14px;
	position: relative;
}
.iw-login-remember label {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 26px;
	color: #333333;
	cursor: pointer;
	padding-left: 37px;
}
.iw-login-sso {
	clear: both;
	text-align: center;
	line-height: 1;
	margin-top: 10px;
}
.iw-login-sso-item {
	width: 48px;
	height: 48px;
	line-height: 48px;
	margin: 0 3px;
	border: 1px solid #000;
	border-radius: 0;
	display: inline-block;
	padding-top: 2px;
}
.iw-login-sso .social-note {
	padding: 10px 0 20px 0;
	color: var(--color-text);
}
.iw-login-employee {
	text-align: center;
}
/* The three main buttons — Login, Employee Login and Register — are rendered
   full width (capped by --button-max-width from .iw-button) and centred, so
   they stay identical in size regardless of label length or where they appear
   in the configurable element order, in every layout. This overrides the
   inline-block default from .iw-button. */
#iw-submit,
.iw-employee-login,
.iw-register {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 12px auto 0;
}
/* Keep the Employee Login button from sitting flush against an adjacent element
   (e.g. the SSO icons) when placed next to it in the order. */
.iw-employee-login {
	margin-bottom: 12px;
}
/* The Login / Send Login Link button always aligns left (Employee Login and
   Register stay centred). */
#iw-submit {
	margin-left: 0;
	margin-right: 0;
}
/* Secondary action links (login-type switch + reset password). Rendered
   inline-block so that when placed next to each other in the order they sit
   side by side, and otherwise flow onto their own line. Colour is configurable
   via the "Link Color" styling option (--color-action-link). */
.iw-login-typeswitch,
.iw-login a.iw-login-forgot {
	display: inline-block;
	margin: 10px 20px 0 0;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: var(--color-action-link);
	cursor: pointer;
	text-align: left;
	white-space: normal;
	text-decoration: none;
}
.iw-login-typeswitch:hover,
.iw-login a.iw-login-forgot:hover {
	color: var(--color-action-link);
	text-decoration: underline;
}
.iw-login h2 {
	text-align: left;
	font-size: 18px;
	padding: 10px 0 20px 0;
}
.iw-login .iw-input {
	font-size: 14px;
}
.iw-login .iw-input input:-internal-autofill-selected, .iw-login .iw-input input:focus {
	background-color: #fff !important;
	border: 2px solid #369;
}
.iw-login-dropdown.active {
    display: block;
    position: fixed;
    right: 42px;
    top: 107px;
    border-radius: var(--border-radius);
    background-color: white;
    padding: 20px;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
	z-index: 100000;
}
.iw-login-dropdown {
    display: none;
    width: 335px;
    max-width: 100%;
}
.iw-login-trigger::after {
    content: '';
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    margin-left: 3px;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url('../img/angle-down.svg') center / contain no-repeat;
            mask: url('../img/angle-down.svg') center / contain no-repeat;
}
.iw-login-trigger.active::after {
    -webkit-mask-image: url('../img/angle-up.svg');
            mask-image: url('../img/angle-up.svg');
}

/* ── Two-column layout ─────────────────────────────────────────────── */
/* The columns wrapper lives inside the <form>. Elements are split into the two
   columns by the admin-positioned "Column Break" (see snippets/login.php). */
.iw-login--columns {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 30px;
}
.iw-login--columns .iw-login-col {
	flex: 1;
	min-width: 0;
}

/* Divider carrying the translated "or". Horizontal by default — used as the
   single-column "column break" separator and when two columns stack. */
.iw-login-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0;
	color: var(--color-text);
	text-transform: lowercase;
}
.iw-login-divider::before,
.iw-login-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--color-border);
}

/* Two columns side by side: the same divider becomes vertical, filling the gap
   between the columns. */
@media (min-width: 769px) {
	.iw-login--columns .iw-login-divider {
		flex: 0 0 auto;
		flex-direction: column;
		align-self: stretch;
		margin: 0;
	}
	.iw-login--columns .iw-login-divider::before,
	.iw-login--columns .iw-login-divider::after {
		width: 1px;
		height: auto;
	}
	.iw-login--columns .iw-login-divider span {
		padding: 12px 0;
	}
}

/* Stack into a single column on narrow screens; the divider stays horizontal. */
@media (max-width: 768px) {
	.iw-login--columns {
		flex-direction: column;
		gap: 0;
	}
}