/*
 * Styles for the Whop adapter on the checkout pages (see checkout.js).
 * Numbers are the origin's own, measured with getComputedStyle at 1440px and
 * 390px on simplylushhair.net /order/1-bottle and /atf/order/1-bottle
 * (2026-10-06; identical on both families at both widths): inputs 50.28px
 * tall, 1px #cecccc border, 3px radius, text at 16px from the left edge,
 * Circular Std 17px/24.29px black, placeholder rgb(117,117,117). The two
 * families differ only in focus: /order/* draws no outline on a focused field,
 * /atf/order/* draws the ring below.
 */

.whx-rel { position: relative; }

/* Whop's frames draw a 44px box; they are laid over the page's own inputs. */
.whx-frame { position: absolute; height: 44px; z-index: 3; }

/* The expiry selects keep their layout space; one input-styled box spans them. */
html.whx [name='expirationMonth'],
html.whx [name='expirationYear'] { visibility: hidden; }

.whx-exp {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  border: 1px solid rgb(206, 204, 204);
  border-radius: 3px;
  background: rgb(255, 255, 255);
}
.whx-exp .whx-frame { left: 0; right: 0; width: auto; top: calc(50% - 22px); }
.whx-exp__ph {
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-family: 'Circular Std';
  font-size: 17px;
  line-height: 24.2857px;
  color: rgb(117, 117, 117);
  pointer-events: none;
}
.whx-exp.is-touched .whx-exp__ph { display: none; }

/* /atf/order/*: the "Checkout update (Sept 2026)" form rings a focused field
   (#checkout-form input:focus-visible, select:focus-visible: 2px solid
   #5794ae, offset 2px). The frames hold the focus, so the field under the
   focused frame, or the expiry box, wears the ring (checkout.js noteFocus). */
html.whx #checkout-form .whx-focus { outline: 2px solid rgb(87, 148, 174); outline-offset: 2px; }

/* PayPal cannot run on Whop: its container stays empty and takes no room. */
html.whx #paypal-button-container { display: none !important; }
/* In the wallet row it stays a 0-width flex item, as the origin's empty Apple
   and Google containers do beside PayPal: with all three items in the row, the
   two 6px gaps come off the wallet buttons, so one button is exactly PayPal's
   box (585.39px at 1440, 318px at 390) and two are 292.69px each at 1440. The
   empty items go last (`order`), as the origin's sit after PayPal, so a single
   button starts where PayPal's does. Tab order follows the DOM, not `order`. */
html.whx .whx-wallet-row > #paypal-button-container { display: block !important; flex: 0 1 auto !important; width: auto !important; min-width: 0; order: 1; }

/* The express block (label, buttons, OR) exists only where a wallet does.
   Same markup on both checkout families, outside the /atf <form>.
   Direct-child selectors only, so a .row that wraps more than the wallet row
   can never be hidden with it. */
html.whx:not(.whx-wallet) .row:has(> .col-xs-12 > .express-checkout),
html.whx:not(.whx-wallet) .row:has(> .col-xs-12 > #paypal-button-container),
html.whx:not(.whx-wallet) .row:has(> .col-xs-12 > #paypal-button-container) + .row:has(> .col-xs-12 > div > hr + span + hr),
html.whx:not(.whx-wallet) .row:has(> .col-xs-12 > #paypal-button-container) + p.payment_option { display: none; }

/* Wallet buttons take the PayPal button's place and size: one row, 48px
   buttons in a 53px row (PayPal's own container height), side by side. */
.whx-wallet-row { display: flex !important; flex-wrap: nowrap; gap: 6px; align-items: stretch; }
.whx-wallet-row > #apple-pay-button-container,
.whx-wallet-row > #google-pay-button-container { flex: 1 1 0 !important; min-width: 0; width: 100%; }
.whx-wallet-row > #apple-pay-button-container:empty,
.whx-wallet-row > #google-pay-button-container:empty { flex: 0 1 auto !important; width: auto; min-width: 0; order: 1; }

.whx-wallet-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 48px;
  margin: 0 0 5px;
  border: 0;
  border-radius: 4px;
  background: #000;
  color: #fff;
  font: 500 19px/1 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.whx-wallet-btn:disabled { opacity: 0.6; cursor: default; }

/* What the buyer reads: the saved-card disclosure and Whop's notice, at the end
   of the payment form (a second, untouched branding group — see checkout.js). */
.whx-branding { clear: both; flex: 0 0 100%; width: 100%; margin: 14px 0 4px; text-align: center; }
.whx-branding__note {
  margin: 0 0 6px;
  font-family: 'Circular Std', sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: rgb(127, 127, 127);
}
/* 28px: Whop's notice paints at 20px until it scrolls into view, then at
   28px; reserving 28px from the start keeps the page from shifting 8px. */
.whx-branding__slot { display: inline-block; min-width: 240px; min-height: 28px; }

/* Whop's required notice: off-stage, and on-screen above every modal only while
   Whop measures it at tokenisation (html.whx-confirming). Its text is blanked
   by the card frames' shared placeholder token, so the move is not seen. */
.whx-required { position: fixed; top: 0; left: -300vw; width: 300px; height: 24px; z-index: 2147483647; }
.whx-required__slot { width: 100%; height: 100%; }
html.whx-confirming .whx-required { top: auto; bottom: 12px; left: calc(50% - 150px); }