/**
 * qr-visual-contract.css
 *
 * Phase 2 Quick Reply semantic surfaces (colors, borders, control chrome).
 * Loaded after theme CSS and qr-contract.css.
 */

/* ========================= QR PANEL ========================= */
#qr{
	border: 1px solid var(--theme-qr-panel-border);
	background-color: var(--theme-qr-panel-bg-color, var(--theme-qr-panel-bg));
	background-image: var(--theme-qr-panel-bg-image, none);
	background-repeat: var(--theme-qr-panel-bg-repeat, no-repeat);
	background-position: var(--theme-qr-panel-bg-position, 0 0);
	background-size: var(--theme-qr-panel-bg-size, auto);
	background-attachment: var(--theme-qr-panel-bg-attachment, scroll);
	--theme-checkbox-cutout-color: var(--theme-qr-panel-bg-color, var(--theme-qr-panel-bg));
	color: var(--theme-qr-panel-fg);
	opacity: 1;
	box-shadow: var(--theme-floating-panel-shadow);
	font-family: Arial, Verdana, sans-serif;
	font-size: 12px;
	line-height: 16px;
}

/* ========================= MOVE BAR ========================= */
#qrmove{
	background-color: var(--theme-qr-movebar-bg-color, var(--theme-qr-panel-bg-color, var(--theme-qr-panel-bg)));
}

#qrmove button.qrmove-control{
	color: var(--theme-qr-move-control-fg, var(--theme-qr-panel-fg, var(--theme-qr-header-fg))) !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	text-shadow: var(--theme-qr-move-control-text-shadow, none) !important;
	letter-spacing: var(--theme-qr-move-control-letter-spacing, normal) !important;
	text-transform: var(--theme-qr-move-control-text-transform, none) !important;
	font-style: var(--theme-qr-move-control-font-style, normal) !important;
	font-weight: bold !important;
}

#qrmove button.qrmove-control:hover,
#qrmove button.qrmove-control:focus-visible,
#qrmove button.qrmove-control:active{
	color: var(--theme-qr-move-control-fg-hover, var(--theme-qr-header-fg-hover, var(--theme-qr-move-control-fg, var(--theme-qr-header-fg)))) !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: var(--theme-qr-move-control-text-shadow, none) !important;
	letter-spacing: var(--theme-qr-move-control-letter-spacing, normal) !important;
	text-transform: var(--theme-qr-move-control-text-transform, none) !important;
	font-style: var(--theme-qr-move-control-font-style, normal) !important;
	opacity: var(--theme-qr-move-control-hover-opacity, 0.85);
}

/* ========================= FIELDS ========================= */
#qrpersona input,
#qr form.qr-compact input[name="embed"],
#qr form.qr-compact select.qr-flag{
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--theme-qr-field-bg-color, var(--theme-qr-field-bg));
	background-image: var(--theme-qr-field-bg-image, none);
	background-repeat: var(--theme-qr-field-bg-repeat, repeat);
	background-position: var(--theme-qr-field-bg-position, 0% 0%);
	background-size: var(--theme-qr-field-bg-size, auto);
	background-attachment: var(--theme-qr-field-bg-attachment, scroll);
	color: var(--theme-qr-field-fg);
	border: 1px solid var(--theme-qr-field-border);
	border-radius: var(--theme-qr-control-radius, var(--theme-qr-button-radius, 3px));
	transition: border-color 0.15s ease, flex 0.15s ease;
}

#qrpersona input:hover,
#qr form.qr-compact input[name="embed"]:hover,
#qr form.qr-compact select.qr-flag:hover{
	border-color: var(--theme-qr-field-border-hover);
}

#qrpersona input:focus,
#qr form.qr-compact input[name="embed"]:focus,
#qr form.qr-compact select.qr-flag:focus{
	border-color: var(--theme-qr-field-border-focus);
	outline: none;
}

#qr form.qr-compact textarea#body{
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--theme-qr-field-bg-color, var(--theme-qr-field-bg));
	background-image: var(--theme-qr-field-bg-image, none);
	background-repeat: var(--theme-qr-field-bg-repeat, repeat);
	background-position: var(--theme-qr-field-bg-position, 0% 0%);
	background-size: var(--theme-qr-field-bg-size, auto);
	background-attachment: var(--theme-qr-field-bg-attachment, scroll);
	color: var(--theme-qr-field-fg);
	border: 1px solid var(--theme-qr-field-border);
	border-radius: var(--theme-qr-control-radius, var(--theme-qr-button-radius, 3px));
	font-family: Arial, sans-serif;
	font-size: 13px;
	transition-property: border-color;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

#qr form.qr-compact textarea#body:hover{
	border-color: var(--theme-qr-field-border-hover);
}

#qr form.qr-compact textarea#body:focus{
	border-color: var(--theme-qr-field-border-focus);
}

