/* Shared geometry for every fixed bottom bar (sticky CTAs, build total, Add to
   Cart, order summary toggle) and the floating buttons that share that edge.
   Visual design stays in each component's own stylesheet; this file owns
   position, safe-area padding, show/hide transform, keyboard + dual-screen
   behaviour. public/js/mobile-cta.js feeds the --cta-* variables below. */

:root {
  --cta-bar-h: 0px;
  --cta-base-h: 0px;
  --cta-lift: 0px;
  --cta-pad-y: 12px;
  --cta-pad-x: 16px;
  --cta-tap: 44px;
  --cta-hide-shift: 24px;
  --cta-fab-gap: 32px;
  --cta-fab-right: 28px;
  --cta-safe-t: env(safe-area-inset-top, 0px);
  --cta-safe-r: env(safe-area-inset-right, 0px);
  --cta-safe-b: env(safe-area-inset-bottom, 0px);
  --cta-safe-l: env(safe-area-inset-left, 0px);
  --cta-edge: max(var(--cta-bar-h), var(--cta-safe-b));
}
@media (max-width: 640px) { :root { --cta-fab-gap: 16px; } }
@media (max-width: 480px) { :root { --cta-fab-right: 12px; } }

.cta-bar {
  position: fixed;
  top: auto;
  bottom: var(--cta-lift);
  inset-inline: 0;
  box-sizing: border-box;
  max-width: 100%;
  padding:
    var(--cta-pad-y)
    max(var(--cta-pad-x), var(--cta-safe-r))
    calc(var(--cta-pad-y) + var(--cta-safe-b))
    max(var(--cta-pad-x), var(--cta-safe-l));
  transform: translateY(calc(100% + var(--cta-hide-shift)));
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), opacity .25s ease;
  pointer-events: none;
}
.cta-bar:is(.show, .visible, .on, .is-on, .ink-bar-visible) {
  transform: translateY(0);
  pointer-events: auto;
}

.cta-bar.cta-bar--float {
  inset-inline: max(12px, var(--cta-safe-l)) max(12px, var(--cta-safe-r));
  bottom: calc(var(--cta-lift) + 10px + var(--cta-safe-b));
  padding: 10px 10px 10px 16px;
  transform: none;
  pointer-events: auto;
}
.cta-bar.cta-bar--float.cta-stacked {
  bottom: calc(var(--cta-lift) + var(--cta-base-h) + 10px);
}

.cta-bar.cta-bar--fab {
  inset-inline: auto max(16px, var(--cta-safe-r));
  bottom: calc(var(--cta-lift) + 16px + var(--cta-safe-b));
  padding: 12px 18px;
  transform: none;
  pointer-events: auto;
}
.cta-bar.cta-bar--fab.cta-stacked {
  bottom: calc(var(--cta-lift) + var(--cta-base-h) + 16px);
}

html.cta-kbd .cta-bar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
}
html.cta-kbd .cta-bar:not(.cta-bar--float):not(.cta-bar--fab) {
  transform: translateY(calc(100% + var(--cta-hide-shift))) !important;
}

.cta-bar :is(.mobile-cta-btn, .sticky-mobile-btn, .mini-buy, .imt-jump, .gmf-mcta-btn, .ink-cta, .ink-bar-personalize) {
  min-height: var(--cta-tap);
  min-width: var(--cta-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.cta-bar.cta-bar--fab { min-height: var(--cta-tap); }

html body.has-cta-bar { padding-bottom: calc(var(--cta-bar-h) + var(--cta-lift)); }
html.has-cta-bar { scroll-padding-bottom: calc(var(--cta-bar-h) + var(--cta-lift) + 12px); }

.back-top {
  bottom: calc(var(--cta-edge) + var(--cta-lift) + var(--cta-fab-gap));
  right: max(var(--cta-fab-right), var(--cta-safe-r));
}

.ink-cart-toast,
.ink-toast {
  bottom: calc(var(--cta-edge) + var(--cta-lift) + 20px);
}

/* Dual-screen / foldable, side by side: keep each bar inside one segment (the
   second, which holds the page's main content). When the screens are stacked
   the bar already sits in the bottom segment at bottom:0. Media features are unknown on ordinary
   phones, so these blocks never apply there. */
@media (horizontal-viewport-segments: 2) {
  .cta-bar:not(.cta-bar--float):not(.cta-bar--fab) {
    inset-inline: auto;
    left: env(viewport-segment-left 1 0, 0px);
    width: env(viewport-segment-width 1 0, 100%);
    right: auto;
  }
  .cta-bar.cta-bar--float {
    inset-inline: calc(env(viewport-segment-left 1 0, 0px) + 12px) 12px;
  }
}
@media (max-width: 340px) {
  :root { --cta-pad-x: 12px; }
}