/* WP EasyCart Admin — Settings › Language ( V2 ): installed languages + storefront phrase editor.
   Sits on settings-page-v2.css; accent follows the admin colorizer through --ecst-accent ( --ec-brand ). */

/* shared bits */
.ecl-muted { font-size:12px; color:var(--ecv2-g500); }
.ecl-key { font:500 11px ui-monospace, Menlo, Consolas, monospace; color:var(--ecv2-g500); background:var(--ecv2-g100); border-radius:4px; padding:1px 5px; white-space:nowrap; }
.ecl-accent.ecv2-btn-primary { background:var(--ecst-accent); border-color:var(--ecst-accent); color:var(--ecst-on-accent); }
.ecl-accent.ecv2-btn-primary:hover { filter:brightness(.94); }

/* ---- Languages section ---- */
.ecl-langs { display:flex; flex-direction:column; gap:12px; }
.ecl-langs-head b { display:block; font-size:13px; color:var(--ecv2-g900); }
.ecl-langs-head span { display:block; font-size:12px; color:var(--ecv2-g500); max-width:80ch; margin-top:2px; }
.ecl-lang-list { display:flex; flex-direction:column; border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); overflow:hidden; }
.ecl-lang { display:flex; align-items:center; gap:10px; padding:9px 12px; border-top:1px solid var(--ecv2-g100); background:#fff; font-size:13px; flex-wrap:wrap; }
.ecl-lang:first-child { border-top:0; }
.ecl-lang.is-active { background:var(--ecst-accent-soft); }
.ecl-lang-name { font-weight:600; color:var(--ecv2-g900); }
.ecl-lang .ecv2-btn { height:28px; padding:0 10px; }
.ecl-lang .ecv2-btn .dashicons { font-size:14px; width:14px; height:14px; }
.ecl-lang .ecv2-btn[disabled] { opacity:.45; cursor:not-allowed; }
.ecl-add { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border:1px dashed var(--ecv2-g300); border-radius:var(--ecv2-r); background:var(--ecv2-g50); }
.ecl-add label b { font-size:13px; color:var(--ecv2-g900); }
.ecl-add .ecv2-select { min-width:200px; }

/* ---- Phrase editor ---- */
.ecl { display:flex; flex-direction:column; gap:10px; }
.ecl.is-loading { opacity:.55; pointer-events:none; }
.ecl-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ecl-editing { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ecv2-g700); }
.ecl-editing .ecv2-select { min-width:220px; max-width:320px !important; }
.ecl-search { display:flex; align-items:center; gap:6px; height:32px; padding:0 10px; border:1px solid var(--ecv2-g300); border-radius:var(--ecv2-r); background:#fff; min-width:240px; flex:1; max-width:380px; }
.ecl-search .dashicons { color:var(--ecv2-g400); font-size:16px; width:16px; height:16px; }
.ecl-search input { border:0; outline:none; box-shadow:none; flex:1; min-width:0; font-size:13px; background:transparent; padding:0; height:28px; }
.ecl-search:focus-within { border-color:var(--ecst-accent); box-shadow:0 0 0 3px var(--ecst-accent-soft); }
.ecl.is-searching .ecl-pills { opacity:.5; }
.ecl.is-searching .ecl-pill { cursor:default; }
.ecl-row mark { background:var(--ecst-accent-soft); color:inherit; border-radius:2px; padding:0 1px; }
.ecl-count { font-size:11.5px; color:var(--ecv2-g500); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ecl-changed-only { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ecv2-g700); cursor:pointer; user-select:none; }
.ecl-changed-only input { margin:0; accent-color:var(--ecst-accent); }

/* area pills */
.ecl-pills { display:flex; flex-wrap:wrap; gap:6px; }
.ecl-pill { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border:1px solid var(--ecv2-g300); border-radius:999px; background:#fff; color:var(--ecv2-g700); font-size:12px; cursor:pointer; line-height:1; white-space:nowrap; transition:background var(--ecv2-tr), border-color var(--ecv2-tr); }
.ecl-pill:hover { background:var(--ecv2-g50); border-color:var(--ecv2-g400); }
.ecl-pill b { font-weight:600; font-size:11px; color:var(--ecv2-g400); font-variant-numeric:tabular-nums; }
.ecl-pill.is-on { background:var(--ecst-accent-soft); border-color:var(--ecst-accent); color:var(--ecv2-g900); font-weight:600; }
.ecl-pill.is-on b { color:var(--ecv2-g700); }
.ecl-pill.has-changed:after { content:""; width:6px; height:6px; border-radius:50%; background:var(--ecv2-amber); }
.ecl-pill.is-ecl-hidden { display:none; }

/* groups */
.ecl-body { display:flex; flex-direction:column; gap:12px; }
.ecl-group { border:1px solid var(--ecv2-g200); border-radius:var(--ecv2-r); background:#fff; overflow:hidden; }
.ecl-group.is-ecl-hidden { display:none; }
.ecl-group-head { position:sticky; top:46px; z-index:2; display:flex; align-items:center; gap:8px; padding:9px 14px; background:var(--ecv2-g50); border-bottom:1px solid var(--ecv2-g200); flex-wrap:wrap; }
.ecl-group-head b { font-size:13px; color:var(--ecv2-g900); }
.ecl-group-n { font-size:11.5px; color:var(--ecv2-g500); font-variant-numeric:tabular-nums; }
.ecl-group-changed { color:#92400e; }
.ecl-group-head .ecv2-btn { height:26px; padding:0 9px; }
.ecl-group-note .ecl-group-head { border-bottom:0; }

/* rows: override the engine's two-column settings row */
.ecl-row.ecst-row { grid-template-columns:minmax(180px,280px) minmax(0,1fr); gap:14px; align-items:start; padding:10px 14px; }
.ecl-row.is-ecl-hidden { display:none; }
.ecl-row[data-changed="1"] { box-shadow:inset 3px 0 0 var(--ecv2-amber); }
.ecl-row-text { min-width:0; display:flex; flex-direction:column; gap:4px; }
.ecl-title { font-size:12.5px; font-weight:600; color:var(--ecv2-g900); line-height:1.35; }
.ecl-flags { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:0; }
.ecl-flags .ecst-link { font-size:11.5px; }
.ecl-flags .ecst-link[hidden], .ecl-flags .ecv2-chip[hidden] { display:none; }
.ecl-row-control { display:flex; flex-direction:column; gap:4px; min-width:0; }
.ecl-input { width:100%; max-width:none; resize:vertical; font-family:inherit; font-size:13px; line-height:1.45; min-height:32px; padding:6px 10px; box-sizing:border-box; overflow:hidden; }
.ecl-input:focus { border-color:var(--ecst-accent); box-shadow:0 0 0 3px var(--ecst-accent-soft); }
.ecl-row.is-saving .ecl-input { border-color:var(--ecv2-g300); background:var(--ecv2-g50); }
.ecl-row.is-error .ecl-input { border-color:var(--ecv2-danger); }
.ecl-row-foot { display:flex; align-items:baseline; gap:10px; min-height:0; flex-wrap:wrap; }
.ecl-state { font-size:11px; font-weight:600; white-space:nowrap; }
.ecl-state:empty { display:none; }
.ecl-state.is-saving { color:var(--ecv2-g500); font-weight:500; }
.ecl-state.is-saved { color:#15803d; }
.ecl-state.is-error { color:var(--ecv2-danger); cursor:pointer; }
.ecl-default { font-size:11.5px; color:var(--ecv2-g500); min-width:0; }
.ecl-default[hidden] { display:none; }
.ecl-default em { font-style:normal; color:var(--ecv2-g700); }
.ecl-empty { padding:26px; text-align:center; color:var(--ecv2-g500); background:#fff; border:1px dashed var(--ecv2-g300); border-radius:var(--ecv2-r); font-size:13px; }
.ecl-empty[hidden] { display:none; }

@media (max-width:1100px) {
	.ecl-group-head { top:0; }
}
@media (max-width:760px) {
	.ecl-row.ecst-row { grid-template-columns:1fr; gap:6px; }
	.ecl-editing .ecv2-select { min-width:0; }
}