/* ============================================================
   CodeStan — YOUR DIGITAL PLAN (marketplace discovery layer)
   Floating plan indicator · drawer · add-on chips · custom
   requirements · fly-to-plan motion. Shared by /marketplace
   and the four product pages. CodeStan green only.
   ============================================================ */

:root{
  --cpl-green:#a2faa3;
  --cpl-ink:#0b0e0c;
  --cpl-line:rgba(162,250,163,.16);
}

/* ---------------- floating indicator ---------------- */
.cpl-tab{
  position:fixed; bottom:24px; inset-inline-start:24px; z-index:800;
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:14px; cursor:pointer;
  background:rgba(14,18,15,.96); color:#e9f5ea;
  border:1px solid var(--cpl-line);
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  font:600 13px/1.1 "Archivo","Cairo",sans-serif; letter-spacing:.02em;
  transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
}
.cpl-tab:hover{ transform:translateY(-2px); border-color:rgba(162,250,163,.45); box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 24px rgba(162,250,163,.08); }
.cpl-tab:focus-visible{ outline:2px solid var(--cpl-green); outline-offset:3px; }
.cpl-tab svg{ width:18px; height:18px; stroke:var(--cpl-green); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.cpl-tab .cpl-tab-txt{ display:flex; flex-direction:column; gap:3px; text-align:start; }
.cpl-tab .cpl-tab-sub{ font-size:11px; font-weight:500; color:rgba(233,245,234,.55); }
.cpl-tab .cpl-count{
  min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cpl-green); color:var(--cpl-ink);
  font-size:11px; font-weight:800;
}
.cpl-tab .cpl-count[hidden]{ display:none; }
.cpl-tab.is-pulse{ animation:cplPulse .6s cubic-bezier(.22,1,.36,1); }
@keyframes cplPulse{
  0%{ box-shadow:0 0 0 0 rgba(162,250,163,.45); }
  100%{ box-shadow:0 0 0 18px rgba(162,250,163,0); }
}

/* mobile — bottom sticky bar */
@media (max-width:860px){
  .cpl-tab{
    inset-inline:12px; bottom:12px; justify-content:space-between;
    padding:13px 16px; border-radius:16px;
  }
  .cpl-tab .cpl-tab-txt{ flex:1; }
  body.cpl-bar-on .wa-float{ bottom:84px !important; }
}

/* ---------------- fly-to-plan clone ---------------- */
.cpl-fly{
  position:fixed; z-index:1300; width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(14,18,15,.95); border:1px solid rgba(162,250,163,.5);
  pointer-events:none; will-change:transform,opacity;
  transition:transform .7s cubic-bezier(.5,-0.1,.2,1), opacity .7s;
}
.cpl-fly svg{ width:20px; height:20px; stroke:var(--cpl-green); fill:none; stroke-width:1.7; }

