/**
 * _Forms
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/shared/_forms.css
 * @author     Webstepper.io <contact@webstepper.io>
 * @copyright  2025 Webstepper.io
 * @license    GPL-3.0-or-later https://www.gnu.org/licenses/gpl-3.0.html
 * @link       https://webstepper.io/wordpress/plugins/smart-cycle-discounts/
 * @since      1.0.0
 */

/* ==========================================================================
   Form Field Container
   ========================================================================== */

/**
 * Standard form field container with label, input, tooltip, and error
 * Anatomy: .wsscd-form-field > label + .wsscd-field-helper + input + .wsscd-form-error
 */
.wsscd-form-field {
	margin-bottom: var(--wsscd-form-field-gap);
}

.wsscd-form-field label {
	display: inline-block;
	margin-bottom: var(--wsscd-form-field-label-gap);
	font-size: var(--wsscd-font-size-medium);
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-text);
	letter-spacing: -0.01em;
}

.wsscd-form-field label .required {
	margin-left: 0;
	color: var(--wsscd-form-error);
}

/* ==========================================================================
   Layout Modifiers
   ========================================================================== */

/* Horizontal layout - label and input side-by-side */
.wsscd-form-field--horizontal {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-md);
}

.wsscd-form-field--horizontal label {
	margin-bottom: 0;
	min-width: var(--wsscd-form-field-horizontal-label-width);
	flex-shrink: 0;
}

.wsscd-form-field--horizontal input,
.wsscd-form-field--horizontal select,
.wsscd-form-field--horizontal textarea {
	flex: 1;
}

/* Inline layout - compact horizontal with smaller label */
.wsscd-form-field--inline {
	display: inline-flex;
	align-items: center;
	gap: var(--wsscd-spacing-sm);
	margin-bottom: var(--wsscd-spacing-md);
}

.wsscd-form-field--inline label {
	margin-bottom: 0;
	font-weight: var(--wsscd-font-weight-medium);
}

/* ==========================================================================
   Base Input Styling
   ========================================================================== */

/**
 * Input classes hierarchy:
 * - .wsscd-input/.wsscd-textarea/.wsscd-select - Basic themed inputs
 * - .wsscd-enhanced-input/.wsscd-enhanced-select - Premium styled inputs (wizard)
 */

/* Basic themed inputs */
.wsscd-input,
.wsscd-textarea,
.wsscd-select {
	width: 100%;
	max-width: var(--wsscd-form-field-width-medium);
	padding: 0 var(--wsscd-spacing-sm);
	font-size: var(--wsscd-font-size-base);
	line-height: 2;
	color: var(--wsscd-color-text);
	background-color: var(--wsscd-color-background);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-md);
	box-sizing: border-box;
	transition: border-color var(--wsscd-transition-base) ease;
}

/* Enhanced inputs - premium styling for wizard */
input[type].wsscd-enhanced-input,
textarea.wsscd-enhanced-input,
select.wsscd-enhanced-select {
	width: 100%;
	padding: var(--wsscd-padding-small) var(--wsscd-spacing-md);
	font-size: var(--wsscd-font-size-medium);
	line-height: var(--wsscd-line-height-base);
	min-height: var(--wsscd-input-height);
	color: var(--wsscd-color-text);
	background-color: var(--wsscd-color-background);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
	box-shadow: var(--wsscd-input-shadow);
	border-radius: var(--wsscd-radius-custom);
	box-sizing: border-box;
	transition: var(--wsscd-form-input-transition);
}

/* ==========================================================================
   Focus States
   ========================================================================== */

/* Focus - border color change + subtle shadow, override WordPress box-shadow ring */
.wsscd-input:focus,
.wsscd-textarea:focus,
.wsscd-select:focus,
input[type].wsscd-enhanced-input:focus,
textarea.wsscd-enhanced-input:focus,
select.wsscd-enhanced-select:focus,
input[type].wsscd-themed:focus,
textarea.wsscd-themed:focus,
select.wsscd-themed:focus {
	outline: none;
	border-color: var(--wsscd-form-focus);
	box-shadow: var(--wsscd-input-focus-shadow);
}

/* ==========================================================================
   Element-Specific Styles
   ========================================================================== */

/* Textarea */
.wsscd-textarea,
textarea.wsscd-enhanced-input,
textarea.wsscd-themed {
	min-height: 80px;
	resize: vertical;
	line-height: var(--wsscd-line-height-base);
	padding: var(--wsscd-spacing-sm);
}

