/* ════════════════════════════════════════════════════════════════
   Pickup Request Form — styling matches Internet Lending Program
   ════════════════════════════════════════════════════════════════ */

.prf-wrap {
	max-width: 1300px;
	margin: 2rem auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #1a1a2e;
}

.prf-form { display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Card ──────────────────────────────────────────────────────── */
.prf-card {
	background: #fff;
	border: 1px solid #d4e4a8;
	border-radius: 12px;
	box-shadow: 0 2px 16px rgba(0,0,0,.07);
	animation: prf-slide-in 0.3s ease;
}

@keyframes prf-slide-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.prf-card-inner {
	padding: 2rem 2.25rem 1.75rem;
}

@media (max-width: 560px) {
	.prf-card-inner { padding: 1.25rem 1rem 1rem; }
}

/* ── Card Typography ───────────────────────────────────────────── */
.prf-card-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 0.4rem;
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.prf-card-title i { color: #9CC449; }

.prf-card-desc {
	font-size: 0.97rem;
	color: #64748b;
	margin: 0 0 1.75rem;
}

/* ── Field rows ────────────────────────────────────────────────── */
.prf-row { display: flex; gap: 1rem; flex-wrap: wrap; }

.prf-field {
	display: flex;
	flex-direction: column;
	margin-bottom: 1.15rem;
	flex: 1 1 100%;
	min-width: 0;
}

.prf-field.prf-half { flex: 1 1 calc(50% - 0.5rem); }

@media (max-width: 480px) {
	.prf-row { flex-wrap: wrap; }
	.prf-field.prf-half { flex: 1 1 100%; }
}

.prf-field label,
.prf-qty label {
	font-size: 0.875rem;
	font-weight: 600;
	color: #374151;
	margin-bottom: 6px;
	display: block;
}

.prf-req  { color: #e53e3e; }
.prf-hint { color: #64748b; font-weight: 400; font-size: 0.83rem; }

/* ── Inputs — match ilp-form.css exactly ──────────────────────── */
.prf-field input[type="text"],
.prf-field input[type="email"],
.prf-field input[type="tel"],
.prf-field textarea,
.prf-qty input[type="text"] {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1.5px solid #cbd5e1;
	border-radius: 8px;
	font-size: 0.975rem;
	color: #1a1a2e;
	background: #f8fafc;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
	font-family: inherit;
}

.prf-field input:focus,
.prf-field textarea:focus,
.prf-qty input:focus {
	outline: none;
	border-color: #9CC449;
	box-shadow: 0 0 0 3px rgba(156,196,73,.2);
	background: #fff;
}

.prf-field input.prf-input-error,
.prf-field textarea.prf-input-error {
	border-color: #e53e3e;
	box-shadow: 0 0 0 3px rgba(229,62,62,.12);
}

.prf-field textarea { resize: vertical; min-height: 80px; }

/* ── Inline field error ────────────────────────────────────────── */
.prf-field-error {
	font-size: 0.8rem;
	color: #e53e3e;
	margin-top: 4px;
	display: block;
}

/* ── Google Places autocomplete dropdown ───────────────────────── */
.pac-container { z-index: 99999; }

/* ── Item quantities grid ──────────────────────────────────────── */
.prf-qty-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.85rem;
}

.prf-qty { min-width: 0; }
.prf-qty input { text-align: center; padding: 0.55rem 0.65rem !important; font-size: 0.95rem !important; }
.prf-qty label { font-size: 0.76rem; }

@media (max-width: 720px) {
	.prf-qty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
	.prf-qty-grid { grid-template-columns: 1fr; }
}

/* ── Photo upload area ─────────────────────────────────────────── */
.prf-upload-area {
	border: 2px dashed #cbd5e1;
	border-radius: 10px;
	background: #f8fafc;
	transition: border-color 0.2s, background 0.2s;
	cursor: pointer;
	position: relative;
}

.prf-upload-area:hover,
.prf-upload-area.prf-drag-over {
	border-color: #9CC449;
	background: #f5fae8;
}

.prf-upload-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 2rem 1.5rem;
	cursor: pointer;
	color: #64748b;
	font-size: 0.95rem;
	font-weight: 600;
	text-align: center;
}

.prf-upload-label i {
	font-size: 2rem;
	color: #9CC449;
}

.prf-upload-label small {
	font-weight: 400;
	font-size: 0.8rem;
	color: #94a3b8;
}

.prf-file-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

/* ── Photo preview grid ────────────────────────────────────────── */
.prf-photo-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

.prf-photo-thumb {
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 8px;
	overflow: hidden;
	border: 1.5px solid #d4e4a8;
	flex-shrink: 0;
}

.prf-photo-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.prf-photo-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	line-height: 1;
	padding: 0;
	transition: background 0.15s;
}

.prf-photo-remove:hover { background: rgba(229,62,62,.85); }

/* ── Actions / Submit — match ilp-btn style ─────────────────────── */
.prf-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid #e2e8f0;
}

