/* ── Stripe type buttons ─────────────────────────── */
.stripe-btn {
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;
  background:rgba(5,8,16,.75);
  border:1px solid rgba(255,255,255,.1);
  border-radius:4px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;color:rgba(240,237,232,.7);
  cursor:pointer;transition:border-color .2s,color .2s,background .2s;
}
.stripe-btn:hover{border-color:rgba(200,168,75,.4);color:var(--accent,#c8a84b)}
.stripe-btn.active{border-color:var(--accent,#c8a84b);background:rgba(200,168,75,.1);color:var(--accent,#c8a84b)}

/* ── Canvas MUST never cover UI panels ──────────────
   canvas-wrap z-index:20, right-panel z-index:50
   Canvas pointer-events:none so clicks pass through
   BUT on mobile our 100vw width makes canvas visual
   overlay confusing — keep canvas left-side only     */

/* ── Home: model must not cover START button ─────── */
.canvas-wrap.state-home {
  top: 30% !important;
  height: min(50vh, 420px) !important;
}

/* ── Mobile portrait (< 860px) ──────────────────── */
@media (max-width: 859px) {
  /* Customize: canvas stays left strip, do NOT use 100vw */
  .canvas-wrap.state-custom {
    left: 0 !important;
    top: 56px !important;
    bottom: 60px !important;
    width: 38% !important;
    max-width: 160px !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
  }
  .canvas-wrap.state-quote {
    left: 0 !important;
    top: 56px !important;
    bottom: 60px !important;
    width: 34% !important;
    max-width: 140px !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
  }
  /* Right panel already correct in configurator.css */
  /* Section drawer must cover full width on mobile */
  .section-drawer {
    left: 0 !important;
  }
}

/* ── Tablet (860px - 1024px) ─────────────────────── */
@media (min-width: 860px) and (max-width: 1024px) {
  .canvas-wrap.state-home {
    width: min(420px, 85vw) !important;
    height: min(58vh, 500px) !important;
    top: 32% !important;
  }
  .canvas-wrap.state-custom {
    left: calc(50% - 270px) !important;
    width: 200px !important;
    max-width: 200px !important;
  }
  .canvas-wrap.state-quote {
    left: calc(50% - 270px) !important;
    width: 175px !important;
    max-width: 175px !important;
  }
  .right-panel {
    left: calc(50% - 270px + 205px) !important;
    right: calc(50% - 270px) !important;
  }
  .quote-right-panel {
    left: calc(50% - 270px + 180px) !important;
    right: calc(50% - 270px) !important;
  }
}

/* ── 1600x2560 portrait totem ────────────────────── */
@media (min-width:1500px) and (min-height:2400px) {
  .ap-bg,.ap-bg-overlay{max-width:800px;left:50%;transform:translateX(-50%)}
  .ap-screen{max-width:800px;left:50%;transform:translateX(-50%)}
  .ap-loader{max-width:800px;left:50%;transform:translateX(-50%)}
  .canvas-wrap.state-home{width:min(640px,80vw) !important;height:min(60vh,1000px) !important;top:38% !important}
  .canvas-wrap.state-custom{left:calc(50% - 400px) !important;width:260px !important;max-width:260px !important}
  .canvas-wrap.state-quote{left:calc(50% - 400px) !important;width:230px !important;max-width:230px !important}
  .right-panel{left:calc(50% - 400px + 265px) !important;right:calc(50% - 400px) !important;top:70px !important;bottom:80px !important}
  .quote-right-panel{left:calc(50% - 400px + 240px) !important;right:calc(50% - 400px) !important;top:70px !important;bottom:80px !important}
  .section-drawer{left:calc(50% - 400px) !important;right:calc(50% - 400px) !important}
  .home-logo,.screen-logo,.home-slogan,.home-bottom,.bottom-nav,.success-wrap{max-width:800px;left:50% !important;transform:translateX(-50%)}
  .ap-cta-btn{font-size:18px;padding:18px 44px}
}

/* Home screen: increase model size by 50% */
.canvas-wrap.state-home {
  width: min(132vw, 600px) !important;
  height: min(75vh, 630px) !important;
  top: 32% !important;
}

/* Fix success screen buttons clickable */
#screen-success.active { pointer-events: auto !important; }
#screen-success.active .success-wrap { pointer-events: auto !important; }
#screen-success.active button { pointer-events: auto !important; cursor: pointer !important; }

/* Fix: background overlay must never intercept clicks */
.ap-bg-overlay { pointer-events: none !important; }
.ap-bg { pointer-events: none !important; }

/* Canvas wrap: pass pointer events to canvas for rotation */
.canvas-wrap.state-home,
.canvas-wrap.state-custom,
.canvas-wrap.state-quote {
  pointer-events: none !important;
}
.canvas-wrap.state-home #viewer-canvas,
.canvas-wrap.state-custom #viewer-canvas,
.canvas-wrap.state-quote #viewer-canvas {
  pointer-events: auto !important;
  cursor: grab !important;
}
.canvas-wrap.state-home #viewer-canvas:active,
.canvas-wrap.state-custom #viewer-canvas:active {
  cursor: grabbing !important;
}

/* Customize screen: increase 3D model container by ~10% */
.canvas-wrap.state-custom {
  width: 42% !important;
  max-width: 200px !important;
}
.canvas-wrap.state-quote {
  width: 38% !important;
  max-width: 176px !important;
}
.right-panel {
  left: 42% !important;
}
.section-drawer {
  left: 42% !important;
}

/* Tablet overrides */
@media (min-width: 860px) and (max-width: 1024px) {
  .canvas-wrap.state-custom {
    width: 210px !important;
    max-width: 210px !important;
  }
  .right-panel {
    left: calc(50% - 270px + 215px) !important;
  }
}