/* Select - dropdown arrow */
.wsscd-select,
select.wsscd-enhanced-select,
select.wsscd-themed {
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: right 8px center;
	padding-right: 28px;
	position: relative;
}

/* Use CSS mask technique for themed dropdown arrows */
.wsscd-form-field:has(.wsscd-select),
.wsscd-form-field:has(select.wsscd-enhanced-select),
.wsscd-form-field:has(select.wsscd-themed) {
	position: relative;
}

.wsscd-form-field:has(.wsscd-select)::after,
.wsscd-form-field:has(select.wsscd-themed)::after {
	content: '';
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat center;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-color: var(--wsscd-color-text-lighter);
	pointer-events: none;
}

/* ==========================================================================
   Size Modifiers
   ========================================================================== */

/* Small inputs */
.wsscd-form-field--small input,
.wsscd-form-field--small select,
.wsscd-form-field--small textarea,
.wsscd-input--small,
.wsscd-select--small,
.wsscd-textarea--small,
.wsscd-input-small {
	max-width: var(--wsscd-form-field-width-small);
}

/* Medium inputs (default) */
.wsscd-form-field--medium input,
.wsscd-form-field--medium select,
.wsscd-form-field--medium textarea,
.wsscd-input--medium,
.wsscd-select--medium,
.wsscd-textarea--medium {
	max-width: var(--wsscd-form-field-width-medium);
}

/* Large inputs */
.wsscd-form-field--large input,
.wsscd-form-field--large select,
.wsscd-form-field--large textarea,
.wsscd-input--large,
.wsscd-select--large,
.wsscd-textarea--large {
	max-width: var(--wsscd-form-field-width-large);
}

/* Full-width inputs */
.wsscd-form-field--full input,
.wsscd-form-field--full select,
.wsscd-form-field--full textarea,
.wsscd-input--full,
.wsscd-select--full,
.wsscd-textarea--full {
	max-width: none;
	width: 100%;
}

/* ==========================================================================
   Checkboxes & Radios
   --------------------------------------------------------------------------
   Modern custom controls applied to every plugin checkbox/radio inside the
   admin page wrapper (.wrap) — the shared form stylesheet only loads on
   plugin pages — plus the explicit .wsscd-themed / .wsscd-checkbox /
   .wsscd-radio hooks for markup rendered outside a .wrap. The toggle-switch
   input is intentionally hidden (width/height/opacity 0) by a later rule, so
   these styles never surface on it.
   ========================================================================== */

.wrap input[type="checkbox"],
.wrap input[type="radio"],
.wsscd-checkbox input[type="checkbox"],
.wsscd-radio input[type="radio"],
input[type="checkbox"].wsscd-themed,
input[type="radio"].wsscd-themed {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	cursor: pointer;
	vertical-align: middle;
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-dark);
	border-radius: var(--wsscd-radius-sm);
	background-color: var(--wsscd-color-background);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	transition: border-color var(--wsscd-transition-base) ease,
		background-color var(--wsscd-transition-base) ease,
		box-shadow var(--wsscd-transition-base) ease;
}

/* Radios are round */
.wrap input[type="radio"],
.wsscd-radio input[type="radio"],
input[type="radio"].wsscd-themed {
	border-radius: var(--wsscd-radius-full);
}

/* Hover — brand-tinted border */
.wrap input[type="checkbox"]:not(:disabled):hover,
.wrap input[type="radio"]:not(:disabled):hover,
.wsscd-checkbox input[type="checkbox"]:not(:disabled):hover,
.wsscd-radio input[type="radio"]:not(:disabled):hover,
input[type="checkbox"].wsscd-themed:not(:disabled):hover,
input[type="radio"].wsscd-themed:not(:disabled):hover {
	border-color: var(--wsscd-form-focus);
}

