/* ------------------------------------------------------------------
   account/assets/styles/login.css
   OCEA member sign-in page.

   Everything is prefixed .ocea so it cannot collide with the rest of the site.
   Colours are pulled toward the OCEA navy already used in the email header.
------------------------------------------------------------------ */

.oceaLogin {
	--ocInk:     #23282d;
	--ocInkSoft: #6b7280;
	--ocLine:    #d8dde3;
	--ocPanel:   #ffffff;
	--ocNavy:    #1c2b4a;
	--ocBad:     #b42318;
	--ocRadius:  6px;

	max-width: 460px;
	margin: 40px auto 60px auto;
	padding: 0 16px;
	color: var(--ocInk);
}

.oceaLoginCard {
	background: var(--ocPanel);
	border: 1px solid var(--ocLine);
	border-radius: var(--ocRadius);
	padding: 28px 28px 24px 28px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.oceaLoginTitle {
	margin: 0 0 6px 0;
	font-size: 1.7em;
	line-height: 1.2;
	color: var(--ocNavy);
}

.oceaLoginIntro {
	margin: 0 0 22px 0;
	color: var(--ocInkSoft);
	font-size: 0.95em;
	line-height: 1.5;
}

/* ---------- messages ---------- */
.oceaLoginMessage {
	margin: 0 0 20px 0;
	padding: 12px 14px;
	border: 1px solid #f2c7c3;
	border-left: 3px solid var(--ocBad);
	border-radius: 4px;
	background: #fdf4f3;
	color: #7a1d15;
	font-size: 0.92em;
	line-height: 1.5;
}
.oceaLoginMessage i { font-style: italic; }

.oceaLoginBlocked {
	margin: 0;
	padding: 14px 16px;
	border-radius: 4px;
	background: #fdf4f3;
	color: #7a1d15;
	line-height: 1.6;
}

/* ---------- fields ---------- */
.oceaField { margin-bottom: 18px; }

.oceaField label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	font-size: 0.95em;
}

.oceaField input[type="text"],
.oceaField input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	height: 46px;                 /* comfortable target on a phone */
	padding: 0 12px;
	border: 1px solid var(--ocLine);
	border-radius: 4px;
	background: #fff;
	font-size: 16px;              /* under 16px, iOS zooms the page on focus */
	line-height: 1.3;
	color: var(--ocInk);
}

.oceaField input:focus {
	outline: none;
	border-color: var(--ocNavy);
	box-shadow: 0 0 0 3px rgba(28,43,74,.15);
}

.oceaFieldError {
	border-color: var(--ocBad) !important;
	background: #fdf4f3 !important;
}

.oceaHint {
	margin-top: 5px;
	font-size: 0.85em;
	color: var(--ocInkSoft);
}

/* ---------- show / hide password ---------- */
.oceaPassWrap { position: relative; }

.oceaPassWrap input { padding-right: 74px; }

.oceaPassToggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	height: 34px;
	padding: 0 12px;
	border: 1px solid var(--ocLine);
	border-radius: 3px;
	background: #f4f6f9;
	color: var(--ocInkSoft);
	font-size: 0.85em;
	font-family: inherit;
	cursor: pointer;
}
.oceaPassToggle:hover { color: var(--ocInk); border-color: #bcc4cd; }
.oceaPassToggle:focus {
	outline: none;
	border-color: var(--ocNavy);
	box-shadow: 0 0 0 2px rgba(28,43,74,.2);
}

/* ---------- actions ---------- */
.oceaLoginActions { margin-top: 22px; }

.oceaLoginButton {
	display: block;
	width: 100%;
	height: 48px;
	border: 0;
	border-radius: 4px;
	background: var(--ocNavy);
	color: #fff;
	font-size: 1.05em;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}
.oceaLoginButton:hover:not(:disabled) { background: #16223b; }
.oceaLoginButton:disabled { opacity: 0.65; cursor: default; }

.oceaLoginForgot {
	margin-top: 16px;
	text-align: center;
	font-size: 0.92em;
}
.oceaLoginForgot a { color: var(--ocNavy); }

.oceaLoginCookie {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--ocLine);
	text-align: center;
	font-size: 0.82em;
}
.oceaLoginCookie a { color: var(--ocInkSoft); }

/* The honeypot must be unreachable but not display:none — some bots skip
   hidden fields, which is the opposite of what it is for. */
.miraHP {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

@media (max-width: 520px) {
	.oceaLogin { margin-top: 20px; }
	.oceaLoginCard { padding: 22px 18px 20px 18px; }
}