/* ==========================================================================
   WP EasyCart — unified product slideout ( Create + Quick Edit )
   Builds on admin-v2.css tokens and .ecv2-slideout primitives.
   ========================================================================== */

/* Overlay: hidden until JS opens it; upsell popup ( z 100000 ) and PRO
   manager modals ( z 100000+ ) layer above; nested legacy slideouts are
   bumped to 100001 by ecpsv2_open_nested().
   Positioning is restated here ( not just inherited from .ecv2-slideout-overlay )
   so the panel can never fall into the page flow and squeeze the content. */
#ecpsv2_box.ecpsv2-overlay { position:fixed !important; top:0; right:0; bottom:0; left:0; z-index:99999; justify-content:flex-end; }
body.ecpsv2-open { overflow:hidden; }


.ecpsv2 { width:520px; position:relative; height:100vh; height:100dvh; max-height:100dvh; }
.ecpsv2-overlay[data-mode="create"] [data-mode-only="edit"],
.ecpsv2-overlay[data-mode="edit"]   [data-mode-only="create"] { display:none !important; }

/* ---- header ---- */
.ecpsv2-header { padding-bottom:14px; }
.ecpsv2-header .ecv2-slideout-eyebrow { display:flex; align-items:center; gap:6px; }
.ecpsv2-title { max-width:420px; }
.ecpsv2-sub { font-size:12px; color:var(--ecv2-g500); margin-top:3px; }
.ecpsv2-x { border:0; background:transparent; width:32px; height:32px; border-radius:var(--ecv2-r); cursor:pointer; color:var(--ecv2-g500); display:grid; place-items:center; flex-shrink:0; }
.ecpsv2-x:hover { background:var(--ecv2-g100); color:var(--ecv2-g900); }
.ecpsv2-link { background:none; border:0; padding:0; color:var(--ecv2-primary-hover); font-weight:600; font-size:12px; cursor:pointer; text-decoration:none !important; }
.ecpsv2-link:hover { text-decoration:underline !important; }

/* ---- loader ---- */
.ecpsv2-loader { position:absolute; inset:0; background:rgba(255,255,255,.7); z-index:5; display:none; align-items:center; justify-content:center; }
.ecpsv2-loader.is-on { display:flex; }
.ecpsv2-spinner { width:26px; height:26px; border:3px solid var(--ecv2-g200); border-top-color:var(--ecv2-primary); border-radius:50%; animation:ecpsv2-spin .7s linear infinite; }
@keyframes ecpsv2-spin { to { transform:rotate(360deg); } }

/* ---- notice ( PRO installed, inactive ) ---- */
.ecpsv2-notice { display:flex; align-items:center; gap:10px; margin:14px 0 0; padding:9px 12px; background:#fffbeb; border:1px solid #fde68a; border-radius:var(--ecv2-r); font-size:12.5px; color:#92400e; }
.ecpsv2-notice span { flex:1 1 auto; }

/* ---- fields ---- */
.ecpsv2-f { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; min-width:0; }
.ecpsv2-f:last-child { margin-bottom:0; }
.ecpsv2-f > label { font-size:12px; font-weight:500; color:var(--ecv2-g700); display:flex; align-items:center; justify-content:space-between; gap:6px; }
.ecpsv2-req { color:var(--ecv2-danger); }
.ecpsv2-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ecpsv2-grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.ecpsv2 .ecv2-select { max-width:none !important; width:100%; }
.ecpsv2 .ecv2-input.is-invalid { border-color:var(--ecv2-danger); box-shadow:0 0 0 2px var(--ecv2-danger-light); }
.ecpsv2-mono { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12.5px !important; }
.ecpsv2-hint { font-size:11px; color:var(--ecv2-g400); line-height:1.45; }
.ecpsv2-hint.ecpsv2-ok { color:var(--ecv2-primary-hover); }
.ecpsv2-hint.ecpsv2-err, .ecpsv2-err { color:var(--ecv2-danger); }
.ecpsv2-hint.ecpsv2-block { margin:-4px 0 10px; }
.ecpsv2-with-btn { display:flex; gap:8px; }
.ecpsv2-with-btn .ecv2-select { flex:1 1 auto; }
.ecpsv2-prefix { position:relative; }
.ecpsv2-prefix > span { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ecv2-g400); font-size:12px; pointer-events:none; }
.ecpsv2-prefix .ecv2-input { padding-left:34px; }
.ecpsv2-readonly { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border:1px solid var(--ecv2-g100); border-radius:var(--ecv2-r); background:var(--ecv2-g50); font-size:13px; color:var(--ecv2-g800); }
.ecpsv2-readonly-block { flex-direction:column; align-items:flex-start; }

