/* Quote button + popup
   Theme orange: #EE8028 (matches $color-dark-orange from _variables.scss).
   Uses theme's existing Magnific Popup setup. */

.site-header .header-right-part .bottom-part {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	flex-wrap: nowrap;
}

.site-header .quote-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #EE8028;
	color: #FFFFFF;
	font-family: sofia-pro, Arial, sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 11px 18px;
	border-radius: 5px;
	border: 2px solid #EE8028;
	box-shadow: 0 2px 6px rgba(238, 128, 40, 0.25);
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
	cursor: pointer;
}

.site-header .quote-button:hover,
.site-header .quote-button:focus {
	background: #FFFFFF;
	color: #EE8028;
	box-shadow: 0 4px 10px rgba(238, 128, 40, 0.35);
	transform: translateY(-1px);
	outline: none;
}

.site-header .quote-button:active {
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(238, 128, 40, 0.25);
}

/* Tablet: shrink slightly so it fits with icons */
@media (max-width: 80em) {
	.site-header .quote-button {
		font-size: 13px;
		padding: 10px 14px;
	}
}

/* Small tablet / large phone: keep compact */
@media (max-width: 60em) {
	.site-header .quote-button {
		font-size: 12px;
		padding: 9px 12px;
	}
}

/* Phone: keep button visible but compact so it fits alongside the header icons.
   Header right column shares space with search, phone, cart, and hamburger icons,
   so we tighten gap, padding, and font-size — and shorten the label via CSS.
   Also force icons-part to a single non-wrapping row and trim icon margins so
   nothing breaks onto a second line. */
@media (max-width: 40em) {
	/* Vertically center logo with the right-side button + icons */
	.site-header .row {
		align-items: center;
	}
	.site-header .site-branding,
	.site-header .header-right-part {
		display: flex;
		align-items: center;
	}

	/* Right column: button + icons on one line, no wrapping */
	.site-header .header-right-part .bottom-part {
		gap: 8px;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	/* Keep all icons on a single row regardless of inline-block flow */
	.site-header .header-right-part .icons-part {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	.site-header .header-right-part .icons-part > a,
	.site-header .header-right-part .icons-part > div {
		margin-left: 8px;        /* was 15px in theme — too wide alongside the button */
		padding-bottom: 0;       /* theme adds 15px which inflated row height on mobile */
		flex: 0 0 auto;
	}
	.site-header .header-right-part .icons-part > div:first-child,
	.site-header .header-right-part .icons-part > a:first-child {
		margin-left: 0;
	}
	/* Slightly smaller icons so the row doesn't overflow */
	.site-header .header-right-part .icons-part svg {
		height: 19px;
	}
	.site-header .header-right-part .icons-part .cart-link svg {
		height: 22px;
		margin-top: -4px;
	}
	.site-header .header-right-part .icons-part .search-toggle {
		padding: 3px;
	}

	/* Compact Get Quote button with shortened label */
	.site-header .quote-button {
		padding: 7px 10px;
		letter-spacing: 0.01em;
		box-shadow: 0 2px 4px rgba(238, 128, 40, 0.25);
		border-width: 1px;
		font-size: 0;             /* hides the "Get a Quote" PHP label */
	}
	.site-header .quote-button::before {
		content: "Get Quote";
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.02em;
	}

	/* Logo: cap a little smaller on phones so the right side has breathing room */
	.site-header .site-logo {
		max-width: 130px;
	}
}

/* Very small phones: ensure the button + icons still fit */
@media (max-width: 26em) {
	.site-header .header-right-part .icons-part > a,
	.site-header .header-right-part .icons-part > div {
		margin-left: 6px;
	}
	.site-header .header-right-part .icons-part svg {
		height: 17px;
	}
	.site-header .quote-button {
		padding: 6px 8px;
	}
	.site-header .quote-button::before {
		font-size: 10px;
	}
	.site-header .site-logo {
		max-width: 110px;
	}
}

/* Popup container */
.quote-popup {
	position: relative;
	background: #FFFFFF;
	width: 100%;
	max-width: 620px;
	margin: 40px auto;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	border-top: 5px solid #EE8028;
}

.quote-popup .inside {
	padding: 36px 40px 32px;
}

.quote-popup .title {
	font-family: sofia-pro, Arial, sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.2;
	color: #3E5044;
	margin: 0 0 8px;
}

.quote-popup .text {
	font-family: sofia-pro, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: #383838;
	margin: 0 0 22px;
}

.quote-popup .form {
	margin: 0;
}

/* Make Gravity Forms submit button match the brand orange */
.quote-popup .gform_wrapper .gform_footer input[type="submit"],
.quote-popup .gform_wrapper .gform_footer button[type="submit"] {
	background: #EE8028;
	color: #FFFFFF;
	border: 2px solid #EE8028;
	border-radius: 5px;
	font-family: sofia-pro, Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 12px 24px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.quote-popup .gform_wrapper .gform_footer input[type="submit"]:hover,
.quote-popup .gform_wrapper .gform_footer button[type="submit"]:hover {
	background: #FFFFFF;
	color: #EE8028;
}

/* Magnific Popup close button — make it visible against the white card */
.mfp-content .mfp-close {
	color: #3E5044;
	opacity: 0.85;
	font-size: 32px;
	width: 44px;
	height: 44px;
	line-height: 44px;
}

.mfp-content .mfp-close:hover {
	color: #EE8028;
	opacity: 1;
}

@media (max-width: 40em) {
	.quote-popup {
		margin: 20px auto;
	}
	.quote-popup .inside {
		padding: 28px 22px 24px;
	}
	.quote-popup .title {
		font-size: 22px;
	}
}