/* ===== Atsea · VoIP vergelijkingstabel ======================================
   Volledig zelfstandig: alle regels staan onder .hkw-voip, er wordt geen
   body- of globale CSS gezet, en de kleuren staan hier vast (dus NIET via de
   Elementor-globals, die per thema iets heel anders kunnen zijn).

   Kleur aanpassen? Wijzig de variabelen hieronder, of overrule ze per widget
   in de stijl-tab van de Elementor-widget "VoIP pakketten".

   Op een paar plekken staat !important. Dat is bewust: thema's en Elementor
   zetten eigen regels op h3, a en span die anders door deze component heen
   lekken (verkeerde kleur, veel te grote koppen, onzichtbare knoppen).
   ========================================================================= */
.hkw-voip {
	--hkw-head-bg: #3d6eb2;        /* blauwe kop        */
	--hkw-head-fg: #ffffff;
	--hkw-accent: #2f68c4;         /* knop              */
	--hkw-accent-dark: #24549e;
	--hkw-ink: #16202c;            /* prijs en titels   */
	--hkw-text: #667180;           /* lopende tekst     */
	--hkw-check: #f4511e;          /* vinkje            */
	--hkw-save-bg: #e9e9fb;
	--hkw-save-fg: #4c51c8;
	--hkw-line: #e7edf6;
	--hkw-soft: #f6f9fd;
	--hkw-card: #ffffff;
	--hkw-radius: 16px;
	--hkw-gap: 14px;
	--hkw-sticky-top: 0px;         /* bv. 90px bij een sticky menu */

	color: var(--hkw-text);
	font-size: 15px;
	line-height: 1.45;
	text-align: left;
	-webkit-text-size-adjust: 100%;
}

.hkw-voip *,
.hkw-voip *::before,
.hkw-voip *::after {
	box-sizing: border-box;
}

/* kleine reset zodat thema-regels niet doorlekken */
.hkw-voip p,
.hkw-voip h3,
.hkw-voip span,
.hkw-voip s,
.hkw-voip label,
.hkw-voip a {
	margin: 0;
	padding: 0;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	background: none;
}

.hkw-voip svg {
	display: inline-block;
	vertical-align: middle;
	max-width: none;
}

.hkw-voip .hkw-caption {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--hkw-text);
}

.hkw-voip .hkw-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ---------- cellen (basis = mobiel) ---------- */

.hkw-voip .hkw-cell {
	position: relative;
	z-index: 1;
	padding: 11px 20px;
}

.hkw-voip .hkw-label {
	display: none;
}

/* blauwe kop */
.hkw-voip .hkw-head {
	padding: 24px 20px 20px;
	background: var(--hkw-head-bg) !important;
	color: var(--hkw-head-fg) !important;
	text-align: center;
}

.hkw-voip .hkw-col--labels .hkw-head {
	background: transparent !important;
}

.hkw-voip .hkw-name {
	display: block;
	margin: 0;
	font-size: 22px !important;
	line-height: 1.25 !important;
	font-weight: 700;
	color: var(--hkw-head-fg) !important;
	overflow-wrap: break-word;
	word-break: normal;
	white-space: normal;
}

.hkw-voip .hkw-sub {
	display: block;
	margin-top: 5px;
	font-size: 13.5px;
	line-height: 1.4;
	color: rgba( 255, 255, 255, .85 ) !important;
}

.hkw-voip .hkw-badge {
	display: inline-block;
	margin: 0 0 9px;
	padding: 3px 11px;
	background: #fff !important;
	color: var(--hkw-head-bg) !important;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	line-height: 1.7;
}

/* prijsblok */
.hkw-voip .hkw-price {
	padding: 24px 20px 6px;
	text-align: center;
}

.hkw-voip .hkw-oldrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.hkw-voip .hkw-old {
	color: #98a1ac !important;
	font-size: 14px !important;
	text-decoration: line-through;
}

.hkw-voip .hkw-save {
	padding: 4px 12px;
	background: var(--hkw-save-bg) !important;
	color: var(--hkw-save-fg) !important;
	border-radius: 999px;
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: .03em !important;
	line-height: 1.6;
	white-space: nowrap;
}

.hkw-voip .hkw-amount {
	font-size: 40px !important;
	line-height: 1.1 !important;
	font-weight: 600;
	color: var(--hkw-ink) !important;
	letter-spacing: -.02em !important;
}

.hkw-voip .hkw-unit {
	margin-left: 5px;
	font-size: 17px !important;
	color: var(--hkw-ink) !important;
}

.hkw-voip .hkw-per {
	display: block;
	margin-top: 8px;
	font-size: 12.5px !important;
	line-height: 1.4;
	color: var(--hkw-text) !important;
}

/* knop */
.hkw-voip .hkw-cta {
	padding: 18px 20px 20px;
}

.hkw-voip .hkw-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	padding: 14px 20px;
	background: var(--hkw-accent) !important;
	color: #fff !important;
	border: 1px solid var(--hkw-accent) !important;
	border-radius: 10px;
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none !important;
	box-shadow: none;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.hkw-voip .hkw-btn:hover,
