/* ============================================================
   Pros & Cons Block — front-end styles
   Inherits CSS vars from Casino Card Block when active;
   falls back to matching hard-coded values otherwise.
   ============================================================ */

.pcb-block {
	--pcb-pro:      var(--ccb-pro-color,                  #44be4c);
	--pcb-con:      var(--ccb-con-color,                  #be4444);
	--pcb-bg:       var(--ccb-boxes-bg-color,             #f0f3f7);
	--pcb-bg2:      var(--ccb-boxes-secondary-bg-color,   #e8ecf2);
	--pcb-text:     var(--ccb-text-color,                 #1d2730);
	--pcb-muted:    var(--ccb-boxes-text-color,           #4a5b68);
	--pcb-radius:   var(--ccb-border-radius,              8px);

	background:    var(--pcb-bg);
	border-radius: var(--pcb-radius);
	padding:       24px 28px;
	margin:        0 0 24px;
	color:         var(--pcb-text);
	font-family:   inherit;
	box-sizing:    border-box;
}

/* ── Title ─────────────────────────────────────────────────── */
.pcb-title {
	font-size:     1.15rem;
	font-weight:   700;
	margin:        0 0 20px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--pcb-bg2);
	color:         var(--pcb-text);
	line-height:   1.3;
}

/* ── Two-column grid ───────────────────────────────────────── */
.pcb-columns {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   20px;
}

@media (max-width: 560px) {
	.pcb-columns {
		grid-template-columns: 1fr;
	}
}

/* ── Column header label ───────────────────────────────────── */
.pcb-label {
	font-size:      0.72rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin:         0 0 10px;
	display:        flex;
	align-items:    center;
	gap:            7px;
}

.pcb-label::before {
	content:       '';
	display:       inline-block;
	width:         18px;
	height:        3px;
	border-radius: 2px;
	flex-shrink:   0;
}

.pcb-label--pro        { color: var(--pcb-pro); }
.pcb-label--pro::before{ background: var(--pcb-pro); }
.pcb-label--con        { color: var(--pcb-con); }
.pcb-label--con::before{ background: var(--pcb-con); }

/* ── List ──────────────────────────────────────────────────── */
.pcb-list {
	list-style:     none;
	margin:         0;
	padding:        0;
	display:        flex;
	flex-direction: column;
	gap:            7px;
}

/* ── List item ─────────────────────────────────────────────── */
.pcb-item {
	display:       flex;
	align-items:   flex-start;
	gap:           9px;
	background:    var(--pcb-bg2);
	border-radius: calc(var(--pcb-radius) * 0.65);
	padding:       8px 12px;
	font-size:     0.875rem;
	line-height:   1.55;
	color:         var(--pcb-muted);
}

/* ── Bullet icon ───────────────────────────────────────────── */
.pcb-icon {
	flex-shrink:     0;
	width:           18px;
	height:          18px;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin-top:      2px;
	font-style:      normal;
}

.pcb-icon--pro {
	background: var(--pcb-pro);
}

/* Checkmark via CSS border trick */
.pcb-icon--pro::after {
	content:       '';
	display:       block;
	width:         9px;
	height:        5px;
	border-left:   2px solid #fff;
	border-bottom: 2px solid #fff;
	transform:     rotate(-45deg) translate(1px, -1px);
}

.pcb-icon--con {
	background: var(--pcb-con);
}

.pcb-icon--con::after {
	content:     '×';
	color:       #fff;
	font-size:   13px;
	font-weight: 700;
	line-height: 1;
	margin-top:  -1px;
}

/* ── Item text ─────────────────────────────────────────────── */
.pcb-item__text {
	flex: 1;
	min-width: 0;
}