/* ===== TLX COA Manager — frontend (TechnoLabX dark theme) ===== */

/* View COA button (matches Add to Cart gradient) */
.tlx-coa-btn-wrap{margin:14px 0;}
.tlx-coa-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	height:42px;
	padding:0 24px;
	border:0;
	border-radius:7px;
	background:linear-gradient(135deg,#1e7bff,#8c4dff);
	color:#fff !important;
	font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
	font-size:13px;
	font-weight:800;
	line-height:1;
	letter-spacing:.06em;
	text-transform:uppercase;
	text-decoration:none !important;
	cursor:pointer;
	box-shadow:0 10px 24px rgba(30,123,255,.35);
	transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.tlx-coa-btn:hover{
	transform:translateY(-1px);
	box-shadow:0 14px 30px rgba(140,77,255,.45);
	filter:brightness(1.08);
	color:#fff !important;
}
.tlx-coa-btn:active{transform:translateY(0);}
.tlx-coa-btn svg{width:15px;height:15px;flex:0 0 auto;}
.tlx-coa-btn-arrow{font-size:15px;line-height:1;transform:translateY(-1px);}

/* Current pill */
.tlx-coa-pill{
	display:inline-flex;
	align-items:center;
	padding:3px 10px;
	border-radius:999px;
	background:linear-gradient(135deg,#1e7bff,#8c4dff);
	color:#fff;
	font-size:10px;
	font-weight:700;
	line-height:1.5;
	letter-spacing:.06em;
	text-transform:uppercase;
	box-shadow:0 5px 12px rgba(30,123,255,.30);
	white-space:nowrap;
}

/* Shortcode list — dark shell matched to the site's panels */
.tlx-coa-list{
	position:relative;
	width:min(1280px,100%);
	margin:0 auto;
	background:rgba(13,20,40,.88);
	border:1px solid rgba(255,255,255,.08);
	border-radius:20px;
	box-shadow:0 24px 55px rgba(0,0,0,.45);
	overflow:hidden;
	scroll-margin-top:120px;
	font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.tlx-coa-list::before{
	content:"";
	position:absolute;
	inset:0 0 auto 0;
	height:5px;
	background:linear-gradient(90deg,#18d6ff,#1e7bff,#8c4dff);
	z-index:1;
}

/* Header: optional title + compact search */
.tlx-coa-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
	padding:24px 22px 6px;
}
.tlx-coa-title{
	margin:0;
	font-size:24px;
	font-weight:900;
	color:#f2f5fd;
	line-height:1.2;
}
.tlx-coa-searchbar{flex:1 1 260px;min-width:220px;}
.tlx-coa-list .tlx-coa-search,
.tlx-coa-list input.tlx-coa-search[type="search"]{
	width:100% !important;
	max-width:none !important;
	height:42px !important;
	margin:0 !important;
	padding:0 16px 0 40px !important;
	border:1px solid rgba(255,255,255,.16) !important;
	border-radius:10px !important;
	box-shadow:none;
	background:rgba(7,12,26,.9) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238b98b8" stroke-width="2.4" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 14px center !important;
	background-size:16px 16px !important;
	color:#eef2fb !important;
	font-family:inherit !important;
	font-size:14px !important;
	line-height:40px !important;
	outline:none;
	transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
	box-sizing:border-box !important;
	-webkit-appearance:none;
	appearance:none;
}
.tlx-coa-list .tlx-coa-search:focus{
	border-color:#1e7bff !important;
	background-color:rgba(7,12,26,1) !important;
	box-shadow:0 0 0 3px rgba(30,123,255,.25);
}
.tlx-coa-list .tlx-coa-search::placeholder{color:#8b98b8;}

/* Card grid — rows stretch to the tallest card */
.tlx-coa-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:18px;
	padding:16px 22px 24px;
	align-items:stretch;
}
@media(max-width:980px){.tlx-coa-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){.tlx-coa-grid{grid-template-columns:1fr;}}

.tlx-coa-card{
	display:flex;
	flex-direction:column;
	background:#0d1428;
	border:1px solid rgba(255,255,255,.09);
	border-radius:14px;
	box-shadow:0 10px 24px rgba(0,0,0,.35);
	overflow:hidden;
	transition:border-color .15s ease;
}
.tlx-coa-card:hover{border-color:rgba(30,123,255,.45);}
.tlx-coa-card.tlx-hidden{display:none;}
.tlx-coa-card-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:14px 16px;
	background:#101b38;
	border-bottom:1px solid rgba(255,255,255,.08);
}
.tlx-coa-card-title{
	margin:0;
	font-size:16px;
	font-weight:800;
	color:#f2f5fd;
	line-height:1.25;
	min-width:0;
}
.tlx-coa-count{
	display:inline-flex;
	align-items:center;
	padding:3px 11px;
	border-radius:999px;
	background:rgba(24,214,255,.10);
	border:1px solid rgba(24,214,255,.35);
	color:#18d6ff;
	font-size:11px;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	white-space:nowrap;
	flex:0 0 auto;
}
.tlx-coa-card-body{
	position:relative;
	flex:1 1 auto;
	padding:6px 16px 12px;
	max-height:320px;
	overflow:hidden;
}
.tlx-coa-card.is-open .tlx-coa-card-body{max-height:none;}
.tlx-coa-card.is-clamped:not(.is-open) .tlx-coa-card-body::after{
	content:"";
	position:absolute;
	inset:auto 0 0 0;
	height:56px;
	background:linear-gradient(180deg,rgba(13,20,40,0),#0d1428 85%);
	pointer-events:none;
}
.tlx-coa-showmore[hidden]{display:none !important;}
.tlx-coa-showmore{
	display:block;
	width:100%;
	padding:10px 16px;
	border:0;
	border-top:1px solid rgba(255,255,255,.08);
	background:#0d1428;
	color:#18d6ff;
	font-family:inherit;
	font-size:13px;
	font-weight:700;
	cursor:pointer;
	transition:background .14s ease;
	-webkit-appearance:none;
	appearance:none;
}
.tlx-coa-showmore:hover{background:rgba(30,123,255,.10);}

/* Groups inside a card */
.tlx-coa-variation{
	padding:9px 0 3px;
	font-weight:700;
	font-size:12px;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:#18d6ff;
}
.tlx-coa-rows{list-style:none;margin:0;padding:0;}
.tlx-coa-row{
	display:flex;
	align-items:center;
	gap:10px;
	padding:6px 0;
	border-top:1px solid rgba(255,255,255,.06);
	font-size:14px;
	margin:0;
}
.tlx-coa-rows:first-child .tlx-coa-row:first-child{border-top:0;}
.tlx-coa-row a{color:#e9eefb;text-decoration:none;font-weight:600;min-width:0;overflow-wrap:anywhere;}
.tlx-coa-row a:hover{color:#5ea0ff;}
.tlx-coa-row.is-historic a{color:#93a0bd;font-weight:500;}
.tlx-coa-row.is-historic a:hover{color:#5ea0ff;}
.tlx-coa-context{color:#93a0bd;font-size:12px;}
.tlx-coa-noresults{padding:22px;color:#93a0bd;border-top:1px solid rgba(255,255,255,.08);}
.tlx-coa-empty{color:#93a0bd;}