/* ====================================================================== */
/* WP EasyCart — Extensions page and extension rows on other screens      */
/* ( wp_easycart_admin_extensions ). Depends on admin-v2.css tokens.       */
/* @since 6.0.2                                                            */
/* ====================================================================== */

.ecext-logo { display:inline-grid; place-items:center; width:36px; height:36px; border-radius:9px; color:#fff; font-size:13px; font-weight:700; letter-spacing:.01em; flex-shrink:0; line-height:1; }
.ecext-logo.is-lg { width:44px; height:44px; border-radius:11px; font-size:15px; }
.ecext-chip { display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; line-height:1; padding:3px 7px; border-radius:999px; white-space:nowrap; vertical-align:middle; flex-shrink:0; }
.ecext-chip.is-included { background:#ecfdf3; border:1px solid #bbf7d0; color:#166534; }
.ecext-chip.is-muted { background:var(--ecv2-g100, #f3f4f6); border:1px solid var(--ecv2-g200, #e5e7eb); color:var(--ecv2-g500, #6b7280); }
.ecext-chip.is-update { background:#fffbeb; border:1px solid #fde68a; color:#92400e; }
.ecext-chip.is-coming { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; }
.ecext-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ecv2-g400, #9ca3af); flex-shrink:0; }
.ecext-dot.is-on { background:#22c55e; }

/* ---------- Banner ---------- */
.ecext-banner { display:flex; align-items:center; gap:14px; margin:0 0 14px; padding:12px 16px; border:1px solid var(--ecv2-g200, #e5e7eb); border-radius:var(--ecv2-rl, 12px); background:#fff; }
.ecext-banner.is-premium { background:linear-gradient(90deg, #fffbeb, #fff 70%); border-color:#fde68a; }
.ecext-banner.is-install { background:var(--ec-brand-softer, #f2f8eb); border-color:var(--ec-brand-soft, #cfe3b5); } /* 6.0.2: the admin colour */
.ecext-banner.is-lapsed { background:#fef2f2; border-color:#fecaca; }
.ecext-banner.is-status { padding:9px 16px; }
.ecext-banner-text { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--ecv2-g600, #4b5563); }
.ecext-banner-text b { font-size:13.5px; color:var(--ecv2-g900, #111827); }
.ecext-banner-actions { display:flex; gap:8px; flex-wrap:wrap; flex-shrink:0; }
.ecext-banner-ic { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#ef4444; color:#fff; font-weight:800; flex-shrink:0; }
.ecext-banner-ic.is-green { background:var(--ec-brand, #5f8a31); color:var(--ec-on-brand, #fff); }
/* 6.0.2: when the download server was last asked ( Check again ), and the header's Refresh. */
.ecext-banner-note { font-size:12px; color:var(--ecv2-g500, #6b7280); }
.ecext-refresh .dashicons { font-size:15px; width:15px; height:15px; line-height:15px; vertical-align:-3px; }

/* ---------- Tools: category pills and search ---------- */
.ecext-tools { display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap; margin:4px 0 14px; }
.ecext-pills { display:flex; flex-wrap:wrap; gap:6px; }
.ecext-pill { font:inherit; font-size:12.5px; font-weight:500; padding:5px 11px; border-radius:999px; border:1px solid var(--ecv2-g300, #d1d5db); background:#fff; color:var(--ecv2-g700, #374151); cursor:pointer; }
.ecext-pill i { font-style:normal; color:var(--ecv2-g400, #9ca3af); margin-left:3px; }
.ecext-pill:hover { border-color:var(--ecv2-g400, #9ca3af); }
.ecext-pill[aria-pressed="true"] { background:var(--ec-brand-softer, #f3f4f6); border-color:var(--ec-brand, #111827); color:var(--ecv2-g900, #111827); } /* 6.0.2: like the settings pills */
.ecext-pill[aria-pressed="true"] i { color:var(--ecv2-g500, #6b7280); }
.ecext-pill:focus-visible { outline:2px solid var(--ec-brand, #3b82f6); outline-offset:2px; }
.ecext-search { position:relative; display:flex; align-items:center; }
.ecext-search .dashicons { position:absolute; left:9px; color:var(--ecv2-g400, #9ca3af); font-size:16px; width:16px; height:16px; }
.ecext-search input { width:230px; max-width:100%; padding:6px 10px 6px 30px; border:1px solid var(--ecv2-g300, #d1d5db); border-radius:var(--ecv2-r, 8px); font-size:13px; }

/* ---------- Cards ---------- */
.ecext-grid { display:grid; grid-template-columns:repeat( auto-fill, minmax( 280px, 1fr ) ); gap:12px; }
.ecext-card { display:flex; flex-direction:column; gap:8px; padding:14px 16px; background:#fff; border:1px solid var(--ecv2-g200, #e5e7eb); border-radius:var(--ecv2-rl, 12px); box-shadow:0 1px 2px rgba(17,24,39,.04); }
.ecext-card[hidden] { display:none; }
.ecext-card.is-retired, .ecext-card.is-retiring { background:var(--ecv2-g50, #f9fafb); }
.ecext-card-top { display:flex; align-items:flex-start; gap:10px; }
.ecext-card-name { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.ecext-card-name b { font-size:14px; color:var(--ecv2-g900, #111827); overflow-wrap:anywhere; }
.ecext-card-chips { flex:0 1 auto; display:flex; flex-direction:column; align-items:flex-end; gap:4px; max-width:55%; }
.ecext-card-chips:empty { display:none; }
.ecext-card-name small { font-size:11.5px; color:var(--ecv2-g500, #6b7280); }
.ecext-card-desc { flex:1 1 auto; margin:0; font-size:12.5px; line-height:1.5; color:var(--ecv2-g600, #4b5563); }
.ecext-card-note { margin:0; font-size:11.5px; color:#92400e; }
.ecext-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--ecv2-g100, #f3f4f6); min-height:40px; }
/* 6.0.3: a status that runs to two lines wraps beside its dot ( flex-wrap:wrap dropped the text below it ) */
.ecext-card-status { display:inline-flex; align-items:flex-start; gap:6px; flex-wrap:nowrap; font-size:12px; color:var(--ecv2-g500, #6b7280); min-width:0; }
.ecext-card-status > .ecext-dot { margin-top:5px; }
.ecext-card-actions { display:flex; gap:6px; flex-wrap:wrap; }
/* 6.0.2: a platform icon before a button label ( icon_svg(): the store manager apps ). */
.ecext-btn-icon { flex:0 0 auto; width:14px; height:14px; margin-right:6px; vertical-align:-2px; }
.ecext-card-actions .dashicons, .ecext-row-actions .dashicons, .ecext-panel-actions .dashicons, .ecext-banner-actions .dashicons { font-size:13px; width:13px; height:13px; line-height:13px; }
.ecext-empty { margin:16px 0; color:var(--ecv2-g500, #6b7280); }

/* ---------- An extension's own page, and inline panels ---------- */
.ecext-panel { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 16px; background:#fff; border:1px solid var(--ecv2-g200, #e5e7eb); border-radius:var(--ecv2-rl, 12px); }
.ecext-panel.is-inline { padding:10px 12px; background:var(--ecv2-g50, #f9fafb); border-radius:var(--ecv2-r, 8px); }
.ecext-panel-status { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ecv2-g600, #4b5563); flex:1 1 240px; }
.ecext-panel-actions { display:flex; gap:8px; flex-wrap:wrap; }
.ecext .ecv2-page-title .ecv2-cl-pro-badge, .ecext .ecv2-page-title .ecext-chip { margin-left:6px; }

/* ---------- Rows on other screens ( Taxes, Integrations ) ---------- */
.ecext-slot { display:flex; flex-direction:column; gap:8px; }
.ecext-row { display:grid; grid-template-columns:36px minmax(0, 1fr) auto; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--ecv2-g200, #e5e7eb); border-radius:var(--ecv2-r, 8px); background:#fff; }
.ecext-row-text { display:flex; flex-direction:column; gap:2px; min-width:0; font-size:12.5px; color:var(--ecv2-g600, #4b5563); }
.ecext-row-text b { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; color:var(--ecv2-g900, #111827); }
.ecext-row-text > span { display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ecext-row-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.ecext-slot-more { margin:2px 0 0; font-size:12.5px; }
/* 6.0.2: Offers hub, under the Overview: the deal-site row, or while Groupon & Deal Sites is not active a quiet tip with a × to hide it. */
.ecext-offer-tools { margin:18px 0 0; }
.ecext-tip { display:flex; align-items:flex-start; gap:8px; margin:0; padding:10px 2px 0; border-top:1px solid var(--ecv2-g200, #e5e7eb); font-size:12.5px; line-height:1.5; color:var(--ecv2-g500, #6b7280); }
.ecext-tip .dashicons { flex:0 0 auto; width:16px; height:16px; font-size:16px; margin-top:1px; color:var(--ecv2-g400, #9ca3af); }
.ecext-tip-text { flex:1 1 auto; min-width:0; }
.ecext-tip-text a, .ecext-tip-link { color:var(--ec-brand, #2271b1); text-decoration:underline; }
.ecext-tip-link { padding:0; border:0; background:none; font:inherit; cursor:pointer; }
.ecext-tip .ecext-tip-close { flex:0 0 auto; padding:0 4px; font-size:17px; line-height:1.1; color:var(--ecv2-g400, #9ca3af); text-decoration:none; border-radius:4px; }
.ecext-tip .ecext-tip-close:hover, .ecext-tip .ecext-tip-close:focus { color:var(--ecv2-g700, #374151); }

/* ---------- The order screen's label popup ---------- */
button.ecext-svc { width:100%; font:inherit; text-align:left; cursor:pointer; }
.ecext-svc .ecv2-cl-pro-badge, .ecext-svc .ecext-chip { margin-left:4px; }
.ecext-svc-more { margin:8px 0 0; font-size:12px; color:var(--ecv2-g500, #6b7280); }

/* ---------- The product editor's Product tabs card ---------- */
.ecext-tabs-sample { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 10px; }
.ecext-tabs-sample span { font-size:12px; padding:4px 10px; border:1px dashed var(--ecv2-g300, #d1d5db); border-radius:6px; color:var(--ecv2-g500, #6b7280); background:#fff; }
.ecdv2-card-title .ecv2-cl-pro-badge { margin-left:6px; }

@media screen and (max-width:600px) {
	.ecext-banner { flex-wrap:wrap; }
	.ecext-search, .ecext-search input { width:100%; }
	.ecext-row { grid-template-columns:36px minmax(0, 1fr); }
	.ecext-row-actions { grid-column:1 / -1; justify-content:flex-start; }
}
/* 6.0.2: the neutral logo tile of the "label extensions" row in the order screen's label window ( was an inline colour ). */
.ecodv2-svc-logo.is-neutral { background: var( --ecv2-g400, #9ca3af ); }