/* Zicplug Frontend Styles */

.zicplug-form-wrapper {
	box-sizing: border-box;
	position: relative;
}

.zicplug-form-wrapper *,
.zicplug-form-wrapper *::before,
.zicplug-form-wrapper *::after {
	box-sizing: inherit;
}

.zicplug-form {
	width: 100%;
}

/* Fields Grid */
.zicplug-fields-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.zicplug-field-wrap {
	width: 100%;
	margin-bottom: 16px;
}

.zicplug-width-full  { width: 100%; }
.zicplug-width-half  { width: calc(50% - 8px); }
.zicplug-width-third { width: calc(33.333% - 11px); }

@media (max-width: 640px) {
	.zicplug-width-half,
	.zicplug-width-third {
		width: 100%;
	}
}

/* Labels */
.zicplug-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 0.9em;
}

.zicplug-group-label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	font-size: 0.9em;
}

.zicplug-required {
	color: #e53e3e;
	margin-left: 3px;
}

/* Inputs */
.zicplug-input,
.zicplug-textarea,
.zicplug-select {
	display: block;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #dee2e6;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.5;
	color: #495057;
	background-color: #f8f9fa;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.zicplug-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.zicplug-textarea {
	resize: vertical;
	min-height: 100px;
}

.zicplug-input:focus,
.zicplug-textarea:focus,
.zicplug-select:focus {
	outline: none;
	border-color: #4f46e5;
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

/* Field validation states */
.zicplug-input.zicplug-invalid,
.zicplug-textarea.zicplug-invalid,
.zicplug-select.zicplug-invalid {
	border-color: #e53e3e;
	box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15);
}

.zicplug-field-error {
	display: none;
	color: #e53e3e;
	font-size: 0.82em;
	margin-top: 4px;
}

.zicplug-field-error.visible {
	display: block;
}

.zicplug-field-hint {
	display: block;
	color: #6b7280;
	font-size: 0.8em;
	margin-top: 4px;
}

/* File upload */
.zicplug-file {
	display: block;
	width: 100%;
	padding: 8px;
	border: 2px dashed #dee2e6;
	border-radius: 6px;
	font-size: 14px;
	cursor: pointer;
	background: #f8f9fa;
}

.zicplug-file:focus {
	outline: none;
	border-color: #4f46e5;
}

/* Radio & Checkbox */
.zicplug-radio-group,
.zicplug-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.zicplug-radio-label,
.zicplug-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-weight: 400;
	font-size: 0.95em;
}

.zicplug-radio,
.zicplug-checkbox {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	accent-color: #4f46e5;
	cursor: pointer;
}

/* Honeypot */
.zicplug-hp-wrap {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Submit button */
.zicplug-submit-wrap {
	margin-top: 8px;
}

.zicplug-submit-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	background-color: #4f46e5;
	color: #ffffff;
	border: none;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.1s ease;
	text-decoration: none;
}

.zicplug-submit-btn:hover {
	filter: brightness(90%);
}

.zicplug-submit-btn:active {
	transform: translateY(1px);
}

.zicplug-submit-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* Spinner */
.zicplug-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: zicplug-spin 0.7s linear infinite;
	flex-shrink: 0;
}

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

/* Messages */
.zicplug-messages {
	margin-top: 16px;
}

.zicplug-success-message {
	padding: 14px 18px;
	background-color: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-left: 4px solid #22c55e;
	border-radius: 6px;
	color: #166534;
	font-size: 0.95em;
	line-height: 1.5;
}

.zicplug-error-message {
	padding: 14px 18px;
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	border-left: 4px solid #e53e3e;
	border-radius: 6px;
	color: #991b1b;
	font-size: 0.95em;
	line-height: 1.5;
}

/* Shortcode preview error (admin only) */
.zicplug-shortcode-error {
	color: #e53e3e !important;
	font-style: italic;
}

