/* ═══════════════════════════════════════════════════════════════
   SOC Stripe — the little that is ours to style.

   Everything inside the Elements is Stripe's, reached through the
   Appearance API. What is left is the wallet buttons' spacing and the
   divider under them, and both are drawn from the theme's own tokens so
   the same file serves Sofa O'Clock and Nusa Home without a fork. The
   fallbacks are for the checkout being rendered somewhere the tokens
   have not loaded — never seen, but cheap.
   ═══════════════════════════════════════════════════════════════ */

.soc-stripe-express {
  margin: 0 0 20px;
}

.soc-stripe-express[hidden] {
  display: none !important;
}

/* The divider. A rule either side of the words, drawn with a flex row so
   it stays centred whatever the translation's length — "or pay with" is
   three words in English and one in German. */
.soc-stripe-express__divider {
  display:     flex;
  align-items: center;
  gap:         14px;
  margin:      20px 0 0;
}

.soc-stripe-express__divider::before,
.soc-stripe-express__divider::after {
  content:    "";
  flex:       1 1 auto;
  height:     1px;
  background: var(--c-border, #ebe5d9);
}

.soc-stripe-express__divider span {
  flex:            0 0 auto;
  font-family:     var(--font-main, inherit);
  font-size:       11px;
  font-weight:     500;
  letter-spacing:  0.12em;
  text-transform:  uppercase;
  color:           var(--c-text-light, #6e8286);
}

/* Stripe draws the buttons in an iframe of its own; this only reserves the
   room, so a slow wallet lookup does not shift the payment box downwards
   the moment it resolves. Matches Stripe's default 44px button height, which
   stripe.js deliberately does not override. */
#soc-stripe-express-buttons {
  min-height: 44px;
}

/* The error line, shared with the Payment Element below. */
.soc-stripe-errors:empty {
  display: none;
}

.soc-stripe-errors {
  margin:    10px 0 0;
  font-size: 12px;
  color:     var(--c-error, #b84d38);
}

/* ── Klarna instalment message ─────────────────────────────────────
   The sentence itself lives in Stripe's iframe and is styled through the
   appearance object; all that is left here is where it sits.

   Empty is the normal resting state, not a fault: Stripe renders nothing
   when no plan applies — above Klarna's ceiling, or in a country it does
   not serve — and an empty box with margins would leave a gap nobody can
   explain. */
.soc-stripe-message:empty {
  display: none;
}

.soc-stripe-message {
  margin: 10px 0 0;
}

/* On the product page the theme's own slot owns the spacing. */
.soc-product-financing.soc-stripe-message {
  margin: 0;
}

/* In the totals tables the message is a full-width row under the total. */
.soc-stripe-message-row > td {
  padding-top: 4px !important;
  border-top:  0 !important;
}

.soc-stripe-message-row .soc-stripe-message {
  margin: 0;
}