/* CoActise 3D phone: the ONE phone visual for every CoActise page (sample B, midnight + glow).
   Phones are built by coactise-phone.js. This file styles only the phone itself and where it sits.
   It sets no section sizing: frames and fit belong to coactise-layout-system.css / coactise-layout-fit.js. */

.cx-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 34px 26px;
  perspective: 1500px;
}

.cx-rig {
  position: relative;
  width: 280px;
  height: 580px;
  zoom: .78;
  transform-style: preserve-3d;
  transform: rotateX(var(--cx-rx, 7deg)) rotateY(var(--cx-ry, 24deg)) rotateZ(var(--cx-rz, 2deg));
  transition: transform .25s ease-out;
}

.cx-floor {
  position: absolute;
  left: 50%;
  bottom: -26px;
  width: 300px;
  height: 46px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent);
  filter: blur(8px);
}

.cx-body {
  --f1: #2a2e30; --f2: #050606; --b1: #1c1f20; --b2: #050606;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.cx-glow {
  position: absolute;
  inset: 18px;
  border-radius: 60px;
  background: var(--acid, #b2ff34);
  opacity: .22;
  filter: blur(48px);
  transform: translateZ(-30px);
}

.light-section .cx-glow,
.is-light-section .cx-glow { opacity: .12; }

.cx-layer {
  position: absolute;
  inset: 0;
  border-radius: 46px;
  background: linear-gradient(135deg, var(--f1), var(--f2));
}

.cx-front {
  position: absolute;
  inset: 0;
  padding: 9px;
  border-radius: 46px;
  transform: translateZ(8.6px);
  background: linear-gradient(135deg, var(--f1), var(--f2));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .38), inset 0 0 0 5px rgba(0, 0, 0, .55);
}

.cx-back {
  position: absolute;
  inset: 0;
  border-radius: 46px;
  transform: translateZ(-8.6px) rotateY(180deg);
  background: linear-gradient(135deg, var(--b1), var(--b2));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25);
}

.cx-btn {
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--f2), var(--f1));
}

:is(.cx-screen,#cx-boost) {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 38px !important;
  background-color: #0b141a !important;
  background-image: radial-gradient(rgba(255,255,255,.035) 1.2px, transparent 1.4px) !important;
  background-size: 14px 14px !important;
  color: #e9edef !important;
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif !important;
  text-align: left !important;
}

:is(.cx-glare,#cx-boost) {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 24%, transparent 40%),
    linear-gradient(0deg, rgba(255,255,255,.04), transparent 30%) !important;
}

:is(.cx-island,#cx-boost) {
  position: absolute !important;
  left: 50% !important;
  top: 10px !important;
  z-index: 7 !important;
  width: 88px !important;
  height: 26px !important;
  transform: translateX(-50%) !important;
  border-radius: 20px !important;
  background: #000 !important;
}

