/* ===========================
   CSS Custom Properties (Theme Tokens)
=========================== */
:root {
	/* Panel/Container Styling */
	--dwcf-panel-bg: #fafafa;
	--dwcf-panel-border-color: #eaeaea;
	--dwcf-panel-border-width: 1px;
	--dwcf-panel-border-radius: 6px;
	--dwcf-panel-padding: 1em;
	--dwcf-panel-margin-bottom: 1.25em;
	--dwcf-panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	
	/* Helper Text */
	--dwcf-helper-text-color: #666;
	--dwcf-helper-text-size: 0.9em;
	--dwcf-helper-text-margin: 0 0 0.75em 0;
	
	/* Input Field */
	--dwcf-input-bg: #fff;
	--dwcf-input-border-color: #d9d9d9;
	--dwcf-input-border-focus: #999;
	--dwcf-input-border-radius: 4px;
	--dwcf-input-padding: 0.5em 0.875em;
	--dwcf-input-font-size: 0.95em;
	
	/* Button Colors */
	--dwcf-btn-inactive-bg: #aaa;
	--dwcf-btn-inactive-border: #aaa;
	--dwcf-btn-inactive-text: #fff;
	
	--dwcf-btn-active-bg: #4c8230;
	--dwcf-btn-active-hover-bg: #5a9e3a;
	--dwcf-btn-active-border: #4c8230;
	--dwcf-btn-active-text: #fff;
	
	/* Button Sizing */
	--dwcf-btn-padding: 0 1.5em;
	--dwcf-btn-font-size: 0.9em;
	--dwcf-btn-min-height: 2.5em;
	--dwcf-btn-border-radius: 4px;
	
	/* Message Colors */
	--dwcf-msg-success-bg: #eaf7ec;
	--dwcf-msg-success-border: #cde3d0;
	--dwcf-msg-success-text: #215732;
	
	--dwcf-msg-error-bg: #f9eaea;
	--dwcf-msg-error-border: #f1c8c8;
	--dwcf-msg-error-text: #8a1d1d;
	
	/* Message Sizing */
	--dwcf-msg-margin-top: 0.75em;
	--dwcf-msg-padding: 0.6em 0.8em;
	--dwcf-msg-font-size: 0.95em;
	--dwcf-msg-border-radius: 3px;
}

/* ===========================
   Wrapper panel (subtle, integrated look)
=========================== */
.woocommerce-cart .dwcf-cart-coupon-panel,
.woocommerce-page .dwcf-cart-coupon-panel,
.dwcf-checkout-coupon-panel {
	background: var(--dwcf-panel-bg) !important;
	border: var(--dwcf-panel-border-width) solid var(--dwcf-panel-border-color) !important;
	border-radius: var(--dwcf-panel-border-radius) !important;
	padding: var(--dwcf-panel-padding) !important;
	margin-bottom: var(--dwcf-panel-margin-bottom) !important;
	box-shadow: var(--dwcf-panel-shadow) !important;
}

/* Checkout-specific positioning */
.dwcf-checkout-coupon-panel {
	margin-top: 1em;
	margin-bottom: 1.5em;
}

/* Helper text above coupon field */
.dwcf-cart-coupon-panel .coupon-helper-text,
.dwcf-checkout-coupon-panel .coupon-helper-text {
	font-size: var(--dwcf-helper-text-size);
	color: var(--dwcf-helper-text-color);
	margin: var(--dwcf-helper-text-margin);
	line-height: 1.4;
}

