/*!
 * 番頭 for Welcart — front-end styles.
 *
 * We deliberately keep this small. The Amazon Pay button owns its own
 * visual language (color, shape, sizing); we only style the container
 * and its neighbors on the cart page.
 */

/* =========================================================================
 * Cart page: inline placement beside 「次へ」
 * =========================================================================
 *
 * amazon-pay-button.js relocates .kbsr-welcart-banto-cart-button so it
 * lives next to Welcart's `input[name="nextpage"]`, and stamps
 * `.kbsr-welcart-banto-cart-inline` onto the parent. The two rules below
 * handle both branches:
 *   - Relocation succeeded → parent becomes a flex row.
 *   - Relocation failed    → wrapper stays in footer, centered.
 *
 * `display: flex !important` on the parent is required because
 * Welcart themes typically set `.send { display: block; text-align: center }`
 * with the same class-selector specificity — without !important, cascade
 * order between plugin and theme is fragile.
 */

/* Fallback: standalone wrapper (relocation did not happen) — centered
 * block so the button visually anchors below Welcart's send buttons. */
.kbsr-welcart-banto-cart-button {
	display: block;
	max-width: 100%;
	margin: 1em auto;
	text-align: center;
	line-height: 0; /* iframe alignment */
}

#amazonpay_button_container {
	display: inline-block;
	max-width: 100%;
	margin: 0;
	line-height: 0;
	vertical-align: middle;
}

/* Relocated: parent is a flex row containing 「買い物を続ける」/「次へ」
 * and our wrapper. */
.kbsr-welcart-banto-cart-inline {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.kbsr-welcart-banto-cart-inline .kbsr-welcart-banto-cart-button {
	display: inline-block;
	margin: 0;
	/*
	 * Welcart's welcart_basic theme puts `margin-bottom: 0.714286em` on
	 * every `.send input` (usces_cart.css). Because flex `align-items:
	 * center` centers each item's outer box (content + margin), a
	 * wrapper with margin: 0 sits visibly lower than the buttons. We
	 * mirror the theme's margin here so all three items share the same
	 * outer box height and the row visually aligns.
	 *
	 * On themes that don't apply this margin, the wrapper still shows
	 * ~10px of trailing space — acceptable minor spacing.
	 */
	margin-bottom: 0.714286em;
	width: auto;
	text-align: initial;
}

/* Mobile: stack the row vertically so nothing overflows. The Amazon
 * button has its own intrinsic width; we don't force it to grow. */
@media (max-width: 600px) {
	.kbsr-welcart-banto-cart-inline {
		flex-direction: column;
		align-items: center;
	}
	.kbsr-welcart-banto-cart-inline > * {
		max-width: 100%;
	}
}

/* =========================================================================
 * Confirm page / return notice (v0.4.x remnants, kept for now)
 * ========================================================================= */

.amazonpay-send {
	text-align: center;
	margin-top: 1em;
}

.amazonpay-send .back_to_delivery_button {
	display: inline-block;
	margin-top: 0.5em;
}

.kbsr-welcart-banto-return-notice {
	text-align: center;
	padding: 2em 1em;
	font-size: 1.1em;
}

.kbsr-welcart-banto-return-notice .spinner {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 3px solid #ddd;
	border-top-color: #ff9900;
	border-radius: 50%;
	animation: kbsr-welcart-banto-spin 0.8s linear infinite;
	vertical-align: middle;
	margin-right: 0.75em;
}

@keyframes kbsr-welcart-banto-spin {
	to { transform: rotate(360deg); }
}