/*
 * Volume pricing popout.
 *
 * Visual language derived from SFLumber Info Box/infoPopout.css:
 * #000000bf backdrop, white 16px-radius card, #004c5d accents,
 * teal (#8bc4d0) row borders, #f0f0f0 hover.
 */

/* The wrapper centers the auto-width button; display: flex is what
   makes justify-content take effect on the div. */
.sfl-vp-toggle-wrap {
	display: flex;
	width: 100%;
	justify-content: center;
}

/* The "Volume pricing" toggle, styled after the SFLumber Mega
   Menu's mobile submenu items: teal text with a caret on the
   right. */
.sfl-vp-toggle {
	position: relative;
	display: inline-flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 0;
	margin: 4px;
	height: 27px;
	font-size: 16px;
	line-height: 22px;
	color: #004c5d;
	cursor: pointer;
	user-select: none;
	text-decoration: none;
}

/* No hover/focus/active effects at all: overrides the theme's global
   button hover styles (filled background, underline). */
.sfl-vp-toggle:hover,
.sfl-vp-toggle:focus,
.sfl-vp-toggle:active {
	color: #004c5d;
	background: none;
	box-shadow: none;
	border: none;
	text-decoration: none;
}

/* Kill any generated underline content in every state. */
.sfl-vp-toggle::after,
.sfl-vp-toggle:hover::after,
.sfl-vp-toggle:focus::after,
.sfl-vp-toggle:focus-visible::after,
.sfl-vp-toggle:active::after {
	content: none;
}

/* The wrapper hugs its content: on the simple product page it is a
   <span> inside <p class="price">, so inline-block keeps it on the
   price's line at the button's width, exactly like the variable
   layout's grid column (where the value is blockified anyway). */
/* The whole wrapper (button, separator, notice) opens the popout,
   so it shows the pointer cursor throughout. */
.wrap_discount_notic {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	cursor: pointer;
}

/* Thin separator line between the button and the discount notice.
   Fades in/out with the notice: volume_pricing_popout.js toggles
   the shown class and the 0.2s opacity + height transition does
   the rest. The base is display: block (not none, so the
   transition can run and the span variant on simple pages still
   renders its 2px height - inline boxes ignore height); while
   hidden, height: 0 keeps it out of the layout. */
.sfl-vp-sep {
	display: block;
	height: 0;
	opacity: 0;
	background-color: #00717842;
	border-radius: 16px;
	transition: opacity 0.2s ease, height 0.2s ease;
}

.sfl-vp-sep.sfl-vp-sep-shown {
	height: 2px;
	opacity: 1;
}

/* The caret: same tabler icon the mega menu uses, at its native
   24px size. */
.sfl-vp-toggle .sfl-vp-toggle-caret {
	flex: none;
	width: 24px;
	height: 24px;
}

/* The "?" help icon: a solid circle (currentColor) with the
   question mark knocked out via an SVG mask, so whatever is behind
   the button shows through the mark. The flex gap provides the
   spacing to the label. */
.sfl-vp-toggle .sfl-vp-toggle-help {
	flex: none;
	width: 18px;
	height: 18px;
	color: #007178;
}

/* The popout: hidden until the button is pressed (.open). */
.sfl-vp-popout {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
}

.sfl-vp-popout.open {
	display: block;
}

.sfl-vp-popout .qpOverlay {
	position: absolute;
	inset: 0;
	background: #000000bf;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sfl-vp-popout .qpBackground {
	position: relative;
	background: #fff;
	border-radius: 16px;
	width: 80vw;
	max-width: 720px;
	max-height: 80vh;
	overflow-y: auto;
	padding: 44px 40px 40px;
	box-sizing: border-box;
}

/* padding: 0 is required: the theme's global button rule adds
   "padding: 7.2px 18px", and with box-sizing: border-box that
   consumes the whole 34px box, squeezing the icon to zero width. */
.sfl-vp-popout .qpClose {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
}

.sfl-vp-popout .qpClose:hover,
.sfl-vp-popout .qpClose:focus {
	background: #f0f0f0;
}

/* The close icon is an inline SVG, so the global img rules
   (".woocommerce img", "img { height: auto; max-width: 100% }")
   do not apply to it; the full chain just keeps our size winning
   over any other theme selector. */
.sfl-vp-popout .qpOverlay .qpBackground .qpClose svg {
	width: 18px;
	height: 18px;
	stroke: #004c5d;
}

/* The copy-to-clipboard button: the card's top left corner. The
   copy icon, a vertical separating line, then the "Copy to
   Clipboard" label. At rest the copy icon shows; after a
   successful copy the JS adds the is-copied class and the check
   icon shows in its place for 1.5s. */
