/* Qual-i-tee Drug Price Lookup — design language cribbed from
 * qualiteepharmacy.com/checkout/ (2026-08-03):
 *
 *   App text        polymath-text  → --wp--preset--font-family--alternate-font
 *   CTA button      pill (100px), bg secondary #c55a28, text white #fefcfa,
 *                   2px matching border, 600/15px  (matches Place Order)
 *   Inputs          white bg, 1px rgba(43,45,47,.8) border, 4px radius, 16px
 *   Accent/links    primary #237794 (teal)
 *   Surfaces        white #fefcfa cards on gray #fbf4f3 panels, 16px radius
 *   Ink             #5e626c
 *
 * Every value reads the theme token first, with the checkout's literal value
 * as fallback, so a theme palette change flows through automatically.
 */

.qpl-lookup {
	--qpl-font: var(--alternate-font-family, var(--wp--preset--font-family--alternate-font, polymath-text, Helvetica, sans-serif));
	--qpl-primary: var(--qlt-accent, var(--wp--preset--color--primary, #237794));
	--qpl-cta: var(--wp--preset--color--secondary, #c55a28);
	--qpl-white: var(--wp--preset--color--white, #fefcfa);
	--qpl-gray: var(--wp--preset--color--gray, #fbf4f3);
	--qpl-ink: var(--wp--preset--color--black, #5e626c);
	--qpl-muted: color-mix(in srgb, var(--qpl-ink) 72%, transparent);
	--qpl-line: var(--wp--preset--color--gray-3, rgba(43, 45, 47, 0.25));
	--qpl-input-border: color-mix(in srgb, var(--wp--preset--color--gray-9, #2b2d2f) 85%, transparent);
	--qpl-radius: var(--border-radius, 16px);
	font-family: var(--qpl-font);
	color: var(--qpl-ink);
	letter-spacing: -0.02em;
}

/* Form controls don't inherit fonts — force the app typeface everywhere. */
.qpl-lookup input,
.qpl-lookup button,
.qpl-lookup a.qpl-btn {
	font-family: var(--qpl-font);
	letter-spacing: -0.02em;
}

.qpl-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- search (Woo checkout input language) ---------- */

.qpl-searchwrap { position: relative; }

.qpl-search {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--gray-9, #2b2d2f);
	border: 1px solid var(--qpl-input-border);
	border-radius: 4px;
	background: var(--qpl-white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qpl-search:focus {
	outline: none;
	border-color: var(--qpl-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--qpl-primary) 20%, transparent);
}

.qpl-listbox {
	position: absolute;
	z-index: 40;
	left: 0; right: 0;
	margin: 6px 0 0;
	padding: 6px;
	list-style: none;
	background: var(--qpl-white);
	border: 1px solid var(--qpl-line);
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	max-height: 320px;
	overflow-y: auto;
}
.qpl-listbox li[role="option"] {
	padding: 0.55em 0.8em;
	border-radius: 5px;
	cursor: pointer;
}
.qpl-listbox li[role="option"]:hover,
.qpl-listbox li.qpl-active {
	background: var(--qpl-primary);
	color: var(--qpl-white);
}
.qpl-listbox li:hover .qpl-brandhint,
.qpl-listbox li.qpl-active .qpl-brandhint { color: color-mix(in srgb, var(--qpl-white) 85%, transparent); }
.qpl-brandhint { color: var(--qpl-muted); font-size: 0.9em; }
.qpl-empty { padding: 0.55em 0.8em; color: var(--qpl-muted); }

/* ---------- result card ---------- */

.qpl-card {
	margin-top: 1.4em;
	border-radius: var(--qpl-radius);
	padding: 1.25em 1.4em;
	background: var(--qpl-white);
	border: 1px solid var(--qpl-line);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.qpl-card-title {
	margin: 0 0 0.15em;
	font-family: var(--qpl-font);
	color: var(--qpl-ink);
}
.qpl-card-brands { margin: 0 0 0.8em; color: var(--qpl-muted); font-size: 0.92em; }

.qpl-card-table { width: 100%; border-collapse: collapse; }
.qpl-card-table th,
.qpl-card-table td {
	text-align: left;
	vertical-align: top;
	padding: 0.55em 0.3em;
	border-top: 1px solid var(--qpl-line);
	font-weight: 400;
}
.qpl-card-table tr:first-child th,
.qpl-card-table tr:first-child td { border-top: 0; }
.qpl-card-table td { font-weight: 600; color: var(--qpl-primary); }

.qpl-perk {
	margin: 0 0 0.8em;
	font-size: 0.88em;
	font-weight: 600;
	color: var(--qpl-cta);
}

.qpl-options {
	text-align: right;
	white-space: nowrap;
}
.qpl-options .qpl-opt { margin-left: 0.4em; }
.qpl-opt .qpl-opt-label { font-weight: 600; }
.qpl-opt .qpl-opt-price { font-weight: 400; opacity: 0.9; }
@media (max-width: 600px) {
	.qpl-options { white-space: normal; }
	.qpl-options .qpl-opt { margin: 0.2em 0 0.2em 0.4em; }
}

.qpl-addcell { text-align: right; }
.qpl-add {
	font-size: 0.85em;
	font-weight: 600;
	padding: 0.45em 1em;
	border: 2px solid var(--qpl-primary);
	border-radius: 100px;
	background: transparent;
	color: var(--qpl-primary);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.qpl-add:hover:not(:disabled) { background: var(--qpl-primary); color: var(--qpl-white); }
.qpl-add.qpl-added {
	border-color: var(--qpl-line);
	color: var(--qpl-muted);
	cursor: default;
}

/* ---------- my list ---------- */

.qpl-list {
	margin-top: 1.6em;
	border-radius: var(--qpl-radius);
	padding: 1.25em 1.4em;
	background: var(--qpl-gray);
}
.qpl-list-title { margin: 0 0 0.6em; font-family: var(--qpl-font); color: var(--qpl-ink); }
.qpl-list-count { color: var(--qpl-muted); font-weight: 400; }

.qpl-list-items { list-style: none; margin: 0 0 0.8em; padding: 0; }
.qpl-list-items li {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	padding: 0.45em 0;
	border-bottom: 1px solid var(--qpl-line);
}
.qpl-li-name { flex: 1 1 auto; }
.qpl-li-price { font-weight: 600; color: var(--qpl-primary); white-space: nowrap; }
.qpl-remove {
	flex: 0 0 auto;
	border: none;
	background: transparent;
	color: var(--qpl-muted);
	font-size: 1.15em;
	line-height: 1;
	cursor: pointer;
	padding: 0 0.25em;
}
.qpl-remove:hover { color: var(--qpl-cta); }

.qpl-list-total { margin: 0 0 1em; font-weight: 600; color: var(--qpl-ink); }

/* ---------- actions (Place-Order button language) ---------- */

.qpl-list-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	align-items: center;
}
.qpl-btn {
	display: inline-block;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 100px;
	border: 2px solid var(--qpl-cta);
	background: var(--qpl-cta);
	color: var(--qpl-white);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.qpl-btn:hover { opacity: 0.9; color: var(--qpl-white); }
.qpl-btn-copy {
	background: transparent;
	color: var(--qpl-cta);
}
.qpl-btn-copy:hover { background: var(--qpl-cta); color: var(--qpl-white); opacity: 1; }
.qpl-btn-clear {
	background: transparent;
	border-color: var(--qpl-line);
	color: var(--qpl-muted);
}
.qpl-btn-clear:hover { border-color: var(--qpl-cta); color: var(--qpl-cta); opacity: 1; }

.qpl-email-note,
.qpl-list-note {
	margin: 0.9em 0 0;
	font-size: 0.85em;
	color: var(--qpl-muted);
}

.qpl-disclaimer {
	margin-top: 1.4em;
	font-size: 0.85em;
	color: var(--qpl-muted);
}