.hkw-voip .hkw-btn:focus {
	background: var(--hkw-accent-dark) !important;
	border-color: var(--hkw-accent-dark) !important;
	color: #fff !important;
	transform: translateY( -1px );
}

.hkw-voip .hkw-btn--ghost {
	background: transparent !important;
	color: var(--hkw-accent) !important;
	border-color: #d5e0ee !important;
}

.hkw-voip .hkw-btn--ghost:hover,
.hkw-voip .hkw-btn--ghost:focus {
	background: var(--hkw-accent) !important;
	border-color: var(--hkw-accent) !important;
	color: #fff !important;
}

.hkw-voip .hkw-arrow {
	width: 15px;
	height: 15px;
	flex: none;
}

/* "Functies :" */
.hkw-voip .hkw-fhead {
	padding: 4px 20px 10px;
}

.hkw-voip .hkw-fhead__txt {
	display: block;
	padding-top: 16px;
	border-top: 1px solid var(--hkw-line);
	font-size: 14px !important;
	color: var(--hkw-text) !important;
}

/* waarden */
.hkw-voip .hkw-v {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 7px;
	text-align: right;
}

.hkw-voip .hkw-i {
	width: 19px;
	height: 19px;
	flex: none;
	color: var(--hkw-check) !important;
}

.hkw-voip .hkw-tag {
	font-size: 13px !important;
	color: var(--hkw-text) !important;
}

.hkw-voip .hkw-num {
	font-size: 15.5px !important;
	font-weight: 700;
	color: var(--hkw-ink) !important;
}

.hkw-voip .hkw-no {
	color: #b3bcc8 !important;
	font-size: 17px !important;
	line-height: 1;
}

.hkw-voip .hkw-pill {
	display: inline-block;
	padding: 2px 11px;
	border-radius: 999px;
	font-size: 12.5px !important;
	font-weight: 600;
	line-height: 1.7;
	white-space: nowrap;
}

.hkw-voip .hkw-pill--opt {
	background: #fff4e8 !important;
	color: #a35a14 !important;
	border: 1px solid #f4ddc2;
}

.hkw-voip .hkw-pill--soft {
	background: var(--hkw-soft) !important;
	color: var(--hkw-text) !important;
	border: 1px solid var(--hkw-line);
}

.hkw-voip .hkw-foot {
	margin: 20px 0 0;
	font-size: 13px;
	color: var(--hkw-text);
}

/* =========================================================================
   MOBIEL / TABLET (< 900px): elk pakket is een losse kaart
   ========================================================================= */
