/**
 * TradingOnline.com - Stili widget recensione broker
 * Caricato condizionalmente solo su pagine con shortcode broker_*.
 * Palette: viola brand #4907d9, verde accent #04be68, fucsia #d4537e per controfocali.
 * Font: Roboto (eredità tema).
 * Mobile-first, responsive a 768px.
 *
 * @version 1.0.0
 */

/* =============================================================================
 * VARIABLES — palette e tokens
 * ========================================================================== */
:root {
	--brk-purple:      #4907d9;
	--brk-purple-d:    #38059f;
	--brk-purple-tint: #f3eefe;
	--brk-purple-soft: #e6dcfb;
	--brk-green:       #04be68;
	--brk-green-d:     #039a55;
	--brk-pink:        #d4537e;
	--brk-pink-tint:   #fceef3;
	--brk-amber:       #ba7517;
	--brk-amber-tint:  #fdf3e1;
	--brk-text:        #1b1e25;
	--brk-text-muted:  #5e6772;
	--brk-text-faint:  #8c95a0;
	--brk-bg:          #ffffff;
	--brk-bg-soft:     #f5f6fa;
	--brk-border:      #e3e7ee;
	--brk-radius:      8px;
	--brk-radius-lg:   12px;
	--brk-shadow-sm:   0 1px 3px rgba(27, 30, 37, 0.06);
	--brk-shadow-md:   0 4px 12px rgba(27, 30, 37, 0.08);
}

/* =============================================================================
 * BASE — tipografia condivisa
 * ========================================================================== */
.brk-hero,
.brk-authors,
.brk-card,
.brk-bonus-cta {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--brk-text);
	line-height: 1.5;
	box-sizing: border-box;
}
.brk-hero *,
.brk-authors *,
.brk-card *,
.brk-bonus-cta * {
	box-sizing: border-box;
}

.brk-error {
	background: var(--brk-pink-tint);
	color: var(--brk-pink);
	padding: 12px 16px;
	border-radius: var(--brk-radius);
	font-size: 14px;
	margin: 12px 0;
}

/* =============================================================================
 * HERO CARD
 * ========================================================================== */
.brk-hero {
	background: var(--brk-bg);
	border: 1px solid var(--brk-border);
	border-radius: var(--brk-radius-lg);
	padding: 20px;
	margin: 24px 0 16px;
	box-shadow: var(--brk-shadow-md);
}
.brk-hero-grid {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 18px;
	align-items: center;
}
.brk-hero-logo img {
	width: 140px;
	height: auto;
	display: block;
	max-height: 60px;
	object-fit: contain;
}
.brk-hero-logo-placeholder {
	width: 90px;
	height: 60px;
	background: var(--brk-purple-tint);
	color: var(--brk-purple);
	border-radius: var(--brk-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
}
.brk-hero-titles {
	min-width: 0;
}
.brk-hero-title-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}
.brk-hero-title {
	font-size: 26px;
	font-weight: 700;
	margin: 0;
	color: var(--brk-text);
	line-height: 1.2;
}
.brk-hero-subtitle {
	margin: 0;
	font-size: 13px;
	color: var(--brk-text-muted);
}
.brk-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	letter-spacing: 0.2px;
	white-space: nowrap;
}
.brk-badge i { font-size: 10px; }
.brk-badge-license {
	background: var(--brk-purple-tint);
	color: var(--brk-purple);
}
.brk-badge-tested {
	background: var(--brk-pink-tint);
	color: var(--brk-pink);
}
.brk-hero-score {
	text-align: center;
	padding-left: 20px;
	border-left: 1px solid var(--brk-border);
	min-width: 110px;
}
.brk-hero-score-value {
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	color: var(--brk-purple);
}
.brk-hero-score-max {
	font-size: 16px;
	color: var(--brk-text-faint);
	font-weight: 400;
}
.brk-hero-stars {
	margin: 6px 0 4px;
	display: flex;
	gap: 2px;
	justify-content: center;
}
.brk-hero-stars i,
.brk-star-full,
.brk-star-half,
.brk-star-empty {
	font-size: 14px;
}
.brk-star-full,
.brk-star-half { color: var(--brk-amber); }
.brk-star-empty { color: var(--brk-border); }
.brk-hero-meta {
	font-size: 11px;
	color: var(--brk-text-muted);
}

.brk-hero-metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-top: 18px;
}
.brk-metric {
	background: var(--brk-purple-tint);
	padding: 12px 14px;
	border-radius: var(--brk-radius);
}
.brk-metric-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--brk-purple-d);
	letter-spacing: 0.4px;
	margin-bottom: 4px;
}
.brk-metric-value {
	font-size: 17px;
	font-weight: 700;
	color: var(--brk-text);
}
.brk-metric-value .brk-yes { color: var(--brk-green); }
.brk-metric-value .brk-no  { color: var(--brk-pink); }

.brk-hero-actions {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}
.brk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 13px 20px;
	border-radius: var(--brk-radius);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.18s ease;
	cursor: pointer;
	border: none;
}
.brk-btn-primary {
	flex: 1;
	background: var(--brk-green);
	color: #ffffff;
	box-shadow: 0 2px 6px rgba(4, 190, 104, 0.25);
}
.brk-btn-primary:hover {
	background: var(--brk-green-d);
	color: #ffffff;
	box-shadow: 0 4px 10px rgba(4, 190, 104, 0.35);
	text-decoration: none;
}
.brk-btn-secondary {
	background: transparent;
	color: var(--brk-purple);
	border: 1.5px solid var(--brk-purple);
}
.brk-btn-secondary:hover {
	background: var(--brk-purple);
	color: #ffffff;
	text-decoration: none;
}

/* =============================================================================
 * AUTHORS BOX
 * ========================================================================== */
.brk-authors {
	background: var(--brk-pink-tint);
	border-radius: var(--brk-radius-lg);
	padding: 14px 18px;
	margin: 16px 0;
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	flex-wrap: wrap;
}
.brk-author-block {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.brk-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
}
.brk-avatar-author   { background: var(--brk-pink); color: #ffffff; }
.brk-avatar-reviewer { background: var(--brk-purple); color: #ffffff; }
.brk-author-name {
	font-weight: 600;
	color: var(--brk-text);
	font-size: 13px;
}
.brk-author-role {
	font-size: 11px;
	color: var(--brk-text-muted);
}
.brk-verified {
	color: var(--brk-purple);
	font-size: 12px;
}
.brk-author-divider {
	width: 1px;
	background: rgba(212, 83, 126, 0.3);
	align-self: stretch;
}
.brk-author-trust {
	margin-left: auto;
	font-size: 11px;
	color: var(--brk-text-muted);
	text-align: right;
	line-height: 1.4;
}
.brk-author-trust i { color: var(--brk-purple); }
.brk-author-trust a {
	color: var(--brk-purple);
	text-decoration: none;
	font-weight: 600;
}

/* =============================================================================
 * CARD — generica per scores/specs/compare/calc
 * ========================================================================== */
.brk-card {
	background: var(--brk-bg);
	border: 1px solid var(--brk-border);
	border-radius: var(--brk-radius-lg);
	padding: 20px 22px;
	margin: 16px 0;
	box-shadow: var(--brk-shadow-sm);
}
.brk-card-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 14px;
	flex-wrap: wrap;
	gap: 8px;
}
.brk-card-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--brk-text);
}
.brk-card-meta {
	font-size: 11px;
	color: var(--brk-text-muted);
	font-weight: 500;
}

/* =============================================================================
 * SCORES
 * ========================================================================== */
.brk-scores-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 28px;
}
.brk-score-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.brk-score-label {
	font-size: 13px;
	flex: 0 0 140px;
	color: var(--brk-text-muted);
}
.brk-score-bar {
	flex: 1;
	height: 7px;
	background: var(--brk-bg-soft);
	border-radius: 4px;
	overflow: hidden;
}
.brk-score-fill {
	height: 100%;
	background: var(--brk-purple);
	border-radius: 4px;
}
.brk-score-top  .brk-score-fill { background: var(--brk-purple); }
.brk-score-mid  .brk-score-fill { background: #7d6ce6; }
.brk-score-avg  .brk-score-fill { background: var(--brk-pink); }
.brk-score-low  .brk-score-fill { background: var(--brk-amber); }
.brk-score-num {
	font-size: 13px;
	font-weight: 700;
	color: var(--brk-purple);
	flex: 0 0 32px;
	text-align: right;
}

/* =============================================================================
 * SPECS
 * ========================================================================== */
.brk-specs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 28px;
}
.brk-spec-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 9px 0;
	border-bottom: 1px solid var(--brk-border);
	font-size: 13px;
	gap: 12px;
}
.brk-spec-label {
	color: var(--brk-text-muted);
	flex-shrink: 0;
}
.brk-spec-val {
	font-weight: 600;
	color: var(--brk-text);
	text-align: right;
}
.brk-yes { color: var(--brk-green); }
.brk-no  { color: var(--brk-pink); }

/* =============================================================================
 * COMPARE TABLE
 * ========================================================================== */
.brk-compare-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.brk-compare-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	min-width: 480px;
}
.brk-compare-table th,
.brk-compare-table td {
	padding: 10px 12px;
	text-align: center;
	border-bottom: 1px solid var(--brk-border);
}
.brk-compare-table thead th {
	background: var(--brk-bg-soft);
	font-weight: 700;
	color: var(--brk-text);
}
.brk-compare-table .brk-compare-feature {
	text-align: left;
	color: var(--brk-text-muted);
	font-weight: 500;
}
.brk-compare-table .brk-compare-current {
	background: var(--brk-purple-tint);
	color: var(--brk-purple-d);
	font-weight: 700;
}
.brk-compare-table thead .brk-compare-current {
	background: var(--brk-purple);
	color: #ffffff;
}

/* =============================================================================
 * CALCULATOR
 * ========================================================================== */
.brk-calc-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items: end;
}
.brk-calc-input { display: flex; flex-direction: column; gap: 6px; }
.brk-calc-label {
	font-size: 12px;
	color: var(--brk-text-muted);
	font-weight: 500;
}
.brk-calc-input input[type="range"] {
	width: 100%;
	accent-color: var(--brk-purple);
	margin: 4px 0;
}
.brk-calc-value-display {
	font-size: 18px;
	font-weight: 700;
	color: var(--brk-text);
}
.brk-calc-output {
	background: var(--brk-purple-tint);
	border: 1px solid var(--brk-purple-soft);
	padding: 14px 16px;
	border-radius: var(--brk-radius);
}
.brk-calc-result {
	font-size: 24px;
	font-weight: 700;
	color: var(--brk-purple);
	margin: 4px 0 2px;
}
.brk-calc-compare {
	font-size: 11px;
	color: var(--brk-purple-d);
}
.brk-calc-disclaimer {
	font-size: 11px;
	color: var(--brk-text-faint);
	margin: 12px 0 0;
	font-style: italic;
}

/* =============================================================================
 * BONUS CTA — gradient finale
 * ========================================================================== */
.brk-bonus-cta {
	background: linear-gradient(135deg, var(--brk-purple) 0%, var(--brk-pink) 100%);
	border-radius: var(--brk-radius-lg);
	padding: 22px;
	margin: 20px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	box-shadow: var(--brk-shadow-md);
}
.brk-bonus-text {
	color: #ffffff;
	flex: 1;
	min-width: 0;
}
.brk-bonus-eyebrow {
	font-size: 11px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.85);
	text-transform: uppercase;
	letter-spacing: 0.7px;
	margin-bottom: 4px;
}
.brk-bonus-title {
	font-size: 18px;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 4px;
	line-height: 1.3;
}
.brk-bonus-desc {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
}
.brk-bonus-btn {
	background: #ffffff;
	color: var(--brk-purple);
	padding: 13px 22px;
	border-radius: var(--brk-radius);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.brk-bonus-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
	color: var(--brk-purple);
	text-decoration: none;
}

/* =============================================================================
 * RESPONSIVE — mobile breakpoint 768px
 * ========================================================================== */
@media (max-width: 768px) {
	.brk-hero { padding: 16px; }
	.brk-hero-grid {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"logo titles"
			"score score";
		gap: 14px;
	}
	.brk-hero-logo   { grid-area: logo; }
	.brk-hero-titles { grid-area: titles; }
	.brk-hero-score  {
		grid-area: score;
		border-left: none;
		border-top: 1px solid var(--brk-border);
		padding-left: 0;
		padding-top: 14px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 14px;
	}
	.brk-hero-score-value { font-size: 32px; }
	.brk-hero-stars { margin: 0; }
	.brk-hero-title { font-size: 22px; }
	.brk-hero-metrics { grid-template-columns: repeat(2, 1fr); }
	.brk-hero-actions { flex-direction: column; }
	.brk-btn-primary, .brk-btn-secondary { flex: 1; width: 100%; }

	.brk-authors {
		flex-direction: column;
		align-items: flex-start;
	}
	.brk-author-divider { display: none; }
	.brk-author-trust {
		margin-left: 0;
		text-align: left;
		border-top: 1px solid rgba(212, 83, 126, 0.2);
		padding-top: 10px;
		width: 100%;
	}

	.brk-scores-grid,
	.brk-specs-grid {
		grid-template-columns: 1fr;
		gap: 8px 0;
	}
	.brk-score-label { flex: 0 0 110px; font-size: 12px; }

	.brk-calc-body { grid-template-columns: 1fr; }

	.brk-bonus-cta {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.brk-bonus-btn { justify-content: center; }
	.brk-card { padding: 16px; }
	.brk-card-title { font-size: 16px; }
}

/* =============================================================================
 * LISTICLE TABLE — [broker_top_table]
 * Tabella classifica per /migliori-broker-X/, scroll mobile con sticky col.
 * ========================================================================== */
.brk-list-wrapper {
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--brk-text);
	margin: 24px 0;
}
.brk-list-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 14px;
	color: var(--brk-text);
}
.brk-list-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--brk-radius-lg);
	border: 1px solid var(--brk-border);
	box-shadow: var(--brk-shadow-md);
	background: var(--brk-bg);
}
.brk-list-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 760px;
}
.brk-list-table thead {
	background: var(--brk-purple-tint);
}
.brk-list-table thead th {
	padding: 13px 14px;
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	color: var(--brk-purple-d);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
	border-bottom: 1px solid var(--brk-purple-soft);
}
.brk-list-table thead .brk-list-col-rank,
.brk-list-table thead .brk-list-col-cta {
	text-align: center;
}
.brk-list-table tbody tr {
	border-bottom: 1px solid var(--brk-border);
	transition: background 0.15s ease;
}
.brk-list-table tbody tr:last-child { border-bottom: none; }
.brk-list-table tbody tr:hover { background: var(--brk-bg-soft); }
.brk-list-table .brk-list-row-top {
	background: linear-gradient(90deg, var(--brk-purple-tint) 0%, transparent 100%);
}
.brk-list-table .brk-list-row-top:hover {
	background: linear-gradient(90deg, var(--brk-purple-soft) 0%, var(--brk-bg-soft) 100%);
}
.brk-list-table tbody td {
	padding: 16px 14px;
	vertical-align: middle;
}

