/* =========================================================
   DatingCore — Public CSS (shortcode)
   Jesper Carstens / Altrum.dk
   ========================================================= */

:root {
	--dc-red:       #E8546B;
	--dc-red-deep:  #C73E54;
	--dc-green:     #46A75C;
	--dc-green-deep:#3B9350;
	--dc-ink:       #2B2630;
	--dc-muted:     #7A7280;
	--dc-line:      #F0E2E6;
	--dc-bg:        #FFFAFB;
	--dc-white:     #ffffff;
}

/* =========================================================
   SAMMENLIGNING WRAPPER
   ========================================================= */
.dc-comparison {
	display: flex;
	flex-direction: column;
	gap: 16px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* =========================================================
   CARD
   ========================================================= */
.dc-card {
	display: grid;
	grid-template-columns: 40px 200px 1fr 84px 172px;
	gap: 20px;
	align-items: center;
	background: var(--dc-white);
	border: 1.5px solid var(--dc-line);
	border-radius: 20px;
	padding: 20px 24px;
	box-shadow: 0 4px 16px rgba(158,44,64,.06);
	transition: box-shadow .2s, transform .2s;
	position: relative;
}
.dc-card:hover {
	box-shadow: 0 12px 32px rgba(158,44,64,.12);
	transform: translateY(-2px);
}
.dc-card--top {
	border-color: #F4AEBD;
	background: linear-gradient(180deg, #FFF4F6 0%, #fff 60%);
	box-shadow: 0 12px 36px rgba(232,84,107,.14);
}

/* =========================================================
   RANGERING (medalje)
   ========================================================= */
.dc-rank {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 18px;
	color: #fff;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0,0,0,.14);
}
.dc-rank--1     { background: linear-gradient(150deg, #F4C04E, #E0992C); }
.dc-rank--2     { background: linear-gradient(150deg, #C7CCD4, #9DA3AD); }
.dc-rank--3     { background: linear-gradient(150deg, #D79B6B, #B5774A); }
.dc-rank--other { background: linear-gradient(150deg, #94A3B8, #64748B); }

/* =========================================================
   BRAND (logo + navn + stjerner)
   ========================================================= */
.dc-brand {
	display: flex;
	align-items: center;
	gap: 14px;
}
.dc-brand__logo-wrap { flex-shrink: 0; }
.dc-brand__logo {
	width: 60px;
	height: 60px;
	border-radius: 14px;
	object-fit: contain;
	padding: 5px;
	box-sizing: border-box;
	border: 1.5px solid #F0E2E6;
	background: #fff;
}
.dc-brand__logo-placeholder {
	width: 60px;
	height: 60px;
	border-radius: 14px;
	background: linear-gradient(150deg, var(--dc-red), var(--dc-red-deep));
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 18px;
	font-weight: 800;
}
.dc-brand__info {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.dc-brand__name {
	font-size: 17px;
	font-weight: 800;
	color: var(--dc-ink);
	letter-spacing: -.01em;
}
.dc-brand__rating {
	display: flex;
	align-items: center;
	gap: 8px;
}
.dc-brand__score {
	font-size: 13px;
	font-weight: 700;
	color: var(--dc-muted);
}

/* =========================================================
   STATS (Type + Aldersgruppe)
   ========================================================= */
.dc-stats {
	display: flex;
	gap: 20px;
	align-items: center;
}
.dc-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.dc-stat__label {
	font-size: 11px;
	font-weight: 600;
	color: var(--dc-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.dc-stat__value {
	font-size: 14px;
	font-weight: 700;
	color: var(--dc-ink);
}

/* =========================================================
   CTA-kolonne
   ========================================================= */
.dc-action {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: stretch;
}

.dc-btn-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient(180deg, var(--dc-green) 0%, var(--dc-green-deep) 100%);
	color: #fff !important;
	text-decoration: none !important;
	padding: 13px 16px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 8px 20px rgba(59,147,80,.28);
	transition: transform .14s, box-shadow .14s;
}
.dc-btn-cta:hover {
	color: #fff !important;
	text-decoration: none !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(59,147,80,.38);
}
.dc-btn-cta__arrow {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.dc-read-review {
	display: block;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: #6B7280 !important;
	text-decoration: none !important;
	transition: color .15s;
}
.dc-read-review:hover { color: #C73E54 !important; }

/* =========================================================
   STJERNER
   ========================================================= */
.dc-stars {
	display: inline-flex;
	gap: 2px;
	align-items: center;
}
.dc-star { display: inline-flex; }
.dc-star svg { width: 15px; height: 15px; }
.dc-star--full  svg { fill: #F59E0B; color: #F59E0B; }
.dc-star--half  svg { color: #F59E0B; }
.dc-star--empty svg { fill: none; stroke: #D1D5DB; color: #D1D5DB; }

/* =========================================================
   INGEN RESULTATER
   ========================================================= */
.dc-no-results {
	color: var(--dc-muted);
	font-style: italic;
	padding: 20px 0;
}

/* =========================================================
   RESPONSIVT
   ========================================================= */
@media (max-width: 900px) {
	.dc-card {
		grid-template-columns: 36px 1fr 140px;
		grid-template-rows: auto auto;
	}
	.dc-stats { grid-column: 2 / -1; }
}

@media (max-width: 640px) {
	.dc-card {
		grid-template-columns: 36px 1fr;
		grid-template-rows: auto auto auto;
		gap: 14px;
		padding: 16px;
	}
	.dc-action { grid-column: 1 / -1; flex-direction: row; align-items: center; }
	.dc-btn-cta { flex: 1; font-size: 14px; padding: 11px 12px; }
	.dc-stats { grid-column: 1 / -1; flex-wrap: wrap; }
	.dc-brand__logo, .dc-brand__logo-placeholder { width: 48px; height: 48px; }
}

/* ── Score ring (pie chart) i [sammenlign] ──────────────── */
.dc-score-ring {
	position: relative;
	width: 80px;
	height: 80px;
	flex-shrink: 0;
}
.dc-score-ring svg {
	width: 80px;
	height: 80px;
	display: block;
}
.dc-score-ring__label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.dc-score-ring__num {
	font-family: var(--dc-font-display, 'Bricolage Grotesque', sans-serif);
	font-weight: 800;
	font-size: 19px;
}
.dc-score-ring__den {
	font-size: 10px;
	color: var(--dc-muted);
	font-weight: 600;
	margin-top: 2px;
}

/* Responsive: stack ring + action on small screens */
@media (max-width: 680px) {
	.dc-card {
		grid-template-columns: 36px 1fr;
		grid-template-areas:
			"rank brand"
			"rank stats"
			"ring action";
		gap: 10px 14px;
	}
	.dc-rank   { grid-area: rank; }
	.dc-brand  { grid-area: brand; }
	.dc-stats  { grid-area: stats; flex-wrap: wrap; }
	.dc-score-ring { grid-area: ring; justify-self: center; }
	.dc-action { grid-area: action; }
}

/* ── Type/alder badges under navn i [sammenlign] ────────── */
.dc-rev-card__meta-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}
.dc-rev-card__badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    color: #6B7280;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 2px 9px;
}
/* Top-kort fremhævet */
.dc-rev-card--top {
    border-color: #FAD2DB !important;
    background: linear-gradient(180deg, #FFF4F6 0%, #fff 60%) !important;
}
/* Fjern gammel dc-comparison CSS der nu er overflødig */
.dc-comparison-grid { display: flex; flex-direction: column; gap: 12px; }
.dc-comparison-list { }