/**
 * Cirrusly Weather Theme - Advanced Product Fields (WAPF) Support
 *
 * @package Cirrusly_Theme
 */

/* ==========================================================================
   APF Wrapper & Container
   ========================================================================== */

.wapf-wrapper {
	margin: 1.5rem 0;
}

.wapf-field-group {
	margin-bottom: 1.5rem;
}

/* ==========================================================================
   Field Labels
   ========================================================================== */

.wapf-field-label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
	margin-bottom: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.wapf-field-label .wapf-required {
	color: #e74c3c;
	margin-left: 0.25rem;
}

/* ==========================================================================
   Text Inputs, Selects, Textareas
   ========================================================================== */

.wapf-input-wrap :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="password"], input[type="search"], input[type="time"], input[type="week"], input[type="month"], input[type="datetime-local"], select, textarea) {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-family: inherit;
	color: var(--wp--preset--color--primary-dark);
	background-color: var(--wp--preset--color--white);
	transition: all 0.2s ease;
}

.wapf-input-wrap :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="password"], input[type="search"], input[type="time"], input[type="week"], input[type="month"], input[type="datetime-local"], select, textarea):focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(9, 69, 200, 0.1);
}

.wapf-input-wrap :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="time"], input[type="week"], input[type="month"], input[type="datetime-local"], select, textarea):hover {
	border-color: var(--wp--preset--color--gray-400);
}

.wapf-input-wrap :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="time"], input[type="week"], input[type="month"], input[type="datetime-local"], select, textarea):disabled {
	background-color: var(--wp--preset--color--gray-100);
	cursor: not-allowed;
	opacity: 0.6;
}

.wapf-input-wrap textarea {
	min-height: 100px;
	resize: vertical;
}

/* ==========================================================================
   Select Dropdown Styling
   ========================================================================== */

.wapf-input-wrap select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2312123F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
}

.wapf-input-wrap select option {
	padding: 0.5rem;
}

/* ==========================================================================
   Radio Buttons & Checkboxes - Styled as Visual Options
   ========================================================================== */

.wapf-field-input[data-is-radio],
.wapf-field-input[data-is-checkbox] {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* High specificity selectors to override theme styles */
.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-radio] label,
.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-checkbox] label,
.wc-block-components-product-details .wapf-wrapper .wapf-field-input[data-is-radio] label,
.wc-block-components-product-details .wapf-wrapper .wapf-field-input[data-is-checkbox] label,
.wp-block-woocommerce-product-details .wapf-wrapper .wapf-field-input[data-is-radio] label,
.wp-block-woocommerce-product-details .wapf-wrapper .wapf-field-input[data-is-checkbox] label {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	padding: 0.625rem 1rem !important;
	background-color: #ffffff !important;
	border: 2px solid #d1d5db !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	color: #12123F !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-radio] label:hover,
.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-checkbox] label:hover,
.wc-block-components-product-details .wapf-wrapper .wapf-field-input[data-is-radio] label:hover,
.wc-block-components-product-details .wapf-wrapper .wapf-field-input[data-is-checkbox] label:hover {
	border-color: #0945c8 !important;
	background-color: rgba(9, 69, 200, 0.05) !important;
	color: #12123F !important;
}

.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-radio] input[type="radio"],
.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-checkbox] input[type="checkbox"] {
	appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	border: 2px solid #d1d5db !important;
	background-color: #ffffff !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
}

.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-radio] input[type="radio"] {
	border-radius: 50% !important;
}

.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-checkbox] input[type="checkbox"] {
	border-radius: 4px !important;
}

.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-radio] input[type="radio"]:checked,
.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-checkbox] input[type="checkbox"]:checked {
	border-color: #0945c8 !important;
	background-color: #0945c8 !important;
}

.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-radio] input[type="radio"]:checked {
	box-shadow: inset 0 0 0 4px #ffffff !important;
}

.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-checkbox] input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

/* Selected state for parent label */
.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-radio] label:has(input:checked),
.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-checkbox] label:has(input:checked) {
	border-color: #0945c8 !important;
	background-color: rgba(9, 69, 200, 0.1) !important;
	color: #12123F !important;
}

/* Focus states */
.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-radio] input[type="radio"]:focus,
.wapf-wrapper .wapf-field-group .wapf-field-input[data-is-checkbox] input[type="checkbox"]:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(9, 69, 200, 0.3) !important;
}

/* ==========================================================================
   File Upload Fields
   ========================================================================== */

.wapf-field-input input[type="file"] {
	width: 100%;
	padding: 0.75rem;
	border: 2px dashed var(--wp--preset--color--gray-300);
	border-radius: 8px;
	background-color: var(--wp--preset--color--gray-50);
	cursor: pointer;
	transition: all 0.2s ease;
}

.wapf-field-input input[type="file"]:hover {
	border-color: var(--wp--preset--color--primary);
	background-color: rgba(9, 69, 200, 0.05);
}

.wapf-field-input input[type="file"]::file-selector-button {
	padding: 0.5rem 1rem;
	margin-right: 1rem;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wapf-field-input input[type="file"]::file-selector-button:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/* ==========================================================================
   Color Picker
   ========================================================================== */

.wapf-field-input input[type="color"] {
	width: 60px;
	height: 40px;
	padding: 2px;
	border: 2px solid var(--wp--preset--color--gray-200);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.wapf-field-input input[type="color"]:hover {
	border-color: var(--wp--preset--color--primary);
}

.wapf-field-input input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}

.wapf-field-input input[type="color"]::-webkit-color-swatch {
	border-radius: 6px;
	border: none;
}

/* ==========================================================================
   Field Descriptions & Help Text
   ========================================================================== */

.wapf-field-description {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--gray-500);
	margin-top: 0.375rem;
	line-height: 1.5;
}

