/* Marcin: sign in page (authentication.tpl, the part without ?back=create-account) in the style of the site -
   05.11.2026. A white card with the form on the page's #f9f9f9, next to it the pro account offer on the footer's deep
   green with the same facts as the footer. Loaded from header.tpl; rules scoped to body#authentication. */

html body#authentication .sf-auth {
	display: grid;
	/* two columns over the full container width (Marcin, 05.11.2026) */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 32px;
	/* top space = the gap between the two columns: the theme already leaves 30px under the header (15px on
	   phones), cancelled by the negative margin (Marcin, 10.11.2026) */
	margin-top: -30px;
	padding: 32px 0 80px;
}

/* ---------- form card ---------- */
html body#authentication .sf-auth__card {
	height: 100%;
	margin: 0;
	padding: 40px 40px 36px;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	background: #fff;
}

html body#authentication .sf-auth__card fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

html body#authentication .sf-auth__title {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background: none;
	color: #2b2b29;
	font-family: "Marcellus", serif;
	font-size: 32px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.15;
	text-align: left;
	text-transform: none;
}

html body#authentication .sf-auth__lead {
	margin: 0 0 28px;
	color: #6d6c67;
	font-size: 14px;
	line-height: 1.55;
}

/* errors.tpl (sign in and account creation): the theme's green-bordered 15px-radius grey box -> one reddish
   strip per message with a warning icon, as on the password page (custom/password.css).
   (was a rule for .alert, which errors.tpl never outputs - Marcin, 10.11.2026) */
html body#authentication .error_new {
	margin: 0 0 24px;
	padding: 0;
}

html body#authentication .error_new_errors_container {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

html body#authentication .error_new_error_container {
	position: relative;
	margin: 0 0 6px;
	padding: 12px 14px 12px 42px;
	border: 1px solid #f0d4d4;
	border-radius: 4px;
	background: #fdf3f3;
	color: #8a2c2c;
	font-size: 14px;
	line-height: 1.5;
}

html body#authentication .error_new_error_container:last-child {
	margin-bottom: 0;
}

html body#authentication .error_new_error_container::before {
	content: "";
	position: absolute;
	top: 13px;
	left: 14px;
	width: 18px;
	height: 18px;
	background: #a33a3a;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

html body#authentication .error_new_error_container strong {
	color: inherit;
	font-weight: 700;
}

html body#authentication .error_new_error_container a {
	color: #8a2c2c;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

html body#authentication .sf-auth__field {
	margin: 0 0 18px;
}

html body#authentication .sf-auth__field label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	color: #3c3c3b;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

html body#authentication .sf-auth__label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

html body#authentication .sf-auth__forgot,
html body#authentication .sf-auth__forgot:visited {
	color: #6d6c67;
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

html body#authentication .sf-auth__forgot:hover {
	color: #414f34;
}

/* fields: the theme's grey pills with italic placeholders -> 48px white fields with a thin line */
html body#authentication .sf-auth__card input.form-control {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	background: #fff;
	box-shadow: none;
	color: #2b2b29;
	font-size: 15px;
	font-style: normal;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html body#authentication .sf-auth__card input.form-control::placeholder {
	color: #a9a79f;
	font-style: normal;
}

html body#authentication .sf-auth__card input.form-control:focus {
	border-color: #414f34;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(65, 79, 52, 0.12);
}

/* the theme's validation colours on the field */
html body#authentication .sf-auth__card .form-error input.form-control {
	border-color: #a33a3a;
	background: #fff;
}

html body#authentication .sf-auth__card .form-ok input.form-control {
	border-color: #e3e3e3;
	background: #fff;
}

html body#authentication .sf-auth__card input.sf-auth__submit {
	display: block;
	width: 100%;
	height: 48px;
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: #414f34;
	box-shadow: none;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

html body#authentication .sf-auth__card input.sf-auth__submit:hover,
html body#authentication .sf-auth__card input.sf-auth__submit:focus-visible {
	background: #2f3a25;
}

/* ---------- pro account offer: the footer's deep green ---------- */
html body#authentication .sf-auth__join {
	display: flex;
	flex-direction: column;
	padding: 40px;
	border-radius: 4px;
	background: #2f3a25;
	color: rgba(255, 255, 255, 0.72);
}

html body#authentication .sf-auth__join-title {
	margin: 0 0 10px;
	padding: 0;
	color: #fff;
	font-family: "Marcellus", serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: none;
}

html body#authentication .sf-auth__join-lead {
	margin: 0 0 28px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1.6;
}

html body#authentication .sf-auth__perks {
	display: grid;
	gap: 18px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

html body#authentication .sf-auth__perks li {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 0;
}

html body#authentication .sf-auth__perks svg {
	/* global.css hides svg:not(:root) */
	display: block !important;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 11px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	fill: none;
	stroke: #fff;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

html body#authentication .sf-auth__perks span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	line-height: 1.4;
}

