/*
 * Registration pages (page-register.php). Adds to main.css; the forms inside
 * the cards are UsersWP's own markup, given a card to sit in.
 */

.own-register__inner {
	max-width: var(--own-width-content);
	margin: 0 auto;
	padding-block: var(--own-space-8) var(--own-space-16);
	padding-left: var(--own-gutter);
	padding-right: var(--own-gutter);
}

.own-register__header { max-width: 60ch; margin-bottom: var(--own-space-8); }
.own-register__title { margin: 0 0 var(--own-space-3); font-size: 2.25rem; font-weight: var(--own-weight-heading); color: var(--own-color-primary); }
.own-register__lead { margin: 0; font-size: 1.0625rem; color: var(--own-color-text-2); }

.own-register__signed-in { display: flex; align-items: center; gap: var(--own-space-4); flex-wrap: wrap; margin-bottom: var(--own-space-8); }
.own-register__signed-in .own-btn { margin: 0; }

/* The chosen plan, shown above the forms */
.own-register__plan {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--own-space-1) var(--own-space-6);
	align-items: baseline;
	padding: var(--own-space-5) var(--own-space-6);
	margin-bottom: var(--own-space-6);
	background: var(--own-color-accent-tint);
	border: 1px solid color-mix(in srgb, var(--own-color-accent) 25%, transparent);
	border-radius: var(--own-radius-lg);
}
.own-register__plan-label { grid-column: 1 / -1; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--own-color-accent); }
.own-register__plan-name { margin: 0; font-size: 1.125rem; color: var(--own-color-primary); }
.own-register__plan-price { margin: 0; display: flex; gap: var(--own-space-2); align-items: baseline; flex-wrap: wrap; font-size: 1.5rem; font-weight: var(--own-weight-heading); color: var(--own-color-primary); }
.own-register__plan-period { font-size: .9rem; font-weight: 400; color: var(--own-color-muted); }
.own-register__plan-trial { font-size: .8rem; font-weight: 500; color: var(--own-color-success); }
.own-register__plan-note { grid-column: 1 / -1; margin: var(--own-space-2) 0 0; font-size: .9rem; color: var(--own-color-text-2); }

/* Two cards: register, login */
/* minmax(0, ...) on both tracks: UsersWP renders Bootstrap markup inside these
   cards, and a grid item's default min-width of auto lets that markup push the
   track wider than the page. On a 375px phone that overflowed the body by 33px
   and let the whole page slide sideways. */
.own-register__forms { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--own-space-6); align-items: start; margin-bottom: var(--own-space-12); }

/* Tame the Bootstrap grid UsersWP ships inside our card: its rows carry
   -15px side margins and its cards a width of their own. */
.own-register__card .row { margin-left: 0; margin-right: 0; }
.own-register__card .card,
.own-register__card .card-body,
.own-register__card .container-fluid { width: auto; max-width: 100%; padding-left: 0; padding-right: 0; }
.own-register__card form { max-width: 100%; }
.own-register__card { padding: var(--own-space-6); background: var(--own-color-surface); border: 1px solid var(--own-color-border); border-radius: var(--own-radius-lg); }
.own-register__card--register { box-shadow: var(--own-shadow-card); }
.own-register__card--login { background: var(--own-color-surface-muted); }
.own-register__card h2 { margin: 0 0 var(--own-space-1); font-size: 1.25rem; font-weight: var(--own-weight-heading); color: var(--own-color-primary); }
.own-register__card-lead { margin: 0 0 var(--own-space-5); font-size: .95rem; color: var(--own-color-text-2); }

/* UsersWP form controls inside the cards */
.own-register__card .uwp-form-group, .own-register__card .form-group { margin-bottom: var(--own-space-3); }
.own-register__card input[type="text"], .own-register__card input[type="email"], .own-register__card input[type="password"] {
	width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--own-color-border-input); border-radius: var(--own-radius); font-size: 14px; font-family: inherit; background: #fff;
}
.own-register__card input:focus { outline: none; border-color: var(--own-color-accent); }
.own-register__card button[type="submit"], .own-register__card input[type="submit"] {
	appearance: none; -webkit-appearance: none; width: 100%; padding: 13px 18px; border: 0; border-radius: var(--own-radius); background: var(--own-color-accent) !important; color: #fff !important; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; cursor: pointer; font-family: inherit;
}
.own-register__card button[type="submit"]:hover, .own-register__card input[type="submit"]:hover { background: var(--own-color-accent-hover) !important; }
.own-register__card--login button[type="submit"], .own-register__card--login input[type="submit"] { background: var(--own-color-primary) !important; }
.own-register__card--login button[type="submit"]:hover, .own-register__card--login input[type="submit"]:hover { background: var(--own-color-accent) !important; }
.own-register__card .uwp-login-link, .own-register__card .uwp-register-link { display: none; } /* the other form is beside it */
.own-register__card .uwp-forgot-password-link, .own-register__card .uwp-forgot-link { font-size: .85rem; }

/* Steps reuse the homepage/directory component */
.own-register__steps { padding: var(--own-space-8) 0; border-top: 1px solid var(--own-color-border); }
.own-register__steps .own-steps__list { margin: 0; }
.own-register__steps h3 { margin: 0 0 var(--own-space-1); font-size: 1.05rem; }
.own-register__steps p { margin: 0; font-size: .95rem; color: var(--own-color-text-2); }

.own-register__aside { padding: var(--own-space-6); background: var(--own-color-surface-muted); border-radius: var(--own-radius-lg); }
.own-register__aside h2 { margin: 0 0 var(--own-space-1); font-size: 1.05rem; color: var(--own-color-primary); }
.own-register__aside p { margin: 0; color: var(--own-color-text-2); }

@media (max-width: 900px) {
	.own-register__forms { grid-template-columns: minmax(0, 1fr); }
	.own-register__plan { grid-template-columns: 1fr; }
}