/* Colonna # (rank) */
.brk-list-col-rank {
	width: 40px;
	text-align: center;
}
.brk-list-rank-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--brk-purple);
	color: #ffffff;
	font-weight: 700;
	font-size: 13px;
}
.brk-list-row-top .brk-list-rank-num {
	background: linear-gradient(135deg, var(--brk-purple) 0%, var(--brk-pink) 100%);
	box-shadow: 0 2px 6px rgba(73, 7, 217, 0.3);
}

/* Colonna broker */
.brk-list-col-broker {
	min-width: 200px;
}
.brk-list-broker-cell {
	display: flex;
	align-items: center;
	gap: 12px;
}
.brk-list-broker-logo {
	flex-shrink: 0;
	width: 80px;
	height: 36px;
	display: flex;
	align-items: center;
}
.brk-list-broker-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.brk-list-broker-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.brk-list-broker-name {
	font-weight: 700;
	font-size: 15px;
	color: var(--brk-text);
	text-decoration: none;
	line-height: 1.2;
}
.brk-list-broker-name:hover {
	color: var(--brk-purple);
	text-decoration: none;
}
.brk-list-broker-score {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--brk-text-muted);
}
.brk-list-score-num {
	font-weight: 700;
	color: var(--brk-purple);
}
.brk-list-score-stars i {
	font-size: 10px;
}
.brk-list-mobile-cta {
	display: none;
}

/* Celle dati */
.brk-list-table tbody td:not(.brk-list-col-broker):not(.brk-list-col-rank):not(.brk-list-col-cta) {
	font-size: 13px;
	color: var(--brk-text);
	font-weight: 500;
	white-space: nowrap;
}
.brk-list-muted {
	color: var(--brk-text-faint);
}
.brk-list-bonus {
	display: inline-block;
	font-size: 12px;
	color: var(--brk-pink);
	font-weight: 600;
	max-width: 180px;
	white-space: normal;
	line-height: 1.3;
}

/* Colonna CTA */
.brk-list-col-cta {
	width: 130px;
	text-align: center;
	white-space: nowrap;
}
.brk-list-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: var(--brk-green);
	color: #ffffff;
	padding: 9px 14px;
	border-radius: var(--brk-radius);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.15s ease;
	box-shadow: 0 2px 6px rgba(4, 190, 104, 0.25);
}
.brk-list-cta:hover {
	background: var(--brk-green-d);
	color: #ffffff;
	box-shadow: 0 4px 10px rgba(4, 190, 104, 0.35);
	text-decoration: none;
	transform: translateY(-1px);
}
.brk-list-cta i { font-size: 10px; }
.brk-list-cta-secondary {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	color: var(--brk-purple);
	text-decoration: none;
	font-weight: 500;
}
.brk-list-cta-secondary:hover {
	color: var(--brk-purple-d);
	text-decoration: underline;
}

.brk-list-disclaimer {
	margin-top: 12px;
	font-size: 11px;
	color: var(--brk-text-faint);
	font-style: italic;
	line-height: 1.5;
}
.brk-list-disclaimer a {
	color: var(--brk-purple);
	text-decoration: none;
}
.brk-list-disclaimer a:hover {
	text-decoration: underline;
}

/* Mobile listicle: prima colonna sticky con CTA verde mini */
@media (max-width: 768px) {
	.brk-list-table {
		font-size: 13px;
		min-width: 600px;
	}
	.brk-list-table thead th { padding: 10px 10px; font-size: 11px; }
	.brk-list-table tbody td { padding: 12px 10px; }
	.brk-list-col-broker { min-width: 200px; }

	/* Sticky col: rank + broker fusi */
	.brk-list-table thead .brk-list-col-rank,
	.brk-list-table thead .brk-list-col-broker,
	.brk-list-table tbody .brk-list-col-rank,
	.brk-list-table tbody .brk-list-col-broker {
		position: sticky;
		left: 0;
		background: inherit;
		z-index: 1;
	}
	.brk-list-table thead .brk-list-col-rank,
	.brk-list-table thead .brk-list-col-broker {
		background: var(--brk-purple-tint);
	}
	.brk-list-table tbody tr .brk-list-col-rank,
	.brk-list-table tbody tr .brk-list-col-broker {
		background: var(--brk-bg);
	}
	.brk-list-table tbody tr.brk-list-row-top .brk-list-col-rank,
	.brk-list-table tbody tr.brk-list-row-top .brk-list-col-broker {
		background: var(--brk-purple-tint);
	}
	.brk-list-col-broker {
		box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.06);
	}

	/* CTA mobile inline nella card broker */
	.brk-list-mobile-cta {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		margin-top: 6px;
		padding: 6px 12px;
		background: var(--brk-green);
		color: #ffffff;
		border-radius: 6px;
		font-size: 11px;
		font-weight: 700;
		text-decoration: none;
		width: fit-content;
		box-shadow: 0 1px 3px rgba(4, 190, 104, 0.3);
	}
	.brk-list-mobile-cta:hover {
		background: var(--brk-green-d);
		color: #ffffff;
		text-decoration: none;
	}
	.brk-list-mobile-cta i { font-size: 9px; }

	/* Su mobile la colonna CTA finale diventa secondaria, basta il "Recensione" */
	.brk-list-col-cta .brk-list-cta {
		font-size: 11px;
		padding: 7px 10px;
	}

	.brk-list-broker-logo { width: 60px; height: 30px; }
	.brk-list-broker-name { font-size: 14px; }
}

/* =============================================================================
 * v1.2 — RESTYLE COMPLETO (fix CTA, tooltip, hero, pros/cons, safety, faq, methodology)
 * Estetica più curata: shadows, borders, gradients, gerarchia visiva forte.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * HERO — micro-restyle (più contesto, meno "scatole appiccicate")
 * -------------------------------------------------------------------------- */
.brk-hero {
	background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
	border: 1px solid var(--brk-border);
	border-radius: 14px;
	padding: 24px 26px;
	margin: 28px 0 18px;
	box-shadow: 0 1px 2px rgba(27, 30, 37, 0.04), 0 8px 24px rgba(73, 7, 217, 0.06);
	position: relative;
	overflow: hidden;
}
.brk-hero::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--brk-purple) 0%, var(--brk-pink) 100%);
}
.brk-hero-grid { gap: 22px; align-items: center; }
.brk-hero-title-row { gap: 8px; }
.brk-hero-title {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.3px;
}
.brk-hero-score {
	background: var(--brk-purple-tint);
	border-radius: 12px;
	padding: 14px 18px;
	border: none;
	min-width: 130px;
}
.brk-hero-score-row { gap: 6px; }
.brk-hero-score-value {
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--brk-purple);
	letter-spacing: -1px;
}
.brk-hero-score-max { font-size: 17px; color: var(--brk-text-faint); margin-left: 1px; }
.brk-hero-stars { gap: 3px; margin: 8px 0 4px; }
.brk-hero-stars i { font-size: 15px; }
.brk-hero-meta {
	font-size: 11px;
	color: var(--brk-purple-d);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.brk-hero-metrics {
	gap: 12px;
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px dashed var(--brk-border);
}
.brk-metric {
	background: linear-gradient(180deg, var(--brk-purple-tint) 0%, #ffffff 100%);
	border: 1px solid var(--brk-purple-soft);
	padding: 14px 16px;
	border-radius: 10px;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.brk-metric:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(73, 7, 217, 0.1);
}
.brk-metric-label {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--brk-purple-d);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.brk-metric-value {
	font-size: 18px;
	font-weight: 700;
	color: var(--brk-text);
	margin-top: 5px;
	letter-spacing: -0.2px;
}

.brk-hero-actions { gap: 12px; margin-top: 22px; }

/* -----------------------------------------------------------------------------
 * CTA UNIFICATA — fix conflitto con stile tema
 * Specificità doppia + !important per battere ereditarietà del tema.
 * -------------------------------------------------------------------------- */
.brk-hero a.brk-cta-primary,
.brk-card a.brk-cta-primary,
a.brk-cta-primary,
.brk-cta-primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	background: linear-gradient(180deg, #04ce72 0%, var(--brk-green) 100%) !important;
	color: #ffffff !important;
	padding: 15px 26px !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	transition: all 0.18s ease !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px rgba(4, 190, 104, 0.28) !important;
	border: none !important;
	cursor: pointer !important;
	letter-spacing: 0.1px !important;
	flex: 1 !important;
	text-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
	line-height: 1.2 !important;
}
.brk-hero a.brk-cta-primary:hover,
.brk-card a.brk-cta-primary:hover,
a.brk-cta-primary:hover,
.brk-cta-primary:hover,
.brk-cta-primary:focus,
.brk-cta-primary:visited {
	background: linear-gradient(180deg, var(--brk-green) 0%, var(--brk-green-d) 100%) !important;
	color: #ffffff !important;
	text-decoration: none !important;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 6px 18px rgba(4, 190, 104, 0.4) !important;
	transform: translateY(-1px);
}
.brk-cta-primary > *,
.brk-cta-primary .brk-cta-text,
.brk-cta-primary .brk-cta-icon,
.brk-cta-primary span,
.brk-cta-primary i {
	color: #ffffff !important;
}
.brk-cta-primary .brk-cta-icon,
.brk-cta-primary i {
	font-size: 12px !important;
	opacity: 0.95;
}
.brk-cta-small {
	padding: 10px 18px !important;
	font-size: 13px !important;
	flex: initial !important;
}

.brk-hero a.brk-cta-ghost,
a.brk-cta-ghost,
.brk-cta-ghost {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	background: #ffffff !important;
	color: var(--brk-purple) !important;
	padding: 14px 22px !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border: 1.5px solid var(--brk-purple-soft) !important;
	transition: all 0.18s ease !important;
	box-shadow: 0 1px 2px rgba(73, 7, 217, 0.06) !important;
}
.brk-hero a.brk-cta-ghost:hover,
a.brk-cta-ghost:hover,
.brk-cta-ghost:hover {
	background: var(--brk-purple) !important;
	color: #ffffff !important;
	border-color: var(--brk-purple) !important;
	box-shadow: 0 4px 12px rgba(73, 7, 217, 0.25) !important;
}
.brk-cta-ghost > * { color: inherit !important; }

/* -----------------------------------------------------------------------------
 * INFO ICONS / TOOLTIP — restyle elegante (no box arcaico)
 * -------------------------------------------------------------------------- */
.brk-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--brk-purple-tint);
	border: none;
	padding: 0;
	cursor: help;
	color: var(--brk-purple);
	font-size: 11px;
	margin-left: 6px;
	transition: all 0.15s ease;
	flex-shrink: 0;
}
.brk-info-icon:hover {
	background: var(--brk-purple);
	color: #ffffff;
	transform: scale(1.08);
}
.brk-info-icon i { font-size: 11px; line-height: 1; }

/* Tippy theme override — card galleggiante elegante */
.tippy-box[data-theme~='light'],
.tippy-box {
	background: #ffffff !important;
	color: var(--brk-text) !important;
	border: none !important;
	box-shadow:
		0 0 0 1px rgba(73, 7, 217, 0.06),
		0 4px 12px rgba(0, 0, 0, 0.06),
		0 16px 40px rgba(73, 7, 217, 0.12) !important;
	border-radius: 14px !important;
	overflow: hidden;
}
.tippy-box[data-theme~='light'] .tippy-content,
.tippy-box .tippy-content {
	padding: 0 !important;
	background: transparent !important;
}
.tippy-box[data-theme~='light'] .tippy-arrow,
.tippy-box .tippy-arrow {
	color: #ffffff !important;
}

/* Tooltip pesi voto */
.brk-tt-weights {
	font-family: 'Roboto', sans-serif;
	padding: 16px 18px;
	min-width: 320px;
	max-width: 360px;
}
.brk-tt-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--brk-text);
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--brk-border);
	letter-spacing: -0.1px;
}
.brk-tt-flex { display: flex; gap: 14px; align-items: center; }
.brk-tt-donut { flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(73, 7, 217, 0.1)); }
.brk-tt-rows { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.brk-tt-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	color: var(--brk-text);
}
.brk-tt-dot {
	width: 9px; height: 9px;
	border-radius: 2px;
	flex-shrink: 0;
}
.brk-tt-label { flex: 1; line-height: 1.3; }
.brk-tt-pct { color: var(--brk-purple); font-weight: 700; min-width: 32px; text-align: right; }
.brk-tt-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--brk-purple);
	text-decoration: none;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--brk-border);
	font-weight: 600;
}
.brk-tt-link:hover { gap: 7px; transition: gap 0.15s ease; }
.brk-tt-link i { font-size: 9px; }

/* Tooltip disclaimer */
.brk-tt-disclaimer {
	font-family: 'Roboto', sans-serif;
	font-size: 12.5px;
	line-height: 1.55;
	padding: 14px 16px;
	max-width: 320px;
	color: var(--brk-text);
}
.brk-tt-disclaimer strong { color: var(--brk-purple); }
.brk-tt-disclaimer strong:first-child {
	display: block;
	font-size: 13px;
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--brk-border);
}

/* -----------------------------------------------------------------------------
 * AUTHORS — restyle con avatar badge verificato
 * -------------------------------------------------------------------------- */
