/**
 * GreatQuick Topups - customer-entered amount.
 *
 * Kept out of gqtu-buybox.css so the custom-amount UI can be reverted or disabled without
 * touching a 31KB file that every product page depends on. Loaded after the buy box sheet,
 * so ties in specificity resolve here on source order.
 *
 * Class doubling (.x.x) is used wherever a rule has to beat the Elementor Kit, which styles
 * every button through .elementor-kit-15 button at (0,1,1). No !important anywhere.
 */

/* --------------------------------------------------------------- the card */

/* Layout C, narrow: the card is a wrapper with no chrome of its own in pill mode, so it
   steps out of the box tree entirely and lets the pill sit in the parent grid as one more
   cell. That gives it the same width and height as 20 USD and lets it fill the empty space
   on the last pill row rather than claiming a full row of its own. The panel stays a grid
   item and takes a full-width row underneath.

   display:contents is safe here precisely because .gqtu-card--pill already declares no
   background, no border and no box-shadow: there is no painted box to lose. Every rule that
   styles the pill or the panel is a descendant selector, so all of them still match. */
.gqtu-grid--pills .gqtu-card--custom {
	display: contents;
}

/* The flame-badge clearance on .gqtu-card--pill is not a constant: buybox.css sets
   padding-top:12px from 768px, and gqtu-product-mobile.css then zeroes it again up to
   879px, so the clearance only really exists from 880px. The custom pill carries no badge,
   so it needs no clearance of its own and only has to match whatever its row neighbours are
   doing. Measured on device rather than assumed: at 390px the neighbours sit at padding 0,
   so anything added here pushes the pill out of line by exactly that amount. */
.gqtu-grid--pills .gqtu-card--custom > .gqtu-pill.gqtu-pill {
	margin-top: 0;
}

.gqtu-grid--pills .gqtu-card--custom > .gqtu-custom__panel {
	grid-column: 1 / -1;
	margin-top: 4px;
}

/* Two modes, chosen in gqtu-buybox.js from the number of cells left free on the row after
   the fixed denominations. The starting column comes over in --gqtu-custom-col, because
   the grid is auto-fit and only the browser knows the resolved column count.

   is-field: room for the box itself, so it is drawn in place and the button never appears.
   is-button: room for a button only, so the box waits on the next line for a click. */
.gqtu-grid--pills .gqtu-card--custom.is-field > .gqtu-pill.gqtu-pill {
	display: none;
}

.gqtu-grid--pills .gqtu-card--custom.is-field > .gqtu-custom__panel {
	display: block;
	grid-column: var(--gqtu-custom-col, 1) / -1;
	margin-top: 0;
	align-self: center;
}

/* Both sides start at the top of the row. The panel is the control plus the hint beneath
   it, and the padding below mirrors the cards', so the input sits level with the buttons
   without the alignment depending on how tall the hint line happens to be. */
.gqtu-grid--pills .gqtu-card--pill,
.gqtu-grid--pills .gqtu-card--custom.is-field > .gqtu-custom__panel {
	align-self: start;
}

/* From 880px the fixed cards regain 12px of top padding for the flame badge, which shifts
   their pill down inside the card. The panel takes the same padding so its input keeps the
   same offset and the two stay level; below 880px that padding is zeroed on both. */
@media (min-width: 880px) {
	.gqtu-grid--pills .gqtu-card--custom.is-field > .gqtu-custom__panel {
		padding-top: 12px;
	}
}

.gqtu-grid--pills .gqtu-card--custom.is-button.is-selected > .gqtu-custom__panel {
	grid-column: 1 / -1;
	margin-top: 4px;
}

/* Rises into the space the button just left, so the swap reads as one movement rather than
   a disappearance followed by an appearance. Button mode only: in field mode the box is on
   screen from first paint, and animating it when the customer clicks into it would make it
   jump under the cursor. */
