/* ═══════════════════════════════════════════════
   KLP PRICING CALCULATOR — DPH/VAT STYLES
   Add this to the END of klp-calc.css
   ═══════════════════════════════════════════════ */

/* ── Compact header (no title/subtitle/lang) ── */
.klpc-header {
  padding: 18px 24px 16px;
}
.klpc-header-pattern { display: none; }
.klpc-title { display: none; }
.klpc-subtitle { display: none; }
.klpc-lang-btn { display: none; }
.klpc-serving-row { margin-top: 12px; }

/* ── DPH Section in header ────────────────── */
.klpc-vat-section {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.12);
  position: relative; z-index: 1;
}

.klpc-vat-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.klpc-vat-rate-row {
  margin-top: 10px;
}
.klpc-vat-label {
  color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 600;
  white-space: nowrap;
}

/* Yes/No toggle */
.klpc-vat-toggle {
  display: flex; gap: 0;
  background: rgba(0,0,0,0.25); border-radius: 8px; padding: 2px;
}
.klpc-vat-btn {
  padding: 5px 16px; border-radius: 6px; border: none; font-size: 12px;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
  background: transparent; color: rgba(255,255,255,0.6);
}
.klpc-vat-btn.active {
  background: var(--klpc-white); color: var(--klpc-navy);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.klpc-vat-btn:not(.active):hover {
  color: rgba(255,255,255,0.9);
}

/* Rate selector buttons */
.klpc-vat-rate-btn {
  padding: 5px 14px; border-radius: 6px; border: none; font-size: 12px;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
  background: transparent; color: rgba(255,255,255,0.6);
}
.klpc-vat-rate-btn.active {
  background: var(--klpc-orange); color: var(--klpc-white);
  box-shadow: 0 1px 4px rgba(232,101,26,0.3);
}
.klpc-vat-rate-btn:not(.active):hover {
  color: rgba(255,255,255,0.9);
}

/* Info expander toggle */
.klpc-vat-info-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 10px; padding: 0; border: none; background: none;
  color: rgba(255,255,255,0.45); font-size: 11px; cursor: pointer;
  font-family: 'Source Sans 3', sans-serif; font-weight: 600;
  letter-spacing: 0.3px; transition: color 0.2s;
}
.klpc-vat-info-toggle:hover { color: rgba(255,255,255,0.75); }

/* Info panel with rate explanation cards */
.klpc-vat-info {
  margin-top: 10px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.klpc-vat-info-card {
  background: rgba(255,255,255,0.06); border-radius: 8px; padding: 10px 12px;
  border-left: 3px solid rgba(255,255,255,0.2);
}
.klpc-vat-info-card.green { border-left-color: var(--klpc-green); }
.klpc-vat-info-card.orange { border-left-color: var(--klpc-orange); }
.klpc-vat-info-card.navy { border-left-color: rgba(255,255,255,0.4); }
.klpc-vat-info-card-title {
  font-size: 11px; font-weight: 700; color: var(--klpc-white);
  margin-bottom: 4px;
}
.klpc-vat-info-card-body {
  font-size: 10px; line-height: 1.4; color: rgba(255,255,255,0.55);
}
.klpc-vat-info-note {
  grid-column: 1 / -1; font-size: 10px; color: rgba(255,255,255,0.35);
  font-style: italic; margin-top: 4px;
}

/* ── VAT breakdown in scenario cards ──────── */
.klpc-vat-breakdown {
  margin-top: 6px; padding: 6px 0 2px;
  border-top: 1px dashed var(--klpc-border);
}
.klpc-vat-breakdown .klpc-result-row.vat-row {
  padding: 2px 0; font-size: 12px;
}
.klpc-vat-breakdown .klpc-result-row.vat-total {
  padding: 4px 0 0;
  border-top: 1px solid var(--klpc-border);
  margin-top: 2px;
}
.klpc-vat-breakdown .klpc-result-value.muted {
  color: var(--klpc-gray); font-weight: 500;
}
.klpc-vat-breakdown .klpc-result-value.highlight {
  font-size: 16px; font-weight: 800; color: var(--klpc-orange);
}

/* ── Searchable product dropdown ───────────── */
.klpc-product-search {
  position: relative;
  min-width: 180px;
}
.klpc-ps-input {
  width: 100%; padding: 5px 10px; border-radius: 6px;
  border: 1px solid var(--klpc-border, #e5e7eb);
  font-size: 12px; font-weight: 500; outline: none;
  background: #fff; color: var(--klpc-text, #1f2937);
  transition: border-color 0.2s;
}
.klpc-ps-input:focus {
  border-color: var(--klpc-orange, #e8651a);
  box-shadow: 0 0 0 2px rgba(232,101,26,0.1);
}
.klpc-ps-list {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 4px; z-index: 100;
  background: #fff; border: 1px solid var(--klpc-border, #e5e7eb);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 220px; overflow-y: auto;
  padding: 4px;
}
.klpc-ps-item {
  padding: 7px 10px; border-radius: 5px; font-size: 12px;
  cursor: pointer; transition: background 0.15s;
  color: var(--klpc-text, #1f2937);
}
.klpc-ps-item:hover { background: var(--klpc-light, #f5f6f8); }
.klpc-ps-item.active {
  background: #fff7ed; color: var(--klpc-orange, #e8651a); font-weight: 600;
}
.klpc-ps-empty {
  padding: 10px; font-size: 11px; color: var(--klpc-gray, #6b7280);
  text-align: center; font-style: italic;
}

/* ── VAT badge in analysis tab ────────────── */
.klpc-vat-badge-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.klpc-vat-badge {
  display: inline-block; padding: 4px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  background: var(--klpc-light); color: var(--klpc-gray);
  border: 1px solid var(--klpc-border);
}
.klpc-vat-badge.active {
  background: #fff7ed; color: var(--klpc-orange);
  border-color: var(--klpc-orange);
}
.klpc-vat-badge-edit {
  background: none; border: none; cursor: pointer;
  font-size: 13px; padding: 2px; opacity: 0.4;
  transition: opacity 0.2s;
}
.klpc-vat-badge-edit:hover { opacity: 1; }

/* ── Responsive ───────────────────────────── */
@media (max-width: 640px) {
  .klpc-vat-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .klpc-vat-info { grid-template-columns: 1fr; }
  .klpc-vat-info-note { grid-column: 1; }
}