/* Apple Pay and Google Pay, above the PayPal buttons.

   Its own file because it sits on two pages with two stylesheets, and
   a shared look kept in one of them is how two stylesheets drift. The
   button itself is Apple's and styles itself; all that is here is the
   room it sits in and the rule underneath it. */

.aurelle-wallet[hidden] { display: none; }

/* Whatever ends up in here lines up with the PayPal buttons below it. */
.aurelle-wallet {
	display: block;
	width: 100%;
}

.aurelle-wallet apple-pay-button {
	display: block;
	width: 100%;
	--apple-pay-button-width: 100%;
	--apple-pay-button-height: 44px;
	--apple-pay-button-border-radius: 8px;
	--apple-pay-button-padding: 0;
}

/* The rule matters more than it looks. Without it the black button
   reads as a fourth PayPal button, and somebody who does not want
   Apple Pay hesitates over the whole block. With it the column says:
   this one, or one of these. */
.aurelle-wallet-or {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0;
	font-size: 11.5px;
	color: #8E9399;
}

.aurelle-wallet-or::before,
.aurelle-wallet-or::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(196, 129, 142, .24);
}

/* Google draws its own button too, and sizes it to the room it is
   given -- buttonSizeMode 'fill' in wallets.js is the other half of
   this rule. 'fill' means exactly that: the button takes the width and
   the height of what it is put in and nothing of its own, so the room
   has to be stated here, on the wrapper and on what Google put inside
   it. Left to itself it comes out narrower than the PayPal buttons
   below, and a payment button that does not line up with the others
   reads as something else rather than another way to pay. */
.aurelle-wallet-google {
	display: block;
	width: 100%;
	height: 44px;
}

.aurelle-wallet-google > *,
.aurelle-wallet-google button {
	width: 100%;
	min-width: 100%;
	height: 100%;
}

/* Only ever seen by somebody who asked for it with ?aurelle_wallets=1. */
.aurelle-wallet-why {
	margin: 0 0 6px;
	padding: 8px 10px;
	border: 1px dashed rgba(196, 129, 142, .5);
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.5;
	color: #6E6469;
	background: #fff;
}