.brk-authors {
	background: linear-gradient(135deg, var(--brk-pink-tint) 0%, var(--brk-purple-tint) 100%);
	border: 1px solid rgba(73, 7, 217, 0.08);
	border-radius: 14px;
	padding: 16px 20px;
	margin: 18px 0;
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.brk-author-block {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.brk-avatar-link {
	flex-shrink: 0;
	display: block;
	position: relative;
	text-decoration: none;
}
.brk-avatar-img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #ffffff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	display: block;
}
.brk-avatar-badge {
	position: absolute;
	bottom: -2px; right: -2px;
	width: 18px; height: 18px;
	background: var(--brk-purple);
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #ffffff;
	box-shadow: 0 1px 3px rgba(73, 7, 217, 0.3);
}
.brk-avatar-badge i { font-size: 9px; }
.brk-author-name {
	color: var(--brk-text) !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.brk-author-name:hover { color: var(--brk-purple) !important; }
.brk-verified { color: var(--brk-purple); font-size: 13px; }
.brk-author-role {
	font-size: 11.5px;
	color: var(--brk-text-muted);
	margin-top: 2px;
	line-height: 1.3;
}
.brk-author-divider {
	width: 1px;
	background: rgba(73, 7, 217, 0.12);
	align-self: stretch;
}
.brk-author-trust {
	margin-left: auto;
	font-size: 11px;
	color: var(--brk-text-muted);
	text-align: right;
	line-height: 1.4;
	padding-left: 14px;
	border-left: 1px solid rgba(73, 7, 217, 0.1);
}
.brk-author-trust i { color: var(--brk-purple); margin-right: 2px; }
.brk-author-trust a {
	color: var(--brk-purple) !important;
	text-decoration: none !important;
	font-weight: 700;
}
.brk-author-trust a:hover { text-decoration: underline !important; }

/* -----------------------------------------------------------------------------
 * CARD — base per tutti i blocchi successivi (più "presente", meno appiccicato)
 * -------------------------------------------------------------------------- */
.brk-card {
	background: #ffffff;
	border: 1px solid var(--brk-border);
	border-radius: 14px;
	padding: 24px 26px;
	margin: 22px 0;
	box-shadow: 0 1px 2px rgba(27, 30, 37, 0.03), 0 4px 14px rgba(73, 7, 217, 0.04);
}
.brk-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 18px;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--brk-border);
}
.brk-card-title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--brk-text);
	letter-spacing: -0.2px;
}
.brk-card-meta {
	font-size: 12px;
	color: var(--brk-text-muted);
	font-weight: 500;
}
.brk-card-meta a { color: var(--brk-purple); text-decoration: none; font-weight: 600; }
.brk-card-meta a:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
 * CALCULATOR pending state — più gentile
 * -------------------------------------------------------------------------- */
.brk-calc-pending-msg {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: linear-gradient(135deg, var(--brk-amber-tint) 0%, #fffaf0 100%);
	border: 1px solid #f3d999;
	border-radius: 12px;
	padding: 18px 20px;
}
.brk-calc-pending-msg i {
	color: var(--brk-amber);
	font-size: 24px;
	flex-shrink: 0;
	margin-top: 1px;
}
.brk-calc-pending-msg strong {
	display: block;
	margin-bottom: 4px;
	color: var(--brk-text);
	font-size: 14px;
}
.brk-calc-pending-msg p {
	margin: 0;
	font-size: 13px;
	color: var(--brk-text-muted);
	line-height: 1.5;
}

/* -----------------------------------------------------------------------------
 * PROS / CONS — restyle con header colorato + ombre + gerarchia
 * -------------------------------------------------------------------------- */
.brk-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 22px 0;
}
.brk-proscons-col {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(27, 30, 37, 0.04), 0 8px 18px rgba(0, 0, 0, 0.03);
}
.brk-proscons-pro { border-color: var(--brk-purple-soft); }
.brk-proscons-contro { border-color: rgba(212, 83, 126, 0.25); }

.brk-proscons-header {
	padding: 14px 22px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #ffffff;
}
.brk-proscons-pro .brk-proscons-header {
	background: linear-gradient(135deg, var(--brk-purple) 0%, #6a3fed 100%);
}
.brk-proscons-contro .brk-proscons-header {
	background: linear-gradient(135deg, var(--brk-pink) 0%, #c43c6c 100%);
}
.brk-proscons-header i {
	font-size: 18px;
	color: #ffffff;
}
.brk-proscons-header h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: -0.1px;
}

.brk-proscons-col ul {
	margin: 0;
	padding: 18px 22px 18px 24px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.brk-proscons-col li {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--brk-text);
	padding-left: 24px;
	position: relative;
}
.brk-proscons-pro li::before {
	content: '';
	position: absolute;
	left: 0; top: 7px;
	width: 14px; height: 14px;
	background: var(--brk-purple-tint);
	border-radius: 50%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234907d9'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/></svg>");
	background-size: 11px;
	background-repeat: no-repeat;
	background-position: center;
}
.brk-proscons-contro li::before {
	content: '';
	position: absolute;
	left: 0; top: 7px;
	width: 14px; height: 14px;
	background: var(--brk-pink-tint);
	border-radius: 50%;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4537e'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
	background-size: 11px;
	background-repeat: no-repeat;
	background-position: center;
}

/* -----------------------------------------------------------------------------
 * METHODOLOGY — restyle "scheda professionale"
 * -------------------------------------------------------------------------- */
.brk-method-card { padding: 26px 28px; }
.brk-method-body {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 28px;
	align-items: center;
}
.brk-method-chart {
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--brk-purple-tint) 0%, var(--brk-pink-tint) 100%);
	padding: 18px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.brk-method-chart svg { filter: drop-shadow(0 4px 8px rgba(73, 7, 217, 0.15)); }
.brk-method-table {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.brk-method-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 14px;
	background: var(--brk-bg-soft);
	border-radius: 10px;
	border-left: 3px solid;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.brk-method-row:hover {
	transform: translateX(2px);
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	background: #ffffff;
}
.brk-method-row:nth-child(1) { border-left-color: #4907d9; }
.brk-method-row:nth-child(2) { border-left-color: #7d6ce6; }
.brk-method-row:nth-child(3) { border-left-color: #a89bef; }
.brk-method-row:nth-child(4) { border-left-color: #d4537e; }
.brk-method-row:nth-child(5) { border-left-color: #e88aa9; }
.brk-method-row:nth-child(6) { border-left-color: #f1bccd; }
.brk-method-dot {
	display: none; /* sostituito da border-left della riga */
}
.brk-method-text { flex: 1; }
.brk-method-criterion {
	font-size: 14px;
	color: var(--brk-text);
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.brk-method-criterion strong {
	color: var(--brk-purple);
	font-size: 14px;
	font-weight: 700;
	background: var(--brk-purple-tint);
	padding: 2px 10px;
	border-radius: 12px;
	margin-left: 0;
}
.brk-method-desc {
	font-size: 12px;
	color: var(--brk-text-muted);
	margin-top: 4px;
	line-height: 1.45;
}
.brk-method-compact .brk-method-row { padding: 8px 12px; }

/* Methodology slider (per /review-process/) */
.brk-method-slider-card { padding: 28px 30px; }
.brk-method-slider-intro {
	font-size: 14.5px;
	color: var(--brk-text-muted);
	margin: 0 0 20px;
	line-height: 1.55;
}
.brk-method-slider-body {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 32px;
	align-items: center;
}
.brk-method-slider-chart {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--brk-purple-tint) 0%, var(--brk-pink-tint) 100%);
	padding: 24px;
	border-radius: 16px;
}
.brk-method-slider-donut .brk-meth-slice {
	transition: opacity 0.18s ease, transform 0.18s ease;
	transform-origin: 50% 50%;
	cursor: pointer;
}
.brk-method-slider-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.brk-meth-item {
	background: #ffffff;
	border: 1px solid var(--brk-border);
	border-radius: 10px;
	padding: 13px 16px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: all 0.18s ease;
}
.brk-meth-item:hover,
.brk-meth-item.is-active {
	border-color: var(--brk-purple-soft);
	box-shadow: 0 4px 12px rgba(73, 7, 217, 0.1);
	transform: translateX(2px);
}
.brk-meth-item-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	margin-bottom: 5px;
	position: relative;
	z-index: 2;
}
.brk-meth-item-dot {
	width: 12px; height: 12px;
	border-radius: 3px;
	flex-shrink: 0;
}
.brk-meth-item-label { flex: 1; font-weight: 600; color: var(--brk-text); }
.brk-meth-item-pct {
	font-weight: 700;
	color: var(--brk-purple);
	background: var(--brk-purple-tint);
	padding: 2px 10px;
	border-radius: 10px;
	font-size: 12px;
}
.brk-meth-item-fill {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	opacity: 0.06;
	z-index: 1;
}
.brk-meth-item-desc {
	font-size: 12px;
	color: var(--brk-text-muted);
	position: relative;
	z-index: 2;
	line-height: 1.45;
}
.brk-method-slider-note {
	font-size: 12px;
	color: var(--brk-text-faint);
	margin: 20px 0 0;
	font-style: italic;
}
.brk-method-slider-note a { color: var(--brk-purple); text-decoration: none; font-weight: 600; }
.brk-method-slider-note a:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
 * FAQ — restyle accordion (no triangoli browser nativi)
 * -------------------------------------------------------------------------- */
.brk-faq-card { padding: 24px 26px; }
.brk-faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}
.brk-faq-item {
	border: 1px solid var(--brk-border);
	border-radius: 12px;
	background: #ffffff;
	transition: all 0.18s ease;
	overflow: hidden;
}
.brk-faq-item:hover {
	border-color: var(--brk-purple-soft);
	box-shadow: 0 2px 8px rgba(73, 7, 217, 0.05);
}
.brk-faq-item[open] {
	border-color: var(--brk-purple-soft);
	background: linear-gradient(180deg, #ffffff 0%, var(--brk-purple-tint) 100%);
	box-shadow: 0 4px 14px rgba(73, 7, 217, 0.08);
}
.brk-faq-q {
	padding: 16px 22px 16px 50px;
	font-weight: 600;
	font-size: 15px;
	color: var(--brk-text);
	cursor: pointer;
	list-style: none !important;
	position: relative;
	padding-right: 50px;
	transition: color 0.15s ease;
	line-height: 1.4;
}
/* Nasconde marker browser default in tutti i browser */
.brk-faq-q::-webkit-details-marker { display: none !important; }
.brk-faq-q::marker { display: none !important; content: '' !important; }
.brk-faq-q::before {
	content: '?';
	position: absolute;
	left: 18px; top: 50%;
	transform: translateY(-50%);
	width: 24px; height: 24px;
	background: var(--brk-purple-tint);
	color: var(--brk-purple);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
}
.brk-faq-item[open] .brk-faq-q::before {
	background: var(--brk-purple);
	color: #ffffff;
}
.brk-faq-q::after {
	content: '';
	position: absolute;
	right: 22px; top: 50%;
	width: 11px; height: 11px;
	border-right: 2px solid var(--brk-purple);
	border-bottom: 2px solid var(--brk-purple);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}
.brk-faq-item[open] .brk-faq-q::after {
	transform: translateY(-25%) rotate(-135deg);
}
.brk-faq-q:hover { color: var(--brk-purple); }
.brk-faq-a {
	padding: 0 22px 18px 50px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--brk-text);
}
.brk-faq-a strong { color: var(--brk-purple-d); font-weight: 700; }

/* -----------------------------------------------------------------------------
 * ALTERNATIVES — card più presenti
 * -------------------------------------------------------------------------- */
.brk-alt-card { padding: 24px 26px; }
.brk-alt-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.brk-alt-item {
	background: #ffffff;
	border: 1px solid var(--brk-border);
	border-radius: 14px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: all 0.18s ease;
	position: relative;
	overflow: hidden;
}
.brk-alt-item::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--brk-purple) 0%, var(--brk-pink) 100%);
	opacity: 0;
	transition: opacity 0.18s ease;
}
.brk-alt-item:hover {
	border-color: var(--brk-purple-soft);
	box-shadow: 0 8px 24px rgba(73, 7, 217, 0.1);
	transform: translateY(-2px);
}
.brk-alt-item:hover::before { opacity: 1; }
.brk-alt-head {
	height: 44px;
	display: flex;
	align-items: center;
}
.brk-alt-head img { max-height: 40px; max-width: 100%; object-fit: contain; }
.brk-alt-name {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--brk-text);
	letter-spacing: -0.2px;
}
.brk-alt-score {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	padding: 6px 12px;
	background: var(--brk-purple-tint);
	border-radius: 8px;
	width: fit-content;
}
.brk-alt-score i { font-size: 11px; }
.brk-alt-score-num { font-weight: 700; color: var(--brk-purple); }
.brk-alt-bullets {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	color: var(--brk-text-muted);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.brk-alt-bullets li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.brk-alt-bullets i {
	color: var(--brk-purple);
	font-size: 11px;
	width: 14px;
	text-align: center;
}
.brk-alt-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px dashed var(--brk-border);
}
.brk-alt-review-link {
	font-size: 12px;
	color: var(--brk-purple);
	text-decoration: none;
	text-align: center;
	font-weight: 600;
	transition: color 0.15s ease;
}
.brk-alt-review-link:hover { color: var(--brk-purple-d); text-decoration: underline; }

/* -----------------------------------------------------------------------------
 * SAFETY SCORE — restyle "scheda banca-grade"
 * -------------------------------------------------------------------------- */
