/*
 * Braai Culture site functions — the pop-up rules of flatsome-child/style.css (2026-10-21), copied, not redesigned.
 * Carried: the four pop-ups (#popupform, #popupformquote, #needinstallation, #shippingDetails), their forms, the
 * "Shipping — How it works" columns and icons, the button spacing, and BC-033's <h2> title rules.
 * Changed: (1) rules that were global in the child theme (a bare textarea, .one-half, .one-full, .s-body, .sh-head,
 * .main-swrap) apply inside .white-popup-block only, so they do not restyle the new theme's pages; (2) the three
 * icons are data URIs (the old CSS loaded them from //braaiculture.com/wp-content/themes/flatsome-child/img/);
 * (3) Flatsome's clearfix helper is added for the pop-ups, because the new theme has none; (4) the close button's "X"
 * rule comes from the child theme's Customizer "Additional CSS" (0.1.1), which loads only with flatsome-child;
 * (5) the two-column layout of the "Get a Quote" form comes from the child theme's assets/custom.css (0.1.2).
 * Not here: the form controls' own look (for example the red Submit button) comes from the theme (Flatsome's global
 * form styles today; the new theme's form styles later).
 * Kept global, as in the child theme: html .mfp-container (no other Magnific Popup runs on the new theme's pages).
 * Not carried: the floating sale tab (D2), the Built For Order hint and the composite layout (job W3), the old
 * <h1> title rules (the pop-ups print <h2> since BC-033).
 */

/* --- The four pop-ups ---------------------------------------------------------------------------------------- */

div#popupform,
div#popupformquote,
div#needinstallation,
div#shippingDetails {
	background: #fff;
	max-width: 640px;
	margin: 0 auto;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}

div#popupform .s-head,
div#popupformquote .s-head,
div#needinstallation .s-head,
#shippingDetails .s-head {
	background: #D82435;
	padding: 0 24px;
}

div#popupform .mfp-close,
div#popupformquote .mfp-close,
div#needinstallation .mfp-close,
#shippingDetails .mfp-close {
	font-size: 24px;
	top: 23px !important;
	vertical-align: middle;
	opacity: 1;
	padding: 0;
	width: 33px;
	height: 33px;
	right: 24px;
	line-height: 20px;
	background: #fff !important;
	transform: none;
	border-radius: 30px !important;
	mix-blend-mode: unset;
	transition: all 0.3s ease-in-out;
}

#shippingDetails .mfp-close:hover {
	background: transparent !important;
	transition: all 0.3s ease-in-out;
}

div#popupform .mfp-close i,
div#popupformquote .mfp-close i,
div#needinstallation .mfp-close i,
#shippingDetails .mfp-close i {
	position: relative;
	top: -2px;
}

/* The "X" in the close button. The markup has <i class="fa fa-times">, and no page loads Font Awesome: on the old
   theme the letter comes from the child theme's Customizer "Additional CSS" (theme_mods_flatsome-child), which does
   not load with another theme. Same rule, kept to the pop-ups. */
.white-popup-block .mfp-close .fa.fa-times::before {
	content: 'X';
	font-style: normal;
	font-size: 0.7em;
}

/* BC-033 Stage 3 (2026-10-18): the pop-up titles are h2, not h1 (one H1 per page). */
div#popupform .s-head h2,
div#popupformquote .s-head h2,
div#needinstallation .s-head h2,
#shippingDetails .s-head h2 {
	text-transform: uppercase;
	color: #fff;
	line-height: 1.1em;
	letter-spacing: -1px;
	margin: 0;
	padding-top: 25px;
	padding-bottom: 20px;
	font-size: 1.7em;
}

div#popupform .s-head h2 { font-weight: 500; }
div#popupformquote .s-head h2,
div#needinstallation .s-head h2 { font-weight: 700; }
#shippingDetails .s-head h2 { font-weight: 800; }

div#popupform .s-head h2 span,
div#popupformquote .s-head h2 span,
div#needinstallation .s-head h2 span,
#shippingDetails .s-head h2 span {
	display: block;
	color: #000;
}

div#popupform .s-head h2 span { font-weight: 500; }
div#popupformquote .s-head h2 span,
div#needinstallation .s-head h2 span { font-weight: 700; }
#shippingDetails .s-head h2 span { font-weight: 900; }

