@charset "UTF-8";
/*
 * Vergelijkerpagina's (eigen toestelvergelijker + TDS-widget).
 * Alleen geladen op pagina's met _page_widgets; main.css blijft ongemoeid.
 *
 * Zelfde opmaak als de toestelpagina (assets/css/device.css); waarden gemeten
 * in de originele site.css van www.iphone.nl:
 *   #filter-sider            padding 5px; border 1px #abaeb1; radius 3px; wit
 *   .phone-comparer h4       16px/18px bold; padding 4px 0; border-bottom 1px dotted #CCC; #5d9cec
 *   .filter-section          padding-left 10px
 *   .checkbox                margin 10px 0; label padding-left 20px; input -20px
 *   .color-example           16x16; radius 4px; inset shadow rgba(0,0,0,.15)
 *   .slider(-horizontal)     210x20; track 10px; handle 20x20 #5A99E7
 *   .alert                   padding 15px; radius 4px
 *   .countVergelijkerTekst   margin-bottom 0; border 0; padding-top/bottom 5px
 *   #phones-list             border-bottom 1px #abaeb1
 *   .table>thead>tr>th       13px/600 uppercase #666; border-bottom 1px #ddd
 *   .table>tbody>tr>td       padding 8px; border-top 0;  striped odd #f9f9f9
 *   .btn                     13px bold uppercase; padding 6px 12px; radius 2px
 *   .btn-primary             #5d9cec  (gemeten knophoogte 32px)
 *   .colSpan8TD              text-align center
 *   .seller-image            60x30  (@max-767: 50x25)
 *   .comparer-link           #F49600 / border #e88f00; 12px; padding 5px 15px; radius 5px
 * Accenttoken #5d9cec komt uit main.css (--inl-accent).
 */

/* ---- Gridaanvulling: main.css kent alleen col-md-4/6/8/12 ---- */
@media (min-width: 992px) {
	.phone-comparer .col-md-3,
	.phone-comparer .col-md-9 { float: left; }
	.phone-comparer .col-md-3 { width: 25%; }
	.phone-comparer .col-md-9 { width: 75%; }
	.phone-comparer .col-md-6 { float: left; width: 50%; }
}

/* ---- Iconen die main.css nog niet kent ---- */
.fa-sort-asc::before { content: '\f0de'; }
.fa-sort-desc::before { content: '\f0dd'; }
.fa-sliders::before { content: '\f1de'; }
.fa-times::before { content: '\f00d'; }
.fa-caret-right::before { content: '\f0da'; }
.fa-caret-left::before { content: '\f0d7'; }

/* ---- Introtekst boven de vergelijker ---- */
/* Live: gewone alinea's, dus alleen de standaard p{margin:0 0 10px}. */
.comparer-intro p { margin: 0 0 10px; }