.brk-safety-card {
	border-left: none;
	padding: 0;
	overflow: hidden;
}
.brk-safety-card.brk-safety-top { background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%); }
.brk-safety-header {
	background: linear-gradient(135deg, var(--brk-purple) 0%, #6a3fed 100%);
	color: #ffffff;
	padding: 22px 28px;
	display: flex;
	gap: 18px;
	align-items: center;
	margin: 0;
}
.brk-safety-card.brk-safety-top .brk-safety-header {
	background: linear-gradient(135deg, var(--brk-green) 0%, #02a85a 100%);
}
.brk-safety-card.brk-safety-mid .brk-safety-header {
	background: linear-gradient(135deg, var(--brk-amber) 0%, #a05d0d 100%);
}
.brk-safety-card.brk-safety-low .brk-safety-header {
	background: linear-gradient(135deg, var(--brk-pink) 0%, #b03960 100%);
}
.brk-safety-header > i {
	font-size: 32px;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.18);
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.brk-safety-card .brk-card-title {
	color: #ffffff !important;
	font-size: 19px;
	margin: 0;
}
.brk-safety-tier {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.9);
	margin-top: 4px;
}
.brk-safety-tier strong { color: #ffffff; font-weight: 700; }

.brk-safety-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	padding: 22px 26px 26px;
}
.brk-safety-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: var(--brk-bg-soft);
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.45;
	border: 1px solid var(--brk-border);
	transition: all 0.15s ease;
}
.brk-safety-item:hover {
	background: #ffffff;
	border-color: var(--brk-purple-soft);
	box-shadow: 0 2px 8px rgba(73, 7, 217, 0.06);
}
.brk-safety-item i {
	color: var(--brk-purple);
	font-size: 18px;
	flex-shrink: 0;
	margin-top: 1px;
	width: 22px;
	text-align: center;
}
.brk-safety-item.brk-safety-yes i { color: var(--brk-green); }
.brk-safety-item strong {
	color: var(--brk-text);
	display: block;
	margin-bottom: 3px;
	font-size: 13px;
	font-weight: 700;
}
.brk-safety-item div {
	color: var(--brk-text-muted);
	font-size: 12.5px;
}

/* -----------------------------------------------------------------------------
 * RESPONSIVE — Mobile (sotto 768px)
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.brk-hero { padding: 18px 16px; border-radius: 12px; }
	.brk-hero-grid {
		grid-template-columns: auto 1fr;
		grid-template-areas: "logo titles" "score score";
		gap: 12px;
	}
	.brk-hero-logo { grid-area: logo; }
	.brk-hero-titles { grid-area: titles; }
	.brk-hero-score {
		grid-area: score;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 12px 16px;
		margin-top: 8px;
	}
	.brk-hero-score-row { gap: 4px; }
	.brk-hero-score-value { font-size: 30px; }
	.brk-hero-stars { margin: 0; }
	.brk-hero-meta { font-size: 10px; }
	.brk-hero-title { font-size: 22px; }
	.brk-hero-metrics {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
		margin-top: 16px;
		padding-top: 16px;
	}
	.brk-metric { padding: 10px 12px; }
	.brk-metric-value { font-size: 15px; }
	.brk-hero-actions { flex-direction: column; gap: 10px; }
	.brk-cta-primary, .brk-cta-ghost { width: 100% !important; flex: initial !important; padding: 13px 18px !important; font-size: 14px !important; }

	.brk-authors {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 16px;
	}
	.brk-author-divider { display: none; }
	.brk-author-trust {
		margin-left: 0;
		text-align: left;
		border-left: none;
		padding-left: 0;
		padding-top: 12px;
		border-top: 1px dashed rgba(73, 7, 217, 0.12);
		width: 100%;
	}

	.brk-card { padding: 18px 18px; border-radius: 12px; }
	.brk-card-title { font-size: 17px; }
	.brk-card-header { margin-bottom: 14px; padding-bottom: 12px; }

	.brk-proscons { grid-template-columns: 1fr; gap: 12px; }
	.brk-proscons-header { padding: 12px 18px; }
	.brk-proscons-col ul { padding: 14px 18px 14px 20px; gap: 8px; }

	.brk-method-body { grid-template-columns: 1fr; gap: 18px; }
	.brk-method-chart { padding: 14px; }

	.brk-method-slider-body { grid-template-columns: 1fr; gap: 20px; }
	.brk-method-slider-chart { order: -1; padding: 18px; }

	.brk-faq-q { font-size: 14px; padding: 14px 18px 14px 46px; padding-right: 40px; }
	.brk-faq-q::before { left: 14px; width: 22px; height: 22px; font-size: 12px; }
	.brk-faq-q::after { right: 18px; width: 9px; height: 9px; }
	.brk-faq-a { font-size: 13px; padding: 0 18px 14px 46px; }

	.brk-alt-grid { grid-template-columns: 1fr; gap: 12px; }

	.brk-safety-header { padding: 18px 20px; gap: 14px; }
	.brk-safety-header > i { width: 44px; height: 44px; font-size: 24px; border-radius: 10px; }
	.brk-safety-card .brk-card-title { font-size: 16px; }
	.brk-safety-grid { grid-template-columns: 1fr; padding: 16px 18px 20px; gap: 10px; }

	.brk-info-icon { width: 18px; height: 18px; }
	.brk-info-icon i { font-size: 9px; }

	.brk-tt-weights { min-width: 260px; padding: 14px; }
	.brk-tt-flex { flex-direction: column; gap: 14px; align-items: flex-start; }
}


/* =============================================================================
 * v1.3 — HERO STRIP BADGES, SCORE V3, STICKY CTA, SIDEBAR, SECTION SCORE
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * HERO STRIP — badge orizzontali al posto della stringa "Sede · Aggiornata"
 * -------------------------------------------------------------------------- */
.brk-hero-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.brk-strip-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--brk-bg-soft);
	color: var(--brk-text-muted);
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid var(--brk-border);
	white-space: nowrap;
}
.brk-strip-item i {
	font-size: 10px;
	color: var(--brk-purple);
}

/* -----------------------------------------------------------------------------
 * HERO SCORE /100 sotto stelle
 * -------------------------------------------------------------------------- */
.brk-hero-score100 {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--brk-purple);
	background: #ffffff;
	border-radius: 8px;
	padding: 4px 10px;
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	border: 1px solid var(--brk-purple-soft);
}
.brk-hero-score100 span:first-of-type {
	color: var(--brk-text-faint);
	font-size: 11px;
	font-weight: 400;
}
.brk-hero-score100-label {
	color: var(--brk-text-muted) !important;
	font-size: 10px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	margin-left: 6px;
}

/* -----------------------------------------------------------------------------
 * SCORES V3 — breakdown ricco con summary e barre
 * -------------------------------------------------------------------------- */
