/**
 * Personalized Message for WooCommerce
 * Styles for the product page fields.
 *
 * .vpm-toggle-btn is a <button>: most themes apply their own generic
 * skin to every <button> element (background color, pill radius, centered
 * uppercase text, icon fonts…). We reset it explicitly and mark every
 * visual property !important so that reset can't be re-overridden by a
 * theme stylesheet loaded after ours.
 */

/* This field always renders where WooCommerce places it (the
   woocommerce_before_add_to_cart_button hook: before the quantity input and
   the add-to-cart button, still inside form.cart). On themes that lay out
   the quantity input and button as a flex/grid row, our field would
   otherwise become a flex/grid item among them and get squeezed or stretch
   that row. These rules force it onto its own full-width line instead —
   pure CSS, no DOM relocation, so it can never end up outside the <form>
   (that was the cause of a prior bug where personalization messages were
   silently dropped: never saved to cart, order, or email). */

.vpm-fields {
	display: block !important;
	width: 100% !important;
	flex: 1 1 100% !important;
	flex-basis: 100% !important;
	grid-column: 1 / -1 !important;
	order: -1 !important;
	margin: 1.25em 0 !important;
	max-width: 480px !important;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

.vpm-toggle-btn {
	all: unset;
	box-sizing: border-box !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 14px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 16px 18px !important;
	border: 1px solid rgba(14, 11, 10, 0.12) !important;
	border-radius: 16px !important;
	background: #fffcf5 !important;
	color: #0e0b0a !important;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-align: left !important;
	text-transform: none !important;
	text-decoration: none !important;
	letter-spacing: normal !important;
	white-space: normal !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: border-color 0.2s ease !important;
}

.vpm-toggle-btn:hover,
.vpm-toggle-btn:focus-visible {
	border-color: rgba(14, 11, 10, 0.28) !important;
	background: #fffcf5 !important;
	color: #0e0b0a !important;
}

.vpm-toggle-btn[aria-expanded="true"] {
	border-color: #0e0b0a !important;
}

.vpm-toggle-btn__icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	background: #0e0b0a !important;
}

.vpm-toggle-btn__icon svg {
	width: 18px !important;
	height: 18px !important;
	stroke: #fffcf5 !important;
	color: #fffcf5 !important;
}

.vpm-toggle-btn__text {
	display: flex !important;
	flex: 1 1 auto !important;
	flex-direction: column !important;
	gap: 3px !important;
	min-width: 0 !important;
	text-align: left !important;
}

.vpm-toggle-btn__title {
	display: block !important;
	font-family: 'Cormorant Garamond', 'Manrope', serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1.25 !important;
	color: #0e0b0a !important;
	text-transform: none !important;
}

.vpm-toggle-btn__desc {
	display: block !important;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: rgba(14, 11, 10, 0.6) !important;
	text-transform: none !important;
}

.vpm-toggle-btn__badge {
	flex-shrink: 0 !important;
	margin-left: auto !important;
	padding-left: 12px !important;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	color: #15a35a !important;
	white-space: nowrap !important;
	text-transform: none !important;
}

.vpm-toggle-btn__badge .woocommerce-Price-amount {
	color: inherit !important;
	font: inherit !important;
}

.vpm-fields__content {
	margin-top: 12px !important;
	padding: 0 !important;
}

.vpm-field {
	margin-bottom: 1em;
}

.vpm-field label {
	display: block;
	margin-bottom: 0.4em;
	font-weight: 600;
	font-size: 0.95em;
}

.vpm-input {
	box-sizing: border-box;
	width: 100%;
	font: inherit;
}

.vpm-input--textarea {
	padding: 0.6em 0.75em;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	resize: vertical;
	min-height: 2.6em;
	background: transparent;
}

.vpm-input--textarea:focus {
	outline: none;
	border-color: currentColor;
}

.vpm-field__counter {
	display: block;
	margin-top: 0.25em;
	font-size: 0.8em;
	opacity: 0.6;
	text-align: right;
}

@media ( max-width: 480px ) {
	.vpm-fields {
		max-width: 100% !important;
	}
}