/* bd-paypal.css: the PayPal button's slot on the payment pages, and the card control beside it (owner, 2026-11-10).
   Loaded only while PayPal is on (includes/paypal.php; the service's account page). Design: docs/paywall/
   paypal-2026-11-10/DESIGN.md. Every rule is scoped to this file's own classes (.bd-pp, .bd-pp-cardlink,
   .bd-pp-cardsecond, set by bd-paypal.js), so it names no class of the payment screens' design and survives its rebuild.

   Order on the page (the templates' slot is between the wallet button and "Pay by card"):
     wallet on the device   [Apple Pay or Google Pay] [PayPal] "Pay by card" (a text link)
     no wallet              [PayPal] [Pay by card] (the second, outlined button)
   PayPal's button is PayPal's own (the SDK's <paypal-button>, gold, their mark); only its box is sized here: the height
   of the wallet button above it and the page's 3px corners. PayPal allows 25 to 55px of height.

   The two card-control looks are an override layer over whatever the page's design gives its "Pay by card" control, on
   purpose and only while PayPal's button is on screen; that is why their properties are !important. */

.bd-pp{display:block;margin:6px 0 0;padding:0}
.bd-pp[hidden]{display:none!important}
/* While PayPal loads, its height is held with the page's tint so the card control does not jump when it arrives. */
.bd-pp__mount{display:block;min-height:48px;border-radius:3px}
.bd-pp[data-bd-paypal-state="loading"] .bd-pp__mount{background:var(--tint,rgba(127,127,127,.14))}
.bd-pp[data-bd-paypal-state="busy"] .bd-pp__mount{opacity:.6;pointer-events:none}
.bd-pp paypal-button,.bd-pp .bd-pp__button{display:block;width:100%;height:48px;--paypal-button-border-radius:3px;border-radius:3px;cursor:pointer}
.bd-pp__note{margin:0;font:500 14px/20px var(--sans,"Libre Franklin",Arial,sans-serif);color:var(--error,#b3261e)}
.bd-pp__note:not(:empty){margin-top:8px;padding:8px 12px;border-left:3px solid var(--error,#b3261e);background:var(--tint,rgba(127,127,127,.14))}

/* Signed out on /subscribe/: PayPal needs the membership's address before it opens (bd-paypal.js askEmail). */
.bd-pp__email{margin:0 0 8px}
.bd-pp__label{display:block;font:700 13px/18px var(--sans,"Libre Franklin",Arial,sans-serif);color:var(--ink,inherit)}
.bd-pp__input{display:block;width:100%;height:48px;margin-top:6px;padding:0 12px;border:1px solid var(--line,currentColor);border-radius:3px;background:var(--field-bg,transparent);color:var(--ink,inherit);font:400 16px/1 var(--sans,"Libre Franklin",Arial,sans-serif);box-sizing:border-box}
.bd-pp__hint{margin:6px 0 0;font:400 13px/18px var(--sans,"Libre Franklin",Arial,sans-serif);color:var(--ink-3,inherit);opacity:.85}

/* "Pay by card" as a small text link: a wallet button and PayPal are above it (the owner's rule). The tap target stays
   44px tall; the text is the page's small-text link (bold, underlined). */
.bd-pp-cardlink{display:block!important;width:100%!important;height:auto!important;min-height:44px!important;margin:0!important;padding:13px 0!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  font-weight:700!important;font-size:13px!important;line-height:18px!important;letter-spacing:0!important;text-transform:none!important;
  text-align:center!important;text-decoration:underline!important;text-underline-offset:3px;cursor:pointer}
/* "Pay by card" as the second button: no wallet on the device, PayPal first (outlined, never the filled primary, so the
   two are not both the main action). */
.bd-pp-cardsecond{display:flex!important;align-items:center;justify-content:center;width:100%!important;height:48px!important;margin:10px 0 0!important;padding:0!important;
  border:0!important;border-radius:3px!important;background:transparent!important;box-shadow:inset 0 0 0 1px currentColor!important;
  font-weight:700!important;font-size:14px!important;line-height:20px!important;letter-spacing:.08em!important;text-transform:uppercase!important;
  text-decoration:none!important;cursor:pointer}
.bd-pp-cardlink[hidden],.bd-pp-cardsecond[hidden]{display:none!important}

@media (min-width:768px){
  .bd-pp{margin-top:10px}
  .bd-pp__mount{min-height:52px}
  .bd-pp paypal-button,.bd-pp .bd-pp__button{height:52px}
  .bd-pp-cardlink{font-size:14px!important;line-height:20px!important;padding:12px 0!important}
}

/* The paper design of the payment screens (the story's sheet, /subscribe/, /account/; .bd-pay): PayPal's button is the
   wallet button's size (50 px, 52 px from 768 px) with the same 8 / 10 px above it, and the card control beside it takes
   the page's ink (on a device without a wallet the page draws "Pay by card" as the filled main button; with PayPal
   first it is the outlined second one). */
.bd-pay .bd-pp{margin-top:8px}
.bd-pay .bd-pp__mount{min-height:50px}
.bd-pay .bd-pp paypal-button,.bd-pay .bd-pp .bd-pp__button{height:50px}
.bd-pay .bd-pp-cardlink,.bd-pay .bd-pp-cardsecond{color:var(--bdp-ink,inherit)!important}
.bd-pay .bd-pp-cardlink{margin-top:2px!important}
@media (min-width:768px){
  .bd-pay .bd-pp{margin-top:10px}
  .bd-pay .bd-pp__mount{min-height:52px}
  .bd-pay .bd-pp paypal-button,.bd-pay .bd-pp .bd-pp__button{height:52px}
}