/* ============================================================================
   Payment-method picker rows — <select data-pv2-payopt>
   ----------------------------------------------------------------------------
   Shared by every surface that asks the customer how to pay: the invoices
   list's inline pay form, the invoice detail page, Upgrades, and the logged-in
   order form. Deliberately NOT scoped to body.pnv2 — the order form lives on
   sspanel.tpl, which is not a panel-v2 body, and the two have to look identical.

   Same shape as the server picker (.pv2-srvopt in panel-v2-core.css): glyph,
   method on line 1, a quiet line 2. Options come from ss_pay_option_*() in
   includes/functions.inc.php; the row is drawn by payOptionRow() in
   js/sspanel/payment-select.js.
   ============================================================================ */

.pv2-payopt { display: flex; align-items: center; gap: 11px; min-width: 0; line-height: 1.3; }
.pv2-payopt > i {
	width: 22px; flex: 0 0 22px; text-align: center;
	font-size: 18px; color: #8a8a8b;
}
.pv2-payopt .t { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.pv2-payopt .t b {
	display: block; font-size: 13px; font-weight: 600; color: inherit;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv2-payopt .t small {
	display: block; font-size: 11px; font-weight: 400; color: #888;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Card brands keep their own colour in every state — the brand mark IS the
   recognition cue, so unlike the risk glyphs in .pv2-iconopt it must not flip
   to gold on the highlighted row. */
.pv2-payopt > i.fa-cc-visa { color: #6d8ce8; }
.pv2-payopt > i.fa-cc-mastercard { color: #f0873b; }
.pv2-payopt > i.fa-cc-amex { color: #4f9be0; }
.pv2-payopt > i.fa-cc-discover { color: #f0a03f; }
.pv2-payopt > i.fa-cc-diners-club { color: #5aa9d9; }
.pv2-payopt > i.fa-cc-jcb { color: #cf6b6b; }
.pv2-payopt > i.fa-paypal { color: #4f9ee8; }
.pv2-payopt > i.fa-wallet { color: #5cb85c; }
.pv2-payopt > i.fa-user-shield { color: #b58ce0; }

/* Highlighted / selected row: lift the method name to gold, keep the meta line
   quiet — select2's own rule paints the whole option gold, which flattens the
   two-line row and loses the title-vs-meta hierarchy. */
.select2-results__option--highlighted .pv2-payopt .t b,
.select2-results__option[aria-selected="true"] .pv2-payopt .t b { color: #eaa824; }
.select2-results__option--highlighted .pv2-payopt .t small,
.select2-results__option[aria-selected="true"] .pv2-payopt .t small { color: #a9a9aa; }

.pv2-pay-dropdown .select2-results__option { padding: 7px 10px; }
.pv2-pay-dropdown .select2-results__option .pv2-payopt .t b { white-space: normal; }

/* The rendered rows are two lines, so the closed control needs the height.
   Keyed off the row itself (same :has() the server picker uses in
   panel-v2-core.css) because the bundled select2 build ignores
   containerCssClass.
   The long selector + !important are both load-bearing: four different sheets
   pin a one-line height on this exact element, the strongest being
   `.sspanel-page .panel .select2-container--default .select2-selection--single`
   in style.css at four classes, and every one of them crops the second line. */
body.sspanel-page .select2-container.select2-container--default .select2-selection--single:has(.pv2-payopt) {
	height: 46px !important;
	padding: 4px 8px !important;
	display: flex !important;
	align-items: center !important;
}
body.sspanel-page .select2-container.select2-container--default .select2-selection--single:has(.pv2-payopt) .select2-selection__rendered {
	line-height: 1.3 !important;
	padding-left: 0 !important;
	padding-right: 20px !important;
	flex: 1 1 auto;
	min-width: 0;
}
body.sspanel-page .select2-container.select2-container--default .select2-selection--single:has(.pv2-payopt) .select2-selection__arrow {
	height: 44px !important;
}