/* ===========================
   Form layout
=========================== */
.woocommerce-cart .dwcf-cart-coupon,
.woocommerce-page .dwcf-cart-coupon,
.dwcf-checkout-coupon {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.woocommerce-cart .dwcf-cart-coupon .coupon,
.woocommerce-page .dwcf-cart-coupon .coupon,
.dwcf-checkout-coupon .coupon {
	display: flex !important;
	align-items: stretch !important;
	width: 100% !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* ===========================
   Input (slimmer vertical height)
=========================== */
.woocommerce-cart .dwcf-cart-coupon .coupon input.input-text,
.woocommerce-page .dwcf-cart-coupon .coupon input.input-text,
.woocommerce .dwcf-checkout-coupon .coupon input.input-text,
.woocommerce-page .dwcf-checkout-coupon .coupon input.input-text {
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	border: 1px solid var(--dwcf-input-border-color) !important;
	border-radius: var(--dwcf-input-border-radius) 0 0 var(--dwcf-input-border-radius) !important;
	margin: 0 !important;
	padding: var(--dwcf-input-padding) !important;
	font-size: var(--dwcf-input-font-size) !important;
	line-height: 1.3 !important;
	box-sizing: border-box !important;
	height: auto !important;
	background-color: var(--dwcf-input-bg) !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.woocommerce-cart .dwcf-cart-coupon .coupon input.input-text:focus,
.woocommerce-page .dwcf-cart-coupon .coupon input.input-text:focus,
.dwcf-checkout-coupon .coupon input.input-text:focus {
	border-color: var(--dwcf-input-border-focus) !important;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
	outline: none !important;
}

/* ===========================
   Button (inactive by default, active when text entered)
=========================== */
.woocommerce-cart .dwcf-cart-coupon .button,
.woocommerce-page .dwcf-cart-coupon .button,
.dwcf-checkout-coupon .button {
	background-color: var(--dwcf-btn-inactive-bg) !important;
	color: var(--dwcf-btn-inactive-text) !important;
	border: 1px solid var(--dwcf-btn-inactive-border) !important;
	border-radius: 0 var(--dwcf-btn-border-radius) var(--dwcf-btn-border-radius) 0 !important;
	margin: 0 !important;
	padding: var(--dwcf-btn-padding) !important;
	font-size: var(--dwcf-btn-font-size) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	white-space: nowrap !important;
	min-height: var(--dwcf-btn-min-height) !important;
	box-shadow: none !important;
	transition: all 0.2s ease !important;
	cursor: not-allowed !important;
	opacity: 1 !important;
	width: auto !important; /* Override theme's width: 100% */
}

/* Override theme/WooCommerce disabled button styles */
.woocommerce-cart .dwcf-cart-coupon .button:disabled,
.woocommerce-page .dwcf-cart-coupon .button:disabled,
.woocommerce-cart .dwcf-cart-coupon .button.disabled,
.woocommerce-page .dwcf-cart-coupon .button.disabled,
.dwcf-checkout-coupon .button:disabled,
.dwcf-checkout-coupon .button.disabled {
	opacity: 1 !important;
	background-color: var(--dwcf-btn-inactive-bg) !important;
	border-color: var(--dwcf-btn-inactive-border) !important;
	color: var(--dwcf-btn-inactive-text) !important;
}

/* Remove hover effect when inactive */
.woocommerce-cart .dwcf-cart-coupon .button:not(.active):hover,
.woocommerce-page .dwcf-cart-coupon .button:not(.active):hover,
.dwcf-checkout-coupon .button:not(.active):hover {
	background-color: var(--dwcf-btn-inactive-bg) !important;
	border-color: var(--dwcf-btn-inactive-border) !important;
	color: var(--dwcf-btn-inactive-text) !important;
}

/* Active state (when input has text) */
.woocommerce-cart .dwcf-cart-coupon .button.active,
.woocommerce-page .dwcf-cart-coupon .button.active,
.dwcf-checkout-coupon .button.active {
	background-color: var(--dwcf-btn-active-bg) !important;
	border-color: var(--dwcf-btn-active-border) !important;
	color: var(--dwcf-btn-active-text) !important;
	cursor: pointer !important;
	opacity: 1 !important;
}

/* Hover only works when active */
.woocommerce-cart .dwcf-cart-coupon .button.active:hover,
.woocommerce-page .dwcf-cart-coupon .button.active:hover,
.dwcf-checkout-coupon .button.active:hover {
	background-color: var(--dwcf-btn-active-hover-bg) !important;
	border-color: var(--dwcf-btn-active-border) !important;
}

/* Loading state */
.dwcf-cart-coupon-form .dwcf-apply-coupon.loading,
.dwcf-checkout-coupon-form .dwcf-apply-coupon.loading {
	opacity: 0.6;
	cursor: wait;
	pointer-events: none;
}

/* ===========================
   Messages (refined colours)
=========================== */
.dwcf-coupon-message {
	margin-top: var(--dwcf-msg-margin-top);
	padding: var(--dwcf-msg-padding);
	font-weight: 600;
	display: none;
	border-radius: var(--dwcf-msg-border-radius);
	font-size: var(--dwcf-msg-font-size);
	line-height: 1.4;
	transition: all 0.3s ease;
	transform: translateY(8px);
	opacity: 0;
}

.dwcf-coupon-message.success {
	color: var(--dwcf-msg-success-text);
	background: var(--dwcf-msg-success-bg);
	border: 1px solid var(--dwcf-msg-success-border);
	transform: translateY(0);
	opacity: 1;
}

.dwcf-coupon-message.error {
	color: var(--dwcf-msg-error-text);
	background: var(--dwcf-msg-error-bg);
	border: 1px solid var(--dwcf-msg-error-border);
	transform: translateY(0);
	opacity: 1;
}

/* ===========================
   Responsive stacking
=========================== */
@media (max-width: 480px) {
	.woocommerce-cart .dwcf-cart-coupon .coupon,
	.woocommerce-page .dwcf-cart-coupon .coupon,
	.dwcf-checkout-coupon .coupon {
		flex-direction: column !important;
	}
	.woocommerce-cart .dwcf-cart-coupon input.input-text,
	.woocommerce-page .dwcf-cart-coupon input.input-text,
	.woocommerce-cart .dwcf-cart-coupon .button,
	.woocommerce-page .dwcf-cart-coupon .button,
	.dwcf-checkout-coupon input.input-text,
	.dwcf-checkout-coupon .button {
		width: 100% !important;
		border-radius: var(--dwcf-input-border-radius) !important;
	}
	.woocommerce-cart .dwcf-cart-coupon .button,
	.woocommerce-page .dwcf-cart-coupon .button,
	.dwcf-checkout-coupon .button {
		margin-top: 0.75em !important;
		border-radius: var(--dwcf-btn-border-radius) !important;
	}
}