/* PH PayPal Payments — sister checkout surface to PH Stripe.
   The visual tokens below intentionally mirror PH Stripe checkout.css.
   PayPal owns secure iframes and branded wallet controls; PH owns the shell. */

.phpp-payment-form {
  margin: 0;
}

.phpp-shell {
  max-width: 620px;
  padding: 18px 0 8px;
  color: #172033;
  box-sizing: border-box;
}

.phpp-shell *,
.phpp-express-shell *,
.phpp-shell *::before,
.phpp-shell *::after,
.phpp-express-shell *::before,
.phpp-express-shell *::after {
  box-sizing: border-box;
}

.phpp-shell--unified {
  max-width: 640px;
}

.phpp-unified-express,
.phpp-unified-payment {
  margin: 0 0 16px;
}

.phpp-unified-heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 10px;
}

.phpp-unified-heading strong {
  color: #172033;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 750;
}

/* Match PH Stripe's asynchronous Express Checkout reveal behavior. */
.phpp-unified-express.is-pending {
  position: absolute;
  left: -10000px;
  width: min(640px, calc(100vw - 32px));
  visibility: hidden;
  pointer-events: none;
  margin: 0;
}

.phpp-unified-express.is-available {
  position: static;
  left: auto;
  width: auto;
  visibility: visible;
  pointer-events: auto;
  margin: 0 0 16px;
}

.phpp-unified-express.is-unavailable {
  display: none;
}

.phpp-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-height: 48px;
}

.phpp-wallet-slot {
  width: 100%;
  min-width: 0;
  min-height: 48px;
}

.phpp-wallet-slot > paypal-button,
.phpp-wallet-slot > paypal-pay-later-button,
.phpp-wallet-slot > venmo-button,
.phpp-wallet-slot > apple-pay-button,
.phpp-wallet-slot > .phpp-google-pay,
.phpp-wallet-slot > .phpp-google-pay > div {
  display: block;
  width: 100%;
  min-height: 48px;
}

.phpp-wallet-slot apple-pay-button {
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 48px;
  --apple-pay-button-border-radius: 8px;
}

.phpp-google-pay,
.phpp-google-pay > div {
  width: 100%;
}

.phpp-google-pay button {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 8px !important;
}

.phpp-method-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: #667085;
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.phpp-method-divider::before,
.phpp-method-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

/* PayPal Card Fields do not ship a Payment Element tab surface, so PH creates
   the same Stripe tab visual while leaving the actual PCI inputs in PayPal. */
.phpp-card-method-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 14px;
}

.phpp-card-method {
  display: flex;
  align-items: center;
  min-height: 70px;
  padding: 12px 14px;
  border: 1px solid #d8e0e8;
  border-radius: 10px;
  background: #fff;
  color: #182433;
}

.phpp-card-method--selected {
  border-color: #0f6fde;
  box-shadow: 0 0 0 2px rgba(15, 111, 222, .10);
}

.phpp-card-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  margin-right: 8px;
  color: #0f6fde;
}

.phpp-card-method-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.phpp-card-method-label {
  color: #0f6fde;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
}

.phpp-card-fields {
  width: 100%;
}

.phpp-field-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.phpp-field-label {
  display: block;
  margin: 0 0 6px;
  color: #182433;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
}

.phpp-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .84fr);
  gap: 12px;
  margin-top: 12px;
}

/* Exact PH Stripe Appearance values: 1px #cbd5e1, 10px radius,
   13px/14px input padding, #0f6fde focus and 3px blue focus halo. */
.phpp-card-field {
  position: relative;
  width: 100%;
  height: 47px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.phpp-card-field:hover {
  border-color: #b8c4d1;
}

.phpp-field-group.is-focused .phpp-card-field,
.phpp-card-field:focus-within {
  border-color: #0f6fde;
  box-shadow: 0 0 0 3px rgba(15, 111, 222, .12);
}

.phpp-field-group.is-invalid .phpp-card-field {
  border-color: #c0392b;
}

.phpp-field-group.is-invalid.is-focused .phpp-card-field {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .10);
}

.phpp-card-field iframe,
.phpp-card-field > * {
  max-width: 100%;
}

.phpp-message {
  display: none;
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 14px;
  line-height: 1.45;
}

.phpp-message:not(:empty) {
  display: block;
}

.phpp-message-error,
.phpp-message.is-error {
  color: #8f1d18;
  border: 1px solid #f1b6b2;
  background: #fff1f0;
}

.phpp-message.is-ok {
  color: #174f82;
  border: 1px solid #b8d8f4;
  background: #eff8ff;
}

.phpp-is-loading,
.phpp-is-processing-card {
  cursor: wait !important;
  opacity: .7;
}

.phpp-payment-incomplete {
  cursor: not-allowed !important;
}

/* Standalone product/cart express surface. This does not alter the checkout
   parity surface because PH Stripe does not have an equivalent outer card. */
.phpp-express-shell {
  width: 100%;
  max-width: 640px;
  margin: 14px 0;
  padding: 18px;
  background: #fff;
  border: 1px solid #dce4ec;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .07);
  color: #172033;
}

.phpp-express-heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 12px;
}

.phpp-express-heading strong {
  color: #172033;
  font-size: 15px;
  font-weight: 750;
}

.phpp-express-heading span {
  color: #667085;
  font-size: 12.5px;
  line-height: 1.4;
}

.phpp-express-terms {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  color: #475467;
  font-size: 12.5px;
  line-height: 1.45;
}

.phpp-express-terms input { margin-top: 3px; }
.phpp-express-terms a { color: #1769c2; text-decoration: underline; }

/* Same anti-clipping defense used by PH Stripe for asynchronous payment SDKs. */
#phpp-payment-form,
#phpp-payment-form .phpp-shell,
#phpp-payment-form .phpp-unified-payment:not([hidden]),
#phpp-payment-form .phpp-card-field,
#phpp-payment-form .phpp-buttons {
  visibility: visible !important;
}

#phpp-payment-form .phpp-unified-payment:not([hidden]) {
  display: block !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.phpp-runtime-expanded {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 620px) {
  .phpp-buttons {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .phpp-card-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* PH Checkout uses a dark payment panel; retain its readable text tokens. */
body#checkout .ph-payment-choice .phpp-unified-heading strong,
body#checkout .ph-payment-choice .phpp-field-label {
  color: var(--ph-ink, #f3f6f5);
}
body#checkout .ph-payment-choice .phpp-method-divider {
  color: var(--ph-muted, #b0c0c4);
}