/* CAMPAIGNFORGE_V90_SCROLL_ARROW_LABELS_CSS */

/* Desktop editor layout: keep the preview visible and scroll the side editors internally. */
@media (min-width: 1201px){
  .cf85 .app,
  .cf86 .app,
  .app{
    align-items:start!important;
  }

  .cf85 .left,
  .cf85 .right,
  .cf86 .left,
  .cf86 .right,
  .panel.left,
  .panel.right{
    position:sticky!important;
    top:92px!important;
    max-height:calc(100vh - 112px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
    -webkit-overflow-scrolling:touch!important;
    align-self:start!important;
  }

  .cf85 .stage,
  .cf86 .stage,
  .panel.stage{
    position:sticky!important;
    top:92px!important;
    align-self:start!important;
  }

  .cf85 .canvas-wrap,
  .cf86 .canvas-wrap,
  .canvas-wrap{
    max-height:calc(100vh - 260px)!important;
    overflow:auto!important;
  }

  .panel.left::-webkit-scrollbar,
  .panel.right::-webkit-scrollbar{
    width:10px;
  }

  .panel.left::-webkit-scrollbar-thumb,
  .panel.right::-webkit-scrollbar-thumb{
    background:#c7d4e8;
    border-radius:999px;
    border:3px solid #fff;
  }

  .panel.left::-webkit-scrollbar-track,
  .panel.right::-webkit-scrollbar-track{
    background:#f5f8fd;
    border-radius:999px;
  }
}

/* Tablet and mobile: normal stacked layout, no sticky side panels. */
@media (max-width: 1200px){
  .cf85 .app,
  .cf86 .app,
  .app{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }

  .cf85 .left,
  .cf85 .right,
  .cf85 .stage,
  .cf86 .left,
  .cf86 .right,
  .cf86 .stage,
  .panel.left,
  .panel.right,
  .panel.stage{
    position:relative!important;
    top:auto!important;
    max-height:none!important;
    overflow:visible!important;
    width:100%!important;
  }

  .panel.left{order:1!important;}
  .panel.stage{order:2!important;}
  .panel.right{order:3!important;}

  .canvas-wrap{
    max-height:none!important;
    overflow:auto!important;
  }

  #cf85-canvas,
  #cf86-canvas{
    max-width:100%!important;
    height:auto!important;
  }
}

@media (max-width: 760px){
  .cf85,
  .cf86{
    padding:14px 10px 50px!important;
  }

  .tms-nav{
    position:relative!important;
    height:auto!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    padding:12px!important;
  }

  .tms-links{
    width:100%!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    font-size:12px!important;
  }

  .hero{
    padding:26px 20px!important;
    border-radius:22px!important;
  }

  .hero h1{
    font-size:clamp(34px, 11vw, 48px)!important;
    line-height:.95!important;
  }

  .topbar,
  .actions,
  .stage-head,
  .sizebar,
  .grid2,
  .grid3,
  .grid4,
  .info-grid,
  .footer-inner{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  .panel{
    padding:14px!important;
    border-radius:18px!important;
  }

  .canvas-wrap{
    padding:10px!important;
    min-height:auto!important;
  }

  .steps{
    grid-template-columns:1fr 1fr!important;
  }
}

/* Advanced Editing labels: arrows instead of X and Y. */
.advanced-box .adv-control label,
.adv-control label{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  color:#64748b!important;
  font-weight:950!important;
  letter-spacing:.04em!important;
}

.advanced-box .adv-control label[title="Move left or right"],
.adv-control label[title="Move left or right"]{
  font-size:18px!important;
  color:#07194f!important;
}

.advanced-box .adv-control label[title="Move up or down"],
.adv-control label[title="Move up or down"]{
  font-size:18px!important;
  color:#07194f!important;
}