/* Checked checkbox — filled with a crisp white tick */
.wrap input[type="checkbox"]:checked,
.wsscd-checkbox input[type="checkbox"]:checked,
input[type="checkbox"].wsscd-themed:checked {
	border-color: var(--wsscd-form-checked-border);
	background-color: var(--wsscd-form-checked-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
}

/* Checked radio — filled with a centred dot */
.wrap input[type="radio"]:checked,
.wsscd-radio input[type="radio"]:checked,
input[type="radio"].wsscd-themed:checked {
	border-color: var(--wsscd-form-checked-border);
	background-color: var(--wsscd-form-checked-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5' fill='%23fff'/%3E%3C/svg%3E");
}

/* Focus (pointer) — recolour border, no harsh native outline */
.wrap input[type="checkbox"]:focus,
.wrap input[type="radio"]:focus,
.wsscd-checkbox input[type="checkbox"]:focus,
.wsscd-radio input[type="radio"]:focus,
input[type="checkbox"].wsscd-themed:focus,
input[type="radio"].wsscd-themed:focus {
	outline: none;
	border-color: var(--wsscd-form-focus);
}

/* Focus-visible (keyboard) — accessible ring matching text inputs */
.wrap input[type="checkbox"]:focus-visible,
.wrap input[type="radio"]:focus-visible,
.wsscd-checkbox input[type="checkbox"]:focus-visible,
.wsscd-radio input[type="radio"]:focus-visible,
input[type="checkbox"].wsscd-themed:focus-visible,
input[type="radio"].wsscd-themed:focus-visible {
	outline: none;
	border-color: var(--wsscd-form-focus);
	box-shadow: var(--wsscd-input-focus-shadow);
}

/* Disabled */
.wrap input[type="checkbox"]:disabled,
.wrap input[type="radio"]:disabled,
.wsscd-checkbox input[type="checkbox"]:disabled,
.wsscd-radio input[type="radio"]:disabled,
input[type="checkbox"].wsscd-themed:disabled,
input[type="radio"].wsscd-themed:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/* ==========================================================================
   Toggle Switches
   ========================================================================== */

/**
 * Toggle switch component using the standard HTML structure:
 * <label class="wsscd-toggle">
 *     <input type="checkbox" />
 *     <span class="wsscd-toggle-slider"></span>
 * </label>
 */

.wsscd-toggle {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

/* Hide the actual checkbox */
.wsscd-toggle input[type="checkbox"] {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
}

/* Toggle Track (slider background) */
.wsscd-toggle-slider {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 22px;
	background: var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-pill);
	box-shadow: var(--wsscd-shadow-inset-subtle);
	transition: var(--wsscd-transition-colors);
}

/* Toggle Thumb (slider knob) - using ::before pseudo-element */
.wsscd-toggle-slider::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background: var(--wsscd-color-white);
	border-radius: var(--wsscd-radius-full);
	box-shadow: var(--wsscd-shadow-sm);
	transition: var(--wsscd-transition-transform);
}

/* Checked State */
.wsscd-toggle input[type="checkbox"]:checked + .wsscd-toggle-slider {
	background: var(--wsscd-color-primary);
	box-shadow: var(--wsscd-shadow-inset);
}

.wsscd-toggle input[type="checkbox"]:checked + .wsscd-toggle-slider::before {
	transform: translateX(22px);
}

/* Focus State - no visible outline for mouse clicks */
.wsscd-toggle input[type="checkbox"]:focus + .wsscd-toggle-slider {
	outline: none;
}

/* Focus-visible State - keyboard navigation only */
.wsscd-toggle input[type="checkbox"]:focus-visible + .wsscd-toggle-slider {
	outline: var(--wsscd-border-width-focus) solid var(--wsscd-color-primary);
	outline-offset: var(--wsscd-spacing-xxs);
	box-shadow: var(--wsscd-ring-focus);
}

/* Disabled State */
.wsscd-toggle input[type="checkbox"]:disabled + .wsscd-toggle-slider {
	cursor: not-allowed;
	opacity: 0.5;
	background: var(--wsscd-color-border-light);
}

.wsscd-toggle:has(input[type="checkbox"]:disabled) {
	cursor: not-allowed;
}

/* PRO Feature Locked State */
.wsscd-pro-feature-locked .wsscd-toggle {
	cursor: not-allowed;
}

.wsscd-pro-feature-locked .wsscd-toggle-slider {
	opacity: 0.5;
	background: var(--wsscd-color-border-light);
}

/* ==========================================================================
   Form States
   ========================================================================== */

/* Success state */
.wsscd-form-field--success .wsscd-input,
.wsscd-form-field--success .wsscd-textarea,
.wsscd-form-field--success .wsscd-select,
.wsscd-form-field--success input.wsscd-enhanced-input,
.wsscd-form-field--success textarea.wsscd-enhanced-input,
.wsscd-form-field--success select.wsscd-enhanced-select,
.wsscd-input--success,
.wsscd-textarea--success,
.wsscd-select--success {
	border-color: var(--wsscd-form-success);
	background-color: var(--wsscd-color-success-lighter);
}

.wsscd-form-field--success .wsscd-input:focus,
.wsscd-form-field--success .wsscd-textarea:focus,
.wsscd-form-field--success .wsscd-select:focus,
.wsscd-form-field--success input.wsscd-enhanced-input:focus,
.wsscd-form-field--success textarea.wsscd-enhanced-input:focus,
.wsscd-form-field--success select.wsscd-enhanced-select:focus,
.wsscd-input--success:focus,
.wsscd-textarea--success:focus,
.wsscd-select--success:focus {
	outline: none;
	border-color: var(--wsscd-form-success);
}

.wsscd-form-field--success .wsscd-input:focus-visible,
.wsscd-form-field--success .wsscd-textarea:focus-visible,
.wsscd-form-field--success .wsscd-select:focus-visible,
.wsscd-form-field--success input.wsscd-enhanced-input:focus-visible,
.wsscd-form-field--success textarea.wsscd-enhanced-input:focus-visible,
.wsscd-form-field--success select.wsscd-enhanced-select:focus-visible,
.wsscd-input--success:focus-visible,
.wsscd-textarea--success:focus-visible,
.wsscd-select--success:focus-visible {
	outline: none;
}

.wsscd-form-success {
	display: block;
	margin-top: var(--wsscd-spacing-xs);
	font-size: var(--wsscd-font-size-small);
	color: var(--wsscd-form-success);
}

/* Disabled state */
.wsscd-input:disabled,
.wsscd-textarea:disabled,
.wsscd-select:disabled,
input[type].wsscd-enhanced-input:disabled,
textarea.wsscd-enhanced-input:disabled,
select.wsscd-enhanced-select:disabled,
input[type].wsscd-themed:disabled,
textarea.wsscd-themed:disabled,
select.wsscd-themed:disabled,
.wsscd-input--disabled,
.wsscd-textarea--disabled,
.wsscd-select--disabled {
	cursor: not-allowed;
	background-color: var(--wsscd-color-bg-disabled);
	border-color: var(--wsscd-color-border-disabled);
	color: var(--wsscd-color-text-disabled);
}

/* ==========================================================================
   Input Groups
   ========================================================================== */

/* ==========================================================================
   Input Groups - Prefix + Input Combined Fields
   ========================================================================== */

/* Container */
.wsscd-input-group {
	display: flex;
	align-items: stretch;
	max-width: var(--wsscd-form-field-width-medium);
}

/* Prefix (%, $, etc.) */
.wsscd-input-group .wsscd-input-prefix {
	display: flex;
	align-items: center;
	padding: var(--wsscd-padding-small) var(--wsscd-spacing-md);
	background: var(--wsscd-color-surface);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
	border-right: 0;
	border-radius: var(--wsscd-radius-custom) 0 0 var(--wsscd-radius-custom);
	color: var(--wsscd-color-text);
	font-size: var(--wsscd-font-size-medium);
	font-weight: var(--wsscd-font-weight-semibold);
	line-height: var(--wsscd-line-height-base);
	min-height: var(--wsscd-input-height);
	white-space: nowrap;
	box-sizing: border-box;
}

/* Input field after prefix - seamless connection */
.wsscd-input-group input[type],
.wsscd-input-group input.wsscd-enhanced-input,
.wsscd-input-group .wsscd-enhanced-input {
	flex: 1;
	border-left: 0;
	border-radius: 0 var(--wsscd-radius-custom) var(--wsscd-radius-custom) 0;
	margin: 0;
	max-width: none;
}

/* Enhanced theme - add matching shadow to prefix */
.wsscd-input-group .wsscd-input-prefix {
	box-shadow: var(--wsscd-input-shadow);
}

/* Focus state for entire group */
.wsscd-input-group:focus-within .wsscd-input-prefix {
	border-color: var(--wsscd-form-focus);
}

/* Input Wrapper - Flex container for input + suffix */
.wsscd-input-wrapper {
	display: flex;
	align-items: center;
	gap: var(--wsscd-spacing-md);
	max-width: 100%;
}

.wsscd-input-wrapper input:not( .wsscd-enhanced-input ),
.wsscd-input-wrapper select:not( .wsscd-enhanced-select ) {
	flex: 0 1 var(--wsscd-form-field-width-medium);
	max-width: var(--wsscd-form-field-width-medium);
}

/* Field Suffix - Descriptive label after input */
.wsscd-field-suffix {
	display: inline-block;
	margin-left: var(--wsscd-spacing-md);
	font-size: var(--wsscd-font-size-base);
	color: var(--wsscd-color-text-muted);
	font-weight: var(--wsscd-font-weight-medium);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ==========================================================================
   Form Section - Logical grouping of related form fields
   ========================================================================== */

/**
 * Form section provides semantic grouping of related fields
 * Used to organize complex forms into manageable sections
 *
 * Structure:
 *   .wsscd-form-section
 *     .wsscd-form-section-title (optional)
 *     [form fields]
 */

.wsscd-form-section {
	margin-bottom: var(--wsscd-spacing-xxl, 32px);
}

.wsscd-form-section-title {
	font-size: var(--wsscd-font-size-large);
	font-weight: var(--wsscd-font-weight-semibold, 600);
	color: var(--wsscd-color-text);
	margin: 0;
	line-height: var(--wsscd-line-height-tight);
	letter-spacing: -0.01em;
}

/* ==========================================================================
   Rules Table - Enhanced form table styling
   ========================================================================== */

.wsscd-rules-table tr {
	border-bottom: 1px solid var(--wsscd-color-border-lighter);
}

.wsscd-rules-table tr:last-child {
	border-bottom: none;
}

.wsscd-rules-table th {
	width: 200px;
	padding: var(--wsscd-padding-large) var(--wsscd-spacing-lg) var(--wsscd-padding-medium) 0;
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-text);
}

.wsscd-rules-table th label {
	display: flex;
	align-items: center;
	gap: var(--wsscd-gap-tight);
	font-size: var(--wsscd-font-size-medium);
	line-height: var(--wsscd-line-height-base);
}

.wsscd-rules-table td {
	padding: var(--wsscd-padding-large) 0;
}

/* Label Icon - Optional icon before label text */
.wsscd-label-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wsscd-icon-medium);
	height: var(--wsscd-icon-medium);
	color: var(--wsscd-color-primary);
}