/* ---- switches ---- */
.ecpsv2-switch-row { display:flex; gap:22px; align-items:center; padding:4px 0 12px; flex-wrap:wrap; }
.ecpsv2-sw { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ecv2-g700); cursor:pointer; user-select:none; }
.ecpsv2-sw input { position:absolute; opacity:0; width:0; height:0; }
.ecpsv2-knob { width:34px; height:20px; border-radius:999px; background:var(--ecv2-g300); position:relative; transition:background var(--ecv2-tr); flex-shrink:0; }
.ecpsv2-knob::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform var(--ecv2-tr); box-shadow:0 1px 2px rgba(0,0,0,.2); }
.ecpsv2-sw input:checked + .ecpsv2-knob { background:var(--ecv2-primary); }
.ecpsv2-sw input:checked + .ecpsv2-knob::after { transform:translateX(14px); }
.ecpsv2-sw input:focus-visible + .ecpsv2-knob { box-shadow:0 0 0 2px var(--ecv2-primary-light); }

/* ---- image ---- */
.ecpsv2-img { display:flex; gap:12px; align-items:center; }
.ecpsv2-img-thumb { width:64px; height:64px; border-radius:var(--ecv2-r); border:1px dashed var(--ecv2-g300); background:var(--ecv2-g50); display:grid; place-items:center; color:var(--ecv2-g400); flex-shrink:0; overflow:hidden; }
.ecpsv2-img-thumb.has-image { border-style:solid; }
.ecpsv2-img-thumb img { width:100%; height:100%; object-fit:cover; }
.ecpsv2-img-thumb svg { width:22px; height:22px; }
.ecpsv2-img-meta { flex:1 1 auto; min-width:0; }
.ecpsv2-img-name { font-size:12.5px; color:var(--ecv2-g800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ecpsv2-img-actions { margin-top:8px; display:flex; gap:6px; }

/* ---- dims ---- */
.ecpsv2-dims { margin-top:2px; }
.ecpsv2-dims .ecpsv2-hint { margin-top:6px; }

/* ---- option rows ( chosen sets, sortable ) ---- */
.ecpsv2-opt-list { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.ecpsv2-opt-row { display:flex; gap:8px; align-items:center; padding:7px 8px 7px 6px; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); background:#fff; }
.ecpsv2-opt-drag { color:var(--ecv2-g300); cursor:grab; display:grid; place-items:center; width:16px; flex-shrink:0; }
.ecpsv2-opt-drag svg { fill:currentColor; }
.ecpsv2-opt-row:hover .ecpsv2-opt-drag { color:var(--ecv2-g500); }
.ecpsv2-opt-row.ui-sortable-helper { box-shadow:var(--ecv2-shlg); cursor:grabbing; }
.ecpsv2-opt-placeholder { border-style:dashed; background:var(--ecv2-g50); height:36px; }
.ecpsv2-opt-n { width:20px; height:20px; border-radius:50%; background:var(--ecv2-g100); color:var(--ecv2-g500); display:grid; place-items:center; font-size:11px; font-weight:600; flex-shrink:0; }
.ecpsv2-opt-name { flex:1 1 auto; min-width:0; font-size:13px; color:var(--ecv2-g800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ecpsv2-opt-rm { border:0; background:none; color:var(--ecv2-g400); cursor:pointer; width:28px; height:28px; border-radius:6px; display:grid; place-items:center; font-size:16px; line-height:1; flex-shrink:0; }
.ecpsv2-opt-rm:hover { background:var(--ecv2-g100); color:var(--ecv2-danger); }
.ecpsv2-opt-empty { margin-bottom:8px; }
.ecpsv2-opt-more { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.ecpsv2-opt-actions { display:flex; gap:12px; align-items:center; margin-top:2px; }
.ecpsv2-opt-actions .ecv2-select { flex:1 1 auto; }

/* ---- manufacturer combobox ---- */
.ecpsv2-combo { position:relative; }
.ecpsv2-combo .ecv2-input { padding-right:30px; }
.ecpsv2-combo-clear { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; color:var(--ecv2-g400); width:22px; height:22px; border-radius:6px; cursor:pointer; font-size:15px; line-height:1; display:grid; place-items:center; }
.ecpsv2-combo-clear:hover { background:var(--ecv2-g100); color:var(--ecv2-g700); }
.ecpsv2-combo-list { position:absolute; left:0; right:0; top:calc(100% + 4px); margin:0; padding:4px; list-style:none; background:#fff; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); box-shadow:var(--ecv2-shlg); z-index:10; max-height:220px; overflow-y:auto; }
.ecpsv2-combo-list li { padding:7px 10px; border-radius:6px; font-size:13px; color:var(--ecv2-g800); cursor:pointer; }
.ecpsv2-combo-list li:hover, .ecpsv2-combo-list li.is-active { background:var(--ecv2-g100); }
.ecpsv2-combo-create { color:var(--ecv2-primary-hover); font-weight:600; border-top:1px solid var(--ecv2-g100); margin-top:2px; }

/* ---- tax under shipping ---- */
.ecpsv2-tax-row { margin-top:4px; }
.ecpsv2-head-split { display:flex; align-items:center; justify-content:space-between; }
.ecpsv2-head-split .ecpsv2-hint { text-transform:none; letter-spacing:0; font-weight:500; }

/* ---- chips ---- */
.ecpsv2-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ecpsv2-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; font-size:11.5px; font-weight:500; border:1px solid var(--ecv2-g200); background:#fff; color:var(--ecv2-g600); cursor:pointer; line-height:1.3; }
.ecpsv2-chip:hover { border-color:var(--ecv2-g400); }
.ecpsv2-chip-on { background:var(--ecv2-blue-light); border-color:transparent; color:#1d4ed8; }
.ecpsv2-chips-static .ecpsv2-chip { cursor:default; }

/* ---- PRO rows ---- */
.ecpsv2-pro-pill { display:inline-flex; align-items:center; padding:1px 6px; border-radius:5px; background:var(--ecv2-amber); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.5px; line-height:1.5; }
.ecpsv2-pro-pill-active { background:var(--ecv2-primary); }
.ecpsv2-pro-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 11px; margin-top:10px; border-radius:var(--ecv2-r); border:1px dashed var(--ecv2-g200); background:var(--ecv2-g50); cursor:pointer; transition:all var(--ecv2-tr); font:inherit; color:inherit; }
.ecpsv2-pro-row:hover { border-color:#fcd34d; background:#fffbeb; }
.ecpsv2-pro-row:focus-visible { outline:none; box-shadow:0 0 0 2px var(--ecv2-primary-light); }
.ecpsv2-lock-icon { width:14px; height:14px; color:var(--ecv2-g400); flex-shrink:0; }
.ecpsv2-pro-row-text { flex:1 1 auto; min-width:0; }
.ecpsv2-pro-row-text strong { display:block; font-size:12.5px; color:var(--ecv2-g800); font-weight:600; }
.ecpsv2-pro-row-text span { display:block; font-size:11.5px; color:var(--ecv2-g500); line-height:1.4; }
.ecpsv2-pro-live { margin-top:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ecpsv2-pro-live-label { font-size:12px; color:var(--ecv2-g600); }
.ecpsv2-price-cell { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ecpsv2-after-create { margin-top:8px; }

/* ---- free summary card ---- */
.ecpsv2-upsell-card { padding:14px 14px 12px; border-radius:var(--ecv2-rl); background:linear-gradient(180deg,#fffbeb,#fff); border:1px solid #fde68a; }
.ecpsv2-upsell-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ecpsv2-upsell-head strong { font-size:13.5px; color:var(--ecv2-g900); }
.ecpsv2-upsell-card ul { margin:0 0 12px; padding:0; list-style:none; display:grid; gap:5px; }
.ecpsv2-upsell-card li { font-size:12px; color:var(--ecv2-g700); display:flex; gap:8px; align-items:flex-start; }
.ecpsv2-upsell-card li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ecv2-amber); margin-top:6px; flex-shrink:0; }
.ecpsv2-upsell-actions { display:flex; gap:8px; align-items:center; }

/* ---- footer ---- */
.ecpsv2-footer { align-items:center; }
.ecpsv2-spacer { flex:1 1 auto; }
.ecpsv2-discard { color:var(--ecv2-danger); }
.ecpsv2-discard:disabled { color:var(--ecv2-g400); cursor:default; background:transparent; }

/* ---- list row flash after quick edit ---- */
tr.ecv2-row.ecpsv2-row-flash > td { animation:ecpsv2-flash 1.2s ease-out; }
@keyframes ecpsv2-flash { from { background:var(--ecv2-primary-light); } to { background:transparent; } }

/* ---- fallback toast ( when ecv2_toast is not on the page ) ---- */
.ecpsv2-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:100002; padding:10px 16px; border-radius:var(--ecv2-r); background:var(--ecv2-g900); color:#fff; font-size:13px; box-shadow:var(--ecv2-shlg); }
.ecpsv2-toast-error { background:var(--ecv2-danger); }

@media screen and (max-width:640px) {
	.ecpsv2 { width:100vw; }
	.ecpsv2-grid2, .ecpsv2-grid4 { grid-template-columns:1fr 1fr; }
	.ecpsv2-footer { flex-wrap:wrap; gap:8px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
	.ecpsv2-footer .ecpsv2-spacer { display:none; }
	.ecpsv2-footer .ecv2-btn { flex:1 1 calc(50% - 4px); justify-content:center; }
	.ecpsv2-footer .ecv2-btn-primary { flex-basis:100%; order:-1; }
	.ecpsv2-header, .ecpsv2-body { padding-left:16px; padding-right:16px; }
}
@media (prefers-reduced-motion: reduce) {
	.ecpsv2, .ecpsv2-knob, .ecpsv2-knob::after, .ecpsv2-pro-row { transition:none; animation:none; }
}