.dcc-wrap-front {
	--dcc-bg: #0b0e14;
	--dcc-panel: #151a24;
	--dcc-border: #262d3a;
	--dcc-text: #eef1f6;
	--dcc-muted: #9aa4b5;
	--dcc-blue: #1568c9;
	--dcc-blue-deep: #0e4f9e;
	--dcc-blue-tint: #eaf3fd;

	container-type: inline-size;
	container-name: dcc;
	max-width: 1180px;
	margin: 0 auto;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--dcc-text);
}

.dcc-kicker {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dcc-muted);
	margin: 0 0 12px;
	text-align: center;
}

/* ---------------- table (desktop / tablet) ---------------- */
.dcc-table-view {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(226, 232, 240, 0.16);
    background: rgba(255, 255, 255, 0.10);
    padding: 20px;
	gap:20px;
}

.dcc-col-us .dcc-row:last-child, .dcc-col-ditinus .dcc-row:last-child {
	border-radius: 0 0 20px 20px;
}

.dcc-col { display: flex; flex-direction: column;  }
.dcc-head {
	padding: 16px 0px;
	font-weight: 700;
	font-size: 14.5px;
	display: flex;
	align-items: center;
	min-height: 56px;
}
.dcc-head-label { color: #FFF; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; align-items: flex-end; }
.dcc-head-us {
    color: #fff;
	padding: 16px 15px;
    border-radius: 20px 20px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.13);
	justify-content: center;
}
.dcc-head-ditinus {
    background: linear-gradient(135deg, var(--dcc-blue) 0%, var(--dcc-blue-deep) 100%);
    color: #fff;
    border-radius: 20px 20px 0 0;
    background: #0D72B8;
	padding: 16px 20px;
	justify-content: center;
}

.dcc-row {
	padding: 16px 0px;
	font-size: 14px;
	min-height: 60px;
	display: flex;
	font-weight: 500;
	align-items: center;
	gap: 10px;
}
.dcc-col-us .dcc-row {
	padding: 16px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.10);
}


.dcc-col-ditinus .dcc-row { background: var(--dcc-blue-tint);color: #1E293B; padding: 16px 10px;  border-top: 1px solid #cfe1f8; font-weight: 500; }
.dcc-col-ditinus .dcc-row.dcc-win { color: #1E293B; }

.dcc-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.dcc-ic svg { width: 30px; height: 30px; max-width: 100%; max-height: 100%; }

/* ---------------- card stack (mobile) ---------------- */
.dcc-card-view { display: none; flex-direction: column; gap: 12px; }
.dcc-card { border: 1px solid var(--dcc-border); border-radius: 14px; background: var(--dcc-panel); overflow: hidden; }
.dcc-card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	font-size: 13.5px;
	font-weight: 700;
	background: #1a212c;
	border-bottom: 1px solid var(--dcc-border);
}
.dcc-card-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; font-size: 13px; }
.dcc-card-row + .dcc-card-row { border-top: 1px solid var(--dcc-border); }
.dcc-card-row .dcc-tag { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dcc-muted); font-weight: 700; flex-shrink: 0; }
.dcc-card-row .dcc-val { text-align: right; font-weight: 600; color: #dbe1ea; }
.dcc-card-row.dcc-win { background: var(--dcc-blue-tint); }
.dcc-card-row.dcc-win .dcc-tag { color: #0b5fc9; }
.dcc-card-row.dcc-win .dcc-val { color: #0b3a70; }

/* ---------------- breakpoint ---------------- */
/* Container query on the table's own wrapper, so it switches to
   cards based on the actual space it's rendered in (a narrow sidebar,
   an Elementor column, the admin preview panel) rather than only the
   full browser viewport width. */
@container dcc (max-width: 759px) {
	.dcc-table-view { display: none; }
	.dcc-card-view { display: flex; }
}
/* Fallback for older browsers without container query support. */
@supports not (container-type: inline-size) {
	@media (max-width: 759px) {
		.dcc-table-view { display: none; }
		.dcc-card-view { display: flex; }
	}
}