/*
Adds a PayPal payment module to the given DOM elements
See detailed documentation in Dev/mediawiki
*/

/* ---------- */
/* 0. General */

.pay-via-paypal-module {
	--blue-lightest: #f2f4ff;
	--blue-light: #bae1ff;
	--blue-bright: #32b1ff;
	--blue-bright2: #009eff;
	--blue-dark: #326d9e;
}

html.client-js .pay-via-paypal-module:not(.js-fully-loaded) {
	opacity: 0;
}

html.client-js .pay-via-paypal-module:not(.interval-selected):not(.paypal-interval-error) {
	height: 135px;
}

html.client-nojs .pay-via-paypal-module {
	border: 1px solid var(--blue-dark);
	padding: 0 15px;
	border-radius: 8px;
}

html.client-nojs .pay-via-paypal-module p {
	font-size: 14px !important;
}

html.client-nojs .pay-via-paypal-module p:first-child {
	font-size: 16px !important;
	color: var(--blue-dark) !important;
}

/* 0.1 Options */

.pay-via-paypal-module .options {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;	
}
	
.pay-via-paypal-module .options > span {
	padding: 4px 0;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
	display: block;
}

/* ---------------------- */
/* 1. Interval Navigation */

.pay-via-paypal-module .interval .options > span {
	border-radius: 8px 8px 0 0;
	background: var(--blue-dark);
	border: 1px solid var(--blue-dark);
	border-bottom: none;
	color: white;
	flex: calc( 33.33% - 6px );
}

.pay-via-paypal-module .interval .options > span:hover {
	background: var(--blue-bright);	
}

.pay-via-paypal-module .interval .options > span.active {
	background: white;
	color: var(--blue-dark);
}

/* -------- */
/* 2. Amout */

.pay-via-paypal-module .amount {
	border: 1px solid var(--blue-dark);
	border-width: 0 1px;
	padding: 15px 7px;
}

.pay-via-paypal-module .amount .options {
	gap: 6px;	
}

.pay-via-paypal-module .amount .options > span {
	border: 1px solid var(--blue-dark);
	color: var(--blue-dark);
	border-radius: 6px;
	background: var(--blue-lightest);
	flex: calc( 33.33% - 12px );
}

.pay-via-paypal-module:not(.interval-selected) .amount .options > span {
	display: none;
}
	
.pay-via-paypal-module .amount .options > span:before {
	content: '$';
	display: inline-block;
	margin-right: 2px;
}

.pay-via-paypal-module .amount .options > span:hover {
	background: var(--blue-light);
}

.pay-via-paypal-module .amount .options > span.active {
	background: var(--blue-light);
	color: var(--blue-dark);
	outline: 2px solid var(--blue-dark);
	font-weight: bold;
}

.pay-via-paypal-module .amount .options > span input {
	width: calc( 100% - 35px );
	text-align: center;
	border-radius: 5px;
	background: white;
	border: 1px solid var(--blue-dark);
	height: 25px;
	position: relative;
	top: -2px;
}

.pay-via-paypal-module .amount .options > span.active input {
	background: white;
	outline: 1px solid var(--blue-dark);
}

.pay-via-paypal-module .amount .interval-hint {
	font-size: 18px;
	color: var(--blue-dark);
	text-align: center;
}

.pay-via-paypal-module.interval-selected .amount .interval-hint {
	display: none;
}

.pay-via-paypal-module .amount .interval-hint span {
	transform: scaleX(-1) rotate(-90deg) scale(1.5);
	display: inline-block;
	position: relative;
	top: -1px;
	left: -4px;
}

/* ---------------- */
/* 3. Submit Button */

.pay-via-paypal-module .submit {
	font-family: 'Roboto';
	display: block;
	width: 100%;
	text-align: center;
	padding: 4px 0;
	border-radius: 0 0 6px 6px;
	margin: 0 0 18px;
	background: var(--blue-bright);
	color: white;
	font-weight: bold;
	letter-spacing: 1px;
	font-size: 20px;
	cursor: pointer;
	border: 1px solid var(--blue-dark);
	border-top: none;
	font-weight: bold;
}

.pay-via-paypal-module .submit:hover {
	background: var(--blue-bright2);
}

.pay-via-paypal-module .submit > span {
	font-weight: normal;
}

/* ---------------- */
/* 4. Error Display */

.pay-via-paypal-module .amount .error,
.pay-via-paypal-module .interval .error {
	display: none;
	font-size: 16px;
	color: red;
	text-align: center;
	width: 100%;
}

.pay-via-paypal-module.paypal-amount-error .amount,
.pay-via-paypal-module.paypal-interval-error .interval {
	outline: 3px solid red;
	border-radius: 6px;
}

.pay-via-paypal-module.paypal-amount-error .amount .error,
.pay-via-paypal-module.paypal-interval-error .interval .error {
	display: block;
}

.pay-via-paypal-module.paypal-amount-error .amount .error {
	position: relative;
	top: 7px;
}

/*
[[Category:MultiWiki]]
*/