.brk-scoresv3-card { padding: 26px 28px; }
.brk-scoresv3-summary {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 28px;
	align-items: center;
	background: linear-gradient(135deg, var(--brk-purple-tint) 0%, var(--brk-pink-tint) 100%);
	border-radius: 14px;
	padding: 20px 22px;
	margin-bottom: 22px;
	border: 1px solid rgba(73, 7, 217, 0.1);
}
.brk-scoresv3-final {
	text-align: center;
	padding-right: 24px;
	border-right: 1px solid rgba(73, 7, 217, 0.15);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.brk-scoresv3-stars { display: flex; gap: 3px; }
.brk-scoresv3-stars i { font-size: 18px; }
.brk-scoresv3-numbers {
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.brk-scoresv3-bignum {
	font-size: 38px;
	font-weight: 700;
	color: var(--brk-purple);
	line-height: 1;
	letter-spacing: -1px;
}
.brk-scoresv3-on {
	font-size: 16px;
	color: var(--brk-text-faint);
}
.brk-scoresv3-pct {
	margin-left: 8px;
	background: var(--brk-purple);
	color: #ffffff;
	padding: 3px 10px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
}
.brk-scoresv3-judge {
	font-size: 13px;
	color: var(--brk-purple-d);
	font-weight: 600;
	margin-top: 4px;
	max-width: 200px;
	line-height: 1.35;
}
.brk-scoresv3-meta {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.brk-scoresv3-meta-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13px;
	color: var(--brk-text);
	line-height: 1.5;
}
.brk-scoresv3-meta-row i {
	color: var(--brk-purple);
	font-size: 14px;
	margin-top: 3px;
	flex-shrink: 0;
}
.brk-scoresv3-link {
	font-size: 12.5px;
	color: var(--brk-purple);
	text-decoration: none;
	font-weight: 700;
	transition: gap 0.15s ease;
	display: inline-flex;
	gap: 5px;
}
.brk-scoresv3-link:hover { text-decoration: underline; }

.brk-scoresv3-criteria {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 28px;
}
.brk-scoresv3-row {
	background: var(--brk-bg-soft);
	border-radius: 10px;
	padding: 12px 14px;
	border-left: 3px solid var(--brk-purple);
	transition: all 0.15s ease;
}
.brk-scoresv3-row:hover {
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(73, 7, 217, 0.06);
}
.brk-scoresv3-top  { border-left-color: #4907d9; }
.brk-scoresv3-high { border-left-color: #7d6ce6; }
.brk-scoresv3-mid  { border-left-color: var(--brk-amber); }
.brk-scoresv3-low  { border-left-color: var(--brk-pink); }
.brk-scoresv3-row-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
	gap: 6px;
}
.brk-scoresv3-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--brk-text);
	line-height: 1.3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.brk-scoresv3-label .brk-info-icon {
	width: 18px;
	height: 18px;
	margin-left: 0;
}
.brk-scoresv3-label .brk-info-icon i { font-size: 9px; }
.brk-scoresv3-weight {
	font-size: 11px;
	color: var(--brk-text-faint);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
}
.brk-scoresv3-row-body {
	display: flex;
	align-items: center;
	gap: 10px;
}
.brk-scoresv3-bar {
	flex: 1;
	height: 7px;
	background: rgba(73, 7, 217, 0.1);
	border-radius: 4px;
	overflow: hidden;
}
.brk-scoresv3-fill {
	height: 100%;
	border-radius: 4px;
	background: var(--brk-purple);
	transition: width 0.4s ease;
}
.brk-scoresv3-top  .brk-scoresv3-fill { background: linear-gradient(90deg, #4907d9 0%, #6a3fed 100%); }
.brk-scoresv3-high .brk-scoresv3-fill { background: linear-gradient(90deg, #6a3fed 0%, #7d6ce6 100%); }
.brk-scoresv3-mid  .brk-scoresv3-fill { background: linear-gradient(90deg, var(--brk-amber) 0%, #d4a04d 100%); }
.brk-scoresv3-low  .brk-scoresv3-fill { background: linear-gradient(90deg, var(--brk-pink) 0%, #e88aa9 100%); }
.brk-scoresv3-value {
	font-size: 13px;
	font-weight: 700;
	color: var(--brk-purple);
	flex-shrink: 0;
	min-width: 36px;
	text-align: right;
}

/* -----------------------------------------------------------------------------
 * SECTION SCORE — stelline inline accanto a H2
 * -------------------------------------------------------------------------- */
.brk-sec-score,
h1 .brk-sec-score,
h2 .brk-sec-score,
h3 .brk-sec-score,
h4 .brk-sec-score {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-left: 12px !important;
	padding: 4px 12px !important;
	background: var(--brk-purple-tint) !important;
	border-radius: 999px !important;
	vertical-align: middle !important;
	font-family: 'Roboto', sans-serif !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.brk-sec-stars { display: inline-flex !important; gap: 1px !important; }
.brk-sec-stars i { font-size: 12px !important; color: var(--brk-amber) !important; }
.brk-sec-stars i.fa-regular { color: var(--brk-amber) !important; }
.brk-sec-num {
	font-size: 12px !important;
	color: var(--brk-purple-d) !important;
	font-weight: 700 !important;
}
.brk-sec-score .brk-info-icon {
	width: 18px !important;
	height: 18px !important;
	margin-left: 0 !important;
	background: rgba(73, 7, 217, 0.15) !important;
}
.brk-sec-score .brk-info-icon i { font-size: 9px !important; }

/* Heading generato dallo shortcode con parametro h2= o h3= */
.brk-sec-heading {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
}
@media (max-width: 768px) {
	.brk-sec-heading .brk-sec-score {
		margin-left: 0 !important;
		margin-top: 6px !important;
	}
}

/* -----------------------------------------------------------------------------
 * STICKY CTA — barra floating mobile + pillola desktop
 * -------------------------------------------------------------------------- */
.brk-sticky-cta {
	position: fixed;
	left: 0; right: 0;
	bottom: 0;
	z-index: 9999;
	transform: translateY(100%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	font-family: 'Roboto', sans-serif;
}
.brk-sticky-cta.is-visible {
	transform: translateY(0);
	pointer-events: auto;
}
.brk-sticky-inner {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #ffffff;
	border-top: 1px solid var(--brk-border);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
	padding: 10px 16px;
	max-width: 100%;
}
.brk-sticky-logo {
	width: 44px;
	height: 36px;
	object-fit: contain;
	flex-shrink: 0;
}
.brk-sticky-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.brk-sticky-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--brk-text);
	line-height: 1.2;
}
.brk-sticky-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: var(--brk-text-muted);
}
.brk-sticky-rating i { font-size: 10px; }
.brk-sticky-rating span { font-weight: 700; color: var(--brk-purple); }
.brk-sticky-btn {
	background: linear-gradient(180deg, #04ce72 0%, var(--brk-green) 100%) !important;
	color: #ffffff !important;
	padding: 11px 18px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-shadow: 0 2px 8px rgba(4, 190, 104, 0.3);
	white-space: nowrap;
	transition: all 0.18s ease;
	flex-shrink: 0;
}
.brk-sticky-btn:hover {
	background: linear-gradient(180deg, var(--brk-green) 0%, var(--brk-green-d) 100%) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(4, 190, 104, 0.4);
}
.brk-sticky-btn i { font-size: 11px; }
.brk-sticky-close {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 6px;
	color: var(--brk-text-faint);
	transition: color 0.15s ease;
	flex-shrink: 0;
}
.brk-sticky-close:hover { color: var(--brk-text); }

/* Desktop: trasforma in pillola fixed bottom-right */
@media (min-width: 769px) {
	.brk-sticky-cta {
		left: auto;
		right: 24px;
		bottom: 24px;
		max-width: 380px;
		transform: translateY(calc(100% + 30px));
	}
	.brk-sticky-cta.is-visible {
		transform: translateY(0);
	}
	.brk-sticky-inner {
		border: 1px solid var(--brk-border);
		border-radius: 14px;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
		padding: 12px 16px;
	}
}

/* -----------------------------------------------------------------------------
 * SIDEBAR [broker] — restyle moderno
 * -------------------------------------------------------------------------- */
.brk-sidebar-card {
	background: #ffffff;
	border: 1px solid var(--brk-border);
	border-radius: 14px;
	overflow: hidden;
	margin: 0 0 22px;
	box-shadow: 0 1px 2px rgba(27,30,37,0.04), 0 4px 14px rgba(73,7,217,0.05);
	font-family: 'Roboto', sans-serif;
}
.brk-sidebar-header {
	background: linear-gradient(135deg, var(--brk-purple) 0%, #6a3fed 100%);
	color: #ffffff;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.brk-sidebar-header i {
	font-size: 16px;
	color: #ffd24d;
}
.brk-sidebar-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	letter-spacing: -0.1px;
}
.brk-sidebar-list {
	display: flex;
	flex-direction: column;
}
.brk-sidebar-item {
	padding: 14px 18px;
	border-bottom: 1px solid var(--brk-border);
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 14px;
	align-items: center;
	transition: background 0.15s ease;
}
.brk-sidebar-item:last-child { border-bottom: none; }
.brk-sidebar-item:hover { background: var(--brk-bg-soft); }
.brk-sidebar-item-top {
	background: linear-gradient(90deg, var(--brk-purple-tint) 0%, transparent 100%);
}
.brk-sidebar-item-top:hover {
	background: linear-gradient(90deg, var(--brk-purple-soft) 0%, var(--brk-bg-soft) 100%);
}
.brk-sidebar-rank {
	display: flex;
	align-items: center;
	justify-content: center;
}
.brk-sidebar-rank span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--brk-purple);
	color: #ffffff;
	font-weight: 700;
	font-size: 13px;
}
.brk-sidebar-item-top .brk-sidebar-rank span {
	background: linear-gradient(135deg, var(--brk-purple) 0%, var(--brk-pink) 100%);
	box-shadow: 0 2px 6px rgba(73, 7, 217, 0.3);
}
.brk-sidebar-broker {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.brk-sidebar-logo {
	height: 32px;
	display: flex;
	align-items: center;
}
.brk-sidebar-logo img {
	max-height: 30px;
	max-width: 110px;
	width: auto;
	object-fit: contain;
}
.brk-sidebar-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
}
.brk-sidebar-rating i { font-size: 10px; }
.brk-sidebar-rating-num {
	color: var(--brk-purple);
	font-weight: 700;
}
.brk-sidebar-actions {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 2px;
}
.brk-sidebar-review {
	font-size: 11px;
	color: var(--brk-purple) !important;
	text-decoration: underline !important;
	font-weight: 600;
	text-decoration-color: var(--brk-purple-soft) !important;
	text-underline-offset: 2px;
}
.brk-sidebar-review:hover {
	text-decoration-color: var(--brk-purple) !important;
}
.brk-sidebar-cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: linear-gradient(180deg, #04ce72 0%, var(--brk-green) 100%) !important;
	color: #ffffff !important;
	padding: 8px 12px !important;
	border-radius: 7px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(4, 190, 104, 0.22) !important;
	transition: all 0.18s ease !important;
}
.brk-sidebar-cta:hover {
	background: linear-gradient(180deg, var(--brk-green) 0%, var(--brk-green-d) 100%) !important;
	box-shadow: 0 4px 10px rgba(4, 190, 104, 0.32) !important;
	color: #ffffff !important;
}
.brk-sidebar-cta i { font-size: 9px; }

/* -----------------------------------------------------------------------------
 * FIX bullet pro/contro sovrapposte (si vedeva ✓ sopra il testo)
 * -------------------------------------------------------------------------- */
.brk-proscons-col ul {
	list-style: none !important;
	padding: 18px 22px 18px 22px !important;
}
.brk-proscons-col li {
	padding-left: 38px !important;
	position: relative;
	min-height: 24px;
	line-height: 1.55 !important;
}
.brk-proscons-col li::before {
	left: 0 !important;
	top: 4px !important;
	width: 22px !important;
	height: 22px !important;
	background-size: 14px !important;
	flex-shrink: 0 !important;
}

/* -----------------------------------------------------------------------------
 * RESPONSIVE v1.3
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.brk-hero-strip { gap: 4px; margin-top: 8px; }
	.brk-strip-item { font-size: 11px; padding: 4px 9px; }
	.brk-strip-item i { font-size: 9px; }

	.brk-hero-score100 { font-size: 12px; }
	.brk-hero-score100-label { font-size: 9px !important; }

	.brk-scoresv3-card { padding: 18px 16px; }
	.brk-scoresv3-summary {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 16px 18px;
	}
	.brk-scoresv3-final {
		padding-right: 0;
		padding-bottom: 16px;
		border-right: none;
		border-bottom: 1px solid rgba(73, 7, 217, 0.15);
	}
	.brk-scoresv3-bignum { font-size: 32px; }
	.brk-scoresv3-judge { max-width: 100%; }
	.brk-scoresv3-criteria { grid-template-columns: 1fr; gap: 10px; }

	.brk-sticky-inner { padding: 8px 12px; gap: 10px; }
	.brk-sticky-logo { width: 38px; height: 32px; }
	.brk-sticky-name { font-size: 13px; }
	.brk-sticky-btn { padding: 9px 14px; font-size: 13px; }
	.brk-sticky-close { padding: 4px; font-size: 11px; }

	.brk-sec-score {
		display: inline-flex;
		margin-left: 0;
		margin-top: 6px;
		font-size: 11px;
	}
	.brk-sec-stars i { font-size: 11px; }
	.brk-sec-num { font-size: 11px; }

	.brk-sidebar-item { padding: 12px 14px; gap: 10px; grid-template-columns: 28px 1fr; }
	.brk-sidebar-rank span { width: 24px; height: 24px; font-size: 12px; }
}

/* =============================================================================
 * v1.3.1 — HOMEPAGE SLIDER "Gli ultimi broker valutati"
 * Layout: featured top (3 card estese) + carosello sotto (4 compatte)
 * Mobile: tutte in carosello scroll-snap con dot indicators
 * ========================================================================== */

.brk-latest-section {
	font-family: 'Roboto', sans-serif;
	margin: 32px 0;
	color: var(--brk-text);
}

/* HEADER */
.brk-latest-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.brk-latest-titlewrap { flex: 1; min-width: 0; }
.brk-latest-title {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	color: var(--brk-text);
	letter-spacing: -0.4px;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}
.brk-latest-title .brk-info-icon {
	margin-left: 4px;
	width: 24px;
	height: 24px;
}
.brk-latest-title .brk-info-icon i { font-size: 12px; }
.brk-latest-subtitle {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--brk-text-muted);
	line-height: 1.5;
}
.brk-latest-subtitle sup { font-size: 9px; }
.brk-latest-allink {
	font-size: 13px;
	color: var(--brk-purple) !important;
	text-decoration: none !important;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1.5px solid var(--brk-purple-soft);
	border-radius: 8px;
	transition: all 0.18s ease;
	white-space: nowrap;
	flex-shrink: 0;
}
.brk-latest-allink:hover {
	background: var(--brk-purple);
	color: #ffffff !important;
	border-color: var(--brk-purple);
}
.brk-latest-allink i { font-size: 11px; transition: transform 0.18s ease; }
.brk-latest-allink:hover i { transform: translateX(2px); }

/* FEATURED — 3 card estese desktop, ora SVILUPPATE IN LARGHEZZA (stack vertical) */
.brk-latest-featured {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 18px;
}

/* CARD BASE (sia featured che compact) */
.brk-latest-card {
	background: #ffffff;
	border: 1px solid var(--brk-border);
	border-radius: 14px;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none !important;
	color: var(--brk-text) !important;
	transition: all 0.2s ease;
	position: relative;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(27, 30, 37, 0.03);
}
.brk-latest-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--brk-purple) 0%, var(--brk-pink) 100%);
	opacity: 0;
	transition: opacity 0.18s ease;
}
.brk-latest-card:hover {
	border-color: var(--brk-purple-soft);
	box-shadow: 0 8px 24px rgba(73, 7, 217, 0.1);
	transform: translateY(-2px);
	color: var(--brk-text) !important;
	text-decoration: none !important;
}
.brk-latest-card:hover::before { opacity: 1; }

.brk-latest-card-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}
.brk-latest-cluster {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--brk-purple-d);
	background: var(--brk-purple-tint);
	padding: 3px 9px;
	border-radius: 10px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
}
.brk-latest-date {
	font-size: 11px;
	color: var(--brk-text-faint);
	font-weight: 500;
	white-space: nowrap;
}

.brk-latest-card-logo {
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.brk-latest-card-logo img {
	max-height: 46px;
	max-width: 160px;
	width: auto;
	object-fit: contain;
}
.brk-latest-logo-fallback {
	height: 46px;
	padding: 0 14px;
	background: var(--brk-purple-tint);
	color: var(--brk-purple);
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1px;
}

.brk-latest-card-name {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--brk-text);
	letter-spacing: -0.2px;
	line-height: 1.2;
}

/* RATING (riusabile featured/compact) */
.brk-latest-card-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.brk-latest-card-rating.is-rated {
	background: var(--brk-purple-tint);
	padding: 6px 10px;
	border-radius: 8px;
	width: fit-content;
}
.brk-latest-stars { display: inline-flex; gap: 2px; }
.brk-latest-stars i { font-size: 13px; color: var(--brk-amber); }
.brk-latest-stars i.fa-regular { color: var(--brk-amber); }
.brk-latest-stars-empty i {
	color: #f4d287 !important;
	opacity: 0.55;
}
.brk-latest-voto {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--brk-purple);
}
.brk-latest-card-rating.is-pending {
	background: linear-gradient(90deg, #fff8e1 0%, #fffaf0 100%);
	border: 1px solid #f1d99b;
	padding: 6px 10px;
	border-radius: 8px;
	width: fit-content;
}
.brk-latest-pending-label {
	font-size: 11px;
	font-weight: 700;
	color: #a17a1f;
	background: #ffeec2;
	padding: 2px 8px;
	border-radius: 6px;
	letter-spacing: 0.3px;
}
.brk-latest-card-rating .brk-info-icon {
	width: 18px;
	height: 18px;
	margin-left: 0;
	background: rgba(161, 122, 31, 0.15);
	color: #a17a1f;
}
.brk-latest-card-rating .brk-info-icon:hover {
	background: #a17a1f;
	color: #ffffff;
}
.brk-latest-card-rating .brk-info-icon i { font-size: 9px; }

/* BULLETS (solo featured) */
.brk-latest-card-bullets {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 12.5px;
	color: var(--brk-text-muted);
}
.brk-latest-card-bullets li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.brk-latest-card-bullets i {
	color: var(--brk-purple);
	font-size: 11px;
	width: 14px;
	text-align: center;
}

/* READLINK */
.brk-latest-readlink {
	margin-top: auto;
	padding-top: 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--brk-purple) !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-top: 1px dashed var(--brk-border);
	transition: gap 0.18s ease;
}
.brk-latest-card:hover .brk-latest-readlink {
	gap: 9px;
	color: var(--brk-purple-d) !important;
}
.brk-latest-readlink i { font-size: 10px; }

.brk-latest-card-compact .brk-latest-readlink {
	border-top: none;
	padding-top: 0;
}
.brk-latest-card-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px dashed var(--brk-border);
}

/* CAROSELLO */
.brk-latest-carousel-wrap {
	position: relative;
	margin-top: 6px;
}
.brk-latest-carousel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(220px, 1fr);
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 4px 2px;
	scrollbar-width: none;
}
.brk-latest-carousel::-webkit-scrollbar { display: none; }
.brk-latest-carousel .brk-latest-card {
	scroll-snap-align: start;
	min-width: 0;
}
.brk-latest-card-compact { padding: 16px 18px; }
.brk-latest-card-compact .brk-latest-card-logo { height: 44px; }
.brk-latest-card-compact .brk-latest-card-logo img { max-height: 40px; max-width: 120px; }
.brk-latest-card-compact .brk-latest-card-name { font-size: 16px; }

/* FRECCE NAVIGAZIONE (desktop only) */
.brk-latest-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid var(--brk-border);
	color: var(--brk-purple);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: all 0.18s ease;
	flex-shrink: 0;
}
.brk-latest-arrow:hover:not(:disabled) {
	background: var(--brk-purple);
	color: #ffffff;
	border-color: var(--brk-purple);
}
.brk-latest-arrow:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.brk-latest-prev { left: -18px; }
.brk-latest-next { right: -18px; }
.brk-latest-arrow i { font-size: 13px; }

/* DOT INDICATORS (mobile only) */
.brk-latest-dots {
	display: none;
	justify-content: center;
	gap: 7px;
	margin-top: 14px;
}
.brk-latest-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--brk-border);
	cursor: pointer;
	transition: all 0.18s ease;
}
.brk-latest-dot.is-active {
	background: var(--brk-purple);
	width: 22px;
	border-radius: 4px;
}

/* RESPONSIVE TABLET (768-1024) */
@media (max-width: 1024px) {
	/* Featured ora è flex column, non più grid: non serve più ridurre colonne. Mantengo solo frecce */
	.brk-latest-prev { left: -14px; }
	.brk-latest-next { right: -14px; }
}

/* RESPONSIVE MOBILE (<768px) */
@media (max-width: 768px) {
	.brk-latest-section { margin: 24px 0; }
	.brk-latest-head { flex-direction: column; align-items: flex-start; gap: 10px; }
	.brk-latest-title { font-size: 20px; gap: 4px; }
	.brk-latest-subtitle { font-size: 13px; }
	.brk-latest-allink {
		font-size: 12px;
		padding: 6px 12px;
		align-self: stretch;
		justify-content: center;
	}

	/* Featured nascoste su mobile, va tutto in un unico carosello */
	.brk-latest-featured { display: none; }

	.brk-latest-carousel-wrap {
		margin: 0 -16px; /* edge-to-edge mobile */
	}
	.brk-latest-carousel {
		grid-auto-columns: 80%;
		gap: 12px;
		padding: 4px 16px;
	}
	.brk-latest-arrow { display: none; } /* Touch native, no frecce */
	.brk-latest-dots { display: flex; }

	.brk-latest-card { padding: 16px 18px; }
	.brk-latest-card-name { font-size: 16px; }
	.brk-latest-card-logo { height: 44px; }
	.brk-latest-card-logo img { max-height: 40px; max-width: 130px; }
}

/* Mobile: featured nascoste lato render PHP, vengono CLONATE via JS dentro al
   carosello quando viewport <=768px, in posizione iniziale. Risultato: mobile
   mostra TUTTE le 7 card in un unico carosello swipe-able, ordine cronologico
   preservato. Su resize >768px i cloni vengono rimossi automaticamente. */

/* =============================================================================
 * v1.3.2 — MINI BREAKDOWN nelle featured + SIDEBAR LEGACY OVERRIDE
 * ========================================================================== */

