/**
 * The sign-in modal.
 *
 * UsersWP renders it from Bootstrap, which is why it arrived in Bootstrap's
 * blue on a site that is green everywhere else. The tabs are ours; the rest is
 * the plugin's markup, restyled without touching it.
 */

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.gcn-auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gcn-space-1);
	margin: 0 var(--gcn-space-5);
	padding: var(--gcn-space-1);
	background: var(--gcn-surface-sunken);
	border-radius: var(--gcn-radius-md);
}

.gcn-auth-tab {
	min-height: 40px;
	padding: 0 var(--gcn-space-3);
	font-family: inherit;
	font-size: var(--gcn-text-base);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-text-muted);
	background: none;
	border: 0;
	border-radius: var(--gcn-radius-sm);
	cursor: pointer;
	transition:
		color var(--gcn-duration) var(--gcn-ease),
		background-color var(--gcn-duration) var(--gcn-ease);
}

.gcn-auth-tab:hover {
	color: var(--gcn-brand-strong);
}

.gcn-auth-tab.is-active {
	color: var(--gcn-brand-strong);
	background: var(--gcn-surface);
	box-shadow: var(--gcn-shadow-sm);
}

.gcn-auth-tab:focus-visible {
	outline: none;
	box-shadow: var(--gcn-ring);
}

/*
 * The tabs say which form this is, so the title above them repeats itself, and
 * the "Create account" / "Login" text links under the button offer the move
 * the tabs already offer. !important because they carry Bootstrap's own
 * d-block, which is !important itself.
 */
.uwp-auth-modal .modal-title,
.uwp-auth-modal .card-body > .card-title,
.uwp-auth-modal .uwp-login-link,
.uwp-auth-modal .uwp-register-link {
	display: none !important;
}

/*
 * The social-login block, when nothing is configured to log in with: UsersWP
 * prints the rule and the "Login via Social" heading before it knows whether
 * any provider will follow, which left a heading over nothing.
 */
.uwp-auth-modal .modal-content .bsui:not(:has(a)):not(:has(button)):not(:has(input)) {
	display: none;
}

/* --------------------------------------------------------------------------
   The forms inside it
   -------------------------------------------------------------------------- */

.uwp-auth-modal .modal-content {
	border: 0;
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-lg);
}

.uwp-auth-modal .modal-header {
	padding: var(--gcn-space-4) var(--gcn-space-5) var(--gcn-space-3);
	border-bottom: 0;
}

.uwp-auth-modal .card-body {
	padding: var(--gcn-space-5);
}

.uwp-auth-modal .form-control {
	min-height: 44px;
	font-size: var(--gcn-text-base);
	border-color: var(--gcn-rule);
	border-radius: var(--gcn-radius-sm);
}

.uwp-auth-modal .form-control:focus {
	border-color: var(--gcn-brand);
	box-shadow: var(--gcn-ring);
}

/* Bootstrap's blue, in green. */
.uwp-auth-modal .btn-primary {
	padding: 0.7em 1.4em;
	font-weight: var(--gcn-weight-semibold);
	letter-spacing: 0;
	text-transform: none;
	color: var(--gcn-brand-contrast);
	background-color: var(--gcn-brand);
	border-color: var(--gcn-brand);
	border-radius: var(--gcn-radius-pill);
}

.uwp-auth-modal .btn-primary:hover,
.uwp-auth-modal .btn-primary:focus,
.uwp-auth-modal .btn-primary:active {
	color: var(--gcn-brand-contrast);
	background-color: var(--gcn-brand-strong);
	border-color: var(--gcn-brand-strong);
}

.uwp-auth-modal a {
	color: var(--gcn-brand-strong);
}

/* --------------------------------------------------------------------------
   Remember Me

   Bootstrap draws this one by floating the input into the label's left
   padding, which left the box and its text touching. A flex row with a real
   gap holds them apart, and the box is drawn in the brand colour rather than
   left as the browser's own square.
   -------------------------------------------------------------------------- */

