/**
 * GreatQuick Topups - recipient field variants.
 *
 * The base .gqtu-recipient rules live in gqtu-buybox.css and are shared by all four field
 * types unchanged, so a deposit email, address or ID field is the same control as the phone
 * field down to its height, radius, ring and focus behaviour. Nothing here overrides that
 * geometry: this sheet only adds what the wallet types introduced, namely the icon prefix,
 * the caution note, the network dropdown and the checkout summary rows.
 *
 * Loaded after gqtu-buybox.css on product pages and after gqtu-checkout.css on checkout, so
 * ties in specificity resolve here on source order.
 */

/* ------------------------------------------------------------- the prefix */

/* Phone keeps its flag and dial code. The other three take an inline SVG that inherits
   currentColor, sized to the same 24px box the flag occupies so the input text starts at
   exactly the same x on every product. */
.gqtu-recipient__prefix--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 0;
	color: var(--gqtu-muted, #738A8C);
}

.gqtu-recipient__prefix--icon svg {
	width: var(--gqtu-flag-size, 24px);
	height: var(--gqtu-flag-size, 24px);
	display: block;
}

/* ------------------------------------------------ the wallet field shape */

/* The control keeps the shared boxed treatment: ring, radius, background, icon prefix and
   divider, exactly as the phone field has. The only thing changed here is the width. A
   wallet address runs to 42 characters and the customer has to be able to read all of it
   back before sending funds somewhere unrecoverable, so these three take the full width of
   the column rather than the 300px a nine digit phone number needs. */
.gqtu-recipient--email .gqtu-recipient__control,
.gqtu-recipient--address .gqtu-recipient__control,
.gqtu-recipient--id .gqtu-recipient__control {
	width: 100%;
	max-width: none;
}

/* --------------------------------------------------------- the caution note */

.gqtu-recipient__hint {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--gqtu-muted, #738A8C);
}

.gqtu-recipient__hint-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--gqtu-warning, #E8830C);
}

.gqtu-recipient__hint-icon svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* The icon is centred on the first line while the text wraps on narrow screens, then both
   sit on one line from the point there is room for it. */
@media (min-width: 768px) {
	.gqtu-recipient__hint {
		align-items: center;
		white-space: nowrap;
	}

	.gqtu-recipient__hint-text {
		min-width: 0;
	}
}

/* ------------------------------------------------------------ the network */

/* ------------------------------------------------------- address + network */

/* One row holding the address and, where the coin has several chains, its network. The
   two are siblings inside __row rather than the network sitting in its own block below,
   so they share a baseline and a single line of vertical space.

   66/34 rather than a fixed pixel width so the split holds at any column width. min-width
   0 on both is what actually lets them shrink: a flex item defaults to min-width auto and
   would otherwise refuse to go narrower than a 42 character address, pushing the network
   out of the row entirely. */
.gqtu-recipient__row {
	display: flex;
	align-items: flex-end;
	gap: 12px;
}

.gqtu-recipient__field {
	flex: 1 1 auto;
	min-width: 0;
}

.gqtu-recipient--split .gqtu-recipient__field {
	flex: 0 1 66%;
}

.gqtu-recipient--split .gqtu-network {
	flex: 0 1 34%;
	min-width: 0;
}

/* The label wraps to two lines at narrow widths while its neighbour stays on one, which
   would knock the two controls out of alignment. A fixed label height keeps the controls
   level whatever the labels do. */