/* MINI BREAKDOWN (solo card featured) */
.brk-latest-breakdown {
	background: linear-gradient(180deg, var(--brk-bg-soft) 0%, #ffffff 100%);
	border: 1px solid var(--brk-border);
	border-radius: 10px;
	padding: 12px 14px;
	margin-top: 4px;
}
.brk-latest-breakdown-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px dashed var(--brk-border);
}
.brk-latest-breakdown-head > span:first-child {
	font-size: 11px;
	font-weight: 700;
	color: var(--brk-text);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.brk-latest-breakdown-meta {
	font-size: 10px;
	color: var(--brk-text-faint);
	font-weight: 500;
}
.brk-latest-breakdown-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}
.brk-latest-bd-row {
	display: grid;
	grid-template-columns: 80px 1fr 32px;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
}
.brk-latest-bd-label {
	font-size: 11px;
	color: var(--brk-text-muted);
	font-weight: 500;
}
.brk-latest-bd-bar {
	height: 5px;
	background: rgba(73, 7, 217, 0.08);
	border-radius: 3px;
	overflow: hidden;
}
.brk-latest-bd-fill {
	height: 100%;
	background: var(--brk-purple);
	border-radius: 3px;
	transition: width 0.4s ease;
}
.brk-latest-bd-top  .brk-latest-bd-fill { background: linear-gradient(90deg, #4907d9 0%, #6a3fed 100%); }
.brk-latest-bd-high .brk-latest-bd-fill { background: linear-gradient(90deg, #6a3fed 0%, #7d6ce6 100%); }
.brk-latest-bd-mid  .brk-latest-bd-fill { background: linear-gradient(90deg, var(--brk-amber) 0%, #d4a04d 100%); }
.brk-latest-bd-low  .brk-latest-bd-fill { background: linear-gradient(90deg, var(--brk-pink) 0%, #e88aa9 100%); }
.brk-latest-bd-row.is-empty .brk-latest-bd-fill {
	background: repeating-linear-gradient(45deg, #f1d99b 0, #f1d99b 4px, #fde9b3 4px, #fde9b3 8px);
	width: 100% !important;
	opacity: 0.5;
}
.brk-latest-bd-val {
	font-size: 11px;
	font-weight: 700;
	color: var(--brk-purple);
	text-align: right;
}
.brk-latest-bd-row.is-empty .brk-latest-bd-val {
	color: #a17a1f;
	font-size: 10px;
}
.brk-latest-breakdown-empty .brk-latest-breakdown-meta {
	color: #a17a1f;
	background: #ffeec2;
	padding: 2px 8px;
	border-radius: 6px;
}

/* =============================================================================
 * v1.3.3 — FEATURED CARD ORIZZONTALE (3 zone)
 * Layout per le 3 card top dello slider home: full-width, 3 zone affiancate.
 * Zona A (sx): logo + nome.  Zona B (centro): breakdown 6 voci.  Zona C (dx): voto + bullets + CTA.
 * ========================================================================== */

.brk-latest-card-featured {
	flex-direction: row !important;
	align-items: stretch;
	gap: 0 !important;
	padding: 0 !important;
	min-height: 0;
	overflow: hidden;
}
.brk-latest-card-featured .brk-latest-zone {
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* ZONA A — sinistra (32%) */
.brk-latest-card-featured .brk-latest-zone-a {
	flex: 0 0 32%;
	max-width: 32%;
	gap: 12px;
	background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
	border-right: 1px solid var(--brk-border);
}
.brk-latest-card-featured .brk-latest-zone-a .brk-latest-card-logo {
	height: 56px;
	margin-top: 4px;
}
.brk-latest-card-featured .brk-latest-zone-a .brk-latest-card-logo img {
	max-height: 52px;
	max-width: 180px;
}
.brk-latest-card-featured .brk-latest-zone-a .brk-latest-card-name {
	font-size: 19px;
	margin-top: auto;
	line-height: 1.25;
}

/* ZONA B — centro (38%) */
.brk-latest-card-featured .brk-latest-zone-b {
	flex: 1 1 38%;
	max-width: 38%;
	justify-content: center;
	background: var(--brk-bg-soft);
	border-right: 1px solid var(--brk-border);
}
.brk-latest-card-featured .brk-latest-zone-b .brk-latest-breakdown {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	width: 100%;
}
.brk-latest-card-featured .brk-latest-zone-b .brk-latest-breakdown-head {
	margin-bottom: 12px;
	padding-bottom: 10px;
}
.brk-latest-card-featured .brk-latest-zone-b .brk-latest-bd-row {
	grid-template-columns: 92px 1fr 36px;
	padding: 4px 0;
}
.brk-latest-card-featured .brk-latest-zone-b .brk-latest-bd-bar {
	height: 6px;
}
.brk-latest-card-featured .brk-latest-zone-b .brk-latest-bd-label {
	font-size: 12px;
}
.brk-latest-card-featured .brk-latest-zone-b .brk-latest-bd-val {
	font-size: 12px;
}

/* ZONA C — destra (30%) */
.brk-latest-card-featured .brk-latest-zone-c {
	flex: 0 0 30%;
	max-width: 30%;
	gap: 14px;
	justify-content: space-between;
	background: linear-gradient(180deg, #ffffff 0%, var(--brk-purple-tint) 100%);
}
.brk-latest-card-featured .brk-latest-zone-c .brk-latest-card-rating {
	width: 100%;
	justify-content: center;
	padding: 10px 12px !important;
}
.brk-latest-card-featured .brk-latest-zone-c .brk-latest-card-bullets {
	margin: 0;
	gap: 8px;
	padding: 12px 0;
	border-top: 1px dashed rgba(73, 7, 217, 0.15);
	border-bottom: 1px dashed rgba(73, 7, 217, 0.15);
}
.brk-latest-card-featured .brk-latest-zone-c .brk-latest-card-bullets li {
	font-size: 12.5px;
}
.brk-latest-card-featured .brk-latest-zone-c .brk-latest-readlink {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
	justify-content: center;
	background: var(--brk-purple);
	color: #ffffff !important;
	padding: 11px 14px;
	border-radius: 8px;
	font-weight: 700;
	transition: all 0.18s ease;
	box-shadow: 0 2px 6px rgba(73, 7, 217, 0.2);
}
.brk-latest-card-featured:hover .brk-latest-zone-c .brk-latest-readlink {
	background: var(--brk-purple-d);
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(73, 7, 217, 0.3);
}

/* Top bar gradient della card resta, hover lift resta */
.brk-latest-card-featured:hover {
	box-shadow: 0 12px 32px rgba(73, 7, 217, 0.12);
}

/* Mobile / cloni: nascondi breakdown e bullets per coerenza */
.brk-latest-card-cloned .brk-latest-breakdown,
.brk-latest-card-cloned .brk-latest-card-bullets,
.brk-latest-card-cloned .brk-latest-zone-b,
.brk-latest-card-cloned .brk-latest-zone-c .brk-latest-card-bullets {
	display: none;
}
/* Quando un featured viene clonato nel carosello mobile, riportalo a layout column */
.brk-latest-card-cloned.brk-latest-card-featured {
	flex-direction: column !important;
}
.brk-latest-card-cloned .brk-latest-zone {
	flex: 1 1 auto !important;
	max-width: 100% !important;
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	gap: 8px;
}

/* ============== TABLET (768-1024px) ============== */
@media (max-width: 1024px) {
	.brk-latest-card-featured .brk-latest-zone-a {
		flex: 0 0 36%;
		max-width: 36%;
	}
	.brk-latest-card-featured .brk-latest-zone-b {
		flex: 1 1 36%;
		max-width: 36%;
	}
	.brk-latest-card-featured .brk-latest-zone-c {
		flex: 0 0 28%;
		max-width: 28%;
	}
	.brk-latest-card-featured .brk-latest-zone {
		padding: 18px 18px;
	}
	.brk-latest-card-featured .brk-latest-zone-b .brk-latest-bd-row {
		grid-template-columns: 78px 1fr 32px;
	}
	.brk-latest-card-featured .brk-latest-zone-a .brk-latest-card-name {
		font-size: 17px;
	}
}

/* ============== MOBILE (≤768px) ============== */
@media (max-width: 768px) {
	/* Le featured originali sono nascoste (gestite dal display:none in .brk-latest-featured più giù).
	   I cloni dentro al carosello hanno regola .brk-latest-card-cloned già definita sopra. */
	.brk-latest-card-featured { min-height: 0; }
	.brk-latest-breakdown { /* compact dentro carosello: niente */ }
}

/* =============================================================================
 * SIDEBAR LEGACY OVERRIDE — restyle .broker-reviews-container del template
 * tradingonline originale (template-broker-recensioni.php)
 * Override CSS, ZERO modifiche al PHP.
 * ========================================================================== */

.broker-reviews-container {
	background: #ffffff !important;
	border: 1px solid var(--brk-border) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	margin: 0 0 22px !important;
	box-shadow: 0 1px 2px rgba(27,30,37,0.04), 0 4px 14px rgba(73,7,217,0.05) !important;
	font-family: 'Roboto', sans-serif !important;
	padding: 0 !important;
}

/* Aggiungi un header colorato prima dei broker (via ::before) */
.broker-reviews-container::before {
	content: '🏆 Migliori Broker Trading 2026';
	display: block;
	background: linear-gradient(135deg, var(--brk-purple) 0%, #6a3fed 100%);
	color: #ffffff;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.1px;
}

/* Singolo broker = item lista verticale */
.broker-reviews-container .broker-review {
	border-bottom: 1px solid var(--brk-border) !important;
	padding: 14px 18px !important;
	background: #ffffff !important;
	transition: background 0.15s ease !important;
}
.broker-reviews-container .broker-review:last-child {
	border-bottom: none !important;
}
.broker-reviews-container .broker-review:hover {
	background: var(--brk-bg-soft) !important;
}
.broker-reviews-container .broker-review:first-of-type {
	background: linear-gradient(90deg, var(--brk-purple-tint) 0%, transparent 100%) !important;
}
.broker-reviews-container .broker-review:first-of-type:hover {
	background: linear-gradient(90deg, var(--brk-purple-soft) 0%, var(--brk-bg-soft) 100%) !important;
}

/* Layout interno: forza vertical stack */
.broker-reviews-container .row-broker-one {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}
.broker-reviews-container .col {
	flex: 1 1 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

/* Col 1: Titolo + Logo */
.broker-reviews-container .col-1 {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	align-items: flex-start !important;
}
.broker-reviews-container .col-1 .broker-title {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--brk-text) !important;
	box-shadow: none !important;
}
.broker-reviews-container .col-1 .link-name-partner {
	box-shadow: none !important;
	color: var(--brk-text) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	border-bottom: 2px solid var(--brk-purple-soft) !important;
	padding-bottom: 1px !important;
	transition: border-color 0.15s ease !important;
}
.broker-reviews-container .col-1 .link-name-partner:hover {
	border-bottom-color: var(--brk-purple) !important;
}
.broker-reviews-container .col-1 img {
	max-width: 130px !important;
	max-height: 36px !important;
	height: auto !important;
	width: auto !important;
	object-fit: contain !important;
}

/* Col 2: Focus point — nascosta in sidebar (il widget è stretto) */
.broker-reviews-container .col-2 {
	display: none !important;
}

/* Col 3: Facts — nascosta in sidebar */
.broker-reviews-container .col-3,
.broker-reviews-container .col-facts {
	display: none !important;
}

/* Col 4: CTA + rating */
.broker-reviews-container .col-4 {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	margin-top: 6px !important;
}
.broker-reviews-container .col-4 .link-recensione {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	background: linear-gradient(180deg, #04ce72 0%, var(--brk-green) 100%) !important;
	color: #ffffff !important;
	padding: 9px 14px !important;
	border-radius: 8px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(4, 190, 104, 0.25) !important;
	transition: all 0.18s ease !important;
}
.broker-reviews-container .col-4 .link-recensione:hover {
	background: linear-gradient(180deg, var(--brk-green) 0%, var(--brk-green-d) 100%) !important;
	box-shadow: 0 4px 10px rgba(4, 190, 104, 0.35) !important;
}
.broker-reviews-container .col-4 .link-recensione svg {
	width: 11px !important;
	height: 11px !important;
}

.broker-reviews-container .broker-rating-container {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	background: var(--brk-purple-tint) !important;
	padding: 6px 10px !important;
	border-radius: 7px !important;
}
.broker-reviews-container .broker-rating {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
}
.broker-reviews-container .broker-rating .star {
	width: 12px !important;
	height: 12px !important;
}
.broker-reviews-container .broker-rating .rating-value {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--brk-purple) !important;
	margin-left: 4px !important;
}
.broker-reviews-container .tradingrating {
	display: none !important;
}

/* Tutto il resto del template originale — popup, tooltip, ecc. — non lo tocchiamo */

@media (max-width: 768px) {
	.broker-reviews-container::before {
		font-size: 14px;
		padding: 12px 16px;
	}
	.broker-reviews-container .broker-review {
		padding: 12px 16px !important;
	}
}

/* =============================================================================
 * v1.4.1 — MOTORE DI RICERCA BROKER (premium edition)
 * /quale-broker-scegliere/ — hero dark, loghi normalizzati, card rich
 * ========================================================================== */

.brk-search-engine {
	font-family: 'Roboto', sans-serif;
	color: var(--brk-text);
	max-width: 100%;
	margin: 0 auto;
}

/* -----------------------------------------------------------------------------
 * HERO LIGHT ELEGANT (v1.4.3 — sfondo chiaro, contrasto alto, gerarchia tipografica)
 * Sostituisce hero dark precedente. Massima leggibilità + look editoriale premium.
 * -------------------------------------------------------------------------- */
.brk-search-hero {
	position: relative;
	background:
		radial-gradient(circle at 12% 12%, rgba(73, 7, 217, 0.06) 0%, transparent 45%),
		radial-gradient(circle at 88% 88%, rgba(212, 83, 126, 0.05) 0%, transparent 50%),
		linear-gradient(180deg, #ffffff 0%, #fbfaff 100%);
	border: 1px solid var(--brk-border);
	border-radius: 18px;
	padding: 44px 40px 36px;
	margin-bottom: 28px;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(27, 30, 37, 0.03),
		0 12px 32px rgba(73, 7, 217, 0.06);
}
.brk-search-hero::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--brk-purple) 0%, var(--brk-pink) 50%, var(--brk-purple) 100%);
	background-size: 200% 100%;
	animation: brkHeroBar 8s ease-in-out infinite;
}
@keyframes brkHeroBar {
	0%, 100% { background-position: 0% 0%; }
	50% { background-position: 100% 0%; }
}
.brk-search-hero-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(73, 7, 217, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(73, 7, 217, 0.025) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(circle at center top, rgba(0, 0, 0, 0.5) 0%, transparent 60%);
	-webkit-mask-image: radial-gradient(circle at center top, rgba(0, 0, 0, 0.5) 0%, transparent 60%);
	opacity: 0.7;
}
.brk-search-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 980px;
	margin: 0 auto;
	text-align: center;
}

/* Eyebrow elegant — line + tag + line, simile siti editoriali NYT/FT */
.brk-search-hero-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 18px;
}
.brk-search-hero-eyebrow-line {
	flex: 0 0 40px;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--brk-purple-soft) 50%, transparent 100%);
}
.brk-search-hero-eyebrow-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--brk-purple-d);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	white-space: nowrap;
}
.brk-search-hero-eyebrow-text i {
	font-size: 11px;
	color: var(--brk-purple);
}

.brk-search-hero-title {
	margin: 0 0 16px;
	font-size: 42px;
	font-weight: 700;
	color: var(--brk-text);
	letter-spacing: -1px;
	line-height: 1.1;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}
.brk-search-hero-title .brk-info-icon {
	width: 26px;
	height: 26px;
	background: var(--brk-purple-tint);
	border: 1px solid var(--brk-purple-soft);
	color: var(--brk-purple);
}
.brk-search-hero-title .brk-info-icon i { font-size: 11px; }
.brk-search-hero-title .brk-info-icon:hover {
	background: var(--brk-purple);
	color: #ffffff;
}
.brk-search-hero-sub {
	margin: 0 auto 30px;
	font-size: 16px;
	color: var(--brk-text-muted);
	line-height: 1.6;
	max-width: 760px;
}

/* Stats row — 5 colonne con divisori sottili tra l'una e l'altra */
.brk-search-hero-stats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
	margin: 0 auto 26px;
	max-width: 920px;
	background: #ffffff;
	border: 1px solid var(--brk-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(27, 30, 37, 0.04);
}
.brk-stat {
	padding: 18px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	transition: background 0.18s ease;
	border-right: 1px solid var(--brk-border);
	position: relative;
}
.brk-stat:last-child { border-right: none; }
.brk-stat:hover {
	background: var(--brk-bg-soft);
}
.brk-stat-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--brk-purple-tint) 0%, #ffffff 100%);
	border: 1px solid var(--brk-purple-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.brk-stat-icon i {
	font-size: 16px;
	color: var(--brk-purple);
}
.brk-stat-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 2px;
}
.brk-stat strong {
	color: var(--brk-text);
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.4px;
}
.brk-stat strong time {
	color: inherit;
	font-size: 16px;
	font-weight: 700;
}
.brk-stat span {
	color: var(--brk-text-muted);
	font-size: 11px;
	letter-spacing: 0.1px;
	line-height: 1.3;
}

/* Trust links footer hero */
.brk-search-hero-trust {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 18px;
	background: #ffffff;
	border: 1px solid var(--brk-border);
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(27, 30, 37, 0.04);
}
.brk-search-hero-trust-sep {
	width: 1px;
	height: 16px;
	background: var(--brk-border);
	display: inline-block;
}
.brk-search-hero-method-link {
	color: var(--brk-purple-d) !important;
	text-decoration: none !important;
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	transition: all 0.18s ease;
}
.brk-search-hero-method-link:hover {
	background: var(--brk-purple-tint);
	color: var(--brk-purple) !important;
}
.brk-search-hero-method-link i { font-size: 12px; opacity: 0.9; }


/* -----------------------------------------------------------------------------
 * ADMIN NOTICE (visibile solo a admin loggati)
 * -------------------------------------------------------------------------- */
.brk-search-admin-notice {
	background: linear-gradient(135deg, var(--brk-amber-tint) 0%, #fffaf0 100%);
	border: 1px solid #f3d999;
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 20px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.brk-search-admin-notice > i {
	color: var(--brk-amber);
	font-size: 22px;
	margin-top: 2px;
	flex-shrink: 0;
}
.brk-search-admin-notice strong { display: block; margin-bottom: 4px; color: var(--brk-text); }
.brk-search-admin-notice p { margin: 0; font-size: 13px; color: var(--brk-text-muted); }
.brk-search-admin-notice a { color: var(--brk-amber); font-weight: 700; }
.brk-search-warnings-list {
	margin: 12px 0 0;
	padding: 12px 14px 12px 30px;
	background: #ffffff;
	border-radius: 8px;
	font-size: 12px;
	color: var(--brk-text-muted);
}
.brk-search-warnings-list li { margin-bottom: 4px; }

/* -----------------------------------------------------------------------------
 * GRID + SIDEBAR FILTRI
 * -------------------------------------------------------------------------- */
.brk-search-grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
}

.brk-search-filters {
	background: #ffffff;
	border: 1px solid var(--brk-border);
	border-radius: 14px;
	padding: 18px;
	box-shadow: 0 1px 3px rgba(27, 30, 37, 0.04);
	height: fit-content;
	position: sticky;
	top: 90px;
	max-height: calc(100vh - 110px);
	overflow-y: auto;
}
.brk-search-filters::-webkit-scrollbar { width: 6px; }
.brk-search-filters::-webkit-scrollbar-track { background: var(--brk-bg-soft); }
.brk-search-filters::-webkit-scrollbar-thumb { background: var(--brk-border); border-radius: 3px; }

.brk-search-filters-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--brk-border);
}
.brk-search-filters-head h2 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--brk-text);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.brk-search-filters-head h2 i { color: var(--brk-purple); font-size: 14px; }

.brk-search-reset {
	background: transparent;
	border: 1px solid var(--brk-border);
	border-radius: 6px;
	padding: 5px 10px;
	font-size: 11px;
	color: var(--brk-text-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: all 0.15s ease;
}
.brk-search-reset:hover {
	border-color: var(--brk-purple);
	color: var(--brk-purple);
}
.brk-search-reset i { font-size: 10px; }

.brk-search-mobile-close {
	display: none;
	background: var(--brk-bg-soft);
	border: 1px solid var(--brk-border);
	border-radius: 6px;
	width: 32px;
	height: 32px;
	font-size: 14px;
	color: var(--brk-text-muted);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

/* FILTER GROUPS */
.brk-filter-group {
	border-bottom: 1px solid var(--brk-border);
	padding: 12px 0;
}
.brk-filter-group:last-of-type { border-bottom: none; }
.brk-filter-group summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--brk-text);
	padding: 4px 0;
}
.brk-filter-group summary::-webkit-details-marker { display: none; }
.brk-filter-arrow { color: var(--brk-purple); transition: transform 0.2s ease; }
.brk-filter-group[open] .brk-filter-arrow { transform: rotate(180deg); }
.brk-filter-arrow i { font-size: 11px; }

.brk-filter-body {
	padding-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.brk-filter-radio,
.brk-filter-check {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 8px;
	border-radius: 7px;
	cursor: pointer;
	font-size: 13px;
	color: var(--brk-text);
	transition: background 0.12s ease;
}
.brk-filter-radio:hover,
.brk-filter-check:hover {
	background: var(--brk-bg-soft);
}
.brk-filter-radio input,
.brk-filter-check input {
	accent-color: var(--brk-purple);
	width: 14px;
	height: 14px;
	cursor: pointer;
	flex-shrink: 0;
}
.brk-filter-radio span,
.brk-filter-check span {
	flex: 1;
	line-height: 1.3;
}

.brk-filter-range {
	padding: 6px 0;
}
.brk-filter-range input[type="range"] {
	width: 100%;
	accent-color: var(--brk-purple);
	margin-bottom: 8px;
}
.brk-filter-range-display {
	font-size: 13px;
	color: var(--brk-text-muted);
	text-align: center;
}
.brk-filter-range-display strong {
	color: var(--brk-purple);
	font-weight: 700;
}

.brk-filter-apply-mobile {
	display: none;
	width: 100%;
	background: linear-gradient(180deg, #04ce72 0%, var(--brk-green) 100%);
	color: #ffffff;
	border: none;
	border-radius: 10px;
	padding: 13px 18px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 16px;
	box-shadow: 0 4px 12px rgba(4, 190, 104, 0.3);
}
.brk-filter-apply-mobile strong { color: #ffd24d; }

/* -----------------------------------------------------------------------------
 * AREA RISULTATI HEAD
 * -------------------------------------------------------------------------- */
.brk-search-results-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
	padding: 13px 18px;
	background: #ffffff;
	border: 1px solid var(--brk-border);
	border-radius: 12px;
	flex-wrap: wrap;
	gap: 12px;
	box-shadow: 0 1px 2px rgba(27, 30, 37, 0.03);
}
.brk-search-results-count {
	font-size: 14px;
	color: var(--brk-text);
}
.brk-search-results-count strong {
	color: var(--brk-purple);
	font-size: 18px;
	font-weight: 700;
}
.brk-search-of-total {
	color: var(--brk-text-faint);
	font-size: 12px;
	margin-left: 6px;
}
.brk-search-sort {
	display: flex;
	align-items: center;
	gap: 10px;
}
.brk-search-sort label {
	font-size: 12px;
	color: var(--brk-text-muted);
	font-weight: 600;
}
.brk-search-sort select {
	background: var(--brk-bg-soft);
	border: 1px solid var(--brk-border);
	border-radius: 8px;
	padding: 7px 10px;
	font-size: 13px;
	color: var(--brk-text);
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}
.brk-search-sort select:focus {
	outline: 2px solid var(--brk-purple);
	outline-offset: -1px;
}
.brk-search-mobile-filters-btn {
	display: none;
	background: var(--brk-purple);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	gap: 6px;
	align-items: center;
	box-shadow: 0 2px 6px rgba(73, 7, 217, 0.25);
}
.brk-search-mobile-filters-btn i { font-size: 11px; }

/* -----------------------------------------------------------------------------
 * CARDS RICH (premium)
 * -------------------------------------------------------------------------- */
.brk-search-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.brk-search-card {
	background: #ffffff;
	border: 1px solid var(--brk-border);
	border-radius: 14px;
	display: grid;
	grid-template-columns: 200px 1fr 180px;
	gap: 0;
	overflow: hidden;
	transition: all 0.2s ease;
	position: relative;
}
.brk-search-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--brk-purple) 0%, var(--brk-pink) 100%);
	opacity: 0;
	transition: opacity 0.18s ease;
}
.brk-search-card:hover {
	border-color: var(--brk-purple-soft);
	box-shadow: 0 8px 28px rgba(73, 7, 217, 0.12);
	transform: translateY(-2px);
}
.brk-search-card:hover::before { opacity: 1; }

