/**
 * Temiz Wear Button Component System
 *
 * Premium reusable button styling with accessible states,
 * responsive behavior, and WooCommerce compatibility.
 *
 * @package TemizWear
 * @since   1.0.0
 */

/* ============================================
   BASE BUTTON STYLING
   ============================================ */

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
.wp-element-button,
.wp-block-button__link {
	display: inline-block;
	padding: 0.875rem 1.75rem;
	min-height: 44px;
	min-width: 44px;
	border: 1px solid transparent;
	border-radius: 4px;
	background-color: #A8823D;
	color: #F5EFE3;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease-out,
	            border-color 150ms ease-out,
	            color 150ms ease-out;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	appearance: none;
	-webkit-appearance: none;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: #8B6F47;
	border-color: #8B6F47;
	text-decoration: none;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
.button:active,
.wp-element-button:active,
.wp-block-button__link:active {
	opacity: 0.85;
	transform: scale(0.98);
}

/* ============================================
   PRIMARY BUTTON (Default)
   ============================================ */

button:not([class*="secondary"]):not([class*="outline"]):not([class*="text"]):not(.button-secondary):not(.button-text),
input[type="submit"]:not([class*="secondary"]):not([class*="outline"]):not([class*="text"]),
input[type="button"]:not([class*="secondary"]):not([class*="outline"]):not([class*="text"]),
.button:not(.button-secondary):not(.outline):not(.button-text),
.wp-element-button:not([class*="secondary"]):not([class*="outline"]):not([class*="text"]),
.tw-button,
.tw-button--primary {
	background-color: #A8823D;
	border-color: #A8823D;
	color: #F5EFE3;
}

button:not([class*="secondary"]):not([class*="outline"]):not([class*="text"]):not(.button-secondary):not(.button-text):hover,
input[type="submit"]:not([class*="secondary"]):not([class*="outline"]):not([class*="text"]):hover,
input[type="button"]:not([class*="secondary"]):not([class*="outline"]):not([class*="text"]):hover,
.button:not(.button-secondary):not(.outline):not(.button-text):hover,
.wp-element-button:not([class*="secondary"]):not([class*="outline"]):not([class*="text"]):hover,
.tw-button:hover,
.tw-button--primary:hover {
	background-color: #8B6F47;
	border-color: #8B6F47;
}

/* ============================================
   SECONDARY BUTTON
   ============================================ */

button.secondary,
input[type="submit"].secondary,
input[type="button"].secondary,
.button.button-secondary,
.tw-button--secondary {
	background-color: #2E1A24;
	border-color: #2E1A24;
	color: #F5EFE3;
}

button.secondary:hover,
input[type="submit"].secondary:hover,
input[type="button"].secondary:hover,
.button.button-secondary:hover,
.tw-button--secondary:hover {
	background-color: #1a0f15;
	border-color: #1a0f15;
}

/* ============================================
   OUTLINE BUTTON
   ============================================ */

button.outline,
input[type="submit"].outline,
input[type="button"].outline,
.button.outline,
.tw-button--outline {
	background-color: transparent;
	border: 2px solid #A8823D;
	color: #A8823D;
}

button.outline:hover,
input[type="submit"].outline:hover,
input[type="button"].outline:hover,
.button.outline:hover,
.tw-button--outline:hover {
	background-color: #A8823D;
	border-color: #A8823D;
	color: #F5EFE3;
}

/* ============================================
   TEXT BUTTON (Minimal)
   ============================================ */

button.text,
input[type="submit"].text,
input[type="button"].text,
.button.button-text,
.tw-button--text {
	background-color: transparent;
	border-color: transparent;
	color: #A8823D;
	padding: 0.5rem 0.75rem;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-align: center;
}

button.text:hover,
input[type="submit"].text:hover,
input[type="button"].text:hover,
.button.button-text:hover,
.tw-button--text:hover {
	color: #8B6F47;
	background-color: transparent;
}

button.text:active,
input[type="submit"].text:active,
input[type="button"].text:active,
.button.button-text:active,
.tw-button--text:active {
	opacity: 0.75;
}

/* ============================================
   WOOCOMMERCE BUTTONS
   ============================================ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-message a.button,
.woocommerce-info a.button {
	background-color: #A8823D;
	border-color: #A8823D;
	color: #F5EFE3;
	padding: 0.875rem 1.75rem;
	border-radius: 4px;
	border-width: 1px;
	font-size: 1rem;
	font-weight: 500;
	min-height: 44px;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	transition: background-color 150ms ease-out,
	            border-color 150ms ease-out;
	appearance: none;
	-webkit-appearance: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
	background-color: #8B6F47;
	border-color: #8B6F47;
	color: #F5EFE3;
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce-message a.button:active,
.woocommerce-info a.button:active {
	opacity: 0.85;
}

/* WooCommerce Primary CTA (Alt/Checkout) */

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .checkout-button,
.woocommerce a.checkout-button,
.woocommerce #place_order,
.woocommerce .single_add_to_cart_button,
.woocommerce .wc-proceed-to-checkout .checkout-button,
.woocommerce-page .single_add_to_cart_button {
	background-color: #A8823D;
	border-color: #A8823D;
	color: #F5EFE3;
	font-weight: 600;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .checkout-button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-page .single_add_to_cart_button:hover {
	background-color: #8B6F47;
	border-color: #8B6F47;
	color: #F5EFE3;
}

/* WooCommerce Secondary Actions */

.woocommerce-cart table.cart td.actions .button,
.woocommerce-cart input[type="submit"],
.woocommerce .continue-shopping {
	background-color: #2E1A24;
	border-color: #2E1A24;
	color: #F5EFE3;
}

.woocommerce-cart table.cart td.actions .button:hover,
.woocommerce-cart input[type="submit"]:hover,
.woocommerce .continue-shopping:hover {
	background-color: #1a0f15;
	border-color: #1a0f15;
}

/* ============================================
   DISABLED STATE
   ============================================ */

button:disabled,
button[disabled],
input[type="submit"]:disabled,
input[type="submit"][disabled],
input[type="button"]:disabled,
input[type="button"][disabled],
input[type="reset"]:disabled,
input[type="reset"][disabled],
.button[disabled],
.button.disabled,
.wp-element-button[disabled],
.wp-element-button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce a.button.disabled {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

button:disabled:hover,
button[disabled]:hover,
input[type="submit"]:disabled:hover,
input[type="submit"][disabled]:hover,
input[type="button"]:disabled:hover,
input[type="button"][disabled]:hover,
.button[disabled]:hover,
.button.disabled:hover,
.wp-element-button[disabled]:hover,
.wp-element-button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce input.button:disabled:hover {
	background-color: #A8823D;
	border-color: #A8823D;
	cursor: not-allowed;
}

/* ============================================
   FOCUS STATE (Keyboard Navigation)
   ============================================ */

button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
.button:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible {
	outline: 2px solid #A8823D;
	outline-offset: 2px;
	box-shadow: none;
}

button:focus-visible:disabled,
input[type="submit"]:focus-visible:disabled,
input[type="button"]:focus-visible:disabled,
.button:focus-visible[disabled],
.wp-element-button:focus-visible[disabled] {
	outline-color: #2E1A24;
}

/* ============================================
   FULL WIDTH VARIANT
   ============================================ */

.tw-button--full,
.button.full-width,
.woocommerce a.button.full-width,
.woocommerce button.button.full-width,
.woocommerce input.button.full-width {
	width: 100%;
	display: block;
}

/* ============================================
   BUTTON GROUP (Helper)
   ============================================ */

.button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.button-group .button,
.button-group button,
.button-group input[type="submit"],
.button-group input[type="button"] {
	flex: 1;
	min-width: 100px;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (min-width: 48rem) {
	button,
	input[type="submit"],
	input[type="button"],
	input[type="reset"],
	.button,
	.wp-element-button,
	.wp-block-button__link,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		padding: 0.875rem 2rem;
	}

	button.text,
	input[type="submit"].text,
	input[type="button"].text,
	.button.button-text,
	.tw-button--text {
		padding: 0.625rem 1rem;
	}

	.button-group {
		gap: 1rem;
	}

	.button-group .button,
	.button-group button,
	.button-group input[type="submit"],
	.button-group input[type="button"] {
		flex: 0 1 auto;
		min-width: 120px;
	}
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	button,
	input[type="submit"],
	input[type="button"],
	input[type="reset"],
	.button,
	.wp-element-button,
	.wp-block-button__link,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button {
		transition: none;
	}

	button:active,
	input[type="submit"]:active,
	input[type="button"]:active,
	input[type="reset"]:active,
	.button:active,
	.wp-element-button:active,
	.wp-block-button__link:active {
		transform: none;
	}
}