/* SurfGalleon — payment buttons.
 *
 * LFMTE's show_button_code() returns a <table> of merchant <form>s, each ending
 * in <input type="image"> pointing at the processor's own artwork. That artwork
 * is the small grey PayPal badge, which looks like a 2009 forum signature next
 * to the rest of this site and, worse, reads as untrustworthy precisely because
 * it looks bolted on.
 *
 * We cannot change what the form posts — that is the processor's contract and
 * forking it would break every merchant the owner has configured. So the form
 * stays exactly as LFMTE built it, and only its APPEARANCE changes:
 *
 *   · the real <input type="image"> is stretched over the whole button and made
 *     transparent, so it is still the thing being clicked. No JavaScript, no
 *     intercepted submit, nothing to go wrong with the money.
 *   · the visible button is the <form> itself, labelled through a CSS custom
 *     property the PHP helper sets (--pay-label), because the label text lives
 *     in PHP and the pseudo-element needs it in CSS.
 *
 * If several merchants are enabled the helper switches to .is-multi, which
 * keeps each processor's own artwork (you must be able to tell PayPal from
 * SolidTrustPay) and just tidies the surround.
 */

.sgpay {
  margin: 14px 0;
}

/* LFMTE wraps the buttons in a table. Undo that without touching the forms. */
.sgpay table,
.sgpay tbody,
.sgpay tr,
.sgpay td {
  display: block;
  width: auto;
  height: auto;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
}
.sgpay td:empty { display: none; }

/* ---- one merchant: our own button, wholesale ---- */
.sgpay.is-single form {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 240px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid #f5c76a;
  background: linear-gradient(180deg, #f3bd55, #dc9a2e);
  color: #22160a;
  font: 700 15px/1 system-ui, sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.sgpay.is-single form::before {
  content: '\2693';                 /* an anchor, not a processor's logo */
  font-size: 16px;
  opacity: .75;
}
.sgpay.is-single form::after {
  content: var(--pay-label, 'Pay securely');
}
.sgpay.is-single form:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.sgpay.is-single form:active { transform: translateY(0); filter: brightness(.97); }

/* The real button: invisible, on top, still the thing that gets clicked. */
.sgpay.is-single input[type="image"],
.sgpay.is-single input[type="submit"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}
/* Keyboard users must still see focus, since the visible button is a pseudo. */
.sgpay.is-single input[type="image"]:focus-visible + *,
.sgpay.is-single form:focus-within {
  outline: 2px solid #ffe08a;
  outline-offset: 3px;
}

/* ---- several merchants: keep their artwork, tidy the surround ---- */
.sgpay.is-multi td {
  display: inline-block;
  margin: 6px 10px 6px 0;
}
.sgpay.is-multi form {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: #16232a;
  border: 1px solid #2f4a54;
  transition: border-color .12s ease, transform .12s ease;
}
.sgpay.is-multi form:hover { border-color: #f0b64a; transform: translateY(-1px); }
.sgpay.is-multi input[type="image"] { display: block; max-height: 34px; width: auto; }

/* ---- the line under the button ---- */
.sgpay-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: #8296a0;
}
.sgpay-note strong { color: #cfe0e2; }

/* ---- LFMTE's own pages -------------------------------------------------
 *
 * upgrade.php is where memberships actually sell, and it calls
 * show_button_code() directly, so it has no .sgpay wrapper to hook. The theme
 * stamps the script name onto <body>, which is enough to reach it here without
 * patching a core file. Scoped tightly to that page so no other table is hit.
 * ----------------------------------------------------------------------- */
.sg-page-upgrade form[action*="paypal"],
.sg-page-upgrade form[action*="solidtrustpay"],
.sg-page-upgrade form[action*="payza"],
.sg-page-upgrade form[action*="stripe"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  margin: 8px auto 0;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid #f5c76a;
  background: linear-gradient(180deg, #f3bd55, #dc9a2e);
  color: #22160a;
  font: 700 14px/1 system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .12s ease, filter .12s ease;
}
.sg-page-upgrade form[action*="paypal"]::after,
.sg-page-upgrade form[action*="solidtrustpay"]::after,
.sg-page-upgrade form[action*="payza"]::after,
.sg-page-upgrade form[action*="stripe"]::after {
  content: 'Take this berth';
}
.sg-page-upgrade form[action*="paypal"]:hover,
.sg-page-upgrade form[action*="solidtrustpay"]:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.sg-page-upgrade form input[type="image"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ---- when the site cannot show a button at all ---- */
.sgpay-off {
  margin: 14px 0;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px dashed #2f4a54;
  color: #8296a0;
  font-size: 14px;
}