/* Patch Factory Quote — front-end form styles. All rules scoped under .pfq-root */

.pfq-root, .pfq-root *, .pfq-root *::before, .pfq-root *::after { box-sizing: border-box; }
.pfq-root { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #1a1a1a; }
.pfq-wrap { padding: 2rem 0 6rem; }

.pfq-size-suggest-btn { border: 1px solid #e0e0e0; border-radius: 10px; padding: 10px 12px; font-size: 12px; font-weight: 500; color: #1a2a5e; cursor: pointer; transition: all 0.15s; user-select: none; background: #fff; white-space: nowrap; flex-shrink: 0; text-decoration: none; display: flex; align-items: center; gap: 4px; }
.pfq-size-suggest-btn:hover { border-color: #1a2a5e; background: rgba(26,42,94,0.04); }
.pfq-size-suggest-btn.pfq-active { background: #1a2a5e; border-color: #1a2a5e; color: #fff; }
.pfq-size-guide { display: none; margin-top: 10px; background: #f8f9fb; border: 1px solid #e8e8e8; border-radius: 10px; overflow: hidden; }
.pfq-size-guide.pfq-show { display: block; }
.pfq-size-guide-title { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #1a2a5e; padding: 10px 12px 6px; }
.pfq-size-guide-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 0.5px solid #ebebeb; cursor: pointer; transition: background 0.15s; }
.pfq-size-guide-item:hover { background: rgba(26,42,94,0.04); }
.pfq-size-guide-item:first-of-type { border-top: none; }
.pfq-sg-left { display: flex; align-items: center; gap: 10px; }
.pfq-sg-size { font-size: 13px; font-weight: 500; color: #1a1a1a; min-width: 32px; }
.pfq-sg-desc { font-size: 12px; color: #888; }
.pfq-sg-pick { font-size: 11px; color: #1a2a5e; font-weight: 500; }
.pfq-sg-badge { font-size: 10px; font-weight: 600; background: #f4b942; color: #1a2a5e; padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
.pfq-sg-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pfq-sg-left { min-width: 0; flex: 1; }
.pfq-size-guide-item { gap: 8px; }

.pfq-section { padding: 2rem 0; border-top: 0.5px solid #e8e8e8; }
.pfq-section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #1a2a5e; margin-bottom: 1rem; display: flex; align-items: center; gap: 10px; }
.pfq-step-num { width: 26px; height: 26px; border-radius: 50%; background: #1a2a5e; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: monospace; }

.pfq-upload-zone { border: 1.5px dashed #d0d0d0; border-radius: 12px; padding: 2.5rem 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s; background: #fff; display: block; position: relative; }
.pfq-file-input-hidden { position: absolute; left: -9999px; opacity: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
.pfq-upload-zone:hover, .pfq-upload-zone.pfq-dragging { border-color: #1a2a5e; background: rgba(26,42,94,0.03); }
.pfq-upload-zone.pfq-error { border-color: #e74c3c; background: rgba(231,76,60,0.03); }
.pfq-file-required-err { font-size: 11px; color: #e74c3c; margin-top: 6px; display: none; text-align: center; }
.pfq-file-required-err.pfq-show { display: block; }
.pfq-upload-icon { width: 48px; height: 48px; margin: 0 auto 0.85rem; background: rgba(26,42,94,0.07); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.pfq-upload-icon svg { width: 22px; height: 22px; stroke: #1a2a5e; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pfq-upload-zone h3 { font-size: 14px; font-weight: 500; color: #1a1a1a; margin-bottom: 4px; margin-top: 0; }
.pfq-upload-zone p { font-size: 12px; color: #aaa; margin: 0; }
/* Multi-file list (replaces the old single .pfq-file-attached row). */
.pfq-file-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pfq-file-list[hidden] { display: none; }
.pfq-file-list li { display: flex; align-items: center; gap: 8px; background: #f0faf4; border: 0.5px solid #b7e4c7; border-radius: 8px; padding: 8px 12px; }
.pfq-file-list li svg.pfq-file-check { width: 14px; height: 14px; stroke: #27ae60; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.pfq-file-list li .pfq-file-name { flex: 1; min-width: 0; font-size: 12px; color: #1a6b3a; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfq-file-list li .pfq-file-size { font-size: 11px; color: #6e9c83; flex-shrink: 0; }
.pfq-file-list li .pfq-file-x { background: none; border: 0; font-size: 14px; color: #aaa; cursor: pointer; padding: 2px 6px; line-height: 1; flex-shrink: 0; border-radius: 4px; }
.pfq-file-list li .pfq-file-x:hover { color: #e74c3c; background: rgba(231,76,60,0.08); }

.pfq-field-row { display: grid; gap: 1rem; margin-bottom: 1rem; }
.pfq-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

/* Contact section layout: 2-col rows collapse to single column on narrow screens. */
.pfq-contact-rows { display: flex; flex-direction: column; gap: 1rem; }
.pfq-row { display: grid; gap: 1rem; }
.pfq-row-1col { grid-template-columns: 1fr; }
.pfq-row-2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
	.pfq-row-2col { grid-template-columns: 1fr; }
}
.pfq-field > label { font-size: 12px; font-weight: 500; color: #555; display: flex; align-items: center; justify-content: space-between; }
.pfq-field > label a { font-weight: 400; color: #1a2a5e; font-size: 11px; text-decoration: none; }
.pfq-field > label a:hover { text-decoration: underline; }
.pfq-lbl-hint { font-weight: 400; color: #bbb; }

.pfq-root input[type=text], .pfq-root input[type=email], .pfq-root input[type=tel], .pfq-root input[type=number], .pfq-root select, .pfq-root textarea {
	font-family: 'DM Sans', -apple-system, sans-serif; font-size: 14px;
	border: 1px solid #e0e0e0; border-radius: 10px;
	padding: 10px 12px; background: #fff; color: #1a1a1a;
	outline: none; width: 100%; transition: border-color 0.15s, box-shadow 0.15s;
	-webkit-appearance: none; appearance: none; line-height: 1.4;
}
.pfq-root input[type=number] { text-align: center; }
.pfq-root input:focus, .pfq-root select:focus, .pfq-root textarea:focus { border-color: #1a2a5e; box-shadow: 0 0 0 3px rgba(26,42,94,0.08); }
.pfq-root input.pfq-valid { border-color: #27ae60; background: #f8fffa; }
.pfq-root input.pfq-valid + .pfq-field-valid { display: flex; }
.pfq-root input.pfq-error { border-color: #e74c3c; box-shadow: 0 0 0 3px rgba(231,76,60,0.08); background: #fff8f8; }
.pfq-field-valid { display: none; align-items: center; gap: 4px; font-size: 11px; color: #27ae60; margin-top: 3px; font-weight: 500; }
.pfq-field-valid svg { width: 11px; height: 11px; stroke: #27ae60; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.pfq-root textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
.pfq-field-err { font-size: 11px; color: #e74c3c; display: none; }
.pfq-field-err.pfq-show { display: block; }
.pfq-char-count { font-size: 10px; color: #bbb; text-align: right; }
.pfq-privacy { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #bbb; }
.pfq-privacy svg { width: 10px; height: 10px; stroke: #bbb; fill: none; stroke-width: 1.5; flex-shrink: 0; }

.pfq-chip-group { display: flex; gap: 6px; flex-wrap: wrap; }
.pfq-chip { border: 1px solid #e0e0e0; border-radius: 100px; padding: 6px 14px; font-size: 12px; font-weight: 500; color: #666; cursor: pointer; transition: all 0.15s; user-select: none; background: #fff; }
.pfq-chip:hover { border-color: #1a2a5e; color: #1a2a5e; }
.pfq-chip.pfq-active { background: #1a2a5e; border-color: #1a2a5e; color: #fff; }

.pfq-qty-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pfq-qty-chip { border: 1px solid #e0e0e0; border-radius: 100px; padding: 7px 16px; font-size: 13px; font-weight: 500; color: #666; cursor: pointer; transition: all 0.15s; user-select: none; background: #fff; }
.pfq-qty-chip:hover { border-color: #1a2a5e; color: #1a2a5e; }
.pfq-qty-chip.pfq-active { background: #1a2a5e; border-color: #1a2a5e; color: #fff; transform: scale(1.05); }
.pfq-qty-custom-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pfq-qty-custom-row label { font-size: 11px; color: #bbb; white-space: nowrap; }
.pfq-qty-custom-row input { width: 90px; border-radius: 100px; text-align: center; padding: 6px 10px; font-size: 13px; }
.pfq-min-err { font-size: 11px; color: #e74c3c; margin-top: 4px; display: none; }
.pfq-over500 { font-size: 11px; color: #c89b28; margin-top: 4px; background: rgba(244,185,66,0.1); border: 0.5px solid rgba(244,185,66,0.3); border-radius: 6px; padding: 6px 10px; display: none; }

.pfq-est-wrap { background: #1a2a5e; border-radius: 12px; padding: 1rem 1.25rem; margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; transition: opacity 0.3s; gap: 0.75rem; }
.pfq-est-wrap.pfq-dim { opacity: 0.35; }
.pfq-est-left { display: flex; gap: 1.25rem; flex-shrink: 0; }
.pfq-est-lbl { font-size: 10px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; white-space: nowrap; }
.pfq-est-val { font-size: 13px; font-weight: 500; color: #6ee7b7; }
.pfq-est-right { text-align: right; flex-shrink: 0; }
.pfq-est-total { font-size: 24px; font-weight: 500; color: #f4b942; line-height: 1; transition: color 0.2s; }
.pfq-est-total.pfq-bump { animation: pfqPricePop 0.35s cubic-bezier(0.36,0.07,0.19,0.97); }
@keyframes pfqPricePop { 0%{transform:scale(1)} 30%{transform:scale(1.15)} 60%{transform:scale(0.95)} 100%{transform:scale(1)} }
.pfq-est-unit { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; white-space: nowrap; }
.pfq-est-sub { font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 1px; white-space: nowrap; }
.pfq-qty-tip { font-size: 11px; color: #c89b28; background: rgba(244,185,66,0.1); border: 0.5px solid rgba(244,185,66,0.3); border-radius: 8px; padding: 7px 10px; margin-top: 8px; display: none; line-height: 1.5; }

/* Fixed-height outer frame stops the form from jumping when reviews of different text lengths cycle in.
   No line-clamp on the text — the frame is sized to fit the longest review in full so the user
   never sees a "...". If you add a much longer review later, bump .pfq-review-frame height. */
.pfq-review-heading { font-size: 18px; font-weight: 600; color: #1a2a5e; margin: 0 0 12px; letter-spacing: -0.01em; }
/* Outer transparent frame reserves a fixed layout slot — that's what stops the
   rest of the form from jumping. The inner white card (.pfq-review-strip) is
   allowed to grow naturally with its content so short reviews don't have awkward
   empty space below the text. */
.pfq-review-frame { height: 13em; margin-bottom: 0; }
.pfq-review-strip { background: #fff; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 0; border: 1px solid #f0f0f0; display: flex; gap: 12px; align-items: flex-start; box-sizing: border-box; }
.pfq-review-avatar { width: 36px; height: 36px; background: #1a2a5e; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; flex-shrink: 0; transition: opacity 0.25s ease; }
.pfq-review-body { flex: 1; min-width: 0; transition: opacity 0.25s ease; }
.pfq-review-avatar.pfq-fading, .pfq-review-body.pfq-fading { opacity: 0; }
.pfq-review-stars { color: #f4b942; font-size: 11px; margin-bottom: 3px; }
.pfq-review-text { font-size: 13px; color: #444; font-style: italic; line-height: 1.55; margin-bottom: 4px; }
.pfq-review-author { font-size: 11px; color: #bbb; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Right-side square thumbnail in review strip — fixed 90×90 for predictable layout.
   (Earlier attempts with align-self:stretch + aspect-ratio:1/1 on a wrapper div
   broke under various browser flex layout edge cases; fixed pixels avoid all that.) */
.pfq-review-thumb-wrap { width: 90px; height: 90px; min-width: 90px; max-width: 90px; overflow: hidden; border-radius: 8px; border: 1px solid #e0e0e0; flex-shrink: 0; display: block; transition: opacity 0.25s ease; }
.pfq-review-thumb-wrap[hidden] { display: none !important; }
.pfq-review-thumb-wrap.pfq-fading { opacity: 0; }
.pfq-review-thumb { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; }

/* Promo code inline status + valid styling on the input. */
.pfq-promo-status { font-size: 11px; margin-top: 5px; font-weight: 500; }
.pfq-promo-status[hidden] { display: none; }
.pfq-promo-status.pfq-valid { color: #1a6b3a; }
.pfq-promo-status.pfq-invalid { color: #e74c3c; }
.pfq-promo-status.pfq-checking { color: #888; }
#pfq-promo.pfq-promo-valid { border-color: #27ae60; background: #f8fffa; }
#pfq-promo.pfq-promo-invalid { border-color: #e74c3c; background: #fff8f8; }
.pfq-est-discount-line { font-size: 11px; color: #6ee7b7; margin-top: 2px; }

.pfq-trust-row { display: flex; gap: 0; margin-bottom: 1.5rem; background: #fff; border-radius: 12px; border: 1px solid #f0f0f0; overflow: hidden; }
.pfq-trust-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0.85rem 0.5rem; text-align: center; border-right: 0.5px solid #f0f0f0; }
.pfq-trust-item:last-child { border-right: none; }
.pfq-trust-item svg { width: 16px; height: 16px; stroke: #1a2a5e; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pfq-trust-item span { font-size: 10px; font-weight: 500; color: #555; line-height: 1.35; }

.pfq-submit-btn { width: fit-content; max-width: 100%; margin: 3rem auto 0; padding: 15px 40px; background: #1a2a5e; color: #fff; border: none; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s; letter-spacing: 0.01em; line-height: 1.3; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pfq-submit-btn:hover { background: #152248; }
.pfq-submit-btn:active { transform: scale(0.99); }
.pfq-submit-btn:disabled { background: #ccc; color: #888; cursor: not-allowed; transform: none; }
.pfq-submit-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: pfqSpin 0.7s linear infinite; display: none; flex-shrink: 0; }
.pfq-submit-btn.pfq-loading .pfq-submit-spinner { display: block; }
@keyframes pfqSpin { to { transform: rotate(360deg); } }
.pfq-submit-note { text-align: center; font-size: 11px; color: #bbb; margin-top: 1.5rem; line-height: 1.5em; }
.pfq-submit-error { display: none; background: #fff8f8; border: 1px solid #e74c3c33; color: #c0392b; font-size: 12px; padding: 10px 12px; border-radius: 8px; margin-top: 10px; }
.pfq-submit-error.pfq-show { display: block; }

/* Success state */
.pfq-success-wrap { padding: 2rem 0 6rem; }
.pfq-success-card { background: #fff; border-radius: 16px; border: 1px solid #e8e8e8; overflow: hidden; }
.pfq-success-top { background: #fff; padding: 2.5rem 1.5rem 2rem; text-align: center; }
.pfq-check-wrap { width: 64px; height: 64px; background: #edfbf3; border: 2px solid #b7e4c7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }
.pfq-success-title { font-size: 22px; font-weight: 600; color: #1a1a1a; margin-bottom: 10px; }
.pfq-success-sub { font-size: 14px; color: #555; line-height: 1.65; max-width: 360px; margin: 0 auto; }
.pfq-success-sub strong { color: #1a2a5e; font-weight: 600; }
.pfq-ref-badge { display: inline-flex; align-items: center; gap: 6px; background: #f4f5f7; border: 0.5px solid #e0e0e0; border-radius: 100px; padding: 6px 16px; font-size: 12px; color: #666; margin-top: 1.25rem; }
.pfq-ref-badge strong { color: #1a2a5e; font-weight: 600; }
.pfq-success-body { background: #f8f9fb; border-top: 0.5px solid #e8e8e8; padding: 1.5rem; }
.pfq-steps-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #1a2a5e; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 0.5px solid #e0e0e0; }
.pfq-what-step { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 0.5px solid #ebebeb; }
.pfq-what-step:last-child { border-bottom: none; }
.pfq-step-n { width: 24px; height: 24px; min-width: 24px; background: #1a2a5e; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; margin-top: 1px; font-family: monospace; }
.pfq-what-title { font-size: 13px; font-weight: 500; color: #1a1a1a; margin-bottom: 2px; }
.pfq-what-desc { font-size: 12px; color: #888; line-height: 1.5; }
.pfq-new-quote-btn { width: 100%; padding: 13px; background: #f4f5f7; color: #1a2a5e; border: 1px solid #e0e0e0; border-radius: 12px; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; margin-top: 1.25rem; }
.pfq-new-quote-btn:hover { background: #ebebed; }
.pfq-contact-line { text-align: center; font-size: 11px; color: #aaa; margin-top: 10px; }
.pfq-contact-line a { color: #1a2a5e; font-weight: 500; text-decoration: none; }

/* Mobile: switch from flex to grid for explicit row control. Avatar+body on row 1,
   thumb on row 2 in the text column (col 2). Flex-wrap with width-capped items wouldn't
   wrap reliably; grid gives deterministic placement. */
@media (max-width: 600px) {
	.pfq-review-frame { height: 23em; }
	.pfq-review-strip { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; row-gap: 12px; align-items: start; }
	.pfq-review-avatar { grid-column: 1; grid-row: 1; }
	.pfq-review-body { grid-column: 2; grid-row: 1; }
	.pfq-review-thumb-wrap { grid-column: 2; grid-row: 2; justify-self: start; }
}

@media (max-width: 480px) {
	.pfq-trust-row { display: grid; grid-template-columns: 1fr 1fr; }
	.pfq-trust-item { border-right: 0.5px solid #f0f0f0; border-bottom: 0.5px solid #f0f0f0; }
	.pfq-trust-item:nth-child(even) { border-right: none; }
	.pfq-trust-item:nth-child(3), .pfq-trust-item:nth-child(4) { border-bottom: none; }
	.pfq-section-label { font-size: 10px; }
	/* Size guide: shrink fonts so the "Most popular" badge fits next to the description on narrow screens. */
	.pfq-size-guide-item { padding: 8px 10px; }
	.pfq-sg-left { gap: 8px; }
	.pfq-sg-size { font-size: 12px; min-width: 28px; }
	.pfq-sg-desc { font-size: 11px; line-height: 1.3; }
	.pfq-sg-badge { font-size: 9px; padding: 1px 5px; }
	.pfq-sg-pick { font-size: 10px; }
	.pfq-sg-meta { gap: 4px; }
}
@media (max-width: 360px) {
	.pfq-est-wrap { flex-direction: column; }
	.pfq-est-right { text-align: left; }
}