/* ===== Name Fields ===== */
.zicplug-name-group { display: flex; flex-wrap: wrap; gap: 10px; }
.zicplug-name-part { flex: 1 1 120px; display: flex; flex-direction: column; gap: 4px; }
.zicplug-name-part label { font-size: 11px; color: #6b7280; font-weight: 600; }

/* ===== Address Fields ===== */
.zicplug-address-group { display: flex; flex-direction: column; gap: 10px; }
.zicplug-address-row { display: flex; flex-direction: column; gap: 4px; }
.zicplug-address-row label { font-size: 11px; color: #6b7280; font-weight: 600; }
.zicplug-address-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .zicplug-address-cols { grid-template-columns: 1fr; } }

/* ===== Section Break ===== */
.zicplug-section-break { padding: 8px 0 !important; }
.zicplug-section-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: inherit; }
.zicplug-section-content { font-size: 14px; color: #6b7280; margin-bottom: 10px; }
.zicplug-section-rule { border: none; border-top: 2px solid #e5e7eb; margin: 0; }

/* ===== Multiple Choice ===== */
.zicplug-multiple-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.zicplug-mc-option { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 2px solid #e5e7eb; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.15s; }
.zicplug-mc-option:hover { border-color: #a5b4fc; background: #f0f4ff; }
.zicplug-mc-option input[type=checkbox] { display: none; }
.zicplug-mc-option:has(input:checked) { border-color: #4f46e5; background: #eef2ff; color: #4f46e5; font-weight: 600; }

/* ===== Checkable Grid ===== */
.zicplug-checkable-grid { overflow-x: auto; }
.zicplug-checkable-grid table { width: 100%; border-collapse: collapse; font-size: 13px; }
.zicplug-checkable-grid th, .zicplug-checkable-grid td { padding: 8px 12px; border: 1px solid #e5e7eb; text-align: center; }
.zicplug-checkable-grid th { background: #f9fafb; font-weight: 600; }
.zicplug-checkable-grid td:first-child { text-align: left; font-weight: 500; }

/* ===== Ratings ===== */
.zicplug-ratings { display: flex; gap: 4px; flex-direction: row-reverse; justify-content: flex-end; }
.zicplug-rating-star { cursor: pointer; font-size: 28px; color: #d1d5db; transition: color 0.1s; }
.zicplug-rating-star input { display: none; }
.zicplug-ratings .zicplug-rating-star:hover,
.zicplug-ratings .zicplug-rating-star:hover ~ .zicplug-rating-star,
.zicplug-ratings .zicplug-rating-star:has(input:checked),
.zicplug-ratings .zicplug-rating-star:has(input:checked) ~ .zicplug-rating-star { color: #f59e0b; }

/* ===== Net Promoter Score ===== */
.zicplug-nps-scale { display: flex; gap: 4px; flex-wrap: wrap; }
.zicplug-nps-option { cursor: pointer; }
.zicplug-nps-option input { display: none; }
.zicplug-nps-option span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid #e5e7eb; border-radius: 6px; font-weight: 700; font-size: 14px; transition: all 0.15s; }
.zicplug-nps-option:hover span { border-color: #4f46e5; background: #eef2ff; }
.zicplug-nps-option:has(input:checked) span { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.zicplug-nps-labels { display: flex; justify-content: space-between; font-size: 11px; color: #9ca3af; margin-top: 6px; }

/* ===== Range Slider ===== */
.zicplug-range-wrap { display: flex; align-items: center; gap: 12px; }
.zicplug-range { flex: 1; cursor: pointer; accent-color: #4f46e5; }
.zicplug-range-wrap o { font-weight: 700; color: #4f46e5; min-width: 36px; text-align: right; font-style: normal; }

/* ===== Color Picker ===== */
.zicplug-color-field { width: 60px; height: 40px; padding: 2px; border-radius: 6px; cursor: pointer; }

/* ===== Date/Time ===== */
.zicplug-datetime-group { display: flex; gap: 10px; flex-wrap: wrap; }
.zicplug-datetime-group input { flex: 1 1 140px; }

/* ===== Terms / GDPR ===== */
.zicplug-terms-text, .zicplug-gdpr-text { max-height: 120px; overflow-y: auto; padding: 10px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 12px; color: #6b7280; margin-bottom: 10px; }

/* ===== Container layouts ===== */
.zicplug-container { border: 2px dashed #c7d2fe; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.zicplug-container-label { font-size: 11px; font-weight: 700; color: #4f46e5; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.zicplug-container-inner { display: grid; grid-template-columns: repeat(var(--cols, 1), 1fr); gap: 12px; }

/* ===== Form Step ===== */
.zicplug-form-step { margin: 20px 0 10px !important; }
.zicplug-step-marker { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: #4f46e5; }
.zicplug-step-marker::before { content: ''; flex: 1; height: 2px; background: #e0e7ff; }
.zicplug-step-marker::after { content: ''; flex: 1; height: 2px; background: #e0e7ff; }

/* ===== Save Resume Button ===== */
.zicplug-save-resume-btn { background: transparent; border: 2px solid #4f46e5; color: #4f46e5; padding: 8px 20px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.zicplug-save-resume-btn:hover { background: #4f46e5; color: #fff; }