/* ==========================================================================
   File Input & Color Picker Enhancement Displays
   ========================================================================== */

.cirrusly-file-name {
	display: block;
	margin-top: 0.5rem;
	padding: 0.5rem 0.75rem;
	background-color: var(--wp--preset--color--gray-100);
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--gray-600);
}

.cirrusly-color-value {
	display: inline-block;
	margin-left: 0.75rem;
	padding: 0.25rem 0.5rem;
	background-color: var(--wp--preset--color--gray-100);
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--x-small);
	font-family: monospace;
	color: var(--wp--preset--color--gray-600);
	vertical-align: middle;
}

/* Selected state for radio/checkbox labels (JS enhanced) */
.wapf-field-input[data-is-radio] label.is-selected,
.wapf-field-input[data-is-checkbox] label.is-selected {
	border-color: var(--wp--preset--color--primary);
	background-color: rgba(9, 69, 200, 0.1);
}

/* ==========================================================================
   Validation States
   ========================================================================== */

.wapf-field-group.wapf-error input,
.wapf-field-group.wapf-error select,
.wapf-field-group.wapf-error textarea {
	border-color: #e74c3c;
}

.wapf-field-group.wapf-error input:focus,
.wapf-field-group.wapf-error select:focus,
.wapf-field-group.wapf-error textarea:focus {
	box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.wapf-field-group .wapf-error-message {
	color: #e74c3c;
	font-size: var(--wp--preset--font-size--x-small);
	margin-top: 0.375rem;
}

/* ==========================================================================
   Conditional Fields (Show/Hide)
   ========================================================================== */

.wapf-field-group[data-wapf-cloak="yes"] {
	display: none;
}

.wapf-field-group[data-wapf-cloak="no"] {
	animation: wapf-fade-in 0.3s ease;
}

@keyframes wapf-fade-in {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Price Display
   ========================================================================== */

.wapf-field-group .wapf-pricing-hint {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--primary);
	font-weight: 500;
	margin-left: 0.5rem;
}

/* ==========================================================================
   Integration with Theme Purchase Card
   ========================================================================== */

.cirrusly-purchase-card .wapf-wrapper {
	margin: 1rem 0;
	padding: 1rem 0;
	border-top: 1px solid var(--wp--preset--color--gray-200);
	border-bottom: 1px solid var(--wp--preset--color--gray-200);
}

.cirrusly-purchase-card .wapf-field-label {
	font-size: var(--wp--preset--font-size--x-small);
	margin-bottom: 0.5rem;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 600px) {
	.wapf-field-input[data-is-radio],
	.wapf-field-input[data-is-checkbox] {
		flex-direction: column;
		gap: 0.5rem;
	}

	.wapf-field-input[data-is-radio] label,
	.wapf-field-input[data-is-checkbox] label {
		width: 100%;
	}

	.wapf-input-wrap input[type="text"],
	.wapf-input-wrap input[type="email"],
	.wapf-input-wrap input[type="tel"],
	.wapf-input-wrap input[type="password"],
	.wapf-input-wrap input[type="search"],
	.wapf-input-wrap input[type="time"],
	.wapf-input-wrap input[type="week"],
	.wapf-input-wrap input[type="month"],
	.wapf-input-wrap input[type="datetime-local"],
	.wapf-input-wrap select,
	.wapf-input-wrap textarea {
		padding: 0.625rem 0.875rem;
		font-size: 16px; /* Prevents zoom on iOS */
	}
}

/* ==========================================================================
   Dark Mode Support (if theme has dark mode)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	.wapf-field-label {
		color: var(--wp--preset--color--white);
	}

	.wapf-input-wrap input[type="text"],
	.wapf-input-wrap input[type="email"],
	.wapf-input-wrap input[type="tel"],
	.wapf-input-wrap input[type="url"],
	.wapf-input-wrap input[type="number"],
	.wapf-input-wrap input[type="password"],
	.wapf-input-wrap input[type="search"],
	.wapf-input-wrap input[type="time"],
	.wapf-input-wrap input[type="week"],
	.wapf-input-wrap input[type="month"],
	.wapf-input-wrap input[type="datetime-local"],
	.wapf-input-wrap select,
	.wapf-input-wrap textarea {
		background-color: var(--wp--preset--color--gray-800) !important;
		border-color: var(--wp--preset--color--gray-600) !important;
		color: var(--wp--preset--color--white) !important;
	}

	.wapf-input-wrap select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	}

	.wapf-field-input[data-is-radio] label,
	.wapf-field-input[data-is-checkbox] label {
		background-color: var(--wp--preset--color--gray-800) !important;
		border-color: var(--wp--preset--color--gray-600) !important;
		color: var(--wp--preset--color--white) !important;
	}

	.wapf-field-input[data-is-radio] input[type="radio"],
	.wapf-field-input[data-is-checkbox] input[type="checkbox"] {
		background-color: var(--wp--preset--color--gray-700) !important;
		border-color: var(--wp--preset--color--gray-500) !important;
	}

	.wapf-field-description {
		color: var(--wp--preset--color--gray-400) !important;
	}
}