/*
 * filepath: wp-content/plugins/rca-api/assets/css/rca-validation.css
 * What: jQuery Validation plugin visual feedback styles (error states, labels, borders)
 * Why: Separates validation UI from theme layout, enabling plugin-managed validation appearance
 * Related: rca-api.php (enqueue), new-style.css (theme layout), docs/RCA-FORM-VALIDATION-MASTER-GUIDE.md
 */

/**
 * RCA Form Validation Styles
 * Extracted from theme to plugin as part of Phase 2: CSS Extraction
 *
 * This file contains all jQuery Validation visual feedback:
 * - Error labels (label.error)
 * - ARIA invalid states (aria-invalid="true/false")
 * - Error containers and positioning
 * - Validation-specific error messages
 *
 * @since 1.1.1
 * @package RCA_API
 */

/* ============================================
   1. SELECT VALIDATION STATES
   ============================================ */

.rca-form select[aria-invalid="false"] {
	color: #000 !important;
}

/* ============================================
   2. ERROR LABELS (jQuery Validation)
   ============================================ */

.rca-form .append-error label.error {
	color: red;
	font-size: 16px;
	margin-top: 5px;
	grid-column: 1 / span 2;
}

.append-error {
	position: relative;
}

.rca-form #tip_persoana-error {
	margin-top: 10px;
}

/* ============================================
   3. CHECKBOX VALIDATION (Terms & Conditions)
   ============================================ */

.accept-terms__wrapper input[aria-invalid="true"] {
	border: 2px solid red !important;
}

#accept_terms-error {
	display: block;
	margin-top: 4px;
}

/* ============================================
   4. GENERIC ERROR MESSAGES
   ============================================ */

.add-review-message.error {
	color: red;
}

.error-message {
	display: flex;
	justify-content: space-between;
}

.modal__response.errors span {
	color: #FF0721;
	font-weight: 600;
}

.client-rates__terms-error {
	color: red;
	margin-top: 12px;
	display: block;
}

/* ============================================
   5. AUTOCOMPLETE MODAL ERROR STATE
   ============================================ */

.autocomplete-modal.error .autocomplete-buttons {
	display: grid;
	grid-template-columns: 1fr;
}

.autocomplete-modal.error .autocomplete-modal__col p {
	margin-bottom: 0 !important;
}

.autocomplete-modal.error .autocomplete-buttons .btn {
	max-width: 100%;
}

/* ============================================
   6. CONTACT FORM 7 VALIDATION (if applicable)
   ============================================ */

.wpcf7-form .wpcf7-not-valid-tip {
	font-size: 14px;
	margin-top: 3px;
	margin-left: 8px;
}

.wpcf7-form.invalid .wpcf7-response-output {
	color: #dc3232;
}

/* ============================================
   7. RESPONSIVE: TABLET (768px - 1023px)
   ============================================ */

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.rca-form__body .mobile-error__left label.error {
		margin-left: 175px;
		display: block;
	}

	.rca-form__body .mobile-error__left.mobile-mt-15 label.error {
		transform: translateY(-20px);
	}
}

/* ============================================
   8. RESPONSIVE: DESKTOP SMALL (1024px - 1199px)
   ============================================ */

@media only screen and (min-width: 1024px) and (max-width: 1199px) {
	.grid-container__small_row.desktop-breakpoint label#data_expirare_itp-error {
		margin-left: calc(50% - -20px);
	}
}

/* ============================================
   9. RESPONSIVE: DESKTOP MEDIUM (1200px - 1299px)
   ============================================ */

@media screen and (min-width: 1200px) and (max-width: 1300px) {
	.grid-container__small_row.desktop-breakpoint label#data_expirare_itp-error {
		margin-left: 230px;
	}
}

/* ============================================
   10. RESPONSIVE: DESKTOP LARGE (1300px - 1365px)
   ============================================ */

@media only screen and (min-width: 1300px) and (max-width: 1365px) {
	.rca-form__body.top .append-error img.small {
		right: 38px;
		width: 22px;
		height: 22px;
	}

	.grid-container__small_row.desktop-breakpoint label#data_expirare_itp-error {
		margin-left: 180px;
	}
}

/* ============================================
   11. RESPONSIVE: MOBILE (max 767px)
   ============================================ */

@media only screen and (max-width: 767px) {
	.rca-form__body .mobile-error__left label.error {
		margin-left: 0;
		text-align: left;
		display: grid;
		grid-template-columns: 1fr 1fr;
		direction: rtl;
	}

	.rca-form__body .fix-label__error label.error {
		margin-top: 5px;
		margin-left: calc(0% - 140px);
		margin-bottom: 0;
	}

	#cod_postal-error {
		margin-top: 3px;
	}
}

/* ============================================
   12. RESPONSIVE: MOBILE SMALL (max 600px)
   ============================================ */

@media only screen and (max-width: 600px) {
	.rca-form__body .mobile-error__left label.error {
		grid-template-columns: 1fr;
		direction: ltr;
		text-align: left;
	}

	.grid-container__small_row.desktop-breakpoint label#data_expirare_itp-error {
		margin-left: 0;
	}

	.grid-container__small_row.desktop-breakpoint .element__wrap.append-error {
		display: flex;
		align-items: unset;
		flex-direction: column;
	}
}

/* ============================================
   END OF VALIDATION STYLES
   ============================================ */