.gqtu-recipient__row .gqtu-recipient__label {
	display: block;
	height: 20px;
	margin-bottom: 8px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* The control normally pads its own contents, which left a 16px dead strip down each side
   that looked clickable and was not. The padding moves onto the select instead, so the
   element the customer can click is the whole visible field. */
.gqtu-network__control {
	padding: 0;
	overflow: hidden;
}

.gqtu-buybox select.gqtu-network__select {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-width: 0;
	margin: 0;
	padding: 0 40px 0 var(--gqtu-field-pad-x, 16px);
	border: 0;
	border-radius: inherit;
	background-color: transparent;
	box-shadow: none;
	font-family: var(--gqtu-font);
	font-size: 16px; /* keep at 16px or above: smaller makes iOS zoom on focus */
	font-weight: 600;
	line-height: 20px;
	color: var(--gqtu-title, #0F2A3C);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 22px center, right 17px center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.gqtu-buybox .gqtu-network__select.gqtu-network__select.gqtu-network__select:focus,
.gqtu-buybox .gqtu-network__select.gqtu-network__select.gqtu-network__select:focus-visible {
	outline: 0;
	border: 0;
	background-color: transparent;
	box-shadow: none;
}

/* The open list is drawn by the operating system, so how far this gets honoured varies by
   browser. Firefox and Chrome on Windows apply it, Safari ignores it. Harmless where it is
   ignored, and the closed field is padded by the rule above regardless. */
.gqtu-network__select option {
	padding: 8px 12px;
	color: var(--gqtu-title, #0F2A3C);
}

/* The empty first option is a prompt, not a choice, so it reads as placeholder text until
   the customer picks a real network. */
.gqtu-network__select:has(option[value=""]:checked) {
	color: var(--gqtu-muted, #738A8C);
	font-weight: 400;
}

.gqtu-network.is-invalid .gqtu-recipient__control {
	box-shadow: inset 0 0 0 2px var(--gqtu-error, #D0342C);
}

/* ------------------------------------------------------- checkout summary */

/* gqtu-checkout.css hides every .wc-block-components-product-details list wholesale, which
   also buried the recipient row that the same sheet styles as a white card further up. The
   list is shown again here, and the card is drawn on the container rather than on each row,
   so an address and its network read as one block instead of two stacked panels. */
.wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-product-details.wc-block-components-product-details {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	position: relative;
	margin: 10px 0 0;
	padding: 12px 14px 10px;
	background: #FFFFFF;
	border-radius: 14px;
}

/* Blocks emits a second, separate list holding the raw pa_currency and pa_amount rows. It
   is matched by what it contains rather than by hiding its rows one at a time, so it does
   not leave an empty white card behind. */
.wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-product-details.wc-block-components-product-details:has(.wc-block-components-product-details__currency),
.wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-product-details.wc-block-components-product-details:has(.wc-block-components-product-details__amount),
.wc-block-checkout .wc-block-components-order-summary-item .wc-block-components-product-details.wc-block-components-product-details:has(.wc-block-components-product-details__recipient-mobile) {
	display: none;
}

.wc-block-checkout .wc-block-components-product-details > span {
	display: block;
}

.wc-block-checkout .wc-block-components-product-details > span + span {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--gqtu-field-border, #DDE5E5);
}

/* Blocks joins the rows with an aria-hidden " / " separator, which only makes sense while
   they sit inline. Stacked, it reads as a stray slash under the address. */
.wc-block-checkout .wc-block-components-product-details span[aria-hidden="true"] {
	display: none;
}

.wc-block-checkout .wc-block-components-product-details__name {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	font-weight: 400;
	color: var(--gqtu-muted, #738A8C);
}

/* Small and clipped to a single line. A 42 character address wrapped to three lines pushed
   the totals off the first screen, and the customer has the edit link beside it if the
   truncated form is not enough to check against. */
.wc-block-checkout .wc-block-components-product-details__value {
	display: block;
	margin: 2px 0 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gqtu-title, #0F2A3C);
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* The summary row is flex with its thumbnail centred, which was right when the description
   was a single line. With the details card beside it the thumbnail floated to the middle of
   a tall block, so both sides start at the top instead. */
.wc-block-checkout .wc-block-components-order-summary-item {
	align-items: flex-start;
	flex-wrap: wrap;
}

/* ------------------------------------------------------------- edit link */

/* Appended by gqtu-checkout.js. There is no cart step in this flow, so the product page is
   the only place the address can be corrected. */
/* Deliberately identical to .gqtu-sumphone__edit on the mobile number row: same 22px box,
   same 18px glyph, same deep green, same hover fade. The two rows sit in the same panel,
   so any difference between them reads as a mistake. */
.gqtu-summary__edit {
	position: absolute;
	right: 14px;
	bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--gqtu-btn-bg-hover, #0B7A4B);
	background: none;
	border: 0;
	text-decoration: none;
}

.gqtu-summary__edit:hover,
.gqtu-summary__edit:focus-visible {
	opacity: .72;
	text-decoration: none;
}

.gqtu-summary__edit svg {
	width: 18px;
	height: 18px;
	display: block;
	flex: 0 0 auto;
}

/* ------------------------------------------------------ title and amount */

/* The class is added by gqtu-checkout.js to whichever element holds the product name, so
   this rule does not depend on a Blocks internal class name staying put. */
.wc-block-checkout .gqtu-summary__head {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

/* The denomination in the product's own currency. LKR products never reach this rule: the
   script skips them, so the figure can never restate the subtotal. */
.gqtu-summary__denom {
	display: inline-block;
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--gqtu-muted, #738A8C);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* The collapsed summary header carries the order total so there is something to read while
   the panel is shut. Once it is open the same figure is sitting a few rows below as the
   Total, so the header copy is dropped. Keyed off the component's own aria-expanded
   state, which means no script and no risk of the two falling out of step. */
.wc-block-checkout .wc-block-components-checkout-order-summary__title[aria-expanded="true"] .wc-block-components-checkout-order-summary__title-price {
	display: none;
}

/* The edit link is the icon alone, matching the mobile number row. The wording lives on the
   link's aria-label and title instead of on screen. */
.gqtu-summary__edit svg {
	width: 18px;
	height: 18px;
	display: block;
	flex: 0 0 auto;
}

/* The shared rule that strips a recipient input back to bare text is written as
   .gqtu-buybox input[type='tel'].gqtu-recipient__input, so it only ever matched the phone
   field. The wallet types render as text and email inputs and were therefore still
   carrying the theme's own bordered box inside the control, which is what stayed visible
   after the container's ring was removed. Same treatment, same specificity shape, for the
   two remaining input types. */
.gqtu-buybox input[type='text'].gqtu-recipient__input,
.gqtu-buybox input[type='email'].gqtu-recipient__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: auto;
	padding: 0 0 0 var(--gqtu-field-pad-x, 16px);
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--gqtu-font);
	font-size: 16px; /* keep at 16px or above: smaller makes iOS zoom on focus */
	font-weight: 600;
	line-height: 20px;
	color: var(--gqtu-title, #0F2A3C);
}

/* No underline and no bottom padding: the control's own ring already says where the field
   is and what state it is in, and the padding was pushing the text off centre. */
.gqtu-buybox input[type='text'].gqtu-recipient__input:focus,
.gqtu-buybox input[type='text'].gqtu-recipient__input:focus-visible,
.gqtu-buybox input[type='email'].gqtu-recipient__input:focus,
.gqtu-buybox input[type='email'].gqtu-recipient__input:focus-visible {
	outline: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* The edit icon is taken out of flow and pinned to the bottom right, so it no longer adds
   an empty row under the card. Only the last row can reach that corner, so that row is the
   one given clearance; reserving it on every row would needlessly narrow the address. */
.wc-block-checkout .wc-block-components-product-details > span:last-of-type {
	padding-right: 34px;
}

/* ------------------------------------------- order summary vertical rhythm */

/* Blocks wraps each part of the summary (cart items, coupon, subtotal, fee, total) in its
   own ...-order-summary-*-block element carrying margin: 4px 0, while the title sits above
   with none of its own. Measured, that gave 8 / 4 / 4 / 4 / 20 between the blocks, which
   reads as an arbitrary rhythm rather than a designed one.

   Setting the margin once on the shared parent's children evens all of them at a stroke:
   adjacent block margins collapse, so 8px top and bottom yields 8px between every pair
   rather than 16. Done here rather than per block so a future Blocks release adding a new
   summary section inherits the same spacing. */
.wc-block-checkout .wc-block-components-checkout-order-summary__content > * {
	margin-top: 8px;
	margin-bottom: 8px;
}

/* The first block's own 8px padding already supplies the gap under the title, so its
   margin is dropped rather than doubled up. Overriding that padding means outspecifying a
   Blocks rule for no gain, since the measured result is identical either way. */
.wc-block-checkout .wc-block-components-checkout-order-summary__content > *:first-child {
	margin-top: 0;
}

/* Subtotal, fee and total are nested one level deeper, inside the totals block, where they
   carry their own 4px and the wrapper adds 16px underneath. Brought onto the same 8px so
   the totals read as part of one rhythm rather than a tighter group. */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block {
	padding-bottom: 0;
}

.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block > * {
	margin-bottom: 8px;
}

.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block > *:last-child {
	margin-bottom: 0;
}

/* .gqtu-recipient.is-invalid targets every control inside the wrapper, which now includes
   the network dropdown. The address is the field that failed, so the dropdown is put back
   to its resting ring unless its own block is flagged. */
.gqtu-recipient.is-invalid .gqtu-network .gqtu-recipient__control {
	box-shadow: inset 0 0 0 1px var(--gqtu-field-border, #DDE5E5);
}

.gqtu-recipient .gqtu-network.is-invalid .gqtu-recipient__control {
	box-shadow: inset 0 0 0 2px var(--gqtu-error, #D0342C);
}