/* WP EasyCart Admin — Settings › Accounts as a Store setup page ( 6.0.7 ): Store details' cards ( setup-store-v2.css ) and Products'
   chips and switches ( setup-products-v2.css ), with the parts only this page has: a form and a My Account menu that follow the
   choices, the steps a new customer takes, short lists with state chips, and reCAPTCHA's three steps. Accent follows the admin
   colorizer through --ecsu-accent ( setup-v2.css ). */
.ecac [hidden] { display:none !important; }

/* the controls beside what customers see */
.ecac-split { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
.ecac-col { display:flex; flex-direction:column; gap:14px; min-width:0; }
@container ecsd2 (min-width: 760px) {
	.ecac-split { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:22px; }
}

/* what customers see: a light frame */
.ecac-show { padding:14px; border:1px solid var(--ecv2-g200); border-radius:12px; background:linear-gradient(180deg, var(--ecv2-g50, #f9fafb), #fff 45%); gap:10px; }
.ecac-show-title, .ecac-form-title { font-size:13px; font-weight:700; color:var(--ecv2-g900); }

/* the steps a new customer takes */
.ecac-flow { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; padding:0; list-style:none; counter-reset:ecacflow; }
.ecac-flow > li { position:relative; display:inline-flex; align-items:center; gap:6px; margin:0; padding:5px 10px 5px 6px; border:1px solid var(--ecv2-g200); border-radius:999px; background:#fff; font-size:12.5px; color:var(--ecv2-g800); counter-increment:ecacflow; }
.ecac-flow > li::before { content:counter(ecacflow); display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--ecv2-g100); color:var(--ecv2-g700); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.ecac-flow > li.is-key { border-color:var(--ecsu-accent); background:var(--ecsu-accent-soft); font-weight:600; color:var(--ecv2-g900); }
.ecac-flow > li.is-key::before { background:var(--ecsu-accent); color:#fff; }
.ecac-flow > li.is-done::before { content:"\2713"; background:#dcfce7; color:#166534; }

/* what always needs an account; what shows by itself */
.ecac-need { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border:1px solid var(--ecv2-g200); border-radius:10px; background:var(--ecv2-g50, #f9fafb); font-size:12.5px; color:var(--ecv2-g700); min-width:0; }
.ecac-need > b { font-size:12.5px; color:var(--ecv2-g900); }
.ecac-need strong { color:var(--ecv2-g900); font-weight:600; }
.ecac-tags { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.ecac-tags > li { display:inline-flex; align-items:center; gap:4px; margin:0; padding:3px 9px; border:1px solid var(--ecv2-g200); border-radius:999px; background:#fff; font-size:12px; color:var(--ecv2-g700); overflow-wrap:anywhere; }
.ecac-tags > li.is-more { border-style:dashed; color:var(--ecv2-g500); }
.ecac-tags .ecpr-plan { margin-left:2px; }
.ecac-always { display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border:1px dashed var(--ecv2-g300); border-radius:999px; font-size:12.5px; color:var(--ecv2-g500); }

/* a form that follows its parts */
.ecac-form { gap:9px; }
.ecac-field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.ecac-field > i { font-style:normal; font-size:11.5px; font-weight:600; color:var(--ecv2-g600); }
.ecac-field > span { position:relative; display:block; height:26px; border:1px solid var(--ecv2-g300); border-radius:6px; background:#fff; }
.ecac-field > span.is-tall { height:44px; }
.ecac-field > span.is-pw { display:flex; align-items:center; justify-content:flex-end; padding:0 8px; font-size:11px; font-weight:600; color:var(--ecv2-g500); }
.ecac-field > .ecac-three { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr); gap:6px; height:auto; border:0; background:none; }
.ecac-three > span { display:block; height:26px; border:1px solid var(--ecv2-g300); border-radius:6px; background:#fff; }
.ecac-two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
.ecac-tick, .ecac-robot { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ecv2-g700); min-width:0; overflow-wrap:anywhere; }
.ecac-box { flex:0 0 auto; width:14px; height:14px; border:1px solid var(--ecv2-g400, #9ca3af); border-radius:3px; background:#fff; }
.ecac-robot { align-self:flex-start; padding:7px 10px; border:1px solid var(--ecv2-g200); border-radius:4px; background:var(--ecv2-g50, #f9fafb); }
.ecac-demo-btn { align-self:flex-start; padding:7px 14px; border-radius:6px; background:var(--ecv2-g800); color:#fff; font-size:12px; font-weight:600; }

/* My Account: a menu that follows the switches */
.ecac-my { display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:12px; align-items:start; }
.ecac-menu { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ecac-menu > span { padding:5px 9px; border-radius:7px; font-size:12px; color:var(--ecv2-g700); overflow-wrap:anywhere; }
.ecac-menu > span.is-current { background:var(--ecsu-accent-soft); color:var(--ecv2-g900); font-weight:600; }
.ecac-menu > span.is-out { margin-top:4px; padding-top:7px; border-top:1px solid var(--ecv2-g200); border-radius:0; color:var(--ecv2-g500); }
.ecac-my-main { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ecac-my-main > b { font-size:13px; color:var(--ecv2-g900); }
.ecac-order { display:flex; flex-direction:column; gap:6px; padding:9px 10px; border:1px solid var(--ecv2-g200); border-radius:8px; background:#fff; min-width:0; }
.ecac-order-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; font-size:12px; }
.ecac-order-top > b { color:var(--ecv2-g900); }
.ecac-order-btns { display:flex; flex-wrap:wrap; gap:6px; }
.ecac-order-btns > span { padding:3px 9px; border:1px solid var(--ecv2-g300); border-radius:6px; font-size:11.5px; font-weight:600; color:var(--ecv2-g700); background:#fff; }
@container ecsd2 (max-width: 420px) {
	.ecac-my { grid-template-columns:minmax(0,1fr); }
	.ecac-menu { flex-direction:row; flex-wrap:wrap; }
	.ecac-menu > span.is-out { margin-top:0; padding-top:5px; border-top:0; }
}

/* short lists with a state chip */
.ecac-list { display:flex; flex-direction:column; margin:0; padding:0; list-style:none; }
.ecac-list > li { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:0; padding:10px 0; border-top:1px solid var(--ecv2-g100); min-width:0; }
.ecac-list > li:first-child { border-top:0; padding-top:0; }
.ecac-list-text { flex:1 1 200px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.ecac-list-text > b { font-size:13.5px; font-weight:600; color:var(--ecv2-g900); overflow-wrap:anywhere; }
.ecac-list-text > span { font-size:12.5px; line-height:1.45; color:var(--ecv2-g600); overflow-wrap:anywhere; }
.ecac-num { flex:0 0 auto; min-width:34px; padding:2px 9px; border-radius:999px; background:var(--ecv2-g100); color:var(--ecv2-g800); font-size:12.5px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
.ecac-pill { flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; }
.ecac-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.ecac-pill.is-on { background:#dcfce7; color:#166534; }
.ecac-pill.is-off { background:var(--ecv2-g100); color:var(--ecv2-g700); }
.ecac-pill.is-warn { background:#fef3c7; color:#92400e; }
.ecac-pill.is-bad { background:#fee2e2; color:#991b1b; }
.ecac-pill.is-plan { background:var(--ecv2-plan-bg, #ede9fe); color:var(--ecv2-plan-fg, #5b21b6); } /* 6.0.7: a row whose state is the plan it needs: the one plan chip look */

/* reCAPTCHA in three steps */
.ecac-captcha .ecac-steps-wrap { flex:1 1 100%; min-width:0; }
.ecac-steps-wrap > summary { display:inline-flex; list-style:none; cursor:pointer; }
.ecac-steps-wrap > summary::-webkit-details-marker { display:none; }
.ecac-steps-wrap[open] > summary { margin-bottom:12px; }
.ecac-steps { display:flex; flex-direction:column; gap:0; margin:0; padding:0; list-style:none; counter-reset:ecacstep; }
.ecac-steps > li { position:relative; display:flex; flex-direction:column; gap:8px; margin:0; padding:0 0 16px 38px; counter-increment:ecacstep; min-width:0; }
.ecac-steps > li::before { content:counter(ecacstep); position:absolute; left:0; top:-1px; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border:2px solid var(--ecv2-g300); border-radius:50%; background:#fff; color:var(--ecv2-g600); font-size:12px; font-weight:700; box-sizing:border-box; }
.ecac-steps > li::after { content:""; position:absolute; left:11px; top:26px; bottom:2px; width:2px; background:var(--ecv2-g200); }
.ecac-steps > li:last-child { padding-bottom:0; }
.ecac-steps > li:last-child::after { display:none; }
.ecac-steps > li > b { font-size:13.5px; color:var(--ecv2-g900); }
.ecac-steps > li.is-now::before { border-color:var(--ecsu-accent); color:var(--ecv2-g900); }
.ecac-steps > li.is-done::before { content:"\2713"; border-color:#16a34a; background:#16a34a; color:#fff; }
.ecac-steps > li > span:not(.ecpr-note) { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
.ecac-steps > li > span.ecsd2-two { display:grid; align-items:start; gap:12px; } /* the key boxes side by side, tops in line ( a saved secret has a line under it ) */
#ac_recaptcha_test { flex-direction:column; align-items:flex-start; }
.ecac-captcha-box { display:block; max-width:100%; overflow-x:auto; }
#ac_recaptcha_result.is-bad { padding:8px 10px; border:1px solid #fecaca; border-radius:8px; background:#fef2f2; color:#991b1b; }
#ac_recaptcha_result.is-warn { padding:8px 10px; border:1px solid #fde68a; border-radius:8px; background:#fffbeb; color:#92400e; }

/* a control saving */
.ecac [aria-busy="true"] { cursor:progress; }