/* ZONA SX */
.brk-sc-left {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #fafbff 0%, var(--brk-bg-soft) 100%);
	border-right: 1px solid var(--brk-border);
}

/* LOGO NORMALIZZATO — container fisso, object-fit contain, hover effect */
.brk-sc-logobox {
	width: 100%;
	height: 56px;
	background: #ffffff;
	border: 1px solid var(--brk-border);
	border-radius: 10px;
	padding: 8px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	box-shadow: 0 1px 2px rgba(27, 30, 37, 0.03);
	position: relative;
	overflow: hidden;
}
.brk-sc-logobox::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, transparent 0%, rgba(73, 7, 217, 0.04) 100%);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}
.brk-search-card:hover .brk-sc-logobox {
	border-color: var(--brk-purple-soft);
	box-shadow: 0 4px 12px rgba(73, 7, 217, 0.1);
	transform: scale(1.02);
}
.brk-search-card:hover .brk-sc-logobox::after {
	opacity: 1;
}
.brk-sc-logobox img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: filter 0.2s ease;
}
.brk-search-card:hover .brk-sc-logobox img {
	filter: brightness(1.05) drop-shadow(0 1px 3px rgba(73, 7, 217, 0.15));
}
.brk-sc-logo-fallback {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.5px;
	color: var(--brk-purple);
	background: var(--brk-purple-tint);
	padding: 8px 14px;
	border-radius: 6px;
}

.brk-sc-cluster {
	font-size: 10px;
	font-weight: 700;
	color: var(--brk-purple-d);
	background: var(--brk-purple-tint);
	padding: 4px 10px;
	border-radius: 10px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	line-height: 1.3;
	text-align: center;
}

/* ZONA CENTRO */
.brk-sc-center {
	padding: 18px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
}
.brk-sc-name {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--brk-text);
	letter-spacing: -0.2px;
}
.brk-sc-rating-row {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.brk-sc-rating-block {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--brk-purple-tint);
	padding: 6px 12px;
	border-radius: 8px;
}
.brk-sc-stars { display: inline-flex; gap: 2px; }
.brk-sc-stars i { font-size: 13px; }
.brk-sc-voto-numbers {
	display: flex;
	align-items: center;
	gap: 6px;
}
.brk-sc-voto {
	font-size: 13px;
	font-weight: 700;
	color: var(--brk-purple);
}
.brk-sc-voto100 {
	background: var(--brk-purple);
	color: #ffffff;
	padding: 2px 8px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
}

