/* Scoped to Mailorder; no global template or shared SqueezeBox changes. */
.mailorder-ui {
	margin: 0;
	background: #fff;
	color: #243247;
	font: 14px/1.5 Arial, Helvetica, sans-serif;
	text-align: left;
}
.mailorder-ui *, .mailorder-ui *:before, .mailorder-ui *:after { box-sizing: border-box; }
.mailorder-ui .mailorder-header {
	padding: 19px 56px 20px 24px;
	background: linear-gradient(125deg, #172537, #2d4259);
	color: #fff;
}
.mailorder-ui .mailorder-brand {
	display: block;
	margin-bottom: 4px;
	color: #b8c9dc;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 1.6px;
	text-transform: uppercase;
}
.mailorder-ui .mailorder-header h1 { margin: 0; color: #fff; font: bold 23px/1.2 Arial, Helvetica, sans-serif; }
.mailorder-ui .mailorder-body { padding: 20px 24px 24px; }
.mailorder-ui .mailorder-product {
	margin: 0 0 19px;
	padding: 12px 14px;
	border: 1px solid #e5eaf0;
	border-left: 3px solid #aa1428;
	border-radius: 8px;
	background: #f6f8fb;
}
.mailorder-ui .mailorder-product span { display: block; margin-bottom: 3px; color: #68778a; font-size: 11px; }
.mailorder-ui .mailorder-product strong { display: block; color: #243247; font-size: 14px; line-height: 1.4; overflow-wrap: break-word; }
.mailorder-ui .mailorder-description { margin-bottom: 16px; color: #68778a; }
.mailorder-ui .mailorder-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.mailorder-ui .mailorder-field { min-width: 0; }
.mailorder-ui .mailorder-field-wide { grid-column: 1 / -1; }
.mailorder-ui .mailorder-field label { display: block; margin-bottom: 5px; color: #435267; font-size: 12px; font-weight: bold; }
.mailorder-ui .mailorder-required { color: #aa1428; }
.mailorder-ui .mailorder-field .inputbox {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 9px 11px;
	border: 1px solid #d8e0e9;
	border-radius: 7px;
	background: #fff;
	color: #243247;
	font: 14px/20px Arial, Helvetica, sans-serif;
	box-shadow: 0 1px 2px rgba(24, 39, 57, .03);
	transition: border-color .15s, box-shadow .15s;
}
.mailorder-ui .mailorder-field .inputbox:focus { outline: none; border-color: #587e9e; box-shadow: 0 0 0 3px rgba(70, 111, 145, .12); }
.mailorder-ui .mailorder-field textarea { min-height: 96px; resize: vertical; }
.mailorder-ui .mailorder-security { margin-top: 18px; }
.mailorder-ui .cf-turnstile { max-width: 100%; }
.mailorder-ui #mailorder-captcha-status { margin-top: 8px; color: #7b5360; font-size: 11px; line-height: 1.45; }
.mailorder-ui #mailorder-captcha-status:empty { display: none; }
.mailorder-ui .mailorder-actions { display: flex; gap: 10px; margin-top: 18px; padding-top: 17px; border-top: 1px solid #edf0f4; }
.mailorder-ui .button {
	display: inline-block;
	min-height: 42px;
	margin: 0;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: 7px;
	background-image: none;
	font: bold 13px/20px Arial, Helvetica, sans-serif;
	text-align: center;
	text-shadow: none;
	cursor: pointer;
	transition: background-color .15s, box-shadow .15s;
}
.mailorder-ui .mailorder-primary { flex: 1; border-color: #aa1428; background: #aa1428; color: #fff; box-shadow: 0 3px 9px rgba(170, 20, 40, .16); }
.mailorder-ui .mailorder-primary:hover { border-color: #8c1021; background: #8c1021; color: #fff; }
.mailorder-ui .mailorder-primary:disabled { border-color: #e0e5eb; background: #e9edf2; color: #8793a3; box-shadow: none; cursor: not-allowed; }
.mailorder-ui .mailorder-secondary { border-color: #dfe5ec; background: #fff; color: #59677a; }
.mailorder-ui .mailorder-secondary:hover { border-color: #c7d1dd; background: #f5f7fa; color: #243247; }
.mailorder-ui .button:focus-visible { outline: 3px solid rgba(70, 111, 145, .4); outline-offset: 2px; }
.mailorder-ui .mailorder-success { padding-top: 38px; padding-bottom: 38px; text-align: center; }
.mailorder-ui .mailorder-success-icon { display: inline-block; width: 62px; height: 62px; border-radius: 50%; background: #e7f5ef; color: #24825b; font-size: 34px; line-height: 62px; }
.mailorder-ui .mailorder-success-title { margin: 18px 0 24px; color: #243247; font-size: 18px; font-weight: bold; line-height: 1.5; }

/* Applies only while the shared window contains a Mailorder iframe. */
#sbox-window:has(iframe[src*="com_mailorder"]) {
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 13px;
	box-shadow: 0 24px 80px rgba(8, 18, 31, .4) !important;
}
#sbox-window:has(iframe[src*="com_mailorder"]) #sbox-content { border-radius: 12px; overflow: hidden; }
#sbox-window:has(iframe[src*="com_mailorder"]) #sbox-btn-close {
	top: 15px !important;
	right: 15px !important;
	z-index: 2;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff !important;
	font: 22px/29px Arial, Helvetica, sans-serif !important;
	text-align: center;
}
#sbox-window:has(iframe[src*="com_mailorder"]) #sbox-btn-close:hover { background: rgba(255, 255, 255, .24); }
@media (max-width: 380px) {
	.mailorder-ui .mailorder-header { padding-left: 17px; }
	.mailorder-ui .mailorder-body { padding: 17px; }
	.mailorder-ui .mailorder-fields { grid-template-columns: minmax(0, 1fr); }
	.mailorder-ui .mailorder-field .inputbox { font-size: 16px; }
}