#qr form.qr-compact input::placeholder,
#qr form.qr-compact textarea::placeholder{
	color: var(--theme-qr-placeholder-fg, var(--theme-qr-field-fg));
	opacity: var(--theme-qr-placeholder-opacity, 0.55);
}

#qr .qr-row-captcha label{
	color: var(--theme-form-muted-fg, var(--theme-qr-label-fg));
}

/* ========================= LABELS ========================= */
#qr label{
	color: var(--theme-form-muted-fg, var(--theme-qr-label-fg));
}

/* ========================= BUTTONS ========================= */
#qr button:not(.qrremovethumb):not(.mod-inline-action):not(.qrmove-control),
#qr input[type='submit']:not(.mod-inline-action){
	appearance: none !important;
	-webkit-appearance: none !important;
	background-color: var(--theme-qr-button-bg-color, var(--theme-qr-button-bg)) !important;
	background-image: var(--theme-qr-button-bg-image, none) !important;
	background-repeat: var(--theme-qr-button-bg-repeat, repeat) !important;
	background-position: var(--theme-qr-button-bg-position, 0% 0%) !important;
	background-size: var(--theme-qr-button-bg-size, auto) !important;
	background-attachment: var(--theme-qr-button-bg-attachment, scroll) !important;
	border: 1px solid var(--theme-qr-button-border) !important;
	border-radius: var(--theme-qr-control-radius, var(--theme-qr-button-radius, 3px)) !important;
	box-shadow: none !important;
	color: var(--theme-qr-button-fg) !important;
	font: bold 12px/16px "helvetica neue", helvetica, arial, sans-serif !important;
	padding: 2px 4px !important;
	margin: 0 !important;
	text-align: center;
	text-shadow: none !important;
	outline: none;
	filter: none !important;
}

#qr button:not(.qrremovethumb):not(.mod-inline-action):not(.qrmove-control):hover,
#qr input[type='submit']:not(.mod-inline-action):hover{
	background-color: var(--theme-qr-button-hover-bg-color, var(--theme-qr-button-hover-bg, var(--theme-qr-button-bg-color, var(--theme-qr-button-bg)))) !important;
	background-image: var(--theme-qr-button-bg-image, none) !important;
	background-repeat: var(--theme-qr-button-bg-repeat, repeat) !important;
	background-position: var(--theme-qr-button-bg-position, 0% 0%) !important;
	background-size: var(--theme-qr-button-bg-size, auto) !important;
	background-attachment: var(--theme-qr-button-bg-attachment, scroll) !important;
	border-color: var(--theme-qr-button-hover-border, var(--theme-qr-button-border)) !important;
	color: var(--theme-qr-button-hover-fg) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	filter: none !important;
}

#qr button:not(.qrremovethumb):not(.mod-inline-action):not(.qrmove-control):active,
#qr input[type='submit']:not(.mod-inline-action):active{
	background-color: var(--theme-qr-button-active-bg-color, var(--theme-qr-button-active-bg, var(--theme-qr-button-hover-bg-color, var(--theme-qr-button-hover-bg, var(--theme-qr-button-bg-color, var(--theme-qr-button-bg)))))) !important;
	background-image: var(--theme-qr-button-bg-image, none) !important;
	background-repeat: var(--theme-qr-button-bg-repeat, repeat) !important;
	background-position: var(--theme-qr-button-bg-position, 0% 0%) !important;
	background-size: var(--theme-qr-button-bg-size, auto) !important;
	background-attachment: var(--theme-qr-button-bg-attachment, scroll) !important;
	border-color: var(--theme-qr-button-active-border, var(--theme-qr-button-border)) !important;
	color: var(--theme-qr-button-active-fg, var(--theme-qr-button-hover-fg)) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	filter: none !important;
}

#qr button:not(.qrremovethumb):not(.mod-inline-action):not(.qrmove-control):focus-visible,
#qr input[type='submit']:not(.mod-inline-action):focus-visible{
	background-color: var(--theme-qr-button-hover-bg-color, var(--theme-qr-button-hover-bg, var(--theme-qr-button-bg-color, var(--theme-qr-button-bg)))) !important;
	background-image: var(--theme-qr-button-bg-image, none) !important;
	background-repeat: var(--theme-qr-button-bg-repeat, repeat) !important;
	background-position: var(--theme-qr-button-bg-position, 0% 0%) !important;
	background-size: var(--theme-qr-button-bg-size, auto) !important;
	background-attachment: var(--theme-qr-button-bg-attachment, scroll) !important;
	border-color: var(--theme-qr-button-hover-border, var(--theme-qr-button-border)) !important;
	color: var(--theme-qr-button-hover-fg) !important;
	box-shadow: none !important;
	text-shadow: none !important;
	filter: none !important;
}