:is(.cx-status,#cx-boost) {
  position: absolute !important;
  left: 26px !important;
  right: 26px !important;
  top: 14px !important;
  z-index: 5 !important;
  display: flex !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

:is(.cx-app,#cx-boost) {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

:is(.cx-brand,#cx-boost) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 46px !important;
  padding: 9px 12px !important;
  background: #202c33 !important;
  color: #e9edef !important;
  font-size: 12px !important;
}

:is(.cx-brand,#cx-boost) :is(i,#cx-boost) {
  display: block !important;
  flex: 0 0 auto !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #b2ff34, #59ebdc) !important;
}

:is(.cx-brand,#cx-boost) :is(b,#cx-boost) {
  display: block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

:is(.cx-brand,#cx-boost) :is(span,#cx-boost) {
  display: block !important;
  color: #8696a0 !important;
  font-size: 12px !important;
}

:is(.cx-tabs,#cx-boost) {
  display: flex !important;
  gap: 6px !important;
  padding: 8px 10px 0 !important;
}

:is(.cx-tabs,#cx-boost) :is(button,#cx-boost) {
  appearance: none !important;
  padding: 6px 11px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #202c33 !important;
  color: #8696a0 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

:is(.cx-tabs,#cx-boost) :is(button.is-active,#cx-boost) {
  background: #103629 !important;
  color: #d9fdd3 !important;
}

:is(.cx-chat,#cx-boost) {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  padding: 10px 10px 14px !important;
  overflow: hidden !important;
}

:is(.cx-msg,#cx-boost) {
  position: relative !important;
  align-self: flex-start !important;
  max-width: 94% !important;
  padding: 7px 9px 5px !important;
  border-radius: 0 9px 9px 9px !important;
  background: #202c33 !important;
  color: #e9edef !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.35) !important;
}

:is(.cx-msg,#cx-boost)::before {
  content: "" !important;
  position: absolute !important;
  left: -7px !important;
  top: 0 !important;
  border: 7px solid transparent !important;
  border-top-color: #202c33 !important;
  border-right-color: #202c33 !important;
}

:is(.cx-msg,#cx-boost) :is(small,#cx-boost) {
  display: block !important;
  margin-bottom: 3px !important;
  color: #53bdeb !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

:is(.cx-msg,#cx-boost) :is(h3,#cx-boost) {
  margin: 0 0 4px !important;
  color: #e9edef !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

:is(.cx-msg,#cx-boost) :is(p,#cx-boost) {
  margin: 0 !important;
  color: #e9edef !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  white-space: pre-line !important;
}

:is(.cx-msg,#cx-boost) :is(.cx-quote,#cx-boost) {
  margin-top: 6px !important;
  padding-top: 6px !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  color: #aebac1 !important;
  font-size: 12px !important;
  font-style: italic !important;
}

:is(.cx-time,#cx-boost) {
  display: block !important;
  margin-top: 2px !important;
  color: #8696a0 !important;
  font-size: 12px !important;
  text-align: right !important;
}

:is(.cx-acts,#cx-boost) {
  align-self: flex-start !important;
  width: 94% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

:is(.cx-acts,#cx-boost) :is(button,#cx-boost) {
  appearance: none !important;
  width: 100% !important;
  padding: 10px 8px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #202c33 !important;
  color: #53bdeb !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.35) !important;
  cursor: pointer !important;
  transition: background .15s, transform .1s !important;
}

:is(.cx-acts,#cx-boost) :is(button,#cx-boost)::before {
  content: "\21A9" !important;
  margin-right: 7px !important;
  font-weight: 700 !important;
}

:is(.cx-acts,#cx-boost) :is(button:hover,#cx-boost) { background: #2a3942 !important; }
:is(.cx-acts,#cx-boost) :is(button:active,#cx-boost) { transform: scale(.98) !important; }

:is(.cx-out,#cx-boost) {
  position: relative !important;
  align-self: flex-end !important;
  max-width: 80% !important;
  padding: 7px 9px 5px !important;
  border-radius: 9px 0 9px 9px !important;
  background: #005c4b !important;
  color: #e9edef !important;
  font-size: 14px !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.35) !important;
}

:is(.cx-out,#cx-boost)::before {
  content: "" !important;
  position: absolute !important;
  right: -7px !important;
  top: 0 !important;
  border: 7px solid transparent !important;
  border-top-color: #005c4b !important;
  border-left-color: #005c4b !important;
}

:is(.cx-out,#cx-boost) :is(.cx-time,#cx-boost) { color: #9fd9cc !important; }

:is(.cx-ready,#cx-boost) {
  padding: 0 12px 14px !important;
  color: #8696a0 !important;
  font-size: 12px !important;
  text-align: center !important;
}


/* Where phones sit (position only; no sizing contract is touched). */
.delivery-lab { min-height: 600px; }

.delivery-lab > .cx-stage {
  position: absolute;
  right: 4%;
  top: 50%;
  z-index: 3;
  margin: 0;
  transform: translateY(-50%);
}

.form-shell > .cx-stage { margin-bottom: 4px; }

@media (max-width: 900px) {
  .delivery-lab { min-height: 0; }

  .delivery-lab > .cx-stage {
    position: relative;
    right: auto;
    top: auto;
    order: 2;
    margin: 8px auto;
    transform: none;
  }

  .cx-rig { --cx-ry: 14deg; --cx-rx: 5deg; }
}

@media (prefers-reduced-motion: no-preference) {
  .cx-rig.bob { animation: cx-bob 6s ease-in-out infinite; }
  @keyframes cx-bob { 50% { translate: 0 -10px; } }
}

:is(.cx-acts,#cx-boost) :is(button.is-active,#cx-boost) { background: #2a3942 !important; }

:is(.cx-chat,#cx-boost) > * { flex: 0 0 auto !important; }
:is(.cx-chat,#cx-boost) { padding-bottom: 8px !important; gap: 4px !important; }

.delivery-lab .cx-rig { zoom: .9; }

/* Business Control: the instrument column gets more width and holds visual + phone side by side,
   with only a small overlap, so no tile/label is ever hidden behind the phone. */
@media (min-width: 901px) {
  :is(.section-grid,#cx-boost):has(> .instrument:first-child > .cx-stage) { grid-template-columns: minmax(0, 1.2fr) minmax(400px, .8fr) !important; }
  :is(.section-grid,#cx-boost):has(> .instrument:last-child > .cx-stage) { grid-template-columns: minmax(400px, .8fr) minmax(0, 1.2fr) !important; }

  .instrument:has(> .cx-stage) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0;
  }

  .instrument:has(> .cx-stage) > :not(.cx-stage) { grid-column: 1; grid-row: 1; min-width: 0; width: 100%; }

  .instrument:has(> .cx-stage) > .cx-stage {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 0 12px;
    z-index: 3;
  }
}

/* The delivery lab is as tall as the phone needs (fixed, not a screen-height rule). */
#delivery-system .delivery-lab { min-height: 620px; }

:is(.cx-chat,#cx-boost) { justify-content: flex-start !important; }
:is(.cx-day,#cx-boost) { align-self: center !important; margin-bottom: 4px !important; padding: 3px 11px !important; border-radius: 8px !important; background: #182229 !important; color: #8696a0 !important; font-size: 12px !important; box-shadow: 0 1px 1px rgba(0,0,0,.35) !important; }

@media (min-width: 901px) {
  .instrument:has(> .cx-stage) > .cx-stage { padding: 8px 14px 26px; }
  .instrument:has(> .cx-stage) .cx-rig { zoom: .72; }
}

/* talk-to-us: the phone lives in the left column under the review, so the form stands alone on the right. */
.booking-copy .cx-stage { margin: 6px 0 0; justify-self: start; }
.booking-copy .cx-rig { zoom: .62; }

/* Business Control: with the phone beside the visual the text column is narrower, so its stat row
   must be allowed to shrink (1fr never goes below its content) and its numbers scale with their box. */
@media (min-width: 901px) {
  .section-grid:has(> .instrument > .cx-stage) .metric-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .section-grid:has(> .instrument > .cx-stage) .metric { min-width: 0; container-type: inline-size; }
  .section-grid:has(> .instrument > .cx-stage) .metric strong { font-size: clamp(1.25rem, 17cqw, 2.4rem) !important; }
}