#ykg-gift-checkout {
	margin-top: 24px;
	padding: 20px;
	border: 1px solid rgba(0,0,0,.10);
	background: #fafafa;
}

#ykg-gift-checkout .ykg-gift-title {
	margin: 0 0 8px;
	font-size: 20px;
}

#ykg-gift-checkout .ykg-gift-intro {
	margin: 0 0 16px;
	opacity: .75;
}

#ykg-gift-checkout .ykg-message-wrap {
	display: none;
	margin-top: 8px;
}

#ykg-gift-checkout.is-gift .ykg-message-wrap {
	display: block;
}

#ykg-gift-checkout textarea {
	width: 100%;
	min-height: 100px;
	resize: vertical;
}

#ykg-gift-checkout .ykg-message-footer {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: -6px;
}

#ykg-gift-checkout .ykg-gift-help {
	opacity: .65;
}

#ykg-gift-checkout .ykg-char-counter {
	flex: 0 0 auto;
	opacity: .7;
}

#ykg-gift-checkout .ykg-char-counter.is-near-limit {
	font-weight: 600;
}

@media (max-width: 767px) {
	#ykg-gift-checkout {
		padding: 16px;
	}

	#ykg-gift-checkout .ykg-message-footer {
		display: block;
	}

	#ykg-gift-checkout .ykg-char-counter {
		display: block;
		margin-top: 5px;
		text-align: right;
	}
}


/*
 * v1.0.1 - WooCommerce Checkout Block spacing
 *
 * WooCommerce places our order-level additional field in its own checkout
 * step above the built-in "Add a note to your order" block. Savoy/WooCommerce
 * gives that step generous bottom spacing, which looks like an empty area
 * when only the gift checkbox is visible.
 *
 * Target only the checkout step that contains our namespaced gift field.
 */
.wc-block-components-checkout-step:has(.wc-block-components-address-form__yagami-gift-is-gift) {
	margin-bottom: 16px !important;
	padding-bottom: 0 !important;
}

.wc-block-components-checkout-step:has(.wc-block-components-address-form__yagami-gift-is-gift) .wc-block-components-checkout-step__content {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.wc-block-components-address-form__yagami-gift-is-gift {
	margin-bottom: 0 !important;
}

/* Keep a modest, intentional gap before WooCommerce's native order-note row. */
.wc-block-components-checkout-step:has(.wc-block-components-address-form__yagami-gift-is-gift) + #order-notes {
	margin-top: 0 !important;
}


/*
 * v1.0.4 - Additional information spacing
 *
 * Apply the same visual separation on both:
 * - Checkout / Order Received
 * - My Account -> View Order
 *
 * Margin is used instead of padding because the desired space is between the
 * address/order section above and the Additional information section itself.
 */
.wc-block-order-confirmation-additional-fields-wrapper {
	margin-top: 30px !important;
	padding-top: 0 !important;
}

/* Extra specificity for the My Account order-details screen. */
.woocommerce-account .wc-block-order-confirmation-additional-fields-wrapper {
	margin-top: 30px !important;
}