/**
 * IC RMP GF Integration - Form Prepopulation Styles
 *
 * Provides visual feedback for loading states and prepopulated fields.
 *
 * @package IC_RMP_GF_Integration
 * @since 0.6.0
 */

/* ==========================================================================
   Loading States
   ========================================================================== */

/**
 * Loading indicator for fields
 */
.gfield.ic-rmp-loading {
	position: relative;
	opacity: 0.6;
	pointer-events: none;
}

.gfield.ic-rmp-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 15px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid #ccc;
	border-top-color: #0073aa;
	border-radius: 50%;
	animation: ic-rmp-spin 0.6s linear infinite;
}

@keyframes ic-rmp-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Dropdown States (Enabled/Disabled)
   ========================================================================== */

/**
 * Disabled store dropdown (until center is selected)
 * Enhanced visual differentiation for better UX
 */
.ic-rmp-store-dropdown select:disabled,
.store-name select:disabled {
	background-color: #f5f5f5;
	background-image: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 10px,
		rgba(0, 0, 0, 0.03) 10px,
		rgba(0, 0, 0, 0.03) 20px
	);
	color: #999;
	cursor: not-allowed;
	opacity: 0.8;
	border: 1px solid #ddd;
	box-shadow: none;
}

.ic-rmp-store-dropdown select:disabled:hover,
.store-name select:disabled:hover {
	border-color: #ddd;
	box-shadow: none;
}

/**
 * Visual hint for dependency
 */
.ic-rmp-store-dropdown.gfield:has(select:disabled) .gfield_label::after,
.store-name.gfield:has(select:disabled) .gfield_label::after {
	content: ' (select a center first)';
	font-size: 12px;
	font-weight: normal;
	color: #999;
	font-style: italic;
}

/**
 * Disabled field container styling
 */
.ic-rmp-store-dropdown.gfield:has(select:disabled),
.store-name.gfield:has(select:disabled) {
	position: relative;
}

.ic-rmp-store-dropdown.gfield:has(select:disabled)::before,
.store-name.gfield:has(select:disabled)::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: #ddd;
	opacity: 0.5;
}

/* ==========================================================================
   Prepopulated Fields
   ========================================================================== */

/**
 * Visual indicator for prepopulated fields
 */
.ic-rmp-prepopulated {
	position: relative;
}

.ic-rmp-prepopulated::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: #46b450;
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

.ic-rmp-prepopulated:hover::before {
	opacity: 1;
}

/**
 * Prepopulated field input styling
 */