/* ---------------- overlay + drawer ---------------- */
.cpl-overlay{
  position:fixed; inset:0; z-index:940; background:rgba(4,6,5,.6);
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.cpl-overlay.is-open{ opacity:1; pointer-events:auto; }
.cpl-panel{
  position:fixed; top:0; bottom:0; inset-inline-end:0; z-index:950;
  width:min(460px, 100vw); display:flex; flex-direction:column;
  background:#0c100d; border-inline-start:1px solid var(--cpl-line);
  transform:translateX(105%); transition:transform .5s cubic-bezier(.22,1,.36,1);
  box-shadow:-30px 0 80px rgba(0,0,0,.5);
}
[dir="rtl"] .cpl-panel{ transform:translateX(-105%); box-shadow:30px 0 80px rgba(0,0,0,.5); }
.cpl-panel.is-open{ transform:translateX(0) !important; }
@media (max-width:860px){
  .cpl-panel{
    top:auto; inset-inline:0; width:100%; max-height:88vh;
    border-inline-start:none; border-top:1px solid var(--cpl-line);
    border-radius:22px 22px 0 0;
    transform:translateY(105%) !important;
  }
  [dir="rtl"] .cpl-panel{ transform:translateY(105%) !important; }
  .cpl-panel.is-open{ transform:translateY(0) !important; }
}

.cpl-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:22px 22px 16px; border-bottom:1px solid rgba(162,250,163,.1);
}
.cpl-head h3{ margin:0 0 4px; font-size:19px; font-weight:800; color:#f2f8f2; letter-spacing:-.01em; }
.cpl-head p{ margin:0; font-size:12.5px; color:rgba(233,245,234,.55); }
.cpl-close{
  width:34px; height:34px; flex:none; border-radius:10px; cursor:pointer;
  background:rgba(162,250,163,.06); border:1px solid rgba(162,250,163,.14);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s, background .3s;
}
.cpl-close:hover{ border-color:rgba(162,250,163,.4); background:rgba(162,250,163,.1); }
.cpl-close svg{ width:15px; height:15px; stroke:#dfeee0; stroke-width:2; fill:none; stroke-linecap:round; }

.cpl-body{ flex:1; overflow-y:auto; padding:18px 22px 8px; scrollbar-width:thin; scrollbar-color:rgba(162,250,163,.25) transparent; }
.cpl-body::-webkit-scrollbar{ width:5px; }
.cpl-body::-webkit-scrollbar-thumb{ background:rgba(162,250,163,.2); border-radius:3px; }

.cpl-sec{ margin-bottom:22px; animation:cplIn .45s cubic-bezier(.22,1,.36,1) both; }
.cpl-sec:nth-child(2){ animation-delay:.05s; } .cpl-sec:nth-child(3){ animation-delay:.1s; }
.cpl-sec:nth-child(4){ animation-delay:.15s; } .cpl-sec:nth-child(5){ animation-delay:.2s; }
@keyframes cplIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.cpl-sec-t{
  display:flex; align-items:center; gap:8px; margin:0 0 10px;
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(162,250,163,.75);
}
.cpl-sec-t::after{ content:""; flex:1; height:1px; background:rgba(162,250,163,.12); }

/* primary / exploring items */
.cpl-item{
  display:flex; align-items:center; gap:12px; padding:13px 14px;
  border:1px solid rgba(162,250,163,.18); border-radius:14px;
  background:rgba(162,250,163,.04); margin-bottom:8px;
}
.cpl-item.is-explore{ border-style:dashed; background:transparent; }
.cpl-item-ic{
  width:36px; height:36px; flex:none; border-radius:10px;
  background:rgba(162,250,163,.1); display:flex; align-items:center; justify-content:center;
}
.cpl-item-ic svg{ width:18px; height:18px; stroke:var(--cpl-green); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.cpl-item-info{ flex:1; min-width:0; }
.cpl-item-info strong{ display:block; font-size:13.5px; color:#eef6ee; font-weight:700; }
.cpl-item-info span{ display:block; font-size:11px; color:rgba(233,245,234,.5); margin-top:2px; }
.cpl-item-act{ display:flex; gap:6px; flex:none; }
.cpl-mini{
  padding:7px 11px; border-radius:9px; cursor:pointer; font:600 11px "Archivo","Cairo",sans-serif;
  background:transparent; color:var(--cpl-green); border:1px solid rgba(162,250,163,.3);
  transition:background .3s, border-color .3s;
}
.cpl-mini:hover{ background:rgba(162,250,163,.1); border-color:rgba(162,250,163,.55); }
.cpl-mini.is-ghost{ color:rgba(233,245,234,.6); border-color:rgba(233,245,234,.14); }
.cpl-mini.is-ghost:hover{ color:#f2f8f2; border-color:rgba(233,245,234,.3); background:rgba(255,255,255,.03); }
.cpl-mini:focus-visible{ outline:2px solid var(--cpl-green); outline-offset:2px; }

/* add-on chips */
.cpl-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cpl-chip{
  display:inline-flex; align-items:center; gap:7px; padding:9px 13px;
  border-radius:11px; cursor:pointer; font:600 12px "Archivo","Cairo",sans-serif;
  background:transparent; color:rgba(233,245,234,.75);
  border:1px solid rgba(233,245,234,.16);
  transition:all .3s cubic-bezier(.22,1,.36,1);
}
.cpl-chip::before{
  content:""; width:14px; height:14px; border-radius:5px; flex:none;
  border:1.5px solid rgba(233,245,234,.3); transition:all .3s;
  background:transparent; background-position:center; background-repeat:no-repeat;
}
.cpl-chip:hover{ border-color:rgba(162,250,163,.4); color:#f2f8f2; }
.cpl-chip.is-on{
  background:rgba(162,250,163,.1); border-color:rgba(162,250,163,.5); color:var(--cpl-green);
}
.cpl-chip.is-on::before{
  border-color:var(--cpl-green); background-color:var(--cpl-green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0e0c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-11'/%3E%3C/svg%3E");
  background-size:10px;
}
.cpl-chip:focus-visible{ outline:2px solid var(--cpl-green); outline-offset:2px; }

/* custom requirements */
.cpl-req{
  padding:12px 14px; border:1px solid rgba(233,245,234,.12); border-radius:12px;
  margin-bottom:8px; background:rgba(255,255,255,.02);
}
.cpl-req strong{ display:block; font-size:13px; color:#eef6ee; font-weight:700; }
.cpl-req p{ margin:4px 0 8px; font-size:12px; color:rgba(233,245,234,.55); line-height:1.5; }
.cpl-req .cpl-item-act{ justify-content:flex-end; }

/* architecture mini visual */
.cpl-arch{ padding:6px 0 2px; }
.cpl-arch svg{ width:100%; height:auto; display:block; }
.cpl-arch .cpl-node-lbl{ font:700 8.5px "Archivo","Cairo",sans-serif; letter-spacing:.1em; fill:rgba(233,245,234,.55); text-transform:uppercase; }
.cpl-arch .cpl-node-c{ fill:#0c100d; stroke:rgba(233,245,234,.25); stroke-width:1.2; }
.cpl-arch .cpl-node.on .cpl-node-c{ stroke:var(--cpl-green); filter:drop-shadow(0 0 6px rgba(162,250,163,.35)); }
.cpl-arch .cpl-node.on .cpl-node-lbl{ fill:var(--cpl-green); }
.cpl-arch .cpl-link{ stroke:rgba(233,245,234,.18); stroke-width:1.2; fill:none; }
.cpl-arch .cpl-link.on{ stroke:var(--cpl-green); stroke-dasharray:4 5; animation:cplFlow 1.4s linear infinite; }
@keyframes cplFlow{ to{ stroke-dashoffset:-9; } }

/* summary */
.cpl-summary{
  border:1px solid rgba(162,250,163,.2); border-radius:16px;
  background:linear-gradient(160deg, rgba(162,250,163,.07), rgba(162,250,163,.02));
  padding:16px;
}
.cpl-summary h4{ margin:0 0 10px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--cpl-green); }
.cpl-sumrow{ display:flex; gap:10px; margin-bottom:8px; font-size:12.5px; }
.cpl-sumrow b{ flex:none; min-width:110px; color:rgba(233,245,234,.5); font-weight:600; }
.cpl-sumrow span{ color:#eef6ee; }

/* empty state */
.cpl-empty{ text-align:center; padding:34px 10px 22px; }
.cpl-empty svg{ width:46px; height:46px; stroke:rgba(162,250,163,.5); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:14px; }
.cpl-empty h4{ margin:0 0 8px; font-size:16px; color:#f2f8f2; }
.cpl-empty p{ margin:0 auto 18px; max-width:300px; font-size:12.5px; line-height:1.6; color:rgba(233,245,234,.55); }
.cpl-empty .btn{ margin:4px; }

/* footer actions */
.cpl-foot{
  padding:16px 22px 20px; border-top:1px solid rgba(162,250,163,.1);
  display:flex; flex-direction:column; gap:10px;
}
.cpl-foot .btn{ width:100%; justify-content:center; }
.cpl-architect{ text-align:center; padding:4px 6px 0; }
.cpl-architect p{ margin:0 0 8px; font-size:11.5px; color:rgba(233,245,234,.5); line-height:1.55; }
.cpl-clear{
  align-self:center; background:none; border:none; cursor:pointer;
  font:600 11px "Archivo","Cairo",sans-serif; color:rgba(233,245,234,.4);
  text-decoration:underline; text-underline-offset:3px; padding:4px 8px;
}
.cpl-clear:hover{ color:#f2b8b8; }
.cpl-confirm{ display:flex; align-items:center; justify-content:center; gap:10px; font-size:12px; color:rgba(233,245,234,.75); flex-wrap:wrap; }

/* ---------------- custom requirement modal ---------------- */
.cpl-modal{
  position:fixed; inset:0; z-index:960; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(4,6,5,.7); opacity:0; pointer-events:none; transition:opacity .3s;
}
.cpl-modal.is-open{ opacity:1; pointer-events:auto; }
.cpl-modal-card{
  width:min(440px,100%); background:#0e130f; border:1px solid rgba(162,250,163,.2);
  border-radius:20px; padding:24px; transform:translateY(14px); transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.cpl-modal.is-open .cpl-modal-card{ transform:none; }
.cpl-modal-card h4{ margin:0 0 16px; font-size:16px; color:#f2f8f2; }
.cpl-modal-card label{ display:block; margin-bottom:12px; font:600 11.5px "Archivo","Cairo",sans-serif; color:rgba(233,245,234,.6); }
.cpl-modal-card label span{ display:block; margin-bottom:6px; }
.cpl-modal-card input, .cpl-modal-card textarea{
  width:100%; box-sizing:border-box; padding:11px 13px; border-radius:11px;
  background:rgba(255,255,255,.03); border:1px solid rgba(233,245,234,.16);
  color:#f2f8f2; font:500 13px "Archivo","Cairo",sans-serif; resize:vertical;
}
.cpl-modal-card input:focus, .cpl-modal-card textarea:focus{ outline:none; border-color:rgba(162,250,163,.55); }
.cpl-modal-act{ display:flex; gap:10px; margin-top:6px; }
.cpl-modal-act .btn{ flex:1; justify-content:center; }

/* ---------------- marketplace card button ---------------- */
.mft-plan{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
  border-radius:10px; cursor:pointer; font:700 11px "Archivo","Cairo",sans-serif; letter-spacing:.03em;
  background:rgba(162,250,163,.07); color:var(--cpl-green);
  border:1px solid rgba(162,250,163,.25);
  transition:all .3s cubic-bezier(.22,1,.36,1); white-space:nowrap;
}
.mft-plan svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mft-plan:hover{ background:rgba(162,250,163,.14); border-color:rgba(162,250,163,.5); }
.mft-plan.is-on{ background:var(--cpl-green); color:var(--cpl-ink); border-color:var(--cpl-green); }
.mft-plan:focus-visible{ outline:2px solid var(--cpl-green); outline-offset:2px; }

/* ---------------- product page add-ons section ---------------- */
.cpl-addons-sec .cpl-chips{ margin-top:26px; }
.cpl-addons-note{ margin-top:16px; font-size:12.5px; color:rgba(233,245,234,.5); }
.cpl-addons-note button{ background:none; border:none; padding:0; cursor:pointer; color:var(--cpl-green); font:inherit; text-decoration:underline; text-underline-offset:3px; }

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  .cpl-tab, .cpl-panel, .cpl-overlay, .cpl-modal, .cpl-modal-card, .cpl-chip, .mft-plan{ transition:none !important; }
  .cpl-sec{ animation:none !important; }
  .cpl-tab.is-pulse{ animation:none !important; }
  .cpl-arch .cpl-link.on{ animation:none; }
  .cpl-fly{ display:none !important; }
}