/* =============================================================================
   LOGIN PAGE
   ============================================================================= */

.login-page {
	padding-top:      80px;
	padding-bottom:   100px;
	background-color: var(--color-bg-subtle);
	border-top:       1px solid var(--color-border-subtle);
}

/* =============================================================================
   CARD
   ============================================================================= */

.login-card {
	width:            440px;
	max-width:        100%;
	margin:           0 auto;
	background-color: var(--color-bg-primary);
	border:           1px solid var(--color-border-subtle);
	border-radius:    10px;
	padding:          40px;
}

.login-card__heading {
	font-size:     var(--text-h3);
	margin-bottom: 28px;
}

/* =============================================================================
   ERROR
   ============================================================================= */

.login-card__error {
	background-color: rgba(150, 0, 27, 0.06);
	border:           1px solid rgba(150, 0, 27, 0.22);
	border-radius:    6px;
	color:            var(--color-accent);
	font-size:        var(--text-body-small);
	padding:          12px 16px;
	margin-bottom:    24px;
}

/* =============================================================================
   FORM
   ============================================================================= */

.login-form {
	display:        flex;
	flex-direction: column;
	gap:            20px;
	margin-bottom:  28px;
}

.login-form__field {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.login-form__field label {
	font-size:   var(--text-body-small);
	font-weight: var(--weight-bold);
	color:       var(--color-text-secondary);
}

.login-form__field input {
	width:            100%;
	height:           44px;
	padding:          0 14px;
	border:           1px solid var(--color-border-subtle);
	border-radius:    6px;
	background-color: var(--color-bg-primary);
	font-size:        var(--text-body-small);
}

.login-form__field input:focus {
	outline:      none;
	border-color: var(--color-accent);
}

.login-form__remember label {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   var(--text-body-small);
	color:       var(--color-text-secondary);
	cursor:      pointer;
}

.login-form__remember input[type="checkbox"] {
	width:        16px;
	height:       16px;
	flex-shrink:  0;
	margin:       0;
	accent-color: var(--color-accent);
	cursor:       pointer;
}

.login-form__submit {
	width:     100%;
	min-width: 0;
}

/* =============================================================================
   FOOTER LINKS
   ============================================================================= */

.login-card__forgot,
.login-card__register {
	font-size:  var(--text-body-small);
	color:      var(--color-text-secondary);
	text-align: center;
}

.login-card__forgot {
	margin-bottom: 10px;
}