/* DOTS BREAKDOWN — 6 puntini colorati */
.brk-sc-dots {
	display: inline-flex;
	gap: 4px;
	padding: 6px 10px;
	background: var(--brk-bg-soft);
	border: 1px solid var(--brk-border);
	border-radius: 8px;
	cursor: help;
}
.brk-sc-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}
.brk-sc-dot-top   { background: #4907d9; }
.brk-sc-dot-high  { background: #7d6ce6; }
.brk-sc-dot-mid   { background: #d4a04d; }
.brk-sc-dot-low   { background: #e88aa9; }
.brk-sc-dot-empty { background: #e5e7ee; border: 1px dashed #c5c9d8; }

.brk-sc-pending {
	font-size: 11px;
	font-weight: 700;
	color: #a17a1f;
	background: #ffeec2;
	padding: 4px 10px;
	border-radius: 6px;
	letter-spacing: 0.3px;
}

.brk-sc-bullets {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 12px;
	color: var(--brk-text-muted);
}
.brk-sc-bullets li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.brk-sc-bullets i {
	color: var(--brk-purple);
	font-size: 11px;
}

/* BADGES feature */
.brk-sc-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 2px;
}
.brk-sc-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: linear-gradient(135deg, #f3eeff 0%, #fce6ee 100%);
	color: var(--brk-purple-d);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	border: 1px solid rgba(73, 7, 217, 0.1);
}
.brk-sc-badge i { font-size: 10px; opacity: 0.9; }

/* ZONA DX */
.brk-sc-right {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
	background: linear-gradient(180deg, #ffffff 0%, var(--brk-purple-tint) 100%);
	border-left: 1px solid var(--brk-border);
}
.brk-sc-cta-secondary {
	font-size: 12px;
	color: var(--brk-purple) !important;
	text-decoration: none !important;
	font-weight: 600;
	text-align: center;
	padding: 9px 12px;
	border: 1.5px solid var(--brk-purple-soft);
	border-radius: 8px;
	transition: all 0.15s ease;
	background: #ffffff;
}
.brk-sc-cta-secondary:hover {
	background: var(--brk-purple);
	color: #ffffff !important;
	border-color: var(--brk-purple);
}

/* EMPTY STATE */
.brk-search-empty {
	background: #ffffff;
	border: 1px dashed var(--brk-border);
	border-radius: 14px;
	padding: 60px 30px;
	text-align: center;
	color: var(--brk-text-muted);
}
.brk-search-empty > i {
	font-size: 42px;
	color: var(--brk-purple-soft);
	margin-bottom: 14px;
	display: block;
}
.brk-search-empty h3 {
	margin: 0 0 8px;
	font-size: 18px;
	color: var(--brk-text);
}
.brk-search-empty p {
	margin: 0 0 18px;
	font-size: 14px;
}

/* BACKDROP */
.brk-search-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(15, 8, 40, 0.6);
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.25s ease;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.brk-search-backdrop.is-visible {
	display: block;
	opacity: 1;
}

/* -----------------------------------------------------------------------------
 * RESPONSIVE TABLET (768-1024)
 * -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.brk-search-hero { padding: 36px 24px 32px; }
	.brk-search-hero-title { font-size: 32px; }
	.brk-search-hero-stats {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto auto;
	}
	.brk-stat:nth-child(3) { border-right: none; }
	.brk-stat:nth-child(n+4) {
		border-top: 1px solid var(--brk-border);
	}
	.brk-stat:nth-child(4) { border-right: 1px solid var(--brk-border); }
	.brk-stat:nth-child(5) {
		grid-column: span 1;
	}
	/* Pad mancante riempito da una "fake cell" via :nth-child(5)::after non possibile,
	   accettiamo che la 5ª riga abbia 2 celle se 5 elementi su 3 colonne */

	.brk-search-grid { grid-template-columns: 230px 1fr; gap: 16px; }
	.brk-search-card { grid-template-columns: 150px 1fr 150px; }
	.brk-sc-left { padding: 14px; }
	.brk-sc-name { font-size: 17px; }
}

/* -----------------------------------------------------------------------------
 * RESPONSIVE MOBILE (≤768px)
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.brk-search-hero {
		padding: 28px 18px 24px;
		border-radius: 14px;
		margin-bottom: 20px;
	}
	.brk-search-hero-eyebrow { gap: 8px; margin-bottom: 14px; }
	.brk-search-hero-eyebrow-line { flex: 0 0 20px; }
	.brk-search-hero-eyebrow-text {
		font-size: 10px;
		letter-spacing: 1px;
	}
	.brk-search-hero-title {
		font-size: 24px;
		letter-spacing: -0.4px;
		gap: 8px;
	}
	.brk-search-hero-title .brk-info-icon {
		width: 22px;
		height: 22px;
	}
	.brk-search-hero-title .brk-info-icon i { font-size: 9px; }
	.brk-search-hero-sub {
		font-size: 13.5px;
		margin-bottom: 22px;
	}
	.brk-search-hero-stats {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto auto auto;
	}
	.brk-stat {
		padding: 12px 14px;
		gap: 10px;
		border-right: 1px solid var(--brk-border);
		border-bottom: 1px solid var(--brk-border);
	}
	.brk-stat:nth-child(2n) { border-right: none; }
	.brk-stat:nth-last-child(-n+2) { border-bottom: none; }
	.brk-stat-icon { width: 32px; height: 32px; }
	.brk-stat-icon i { font-size: 13px; }
	.brk-stat strong { font-size: 16px; }
	.brk-stat span { font-size: 10.5px; }
	.brk-search-hero-trust {
		flex-direction: column;
		padding: 12px 18px;
		border-radius: 14px;
		gap: 4px;
	}
	.brk-search-hero-trust-sep { display: none; }
	.brk-search-hero-method-link {
		font-size: 12px;
		padding: 8px 12px;
		width: 100%;
		justify-content: center;
	}

	.brk-search-grid { grid-template-columns: 1fr; gap: 14px; }

	/* Sidebar off-canvas */
	.brk-search-filters {
		position: fixed;
		top: 0; left: 0; bottom: 0;
		width: 90%;
		max-width: 360px;
		max-height: 100vh;
		z-index: 9999;
		transform: translateX(-100%);
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		border-radius: 0;
		border-right: 1px solid var(--brk-border);
		padding: 18px 18px 90px;
		box-shadow: 8px 0 32px rgba(0, 0, 0, 0.15);
	}
	.brk-search-filters.is-open {
		transform: translateX(0);
	}
	.brk-search-mobile-close {
		display: inline-flex;
	}
	.brk-filter-apply-mobile {
		display: block;
		position: sticky;
		bottom: 0;
		margin: 16px -18px -18px;
		border-radius: 0;
	}

	.brk-search-mobile-filters-btn { display: inline-flex; }

	.brk-search-results-head {
		padding: 12px 14px;
		gap: 10px;
	}
	.brk-search-results-count strong { font-size: 16px; }
	.brk-search-sort { width: 100%; justify-content: space-between; flex-wrap: wrap; }

	.brk-search-card { grid-template-columns: 1fr; }
	.brk-sc-left {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		border-right: none;
		border-bottom: 1px solid var(--brk-border);
		padding: 14px 16px;
	}
	.brk-sc-logobox {
		width: 110px;
		height: 40px;
		padding: 6px 10px;
	}
	.brk-sc-cluster { flex-shrink: 0; }
	.brk-sc-center { padding: 14px 16px; gap: 8px; }
	.brk-sc-name { font-size: 17px; }
	.brk-sc-rating-row { gap: 8px; }
	.brk-sc-rating-block { padding: 5px 10px; gap: 8px; }
	.brk-sc-dots { padding: 5px 8px; }
	.brk-sc-right {
		flex-direction: row;
		gap: 8px;
		padding: 14px 16px;
		border-left: none;
		border-top: 1px solid var(--brk-border);
		background: var(--brk-bg-soft);
	}
	.brk-sc-cta-secondary,
	.brk-sc-right .brk-cta-primary {
		flex: 1;
	}
}

/* =============================================================================
 * v1.4.2 — FIX tooltip criterion + sidebar legacy aggressive override + section_score pending
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * Tooltip popup descrittivo nel breakdown punteggio — fix testo schiacciato
 * -------------------------------------------------------------------------- */
.tippy-box {
	max-width: 360px !important;
	background: transparent !important;
	border: none !important;
	box-shadow:
		0 0 0 1px rgba(73, 7, 217, 0.06),
		0 6px 16px rgba(0, 0, 0, 0.06),
		0 24px 48px rgba(73, 7, 217, 0.14) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
}
.tippy-box .tippy-content {
	padding: 16px 20px !important;
	background: linear-gradient(180deg, #ffffff 0%, #fcfaff 100%) !important;
	border-radius: 14px !important;
	font-size: 12.5px !important;
	line-height: 1.6 !important;
	color: var(--brk-text) !important;
	font-family: 'Roboto', sans-serif !important;
}
/* Primo strong = titolo tooltip (come "Sicurezza e regolamentazione") */
.tippy-box .tippy-content > strong:first-child,
.tippy-box .tippy-content strong:first-of-type {
	display: block;
	font-size: 13.5px;
	color: var(--brk-purple);
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--brk-border);
	font-weight: 700;
	letter-spacing: -0.1px;
}
/* Strong inline (es. dentro paragrafo) restano normali */
.tippy-box .tippy-content br + strong {
	display: inline;
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
	font-size: inherit;
	color: var(--brk-purple-d);
	font-weight: 700;
}
.tippy-box[data-placement^='top'] > .tippy-arrow::before {
	border-top-color: #ffffff !important;
}
.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
	border-bottom-color: #ffffff !important;
}
.tippy-box[data-placement^='left'] > .tippy-arrow::before {
	border-left-color: #ffffff !important;
}
.tippy-box[data-placement^='right'] > .tippy-arrow::before {
	border-right-color: #ffffff !important;
}

/* -----------------------------------------------------------------------------
 * Section score PENDING (criterion senza voto)
 * -------------------------------------------------------------------------- */
.brk-sec-score.brk-sec-score-pending {
	background: linear-gradient(90deg, #fff8e1 0%, #fffaf0 100%) !important;
	border: 1px solid #f1d99b !important;
}
.brk-sec-score-pending .brk-sec-num {
	color: #a17a1f !important;
	font-size: 10.5px !important;
}
.brk-sec-score-pending .brk-sec-stars-empty i {
	color: #f4d287 !important;
	opacity: 0.55 !important;
}
.brk-sec-score-pending .brk-info-icon {
	background: rgba(161, 122, 31, 0.18) !important;
	color: #a17a1f !important;
}
.brk-sec-score-pending .brk-info-icon:hover {
	background: #a17a1f !important;
	color: #ffffff !important;
}

/* -----------------------------------------------------------------------------
 * SIDEBAR LEGACY OVERRIDE — versione aggressiva v1.4.2
 * -------------------------------------------------------------------------- */

body .broker-reviews-container,
.entry-content .broker-reviews-container,
.widget .broker-reviews-container,
aside .broker-reviews-container,
#secondary .broker-reviews-container {
	background: #ffffff !important;
	border: 1px solid var(--brk-border) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	margin: 0 0 22px !important;
	box-shadow: 0 1px 2px rgba(27,30,37,0.04), 0 4px 14px rgba(73,7,217,0.05) !important;
	font-family: 'Roboto', sans-serif !important;
	padding: 0 !important;
	display: block !important;
}

body .broker-reviews-container::before,
aside .broker-reviews-container::before,
#secondary .broker-reviews-container::before {
	content: 'Migliori Broker Trading 2026' !important;
	display: block !important;
	background: linear-gradient(135deg, var(--brk-purple) 0%, #6a3fed 100%) !important;
	color: #ffffff !important;
	padding: 14px 18px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: -0.1px !important;
	margin: 0 !important;
	border-bottom: none !important;
	text-align: left !important;
}

body .broker-reviews-container .broker-review,
aside .broker-reviews-container .broker-review,
#secondary .broker-reviews-container .broker-review {
	border-bottom: 1px solid var(--brk-border) !important;
	padding: 14px 18px !important;
	background: #ffffff !important;
	transition: background 0.15s ease !important;
	margin: 0 !important;
	display: block !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
}
body .broker-reviews-container .broker-review:last-child,
aside .broker-reviews-container .broker-review:last-child {
	border-bottom: none !important;
}
body .broker-reviews-container .broker-review:hover,
aside .broker-reviews-container .broker-review:hover {
	background: var(--brk-bg-soft) !important;
}
body .broker-reviews-container .broker-review:first-of-type,
aside .broker-reviews-container .broker-review:first-of-type {
	background: linear-gradient(90deg, var(--brk-purple-tint) 0%, transparent 100%) !important;
}

body .broker-reviews-container .row-broker-one,
aside .broker-reviews-container .row-broker-one {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 0 !important;
	margin: 0 !important;
	flex-wrap: nowrap !important;
}

body .broker-reviews-container .col,
aside .broker-reviews-container .col,
body .broker-reviews-container .col-1,
body .broker-reviews-container .col-2,
body .broker-reviews-container .col-3,
body .broker-reviews-container .col-4,
body .broker-reviews-container .col-facts {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

body .broker-reviews-container .col-1,
aside .broker-reviews-container .col-1 {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	align-items: flex-start !important;
	margin-bottom: 4px !important;
}
body .broker-reviews-container .col-1 .broker-title,
aside .broker-reviews-container .col-1 .broker-title {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--brk-text) !important;
}
body .broker-reviews-container .col-1 .link-name-partner,
aside .broker-reviews-container .col-1 .link-name-partner {
	box-shadow: none !important;
	color: var(--brk-text) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	border-bottom: 2px solid var(--brk-purple-soft) !important;
	padding-bottom: 1px !important;
	transition: border-color 0.15s ease !important;
	background: transparent !important;
}
body .broker-reviews-container .col-1 .link-name-partner:hover {
	border-bottom-color: var(--brk-purple) !important;
}
body .broker-reviews-container .col-1 a img,
body .broker-reviews-container .col-1 img,
aside .broker-reviews-container .col-1 img {
	max-width: 130px !important;
	max-height: 36px !important;
	height: auto !important;
	width: auto !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 !important;
}

body .broker-reviews-container .col-2,
body .broker-reviews-container .col-3,
body .broker-reviews-container .col-facts,
aside .broker-reviews-container .col-2,
aside .broker-reviews-container .col-3,
aside .broker-reviews-container .col-facts,
body .broker-reviews-container .focus-point,
body .broker-reviews-container .fact-content {
	display: none !important;
}

body .broker-reviews-container .col-4,
aside .broker-reviews-container .col-4 {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	margin-top: 6px !important;
}

body .broker-reviews-container .col-4 .link-recensione,
body .broker-reviews-container .link-recensione,
aside .broker-reviews-container .link-recensione {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	background: linear-gradient(180deg, #04ce72 0%, var(--brk-green) 100%) !important;
	color: #ffffff !important;
	padding: 9px 14px !important;
	border-radius: 8px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(4, 190, 104, 0.25) !important;
	transition: all 0.18s ease !important;
	border: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
body .broker-reviews-container .link-recensione:hover {
	background: linear-gradient(180deg, var(--brk-green) 0%, var(--brk-green-d) 100%) !important;
	box-shadow: 0 4px 10px rgba(4, 190, 104, 0.35) !important;
	color: #ffffff !important;
	text-decoration: none !important;
}
body .broker-reviews-container .link-recensione svg {
	width: 11px !important;
	height: 11px !important;
}
body .broker-reviews-container .link-recensione svg path {
	fill: #ffffff !important;
}
body .broker-reviews-container .link-recensione span {
	color: #ffffff !important;
	margin-right: 4px !important;
}

body .broker-reviews-container .broker-rating-container,
aside .broker-reviews-container .broker-rating-container {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	background: var(--brk-purple-tint) !important;
	padding: 6px 10px !important;
	border-radius: 7px !important;
	margin: 0 !important;
}
body .broker-reviews-container .broker-rating,
aside .broker-reviews-container .broker-rating {
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	margin: 0 !important;
}
body .broker-reviews-container .broker-rating .star,
aside .broker-reviews-container .broker-rating .star {
	width: 12px !important;
	height: 12px !important;
	display: inline-block !important;
}
body .broker-reviews-container .broker-rating .rating-value,
aside .broker-reviews-container .broker-rating .rating-value {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--brk-purple) !important;
	margin-left: 4px !important;
}
body .broker-reviews-container .tradingrating,
aside .broker-reviews-container .tradingrating {
	display: none !important;
}

body .broker-reviews-container table {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}
body .broker-reviews-container table tr,
body .broker-reviews-container table td {
	display: block !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

@media (max-width: 768px) {
	body .broker-reviews-container::before,
	aside .broker-reviews-container::before {
		font-size: 13px !important;
		padding: 12px 16px !important;
	}
	body .broker-reviews-container .broker-review {
		padding: 12px 16px !important;
	}
}

/* =============================================================================
 * AMP COMPATIBILITY — niente JS calcolatore in pagine AMP
 * ========================================================================== */
.amp-mode-mouse .brk-calc-body input[type="range"] { display: none; }