/* Colors via CSS variables */
:root{ --np-accent-color:#001a59; --np-discount-color:#F67158; }

/* Layout */
.np-wrap{display:grid;gap:24px}
.np-wrap.two-col{grid-template-columns: 1fr 360px}
@media(max-width: 980px){ .np-wrap.two-col{grid-template-columns: 1fr} }
.np-card{background:#fff;border:1px solid #e6e9ec;border-radius:12px;padding:16px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.np-card-title{font-size:18px;font-weight:700;margin-bottom:12px}

/* Slider + track + bands */
#npEmployees{width:100%; -webkit-appearance:none; background:transparent; height:22px}
#npEmployees::-webkit-slider-runnable-track{height:6px;background:#e5e7eb;border-radius:4px}

#npEmployees::-moz-range-track{height:6px;background:#e5e7eb;border-radius:4px}

.np-bands{display:grid;grid-template-columns: repeat(var(--np-band-count,6), 1fr);margin-top:8px;font-size:12px;color:#667085}
.np-bands span{text-align:center}

/* Period pills */
.np-period{display:flex;gap:16px}
.np-pill{border:1px solid #cbd5e1;background:#eef2f7;color:#111827;padding:14px 18px;border-radius:10px;cursor:pointer;font-weight:700;flex:1;text-align:center}
.np-pill.active{background:var(--np-accent-color);color:#fff;border-color:var(--np-accent-color)}

/* Product cards */
.np-products-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){ .np-products-grid{grid-template-columns:1fr} }
.np-prod{border:2px solid #e4e7ec;border-radius:12px;padding:14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;background:#f9fafb;transition:.2s border-color,.2s box-shadow}
.np-prod.active{border-color:var(--np-accent-color);background:#fff;box-shadow:0 0 0 3px color-mix(in oklab, var(--np-accent-color) 20%, #fff 80%)}
.np-prod-left{display:flex;gap:12px;align-items:center}
.np-prod-icon{width:36px;height:36px;border-radius:10px;background:#e0e7ff}
.np-prod-title{font-weight:700}
.np-prod-desc{font-size:12px;color:#667085}
.np-prod-badge{font-size:18px;opacity:.8}

/* Right summary */
.summary h3{margin:4px 0 8px 0;font-size:22px}
.np-price{font-size:36px;font-weight:800}
.np-period-label{margin-top:-4px;color:#667085}
.np-discount-note{margin-top:4px;color:var(--np-discount-color);font-size:12px}
.np-sec-title{font-weight:700;margin:12px 0 8px 0}
.np-sec-badge{font-size:28px;margin-bottom:6px}
.np-sec-label{margin-bottom:8px}
.np-sec-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0}
.np-sec-seg{height:10px;background:#e5e7eb;border-radius:8px}
.np-sec-seg.active{background:var(--np-accent-color)}
.np-ctas{display:grid;gap:10px;margin-top:16px}
.np-btn{display:block;text-align:center;border:1px solid #cbd5e1;border-radius:999px;padding:12px 16px;text-decoration:none;background:#fff;color:#111}
.np-btn.primary{background:var(--np-accent-color);border-color:var(--np-accent-color);color:#fff}

/* Modal */
.np-modal{position:fixed;inset:0;z-index:9999}
.np-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.np-modal-card{position:relative;max-width:420px;margin:8% auto;background:#fff;border-radius:12px;padding:20px;border:1px solid #e6e9ec}
.np-modal-title{font-weight:800;font-size:18px;margin-bottom:8px}
#npPhone{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;margin:10px 0}
.np-modal-actions{display:flex;gap:8px;justify-content:flex-end}
.np-modal-note{margin-top:8px;color:#16a34a}


/* === Custom fixes === */

/* Add small side padding so thumb centers over tick/labels */
#npEmployees{ padding: 0 9px; }
#npEmployees::-webkit-slider-runnable-track{ margin: 0 9px; }
#npEmployees::-moz-range-track{ margin: 0 9px; }

/* Ticks above labels */
.np-ticks{display:grid;grid-template-columns: repeat(var(--np-band-count,6), 1fr); margin:6px 0 2px}
.np-ticks span{height:16px;width:2px;background:#1f2937;border-radius:2px;justify-self:center;opacity:.6}

/* Slight spacing between cards */
.np-card + .np-card{ margin-top: 6px; }

/* Hide icons/badges completely */
.np-prod-icon, .np-prod-badge{ display:none !important; }

/* Show checkmark when selected (inside badge area removed, so add pseudo on card) */
.np-prod.active{ position: relative; }
.np-prod.active::after{
  content: "✓";
  position: absolute;
  right: 12px;
  top: 10px;
  font-weight: 800;
}

/* === Slider centering fix === */
.np-slider{position:relative}
#npEmployees{ width: calc(100% - 20px); margin: 0 10px; -webkit-appearance:none; background:transparent; height:22px }
#npEmployees::-webkit-slider-runnable-track{ height:6px; background:#e5e7eb; border-radius:4px }
#npEmployees::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--np-accent-color); margin-top:-7px }
#npEmployees::-moz-range-track{ height:6px; background:#e5e7eb; border-radius:4px }
#npEmployees::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--np-accent-color); border:none }

/* Ticks keep 100% width so centers align with slider value positions */
.np-ticks{display:grid;grid-template-columns: repeat(var(--np-band-count,6), 1fr); margin:8px 0 2px}
.np-ticks span{height:16px;width:2px;background:#1f2937;border-radius:2px;justify-self:center;opacity:.6}
.np-bands{display:grid;grid-template-columns: repeat(var(--np-band-count,6), 1fr);margin-top:6px;font-size:12px;color:#667085}
.np-bands span{text-align:center}

/* Hide icons and badges */
.np-prod-icon, .np-prod-badge{ display:none !important; }


/* Summary list */
.np-summary-list{list-style:none;margin:8px 0 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.np-summary-item{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed #e5e7eb;padding:6px 0;font-size:14px}
.np-summary-title{font-weight:500}
.np-summary-price{opacity:.9}
.np-summary-meta{display:grid;grid-template-columns: 1fr 1fr;gap:8px;margin-top:8px}
@media(max-width:980px){ .np-summary-meta{grid-template-columns: 1fr} }


.np-discount-line{font-size:14px;color:var(--np-discount-color,#F67158);margin-top:4px}


/* CTA layout fixes */
.np-ctas{display:flex;flex-direction:column;gap:12px}
.np-ctas .np-btn{width:100%; text-align:center}


/* Contact for price mode */
.np-price.np-contact{ white-space:nowrap }



/* Keep CTA in right card and tidy */
.np-right .np-card .np-ctas{ display:grid; gap:12px; margin-top:16px }
.np-right .np-card .np-ctas .np-btn{ width:100%; justify-self:stretch }


/* Unify modal inputs (navn + telefon) */
.np-modal-card .np-input{
  width: 100%;
  display: block;
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.np-modal-card .np-input:focus{
  outline: none;
  border-color: var(--np-accent-color);
  box-shadow: 0 0 0 3px rgba(0, 26, 89, 0.12);
}
.np-modal-card .np-modal-actions{ margin-top: 10px; }



/* Ensure CTAs are inside summary card */
.np-card.summary .np-ctas{display:grid;gap:10px;margin-top:16px}
.np-card.summary .np-btn{display:block}

/* Budgetpris badge + pre-CTA label */
.np-card.summary .np-budget-title{font-size:18px;font-weight:800;color:#c51632;margin:0 0 2px}
.np-card.summary .np-precta{font-weight:700;margin-top:12px;margin-bottom:6px}
.np-card.summary .np-ctas{display:grid;gap:10px;margin-top:4px}


.np-card-title.np-pay-title{
  display:flex; justify-content:space-between; align-items:center;
}
.np-annual-save{
  font-weight:600; opacity:.85; /* farve kan matches til dit brand */
}