@media (max-width: 899px) {

	.hkw-voip .hkw-grid {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.hkw-voip .hkw-col--labels,
	.hkw-voip .hkw-colbg {
		display: none;
	}

	.hkw-voip .hkw-col {
		background: var(--hkw-card);
		border: 1px solid var(--hkw-line);
		border-radius: var(--hkw-radius);
		overflow: hidden;
		box-shadow: 0 3px 16px rgba( 18, 35, 58, .06 );
	}

	.hkw-voip .hkw-col--pop {
		border-color: var(--hkw-head-bg);
		box-shadow: 0 8px 26px rgba( 47, 104, 196, .16 );
	}

	.hkw-voip .hkw-feat {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		border-top: 1px solid var(--hkw-line);
	}

	.hkw-voip .hkw-feat::before {
		content: attr( data-label );
		font-size: 14px;
		line-height: 1.35;
		color: var(--hkw-text);
	}

	.hkw-voip .hkw-alt {
		background: #fbfcfe;
	}

	.hkw-voip .hkw-cta--bottom {
		display: none;
	}

	/* "toon alles"-schakelaar */
	.hkw-voip .hkw-rest {
		display: none;
	}

	.hkw-voip .hkw-more-cb:checked ~ .hkw-rest {
		display: block;
	}

	.hkw-voip .hkw-more {
		display: block;
		padding: 14px 20px;
		border-top: 1px solid var(--hkw-line);
		color: var(--hkw-accent) !important;
		font-weight: 600;
		font-size: 14px !important;
		text-align: center;
		cursor: pointer;
		user-select: none;
	}

	.hkw-voip .hkw-more:hover {
		background: var(--hkw-soft);
	}

	.hkw-voip .hkw-more .hkw-less {
		display: none;
	}

	.hkw-voip .hkw-more-cb:checked ~ .hkw-more .hkw-less {
		display: inline;
	}

	.hkw-voip .hkw-more-cb:checked ~ .hkw-more .hkw-all {
		display: none;
	}

	.hkw-voip .hkw-more::after {
		content: "";
		display: inline-block;
		width: 7px;
		height: 7px;
		margin-left: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY( -2px ) rotate( 45deg );
	}

	.hkw-voip .hkw-more-cb:checked ~ .hkw-more::after {
		transform: translateY( 2px ) rotate( 225deg );
	}
}

.hkw-voip .hkw-more-cb {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

/* =========================================================================
   DESKTOP (>= 900px): vier kaartkolommen in één uitgelijnd raster
   ========================================================================= */
@media (min-width: 900px) {

	.hkw-voip .hkw-grid {
		display: grid;
		grid-template-columns: minmax( 200px, 1.4fr ) repeat( 4, minmax( 150px, 1fr ) );
		column-gap: var(--hkw-gap);
		isolation: isolate;
	}

	.hkw-voip .hkw-col,
	.hkw-voip .hkw-feats,
	.hkw-voip .hkw-rest {
		display: contents;
	}

	.hkw-voip .hkw-more,
	.hkw-voip .hkw-more-cb {
		display: none;
	}

	/* witte kaart achter elke pakketkolom */
	.hkw-voip .hkw-colbg {
		grid-row: 1 / span var(--rows, 40);
		z-index: 0;
		background: var(--hkw-card);
		border: 1px solid var(--hkw-line);
		border-radius: var(--hkw-radius);
		box-shadow: 0 3px 18px rgba( 18, 35, 58, .07 );
	}

	.hkw-voip .hkw-col--pop .hkw-colbg {
		border-color: rgba( 47, 104, 196, .45 );
		box-shadow: 0 10px 30px rgba( 47, 104, 196, .16 );
	}

	.hkw-voip .hkw-cell {
		grid-row: var(--r);
		padding: 11px 16px;
		text-align: center;
	}

	.hkw-voip .hkw-col--1 .hkw-cell,
	.hkw-voip .hkw-col--1 > .hkw-colbg {
		grid-column: 2;
	}

	.hkw-voip .hkw-col--2 .hkw-cell,
	.hkw-voip .hkw-col--2 > .hkw-colbg {
		grid-column: 3;
	}

	.hkw-voip .hkw-col--3 .hkw-cell,
	.hkw-voip .hkw-col--3 > .hkw-colbg {
		grid-column: 4;
	}

	.hkw-voip .hkw-col--4 .hkw-cell,
	.hkw-voip .hkw-col--4 > .hkw-colbg {
		grid-column: 5;
	}

	.hkw-voip .hkw-col--labels .hkw-cell {
		grid-column: 1;
		padding-left: 2px;
		text-align: left;
		color: var(--hkw-text);
	}

	.hkw-voip .hkw-alt {
		background: #f7f9fc;
	}

	.hkw-voip .hkw-col--pop .hkw-alt {
		background: #eff5fd;
	}

	.hkw-voip .hkw-col--labels .hkw-alt {
		background: #f7f9fc;
		border-radius: 8px;
	}

	.hkw-voip .hkw-feat {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}

	.hkw-voip .hkw-col--labels .hkw-feat {
		justify-content: flex-start;
	}

	.hkw-voip .hkw-v {
		justify-content: center;
		text-align: center;
	}

	.hkw-voip .hkw-tag {
		display: none;    /* op desktop volstaat het vinkje */
	}

	.hkw-voip .hkw-label {
		display: block;
		font-size: 15px !important;
		font-weight: 500;
		color: #4b5764 !important;
	}

	/* kop blijft in beeld tijdens het scrollen */
	.hkw-voip .hkw-head {
		position: sticky;
		top: var(--hkw-sticky-top);
		z-index: 3;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 18px 14px;
		border-radius: calc( var(--hkw-radius) - 1px ) calc( var(--hkw-radius) - 1px ) 0 0;
	}

	.hkw-voip .hkw-head .hkw-badge {
		align-self: center;
	}

	.hkw-voip .hkw-name {
		font-size: 19px !important;
	}

	.hkw-voip .hkw-sub {
		font-size: 12.5px !important;
	}

	.hkw-voip .hkw-price {
		padding: 20px 14px 4px;
	}

	.hkw-voip .hkw-oldrow {
		gap: 7px;
		margin-bottom: 12px;
	}

	.hkw-voip .hkw-old {
		font-size: 13px !important;
	}

	.hkw-voip .hkw-save {
		padding: 3px 9px;
		font-size: 11px !important;
	}

	.hkw-voip .hkw-amount {
		font-size: 32px !important;
	}

	.hkw-voip .hkw-unit {
		font-size: 15px !important;
	}

	.hkw-voip .hkw-col--labels .hkw-price {
		padding-top: 34px;
	}

	.hkw-voip .hkw-cta {
		padding: 14px 14px 16px;
	}

	.hkw-voip .hkw-btn {
		padding: 11px 14px;
		font-size: 14.5px !important;
	}

	.hkw-voip .hkw-cta--bottom {
		padding: 16px 14px 18px;
	}

	.hkw-voip .hkw-fhead {
		padding: 0 14px 8px;
	}

	.hkw-voip .hkw-col--labels .hkw-fhead {
		padding-left: 2px;
	}

	.hkw-voip .hkw-fhead__txt {
		padding-top: 14px;
		font-size: 13px !important;
		font-weight: 600;
		letter-spacing: .02em !important;
		color: #8a95a3 !important;
	}

	/* in de pakketkolommen alleen de scheidingslijn, de titel staat links */
	.hkw-voip .hkw-col:not(.hkw-col--labels) .hkw-fhead__txt {
		font-size: 0 !important;
	}
}