/* Tinyplugs Gift Wrapping for WooCommerce – Cart & Checkout — front-end styles */

.cgwfw-wrap {
	margin-top: 8px;
	font-size: 0.9em;
}

.cgwfw-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	border: none;
	padding: 6px 12px;
	line-height: 1.3;
	background: var(--cgwfw-btn-bg, #1e3a5f);
	color: var(--cgwfw-btn-color, #fff);
	border-radius: var(--cgwfw-btn-radius, 4px);
	transition: background-color 0.15s ease, opacity 0.15s ease;
	/* Align with the adjacent tooltip icon (also vertical-align: middle). */
	vertical-align: middle;
}

.cgwfw-btn:hover {
	opacity: 0.9;
}

.cgwfw-btn.is-wrapped {
	background: var(--cgwfw-btn-bg-added, #2e7d32);
	color: var(--cgwfw-btn-color-added, #fff);
}

.cgwfw-btn-fee {
	opacity: 0.85;
	font-size: 0.9em;
}

.cgwfw-btn.cgwfw-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Theme compatibility: some themes (e.g. Flatsome) force uppercase text,
   their own button colours and letter-spacing onto every button. Re-assert
   the plugin's own styling so the admin colour settings always apply and the
   label/price render as intended. */
.cgwfw-wrap .cgwfw-btn,
.cgwfw-wrap .cgwfw-btn:hover,
.cgwfw-wrap .cgwfw-btn:focus {
	text-transform: none !important;
	letter-spacing: normal !important;
	color: var(--cgwfw-btn-color, #fff) !important;
	background: var(--cgwfw-btn-bg, #1e3a5f) !important;
	text-shadow: none !important;
}

.cgwfw-wrap .cgwfw-btn.is-wrapped {
	background: var(--cgwfw-btn-bg-added, #2e7d32) !important;
	color: var(--cgwfw-btn-color-added, #fff) !important;
}

.cgwfw-wrap .cgwfw-btn .cgwfw-btn-label,
.cgwfw-wrap .cgwfw-btn .cgwfw-btn-fee,
.cgwfw-wrap .cgwfw-btn .cgwfw-btn-fee * {
	color: inherit !important;
	text-transform: none !important;
}

/*! <fs_premium_only> */
/* Keep the dropdown trigger/options free of theme uppercasing too. */
.cgwfw-wrap .cgwfw-dd-trigger,
.cgwfw-wrap .cgwfw-dd-option {
	text-transform: none !important;
	letter-spacing: normal !important;
}
/*! </fs_premium_only> */

/*! <fs_premium_only> */
/* Small / large button size options */
.cgwfw-btn.cgwfw-size-small {
	padding: 4px 8px;
	font-size: 14px;
}

.cgwfw-btn.cgwfw-size-large {
	padding: 10px 20px;
	font-size: 1.05em;
	gap: 8px;
}

.cgwfw-btn.cgwfw-size-large .cgwfw-icon-symbol svg {
	width: 19px;
	height: 19px;
}

/* "Plus sign" fee format: the fee sits in the label colour at full size,
   e.g. "Gift wrap +49 kr", instead of the faded, smaller "(49 kr)". */
.cgwfw-btn-fee.cgwfw-fee-plus,
.cgwfw-pp-fee.cgwfw-fee-plus {
	opacity: 1;
	font-size: inherit;
	margin-left: 0;
}

/* Outlined button variant: transparent background with border, icon and
   text in the button colour. The wrapped state fills with the wrapped
   colours (border included, so the size never jumps). Mirrors the filled
   button's theme-compat !important block above so themes that force their
   own button background cannot paint over the outline. */
.cgwfw-btn.cgwfw-outline,
.cgwfw-wrap .cgwfw-btn.cgwfw-outline,
.cgwfw-wrap .cgwfw-btn.cgwfw-outline:hover,
.cgwfw-wrap .cgwfw-btn.cgwfw-outline:focus {
	background: transparent !important;
	color: var(--cgwfw-btn-bg, #1e3a5f) !important;
	border: 1.5px solid var(--cgwfw-btn-bg, #1e3a5f) !important;
	box-shadow: none !important;
}

.cgwfw-wrap .cgwfw-btn.cgwfw-outline:hover {
	opacity: 0.8;
}

.cgwfw-btn.cgwfw-outline.is-wrapped,
.cgwfw-wrap .cgwfw-btn.cgwfw-outline.is-wrapped,
.cgwfw-wrap .cgwfw-btn.cgwfw-outline.is-wrapped:hover,
.cgwfw-wrap .cgwfw-btn.cgwfw-outline.is-wrapped:focus {
	background: var(--cgwfw-btn-bg-added, #2e7d32) !important;
	color: var(--cgwfw-btn-color-added, #fff) !important;
	border-color: var(--cgwfw-btn-bg-added, #2e7d32) !important;
}

/* "Below the item details" position. WooCommerce prints the item meta
   (variation attributes, personalisation fields) straight after the hook the
   control renders on, with no later hook — so cgwfw.js moves the control
   after the meta list on the classic cart (and again after every AJAX
   re-render). Deliberately NOT done with display:flex + order on the
   product cell: a flex td stops being a table cell, no longer stretches to
   the row height, and its theme border-bottom ends up under its own content
   instead of on the row line (visible as a doubled divider on short rows,
   e.g. an add-on item with no meta). The body class is only added on the
   cart page when the option is on. */
body.cgwfw-pos-below .woocommerce-cart-form td.product-name .cgwfw-wrap.cgwfw-pos-below {
	margin-top: 10px;
}

/* Stacked (mobile) cart layouts turn the product cell into a wrapping row
   flex (Shoptimizer: `.m-cart table.cart td { display:flex; flex-wrap:wrap }`),
   which makes the control a flex item that sits on the same line as whatever
   inline element precedes it (a "show more" toggle, a short product title).
   Force it onto its own line with breathing room above. */
@media (max-width: 768px) {
	.woocommerce-cart-form td.product-name .cgwfw-wrap {
		flex: 0 0 100%;
		width: 100%;
		margin-top: 14px;
	}
}

/* Product-page "Gift icon + text" button in the outlined variant (CSS-only
   wrapped state via :has() on the hidden checkbox). */
.cgwfw-pp-btn.cgwfw-outline:has( .cgwfw-pp-check:checked ) {
	background: var(--cgwfw-btn-bg-added, #2e7d32) !important;
	color: var(--cgwfw-btn-color-added, #fff) !important;
	border-color: var(--cgwfw-btn-bg-added, #2e7d32) !important;
}

/* "Gift icon + text" style: identical to the simple button (background and
   text colours come from the admin settings) with a leading gift icon that
   inherits the button text colour. */
.cgwfw-icon-symbol {
	display: inline-flex;
	align-items: center;
}

/* "Gift wrapping included" badge for pre-wrapped products */
.cgwfw-included {
	display: flex;
	width: fit-content;
	max-width: 100%;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 5px 12px;
	border-radius: 999px;
	background: #e6f4ea;
	color: #2f6b3d;
	font-size: 0.9em;
	line-height: 1.3;
}

.cgwfw-included-icon {
	display: inline-flex;
	color: #2f6b3d;
}

/* Wrap design dropdown (compact trigger + expandable list of designs) */
.cgwfw-order-heading {
	font-weight: 600;
	margin-bottom: 8px;
}

/* Smaller gift icon on the design cards (8px padding around a 24px symbol). */
.cgwfw-designs-wrap .cgwfw-card-main {
	margin-bottom: 10px;
}

.cgwfw-designs-wrap .cgwfw-card-icon {
	width: auto;
	height: auto;
	padding: 8px;
}

.cgwfw-designs-wrap .cgwfw-card-icon svg {
	width: 24px;
	height: 24px;
}

.cgwfw-design-img {
	background: #f6f7f7 center/cover no-repeat;
	border-radius: 4px;
}

.cgwfw-dropdown {
	position: relative;
	max-width: 340px;
	margin: 4px 0;
}

.cgwfw-dd-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: #fff;
	border: 1px solid #d5d8dc;
	border-radius: 8px;
	padding: 8px 12px;
	cursor: pointer;
	text-align: left;
	line-height: 1.3;
	transition: border-color 0.15s ease;
}

.cgwfw-dd-trigger:hover {
	border-color: var(--cgwfw-btn-bg, #1e3a5f);
}

.cgwfw-dd-trigger.cgwfw-loading {
	opacity: 0.6;
	pointer-events: none;
}

.cgwfw-designs-wrap.is-wrapped .cgwfw-dd-trigger {
	border-color: var(--cgwfw-btn-bg-added, #2e7d32);
}

.cgwfw-dd-current {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}

.cgwfw-dd-placeholder {
	color: #777;
}

.cgwfw-dd-caret {
	flex: 0 0 auto;
	color: #777;
}

.cgwfw-dd-thumb {
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
}

.cgwfw-dd-option-name {
	font-weight: 600;
}

.cgwfw-dd-option-price {
	margin-left: auto;
	color: var(--cgwfw-btn-bg, #1e3a5f);
}

.cgwfw-dd-panel {
	position: absolute;
	z-index: 1000;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #d5d8dc;
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	max-height: 280px;
	overflow: auto;
	padding: 4px;
}

.cgwfw-dd-option {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: none;
	border: none;
	border-radius: 6px;
	padding: 7px 8px;
	cursor: pointer;
	text-align: left;
}

.cgwfw-dd-option:hover {
	background: #f3f4f5;
}

.cgwfw-dd-option.is-selected {
	background: #eef3e8;
}

.cgwfw-dd-option .cgwfw-dd-thumb {
	width: 36px;
	height: 36px;
}

/*! </fs_premium_only> */

/* Info tooltip ("?" icon with a black box / white text on hover or focus) */
.cgwfw-tip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 6px;
	border-radius: 50%;
	background: #555;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	cursor: help;
	position: relative;
	vertical-align: middle;
}

.cgwfw-tip::after {
	content: attr(data-cgwfw-tip);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #000;
	color: #fff;
	padding: 7px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
	width: max-content;
	max-width: 220px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
	z-index: 1000;
	pointer-events: none;
}

.cgwfw-tip::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 3px);
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease;
	z-index: 1000;
	pointer-events: none;
}

.cgwfw-tip:hover::after,
.cgwfw-tip:focus::after,
.cgwfw-tip:focus-visible::after,
.cgwfw-tip:hover::before,
.cgwfw-tip:focus::before,
.cgwfw-tip:focus-visible::before {
	opacity: 1;
	visibility: visible;
}

.cgwfw-message-wrap {
	margin-top: 6px;
}

.cgwfw-message-label {
	display: block;
	font-size: 0.95em;
}

.cgwfw-message {
	display: block;
	width: 100%;
	max-width: 320px;
	margin-top: 3px;
	box-sizing: border-box;
}

/* Per-order row inside cart totals */
.cgwfw-order-row .cgwfw-order-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: normal;
}

/*! <fs_premium_only> */
/* Per-item switch box (single compact row: icon · label · price · toggle) */
.cgwfw-switchbox {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #e4e7e7;
	border-radius: 8px;
	padding: 6px 12px;
	cursor: pointer;
	max-width: 340px;
	margin: 0;
}

.cgwfw-style-switch.is-wrapped .cgwfw-switchbox {
	border-color: var(--cgwfw-btn-bg-added, #2e7d32);
}

.cgwfw-switch-icon {
	flex: 0 0 auto;
	color: var(--cgwfw-btn-bg, #1e3a5f);
	display: flex;
	align-items: center;
}

.cgwfw-switch-icon svg {
	width: 18px;
	height: 18px;
}

.cgwfw-style-switch.is-wrapped .cgwfw-switch-icon {
	color: var(--cgwfw-btn-bg-added, #2e7d32);
}

.cgwfw-switchbox-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1.25;
}

.cgwfw-switchbox-label {
	font-weight: 600;
}

.cgwfw-switchbox-price {
	font-size: 0.95em;
	color: inherit;
}

/* Toggle switch */
.cgwfw-switch {
	flex: 0 0 auto;
	position: relative;
	width: 38px;
	height: 22px;
}

.cgwfw-switch input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.cgwfw-switch-slider {
	position: absolute;
	inset: 0;
	background: #c9cfce;
	border-radius: 26px;
	transition: background-color 0.15s ease;
}

.cgwfw-switch-slider::before {
	content: "";
	position: absolute;
	height: 16px;
	width: 16px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.15s ease;
}

.cgwfw-switch input:checked + .cgwfw-switch-slider {
	background: var(--cgwfw-btn-bg-added, #2e7d32);
}

.cgwfw-switch input:checked + .cgwfw-switch-slider::before {
	transform: translateX(16px);
}

/*! </fs_premium_only> */

/* Per-order promo card */
.cgwfw-card {
	border: 1px solid #e4e7e7;
	border-radius: 12px;
	padding: 16px 18px;
	margin: 18px 0 18px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

/* Block checkout: even spacing on all sides of the card. */
.woocommerce-checkout .cgwfw-card.cgwfw-blocks {
	width: auto;
	margin: 15px;
}

/* Classic checkout: the card renders inside the order-review column (before the
   payment box), so keep it at the column's full width with only vertical
   spacing — no horizontal inset that would misalign it with the totals table. */
.woocommerce-checkout .cgwfw-card:not(.cgwfw-blocks) {
	width: auto;
	margin: 15px 0;
}

.cgwfw-card.is-wrapped {
	border-color: var(--cgwfw-btn-bg-added, #2e7d32);
}

.cgwfw-card-main {
	display: flex;
	align-items: center;
	gap: 14px;
}

.cgwfw-card-icon {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--cgwfw-btn-bg, #1e3a5f);
	color: var(--cgwfw-btn-color, #fff);
}

.cgwfw-card.is-wrapped .cgwfw-card-icon {
	background: var(--cgwfw-btn-bg-added, #2e7d32);
	color: var(--cgwfw-btn-color-added, #fff);
}

.cgwfw-card-body {
	flex: 1 1 auto;
	min-width: 0;
}

.cgwfw-card-title {
	font-weight: 600;
	font-size: 1.02em;
	line-height: 1.25;
}

.cgwfw-card-sub {
	color: #777;
	font-size: 0.88em;
	margin-top: 1px;
}

.cgwfw-card-price {
	margin-top: 4px;
	font-weight: 700;
	color: var(--cgwfw-btn-bg, #1e3a5f);
}

.cgwfw-card.is-wrapped .cgwfw-card-price {
	color: var(--cgwfw-btn-bg-added, #2e7d32);
}

.cgwfw-card-btn {
	flex: 0 0 auto;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.85em;
	padding: 9px 16px;
}

.cgwfw-card .cgwfw-message-wrap {
	margin-top: 12px;
}

.cgwfw-card .cgwfw-message {
	max-width: 100%;
}

@media (max-width: 480px) {
	.cgwfw-card-main { flex-wrap: wrap; }
	.cgwfw-card-btn { width: 100%; justify-content: center; }
}

/* Block cart/checkout: card spans the full order-summary width with comfortable
   horizontal padding, and a larger white parcel icon. */
.cgwfw-card.cgwfw-blocks {
	width: 100%;
	max-width: none;
	padding: 16px 15px;
	margin: 10px 0;
	box-sizing: border-box;
}

.cgwfw-card.cgwfw-blocks .cgwfw-card-icon {
	width: 60px;
	height: 60px;
}

/*! <fs_premium_only> */
/* Single product page control */
.cgwfw-pp {
	margin: 12px 0 16px;
	padding: 12px 14px;
	border: 1px solid #e4e7e7;
	border-radius: 10px;
	max-width: 360px;
	font-size: 0.95em;
	transition: border-color 0.15s ease;
}

/* Highlight the box in the brand "added" colour once wrapping is chosen. */
.cgwfw-pp:has(.cgwfw-pp-check:checked) {
	border-color: var(--cgwfw-btn-bg-added, #2e7d32);
}

/* Checkbox (simple) style: the original product-page control. */
.cgwfw-pp-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	margin: 0;
}

.cgwfw-pp-toggle .cgwfw-pp-check {
	flex: 0 0 auto;
	margin: 0;
	/* Use the admin-configured colour for the checked checkbox. */
	accent-color: var(--cgwfw-btn-bg-added, #2e7d32);
}

/* Some themes draw a coloured ring (outline / box-shadow) around the native
   checkbox when it is focused or checked, which looks like a box around the
   tick. Clear it so only the checkbox itself shows — but keep a clean outline
   for keyboard focus, so accessibility is preserved. */
.cgwfw-pp-toggle .cgwfw-pp-check,
.cgwfw-pp-toggle .cgwfw-pp-check:focus,
.cgwfw-pp-toggle .cgwfw-pp-check:checked {
	outline: none;
	box-shadow: none;
}

.cgwfw-pp-toggle .cgwfw-pp-check:focus-visible {
	outline: 2px solid var(--cgwfw-btn-bg-added, #2e7d32);
	outline-offset: 1px;
}

.cgwfw-pp-label {
	font-weight: 600;
}

/* Product-page fee uses the normal text colour (no brand colour). */
.cgwfw-pp-fee,
.cgwfw-pp-fee .woocommerce-Price-amount {
	color: inherit;
}

.cgwfw-pp-heading {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

/* Product-page display styles (icon / switch). The product page ships no
   JavaScript, so the wrapped state is reflected purely with :has() on the
   underlying checkbox. */

/* Gift icon + text: the whole label is a coloured button toggling a hidden box. */
.cgwfw-pp-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	cursor: pointer;
	padding: 8px 14px;
	line-height: 1.3;
	background: var(--cgwfw-btn-bg, #1e3a5f);
	color: var(--cgwfw-btn-color, #fff);
	border-radius: var(--cgwfw-btn-radius, 4px);
	transition: background-color 0.15s ease;
}

.cgwfw-pp-btn .cgwfw-pp-check {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

.cgwfw-pp-btn .cgwfw-btn-label,
.cgwfw-pp-btn .cgwfw-btn-fee {
	color: inherit;
}

.cgwfw-pp-btn .cgwfw-btn-fee {
	opacity: 0.85;
	margin-left: 4px;
}

.cgwfw-pp-btn .cgwfw-pp-off,
.cgwfw-pp-btn .cgwfw-pp-on {
	display: inline-flex;
	align-items: center;
}

/* Wrapped state: "added" colour, and swap the off/on labels. */
.cgwfw-pp-btn:has( .cgwfw-pp-check:checked ) {
	background: var(--cgwfw-btn-bg-added, #2e7d32);
	color: var(--cgwfw-btn-color-added, #fff);
}

.cgwfw-pp-btn .cgwfw-pp-on {
	display: none;
}

.cgwfw-pp-btn:has( .cgwfw-pp-check:checked ) .cgwfw-pp-off {
	display: none;
}

.cgwfw-pp-btn:has( .cgwfw-pp-check:checked ) .cgwfw-pp-on {
	display: inline-flex;
}

/* Keep the hidden checkbox keyboard-focusable: show focus on the button. */
.cgwfw-pp-btn:has( .cgwfw-pp-check:focus-visible ) {
	outline: 2px solid var(--cgwfw-btn-bg-added, #2e7d32);
	outline-offset: 2px;
}

/* Switch box on the product page: reuse the cart switch box, but drop its own
   border and width cap since the .cgwfw-pp container already frames it. */
.cgwfw-pp .cgwfw-switchbox {
	border: none;
	padding: 0;
	max-width: none;
}

.cgwfw-pp-select {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.cgwfw-pp-message {
	margin-top: 10px;
}

/* In flat-fee mode the message field appears only once wrapping is ticked. */
.cgwfw-pp:not(.cgwfw-pp-designs) .cgwfw-pp-message {
	display: none;
}

.cgwfw-pp:has(.cgwfw-pp-check:checked) .cgwfw-pp-message {
	display: block;
}

.cgwfw-pp-message-label {
	display: block;
	font-size: 0.95em;
	margin-bottom: 3px;
}

.cgwfw-pp-message-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/*! </fs_premium_only> */

/*! <fs_premium_only> */
/* Wrap design lightbox (trigger + modal grid of design cards) */
.cgwfw-lightbox {
	max-width: 340px;
	margin: 4px 0;
}

.cgwfw-lb-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: #fff;
	border: 1px solid #d5d8dc;
	border-radius: 8px;
	padding: 8px 12px;
	cursor: pointer;
	text-align: left;
	line-height: 1.3;
	transition: border-color 0.15s ease;
}

.cgwfw-lb-trigger:hover {
	border-color: var(--cgwfw-btn-bg, #1e3a5f);
}

.cgwfw-designs-wrap.is-wrapped .cgwfw-lb-trigger {
	border-color: var(--cgwfw-btn-bg-added, #2e7d32);
}

.cgwfw-lb-edit {
	flex: 0 0 auto;
	margin-left: auto;
	opacity: 0.7;
}

.cgwfw-lb-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

/* The closed state must not depend on the theme: display:flex above beats the
   browser's built-in [hidden] rule (author styles always win over UA styles),
   so on themes that ship no [hidden] reset of their own (e.g. Astra) the modal
   would render permanently open on page load. The dropdown panel gets the same
   guard in case a theme forces a display on it. */
.cgwfw-lb-modal[hidden],
.cgwfw-dd-panel[hidden] {
	display: none !important;
}

.cgwfw-lb-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.cgwfw-lb-box {
	position: relative;
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	width: 100%;
	max-width: 560px;
	max-height: 85vh;
	overflow: auto;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.cgwfw-lb-close {
	position: absolute;
	top: 10px;
	right: 12px;
	border: none;
	background: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #555;
}

.cgwfw-lb-title {
	font-weight: 600;
	font-size: 1.1em;
	margin-bottom: 14px;
	padding-right: 24px;
}

.cgwfw-lb-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cgwfw-lb-none {
	flex: 1 1 100%;
	background: none;
	border: 1px solid #e4e7e7;
	border-radius: 8px;
	padding: 10px 12px;
	cursor: pointer;
	text-align: left;
}

.cgwfw-lb-none.is-selected,
.cgwfw-lb-none:hover {
	border-color: var(--cgwfw-btn-bg-added, #2e7d32);
}

.cgwfw-design-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 120px;
	background: #fff;
	border: 1px solid #e4e7e7;
	border-radius: 10px;
	padding: 12px;
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cgwfw-design-card:hover {
	border-color: var(--cgwfw-btn-bg, #1e3a5f);
}

.cgwfw-design-card.is-selected {
	border-color: var(--cgwfw-btn-bg-added, #2e7d32);
	box-shadow: 0 0 0 1px var(--cgwfw-btn-bg-added, #2e7d32);
}

.cgwfw-design-card .cgwfw-dd-thumb {
	width: 84px;
	height: 84px;
}

.cgwfw-design-card .cgwfw-dd-option-price {
	margin-left: 0;
}

/* --- Theme-proofing for the design pickers --------------------------------
   Themes style buttons aggressively — Astra targets them inside the blocks at
   higher specificity than a single class (`[class*="wc-block"] button`), and
   Flatsome forces white button text — turning the pickers into solid theme-
   coloured buttons with invisible labels. Re-assert the pickers' neutral
   palette (white surfaces, dark text) with !important, mirroring how the
   per-item button is already protected further up. Accents (hover/selected
   borders, prices) keep following the admin colour settings via the
   --cgwfw-btn-* variables. */
.cgwfw-wrap .cgwfw-dd-trigger,
.cgwfw-wrap .cgwfw-lb-trigger {
	background: #fff !important;
	color: #333 !important;
	border: 1px solid #d5d8dc !important;
	box-shadow: none !important;
	padding: 8px 12px !important;
	min-height: 0 !important;
}

.cgwfw-wrap .cgwfw-dd-trigger:hover,
.cgwfw-wrap .cgwfw-lb-trigger:hover {
	border-color: var(--cgwfw-btn-bg, #1e3a5f) !important;
}

.cgwfw-wrap.is-wrapped .cgwfw-dd-trigger,
.cgwfw-wrap.is-wrapped .cgwfw-lb-trigger {
	border-color: var(--cgwfw-btn-bg-added, #2e7d32) !important;
}

.cgwfw-wrap .cgwfw-dd-option {
	background: none !important;
	color: #333 !important;
	border: none !important;
	box-shadow: none !important;
	padding: 7px 8px !important;
}

.cgwfw-wrap .cgwfw-dd-option:hover {
	background: #f3f4f5 !important;
}

.cgwfw-wrap .cgwfw-dd-option.is-selected {
	background: #eef3e8 !important;
}

.cgwfw-wrap .cgwfw-lb-option {
	background: #fff !important;
	color: #333 !important;
	border: 1px solid #e4e7e7 !important;
	box-shadow: none !important;
}

.cgwfw-wrap .cgwfw-lb-option:hover {
	border-color: var(--cgwfw-btn-bg, #1e3a5f) !important;
}

.cgwfw-wrap .cgwfw-lb-none.is-selected,
.cgwfw-wrap .cgwfw-lb-none:hover {
	border-color: var(--cgwfw-btn-bg-added, #2e7d32) !important;
}

.cgwfw-wrap .cgwfw-design-card.is-selected {
	border-color: var(--cgwfw-btn-bg-added, #2e7d32) !important;
	box-shadow: 0 0 0 1px var(--cgwfw-btn-bg-added, #2e7d32) !important;
}

.cgwfw-wrap .cgwfw-lb-close {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: #555 !important;
	padding: 0 !important;
	min-height: 0 !important;
}

/* Explicit text colours: themes that force white button text would otherwise
   make the design names invisible on the white panels. The price keeps the
   admin "Button background" colour. */
.cgwfw-wrap .cgwfw-dd-option-name {
	color: #333 !important;
}

.cgwfw-wrap .cgwfw-dd-option-price {
	color: var(--cgwfw-btn-bg, #1e3a5f) !important;
}

.cgwfw-wrap .cgwfw-dd-placeholder,
.cgwfw-wrap .cgwfw-dd-caret,
.cgwfw-wrap .cgwfw-lb-edit {
	color: #777 !important;
}

/*! </fs_premium_only> */

/* Block checkout: give the designs/checkbox wraps the same horizontal inset
   the card variant already gets — the checkout order-summary slot renders
   with no padding of its own. */
.woocommerce-checkout .cgwfw-wrap.cgwfw-blocks:not(.cgwfw-card) {
	width: auto;
	margin: 15px;
}