/**
 * The identity plugin's pages, styled for EasyGet.
 *
 * Moved here from three snippets on the live site, so the styling ships and is
 * versioned with the plugin that shapes these pages:
 *
 *   "EasyGet Auth Page"            (Simple Custom CSS and JS) - the form layout
 *   "MNS Style"                    (Simple Custom CSS and JS) - buttons, headers.
 *                                   Its mnswmc and .woocommerce-error rules belong
 *                                   to other code and stay in that snippet.
 *   "EasyGet Product Page CSS" §6  - the verification notice at checkout
 *
 * The edit-button rules are not in this file: they name the identity section,
 * so SiteStyles writes them inline from the configuration.
 */


/* ================================================================
   Verification form
   ================================================================ */

/* Each section as its own panel. */
.mnsfpt-auth-page-container .mnsfpt-fields-group {
	background: #fbfcfd !important;
	border: 1px solid #e5e8ec !important;
	border-radius: 10px !important;
	padding: 4px 14px 14px !important;
	margin-bottom: 16px !important;
}

/* Smaller headings. */
.mnsfpt-auth-page-container .mnsfpt-group-title {
	font-size: 13px !important;
	font-weight: 700 !important;
}
.mnsfpt-auth-page-container .mnsfpt-title {
	font-size: 12px !important;
}
.mnsfpt-auth-page-container h3 {
	font-size: 15px !important;
}

/* Submitted details: a light grey label on the right, the value dark and bold
   on the left, a dashed rule between rows. Every field alike, cards included. */
.mnsfpt-auth-page-container .mnsfpt-field {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 0 !important;
	border-bottom: 1px dashed #e5e8ec !important;
}

/* Only the last field of a group's last row loses its rule. Scoped to the last
   row because a multi-row section has several, and a plain :last-child would
   also remove the rule between two cards. */
.mnsfpt-auth-page-container .mnsfpt-section-rows .mnsfpt-section-row:last-child .mnsfpt-field:last-child {
	border-bottom: 0 !important;
}

.mnsfpt-auth-page-container .mnsfpt-field-title {
	flex: 0 0 auto;
	color: #6b7280 !important;
	font-weight: 500 !important;
	font-size: 13px !important;
}
.mnsfpt-auth-page-container .mnsfpt-field-content {
	flex: 1 1 auto;
	text-align: left;
	color: #1f2430 !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	word-break: break-word;
}

/* Image fields: the value takes the full width under its label. */
.mnsfpt-auth-page-container .mnsfpt-field-file .mnsfpt-field-content,
.mnsfpt-auth-page-container .mnsfpt-field-image .mnsfpt-field-content {
	flex: 1 1 100%;
	text-align: right;
}

/* Section headers. */
.mnsfpt-auth-page-container > .mnsfpt-fields-group > .mnsfpt-fields-group-header {
	background: rgba(223, 223, 223, 0.4) !important;
}

/* The plugin's own buttons. The add-a-card button is excluded: it is styled
   in cards.css, and this rule's !important background would otherwise paint
   it solid green. */
.mnsfpt input[type="submit"],
.mnsfpt button:not(.easyget-add-card),
.mnsfpt .button {
	display: flex !important;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	color: #fff !important;
	border-color: transparent !important;
	background: #1e7e34 !important;
	padding: 5px 10px;
}

/* The delete-row control of a multi-row section, always visible. */
.mnsfpt-auth-page-container > .mnsfpt-fields-group > .mnsfpt-fields-group-body .mnsfpt-section-rows .mnsfpt-section-row .section-delete-row {
	visibility: visible !important;
	opacity: 1 !important;
}


/* ================================================================
   Document uploads
   No section on the shop has an upload field at the moment. Kept so
   one added later looks right.
   ================================================================ */

/* The field rule above sets justify-content: space-between, which pushed an
   upload field's two children - label and drop zone - to opposite edges.
   The drop zone takes a full line instead. It is itself a column flexbox,
   so it is centred with align-items, not justify-content. */
.mnsfpt-auth-page-container .mnsfpt-field .mnsfpt-upload-area {
	flex: 0 0 100%;
	align-items: center;
	margin-top: 10px;
}

.mnsfpt-upload-area.mnsfpt-image .mnsfpt-uploader .mnsfpt-button {
	bottom: 20px !important;
	opacity: 1 !important;
}

/* The plugin gives the uploader and its children a fixed 300px width; a field
   on a phone is 236px, so the box overflowed. min-width: 0 is needed because a
   flex item's default min-width is min-content, which will not shrink. */
@media screen and (max-width: 767px) {

	.mnsfpt-auth-page-container .mnsfpt-field .mnsfpt-upload-area {
		min-width: 0 !important;
	}

	.mnsfpt-auth-page-container .mnsfpt-upload-area .mnsfpt-uploader {
		width: 100% !important;
	}

	.mnsfpt-auth-page-container .mnsfpt-upload-area .mnsfpt-icon,
	.mnsfpt-auth-page-container .mnsfpt-upload-area .mnsfpt-preview,
	.mnsfpt-auth-page-container .mnsfpt-upload-area .mnsfpt-image-progress {
		width: 100% !important;
		max-width: 100% !important;
	}
}


/* ================================================================
   The verification notice at cart and checkout
   Shaped like WooCommerce's standard error notice. NoticePosition moves
   it into .woocommerce-notices-wrapper.
   ================================================================ */

.woocommerce-notices-wrapper .mnsfpt-fixed-notice {
	position: static !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	z-index: auto !important;
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 18px !important;
	padding: 15px 45px 15px 15px !important;
	background: #fff !important;
	color: #616161 !important;
	border-top: 3px solid #b81c23 !important;
	border-radius: 0 !important;
	text-align: right !important;
	font-size: 15px;
	line-height: 1.9;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.woocommerce-notices-wrapper .mnsfpt-fixed-notice .mnsfpt-fixed-notice-link {
	color: #b81c23 !important;
	font-weight: 700;
	text-decoration: underline;
}
.woocommerce-notices-wrapper .mnsfpt-fixed-notice .mnsfpt-fixed-notice-close {
	float: left;
	cursor: pointer;
}
.woocommerce-notices-wrapper .mnsfpt-fixed-notice .mnsfpt-fixed-notice-close svg {
	width: 15px;
	height: 15px;
	fill: #9a9a9a;
}