/**
 * RBM Consumer Care
 * Plugin stylesheet — merged from Phase 1 + validation styles
 */

/* =========================================
   CONTAINER
   ========================================= */

.rbm-consumer-care {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	box-sizing: border-box;
}


/* =========================================
   HEADER
   ========================================= */

.rbm-consumer-care__header {
	margin-bottom: 32px;
}

.rbm-consumer-care__header h2 {
	margin: 0 0 10px;
	color: #1A3E4A;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
}

.rbm-consumer-care__header p {
	margin: 0;
	max-width: 680px;
	color: #5f6b70;
	font-size: 16px;
	line-height: 1.7;
}


/* =========================================
   FORM GRID
   ========================================= */

.rbm-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 20px;
}


/* =========================================
   FORM FIELD
   ========================================= */

.rbm-form-field {
	min-width: 0;
}

.rbm-form-field--full {
	grid-column: 1 / -1;
}

.rbm-form-field label {
	display: block;
	margin-bottom: 8px;
	color: #1A3E4A;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
}

.rbm-form-field label span {
	color: #F2572B;
}


/* =========================================
   INPUT & TEXTAREA
   ========================================= */

.rbm-form-field input,
.rbm-form-field textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;

	margin: 0;
	padding: 13px 15px;

	border: 1px solid #d5dadd;
	border-radius: 4px;

	background: #ffffff;
	color: #1A3E4A;

	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;

	outline: none;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.rbm-form-field input {
	height: 48px;
}

.rbm-form-field textarea {
	min-height: 78px;
	resize: none;
	overflow: hidden;
}

.rbm-form-field input::placeholder,
.rbm-form-field textarea::placeholder {
	color: #9aa3a7;
	opacity: 1;
}


/* =========================================
   FOCUS
   ========================================= */

.rbm-form-field input:focus,
.rbm-form-field textarea:focus {
	border-color: #1A3E4A;
	box-shadow: 0 0 0 2px rgba(26, 62, 74, 0.08);
}


/* =========================================
   VALIDATION
   ========================================= */

.rbm-form-error {
	margin-top: 6px;
	color: #d94720;
	font-size: 13px;
	line-height: 1.4;
}

.rbm-form-field input.rbm-field-error,
.rbm-form-field textarea.rbm-field-error {
	border-color: #d94720;
}


/* =========================================
   BUTTON
   ========================================= */

.rbm-form-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 28px;
}

.rbm-consumer-care__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 48px;
	padding: 12px 28px;

	border: 0;
	border-radius: 4px;

	background: #F2572B;
	color: #ffffff;

	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.rbm-consumer-care__submit:hover {
	background: #d94720;
}

.rbm-consumer-care__submit:active {
	transform: translateY(1px);
}

.rbm-consumer-care__submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

	.rbm-consumer-care__header {
		margin-bottom: 24px;
	}

	.rbm-consumer-care__header h2 {
		font-size: 28px;
	}

	.rbm-consumer-care__header p {
		font-size: 15px;
	}

	.rbm-form-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.rbm-form-field--full {
		grid-column: auto;
	}

	.rbm-form-actions {
		margin-top: 24px;
	}

	.rbm-consumer-care__submit {
		width: 100%;
	}
}