/**
 * 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);
	--theme-checkbox-cutout-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-header-bg);
}

#qrmove button.qrmove-control{
	color: var(--theme-qr-header-fg) !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

#qrmove button.qrmove-control:hover,
#qrmove button.qrmove-control:focus-visible{
	color: var(--theme-qr-header-fg-hover, var(--theme-qr-header-fg)) !important;
	background: transparent !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

/* ========================= FIELDS ========================= */
#qrpersona input,
#qr form.qr-compact input[name="embed"],
#qr form.qr-compact select.qr-flag{
	background-color: var(--theme-qr-field-bg);
	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{
	background-color: var(--theme-qr-field-bg);
	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;
	background-attachment: scroll;
	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-field-fg);
	opacity: 0.55;
}

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

/* ========================= LABELS ========================= */
#qr label{
	color: 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){
	background: var(--theme-qr-button-bg) !important;
	background-image: none !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: inset 0 0 1px 1px var(--theme-qr-button-highlight, transparent) !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;
}

#qr button:not(.qrremovethumb):not(.mod-inline-action):not(.qrmove-control):hover,
#qr input[type='submit']:not(.mod-inline-action):hover{
	background: var(--theme-qr-button-hover-bg) !important;
	background-image: none !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: inset 0 0 1px 1px var(--theme-qr-button-hover-highlight, transparent) !important;
	text-shadow: none !important;
}

#qr button:not(.qrremovethumb):not(.mod-inline-action):not(.qrmove-control):active,
#qr input[type='submit']:not(.mod-inline-action):active{
	background: var(--theme-qr-button-active-bg, var(--theme-qr-button-hover-bg)) !important;
	background-image: none !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: inset 0 0 3px 0 var(--theme-qr-button-active-shadow, transparent) !important;
	text-shadow: none !important;
}

#qr input[type='submit']:not(.mod-inline-action){
	border-color: var(--theme-qr-submit-border, var(--theme-qr-button-border)) !important;
}

#qr button:not(.qrremovethumb):not(.mod-inline-action):not(.qrmove-control):disabled,
#qr input[type='submit']:not(.mod-inline-action):disabled{
	background: var(--theme-qr-button-disabled-bg) !important;
	background-image: none !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;
}