/**
 * This file is part of CF7GR.
 *
 * @package CF7GR
 * @since   025.10.30.01
 * @version 025.11.01.03
 * @author  Renzo Johnson <https://renzo.io>
 * @created 2024-09-24
 * @updated 2025-11-01
 * @location Orlando, FL
 */

/**
 * This file is part of CF7GR.
 *
 * Copyright (C) 2010-2025,  Renzo Johnson (email: renzo.johnson at gmail.com)
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code, or visit:
 * https://www.gnu.org/licenses/gpl-2.0.html
 */

/* Change CF7 shortcode background when CF7GR tab is active */
span.shortcode.wp-ui-highlight.clickcf7gr-active {
	background-color: #555 !important;
}

#contact-form-editor #cf7gr.contact-form-editor-panel {
	background-color: #f7f7f7;
	/* border-top: 1px solid red; */
}

#cf7gr_panel.contact-form-editor-panel .form-table th {
	width: 200px;
}


#cf7gr_api_key {
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
	/* letter-spacing: 0.5px; */
}

.cf7gr-ver {
	font-size: 0.75em;
	padding-left: 1em;
	opacity: 0.5;
	margin-right: 15px;
}

/* Universal template fade messages */
.cf7gr-message-container {
	margin: 1rem 0;
}

.cf7gr-fade-message {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	margin: 0.5rem 0;
}

.cf7gr-fade-message.show {
	opacity: 1;
}

/* Connection button states */
.cf7gr-btn-connecting {
	opacity: 0.6;
	cursor: not-allowed;
}

.cf7gr-btn-connected {
	background: #00a32a !important;
	border-color: #00a32a !important;
	color: #fff !important;
}

.cf7gr-btn-error {
	background: #d63638 !important;
	border-color: #d63638 !important;
	color: #fff !important;
}

/* Field mapping indentation - child rows under Section 4 */
.mapping-field-row th {
	padding-left: 30px;
}

/* Two-column grid layout for field mappings */
.fields-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	width: 100%;
}

.field-wrapper {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* Field label styling */
.field-label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
}

.field-required {
	font-weight: 600;
	color: #d63638;
}

.field-id {
	color: #999;
	font-size: 11px;
	padding: 0;
	background-color: transparent;
}

.field-type {
	color: #999;
	font-size: 11px;
}

.field-wrapper select {
	width: 100%;
}

/* Responsive: Stack fields on mobile/tablet */
@media (max-width: 782px) {
	.fields-grid {
	grid-template-columns: 1fr;
	}
}

/* Progressive Disclosure - Hidden by default, shown by JS */
#cf7gr_data {
	display: none;
}

/* Universal visibility toggle - JavaScript adds/removes this class */
.cf7gr-hidden {
	display: none !important;
}

/* Initially hidden elements - used instead of inline style="display:none;" for WordPress.org compliance */
.cf7gr-initially-hidden {
	display: none;
}

/* Header and provider on same line */
.cf7gr-header-row {
	padding-top: 0 !important;
}

#cf7gr_mapping_table h2 {
	display: inline-block;
	margin: 0 20px 0 0;
	vertical-align: middle;
}

#cf7gr_provider {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	background: transparent;
	border: 1px solid #dcdcde;
}

#cf7gr_provider:focus {
	outline: none;
	box-shadow: none;
	border-color: #8c8f94;
}

/* Form element alignment */
#cf7gr_list_id {
	vertical-align: middle;
}

#cf7gr_connect_btn,
#cf7gr_refresh_lists {
	vertical-align: middle;
	margin-left: 5px;
	min-width: 110px;
}

/* ============================================
	API KEY INPUT - OPTION 1: CLEAN MINIMAL
	Modern 2025 design with icon inside input
	============================================ */

/* Wrapper for positioning */
.cf7gr-api-key-wrapper {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 25em; /* Match WordPress .regular-text default width */
}

/* Input field with padding-right for icon */
.cf7gr-api-key-wrapper .cf7gr-api-key-input {
	width: 100%;
	padding-right: 45px;
	vertical-align: middle;
}

