/* NetVoiceConnect – Ziggo Order Form Styles */
/* Kleuren komen via CSS variabelen vanuit de plugin-instellingen */

#wpnivio-ziggo-order,#wpnivio-ziggo-pc-widget{
  --p:#E8501E;
  --d:#1E3A5F;
  --bg:#F7F9FC;
  --bdr:#DDE3EE;
  --ok:#1e7e34;
  --err:#c0392b;
  --r:10px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.5;
  color:#222;
}

/* ── Wrapper ──────────────────────────────────────────────────────────── */
.wpnivio-ziggo-order-wrap{
  max-width:760px;
  margin:0 auto;
  padding:0 16px 32px;
}

/* ── Brand bar ────────────────────────────────────────────────────────── */
.wpnivio-ziggo-brand-bar{text-align:center;padding:16px 0 8px}
.wpnivio-ziggo-brand-logo{max-height:56px;width:auto}
.wpnivio-ziggo-order-title{
  text-align:center;
  font-size:clamp(20px,4vw,28px);
  font-weight:700;
  color:var(--d);
  margin:0 0 24px;
}

/* ── Progress ─────────────────────────────────────────────────────────── */
.wpnivio-ziggo-progress{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:28px;
  gap:0;
}
.wpnivio-ziggo-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  font-size:13px;
  font-weight:600;
  color:#aaa;
  transition:color .3s;
  min-width:70px;
  text-align:center;
}
.wpnivio-ziggo-step span{
  width:32px;height:32px;
  border-radius:50%;
  border:2px solid #ddd;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
  background:#fff;
  color:#aaa;
  transition:all .3s;
}
.wpnivio-ziggo-step.active{color:var(--p)}
.wpnivio-ziggo-step.active span{background:var(--p);border-color:var(--p);color:#fff}
.wpnivio-ziggo-step.done{color:var(--d)}
.wpnivio-ziggo-step.done span{background:var(--d);border-color:var(--d);color:#fff}
.wpnivio-ziggo-step-div{flex:1;height:2px;background:#ddd;max-width:60px;margin-bottom:18px}
@media(max-width:480px){
  .wpnivio-ziggo-step{min-width:50px;font-size:11px}
  .wpnivio-ziggo-step span{width:26px;height:26px;font-size:12px}
}

/* ── Panels ───────────────────────────────────────────────────────────── */
.wpnivio-ziggo-panel{
  display:none;
  background:#fff;
  border:1px solid var(--bdr);
  border-radius:var(--r);
  padding:24px 28px;
  box-shadow:0 2px 12px rgba(0,0,0,.07);
  animation:nvcIn .25s ease;
}
.wpnivio-ziggo-panel.active{display:block}
@keyframes nvcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.wpnivio-ziggo-panel-title{
  font-size:20px;font-weight:700;color:var(--d);
  margin:0 0 6px;display:flex;align-items:center;gap:8px;
}
.wpnivio-ziggo-panel-icon{font-size:22px}
.wpnivio-ziggo-panel-sub{color:#666;margin:0 0 20px;font-size:15px}
.wpnivio-ziggo-section-head{font-size:15px;font-weight:700;color:var(--d);margin:20px 0 10px;border-bottom:1px solid var(--bdr);padding-bottom:6px}

/* ── Fields ───────────────────────────────────────────────────────────── */
.wpnivio-ziggo-field-row{
  display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap;
}
.wpnivio-ziggo-field{flex:1;min-width:140px;display:flex;flex-direction:column;gap:5px}
.wpnivio-ziggo-field-sm{flex:0 0 100px;min-width:80px}
.wpnivio-ziggo-field-lg{flex:2;min-width:200px}
.wpnivio-ziggo-field label{font-size:14px;font-weight:600;color:#333}
.wpnivio-ziggo-req{color:var(--err)}

.wpnivio-ziggo-input{
  width:100%;
  padding:10px 13px;
  border:1.5px solid var(--bdr);
  border-radius:6px;
  font-size:15px;
  background:#fff;
  transition:border-color .2s,box-shadow .2s;
  box-sizing:border-box;
}
.wpnivio-ziggo-input:focus{
  outline:none;
  border-color:var(--p);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 15%,transparent);
}
.wpnivio-ziggo-input.wpnivio-ziggo-prefilled{background:#f5f5f5;color:#555;cursor:default}
.wpnivio-ziggo-input.wpnivio-ziggo-error{border-color:var(--err)}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.wpnivio-ziggo-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 22px;
  border:none;border-radius:6px;
  font-size:15px;font-weight:600;cursor:pointer;
  transition:all .2s;text-decoration:none;
}
.wpnivio-ziggo-btn-primary{
  background:var(--p);color:#fff;
}
.wpnivio-ziggo-btn-primary:hover{filter:brightness(1.1)}
.wpnivio-ziggo-btn-primary:disabled{opacity:.6;cursor:not-allowed;filter:none}
.wpnivio-ziggo-btn-ghost{
  background:transparent;color:var(--d);border:1.5px solid var(--bdr);
}
.wpnivio-ziggo-btn-ghost:hover{background:var(--bg)}
.wpnivio-ziggo-btn-large{padding:14px 32px;font-size:17px}
.wpnivio-ziggo-btn-icon{font-size:16px}

.wpnivio-ziggo-nav-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--bdr);
  flex-wrap:wrap;gap:10px;
}

/* ── Products grid ────────────────────────────────────────────────────── */
.wpnivio-ziggo-products-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;
  margin-bottom:20px;
}
.wpnivio-ziggo-product-card{
  border:2px solid var(--bdr);
  border-radius:var(--r);
  padding:16px;
  cursor:pointer;
  transition:all .2s;
  position:relative;
  background:#fff;
}
.wpnivio-ziggo-product-card:hover{border-color:var(--p);box-shadow:0 4px 12px rgba(0,0,0,.1)}
.wpnivio-ziggo-product-card.selected{
  border-color:var(--p);
  background:color-mix(in srgb,var(--p) 5%,#fff);
  box-shadow:0 4px 16px color-mix(in srgb,var(--p) 20%,transparent);
}
.wpnivio-ziggo-product-card.selected::before{
  content:'✓';
  position:absolute;top:10px;right:10px;
  background:var(--p);color:#fff;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
}
.wpnivio-ziggo-product-name{font-size:15px;font-weight:700;color:var(--d);margin-bottom:6px}
.wpnivio-ziggo-product-speed{font-size:13px;color:#666;margin-bottom:10px}
.wpnivio-ziggo-product-price{
  font-size:22px;font-weight:800;color:var(--p);
  display:flex;align-items:baseline;gap:3px;
}
.wpnivio-ziggo-product-price-suffix{font-size:12px;color:#888;font-weight:400}
.wpnivio-ziggo-product-badge{
  display:inline-block;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:10px;margin-top:8px;
}
.badge-internet{background:#e3f2fd;color:#0d47a1}
.badge-tv{background:#f3e5f5;color:#4a148c}
.badge-alles{background:#e8f5e9;color:#1b5e20}

/* ── Options / extras ─────────────────────────────────────────────────── */
.wpnivio-ziggo-option-group{
  background:var(--bg);border:1px solid var(--bdr);border-radius:8px;
  padding:14px 16px;margin-bottom:14px;
}
.wpnivio-ziggo-option-group h4{margin:0 0 10px;font-size:15px;color:var(--d)}
.wpnivio-ziggo-option-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;margin-bottom:6px;
  border:1.5px solid var(--bdr);border-radius:6px;background:#fff;cursor:pointer;
}
.wpnivio-ziggo-option-item:hover,.wpnivio-ziggo-option-item.selected{border-color:var(--p)}
.wpnivio-ziggo-option-item.selected{background:color-mix(in srgb,var(--p) 5%,#fff)}
.wpnivio-ziggo-option-label{flex:1;font-size:14px}
.wpnivio-ziggo-option-price{font-size:14px;font-weight:700;color:var(--p)}

/* ── Extra opts / consent ─────────────────────────────────────────────── */
.wpnivio-ziggo-extra-opts{
  border:1px solid var(--bdr);border-radius:8px;
  margin:18px 0;overflow:hidden;
}
.wpnivio-ziggo-extra-opts summary{
  padding:12px 16px;font-weight:600;cursor:pointer;
  background:var(--bg);font-size:14px;color:var(--d);
}
.wpnivio-ziggo-extra-inner{padding:16px}
.wpnivio-ziggo-check-row{margin-bottom:12px}
.wpnivio-ziggo-check-row label{display:flex;align-items:flex-start;gap:8px;font-size:14px;cursor:pointer}
.wpnivio-ziggo-check-row input[type=checkbox]{margin-top:2px;flex-shrink:0;accent-color:var(--p)}

.wpnivio-ziggo-consent-box{
  background:#fffde7;border:1px solid #ffe082;border-radius:8px;
  padding:14px 16px;margin:20px 0;
}
.wpnivio-ziggo-consent-label{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer}
.wpnivio-ziggo-consent-label input{margin-top:3px;flex-shrink:0;accent-color:var(--p)}
.wpnivio-ziggo-consent-label a{color:var(--p)}

/* ── Summary bar ──────────────────────────────────────────────────────── */
.wpnivio-ziggo-summary-bar{
  background:color-mix(in srgb,var(--d) 5%,#fff);
  border:1px solid var(--bdr);border-radius:8px;
  padding:12px 16px;margin-bottom:20px;
  font-size:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.wpnivio-ziggo-summary-item{display:flex;align-items:center;gap:4px}
.wpnivio-ziggo-summary-item strong{color:var(--d)}

/* ── Messages ─────────────────────────────────────────────────────────── */
.wpnivio-ziggo-msg{
  padding:12px 16px;border-radius:8px;margin:12px 0;font-size:15px;
}
.wpnivio-ziggo-msg.ok{background:#d4edda;border:1px solid #c3e6cb;color:#155724}
.wpnivio-ziggo-msg.err{background:#f8d7da;border:1px solid #f5c6cb;color:var(--err)}
.wpnivio-ziggo-msg.info{background:#d1ecf1;border:1px solid #bee5eb;color:#0c5460}

/* ── Loading / spinner ────────────────────────────────────────────────── */
.wpnivio-ziggo-loading{
  grid-column:1/-1;text-align:center;padding:32px;color:#888;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.wpnivio-ziggo-spinner{
  width:24px;height:24px;border:3px solid #ddd;
  border-top-color:var(--p);border-radius:50%;
  animation:nvc-spin .7s linear infinite;
}
@keyframes nvc-spin{to{transform:rotate(360deg)}}

/* ── Confirmation screen ──────────────────────────────────────────────── */
.wpnivio-ziggo-success-icon{font-size:64px;text-align:center;margin:8px 0}
.wpnivio-ziggo-success-title{justify-content:center;color:var(--ok)!important}
.wpnivio-ziggo-confirm-box{
  background:#d4edda;border:1px solid #c3e6cb;border-radius:8px;
  padding:16px 20px;margin:16px 0;font-size:15px;
}
.wpnivio-ziggo-confirm-sub{text-align:center;color:#666;font-size:14px}

/* ── Notice (unconfigured) ────────────────────────────────────────────── */
.wpnivio-ziggo-notice{
  padding:12px 16px;background:#fff3cd;border:1px solid #ffc107;
  border-radius:8px;color:#856404;font-size:14px;
}

/* ── Postcode widget ──────────────────────────────────────────────────── */
.wpnivio-ziggo-pc-widget{max-width:520px}

/* ── Mobile tweaks ────────────────────────────────────────────────────── */
@media(max-width:520px){
  .wpnivio-ziggo-panel{padding:18px 16px}
  .wpnivio-ziggo-field-row{flex-direction:column;gap:10px}
  .wpnivio-ziggo-field-sm,.wpnivio-ziggo-field-lg{flex:1;min-width:unset}
  .wpnivio-ziggo-products-grid{grid-template-columns:1fr}
  .wpnivio-ziggo-btn-large{width:100%;justify-content:center}
}

/* Duration buttons */
.wpnivio-ziggo-duration-opts { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.wpnivio-ziggo-dur-btn {
  padding:8px 16px; border:2px solid var(--bdr); border-radius:6px;
  background:#fff; cursor:pointer; font-size:14px; font-weight:600;
  transition:all .2s; color:#333;
}
.wpnivio-ziggo-dur-btn:hover { border-color:var(--p); }
.wpnivio-ziggo-dur-btn.active { background:var(--p); border-color:var(--p); color:#fff; }

/* Radio cards */
.wpnivio-ziggo-radio-card {
  display:block; border:2px solid var(--bdr); border-radius:8px;
  padding:12px 16px; margin-bottom:8px; cursor:pointer; transition:all .2s;
}
.wpnivio-ziggo-radio-card:hover { border-color:var(--p); }
.wpnivio-ziggo-radio-card.selected { border-color:var(--p); background:color-mix(in srgb,var(--p) 5%,#fff); }
.wpnivio-ziggo-radio-card input { margin-right:8px; accent-color:var(--p); }

/* Inline spinner */
.wpnivio-ziggo-spinner-inline {
  display:inline-block; width:14px; height:14px;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:nvc-spin .7s linear infinite; margin-right:6px;
  vertical-align:middle;
}

/* Small hints */
.wpnivio-ziggo-hint-small { font-size:12px; color:#888; display:block; margin-top:2px; }

/* Consent required box */
.wpnivio-ziggo-consent-required { background:#fffde7; border:1px solid #ffe082; }

/* Section heads */
.wpnivio-ziggo-section-head {
  font-size:14px; font-weight:700; color:var(--d);
  margin:20px 0 10px; border-bottom:1px solid var(--bdr); padding-bottom:6px;
}

/* ═══ PRODUCTKAARTEN — rijke weergave ══════════════════════════════════ */

/* Internet-only toggle */
.wzpc-io-toggle {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
}
.wzpc-io-label { font-weight: 600; color: var(--d); white-space: nowrap; }
.wzpc-toggle-opt {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 6px; cursor: pointer;
    border: 1.5px solid var(--bdr); background: #fff;
    transition: all .2s; font-size: 14px;
}
.wzpc-toggle-opt:hover { border-color: var(--p); }
.wzpc-toggle-opt.wzpc-toggle-active { border-color: var(--p); background: color-mix(in srgb, var(--p) 8%, #fff); }
.wzpc-toggle-opt input { margin: 0; accent-color: var(--p); }
.wzpc-save-badge {
    font-size: 11px; font-weight: 700; padding: 1px 6px;
    background: #dcfce7; color: #166534; border-radius: 10px; margin-left: 4px;
}
.wzpc-giga-badge {
    font-size: 12px; font-weight: 700; padding: 2px 8px;
    background: #fef9c3; color: #854d0e; border-radius: 10px;
}

/* Productkaart */
.wzpc {
    border: 2px solid var(--bdr);
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    transition: all .22s;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.wzpc:hover {
    border-color: var(--p);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--p) 15%, transparent);
    transform: translateY(-2px);
}
.wzpc.selected {
    border-color: var(--p);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--p) 20%, transparent);
    transform: translateY(-2px);
}
.wzpc.selected::after {
    content: '✓';
    position: absolute; top: 10px; right: 10px;
    background: var(--p); color: #fff;
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
}
.wzpc.wzpc-highlight {
    border-color: var(--p);
}
.wzpc.wzpc-highlight::before {
    content: attr(data-highlight);
}

/* Tag bovenaan */
.wzpc-tag {
    background: var(--p);
    color: #fff;
    font-size: 12px; font-weight: 700;
    text-align: center;
    padding: 5px 12px;
    letter-spacing: .5px;
}

/* Header */
.wzpc-header {
    padding: 16px 16px 0;
}
.wzpc-name {
    font-size: 15px; font-weight: 700; color: var(--d);
    margin-bottom: 4px;
}
.wzpc-speed {
    font-size: 13px; color: #666; font-weight: 500;
}

/* Prijs blok */
.wzpc-price-block {
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--bdr);
}
.wzpc-price {
    display: flex; align-items: baseline; gap: 2px;
    font-weight: 800; color: var(--p);
    transition: all .2s;
}
.wzpc-price-eur { font-size: 16px; margin-right: 1px; }
.wzpc-price-val { font-size: 28px; line-height: 1; }
.wzpc-price-per { font-size: 13px; color: #888; font-weight: 400; margin-left: 2px; }
.wzpc-price-io-note {
    font-size: 12px; color: #666; margin-top: 4px;
}

/* Features lijst */
.wzpc-features {
    list-style: none;
    padding: 12px 16px;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.wzpc-feature {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: #444;
}
.wzpc-feat-icon {
    color: var(--p); flex-shrink: 0;
    display: flex; align-items: center;
}

/* Selecteer knop */
.wzpc-select-btn {
    margin: 0 16px 16px;
    padding: 10px;
    background: transparent;
    border: 1.5px solid var(--p);
    border-radius: 6px;
    color: var(--p);
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    width: calc(100% - 32px);
}
.wzpc-select-btn:hover,
.wzpc.selected .wzpc-select-btn {
    background: var(--p); color: #fff;
}

/* Summarybar */
.wzpc-summary-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px;
}

/* Berichten */
.wzpc-load-err { grid-column:1/-1; color: var(--err); text-align: center; padding: 24px; }
.wzpc-demo-note { grid-column:1/-1; font-size:12px; color:#888; text-align:center; margin-top:8px; }

/* Stap 2 bericht */
#wpnivio-ziggo-step2-msg {
    grid-column: 1 / -1;
    margin-top: 8px;
}

/* Internet-only sectie verbergen (wordt via JS getoond) */
#wpnivio-ziggo-internetonly-row { display: none; }

/* ═══ OPTIES: KORTINGEN & WIFI ══════════════════════════════════════════ */

.wzpc-opts-loading {
    display: flex; align-items: center; gap: 10px;
    color: #888; font-size: 14px; padding: 16px 0;
}

.wzpc-opts-block {
    background: #fff;
    border: 1px solid var(--bdr);
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 14px;
}

.wzpc-opts-title {
    font-size: 15px; font-weight: 700; color: var(--d);
    margin-bottom: 10px;
}

.wzpc-opts-note {
    font-size: 13px; color: #666; margin-bottom: 12px;
}

/* Inbegrepen */
.wzpc-included-list { display: flex; flex-direction: column; gap: 8px; }
.wzpc-included-item {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 13px; color: #444;
}
.wzpc-incl-check {
    color: var(--ok); font-weight: 700; font-size: 15px;
    flex-shrink: 0; margin-top: 1px;
}
.wzpc-included-item small { color: #888; }

/* Kortingen */
.wzpc-discounts-block { border-color: color-mix(in srgb, var(--p) 30%, #ddd); }
.wzpc-discount-list { display: flex; flex-direction: column; gap: 10px; }
.wzpc-discount-card {
    display: flex; align-items: flex-start; gap: 12px;
    border: 1.5px solid var(--bdr); border-radius: 8px;
    padding: 12px 14px; cursor: pointer; transition: all .2s;
    background: #fff;
}
.wzpc-discount-card:hover { border-color: var(--p); }
.wzpc-discount-card:has(input:checked) {
    border-color: var(--p);
    background: color-mix(in srgb, var(--p) 5%, #fff);
}
.wzpc-discount-card input[type=checkbox] {
    margin-top: 3px; flex-shrink: 0; accent-color: var(--p);
    width: 16px; height: 16px;
}
.wzpc-disc-body { flex: 1; }
.wzpc-disc-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}
.wzpc-disc-label { font-size: 14px; font-weight: 700; color: var(--d); }
.wzpc-disc-badge {
    font-size: 11px; font-weight: 700; padding: 2px 8px;
    background: var(--p); color: #fff; border-radius: 10px;
    white-space: nowrap;
}
.wzpc-disc-desc { font-size: 13px; color: #555; margin-bottom: 6px; line-height: 1.4; }
.wzpc-disc-req { font-size: 12px; color: #888; margin-top: 4px; }
.wzpc-req-ok  { color: var(--ok);  font-weight: 600; }
.wzpc-req-warn { color: #d97706; font-weight: 600; }
.wzpc-disc-match { background: color-mix(in srgb, var(--ok) 5%, #fff) !important; }

/* WiFi */
.wzpc-wifi-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.wzpc-wifi-card {
    border: 1.5px solid var(--bdr); border-radius: 10px;
    padding: 14px; position: relative;
    background: #fff; transition: border-color .2s;
}
.wzpc-wifi-card.wzpc-wifi-recommended { border-color: var(--p); }
.wzpc-wifi-rec-badge {
    position: absolute; top: -10px; left: 12px;
    background: var(--p); color: #fff;
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
}
.wzpc-wifi-icon { font-size: 28px; margin-bottom: 8px; }
.wzpc-wifi-label { font-size: 14px; font-weight: 700; color: var(--d); margin-bottom: 4px; }
.wzpc-wifi-desc  { font-size: 12px; color: #666; margin-bottom: 8px; line-height: 1.4; }
.wzpc-wifi-price { font-size: 13px; font-weight: 600; color: var(--d); margin-bottom: 10px; }
.wzpc-free { color: var(--ok); font-weight: 700; }

.wzpc-wifi-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; font-size: 13px;
}
.wzpc-wifi-toggle input { accent-color: var(--p); }
.wzpc-wifi-toggle-label { font-weight: 600; }

/* Pod amount */
.wzpc-pod-amount { margin-top: 8px; }
.wzpc-amount-ctrl {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
}
.wzpc-amt-btn {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1.5px solid var(--p); background: #fff;
    color: var(--p); font-size: 16px; font-weight: 700;
    cursor: pointer; transition: all .2s;
    display: flex; align-items: center; justify-content: center;
}
.wzpc-amt-btn:hover { background: var(--p); color: #fff; }
.wzpc-amt-val {
    min-width: 24px; text-align: center;
    font-size: 16px; font-weight: 700; color: var(--d);
}

/* ═══ ADD-ONS BLOK (kortingen, wifi) ═══════════════════════════════════ */
.wzpc-opts-block {
    background: #fff; border: 1px solid var(--bdr);
    border-radius: 10px; padding: 16px 18px; margin-top: 14px;
}
.wzpc-discounts-block { border-color: color-mix(in srgb, var(--p) 30%, #ddd); }
.wzpc-opts-title { font-size: 15px; font-weight: 700; color: var(--d); margin-bottom: 8px; }
.wzpc-opts-note { font-size: 13px; color: #666; margin-bottom: 12px; }

/* Inbegrepen */
.wzpc-included-list { display:flex; flex-direction:column; gap:8px; }
.wzpc-included-item { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:#444; }
.wzpc-incl-check { color:var(--ok); font-weight:700; font-size:15px; flex-shrink:0; }

/* Kortingskaarten */
.wzpc-discount-list { display:flex; flex-direction:column; gap:10px; }
.wzpc-discount-card {
    display:flex; align-items:flex-start; gap:12px;
    border:1.5px solid var(--bdr); border-radius:8px;
    padding:12px 14px; cursor:pointer; transition:all .2s; background:#fff;
}
.wzpc-discount-card:hover { border-color:var(--p); }
.wzpc-discount-card:has(input:checked),
.wzpc-disc-match { border-color:var(--p); background:color-mix(in srgb,var(--p) 5%,#fff); }
.wzpc-discount-card input[type=checkbox] { margin-top:3px; flex-shrink:0; accent-color:var(--p); width:16px; height:16px; }
.wzpc-disc-body { flex:1; }
.wzpc-disc-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.wzpc-disc-label { font-size:14px; font-weight:700; color:var(--d); }
.wzpc-disc-badge { font-size:11px; font-weight:700; padding:2px 8px; background:var(--p); color:#fff; border-radius:10px; }
.wzpc-disc-desc { font-size:13px; color:#555; margin-bottom:5px; line-height:1.4; }
.wzpc-disc-req { font-size:12px; color:#888; margin-top:4px; }
.wzpc-req-ok   { color:var(--ok); font-weight:600; }
.wzpc-req-warn { color:#d97706; font-weight:600; }

/* WiFi kaarten */
.wzpc-wifi-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.wzpc-wifi-card {
    border:1.5px solid var(--bdr); border-radius:10px;
    padding:14px; position:relative; background:#fff; transition:border-color .2s;
}
.wzpc-wifi-card.wzpc-wifi-recommended { border-color:var(--p); }
.wzpc-wifi-rec-badge {
    position:absolute; top:-10px; left:12px;
    background:var(--p); color:#fff;
    font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px;
}
.wzpc-wifi-icon { font-size:28px; margin-bottom:8px; }
.wzpc-wifi-label { font-size:14px; font-weight:700; color:var(--d); margin-bottom:4px; }
.wzpc-wifi-desc { font-size:12px; color:#666; margin-bottom:8px; line-height:1.4; }
.wzpc-wifi-price { font-size:13px; font-weight:600; color:var(--d); margin-bottom:10px; }
.wzpc-free { color:var(--ok); font-weight:700; }
.wzpc-wifi-toggle { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; }
.wzpc-wifi-toggle input { accent-color:var(--p); }
.wzpc-wifi-toggle-label { font-weight:600; }

/* Pod teller */
.wzpc-pod-row { margin-top:10px; }
.wzpc-amount-ctrl { display:inline-flex; align-items:center; gap:8px; margin-top:4px; }
.wzpc-amt-btn {
    width:28px; height:28px; border-radius:50%;
    border:1.5px solid var(--p); background:#fff;
    color:var(--p); font-size:16px; font-weight:700;
    cursor:pointer; transition:all .2s;
    display:flex; align-items:center; justify-content:center;
    line-height:1; padding:0;
}
.wzpc-amt-btn:hover { background:var(--p); color:#fff; }
.wzpc-amt-val { min-width:24px; text-align:center; font-size:16px; font-weight:700; color:var(--d); }

/* BTW label */
.wzpc-price-btw {
    font-size: 11px; color: #999; margin-top: 2px;
}

/* Kortingssuggestie (niet van toepassing maar als hint) */
.wzpc-disc-suggestion {
    opacity: .7; border-style: dashed;
}
.wzpc-disc-suggestion:has(input:checked) {
    opacity: 1;
}

/* Optionele included items (als checkbox) */
.wzpc-included-opt {
    cursor: pointer; border: 1.5px solid var(--bdr);
    border-radius: 6px; padding: 8px 10px;
    transition: border-color .2s;
    display: flex; align-items: flex-start; gap: 10px;
}
.wzpc-included-opt:hover { border-color: var(--p); }
.wzpc-included-opt input { margin-top: 3px; accent-color: var(--p); flex-shrink: 0; }

/* Tooltip (i) icoon */
.wzpc-tooltip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: #e0e7f0; color: #1A5CFF;
    font-size: 11px; font-weight: 700; cursor: help;
    margin-left: 4px; vertical-align: middle;
    transition: background .2s;
}
.wzpc-tooltip:hover { background: #1A5CFF; color: #fff; }

/* Korting die niet van toepassing is (hint) */
.wzpc-disc-suggestion {
    opacity: .65; border-style: dashed !important;
    background: #fafafa !important;
}
.wzpc-disc-suggestion input[type=checkbox] { cursor: not-allowed; }
.wzpc-disc-badge-grey {
    background: #999 !important;
}

/* Groene vink bij actieve korting - sterker */
.wzpc-disc-match {
    border-color: var(--ok) !important;
    background: color-mix(in srgb, var(--ok) 6%, #fff) !important;
}
.wzpc-disc-match .wzpc-disc-badge {
    background: var(--ok) !important;
}

/* Demo mode prijs placeholder */
.wzpc-price-demo { display: block; }
.wzpc-price-demo-txt {
    font-size: 13px; color: #888; font-style: italic;
    background: #f5f5f5; padding: 6px 10px;
    border-radius: 6px; border: 1px dashed #ddd;
    display: inline-block;
}

/* ═══ PRODUCTTYPE KIEZER ════════════════════════════════════════════════ */
.wzpc-type-chooser {
    grid-column: 1 / -1;
    margin-bottom: 8px;
}
.wzpc-type-title {
    font-size: 16px; font-weight: 700; color: var(--d);
    margin-bottom: 12px;
}
.wzpc-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Altijd 3 kolommen */
    gap: 12px;
}
@media(max-width: 560px) {
    .wzpc-type-grid { grid-template-columns: 1fr; } /* Mobiel: gestapeld */
}
.wzpc-type-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    border: 2px solid var(--bdr); border-radius: 10px;
    padding: 20px 16px 16px; cursor: pointer; transition: all .2s;
    background: #fff; position: relative;
}
.wzpc-type-card input { display: none; }
.wzpc-type-card:hover { border-color: var(--p); box-shadow: 0 4px 16px color-mix(in srgb, var(--p) 15%, transparent); transform: translateY(-2px); }
.wzpc-type-card.wzpc-type-selected { border-color: var(--p); background: color-mix(in srgb, var(--p) 6%, #fff); }
.wzpc-type-card.wzpc-type-selected::after { content: '✓'; position: absolute; top: 8px; right: 8px; background: var(--p); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
/* wzpc-type-highlight: subtiel onderscheid via tag badge, geen aparte border */
.wzpc-type-icon { font-size: 32px; margin-bottom: 8px; }
.wzpc-type-label { font-size: 15px; font-weight: 700; color: var(--d); margin-bottom: 4px; }
.wzpc-type-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; background: var(--p); color: #fff; border-radius: 10px; margin-bottom: 8px; }
.wzpc-type-desc { font-size: 12px; color: #666; line-height: 1.4; }

/* Geselecteerde type balk */
.wzpc-type-selected-bar {
    font-size: 14px; color: var(--d);
    background: color-mix(in srgb, var(--p) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--p) 30%, #ddd);
    border-radius: 8px; padding: 10px 14px;
    margin: 8px 0 12px;
}
.wzpc-io-badge {
    font-size: 11px; font-weight: 700; padding: 2px 8px;
    background: #dcfce7; color: #166534; border-radius: 10px;
    margin-left: 8px;
}
.wzpc-type-back {
    background: none; border: none; color: var(--p);
    cursor: pointer; font-size: 13px; font-weight: 600;
    padding: 0; margin-bottom: 8px;
    display: inline-flex; align-items: center; gap: 4px;
}
.wzpc-type-back:hover { text-decoration: underline; }

/* Internet Only badge in pakketten */
.wzpc-io-row { display: none !important; } /* verbergen want type regelt dit al */

/* Korting berekening regels */
.wzpc-disc-calc {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; padding: 3px 0;
    border-bottom: 1px dashed #eee;
}
.wzpc-disc-calc:last-of-type { border-bottom: none; }
.wzpc-disc-total {
    font-weight: 700; padding-top: 6px; margin-top: 4px;
    border-top: 2px solid #e5e5e5 !important;
    border-bottom: none !important;
}
.wzpc-disc-badge-dur {
    background: #fef3c7; color: #92400e;
}
.wzpc-disc-duration {
    border-left-color: #f59e0b;
}

/* ═══ OPT CARDS (TV, telefonie, SLA, wifi backup) ══════════════════════ */
.wzpc-opts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}
.wzpc-opt-card {
    display: flex; align-items: flex-start; gap: 10px;
    border: 2px solid var(--bdr); border-radius: 8px;
    padding: 12px; cursor: pointer; transition: border-color .2s;
    background: #fff;
}
.wzpc-opt-card:has(input:checked) { border-color: var(--p); background: color-mix(in srgb, var(--p) 5%, #fff); }
.wzpc-opt-card input { margin-top: 2px; accent-color: var(--p); }
.wzpc-opt-body { flex: 1; }
.wzpc-opt-icon { font-size: 20px; }
.wzpc-opt-label { font-size: 13px; font-weight: 600; color: var(--d); margin-bottom: 4px; }
.wzpc-opt-price { font-size: 13px; color: var(--p); font-weight: 700; }
.wzpc-opts-subtitle { font-size: 13px; font-weight: 700; color: #555; margin: 10px 0 6px; }

/* ═══ AANTALLEN RIJEN (TV extra hardware, MultiWifi) ═══════════════════ */
.wzpc-amt-list { display: flex; flex-direction: column; gap: 8px; }
.wzpc-amt-row {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border: 1px solid var(--bdr); border-radius: 8px;
    padding: 10px 14px; gap: 12px;
}
.wzpc-amt-info { flex: 1; }
.wzpc-amt-label { font-size: 13px; font-weight: 600; color: var(--d); display: block; }
.wzpc-amt-price { font-size: 12px; color: var(--p); font-weight: 600; }
.wzpc-amt-note  { font-size: 11px; color: #888; margin-left: 6px; }
.wzpc-amt-ctrl  { display: flex; align-items: center; gap: 8px; }
.wzpc-amt-btn {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--p); background: #fff;
    color: var(--p); font-size: 16px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.wzpc-amt-btn:hover { background: var(--p); color: #fff; }
.wzpc-amt-val { font-size: 15px; font-weight: 700; min-width: 20px; text-align: center; }

/* Telefonie disabled state */
.wzpc-opt-disabled { opacity: .45; pointer-events: none; }
.wzpc-opt-hours { font-size: 11px; color: #666; margin: 3px 0 4px; }

/* SLA standaard melding */
.wzpc-sla-standard {
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px;
    padding: 8px 12px; font-size: 13px; color: #166534; margin-bottom: 8px;
}