/* ---- Vergelijkerblok ---- */
.phone-comparer { padding: 0; border: 0; overflow: hidden; border-radius: 3px; }
.phone-comparer h4 {
	font-size: 16px;
	font-weight: 700;
	/* Live erft line-height:18px van de h4-basisregel en margin-top:10px van
	   .h4,.h5,.h6,h4,h5,h6 — gemeten kophoogte 27 px (4+18+4+1). */
	line-height: 18px;
	margin: 10px 0 0;
	padding-top: 4px;
	padding-bottom: 4px;
	border-bottom: 1px dotted #ccc;
	color: var(--inl-accent, #5d9cec);
}

/* ---- Tellermelding boven de tabel ---- */
/* Live plaatst deze .alert met .before() als eerste kind van de .row in
   #col-items; de tekst begint daardoor 8px links van de eerste kolomkop. */
.countVergelijkerTekst {
	margin-bottom: 0;
	border: 0;
	padding: 5px 15px;
	border-radius: 4px;
	color: #666;
}
.countVergelijkerTekst b { color: var(--inl-text, #333); }

/* ---- Filterkolom ---- */
#filter-sider {
	padding: 5px;
	background-color: #fff;
	border: 1px solid #abaeb1;
	border-radius: 3px;
	margin-bottom: 15px;
}
.filter-section { padding-left: 10px; }
.filter-section .checkbox {
	position: relative;
	display: block;
	margin-top: 10px;
	margin-bottom: 10px;
}
.filter-section .checkbox + .checkbox { margin-top: -5px; }
.filter-section .checkbox label {
	display: inline-block;
	max-width: 100%;
	min-height: 20px;
	padding-left: 20px;
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
}
.filter-section .checkbox input[type='checkbox'] {
	position: absolute;
	margin-left: -20px;
	margin-top: 3px;
	accent-color: var(--inl-accent, #5d9cec);
}

.color-example {
	width: 16px;
	height: 16px;
	border: 0;
	display: inline-block;
	vertical-align: middle;
	margin-right: 4px;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
	background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.01) 0%, rgba(255, 255, 255, 0.1) 100%);
}
/* Kleuren exact uit site.css */
.color-example[data-kleur='zilver']     { background-color: #dddfde; }
.color-example[data-kleur='goud']       { background-color: #e3d0ba; }
.color-example[data-kleur='rood']       { background-color: #f8242d; }
.color-example[data-kleur='roségoud']   { background-color: #edccbd; }
.color-example[data-kleur='roze']       { background-color: #ff706c; }
.color-example[data-kleur='spacegrijs'] { background-color: #abaeb1; }
.color-example[data-kleur='grafiet']    { background-color: #61605c; }
.color-example[data-kleur='wit']        { background-color: #fff; }
.color-example[data-kleur='zwart']      { background-color: #1f1b1b; }
.color-example[data-kleur='gitzwart']   { background-color: #000; }
.color-example[data-kleur='blauw']      { background-color: #42b3ed; }
.color-example[data-kleur='geel']       { background-color: #fef16f; }
.color-example[data-kleur='groen']      { background-color: #99e368; }
.color-example[data-kleur='koraal']     { background-color: #ff5733; }
.color-example[data-kleur='blauwgroen'] { background-color: #42b3ed; }

/* ---- Prijsfilter + schuifbalk ---- */
.slider-wrapper { text-align: center; margin-top: 10px; }
.range-price-min { text-align: left; }
.range-price-max { text-align: right; }
.range-price-min, .range-price-max { font-size: 13px; color: var(--inl-text-muted, #777); }

/* Zonder JS blijven twee getalvelden over; filteren werkt dan gewoon. */
.price-inputs { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.price-inputs input {
	width: 100%;
	min-width: 0;
	padding: 4px 6px;
	border: 1px solid #ddd;
	border-radius: 3px;
	font-size: 13px;
	color: var(--inl-text, #333);
}
.price-inputs input:focus { border-color: var(--inl-accent, #5d9cec); outline: none; }

/* Dubbele range-schuifbalk (vanilla JS, alleen zichtbaar mét JS) */
.price-slider { display: none; position: relative; height: 20px; margin: 4px 0 2px; }
.js-comparer .price-slider { display: block; }
.js-comparer .price-inputs { display: none; }
.price-slider .slider-track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 10px;
	margin-top: -5px;
	border-radius: 4px;
	background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%);
	box-shadow: inset 0 0 0 1px #ddd;
}
.price-slider .slider-selection {
	position: absolute;
	top: 50%;
	height: 10px;
	margin-top: -5px;
	border-radius: 4px;
	/* live: .slider-selection heeft dezelfde grijze verloop als de track */
	background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
}
.price-slider input[type='range'] {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20px;
	margin: 0;
	padding: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.price-slider input[type='range']::-webkit-slider-thumb {
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background-color: #5a99e7;
	cursor: pointer;
}
.price-slider input[type='range']::-moz-range-thumb {
	pointer-events: auto;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background-color: #5a99e7;
	cursor: pointer;
}
.price-slider input[type='range']::-moz-range-track { background: none; }

/* ---- Filterknoppen ---- */
.filter-reset-wrapper { text-align: center; padding: 12px 5px 8px; }
.filter-submit { margin-bottom: 6px; }
.filter-reset { display: block; font-size: 12px; color: var(--inl-accent, #5d9cec); }
.filter-reset:hover { text-decoration: underline; }

#toggle-filter-sider { margin: 3px 0; display: none; }
.js-comparer #toggle-filter-sider { display: none; }
@media (max-width: 991px) {
	.js-comparer #toggle-filter-sider { display: block; width: 100%; font-size: 14px; }
	.js-comparer #filter-sider { display: none; }
	.js-comparer #filter-sider.is-open { display: block; }
}

/* ---- Resultatentabel ---- */
#phones-list { font-size: 14px; border-bottom: 1px solid #abaeb1; }
#phones-list .table { width: 100%; max-width: 100%; margin-bottom: 20px; border-collapse: collapse; }
#phones-list .table > thead > tr > th {
	padding: 8px;
	line-height: 1.42857143;
	vertical-align: middle;
	border-bottom: 1px solid #ddd;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	color: #666;
	text-align: left;
}
#phones-list .table > tbody > tr > td {
	padding: 8px;
	line-height: 1.42857143;
	vertical-align: middle;
	border-top: 0;
}
#phones-list .table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9; }
/* main.css zet .hidden-xs op display:block; in een tabel moet dat table-cell zijn. */
@media (min-width: 768px) {
	#phones-list .table > thead > tr > th.hidden-xs,
	#phones-list .table > tbody > tr > td.hidden-xs { display: table-cell; }
}
/* Live: .phone-comparer .sort-button{padding:1px 2px;padding-left:5px} — verder
   gewoon .btn (13px/1.42857), gemeten 21x23 px. */
.phone-comparer .sort-button { padding: 1px 2px 1px 5px; }
.shopData { font-weight: 600; text-transform: capitalize; }
.colorData { text-transform: capitalize; font-size: 12px; }
.conditionData { text-transform: capitalize; font-size: 12px; }
.memoryData { font-size: 12px; }
.priceData { white-space: nowrap; }
.labelKooptip {
	color: #fff;
	font-size: 12px;
	background-color: #f49600;
	padding: 2px;
	border-radius: 2px;
	display: block;
	width: fit-content;
	margin-bottom: 3px;
}
.comparer-link {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	border-radius: 5px;
	cursor: pointer;
	font-size: 12px;
	font-weight: 400 !important;
	line-height: 1;
	padding: 5px 15px;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
	background-color: #f49600;
	border: 1px solid #e88f00;
	color: #fff;
	text-transform: none;
}
.comparer-link:hover,
.comparer-link:focus {
	background-color: #f39500;
	border: 1px solid #e88f00;
	color: #fff;
	text-decoration: none;
}

/* Verkoperslogo's in de aanbiedingentabel, zoals live (.seller-image). */
.seller-logo { width: 60px; height: 30px; object-fit: contain; }
@media (max-width: 767px) { .seller-logo { width: 50px; height: 25px; } }
.seller-name { font-size: 12px; color: var(--inl-text-muted, #777); }

/* ---- "Toon alle deals"-knop na elke modelgroep ---- */
/* Live: <td class="colSpan8TD" colspan="8"> met een .btn.btn-primary erin. */
.colSpan8TD { text-align: center; }
.algemeneVergelijkerButton, .algemeneVergelijkerButton:hover { color: #fff; }

/* ---- Paginering ---- */
.pagination-wrapper { margin-top: 10px; text-align: center; padding-bottom: 20px; }
.pagination-wrapper .btn { margin: 0 2px 5px; }
.pagination-wrapper .pagination-status {
	display: inline-block;
	margin: 0 8px 5px;
	color: var(--inl-text-muted, #777);
	font-size: 13px;
}

/* ---- Meldingen (geen data / configuratie ontbreekt) ---- */
.device-notice {
	border: 1px solid #ddd;
	border-left: 4px solid var(--inl-accent, #5d9cec);
	border-radius: 4px;
	background: #fff;
	padding: 12px 15px;
	margin: 20px 0;
}
.device-notice strong { display: block; margin-bottom: 4px; }
.device-notice p { margin: 0; color: var(--inl-text-muted, #777); }

/* ---- Lege staat / placeholder (TDS-widget zonder token) ---- */
.comparer-placeholder {
	border: 1px dashed #ddd;
	border-radius: 4px;
	background: #fafafa;
	padding: 20px 15px;
	text-align: center;
	color: #666;
	margin-bottom: 20px;
}
.comparer-placeholder p { margin: 0; }

/* ---- Redactionele tekst onder de vergelijker ---- */
.page-content { max-width: 100%; overflow-wrap: anywhere; }
.page-content h2 { margin: 20px 0 10px; }

/* ---- Mobiel ---- */
@media (max-width: 767px) {
	#phones-list .table > thead > tr > th,
	#phones-list .table > tbody > tr > td { vertical-align: top; padding: 8px 4px; }
	.filter-section { padding-left: 5px; }
	/* Zeven kolommen passen niet op een telefoon; de tabel scrollt daar
	   horizontaal binnen zijn eigen kader in plaats van de pagina te verbreden. */
	.table-responsive { border: 0; }
	.table-responsive > .table { margin-bottom: 0; }
}
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* De schuifknop van de prijsschuifbalk (20px, absoluut gepositioneerd) stak
   buiten de filterkolom en maakte de pagina op mobiel breder dan het scherm. */
.phone-comparer,
#filter-sider { max-width: 100%; }
#filter-sider { overflow-x: hidden; }
.price-slider { max-width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; }

/* ---- Wisselen tussen de iPhone- en de Androidvergelijker ----
   Op providerpagina's staan twee TDS-widgets in de pagina; er is er steeds één
   zichtbaar, gestuurd door de tabbalk erboven. Zonder JavaScript blijft de
   eerste staan, want alleen .tds-paneel zonder .actief wordt verborgen. */
.tds-paneel + .tds-paneel { display: none; }
.tds-paneel.actief { display: block; }
.tds-paneel.verborgen { display: none; }

.comparer-toon-meer{display:block;margin:16px auto;}

/* ---- Tabbalk boven model- en providervergelijkers (.tab-menu) ----
   Zelfde maten als de toestelpagina (device.css), gemeten op live:
   ul margin-top 20px; li zweeft met 2px onderrand #e0e0e0 (actief #333);
   a padding 8px 4px, 600, #333 / actief #5d9cec. */
.comparer-main .tab-menu { margin-bottom: 0; }
.comparer-main .tab-menu .nav-tabs {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	border: 0;
	overflow: visible;
}
.comparer-main .tab-menu .nav-tabs::before,
.comparer-main .tab-menu .nav-tabs::after { content: ' '; display: table; }
.comparer-main .tab-menu .nav-tabs::after { clear: both; }
.comparer-main .tab-menu .nav-tabs > li {
	float: left;
	border-bottom: 2px solid #e0e0e0;
	margin-left: 0;
	margin-bottom: -1px;
	padding: 5px 2px 0;
}
.comparer-main .tab-menu .nav-tabs > li > a {
	display: block;
	margin-right: 2px;
	padding: 8px 4px;
	border: 0;
	border-radius: 4px 4px 0 0;
	color: var(--inl-text, #333);
	font-weight: 600;
	line-height: 1.42857143;
}
.comparer-main .tab-menu .nav-tabs > li > a:hover { color: var(--inl-accent, #5d9cec); text-decoration: none; }
.comparer-main .tab-menu .nav-tabs > li.active { border-bottom-color: #333; }
.comparer-main .tab-menu .nav-tabs > li.active > a { color: var(--inl-accent, #5d9cec); }
.comparer-main .tab-menu .nav-tabs li.dropdown { position: relative; }
.comparer-main .tab-menu .nav-tabs li.dropdown > a > .caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 2px;
	vertical-align: middle;
	border-top: 4px dashed;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}
.comparer-main .tab-menu .nav-tabs li.dropdown > .dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	min-width: 160px;
	margin: 2px 0 0;
	padding: 5px 0;
	list-style: none;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
}
.comparer-main .tab-menu .nav-tabs li.dropdown.open > .dropdown-menu { display: block; }
.comparer-main .tab-menu .nav-tabs li.dropdown > .dropdown-menu > li > a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333;
	white-space: nowrap;
}
.comparer-main .tab-menu .nav-tabs li.dropdown > .dropdown-menu > li > a:hover {
	background-color: #f5f5f5;
	color: #262626;
	text-decoration: none;
}
/* Tabbalk iPhone/Android boven de widget: zelfde onderstreping als live. */
.comparer-main .nav-tabs.comparer-widget-tabs { margin: 20px 0; }
.comparer-main .nav-tabs.comparer-widget-tabs > li {
	border-bottom: 2px solid #e0e0e0;
	padding: 5px 2px 0;
	margin-bottom: -1px;
}
.comparer-main .nav-tabs.comparer-widget-tabs > li.active { border-bottom-color: #333; }
.comparer-main .nav-tabs.comparer-widget-tabs > li > a { margin-right: 2px; line-height: 1.42857143; }

/* ---- Mobiel: "Navigeer:"-uitklapknop (live: .modellenMenuDrieMobiel) ---- */
.comparer-main .comparer-navigeer { margin-top: 20px; }
.comparer-main .comparer-navigeer .col-xs-4 { float: left; width: 33.33333333%; }
.comparer-main .comparer-navigeer .col-xs-8 { float: left; width: 66.66666667%; }
.comparer-main .comparer-navigeer .dropdown { position: relative; }
.comparer-main .comparer-navigeer-knop {
	width: 100%;
	padding: 5px;
	background-color: #fff;
	background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
	background-position: right 10px center;
	background-repeat: no-repeat;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	color: #555;
	/* live: .btn — 13px, vet, hoofdletters (gemeten knophoogte 31px) */
	font-size: 13px;
	font-weight: 700;
	line-height: 1.42857143;
	text-transform: uppercase;
	text-align: center;
	-webkit-appearance: none;
	appearance: none;
}
.comparer-main .comparer-navigeer-knop:hover,
.comparer-main .comparer-navigeer-knop:focus { background-color: #fff; color: #555; }
.comparer-main .comparer-navigeer .dropdown-menu-providers-mobiel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	width: 100%;
	min-width: 0;
	margin: 2px 0 0;
	padding: 5px 0;
	list-style: none;
	font-size: 14px;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
}
.comparer-main .comparer-navigeer .dropdown.open > .dropdown-menu-providers-mobiel { display: block; }
.comparer-main .dropdown-menu-providers-mobiel > li { list-style: none; }
.comparer-main .dropdown-menu-providers-mobiel > li > a {
	display: block;
	padding: 2px 15px;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #333;
	white-space: normal;
	overflow-wrap: break-word;
}
.comparer-main .dropdown-menu-providers-mobiel > li > a:hover { background-color: #f5f5f5; color: #262626; text-decoration: none; }
.comparer-main .dropdown-menu-providers-mobiel > li.active > a,
.comparer-main .dropdown-menu-providers-mobiel > li.active > a:hover { background-color: #337ab7; color: #fff; }
.comparer-main .dropdown-menu-providers-mobiel > li.menu-spacer { margin-top: 24px; }
.comparer-main .dropdown-menu-providers-mobiel > li.provider-mobile-menu-headers {
	margin-top: 29px;
	margin-left: 15px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.7;
}
.comparer-main .dropdown-menu-providers-mobiel > li.provider-mobile-menu-headers:first-child { margin-top: 5px; }
/* live: .tab-menu-providers{margin-top:15px}; als padding, want bij ons klapt die marge
   door .container/article heen weg in de bovenmarge van main. */
.comparer-main .tab-menu-providers { padding-top: 15px; }
/* Live: de providerbalk heeft een kale .row.visible-xs zonder bovenmarge. */
.comparer-main .tab-menu-providers .comparer-navigeer { margin-top: 0; }
/* Live op mobiel: iPhone/Android-tabs 13px, a padding 5px, ul marge 10px 0 20px. */
@media (max-width: 767px) {
	.comparer-main .nav-tabs.comparer-widget-tabs { margin: 10px 0 20px; font-size: 13px; }
	.comparer-main .nav-tabs.comparer-widget-tabs > li > a { padding: 5px; font-size: 13px; line-height: 1.42857143; }
}
/* Live sluit de intro af met een lege <p> (marge 10px) vóór de vergelijker. */
.comparer-main .comparer-intro { margin-bottom: 10px; }
/* Geen exacte treffers: gele melding zoals live (.alert.alert-warning, Bootstrap 3). */
.comparer-main #col-items .alert-warning {
	padding: 15px;
	margin-bottom: 20px;
	border: 1px solid #faebcc;
	border-radius: 4px;
	background-color: #fcf8e3;
	color: #8a6d3b;
}