/* Toggle button - transparent, positioned inside input */
.cf7gr-toggle-key-visibility {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 4px 8px;
	color: #646970; /* WordPress default grey */
	transition: color 0.2s ease;
	line-height: 1;
}

/* Remove default button outline */
.cf7gr-toggle-key-visibility:focus {
	outline: none;
	box-shadow: none;
}

/* Eye icon - use Dashicons default size */
.cf7gr-eye-icon {
	width: 20px;
	height: 20px;
	font-size: 20px;
}

/* Hover state - WordPress blue (when NOT connected) */
.cf7gr-toggle-key-visibility:hover {
	color: #2271b1; /* WordPress blue */
}

/* Connected state - CF7GR green (when .cf7gr-btn-connected exists) */
.cf7gr-btn-connected ~ .cf7gr-api-key-wrapper .cf7gr-toggle-key-visibility,
.cf7gr-connected .cf7gr-toggle-key-visibility {
	color: #00a32a; /* CF7GR green */
}

/* Connected hover - 5% darker green */
.cf7gr-btn-connected ~ .cf7gr-api-key-wrapper .cf7gr-toggle-key-visibility:hover,
.cf7gr-connected .cf7gr-toggle-key-visibility:hover {
	color: #008a24; /* 5% darker green */
}

/* Required field indicator */
.cf7gr-required-asterisk {
	color: #d63638;
}

/* Field mapping header description */
#cf7gr-field-mapping-header .description {
	margin: 0;
}

/* ============================================
	SKELETON-HYDRATION SYSTEM
	Based on ChimpMatic institutional standards
	============================================ */

/* CSS Custom Properties (Design Tokens) */
:root {
	/* Animation Durations (Material Design + Shopify Polaris standards) */
	--cf7gr-duration-fast: 100ms;
	--cf7gr-duration-base: 250ms;
	--cf7gr-duration-slow: 300ms;

	/* Easing Curves (Material Design standard) */
	--cf7gr-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--cf7gr-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

	/* Colors */
	--cf7gr-color-success: #00a32a;
	--cf7gr-color-error: #d63638;
}

/* Section Visibility Control */
.cf7gr-section[data-has-data="false"] {
	display: none !important;
}

.cf7gr-section[data-has-data="true"] {
	display: table-row;
}

/* Skeleton State (Initial - Hidden/Collapsed) */
.cf7gr-skeleton {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	transition:
	max-height var(--cf7gr-duration-base) var(--cf7gr-ease-standard),
	opacity var(--cf7gr-duration-base) var(--cf7gr-ease-standard);
}

.cf7gr-skeleton select,
.cf7gr-skeleton button,
.cf7gr-skeleton input {
	cursor: not-allowed;
	opacity: 0.5;
}

/* Hydrated State (Expanded & Visible) */
.cf7gr-hydrated {
	max-height: 2000px; /* Large enough for field mappings */
	opacity: 1;
	pointer-events: auto;
	transition:
	max-height var(--cf7gr-duration-base) var(--cf7gr-ease-standard),
	opacity var(--cf7gr-duration-base) var(--cf7gr-ease-standard);
}

.cf7gr-hydrated select,
.cf7gr-hydrated button,
.cf7gr-hydrated input {
	cursor: pointer;
	opacity: 1;
}

/* Expanding Animation (Active transition state) */
.cf7gr-expanding {
	animation: cf7gr-expand-bounce var(--cf7gr-duration-slow) var(--cf7gr-ease-standard);
}

@keyframes cf7gr-expand-bounce {
	0% {
	transform: scaleY(0.98);
	opacity: 0;
	}
	50% {
	transform: scaleY(1.01);
	}
	100% {
	transform: scaleY(1);
	opacity: 1;
	}
}

/* Field Wrapper Animation (Staggered reveal) */
.field-wrapper {
	opacity: 1;
	transform: translateY(0);
	transition:
	opacity var(--cf7gr-duration-base) var(--cf7gr-ease-standard),
	transform var(--cf7gr-duration-base) var(--cf7gr-ease-standard);
}