.ic-rmp-prepopulated input,
.ic-rmp-prepopulated textarea {
	background-color: #f8fff8;
	border-left-color: #46b450;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.ic-rmp-prepopulated input:focus,
.ic-rmp-prepopulated textarea:focus {
	background-color: #fff;
}

/* ==========================================================================
   Readonly vs Editable Field Differentiation
   ========================================================================== */

/**
 * Readonly fields (displaying Algolia data)
 * Uses Gravity Forms' gf_readonly class
 */
.gform_wrapper .gf_readonly input,
.gform_wrapper .gf_readonly textarea,
.gform_wrapper .gfield.gf_readonly input,
.gform_wrapper .gfield.gf_readonly textarea {
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	color: #555;
	cursor: not-allowed;
}

.gform_wrapper .gf_readonly input:focus,
.gform_wrapper .gf_readonly textarea:focus {
	outline: 2px solid #999;
	outline-offset: 0;
}

/**
 * Visual indicator for readonly fields from Algolia
 */
.gfield.gf_readonly.ic-rmp-prepopulated::before {
	background: #46b450;
}

.gfield.gf_readonly .gfield_label::after {
	content: ' — Synced from Algolia';
	font-size: 12px;
	font-weight: normal;
	color: #46b450;
	font-style: italic;
}

/**
 * "No data found" helper text styling
 * Displayed below the field when Algolia data is empty
 */
.ic-rmp-empty-data-notice {
	display: block;
	margin-top: 8px;
	padding: 8px 12px;
	background-color: #fff8e5;
	border-left: 4px solid #f0ad4e;
	color: #856404;
	font-size: 13px;
	font-style: italic;
	border-radius: 2px;
}

.ic-rmp-empty-data-notice::before {
	content: '\26A0\FE0F';
	margin-right: 6px;
}

/**
 * Visual indicator for fields with empty Algolia data
 */
.gform_wrapper .gfield.ic-rmp-empty-algolia-data {
	position: relative;
}
.gform_wrapper .gfield.ic-rmp-empty-algolia-data .ginput_container { position: relative ;}
.gform_wrapper .gfield.ic-rmp-empty-algolia-data .ginput_container::before { content: '';
	position: absolute; z-index: 1;
	top: 0; left: 0; bottom: 0;
	width: 4px;
	background: #f0ad4e;
	opacity: 0.7;
	
}

.gform_wrapper .gfield.ic-rmp-empty-algolia-data input,
.gform_wrapper .gfield.ic-rmp-empty-algolia-data textarea,
.gform_wrapper .gfield.ic-rmp-empty-algolia-data .ginput_container input,
.gform_wrapper .gfield.ic-rmp-empty-algolia-data .ginput_container textarea {
	border-left: 3px solid #f0ad4e !important;
}

/**
 * Empty field styling (when "No data found" applies)
 * Value is cleared, placeholder shown in field
 * Applied via ic-rmp-no-data-input class added by JavaScript
 */
.gform_wrapper input.ic-rmp-no-data-input,
.gform_wrapper textarea.ic-rmp-no-data-input {
	background-color: #fffbf0;
	border-left: 3px solid #f0ad4e !important;
}

/**
 * Placeholder text styling for empty fields
 * Provides visual cue that data is missing from Algolia
 */
.gform_wrapper input.ic-rmp-no-data-input::placeholder,
.gform_wrapper textarea.ic-rmp-no-data-input::placeholder {
	color: #856404;
	font-style: italic;
	opacity: 0.85;
}

.gform_wrapper input.ic-rmp-no-data-input::-webkit-input-placeholder,
.gform_wrapper textarea.ic-rmp-no-data-input::-webkit-input-placeholder {
	color: #856404;
	font-style: italic;
	opacity: 0.85;
}

.gform_wrapper input.ic-rmp-no-data-input::-moz-placeholder,
.gform_wrapper textarea.ic-rmp-no-data-input::-moz-placeholder {
	color: #856404;
	font-style: italic;
	opacity: 0.85;
}

.gform_wrapper input.ic-rmp-no-data-input:-ms-input-placeholder,
.gform_wrapper textarea.ic-rmp-no-data-input:-ms-input-placeholder {
	color: #856404;
	font-style: italic;
	opacity: 0.85;
}

/* ==========================================================================
   Loading State for Dining Fields
   ========================================================================== */

/**
 * Loading state for dining field containers
 * Supports both legacy (.dining-*) and plugin-specific (.ic-rmp-*) classes
 */
.dining-description.ic-rmp-loading,
.dining-cuisines.ic-rmp-loading,
.dining-meals-served.ic-rmp-loading,
.dining-bar-service.ic-rmp-loading,
.dining-features.ic-rmp-loading,
.ic-rmp-description.ic-rmp-loading,
.ic-rmp-cuisines.ic-rmp-loading,
.ic-rmp-meals-served.ic-rmp-loading,
.ic-rmp-bar-service.ic-rmp-loading,
.ic-rmp-features.ic-rmp-loading {
	position: relative;
	opacity: 0.6;
}

.dining-description.ic-rmp-loading::after,
.dining-cuisines.ic-rmp-loading::after,
.dining-meals-served.ic-rmp-loading::after,
.dining-bar-service.ic-rmp-loading::after,
.dining-features.ic-rmp-loading::after,
.ic-rmp-description.ic-rmp-loading::after,
.ic-rmp-cuisines.ic-rmp-loading::after,
.ic-rmp-meals-served.ic-rmp-loading::after,
.ic-rmp-bar-service.ic-rmp-loading::after,
.ic-rmp-features.ic-rmp-loading::after {
	content: 'Loading...';
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 12px;
	color: #666;
	font-style: italic;
}

/* ==========================================================================
   Helper Text
   ========================================================================== */

/**
 * Helper text for prepopulated fields
 */
.ic-rmp-helper-text {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: #666;
	font-style: italic;
}

.ic-rmp-helper-text .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	margin-right: 4px;
}

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

@media screen and (max-width: 768px) {
	.gfield.ic-rmp-loading::after {
		right: 10px;
		width: 14px;
		height: 14px;
		margin-top: -7px;
	}

	.dining-description.ic-rmp-loading::after,
	.dining-cuisines.ic-rmp-loading::after,
	.dining-meals-served.ic-rmp-loading::after,
	.dining-bar-service.ic-rmp-loading::after,
	.dining-features.ic-rmp-loading::after,
	.ic-rmp-description.ic-rmp-loading::after,
	.ic-rmp-cuisines.ic-rmp-loading::after,
	.ic-rmp-meals-served.ic-rmp-loading::after,
	.ic-rmp-bar-service.ic-rmp-loading::after,
	.ic-rmp-features.ic-rmp-loading::after {
		font-size: 11px;
		top: 8px;
		right: 8px;
	}
}

/* ==========================================================================
   Gravity Forms Specific Overrides
   ========================================================================== */

/**
 * Ensure loading states work with Gravity Forms field structure
 */
.gform_wrapper .gfield.ic-rmp-loading .ginput_container {
	position: relative;
}

.gform_wrapper .ic-rmp-prepopulated .ginput_container input,
.gform_wrapper .ic-rmp-prepopulated .ginput_container textarea {
	background-color: #f8fff8;
	border-left: 3px solid #46b450;
}

.gform_wrapper .ic-rmp-prepopulated .ginput_container input:focus,
.gform_wrapper .ic-rmp-prepopulated .ginput_container textarea:focus {
	background-color: #fff;
	border-left-color: #46b450;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/**
 * Screen reader only text for accessibility
 */
.ic-rmp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/**
 * Focus states for keyboard navigation
 */
.ic-rmp-prepopulated input:focus,
.ic-rmp-prepopulated textarea:focus {
	outline: 2px solid #46b450;
	outline-offset: 2px;
}