/*
 * Demo merchant shell only. This file intentionally duplicates the historical
 * fixture styles so /demo never consumes a 1Outlets-owned asset. The SDK's
 * shared payment-component defaults remain in yeahco-element.css.
 */
@import url("/1outlets-merchant/styles.css?v=20260815-mobile-frame-1");
@import url("/demo-brand.css?v=20260828-no-underline-1");

/* Demo merchant: allow the hosted provider view to use a tall device. */
.card-entry.is-content-flow {
  --frame-height: clamp(560px, calc(100dvh - 180px), 1040px);
  --entry-height: clamp(616px, calc(100dvh - 124px), 1096px);
}

/*
 * A hosted cashier uses its iframe viewport to choose its payment-mode grid.
 * Give it the complete desktop card width and reclaim only shell whitespace so
 * several modes are visible without hiding the merchant's own controls.
 */
@media (min-width: 651px) {
  .checkout-page {
    padding-block: 16px 34px;
  }

  .checkout-top {
    margin-bottom: 16px;
  }

  .demo-risk-notice {
    margin-bottom: 16px;
  }

  .pay-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pay-card > h1,
  .pay-card > .subtle,
  .pay-card > .section:nth-of-type(n + 3) {
    grid-column: 1 / -1;
  }

  /* The surrounding merchant header identifies this demo; retain the card
   * heading for screen readers without spending the first provider view on it. */
  .pay-card > h1,
  .pay-card > .subtle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .pay-card > .section:nth-of-type(-n + 2) {
    padding-block: 14px;
  }

  .pay-card > .section:nth-of-type(2) {
    border-left: 1px solid var(--line);
  }

  /* Put the provider's payment-mode chooser in the first desktop view. */
  .pay-card > .section:nth-of-type(3) {
    order: 1;
  }

  .pay-card > .section:nth-of-type(-n + 2) {
    order: 2;
  }

  .pay-card > .section:nth-of-type(n + 4) {
    order: 3;
  }

  .payment-stage {
    gap: 12px;
  }

  .card-entry {
    --frame-height: clamp(960px, calc(160dvh - 216px), 1100px);
    --entry-height: clamp(550px, calc(100dvh - 92px), 620px);
  }

  .card-entry iframe {
    left: 25%;
    width: 100%;
    transform: scale(.5);
  }
}

@media (max-width: 650px) {
  .card-entry {
    --frame-height: clamp(560px, calc(100dvh - 110px), 900px);
    --entry-height: clamp(616px, calc(100dvh - 54px), 956px);
  }

  .card-entry.is-content-flow {
    --frame-height: clamp(720px, calc(100dvh - 110px), 1080px);
    --entry-height: clamp(776px, calc(100dvh - 54px), 1136px);
  }

  .card-entry iframe {
    left: 0;
    width: 100%;
    transform: none;
  }
}

/* The control only collapses the local viewport; it never cancels or restarts a provider attempt. */
.card-entry-toggle {
  min-width: 44px;
  min-height: 44px;
  margin: -11px -5px -11px auto;
  padding: 8px;
  border: 0;
  color: var(--teal);
  background: transparent;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.card-entry-toggle:hover,
.card-entry-toggle:focus-visible {
  text-decoration: underline;
}

.card-entry.is-loaded.is-collapsed {
  height: 72px;
}

.card-entry.is-collapsed iframe {
  display: none;
}