.sfl-vp-popout .sfl-vp-copy {
	position: absolute;
	top: 10px;
	left: 10px;
	height: 34px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	padding: 0px 10px;
	border-radius: 8px;
	cursor: pointer;
}

.sfl-vp-popout .sfl-vp-copy .sfl-vp-copy-sep {
	width: 1px;
	height: 16px;
	background: #8bc4d0;
}

.sfl-vp-popout .sfl-vp-copy .sfl-vp-copy-text {
	font-size: 13px;
	color: #004c5d;
	white-space: nowrap;
}

.sfl-vp-popout .sfl-vp-copy svg {
	width: 18px;
	height: 18px;
}

/* Hover: the same light grey background as the close button.
   box-shadow: none neutralizes the theme's generic button hover
   shadow, which would otherwise sit under the icon. */
.sfl-vp-popout .sfl-vp-copy:hover {
	background: #f0f0f0;
	box-shadow: none;
	text-decoration: none;
}

/* On focus, nothing changes: reset to the default look, since
   the theme's generic button :focus style would otherwise add
   its shadow (and background). */
.sfl-vp-popout .sfl-vp-copy:focus {
	background: none;
	box-shadow: none;
	text-decoration: none;
}

.sfl-vp-popout .sfl-vp-copy .sfl-vp-copy-done {
	display: none;
}

.sfl-vp-popout .sfl-vp-copy.is-copied .sfl-vp-copy-icon {
	display: none;
}

.sfl-vp-popout .sfl-vp-copy.is-copied .sfl-vp-copy-done {
	display: block;
}

.sfl-vp-popout h2 {
	margin: 12px 0 6px;
	font-size: 32px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	color: #004c5d;
}

/* The product name: makes clear these tiers apply to the product being
   viewed. */
.sfl-vp-popout .sfl-vp-product {
	margin: 0 0 26px;
	font-size: 18px;
	text-align: center;
	color: #004c5d;
}

.sfl-vp-popout .sfl-vp-desc {
	margin: 0 auto 28px;
	max-width: 560px;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}

.sfl-vp-popout .sfl-vp-tiers {
	width: 100%;
	border-collapse: collapse;
}

/* Both columns share the table width evenly. The full popout chain
   (4 classes) is used so these cell rules keep winning over more
   specific theme selectors such as
   ".woocommerce div.product form.cart table td". */
.sfl-vp-popout .qpOverlay .qpBackground .sfl-vp-tiers th,
.sfl-vp-popout .qpOverlay .qpBackground .sfl-vp-tiers td {
	width: 50%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: 18px;
	text-align: left;
	border-bottom: 1px solid #8bc4d0;
}

.sfl-vp-popout .sfl-vp-tiers thead th {
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	color: #004c5d;
	border-top: 1px solid #8bc4d0;
}

/* The fee, discount, and custom-quote values are bold so they stand
   out from the quantity labels; the plain "0%" rows stay at
   normal weight. */
.sfl-vp-popout .sfl-vp-tiers tbody td.sfl-vp-disc-plus,
.sfl-vp-popout .sfl-vp-tiers tbody td.sfl-vp-disc-minus,
.sfl-vp-popout .sfl-vp-tiers tbody td.sfl-vp-disc-quote {
	font-weight: 700;
}

/* Color-coded price-adjustment values: light red for a surcharge
   (+), dark green for a discount (-), the plugin's dark teal for
   custom-quote rows and for the "0%" rows (zero adjustments and
   quantity ranges no tier covers). */
.sfl-vp-popout .sfl-vp-tiers td.sfl-vp-disc-plus {
	color: #d9534f;
}

.sfl-vp-popout .sfl-vp-tiers td.sfl-vp-disc-minus {
	color: #3c763d;
}

.sfl-vp-popout .sfl-vp-tiers td.sfl-vp-disc-quote,
.sfl-vp-popout .sfl-vp-tiers td.sfl-vp-disc-regular {
	color: #004c5d;
}

.sfl-vp-popout .sfl-vp-tiers tbody tr:hover {
	background-color: #f0f0f0;
}

@media only screen and (max-width: 700px) {
	.sfl-vp-popout .qpBackground {
		width: 96vw;
		padding: 40px 18px 28px;
	}

	.sfl-vp-popout h2 {
		font-size: 24px;
	}

	.sfl-vp-popout .sfl-vp-product {
		font-size: 16px;
	}

	.sfl-vp-popout .sfl-vp-desc {
		font-size: 15px;
	}

	.sfl-vp-popout .qpOverlay .qpBackground .sfl-vp-tiers th,
	.sfl-vp-popout .qpOverlay .qpBackground .sfl-vp-tiers td {
		font-size: 14px;
		padding: 8px;
	}

	/* Keep the headers the same size as the mobile cells. */
	.sfl-vp-popout .sfl-vp-tiers thead th {
		font-size: 14px;
	}
}