.wsscd-label-icon .wsscd-icon {
	font-size: var(--wsscd-font-size-xxl);
	width: var(--wsscd-icon-medium);
	height: var(--wsscd-icon-medium);
}

/* ==========================================================================
   Legacy Support (Deprecated - use .wsscd-form-field instead)
   ========================================================================== */

/* Backward compatibility for old class names */
.wsscd-field-container,
.form-field {
	margin-bottom: var(--wsscd-form-field-gap);
}

.form-field label {
	display: inline-block;
	margin-bottom: var(--wsscd-form-field-label-gap);
	font-size: var(--wsscd-font-size-medium);
	font-weight: var(--wsscd-font-weight-semibold);
	color: var(--wsscd-color-text);
	letter-spacing: -0.01em;
}

/* Select Wrapper - Consistent styling for select dropdowns */
.wsscd-select-wrapper {
	position: relative;
	display: block;
	width: 100%;
	max-width: var(--wsscd-form-field-width-medium);
}

.wsscd-select-wrapper select {
	appearance: none;
	padding-right: 36px;
	background-repeat: no-repeat;
	background-position: right var(--wsscd-spacing-md) center;
	background-size: var(--wsscd-spacing-md);
	cursor: pointer;
	width: 100%;
}

/* Dropdown arrow using CSS mask for theme color support */
.wsscd-select-wrapper::after {
	content: '';
	position: absolute;
	right: var(--wsscd-spacing-md);
	top: 50%;
	transform: translateY(-50%);
	width: var(--wsscd-spacing-md);
	height: var(--wsscd-spacing-md);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat center;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 9L1 4h10z'/%3E%3C/svg%3E") no-repeat center;
	-webkit-mask-size: contain;
	mask-size: contain;
	background-color: var(--wsscd-color-text-lighter);
	pointer-events: none;
}

/* ==========================================================================
   Premium Input Polish (Variable-Based)
   ========================================================================== */

/* Note: Enhanced input styling (shadow, border-radius, transitions, focus states)
   is now consolidated in the "Enhanced inputs" section above (lines 98-140)
   to eliminate duplication and maintain a single source of truth. */