html body#authentication .sf-auth__perks strong {
	color: #fff;
	font-family: "Marcellus", serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.25;
}

/* white button, pushed to the bottom so the panel's foot lines up with the card's */
html body#authentication a.sf-auth__join-btn,
html body#authentication a.sf-auth__join-btn:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	margin: auto 0 0;
	border-radius: 4px;
	background: #fff;
	color: #2f3a25;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}

html body#authentication a.sf-auth__join-btn:hover,
html body#authentication a.sf-auth__join-btn:focus-visible {
	background: #e9eee4;
	color: #2f3a25;
}

html body#authentication .sf-auth__help {
	margin: 14px 0 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

html body#authentication .sf-auth__help a,
html body#authentication .sf-auth__help a:visited {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- tablet and phone: one column, the form first ---------- */
@media (max-width: 991px) {
	html body#authentication .sf-auth {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 20px 0 56px;
	}
}

@media (max-width: 767px) {
	html body#authentication .sf-auth__card,
	html body#authentication .sf-auth__join {
		padding: 28px 20px;
	}

	html body#authentication .sf-auth__title {
		font-size: 28px;
	}

	html body#authentication .sf-auth__join-title {
		font-size: 24px;
	}

	html body#authentication .sf-auth__join-btn {
		margin-top: 0;
	}
}

/* ===================================================================================================
   Marcin: account creation (authentication.tpl with ?back=create-account) in the same style, 10.11.2026.
   The form keeps its markup, names and scripts (authentication.js / global.js show and hide #submitAccount and
   #postcodeRestriction inline - no display !important on them). The form as a white card on the left, the pro
   account offer (.sf-reg__join, the sign in page's green panel) on the right instead of the banner image.
   =================================================================================================== */
html body#authentication .auth_form_container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	align-items: start;
	gap: 32px;
	/* top space = the 32px gap, as on the sign in page (the theme's 30px cancelled) */
	margin: -30px 0 0;
	padding: 32px 0 80px;
}

html body#authentication .auth_form_container::before,
html body#authentication .auth_form_container::after {
	display: none;
}

/* the hook's image banner and the old phone banners: the green panel says the same */
html body#authentication .auth_form_container > .auth_banner,
html body#authentication .auth_form_container > .auth_banner_visitor,
html body#authentication .auth_form_container > .mobile_account_creation_banner,
html body#authentication .auth_form_container > .mobile_account_creation_text_top,
html body#authentication .auth_form_container > .mobile_account_creation_text_bottom {
	display: none !important;
}

html body#authentication #account-creation_form {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 40px 40px 36px;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	background: #fff;
}

html body#authentication #account-creation_form fieldset.account_creation {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* title and lead as on the sign in page */
html body#authentication #account-creation_form .auth1h {
	margin: 0;
	padding: 0;
}

html body#authentication #account-creation_form .auth1h h3 {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	background: none;
	color: #2b2b29;
	font-family: "Marcellus", serif;
	font-size: 32px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.15;
	text-align: left;
	text-transform: none;
}

html body#authentication #account-creation_form .fieldset_info_text {
	margin: 0 0 28px;
	padding: 0;
	/* !important: global.css sets the theme's green on it with !important */
	color: #6d6c67 !important;
	font-size: 14px;
	line-height: 1.55;
	text-align: left;
}

/* sections: a small uppercase heading over a line instead of the grey bar */
html body#authentication #account-creation_form .order_details_basic_container {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

html body#authentication #account-creation_form .pol_table_top_title {
	display: block;
	height: auto;
	margin: 0 0 18px;
	padding: 0 0 10px;
	border: 0;
	border-bottom: 1px solid #ebebeb;
	border-radius: 0;
	background: none;
	/* tables.css centres it */
	text-align: left;
}

html body#authentication #account-creation_form .pol_table_top_title span {
	color: #2b2b29;
	font-family: "Marcellus", serif;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

html body#authentication #account-creation_form .order_details_rows {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* rows: two fields side by side, the label above each field */
html body#authentication #account-creation_form .order_details_row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	background: none;
}

html body#authentication #account-creation_form .order_details_half,
html body#authentication #account-creation_form .order_details_full {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

html body#authentication #account-creation_form .order_details_full {
	grid-column: 1 / -1;
}

html body#authentication #account-creation_form .order_detail_row_title {
	display: block;
	width: auto;
	/* the theme's 115px label column wrapped "Zip / Postal Code *" */
	max-width: none;
	min-width: 0;
	height: auto;
	margin: 0 0 6px;
	padding: 0;
	text-align: left;
}

html body#authentication #account-creation_form .order_detail_row_title label {
	display: block;
	margin: 0;
	padding: 0;
	color: #3c3c3b;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	text-transform: none;
}