.cf7gr-skeleton .field-wrapper {
	opacity: 0;
	transform: translateY(-5px);
}

.cf7gr-hydrated .field-wrapper {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger delays for field wrappers (50ms increments - Shopify standard) */
.field-wrapper:nth-child(1) { transition-delay: 0ms; }
.field-wrapper:nth-child(2) { transition-delay: 50ms; }
.field-wrapper:nth-child(3) { transition-delay: 100ms; }
.field-wrapper:nth-child(4) { transition-delay: 150ms; }
.field-wrapper:nth-child(5) { transition-delay: 200ms; }
.field-wrapper:nth-child(6) { transition-delay: 250ms; }
.field-wrapper:nth-child(7) { transition-delay: 300ms; }
.field-wrapper:nth-child(8) { transition-delay: 350ms; }
.field-wrapper:nth-child(9) { transition-delay: 400ms; }

/* Loading Spinner (WordPress native spinner enhanced) */
.cf7gr-loading-spinner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	background: #f7f7f7;
	border-radius: 4px;
	margin-bottom: 12px;
}

.cf7gr-loading-spinner .spinner {
	float: none;
	margin: 0;
}

/* Accessibility: Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	.cf7gr-skeleton,
	.cf7gr-hydrated,
	.cf7gr-expanding,
	.field-wrapper {
	transition: none !important;
	animation: none !important;
	}
}

/* Performance: GPU Acceleration */
.mapping-field-row,
.field-wrapper {
	will-change: transform, opacity;
	transform: translateZ(0); /* Force GPU acceleration */
}

/* ========================================
	Review Sidebar Styling
	Added: 2025-11-22
	Purpose: Style the lateral review box
	======================================== */

/* Hidden State - Initially hidden, JavaScript makes visible */
.cf7gr-review-hidden {
	display: none;
}

/* Heart Color - Red for visual appeal */
.cf7gr-heart-red {
	color: #ee3455;
}

/* Review Box Container - Dark theme matching WordPress admin */
#cf7gr_review_box .inside {
	background-color: #1a212b;
	color: #fff;
	margin: 0;
	padding: 20px 15px;
}

/* Review Box Heading - Centered, bold */
#cf7gr_review_box .inside h2 {
	color: #fff;
	text-align: center;
	font-size: 22px;
	font-weight: 900;
	margin-top: 0;
	margin-bottom: 15px;
}

/* Review Box Paragraph - Centered, readable */
#cf7gr_review_box .inside p {
	color: #fff;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 15px;
}

/* Review Button - Full width, WordPress primary styling */
#cf7gr_review_box .inside .button-primary {
	width: 100%;
	text-align: center;
	padding: 8px 12px;
	font-size: 14px;
}

/* ========================================
	WPForms Integration Styles
	Added: 2025-11-24
	Purpose: WPForms-specific panel styling
	Source: Moved from templates/wpforms-provider-settings.php (inline styles removed for WordPress.org compliance)
	======================================== */

/* Hide sections until provider is selected */
.cf7gr-hidden-section {
	display: none;
}

/* Panel header styling */
.cf7gr-panel h2 {
	margin: 0 0 20px 0;
	font-size: 18px;
}

/* Version badge styling */
.cf7gr-ver {
	font-size: 12px;
	color: #666;
	font-weight: normal;
}

/* Message container spacing */
.cf7gr-message-container {
	margin: 10px 0;
}

/* Button field spacing */
.wpforms-panel-field-button {
	margin: 15px 0;
}

/* Button with icon layout */
.wpforms-panel-field-button .button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* Status indicator styling */
.cf7gr-status-indicator {
	margin-left: 10px;
	font-weight: 600;
}

/* Connection status message - positioned next to button */
.cf7gr-status-message {
	margin-left: 10px;
}

/* Mapping container heading */
#cf7gr_mapping_container h3 {
	font-size: 16px;
	margin: 20px 0 10px 0;
}