/* Auction Service Builder v8 - base aesthetic (you can override later with your own CSS) */
.asb-shell{max-width:1100px;margin:0 auto;padding:28px 18px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
.asb-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px}
.asb-title{font-size:44px;letter-spacing:-.02em;margin:0}
.asb-steps{display:flex;gap:12px;flex-wrap:wrap}
.asb-step-dot{display:flex;align-items:center;gap:10px;opacity:.55;cursor:pointer;user-select:none}
.asb-step-dot span{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;border:2px solid #d5dbe6;font-weight:700}
.asb-step-dot small{font-size:12px}
.asb-step-dot.active{opacity:1}
.asb-step-dot.active span{background:#2563eb;border-color:#2563eb;color:#fff}

.asb-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
.asb-card{border:1px solid #e6eaf2;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.asb-main{padding:18px}
.asb-summary{position:sticky;top:18px;padding:18px;background:#0f2f46;color:#eaf2ff;border-color:#0f2f46}
.asb-summary-title{font-size:18px;font-weight:800}
.asb-summary-sub{font-size:12px;opacity:.85;margin-top:4px}
.asb-summary-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.asb-summary-price{font-size:28px;font-weight:900}
.asb-summary-list{margin-top:14px;border-top:1px solid rgba(255,255,255,.15);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.asb-summary-item{display:flex;justify-content:space-between;font-size:13px}
.asb-summary-footer{margin-top:14px;border-top:1px solid rgba(255,255,255,.15);padding-top:12px}
.asb-muted{font-size:12px;opacity:.8}
.asb-delivery{font-size:14px;font-weight:700;margin-top:4px}

.asb-panel{display:none;padding:8px 6px}
.asb-panel.asb-panel-active{display:block}
.asb-h2{margin:4px 0 6px;font-size:30px;letter-spacing:-.02em}
.asb-sub{margin:0 0 14px;font-size:13px;opacity:.75}
.asb-label{display:block;font-weight:700;font-size:13px;margin:10px 0 6px}
.asb-req{color:#d11}
.asb-input{width:100%;padding:12px 12px;border-radius:12px;border:1px solid #dbe2ee;background:#fbfcff}
.asb-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.asb-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.asb-btn{border:1px solid #dbe2ee;background:#fff;color:#0f172a;border-radius:12px;padding:11px 14px;font-weight:700;cursor:pointer}
.asb-btn-primary{background:#2563eb;border-color:#2563eb;color:#fff}
.asb-btn:disabled{opacity:.5;cursor:not-allowed}

.asb-preview-wrap{display:grid;gap:10px}
.asb-preview{width:100%;height:360px;border-radius:14px;border:1px solid #dbe2ee;background:#fff}
.asb-preview-hint{display:flex;gap:10px;align-items:flex-start;font-size:12px;opacity:.8}
.asb-badge{font-size:11px;padding:4px 8px;border-radius:999px;background:rgba(37,99,235,.12);color:#2563eb;font-weight:800}

.asb-pills{display:flex;flex-wrap:wrap;gap:10px}
.asb-pill{display:flex;gap:8px;align-items:center;border:1px solid #dbe2ee;background:#fff;border-radius:999px;padding:8px 10px;font-size:13px}

.asb-module{display:flex;justify-content:space-between;gap:14px;border:1px solid #e6eaf2;border-radius:16px;padding:14px;margin-top:10px}
.asb-module-title{font-weight:900}
.asb-module-desc{font-size:12px;opacity:.75;margin-top:4px;line-height:1.35}
.asb-module-right{display:flex;align-items:center;gap:12px}
.asb-price{font-weight:900}
.asb-toggle{font-size:12px;font-weight:900;padding:6px 10px;border-radius:999px;background:rgba(37,99,235,.12);color:#2563eb}
.asb-toggle-on{opacity:1}
.asb-switch{position:relative;width:46px;height:26px;display:inline-block}
.asb-switch input{opacity:0;width:0;height:0}
.asb-switch span{position:absolute;cursor:pointer;inset:0;background:#dbe2ee;border-radius:999px;transition:.15s}
.asb-switch span:before{content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;background:#fff;border-radius:999px;transition:.15s}
.asb-switch input:checked + span{background:#22c55e}
.asb-switch input:checked + span:before{transform:translateX(20px)}
.asb-faq-btn{margin-top:10px;border:0;background:transparent;color:#2563eb;font-weight:800;cursor:pointer;padding:0}
.asb-faq{display:none;margin-top:8px;font-size:12px;opacity:.8}
.asb-addon.asb-open .asb-faq,.asb-module.asb-open .asb-faq{display:block}

.asb-terms{margin-top:16px;border-top:1px solid #e6eaf2;padding-top:16px}
.asb-terms-box{height:340px;overflow:auto;border:1px solid #dbe2ee;border-radius:14px;padding:12px;background:#fbfcff}
.asb-checkline{display:flex;gap:10px;align-items:flex-start;margin-top:10px;font-size:13px}

@media (max-width: 940px){
  .asb-header{flex-direction:column;align-items:flex-start}
  .asb-grid{grid-template-columns:1fr}
  .asb-summary{position:relative;top:auto}
  .asb-row{grid-template-columns:1fr}
}


/* v8.6 UX polish: centered larger step bar, numbers only */
.asb-header{justify-content:center; align-items:center;}
.asb-steps{justify-content:center; width:100%; gap:18px;}
.asb-step-dot{flex-direction:column; gap:6px;}
.asb-step-dot span{width:44px;height:44px;font-size:16px;}
.asb-step-dot small{display:none;} /* numbers only */
.asb-step-dot.active span{
  position:relative;
  box-shadow:0 0 0 0 rgba(37,99,235,.35);
  animation: asbPulse 1.6s ease-in-out infinite;
}
@keyframes asbPulse{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.35);}
  70%{box-shadow:0 0 0 10px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}
/* panel transition */
.asb-panel.asb-panel-active{animation: asbFadeSlide .28s ease both;}
@keyframes asbFadeSlide{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}




.asb-main{position:relative;}


/* --- Steps (single row) --- */
.asb-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:6px;
}
.asb-step-dot{position:relative; display:flex; align-items:center; justify-content:center;}
.asb-step-dot span{
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:2px solid #d5dbe6;
  font-weight:800;
  background:#fff;
}
.asb-step-dot.active span{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
  box-shadow:0 0 0 6px rgba(37,99,235,.10);
}
.asb-step-dot-last{opacity:.55; cursor:default;}
.asb-connector{
  width:22px;
  height:2px;
  background:#d5dbe6;
  border-radius:99px;
}
.asb-connector.active{background:#2563eb;}

/* --- No-jump wizard: panels overlay inside fixed-height box --- */
.asb-main{position:relative;}
.asb-panels-wrap{position:relative; width:100%;}
.asb-panels-wrap{min-height:620px;} /* fallback until JS sets exact height */

.asb-panel{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(18px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.asb-panel.asb-panel-active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}

/* Info buttons: slightly rounded */
.asb-faq-btn{border-radius:10px !important;}


/* --- Steps rebuilt from scratch --- */
.asb-step-dot, .asb-connector{display:none !important;} /* old remnants */

.asb-steps{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:16px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  margin:6px 0 0 !important;
}

.asb-step{
  width:44px;
  height:44px;
  border-radius:999px;
  border:2px solid #d5dbe6;
  background:#fff;
  color:#94a3b8;
  font-weight:900;
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:0;
  line-height:1;
}

.asb-step.is-active{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
  box-shadow:0 0 0 6px rgba(37,99,235,.12);
}

.asb-step.is-done{
  border-color:#2563eb;
  color:#2563eb;
}

.asb-step.is-disabled{
  opacity:.55;
  cursor:default;
}

.asb-step-line{
  width:22px;
  height:2px;
  background:#d5dbe6;
  border-radius:99px;
}

.asb-step-line.is-active{
  background:#2563eb;
}

/* stop scroll-anchoring jumps */
.asb-shell, .asb-main, .asb-grid{overflow-anchor:none;}


/* Steps: perfect circles, not clickable */
.asb-step{
  width:46px !important;
  height:46px !important;
  border-radius:999px !important;
  cursor:default !important;
  user-select:none !important;
}
.asb-step:focus{outline:none !important;}


/* Ensure wizard container expands and nothing overflows outside cards */
.asb-grid{align-items:start;}
.asb-main{height:auto !important; min-height:unset !important;}
.asb-panels-wrap{min-height:unset !important; height:auto !important;}
.asb-panel{position:relative !important; inset:auto !important; opacity:1 !important; transform:none !important; pointer-events:auto !important; transition:none !important;}
.asb-panel:not(.asb-panel-active){display:none !important;}
.asb-card{overflow:hidden;}

/* Buttons: broken corners + premium hover */
.asb-btn{
  border-radius:10px !important;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.asb-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.10);
}
.asb-btn:active{
  transform:translateY(0);
  box-shadow:0 6px 14px rgba(15,23,42,.10);
}
.asb-btn-primary:hover{
  filter:brightness(1.05);
}

/* FAQ/info buttons */
.asb-faq-btn{
  border-radius:10px !important;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.asb-faq-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(15,23,42,.10);
}


/* Terms box polish */
.asb-terms-box{
  line-height:1.45;
  font-size:12px;
}
.asb-terms-box strong{font-weight:900;}


/* Tab 1 hide price (no summary shown on Step 1) */
.asb-shell[data-asb-step="0"] .asb-summary{ display:none !important; }
.asb-shell[data-asb-step="0"] .asb-grid{ grid-template-columns: 1fr !important; }

.asb-disclaimer{
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.4;
  opacity: .75;
}


/* Add-on active animation */
.asb-addon {
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.asb-addon.asb-addon-active {
  background: #f0f7ff;
  border-color: #3b82f6;
  box-shadow: 0 6px 18px rgba(59,130,246,.18);
}

/* ===== ASB Pills (Checkbox as Pills) ===== */
.asb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.asb-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 2px solid #e5e7eb;
  font-size: 14px;
  cursor: pointer;
  transition: all .25s ease;
  user-select: none;
  background: #fff;
}

.asb-pill input {
  display: none;
}

.asb-pill:hover {
  border-color: #4f46e5;
}

.asb-pill:has(input:checked) {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}

.asb-pill:has(input:checked)::after {
  content: "✓";
  font-size: 13px;
  margin-left: 8px;
  font-weight: bold;
}


/* FAQ robustness fix */
.asb-module-head{display:flex;align-items:center;gap:12px;}
.asb-module-icon{display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-left:-4px;}
.asb-module-icon img{width:34px;height:34px;object-fit:contain;display:block;}
.asb-faq{display:none;margin-top:8px;font-size:12px;opacity:.8;}
.asb-faq.is-open{display:block !important;}
.asb-module.asb-open .asb-faq{display:block;}


/* Step 3 rebuilt */
.asb-faq-card{align-items:flex-start;}
.asb-module-head{display:flex;align-items:center;gap:12px;}
.asb-module-icon{display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-left:-8px;}
.asb-module-icon img{width:40px;height:40px;object-fit:contain;display:block;}
.asb-faq-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:12px;padding:9px 12px !important;border:1px solid #dbe2ee !important;background:#fff !important;color:#2563eb !important;font-weight:800 !important;cursor:pointer;border-radius:10px !important;}
.asb-faq-btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(15,23,42,.10);}
.asb-faq{display:none;margin-top:10px;font-size:13px;line-height:1.55;opacity:.88;max-width:95%;}
.asb-faq.is-open{display:block !important;}
.asb-faq-card.asb-open{background:#fbfcff;}

.asb-addon-icon{
width:42px;
height:auto;
margin-right:10px;
vertical-align:middle;
}


/* ===== v8.6.16: icons without white bg, scroll hint, payment tooltip ===== */
.asb-module-icon img,.asb-addon-icon{mix-blend-mode:multiply;}
.asb-scroll-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:9px 14px;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:13px;font-weight:600;border:1px dashed #a5b4fc;}
.asb-scroll-hint-arrow{display:inline-block;animation:asb-bounce 1.2s ease-in-out infinite;}
.asb-scroll-hint.is-hidden{display:none;}
.asb-scroll-hint.asb-pulse{animation:asb-shake .4s ease;}
@keyframes asb-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.asb-tip-wrap{position:relative;display:inline-block;}
.asb-btn[disabled]{pointer-events:none;opacity:.55;cursor:not-allowed;}
.asb-tip-wrap.asb-tip-active{cursor:not-allowed;}
.asb-tip-wrap::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 12px);right:0;width:260px;background:#0f172a;color:#fff;font-size:12px;line-height:1.45;font-weight:500;padding:10px 12px;border-radius:10px;text-align:center;box-shadow:0 10px 30px rgba(15,23,42,.25);z-index:30;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease;pointer-events:none;}
.asb-tip-wrap::before{content:"";position:absolute;bottom:calc(100% + 4px);right:28px;border:6px solid transparent;border-top-color:#0f172a;z-index:31;opacity:0;visibility:hidden;transition:opacity .15s ease;pointer-events:none;}
.asb-tip-wrap.asb-tip-active:hover::after,.asb-tip-wrap.asb-tip-active:hover::before,.asb-tip-wrap.asb-tip-show::after,.asb-tip-wrap.asb-tip-show::before{opacity:1;visibility:visible;transform:none;}
@media (max-width:600px){.asb-tip-wrap::after{width:220px;}}

.asb-step{cursor:default;pointer-events:none;}