#qr button:not(.qrremovethumb):not(.mod-inline-action):not(.qrmove-control):disabled,
#qr input[type='submit']:not(.mod-inline-action):disabled{
	background-color: var(--theme-qr-button-disabled-bg-color, var(--theme-qr-button-disabled-bg, var(--theme-qr-button-bg-color, var(--theme-qr-button-bg)))) !important;
	background-image: var(--theme-qr-button-bg-image, none) !important;
	background-repeat: var(--theme-qr-button-bg-repeat, repeat) !important;
	background-position: var(--theme-qr-button-bg-position, 0% 0%) !important;
	background-size: var(--theme-qr-button-bg-size, auto) !important;
	background-attachment: var(--theme-qr-button-bg-attachment, scroll) !important;
	border-color: var(--theme-qr-button-disabled-border, var(--theme-qr-button-border)) !important;
	color: var(--theme-qr-button-disabled-fg) !important;
	box-shadow: none !important;
	opacity: var(--theme-form-disabled-opacity);
}

/* ========================= THUMBNAILS / REMOVE ========================= */
.qrthumb{
	background-color: var(--theme-qr-thumb-bg, var(--theme-qr-field-bg));
}

.qrremovethumb{
	background: var(--theme-qr-remove-bg);
	color: var(--theme-qr-remove-fg);
}

/* ========================= WARNINGS ========================= */
#qrwarning{
	color: var(--theme-qr-warning-fg, var(--theme-blotter));
	line-height: 16px;
}

/* ========================= ANTI-FOUC ========================= */
html.js-ready.qr-preferred:not(.qr-ready) form[name="post"]{
	visibility: hidden;
}

/* ========================= QR INTERIOR SURFACE PAINT ========================= */
/* Stable wrappers/cells carry field art; native controls stay transparent. */
#qr form.qr-compact #qrgrid > #qrpersona,
#qr form.qr-compact #qrgrid > .qr-row-captcha,
#qr form.qr-compact #qrgrid .qr-media-slot,
#qr form.qr-compact #qrgrid .qr-right-col {
	background-color: var(--theme-qr-field-bg-color, var(--theme-qr-field-bg));
	background-image: var(--theme-qr-field-bg-image, none);
	background-repeat: var(--theme-qr-field-bg-repeat, repeat);
	background-position: var(--theme-qr-field-bg-position, 0% 0%);
	background-size: var(--theme-qr-field-bg-size, auto);
	background-attachment: var(--theme-qr-field-bg-attachment, scroll);
}

#qr form.qr-compact #qrgrid > .qr-body-surface {
	background-color: var(--theme-qr-field-bg-color, var(--theme-qr-field-bg));
	background-image: var(--theme-qr-textarea-bg-image, var(--theme-qr-field-bg-image, none));
	background-repeat: var(--theme-qr-textarea-bg-repeat, var(--theme-qr-field-bg-repeat, repeat));
	background-position: var(--theme-qr-textarea-bg-position, var(--theme-qr-field-bg-position, 0% 0%));
	background-size: var(--theme-qr-textarea-bg-size, var(--theme-qr-field-bg-size, auto));
	background-attachment: var(--theme-qr-field-bg-attachment, scroll);
}

#qr form.qr-compact #qrgrid input[type="text"],
#qr form.qr-compact #qrgrid input[type="password"],
#qr form.qr-compact #qrgrid input[type="submit"],
#qr form.qr-compact #qrgrid textarea#body,
#qr form.qr-compact #qrgrid select.qr-flag,
#qr form.qr-compact #qrgrid button:not(.qrmove-control):not(.qrremovethumb):not(.mod-inline-action) {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-color: transparent !important;
	background-image: none !important;
	background-repeat: repeat !important;
	background-position: 0 0 !important;
	background-size: auto !important;
	background-attachment: scroll !important;
	box-shadow: none !important;
}

#qr form.qr-compact #qrgrid input[type="text"]:hover,
#qr form.qr-compact #qrgrid input[type="text"]:focus,
#qr form.qr-compact #qrgrid input[type="password"]:hover,
#qr form.qr-compact #qrgrid input[type="password"]:focus,
#qr form.qr-compact #qrgrid textarea#body:hover,
#qr form.qr-compact #qrgrid textarea#body:focus,
#qr form.qr-compact #qrgrid select.qr-flag:hover,
#qr form.qr-compact #qrgrid select.qr-flag:focus,
#qr form.qr-compact #qrgrid button:not(.qrremovethumb):not(.mod-inline-action):not(.qrmove-control):hover,
#qr form.qr-compact #qrgrid button:not(.qrremovethumb):not(.mod-inline-action):not(.qrmove-control):focus-visible,
#qr form.qr-compact #qrgrid button:not(.qrremovethumb):not(.mod-inline-action):not(.qrmove-control):active,
#qr form.qr-compact #qrgrid input[type="submit"]:not(.mod-inline-action):hover,
#qr form.qr-compact #qrgrid input[type="submit"]:not(.mod-inline-action):focus-visible,
#qr form.qr-compact #qrgrid input[type="submit"]:not(.mod-inline-action):active,
#qr form.qr-compact #qrgrid input[type="submit"]:not(.mod-inline-action):disabled {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
}