html body#authentication #account-creation_form .order_detail_row_content {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* fields: 48px white with a thin line, as on the sign in page */
html body#authentication #account-creation_form .order_detail_row_content input.text,
html body#authentication #account-creation_form .order_detail_row_content input[type="password"],
html body#authentication #account-creation_form .order_detail_row_content select {
	display: block;
	width: 100%;
	max-width: none;
	height: 48px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	/* background: the site-wide #f4f4f4 of custom/forms.css */
	box-shadow: none;
	color: #2b2b29;
	font-size: 15px;
	font-style: normal;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html body#authentication #account-creation_form .order_detail_row_content select {
	padding-right: 40px;
	/* global.css ".form_table_style select" sets white !important and outranks forms.css - same grey as the inputs */
	background-color: #f4f4f4 !important;
	appearance: none;
	-webkit-appearance: none;
	/* !important: the same global.css rule clears the image with its background shorthand */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c3c3b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-position: right 14px center !important;
	background-repeat: no-repeat !important;
	background-size: 16px !important;
}

html body#authentication #account-creation_form .order_detail_row_content input::placeholder {
	color: #a9a79f;
	font-style: normal;
}

html body#authentication #account-creation_form .order_detail_row_content input:focus,
html body#authentication #account-creation_form .order_detail_row_content select:focus {
	border-color: #414f34;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(65, 79, 52, 0.12);
}

html body#authentication #account-creation_form .req_field_main {
	display: block;
	margin: -10px 0 0;
	/* !important: the theme's green from global.css */
	color: #8a8984 !important;
	font-size: 12px;
	text-align: left;
}

/* consents: grey small print, the theme's round checkmarks kept */
html body#authentication #account-creation_form .confirm_container {
	margin: 24px 0 0;
	padding: 0;
	border: 0;
	background: none;
}

html body#authentication #account-creation_form .confirm_container + .confirm_container {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #ebebeb;
}

html body#authentication #account-creation_form .confirm_container label {
	color: #3c3c3b;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	text-transform: none;
}

/* the theme pulls the label 25px left (margin -25px / padding 25px), so the round checkmark stood outside the
   fields' edge - the mark on the edge, the text 30px in */
html body#authentication #account-creation_form .checkbox_container_registration {
	position: relative;
	margin-left: 0;
	padding-left: 0;
}

html body#authentication #account-creation_form .checkbox_container_registration label {
	display: block;
	margin-left: 0;
	/* !important: global.css / responsive.css set 25-26px !important */
	padding-left: 30px !important;
}

/* the hidden checkbox (0px wide, first flex item) still kept the theme's 10px right margin before the label */
html body#authentication #account-creation_form .checkbox_container_registration input[type="checkbox"] {
	margin: 0;
}

html body#authentication #account-creation_form .checkbox_container_registration .checkmark {
	left: 0;
	/* global.css ".confirm_container .checkmark" pulls it 25px left */
	margin-left: 0;
}

html body#authentication #account-creation_form .reg_form_bottom_txt {
	margin: 0 0 22px;
}

html body#authentication #account-creation_form .reg_form_bottom_txt h3 {
	margin: 0 0 4px;
	padding: 0;
	color: #6d6c67;
	font-family: "Open Sans", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

html body#authentication #account-creation_form .reg_form_bottom_txt p {
	margin: 0;
	color: #6d6c67;
	font-size: 13px;
	line-height: 1.55;
}

html body#authentication #account-creation_form .confirm_container a {
	color: #414f34;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Register: the green 48px button, full width */
html body#authentication #account-creation_form .submit_container {
	float: none;
	margin: 28px 0 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

html body#authentication #account-creation_form input#submitAccount {
	float: none;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: #414f34;
	box-shadow: none;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

html body#authentication #account-creation_form input#submitAccount:hover,
html body#authentication #account-creation_form input#submitAccount:focus-visible {
	background: #2f3a25;
}

html body#authentication .sf-reg__join .sf-auth__perks {
	margin-bottom: 28px;
}

html body#authentication .sf-reg__signin {
	margin: auto 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	text-align: left;
}

/* the phone line to the left as well (centred on the sign in page) */
html body#authentication .sf-reg__join .sf-auth__help {
	text-align: left;
}

html body#authentication .sf-reg__signin a,
html body#authentication .sf-reg__signin a:visited {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 991px) {
	html body#authentication .auth_form_container {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 20px 0 56px;
	}
}

@media (max-width: 767px) {
	html body#authentication #account-creation_form {
		padding: 28px 20px;
	}

	html body#authentication #account-creation_form .auth1h h3 {
		font-size: 28px;
	}

	/* one field per row on phones */
	html body#authentication #account-creation_form .order_details_row {
		grid-template-columns: minmax(0, 1fr);
	}

	html body#authentication .sf-reg__join {
		padding: 28px 20px;
	}
}

/* phones: the theme leaves 15px under the header instead of 30px - the top space again equals the 20px gap */
@media (max-width: 767px) {
	html body#authentication .sf-auth,
	html body#authentication .auth_form_container {
		margin-top: -15px;
	}
}