/* Forgot password / create password pages.
   The same card as the sign-in dialog: the balloon picture on the left, a white box
   with the 7px translucent outline on the right, the round fields and blue pill
   button. On phones the picture goes and the box takes the width, exactly like the
   dialog does there. Used by views/pages/forgot.ejs and create-password.ejs. */

.ap-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 15px;
}

.ap-card {
	position: relative;
	background: url(../images/image/login-bg.png) center / cover no-repeat;
	border-radius: 20px;
	padding: 40px 30px;
	margin: 60px auto 130px;
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* The balloon, hanging over the top edge like it does on the dialog */
.ap-art {
	position: absolute;
	top: -74px;
	left: 50px;
	width: 385px;
	height: 562px;
	background: url(../images/image/login-img.png) center / cover no-repeat;
	pointer-events: none;
}

.ap-box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	background: #fff;
	border-radius: 10px;
	outline: 7px solid rgba(255, 255, 255, 0.3);
	padding: 40px 36px 34px;
	text-align: center;
}

.ap-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	margin: 0 auto 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(95.35deg, rgba(70, 126, 254, 0.12) 5.26%, rgba(97, 202, 253, 0.12) 100%);
	color: #4260cb;
}

.ap-icon svg { width: 30px; height: 30px; }

.ap-title {
	font-size: 22px;
	font-weight: 600;
	line-height: 33px;
	color: #222328;
	margin: 0 0 8px;
}

.ap-text {
	font-size: 15px;
	line-height: 24px;
	color: #6f7489;
	margin: 0 auto 22px;
	max-width: 380px;
}

.ap-box .offer-fields { width: 100%; margin-bottom: 15px; }
.ap-box .password-field { margin-bottom: 15px; }
.ap-box .password-field .offer-fields { margin-bottom: 0; }

.ap-box .new-card-btn {
	margin: 6px auto 0;
	padding: 13px 48px;
	min-width: 220px;
	justify-content: center;
}

.ap-btn-wide { width: 100%; }

/* Result line under the button: red for a problem, green box when the mail is sent */
.ap-note {
	font-size: 14px;
	line-height: 22px;
	margin: 14px 0 0;
	color: #d14343;
}

.ap-note[hidden] { display: none; }

.ap-alt {
	font-size: 15px;
	line-height: 24px;
	color: #222328;
	margin: 22px 0 0;
}

.ap-alt a {
	color: #4260cb;
	font-weight: 600;
	text-decoration: none;
}

.ap-alt a:hover { text-decoration: underline; }

/* "Check your inbox" after the link is sent */
.ap-done { display: none; }
.ap-done.is-on { display: block; }
.ap-box.is-done .ap-form { display: none; }

.ap-done .ap-icon { background: rgba(70, 184, 122, 0.12); color: #46b87a; }

.ap-done-mail {
	display: inline-block;
	font-weight: 600;
	color: #222328;
	word-break: break-all;
}

.ap-hint {
	font-size: 13px;
	line-height: 20px;
	color: #8c94b0;
	margin: 18px 0 0;
}

.ap-hint a { color: #4260cb; font-weight: 500; }

/* Password rule hint, turns green once met */
.ap-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	line-height: 20px;
	color: #8c94b0;
	margin: -4px 0 16px;
}

.ap-rule::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d6d9e3;
	flex: 0 0 8px;
}

.ap-rule.is-ok { color: #2e7d5b; }
.ap-rule.is-ok::before { background: #46b87a; }

@media (max-width: 1199.98px) {
	.ap-art { left: 20px; }
}

@media (max-width: 991.98px) {
	.ap-card {
		justify-content: center;
		margin: 40px auto 90px;
		min-height: 0;
		padding: 30px 20px;
	}
	.ap-art { display: none; }
	.ap-box { max-width: 560px; }
}

@media (max-width: 575.98px) {
	.ap-wrap { padding: 0 12px; }
	.ap-card {
		margin: 24px auto 60px;
		padding: 14px 12px;
		border-radius: 16px;
	}
	.ap-box {
		padding: 30px 20px 26px;
		outline-width: 5px;
	}
	.ap-icon { width: 56px; height: 56px; margin-bottom: 14px; }
	.ap-icon svg { width: 26px; height: 26px; }
	.ap-title { font-size: 20px; line-height: 30px; }
	.ap-text { font-size: 14px; line-height: 22px; margin-bottom: 18px; }
	.ap-box .new-card-btn { width: 100%; min-width: 0; padding: 13px 20px; }
}

@media (max-width: 359.98px) {
	.ap-box { padding: 26px 14px 22px; }
	.ap-title { font-size: 18px; line-height: 27px; }
}

/* /setup-account: the numbers our team put in the account, as chips under the intro */
.ap-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: -6px 0 22px;
}

.ap-number {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 50px;
	background: rgba(66, 96, 203, 0.08);
	color: #4260cb;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.ap-number--more {
	background: #f1f3f9;
	color: #8c94b0;
	font-weight: 500;
}