/* --- The forms in the pop-ups (Ninja Forms 14, 19 and the installation form) ----------------------------------- */

div#popupform input[type='email'],
div#popupform input[type='search'],
div#popupform input[type='number'],
div#popupform input[type='url'],
div#popupform input[type='tel'],
div#popupform input[type='text'],
div#popupform textarea,
div#popupformquote input[type='email'],
div#popupformquote input[type='search'],
div#popupformquote input[type='number'],
div#popupformquote input[type='url'],
div#popupformquote input[type='tel'],
div#popupformquote input[type='text'],
div#popupformquote textarea,
div#needinstallation input[type='email'],
div#needinstallation input[type='search'],
div#needinstallation input[type='number'],
div#needinstallation input[type='url'],
div#needinstallation input[type='tel'],
div#needinstallation input[type='text'],
div#needinstallation textarea {
	border-radius: 20px;
}

#popupform select,
#popupformquote select {
	background-color: rgba(247, 247, 247, 1);
	border-radius: 20px;
}

#popupform input[type=submit],
#popupformquote input[type=submit] {
	width: 100%;
}

/* The "Get a Quote" form (Ninja Form 19) in two columns from 768 px: first name and email address side by side, then
   the postal code. From flatsome-child/assets/custom.css (0.1.2), unchanged. */
@media (min-width: 768px) {
	#nf-form-19-cont .nf-form-content {
		margin-top: 30px;
	}

	#nf-form-19-cont nf-fields-wrap {
		display: flex;
		flex-wrap: wrap;
		gap: 5px 20px;
	}

	#nf-form-19-cont nf-fields-wrap nf-field {
		width: 100%;
	}

	#nf-form-19-cont nf-fields-wrap nf-field:nth-child(1),
	#nf-form-19-cont nf-fields-wrap nf-field:nth-child(2),
	#nf-form-19-cont nf-fields-wrap nf-field:nth-child(3) {
		width: calc(50% - 10px);
	}
}

.white-popup-block .one-half-wrap {
	float: left;
	width: 48%;
}

.white-popup-block .one-half-wrap.last-wrap {
	float: right;
	width: 48%;
}

/* --- "Shipping — How it works" ---------------------------------------------------------------------------------- */

.white-popup-block .s-body .one-full {
	margin-bottom: 10px;
}

.white-popup-block .s-body {
	padding: 20px 24px 24px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.23em;
}

.white-popup-block .sh-head {
	background: #d82435;
	border-radius: 5px;
	padding: 8px 10px;
	width: 100%;
	float: left;
	margin-bottom: 12px;
}

.white-popup-block .sh-head .s-h-item {
	width: 38px;
	height: 42px;
	float: left;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAApBAMAAABAcv1LAAAACXBIWXMAAAsSAAALEgHS3X78AAAALVBMVEX///////////////9HcEz///////////////////////////////////////9QVjmRAAAADnRSTlPgo0DxAMGBIGAQMJFQcAJ2NukAAAEwSURBVCjPzdKxSsNAGAfwG10sboJDoNAMLuLkIoRQvhKzFgenIoQiLoVCcXHJkFkcorgKfQNfoIM+hItcKOki/J/B78vdhUv0Abwh5H4cd/fn/orsSI/dX6wcZdvbniVvgENrSYBqiO2NZ0IrWgKHrRkih2LjAMBUVtxFgmzjGc5eBrgSfI5wxCZU0sUAexansQrMxMMDBRTNDXi9YPoFzaZb3C/TDGJzF0B2zlAv2Eahh6jWJ2I0tJhkcndjHECQ4+CSnDWpJGHgmeAM56uFb3QfSZyu0WNVUt8mO/rbnta/TcZ/s6JnD1pF9ahjOU7VBnXhWQ69UfItWpOJ9MVgYznqd9OrD0G29BqyuelfCP052fF7N+fZnvITz78ttX0OuYL83t3ev8J01TdaOqL4B88qPp52TpG0AAAAAElFTkSuQmCC");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 10px;
}

