/*
 * Request a Quote — presentation fixes.
 *
 * Addify's form is built for wholesale haggling over catalogue items, and it
 * shows. These rules make it read as a synthesis enquiry form instead. Loaded
 * only on the quote page.
 */

/*
 * The quote "cart" table.
 *
 * Every request rides on a placeholder line item ("Custom Product", SKU
 * quote-product-custom) that the customer never chose and cannot interpret —
 * thumbnail, quantity box and all. But the same table also holds real catalogue
 * products once a customer uses "Add to Quote", and hiding *those* would mean
 * they cannot see what they are about to request.
 *
 * So: hidden by default to avoid a flash of the placeholder, then cp-quote.js
 * drops the placeholder row and reveals the table if anything real remains.
 * Doing it in CSS alone is not possible — the placeholder can only be
 * identified by its SKU, which no selector can match.
 */
.addify-quote-form__contents {
	display: none;
}

.addify-quote-form__contents.cp-has-items {
	display: table;
}

.quote-fields ~ .cart_totals,
.afrfq_quote_totals {
	display: none !important;
}

/* Space the form now that the table above it is gone. */
.quote-fields {
	margin-top: 0;
}

/*
 * Required fields shipped with a heavy red left border in their *resting*
 * state, which reads as a validation error before the customer has typed
 * anything. Neutral until it actually is an error.
 */
.quote-fields input[type="text"],
.quote-fields input[type="email"],
.quote-fields input[type="number"],
.quote-fields input[type="tel"],
.quote-fields textarea,
.quote-fields select {
	border-left: 1px solid #d5dade !important;
	border-radius: 4px;
	width: 100%;
	max-width: 520px;
	box-sizing: border-box;
}

.quote-fields input:focus,
.quote-fields textarea:focus,
.quote-fields select:focus {
	border-color: #2b7f8f !important;
	outline: none;
}

/*
 * The consent checkbox, which the form cannot be submitted without.
 *
 * An Elementor custom-CSS block on this page (post 6064, element 710d33b8) sets
 * `.addify-option-field input { flex: 1 1 100% }` — written for the text inputs,
 * so they fill their row. It also matches the checkbox. That row is a flex
 * container holding the checkbox and a four-line terms paragraph, so
 * flex-shrink:1 against a much longer sibling collapsed the checkbox to *zero*
 * pixels wide: present in the DOM, impossible to see or click. The field is
 * required, so the form answered every submission with "I confirm that is
 * required field" and no quote could be placed at all. The quote table stops at
 * 2026-04-26; this is the likeliest reason it does.
 *
 * !important rather than out-specifying it. The Elementor selector carries four
 * classes and lives in generated CSS that is rewritten whenever the page is
 * edited, so a specificity race here is one Elementor save away from silently
 * reverting — on the control that gates every quote on the site.
 *
 * The real fix is to narrow that rule to `input[type="text"], textarea, select`
 * in Elementor. Until someone does, this holds. See .gk/TODO.md.
 */
.quote-fields input[type="checkbox"],
.quote-fields input[type="radio"] {
	flex: 0 0 auto !important;
	width: 18px !important;
	min-width: 18px !important;
	height: 18px !important;
	margin: 0 .6rem 0 0 !important;
	accent-color: #2b7f8f;
	cursor: pointer;
}

/* Long consent text wraps; align the box to its first line, not its middle. */
.quote-fields .adf-term-conditon {
	align-items: flex-start !important;
}

/* No <label> wraps this text, so cp-quote.js makes it clickable instead. */
.quote-fields .adf-term-conditon span {
	flex: 1 1 auto;
	cursor: pointer;
}

/* Genuine validation errors still show, just not by default. */
.quote-fields .adf-error,
.quote-fields input.error,
.quote-fields textarea.error {
	border-color: #c1272d !important;
}

/*
 * Sequence and Comments are the whole point of the form — a peptide chain does
 * not fit on two lines, and the placeholder was being cut off mid-word.
 */
.quote-fields textarea {
	min-height: 7.5em;
	line-height: 1.5;
	resize: vertical;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95em;
}

/* Comments is prose, not a sequence — keep it in the body font. */
.quote-fields textarea[name="Comments_1"] {
	font-family: inherit;
	font-size: 1em;
}

/* Prefilled-from-account fields: visibly already answered, still editable. */
.quote-fields .cp-prefilled input,
.quote-fields .cp-prefilled select {
	background: #f7f9fa;
}

