/*
 * referral.css — Aveniqx Secure Online Referral Form
 * Scoped to template-referrals.php. Loaded only on that page.
 * Palette: teal #2B7A78 · dark teal #1F5F5D · teal-light #E0F2F1
 * All component classes are prefixed with `rf-` to avoid Tailwind conflicts.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   HONEYPOT  —  Off-screen, NOT display:none (some bots detect that)
   ───────────────────────────────────────────────────────────────────────────── */
.rf-honeypot {
	position:       absolute;
	left:           -9999px;
	top:            -9999px;
	width:          1px;
	height:         1px;
	overflow:       hidden;
	opacity:        0;
	pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FORM CARD  —  white container with border + shadow matching original design
   ───────────────────────────────────────────────────────────────────────────── */
.rf-card {
	background:    #ffffff;
	border:        2px solid #E0F2F1;
	border-radius: 0.75rem;       /* rounded-xl */
	padding:       2rem 2rem;
	box-shadow:    0 10px 40px rgba(0, 0, 0, 0.10);
}

@media (min-width: 768px) {
	.rf-card {
		padding: 3rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION BLOCKS
   ───────────────────────────────────────────────────────────────────────────── */
.rf-section {
	margin-bottom:  2rem;
	padding-bottom: 2rem;
	border-bottom:  1px solid #E5E5E5;
}

.rf-section:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Alternating background for the patient section */
.rf-section-alt {
	background:    #FAFAFA;
	border-radius: 0.5rem;
	padding:       1.5rem;
	margin-left:   -1.5rem;
	margin-right:  -1.5rem;
}

@media (min-width: 768px) {
	.rf-section-alt {
		margin-left:  -3rem;
		margin-right: -3rem;
		padding:      1.75rem 3rem;
	}
}

/* Section heading — teal with bottom border */
.rf-section-heading {
	display:        flex;
	align-items:    center;
	gap:            0.5rem;
	font-size:      1.0625rem;   /* ~17px */
	font-weight:    600;
	color:          #2B7A78;
	margin-bottom:  1.25rem;
	padding-bottom: 0.625rem;
	border-bottom:  2px solid #E0F2F1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TWO-COLUMN FIELD GRID
   ───────────────────────────────────────────────────────────────────────────── */
.rf-grid {
	display:               grid;
	grid-template-columns: 1fr;
	gap:                   1.25rem;
}

@media (min-width: 768px) {
	.rf-grid {
		grid-template-columns: 1fr 1fr;
		gap:                   1.5rem;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   INDIVIDUAL FIELD
   ───────────────────────────────────────────────────────────────────────────── */
.rf-field {
	display:        flex;
	flex-direction: column;
	gap:            0.375rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LABELS
   ───────────────────────────────────────────────────────────────────────────── */
.rf-label {
	display:     block;
	font-size:   0.875rem;  /* text-sm */
	font-weight: 500;
	color:       #333333;
}

.rf-required {
	color: #F44336;
}

.rf-optional {
	font-size:   0.75rem;
	font-weight: 400;
	color:       #6B6B6B;
	margin-left: 0.25rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TEXT / EMAIL / TEL INPUTS
   ───────────────────────────────────────────────────────────────────────────── */
.rf-input {
	display:          block;
	width:            100%;
	height:           3rem;      /* h-12 */
	padding:          0 1rem;
	background:       #ffffff;
	border:           1.5px solid #E5E5E5;
	border-radius:    0.375rem;  /* rounded-md */
	font-size:        1rem;
	color:            #333333;
	line-height:      3rem;
	transition:       border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance:       none;
	box-sizing:       border-box;
}

.rf-input::placeholder {
	color: #AAAAAA;
}

.rf-input:focus {
	outline:      none;
	border-color: #2B7A78;
	box-shadow:   0 0 0 3px rgba(43, 122, 120, 0.14);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ERROR STATE
   ───────────────────────────────────────────────────────────────────────────── */
.rf-field-error .rf-input,
.rf-field-error .rf-input:focus {
	border-color: #F44336 !important;
	box-shadow:   0 0 0 3px rgba(244, 67, 54, 0.11) !important;
}

/* Inline field error message */
.rf-inline-error {
	margin:      0;
	font-size:   0.75rem;
	font-weight: 600;
	color:       #F44336;
	line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ERROR BANNER  (server-side validation failures)
   ───────────────────────────────────────────────────────────────────────────── */
.rf-error-banner {
	display:       flex;
	align-items:   flex-start;
	gap:           0.75rem;
	background:    #fff5f5;
	border-left:   4px solid #F44336;
	border-radius: 0 0.5rem 0.5rem 0;
	padding:       1rem 1.25rem;
	margin-bottom: 1.75rem;
	color:         #991b1b;
}

.rf-error-title {
	font-size:   0.9375rem;
	font-weight: 600;
	margin:      0 0 0.25rem;
	color:       #7f1d1d;
}

.rf-error-body {
	font-size: 0.875rem;
	margin:    0;
	color:     #991b1b;
}

.rf-error-body a {
	color:           #991b1b;
	text-decoration: underline;
}

.rf-error-list {
	margin:     0.25rem 0 0 1rem;
	padding:    0;
	font-size:  0.875rem;
	list-style: disc;
	color:      #991b1b;
}

.rf-error-list li {
	margin-bottom: 0.125rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SUBMIT ROW
   ───────────────────────────────────────────────────────────────────────────── */
.rf-submit-row {
	padding-top:    1.5rem;
	border-top:     1px solid #E5E5E5;
	margin-top:     1.5rem;
}

/* Privacy / HIPAA note above button */
.rf-privacy-note {
	display:        flex;
	align-items:    center;
	gap:            0.375rem;
	font-size:      0.75rem;
	color:          #6B6B6B;
	margin-bottom:  1.25rem;
	line-height:    1.5;
}

/* Teal submit button — full width, matches original design */
.rf-submit-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          3.5rem;     /* h-14 */
	background:      #2B7A78;
	color:           #ffffff;
	border:          none;
	border-radius:   0.5rem;
	font-size:       1.125rem;   /* text-lg */
	font-weight:     700;
	cursor:          pointer;
	box-shadow:      0 4px 14px rgba(43, 122, 120, 0.30);
	transition:      background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
	user-select:     none;
}

.rf-submit-btn:hover {
	background:  #1F5F5D;
	transform:   translateY(-1px);
	box-shadow:  0 6px 20px rgba(43, 122, 120, 0.35);
}

.rf-submit-btn:active {
	transform:  scale(0.985);
	box-shadow: 0 2px 8px rgba(43, 122, 120, 0.25);
}

.rf-submit-btn:disabled {
	opacity:        0.7;
	cursor:         not-allowed;
	pointer-events: none;
}

/* Spinner for loading state */
@keyframes rf-spin {
	to { transform: rotate(360deg); }
}

.rf-spin {
	animation:   rf-spin 0.75s linear infinite;
	display:     inline-block;
	flex-shrink: 0;
}