/**
 * Matsuri Components
 *
 * Reusable UI component styles:
 * - Buttons (.wam-btn)
 * - Cards (.wam-card)
 * - Form element decorations
 *
 * @since 1.0.0
 * @package WAM_Matsuri
 */

/* === WAM Button Base === */
.wam-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border: none;
	border-radius: var(--wam-radius-md);
	font-family: var(--wam-font-body);
	font-size: var(--wam-font-size-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--wam-transition);
	text-decoration: none;
	line-height: 1.4;
	min-height: 48px;
}

.wam-btn:hover,
.wam-btn:focus {
	transform: translateY(-2px);
}

.wam-btn:focus-visible {
	outline: 2px solid var(--wam-focus-color);
	outline-offset: 2px;
}

/* Primary (朱赤) */
.wam-btn-primary {
	background: linear-gradient(135deg, var(--wam-primary) 0%, var(--wam-primary-dark) 100%);
	color: #fff;
}

.wam-btn-primary:hover,
.wam-btn-primary:focus {
	box-shadow: 0 4px 12px rgba(197, 61, 45, 0.4);
}

/* Secondary (紺) */
.wam-btn-secondary {
	background: linear-gradient(135deg, var(--wam-secondary) 0%, var(--wam-secondary-dark) 100%);
	color: #fff;
}

.wam-btn-secondary:hover,
.wam-btn-secondary:focus {
	box-shadow: 0 4px 12px rgba(34, 58, 112, 0.4);
}

/* Success */
.wam-btn-success {
	background: linear-gradient(135deg, var(--wam-success) 0%, #1e8449 100%);
	color: #fff;
}

.wam-btn-success:hover,
.wam-btn-success:focus {
	box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

/* === Button :active state (distinct press feedback) === */
.wam-btn:active {
	transform: translateY(0);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* === Button Size Variants === */
.wam-btn-sm {
	padding: 8px 16px;
	font-size: var(--wam-font-size-xs);
	min-height: 36px;
	gap: 6px;
}

.wam-btn-lg {
	padding: 16px 32px;
	font-size: var(--wam-font-size-lg);
	min-height: 56px;
	gap: 10px;
}

/* === Button Outline Variant === */
.wam-btn-outline {
	background: transparent;
	border: 2px solid var(--wam-primary);
	color: var(--wam-primary);
}

.wam-btn-outline:hover {
	background: var(--wam-primary-bg);
}

.wam-btn-outline:active {
	background: var(--wam-primary);
	color: #fff;
}

.wam-btn-outline-secondary {
	background: transparent;
	border: 2px solid var(--wam-secondary);
	color: var(--wam-secondary);
}

.wam-btn-outline-secondary:hover {
	background: var(--wam-secondary-bg);
}

.wam-btn-outline-secondary:active {
	background: var(--wam-secondary);
	color: #fff;
}

/* === Button Disabled State === */
.wam-btn:disabled,
.wam-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.wam-btn:disabled:hover,
.wam-btn[aria-disabled="true"]:hover {
	transform: none;
	box-shadow: none;
}

/* === Unified Form Input === */
.wam-input {
	display: block;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--wam-border);
	border-radius: var(--wam-radius-sm);
	font-family: var(--wam-font-body);
	font-size: var(--wam-font-size-base);
	line-height: 1.5;
	color: var(--wam-text-primary);
	background: var(--wam-bg-card);
	transition: border-color var(--wam-transition), box-shadow var(--wam-transition);
}

.wam-input:hover {
	border-color: var(--wam-border-strong);
}

.wam-input:focus {
	border-color: var(--wam-focus-color);
	box-shadow: var(--wam-focus-shadow);
	outline: none;
}

.wam-input::placeholder {
	color: var(--wam-text-muted);
}

/* Prevent iOS zoom on focus (font-size >= 16px) */
@media screen and (max-width: 768px) {
	.wam-input,
	select.wam-input {
		font-size: max(var(--wam-font-size-base), 16px);
	}
}

/* Input error state */
.wam-input.is-error,
.wam-input[aria-invalid="true"] {
	border-color: var(--wam-error);
	box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.15);
}

/* Input success state */
.wam-input.is-valid {
	border-color: var(--wam-success);
}

/* Textarea */
textarea.wam-input {
	min-height: 100px;
	resize: vertical;
}

/* Select */
select.wam-input {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C4E42' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

/* === WAM Card === */
.wam-card {
	background: var(--wam-bg-card);
	border: 1px solid var(--wam-border);
	border-radius: var(--wam-radius-lg);
	box-shadow: var(--wam-shadow);
	overflow: hidden;
}

.wam-card-header {
	padding: 12px 20px;
	border-bottom: 1px solid var(--wam-border-light);
	font-family: var(--wam-font-heading);
	font-weight: 600;
}

.wam-card-body {
	padding: 20px;
}

/* ===================================================================
   WooCommerce Buttons
   - Classic buttons (.woocommerce .button)
   - Block-based buttons (.wc-block-components-button)
   - Single product add-to-cart (.single_add_to_cart_button)
   =================================================================== */

/* --- WooCommerce Classic Buttons --- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: none;
	border-radius: var(--wam-radius-md);
	font-family: var(--wam-font-body);
	font-size: var(--wam-font-size-sm);
	font-weight: 600;
	cursor: pointer;
	transition: all var(--wam-transition);
	text-decoration: none;
	line-height: 1.4;
	min-height: 48px;
	background: linear-gradient(135deg, var(--wam-primary) 0%, var(--wam-primary-dark) 100%);
	color: #fff;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(197, 61, 45, 0.4);
	color: #fff;
}

.woocommerce .button:active,
.woocommerce button.button:active,
.woocommerce a.button:active,
.woocommerce input.button:active {
	transform: translateY(0);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.woocommerce .button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce a.button:focus-visible {
	outline: 2px solid var(--wam-focus-color);
	outline-offset: 2px;
}

/* Alt buttons (secondary style) */
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
	background: linear-gradient(135deg, var(--wam-secondary) 0%, var(--wam-secondary-dark) 100%);
	color: #fff;
}

.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	box-shadow: 0 4px 12px rgba(34, 58, 112, 0.4);
	color: #fff;
}