.cp-prefilled-note {
	margin: 0 0 1.25rem;
	padding: 0.7rem 1rem;
	border-left: 3px solid #2b7f8f;
	background: #f2f7f8;
	font-size: 0.92em;
	color: #4a5560;
}

@media (max-width: 640px) {
	.quote-fields input,
	.quote-fields textarea,
	.quote-fields select {
		max-width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Custom peptide line items, wherever Addify lists them.
 *
 * The row is the customer's record of what they asked for, so the spec reads as
 * the content of the line rather than as an annotation on a product name.
 * ------------------------------------------------------------------------ */

.cp-line__name {
	display: block;
	font-size: 1rem;
	line-height: 1.3;
}

.cp-line__meta {
	display: block;
	margin-top: .15rem;
	color: #5a6771;
	font-size: .88rem;
}

.cp-line__seq {
	display: block;
	margin-top: .35rem;
	padding: .3rem .5rem;
	border-radius: 3px;
	background: #f2f5f6;
	font-size: .8rem;
	line-height: 1.45;
	word-break: break-all;
}

.cp-line__notes {
	display: block;
	margin-top: .35rem;
	color: #5a6771;
	font-size: .85rem;
	line-height: 1.45;
}

/*
 * Every custom line carries the same placeholder SKU, printed by the template
 * outside any filter. Three rows reading "SKU: quote-product-custom" say
 * nothing and imply the peptides are all one product.
 */
.cp-line .wc-order-item-sku {
	display: none;
}

.cp-line__tbq {
	color: #5a6771;
	font-style: italic;
	white-space: nowrap;
}

/*
 * The same substitution again, in CSS, for the my-account template.
 *
 * That template prints its price and total with a bare `wc_price( $price )` and
 * no filter to hook — unlike the quote page, which has one. So the amount is
 * suppressed and replaced here. Presentational either way: the underlying
 * figure is a placeholder's zero, not a price anyone quoted.
 */
.cp-line .product-price .woocommerce-Price-amount,
.cp-line .product-subtotal .woocommerce-Price-amount,
.cp-line .product-total .woocommerce-Price-amount {
	display: none;
}

/*
 * `:has()` keeps this off the cells the PHP filter already handled — the quote
 * page prints its own "To be quoted" span there, and an unconditional ::after
 * would say it twice.
 */
.cp-line .product-price:has(.woocommerce-Price-amount)::after,
.cp-line .product-subtotal:has(.woocommerce-Price-amount)::after,
.cp-line .product-total:has(.woocommerce-Price-amount)::after {
	content: "To be quoted";
	color: #5a6771;
	font-style: italic;
	font-size: .85rem;
}

.cp-line__totals-note {
	margin: 0 0 .9rem;
	padding: .7rem 1rem;
	border-left: 3px solid #2b7f8f;
	background: #f2f7f8;
	font-size: .9rem;
	line-height: 1.5;
	color: #4a5560;
}

/* ---------------------------------------------------------------------------
 * Custom-synthesis card, appended as the last tile of a product grid.
 *
 * Deliberately does NOT imitate a product card. A tile that looks purchasable
 * but is not would be read as a broken product; the dashed border and the "+"
 * mark say "this is a way to ask for something else" at a glance.
 * ------------------------------------------------------------------------ */

.cp-custom-card {
	list-style: none;
}

.cp-custom-card .cp-custom-card__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .55rem;
	height: 100%;
	padding: 1.5rem 1.35rem;
	border: 2px dashed #9fc0c8;
	border-radius: 6px;
	background: #f4f9fa;
	color: #24424a;
	text-decoration: none;
	box-sizing: border-box;
	transition: border-color .15s ease, background .15s ease;
}

.cp-custom-card .cp-custom-card__link:hover,
.cp-custom-card .cp-custom-card__link:focus {
	border-color: #2b7f8f;
	background: #eaf4f6;
	text-decoration: none;
}

.cp-custom-card__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #2b7f8f;
	color: #fff;
	font-size: 1.7rem;
	line-height: 1;
	font-weight: 300;
}

.cp-custom-card__title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

.cp-custom-card__text {
	font-size: .88rem;
	line-height: 1.5;
	color: #4d6068;
}

.cp-custom-card__cta {
	margin-top: auto;
	padding-top: .5rem;
	font-weight: 700;
	color: #1f6b78;
}