.white-popup-block .sh-head .s-h-item:nth-child(2) {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAApBAMAAACrRUZIAAAACXBIWXMAAAsSAAALEgHS3X78AAAAIVBMVEX///////////////////9HcEz///////////////////9NfI8SAAAAC3RSTlNhES9PPwB4IHAIgVT3GIcAAAEVSURBVCjPzdOxTsMwEAbgQwJKu6GAxFghVcpapC7dWBBsUHFE7cyUKUsBMbWMjFB2BJWJ/qfkzva5aXgBPMTWF/uiO1+IbRymFdkiR6dtOZCQjD5PXw3JaM4TQ7XpJdxcZsGXaNMLiXX/sUFS+n4cR+wpktIx30QsFOlBiRX9LLikHnb8xwyfsBbDMKAPUkFtt4yokfuo+2J7q9J1DF09uFbjVRkTyFEPOJih1OGHzUKqkvRzwxQPpA53TVOU0sy2jG8hpWlZAU6237TJ6O8+Hf/Nui07WdPYXW1Zhi96R8BoGTAiebrzZJnuIP9qGK3yh4gjqgUK/XckV1w4o9iTcnFnqPQmG70rCKPU44JGm3/hbWHEv0RaHpmcV4hEAAAAAElFTkSuQmCC");
}

.white-popup-block .sh-head .s-h-item:nth-child(3) {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAApBAMAAACrRUZIAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFVBMVEX///////////////////////9HcExCdkjLAAAAB3RSTlMvHQknEgIAzrhSAgAAASNJREFUKM+dk7FugzAURS8J2dNIdIZWyoyquDNVm+5ViOeUwvv/T8h9fnaLSaZ6wT4crv1sA0nt6beH1OnwsmQdgEPOiN6QTCT06b+SqWzaEvH5DZSRKULhORgNQtH6w+C5DxCK9jK0Afq+JUSnSALc2+crtNiEyQjXmlmjIMMuQZrvUFYAziCTibYKTqmAQRdV/dBzfwWwnKMoe5VzYyZR6QNj2BRMoo4rNs9K5VqOdWQ2KSGzLnOPXd2aejX3ZABLu8Q5ojfqTvYu80b1JpEbT+Q2T3Kvv+ONd7x/5W0WebWeR5XlNSjBna9medxeB3m2g7O8MEB8Wp51kV5qHk9y5+P9I3TMiynxTjL5AbQqP7u7hGyP2X2eTuGMFv9CEz9kuwLXzNKt6uy2bwAAAABJRU5ErkJggg==");
}

.white-popup-block .one-half {
	width: 49%;
	margin-right: 1%;
	float: left;
}

.white-popup-block .one-half:last-child {
	margin-left: 1%;
	margin-right: 0%;
}

.white-popup-block .one-half p strong {
	display: block;
}

.white-popup-block .one-half p {
	margin: 0px;
}

.white-popup-block .one-full.clearfix.main-swrap p {
	margin-bottom: 10px;
}

.white-popup-block .main-swrap a {
	color: #D82435;
}

.white-popup-block .one-full.clearfix.main-swrap {
	font-weight: 500;
	margin-top: 10px;
	letter-spacing: 0px;
	margin-bottom: 0px;
}

/* Flatsome's clearfix helper, which the pop-up markup uses (the new theme has none): the floated columns keep their
   containers' height. */
.white-popup-block .clearfix::after {
	content: "";
	display: table;
	clear: both;
}

/* --- The buttons and the pop-up frame ----------------------------------------------------------------------------- */

html .shipping-details {
	margin-bottom: 0;
	margin-top: 10px;
}

.product-quick-view-container .shipping-details {
	display: none;
}

html .mfp-container {
	padding: 0px;
}

@media all and (max-width: 767px) {
	.white-popup-block .one-half {
		width: 100%;
		margin-right: 0%;
		margin-left: 0%;
		margin-bottom: 20px;
	}

	html .mfp-container {
		padding-top: 70px;
	}
}

@media all and (max-width: 600px) {
	.white-popup-block .one-half-wrap,
	.white-popup-block .one-half-wrap.last-wrap {
		width: 100%;
	}
}

@media (max-width: 549px) {
	div#popupform .s-head h2,
	div#popupformquote .s-head h2,
	div#needinstallation .s-head h2,
	#shippingDetails .s-head h2 {
		font-size: 1.4em;
	}
}