/* Disabled */
.woocommerce .button:disabled,
.woocommerce button.button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* --- Single Product: Add to Cart Button --- */
.single_add_to_cart_button {
	background: linear-gradient(135deg, var(--wam-primary) 0%, var(--wam-primary-dark) 100%) !important;
	color: #fff !important;
	padding: 14px 32px !important;
	font-size: var(--wam-font-size-lg) !important;
	font-weight: 600 !important;
	border-radius: var(--wam-radius-md) !important;
	min-height: 52px;
	transition: all var(--wam-transition) !important;
}

.single_add_to_cart_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(197, 61, 45, 0.4) !important;
}

/* --- WooCommerce Block-based Buttons --- */
.wc-block-components-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 14px 28px !important;
	border: none !important;
	border-radius: var(--wam-radius-md) !important;
	font-family: var(--wam-font-body) !important;
	font-size: var(--wam-font-size-base) !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: all var(--wam-transition) !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
	min-height: 52px;
	background: linear-gradient(135deg, var(--wam-primary) 0%, var(--wam-primary-dark) 100%) !important;
	color: #fff !important;
}

.wc-block-components-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(197, 61, 45, 0.4) !important;
	color: #fff !important;
}

.wc-block-components-button:active {
	transform: translateY(0);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.wc-block-components-button:focus-visible {
	outline: 2px solid var(--wam-focus-color) !important;
	outline-offset: 2px;
}

/* Proceed to Checkout (カートページ) */
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button {
	width: 100%;
	font-size: var(--wam-font-size-lg) !important;
	padding: 16px 32px !important;
	min-height: 56px;
	background: linear-gradient(135deg, var(--wam-secondary) 0%, var(--wam-secondary-dark) 100%) !important;
}

.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover {
	box-shadow: 0 4px 12px rgba(34, 58, 112, 0.4) !important;
}

/* Place Order (チェックアウトページ) */
.wc-block-components-checkout-place-order-button {
	width: 100%;
	font-size: var(--wam-font-size-lg) !important;
	padding: 16px 32px !important;
	min-height: 56px;
	background: linear-gradient(135deg, var(--wam-success) 0%, #1e8449 100%) !important;
}

.wc-block-components-checkout-place-order-button:hover {
	box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4) !important;
}

/* Block button outlined variant */
.wc-block-components-button--outlined {
	background: transparent !important;
	border: 2px solid var(--wam-border-strong) !important;
	color: var(--wam-text-primary) !important;
}

.wc-block-components-button--outlined:hover {
	background: var(--wam-bg-secondary) !important;
	box-shadow: none !important;
	color: var(--wam-text-primary) !important;
}

/* Coupon apply button */
.wc-block-components-totals-coupon__button {
	min-height: 44px;
	font-size: var(--wam-font-size-sm) !important;
	padding: 10px 20px !important;
}

/* Remove link styling in block cart */
.wc-block-cart-item__remove-link {
	color: var(--wam-error) !important;
	font-size: var(--wam-font-size-sm);
}

.wc-block-cart-item__remove-link:hover {
	color: var(--wam-primary-dark) !important;
}

/* ======================================
   WooCommerce My Account Navigation
   ====================================== */

.woocommerce-MyAccount-navigation {
	background: var(--wam-bg-card);
	border: 1px solid var(--wam-border-light);
	border-radius: var(--wam-radius-lg);
	box-shadow: var(--wam-shadow);
	overflow: hidden;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation ul li {
	margin: 0;
	border-bottom: 1px solid var(--wam-border-light);
}

.woocommerce-MyAccount-navigation ul li:last-child {
	border-bottom: none;
}

.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: var(--wam-space-md) var(--wam-space-lg);
	color: var(--wam-text-primary);
	font-family: var(--wam-font-body);
	font-size: var(--wam-font-size-base);
	text-decoration: none;
	transition: background-color var(--wam-transition), color var(--wam-transition), border-left var(--wam-transition);
	border-left: 3px solid transparent;
}

.woocommerce-MyAccount-navigation ul li a:hover {
	background-color: var(--wam-secondary-bg);
	color: var(--wam-secondary);
	border-left-color: var(--wam-secondary-light);
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
	background-color: var(--wam-secondary-bg);
	color: var(--wam-secondary);
	font-weight: 600;
	border-left-color: var(--wam-secondary);
}

/* Mobile: stack nav above content */
@media (max-width: 768px) {
	.woocommerce-MyAccount-navigation,
	.woocommerce-MyAccount-content {
		float: none !important;
		width: 100% !important;
	}

	.woocommerce-MyAccount-navigation {
		margin-bottom: var(--wam-space-lg);
	}

	.woocommerce-MyAccount-navigation ul li a {
		padding: var(--wam-space-sm) var(--wam-space-md);
	}
}