/* The pages a partner meets before the pro area: login, verification code, choose a password (templates/pro/).
   On the pro blue: one white card, GlobeSailor | Pro and the language switch just above it at its width (so they stay
   with it on any screen), the copyright under it. On phones the brand and the languages stack above the card. */

body {
	min-height: 100vh;
	background: linear-gradient(165deg, #0b6db2 0%, #0761a0 45%, #05548c 100%);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #33404d;
}

/* the column the card sets: header, card and footer share its width, centred on the page */
.login-container {
	--card-max: 28rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	width: 100%;
	max-width: calc(var(--card-max) + 4rem);
	height: auto;
	min-height: 100vh;
	margin: 0 auto;
	padding: 2rem;
}
.login-container--wide { --card-max: 60rem; }

/* GlobeSailor | Pro on the left, the language picker on the right, both on the card's edges */
.login-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.1rem; padding: 0 .75rem; }
.brand { display: flex; align-items: center; gap: .6rem; margin: 0; color: white; font-size: 1.7rem; line-height: 1; }
.brand img { display: block; height: 2.2rem; width: auto; }
.brand span { opacity: .9; }

/* language picker: a small button (globe, current code), a menu of every language in its own name */
.lang-switch { position: relative; z-index: 2; margin: 0; font-size: .8125rem; }
.lang-switch summary { display: flex; align-items: center; gap: .45rem; padding: .45rem .75rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .08); color: white; font-weight: 600; letter-spacing: .04em; line-height: 1; list-style: none; cursor: pointer; user-select: none; transition: background-color .15s; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover,
.lang-switch[open] summary { background: rgba(255, 255, 255, .18); }
.lang-switch summary:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.lang-switch svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.lang-switch__globe { stroke-width: 1.3; opacity: .9; }
.lang-switch__chevron { stroke-width: 1.6; transition: transform .15s; }
.lang-switch[open] .lang-switch__chevron { transform: rotate(180deg); }

.lang-switch__menu { position: absolute; top: calc(100% + .5rem); right: 0; display: grid; grid-template-columns: minmax(10rem, max-content); gap: 2px; width: max-content; max-width: calc(100vw - 2rem); max-height: min(24rem, 70vh); margin: 0; padding: .4rem; overflow-y: auto; border-radius: 10px; background: white; box-shadow: 0 12px 32px rgba(0, 25, 55, .3); list-style: none; }
.lang-switch__menu--cols { grid-template-columns: repeat(2, minmax(9rem, max-content)); }
.lang-switch__menu a,
.lang-switch__menu [aria-current] { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .55rem .7rem; border-radius: 6px; color: #33404d; text-decoration: none; white-space: nowrap; }
.lang-switch__menu small { font-size: .6875rem; font-weight: 600; letter-spacing: .06em; color: #8a96a3; }
.lang-switch__menu a:hover,
.lang-switch__menu a:focus-visible { outline: none; background: #eef5fb; color: #0e6ab7; }
.lang-switch__menu [aria-current] { background: #0e6ab7; color: white; font-weight: 600; }
.lang-switch__menu [aria-current] small { color: rgba(255, 255, 255, .75); }

/* the card */
.login-box { position: relative; max-width: none; margin: 0; padding: 2.25rem 2rem 2.5rem; overflow: hidden; border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 25, 55, .28); }
.login-box > * { position: relative; z-index: 1; }
/* pixel wave (dissolving square columns) in the lower-right corner, behind the content: one static image.
   Left and top fade so form text stays readable. Fixed 420×180 — never scaled down; stays right/bottom. */
.login-box:not(.login-box--wide)::after,
.login-scene::after { content: ""; position: absolute; right: 0; bottom: 0; z-index: 0; width: 420px; height: 180px; background: url("pro-login-waves.svg?v=14") 0 0 / 420px 180px no-repeat; opacity: .7; pointer-events: none; }
.login-scene::after { opacity: .65; }
/* room under the fields so the waves sit below the form, not through it */
.login-box:not(.login-box--wide) { padding-bottom: 10rem; }
.login-scene { position: relative; }
.login-scene > * { position: relative; z-index: 1; }
.login-box--wide { padding: 0; overflow: hidden; }
.login-box__body { max-width: 23rem; }
.login-box__body h1,
.login-box h1 { margin: 0 0 1.25rem; font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: #1F3A5F; }
.login-box__body > p { margin: 0 0 1.5rem; }
.login-box__body > p:last-child { margin-bottom: 0; }
.login-box a { color: #0e6ab7; }
.login-box a:hover { color: #054880; }

/* small line above a title (Pro Space) */
.login-eyebrow { display: block; margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #0e6ab7; }

/* fields: roomy, a clear focus ring */
.login-box form { margin-bottom: 0; }
.login-box .form-control { margin-bottom: 1.25rem; }
.form-control label { margin-bottom: .4rem; font-size: .875rem; font-weight: 600; color: #33404d; }
.form-control input { padding: .7rem .85rem; border: 1px solid #c3ccd6; border-radius: 6px; background: white; color: #1d2833; transition: border-color .15s, box-shadow .15s; }
.form-control input::placeholder { color: #9aa5b1; }
.form-control input:hover { border-color: #8d9aa8; }
.form-control input:focus { outline: none; border-color: #0e6ab7; box-shadow: 0 0 0 3px rgba(14, 106, 183, .18); }

.login-box form input[type=submit] { padding: .8rem 1rem; border-radius: 6px; font-weight: 700; transition: background-color .15s, border-color .15s; }
.login-box form input[type=submit]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(14, 106, 183, .3); }

.error-msg { padding: .65rem .85rem; border: 1px solid #f1b7b2; border-radius: 6px; background: #fdf0ef; color: #a5281b; text-align: left; line-height: 1.4; }

.login-copyright { margin-top: 1.25rem; text-align: center; font-size: .75rem; color: rgba(255, 255, 255, .6); }

/* the two-pane card goes back to one column, as narrow as the others */
@media (max-width: 860px) {
	.login-container--wide { --card-max: 28rem; }
}

/* phones: a smaller brand, still on one row with the picker; under 360px they stack */
@media (max-width: 560px) {
	.login-container { padding: 1.25rem 1rem; justify-content: flex-start; }
	/* phones: the full width for the brand and the picker, no inset */
	.login-head { margin-bottom: 1rem; padding: 0; }
	.brand { font-size: 1.35rem; gap: .5rem; }
	.brand img { height: 1.7rem; }
	.lang-switch summary { padding: .55rem .75rem; }
	.login-box { padding: 1.75rem 1.25rem 2rem; }
	.login-box:not(.login-box--wide) { padding-bottom: 9rem; }
	.login-box--wide { padding: 0; }
	.login-box__body h1,
	.login-box h1 { font-size: 1.5rem; }
	.lang-switch__menu--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
	.login-head { flex-direction: column; }
}