/* Longbow - reserve page, site additions.
   Kept out of reserve.css so the imported design files stay byte-identical
   and a future design re-import cannot clobber this.

   The design mocked card fields inline. These rules host Stripe's Payment
   Element in that same slot: the fields are individually iframed by Stripe
   (so no card number touches this document) but styled through the
   Appearance API in reserve.js to match the design's inputs. */

#stripeMount { min-height: 150px; }

/* Quiet placeholder while Stripe's iframes initialise, so the panel does
   not jump as the fields appear. */
.stripe.is-loading #stripeMount {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(48,48,46,.05) 0 38px,
      transparent 38px 52px
    );
}

@media (max-height: 880px) {
  #stripeMount { min-height: 130px; }
}

/* ---- Apple Pay / Google Pay row ------------------------------------- */
/* Hidden until Stripe reports a wallet is actually available on the
   device, so desktops without one never see an empty box or a dangling
   divider. */
.express { margin: 2px 0 14px; }
.express__or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cfg-mute);
}
.express__or::before,
.express__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cfg-line);
}

@media (max-height: 880px) {
  .express { margin-bottom: 11px; }
  .express__or { margin-top: 11px; }
}

/* The reservation type sits directly above the amount, as one visual block. */
.pay__sum--type{margin-bottom:0;border-bottom:0}
.pay__sum--type b{font-size:15px;letter-spacing:.01em;font-weight:400}