/**
 * Smart Waitlist for WooCommerce — Public Styles
 *
 * BEM naming convention: .swfwc-form, .swfwc-form__element, .swfwc-form--modifier
 * Mobile-first responsive layout.
 * WCAG AA contrast ratio ≥ 4.5:1 for all text.
 * No !important except where noted.
 *
 * @package Smart_Waitlist_Woo
 * @since   1.0.0
 */

/* -------------------------------------------------------------------------
   Custom Properties (easy theming — override in your theme's stylesheet)
------------------------------------------------------------------------- */
.swfwc-form-wrapper {
	--swfwc-primary:        var(--wp--preset--color--primary, #2271b1);
	--swfwc-primary-hover:  var(--wp--preset--color--primary, #135e96);
	--swfwc-primary-text:   #ffffff;
	--swfwc-border:         #d1d5db;
	--swfwc-border-focus:   var(--swfwc-primary);
	--swfwc-bg:             transparent;
	--swfwc-text:           inherit;
	--swfwc-text-muted:     currentColor;
	--swfwc-success-bg:     #ecfdf5;
	--swfwc-success-text:   #065f46;
	--swfwc-success-border: #6ee7b7;
	--swfwc-error-bg:       #fef2f2;
	--swfwc-error-text:     #991b1b;
	--swfwc-error-border:   #fca5a5;
	--swfwc-border-radius:  4px;
	--swfwc-input-border-radius: var(--swfwc-border-radius);
	--swfwc-font-size:      14px;
	--swfwc-spacing:        12px;
	--swfwc-form-width:     480px;
	--swfwc-form-padding:   20px;
	--swfwc-form-shadow:    none;
	--swfwc-input-bg:       Field;
	--swfwc-input-text:     FieldText;
	--swfwc-input-border:   var(--swfwc-border);
	--swfwc-input-padding:  9px 12px;
	--swfwc-button-padding: 10px 22px;
	--swfwc-button-width:   auto;
}

/* -------------------------------------------------------------------------
   Form Wrapper
------------------------------------------------------------------------- */
.swfwc-form-wrapper {
	margin: 20px 0;
	font-size: var(--swfwc-font-size);
	font-family: var(--swfwc-font-family, inherit);
	color: var(--swfwc-text);
}

.swfwc-form-wrapper--hidden {
	display: none;
}

/* -------------------------------------------------------------------------
   Form Container
------------------------------------------------------------------------- */
.swfwc-form {
	background: var(--swfwc-bg);
	border: 1px solid var(--swfwc-border);
	border-radius: var(--swfwc-border-radius);
	box-shadow: var(--swfwc-form-shadow);
	padding: var(--swfwc-form-padding);
	max-width: var(--swfwc-form-width);
}

/* -------------------------------------------------------------------------
   Heading & Description
------------------------------------------------------------------------- */
.swfwc-form__heading {
	font-size: 16px;
	font-weight: 600;
	color: var(--swfwc-text);
	margin: 0 0 6px;
	line-height: 1.4;
}

.swfwc-form__description {
	color: var(--swfwc-text-muted);
	opacity: 0.78;
	margin: 0 0 16px;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Messages (success / error)
------------------------------------------------------------------------- */
.swfwc-form__messages {
	margin-bottom: 12px;
}

.swfwc-form__message {
	padding: 10px 14px;
	border-radius: var(--swfwc-border-radius);
	border: 1px solid transparent;
	font-size: var(--swfwc-font-size);
	line-height: 1.5;
}

.swfwc-form__message--success {
	background: var(--swfwc-success-bg);
	color:       var(--swfwc-success-text);
	border-color: var(--swfwc-success-border);
}

.swfwc-form__message--error {
	background: var(--swfwc-error-bg);
	color:       var(--swfwc-error-text);
	border-color: var(--swfwc-error-border);
}

/* -------------------------------------------------------------------------
   Field Layout
------------------------------------------------------------------------- */
.swfwc-form__field {
	margin-bottom: var(--swfwc-spacing);
}

.swfwc-form__label {
	display: block;
	font-size: var(--swfwc-font-size);
	font-weight: 500;
	color: var(--swfwc-text);
	margin-bottom: 5px;
}

.swfwc-form__required {
	color: #dc2626;
	margin-left: 2px;
}

/* -------------------------------------------------------------------------
   Inputs
------------------------------------------------------------------------- */
.swfwc-form-wrapper .swfwc-form__input {
	display: block;
	width: 100%;
	padding: var(--swfwc-input-padding);
	font-size: var(--swfwc-font-size);
	font-family: inherit;
	color: var(--swfwc-input-text);
	background: var(--swfwc-input-bg);
	border: 1px solid var(--swfwc-input-border);
	border-radius: var(--swfwc-input-border-radius, var(--swfwc-border-radius));
	box-sizing: border-box;
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.swfwc-form-wrapper .swfwc-form__input:focus {
	outline: none;
	border-color: var(--swfwc-border-focus);
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.2);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--swfwc-border-focus) 22%, transparent);
}

.swfwc-form-wrapper .swfwc-form__input::placeholder {
	color: #9ca3af;
}

.swfwc-form-wrapper .swfwc-form__input:disabled {
	background: #f3f4f6;
	cursor: not-allowed;
	opacity: 0.7;
}

/* -------------------------------------------------------------------------
   Submit Button
------------------------------------------------------------------------- */
.swfwc-form__actions {
	margin-top: 16px;
}

.swfwc-form__button {
	display: inline-block;
	width: var(--swfwc-button-width);
	padding: var(--swfwc-button-padding);
	font-size: var(--swfwc-font-size);
	font-family: inherit;
	font-weight: 600;
	color: var(--swfwc-primary-text);
	background: var(--swfwc-primary);
	border: none;
	border-radius: var(--swfwc-border-radius);
	cursor: pointer;
	line-height: 1.5;
	transition: background 0.15s ease, transform 0.1s ease;
	-webkit-appearance: none;
	appearance: none;
}

.swfwc-form__button:hover:not(:disabled) {
	background: var(--swfwc-primary-hover);
}

.swfwc-form__button:focus-visible {
	outline: 3px solid var(--swfwc-primary);
	outline-offset: 2px;
}

.swfwc-form__button:active:not(:disabled) {
	transform: translateY(1px);
}

.swfwc-form__button:disabled,
.swfwc-form__button--loading {
	opacity: 0.65;
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   Privacy note
------------------------------------------------------------------------- */
.swfwc-form__privacy {
	font-size: 12px;
	color: var(--swfwc-text-muted);
	opacity: 0.72;
	margin: 10px 0 0;
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Already-subscribed message
------------------------------------------------------------------------- */
.swfwc-already-subscribed {
	font-size: var(--swfwc-font-size);
	color: var(--swfwc-success-text);
	background: var(--swfwc-success-bg);
	border: 1px solid var(--swfwc-success-border);
	border-radius: var(--swfwc-border-radius);
	padding: 10px 14px;
	margin: 12px 0;
}

/* -------------------------------------------------------------------------
   Honeypot — must be invisible and inaccessible at all times
------------------------------------------------------------------------- */
.swfwc-form__honeypot {
	display: none !important; /* Required: must always stay hidden. */
	visibility: hidden;
	position: absolute;
	left: -9999px;
}

/* -------------------------------------------------------------------------
   Responsive
------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.swfwc-form {
		padding: 16px;
	}

	.swfwc-form__button {
		width: 100%;
		text-align: center;
	}
}