.cp-custom-card__cta::after {
	content: " →";
}

/* ---------------------------------------------------------------------------
 * Custom peptides panel — the repeatable list of bespoke items on a request.
 * ------------------------------------------------------------------------ */

.cp-custom {
	margin: 0 0 2rem;
	padding: 1.5rem;
	border: 1px solid #dfe4e7;
	border-left: 4px solid #2b7f8f;
	border-radius: 4px;
	background: #f8fafb;
}

.cp-custom__heading { margin: 0 0 .35rem; font-size: 1.2rem; }
.cp-custom__lede { margin: 0 0 1.1rem; color: #5a6771; font-size: .94rem; line-height: 1.5; }

.cp-custom__list { margin: 0 0 1.1rem; padding: 0; list-style: none; }

.cp-custom__item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: .85rem 1rem;
	margin-bottom: .5rem;
	border: 1px solid #dfe4e7;
	border-radius: 4px;
	background: #fff;
}

.cp-custom__item-main { flex: 1; min-width: 0; }
.cp-custom__item-name { display: block; font-size: 1rem; }

.cp-custom__item-meta { color: #5a6771; font-size: .9rem; }

.cp-custom__item-seq {
	display: block;
	margin-top: .35rem;
	padding: .3rem .5rem;
	border-radius: 3px;
	background: #f2f5f6;
	font-size: .82rem;
	word-break: break-all;
}

/* Destructive, so it stays quiet until reached for. */
.cp-custom__remove button {
	padding: .1em .5em;
	border: 1px solid #d5dade;
	border-radius: 3px;
	background: #fff;
	color: #646970;
	font-size: 1.1rem;
	line-height: 1.2;
	cursor: pointer;
}

.cp-custom__remove button:hover { border-color: #c1272d; color: #c1272d; }

.cp-custom__add > summary {
	cursor: pointer;
	font-weight: 700;
	color: #1f6b78;
	padding: .5rem 0;
}

.cp-custom__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .9rem 1.1rem;
	margin-top: .9rem;
	padding-top: 1.1rem;
	border-top: 1px solid #e3e8ea;
}

/* Sequence and notes need the room; the rest are short answers. */
.cp-custom__field--textarea { grid-column: 1 / -1; }

.cp-custom__field { margin: 0; }
.cp-custom__field label { display: block; margin-bottom: .3rem; font-weight: 600; font-size: .92rem; }

.cp-custom__field input,
.cp-custom__field textarea {
	width: 100%;
	padding: .6rem .7rem;
	border: 1px solid #d5dade;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: .95rem;
}

.cp-custom__field textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.cp-custom__field input:focus, .cp-custom__field textarea:focus { border-color: #2b7f8f; outline: none; }

/*
 * Adding a peptide is the main thing this page is for, and it inherited the
 * theme's generic .button — 31px tall, the same weight as a "read more" link.
 * Sized to be reached for.
 */
.cp-custom__submit {
	grid-column: 1 / -1;
	justify-self: start;
	min-height: 44px;
	padding: .65rem 1.5rem;
	border: 0;
	border-radius: 4px;
	background: #2b7f8f;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background .15s ease;
}

.cp-custom__submit:hover,
.cp-custom__submit:focus {
	background: #246976;
	color: #fff;
}

.cp-custom .cp-req { color: #c1272d; }

@media (max-width: 640px) {
	.cp-custom__form { grid-template-columns: 1fr; }
}

/* --- Deposit option at checkout --- */

.cp-deposit {
	margin: 1.2rem 0;
	padding: 1rem 1.1rem;
	background: #fff;
	border: 1px solid #d5d7d9;
	border-radius: 4px;
}
.cp-deposit h3 { margin: 0 0 .7rem; font-size: 1.05rem; }

.cp-deposit__option {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: .2rem .6rem;
	padding: .7rem .2rem;
	cursor: pointer;
}
.cp-deposit__option + .cp-deposit__option { border-top: 1px solid #f0f0f1; }
.cp-deposit__label { font-weight: 600; }
.cp-deposit__amount { font-weight: 700; white-space: nowrap; }

/* Sits under the label, clear of the radio column. */
.cp-deposit__note {
	grid-column: 2 / -1;
	font-size: .88rem;
	color: #50575e;
}

.cp-deposit__balance {
	margin-top: 1rem;
	padding: .7rem .9rem;
	background: #fdf5e6;
	border-left: 3px solid #d98500;
}