.prf-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.65rem 1.4rem;
	border: none;
	border-radius: 8px;
	font-size: 0.975rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
	white-space: nowrap;
	font-family: inherit;
}

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

.prf-btn-submit {
	background: #9CC449;
	color: #fff;
	box-shadow: 0 2px 8px rgba(156,196,73,.35);
}

.prf-btn-submit:hover {
	background: #7BA038;
	box-shadow: 0 4px 12px rgba(156,196,73,.45);
}

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

/* ── Messages ──────────────────────────────────────────────────── */
.prf-msg {
	padding: 0.9rem 1rem;
	border-radius: 8px;
	font-size: 0.9rem;
	font-weight: 500;
	margin-top: 1rem;
}

.prf-msg-error {
	background: #fff5f5;
	border: 1px solid #feb2b2;
	color: #c53030;
}

.prf-msg-success {
	background: #f5fae8;
	border: 1px solid #C5E08A;
	color: #2a4a10;
	text-align: center;
	font-size: 1rem;
}

/* ── Minimum requirement notice ────────────────────────────────── */
.prf-min-notice {
	background: #f5fae8;
	border: 1px solid #C5E08A;
	border-radius: 10px;
	padding: 1.1rem 1.25rem 1rem;
	margin-bottom: 1.5rem;
}

.prf-min-notice-heading {
	font-size: 0.9rem;
	font-weight: 700;
	color: #2a4a10;
	margin: 0 0 0.85rem;
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.prf-min-notice-heading i { color: #7BA038; }

.prf-min-thresholds {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.65rem;
	margin-bottom: 0.9rem;
}

@media (max-width: 600px) {
	.prf-min-thresholds { grid-template-columns: 1fr; }
}

.prf-min-threshold {
	background: #fff;
	border: 1.5px solid #d4e4a8;
	border-radius: 8px;
	padding: 0.75rem 0.9rem;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	transition: border-color 0.2s, background 0.2s;
}

.prf-min-threshold.is-met {
	border-color: #9CC449;
	background: #f0fae0;
}

.prf-min-threshold i {
	font-size: 1.2rem;
	color: #9CC449;
	margin-bottom: 0.2rem;
}

.prf-min-threshold strong {
	font-size: 0.9rem;
	color: #0f172a;
	display: block;
}

.prf-min-threshold span {
	font-size: 0.78rem;
	color: #64748b;
	line-height: 1.4;
}

.prf-min-notice-footer {
	font-size: 0.82rem;
	color: #4a5568;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.prf-min-notice-footer i { color: #9CC449; }

.prf-min-notice-footer a {
	color: #7BA038;
	text-decoration: underline;
	font-weight: 600;
}

/* ── Live minimum warning banner ───────────────────────────────── */
.prf-min-warn {
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin-bottom: 1.25rem;
	font-size: 0.88rem;
	color: #92400e;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.prf-min-warn i { color: #d97706; flex-shrink: 0; margin-top: 2px; }

.prf-min-warn a {
	color: #7BA038;
	font-weight: 600;
	text-decoration: underline;
	white-space: nowrap;
}