/*
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]]
*/