@keyframes gqtu-custom-reveal {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.gqtu-grid--pills .gqtu-card--custom.is-button.is-selected > .gqtu-custom__panel {
	animation: gqtu-custom-reveal 220ms ease-out both;
}

/* The display:contents rule above is (0,2,0) and outranks the plain .gqtu-card--offcur hide
   at (0,1,0), so an off-currency custom card would leak back into the grid on a
   multi-currency product. Restored explicitly. */
.gqtu-grid--pills .gqtu-card--custom.gqtu-card--offcur {
	display: none;
}

/* The fixed cards regain 12px of top padding from 880px up, to clear the flame badge.
   The custom pill has no badge and no card wrapper, so it matches that by hand or it
   rides 12px higher than its neighbours on the same row. Below 880px their padding is
   zeroed again by gqtu-product-mobile.css, which is why this is not simply always on. */
@media (min-width: 880px) {
	.gqtu-grid--pills .gqtu-card--custom > .gqtu-pill.gqtu-pill {
		margin-top: 12px;
	}
}

/* A dashed ring separates "type your own" from the fixed denominations without introducing
   a second accent colour. */
.gqtu-pill--custom.gqtu-pill--custom {
	background-image: none;
	background-color: transparent;
	border: 2px dashed var(--gqtu-field-border, #DDE5E5);
	color: var(--gqtu-title, #0F2A3C);
}

.gqtu-pill--custom.gqtu-pill--custom:hover {
	background-image: none;
	border-color: var(--gqtu-accent, #31E38D);
	color: var(--gqtu-title, #0F2A3C);
}

.gqtu-card--pill.is-selected .gqtu-pill--custom.gqtu-pill--custom {
	background-image: none;
	border-style: solid;
	border-color: var(--gqtu-accent, #31E38D);
	font-weight: 600;
}

/* ------------------------------------------------------------- the panel */

/* Layout C reveals the field only once Custom is chosen. Layout B has no shared selection
   step, so its card carries the field open from first paint.
   Keyed off the absence of is-selected rather than a JS-added hidden class, so the field is
   never briefly visible on first paint. */
.gqtu-card--custom.gqtu-card--pill .gqtu-custom__panel {
	display: none;
}

.gqtu-card--custom.gqtu-card--pill.is-selected .gqtu-custom__panel {
	display: block;
}

.gqtu-custom__panel {
	display: block;
}

.gqtu-custom__label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--gqtu-title, #0F2A3C);
}

/* Mirrors .gqtu-recipient__control: inset ring so focus can thicken 1px to 2px without
   moving a single pixel of layout. */
.gqtu-custom__control {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: var(--gqtu-field-h, 56px);
	padding: 0 calc(var(--gqtu-field-pad-x, 16px) - 2px);
	background-color: transparent;
	background-image: linear-gradient(var(--gqtu-panel, #F4F6F6), var(--gqtu-panel, #F4F6F6));
	background-origin: border-box;
	background-clip: padding-box;
	border: 2px solid transparent;
	border-radius: var(--gqtu-field-radius, 16px);
	box-shadow: none;
	transition: border-color var(--gqtu-transition, 160ms ease);
}

/* Deliberately not pinned to --gqtu-field-w here. Beside the pill the field should use the
   space the grid gives it, which is what the inline layout is for. */
@media (min-width: 768px) {
	.gqtu-custom__control {
		max-width: var(--gqtu-field-w, 300px);
	}
}

.gqtu-custom__control:focus-within {
	box-shadow: none;
	border-color: var(--gqtu-accent, #31E38D);
}

.gqtu-custom__cur {
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	color: var(--gqtu-muted, #738A8C);
	font-variant-numeric: tabular-nums;
}

/* Attribute selector plus class, matching the recipient input, so Kit and theme form rules
   are outranked without a doubled class or !important. */
.gqtu-buybox input[type='number'].gqtu-custom__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);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}

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

/* The greyed example figure. It is a placeholder and never a value, so it can never be
   bought: the field posts empty until the customer types. */
.gqtu-custom__input::placeholder {
	color: var(--gqtu-muted, #738A8C);
	font-weight: 400;
	opacity: 1;
}

/* The spinner arrows invite click-to-increment on a field where the customer should type a
   figure, and they crowd a 16px control on mobile. */
.gqtu-custom__input::-webkit-outer-spin-button,
.gqtu-custom__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Both lines below the field are inset by half the field corner radius, which lands them
   just inside where the rounded corner stops curving. Flush with the panel edge read as
   detached from the field, and the full text inset that lines them up under the currency
   code read as too far in.

   Half the radius token rather than a literal 8px, so the note follows the corner if that
   radius is ever retuned.

   The error replaces the hint in the same slot, so it takes the identical inset or the line
   would shift sideways the moment a value failed validation. */
.gqtu-custom__hint {
	margin: 8px 0 0;
	padding-left: calc(var(--gqtu-field-radius, 16px) / 2);
	font-size: 13px;
	line-height: 1.45;
	color: var(--gqtu-muted, #738A8C);
}

.gqtu-custom__error {
	margin: 8px 0 0;
	padding-left: calc(var(--gqtu-field-radius, 16px) / 2);
	font-size: 13px;
	line-height: 1.45;
	font-weight: 600;
	color: var(--gqtu-error, #D0342C);
}

.gqtu-custom__panel.is-invalid .gqtu-custom__control {
	box-shadow: none;
	border-color: var(--gqtu-error, #D0342C);
}

.gqtu-custom__panel.is-invalid .gqtu-custom__hint {
	display: none;
}

/* ------------------------------------------------- express and quantity */

/* Both are suppressed while Custom is the active choice.

   PayPal renders its button by measuring the container at render time, so this must never
   hide anything before that first render. It cannot: the class is only ever added by a
   selection event, and the custom card is never the preselected default. The button is
   measured while visible on first paint and only then hidden.

   Quantity goes too because a custom top-up is forced to one line server-side, so leaving
   the control on screen would offer a choice that is not honoured. */
body.gqtu-custom-active .gqtu-express,
body.gqtu-custom-active .ppc-button-wrapper,
body.gqtu-custom-active .ppcp-messages,
body.gqtu-custom-active .ppcp-button-apm {
	display: none;
}

body.gqtu-custom-active .gqtu-foot .gqtu-qty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.gqtu-custom__control {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gqtu-grid--pills .gqtu-card--custom.is-button.is-selected > .gqtu-custom__panel {
		animation: none;
	}
}

/* Removed from view, kept for assistive tech. The clip-path pair is the standard pattern:
   display:none or visibility:hidden would take it out of the accessibility tree too. */
.gqtu-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}