.uwp-auth-modal .uwp-remember-me {
	margin: 0 0 var(--gcn-space-4);
}

.uwp-auth-modal .uwp-remember-me .mb-3 {
	margin: 0 !important;
}

.uwp-auth-modal .form-check {
	display: flex;
	align-items: center;
	gap: var(--gcn-space-2);
	min-height: 0;
	margin: 0;
	padding-left: 0;
}

.uwp-auth-modal .form-check .form-check-input {
	flex: 0 0 auto;
	/* Bootstrap floats this into the label's left padding with a negative
	   margin, at the same specificity as a two-class selector — so the rule
	   names .form-check too, rather than depending on which sheet loads last. */
	float: none;
	width: 20px;
	height: 20px;
	margin: 0;
	/* A stylesheet further up gives every input 12px of side padding, which
	   with border-box forced this one 6px wider than it is tall. */
	padding: 0;
	background-color: var(--gcn-surface);
	border: 1px solid var(--gcn-rule);
	border-radius: var(--gcn-radius-xs);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition:
		background-color var(--gcn-duration) var(--gcn-ease),
		border-color var(--gcn-duration) var(--gcn-ease);
}

.uwp-auth-modal .form-check .form-check-input:hover {
	border-color: var(--gcn-brand);
}

.uwp-auth-modal .form-check .form-check-input:checked {
	background-color: var(--gcn-brand);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7.5 5.5 10.5 11.5 4' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
	border-color: var(--gcn-brand);
}

.uwp-auth-modal .form-check .form-check-input:focus,
.uwp-auth-modal .form-check .form-check-input:focus-visible {
	outline: none;
	border-color: var(--gcn-brand);
	box-shadow: var(--gcn-ring);
}

.uwp-auth-modal .form-check-label {
	margin: 0;
	font-size: var(--gcn-text-base);
	font-weight: 400;
	color: var(--gcn-text-soft);
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   The rest of the dialog
   -------------------------------------------------------------------------- */

.uwp-auth-modal .modal-dialog {
	max-width: 420px;
}

.uwp-auth-modal .modal-header {
	/* The close button, and nothing else: the tabs carry the title. */
	justify-content: flex-end;
	padding: var(--gcn-space-3) var(--gcn-space-3) 0;
}

.uwp-auth-modal .card-body {
	padding: var(--gcn-space-5) var(--gcn-space-6) var(--gcn-space-6);
}

.uwp-auth-modal .card {
	border: 0;
}

/* Fields: one rhythm, rather than Bootstrap's mb-3 on some rows and not
   others. */
.uwp-auth-modal .card-body [data-argument] {
	margin-bottom: var(--gcn-space-3) !important;
}

.uwp-auth-modal .input-group-text {
	background: var(--gcn-surface-sunken);
	border-color: var(--gcn-rule);
	color: var(--gcn-text-muted);
}

.uwp-auth-modal .btn-primary {
	width: 100%;
	margin-top: var(--gcn-space-2);
	letter-spacing: var(--gcn-tracking-wide);
}

/* The footer link sits under the button, centred, as a quiet second option. */
.uwp-auth-modal .uwp-footer-links {
	margin-top: var(--gcn-space-4);
	text-align: center;
}

.uwp-auth-modal .uwp-footer-link {
	display: inline-block;
	float: none !important;
	width: auto !important;
}

.uwp-auth-modal .uwp-footer-links a {
	font-size: var(--gcn-text-sm);
	color: var(--gcn-text-muted);
	text-decoration: none;
}

.uwp-auth-modal .uwp-footer-links a:hover {
	color: var(--gcn-brand-strong);
	text-decoration: underline;
}

/* The tabs run the full width of the body they sit over. */
.gcn-auth-tabs {
	margin-inline: var(--gcn-space-6);
}

/* Nothing left in the footer once the switch link is hidden — no empty band. */
.uwp-auth-modal .uwp-footer-links:not(:has(a:not(.uwp-login-link):not(.uwp-register-link))) {
	display: none;
}