/* DM Sans + Poppins loaded via wp_enqueue_style in class-whc-shortcode.php */

/* ── Reset & base ─────────────────────────────────────────── */
.whc-root *, .whc-root *::before, .whc-root *::after { box-sizing: border-box; }
.whc-root { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; background: #F0F4F7; border-radius: 20px; min-height: 400px; }
.whc-root button { font-family: inherit; }
.whc-root a { font-family: inherit; }

/* ── Inner container — Fix #1 ─────────────────────────────── */
/* Wizard + home: centred at 700px. Result view expands to 1300px. */
.whc-inner { max-width: 700px; margin: 0 auto; padding: 0 20px; }
.whc-inner.whc-view-result { max-width: 1300px; padding: 0 40px; }

/* ── Views ────────────────────────────────────────────────── */
.whc-view-home   { padding: 48px 0 60px; }
.whc-view-wizard { padding: 20px 0 40px; }
.whc-view-result { padding: 20px 0 60px; }

/* ── Entrance animation ───────────────────────────────────── */
.whc-enter { opacity: 0; transform: translateY(20px); }
.whc-entered { opacity: 1; transform: translateY(0); transition: all 0.6s cubic-bezier(0.22,1,0.36,1); }

/* ── Brand pill ───────────────────────────────────────────── */
.whc-brand-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 100px; background: rgba(9,235,248,0.06); border: 1px solid rgba(9,235,248,0.18); margin-bottom: 20px; }
.whc-brand-dot  { width: 8px; height: 8px; border-radius: 4px; background: #09EBF8; flex-shrink: 0; }
.whc-brand-pill span { font-size: 12.5px; font-weight: 600; color: #0A315D; letter-spacing: 0.02em; }

/* ── Poppins headings — Fix #3 ────────────────────────────── */
.whc-heading,
.whc-dienst-title,
.whc-question,
.whc-price-amount,
.whc-cta-title,
.whc-lead-title { font-family: 'Poppins', sans-serif; font-weight: 800; }

/* ── Heading ──────────────────────────────────────────────── */
.whc-heading { margin: 0; font-size: 34px; color: #0A315D; line-height: 1.15; letter-spacing: -0.035em; }
.whc-heading .whc-gradient-text { background: linear-gradient(135deg,#09EBF8,#06B8D4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.whc-subtext { margin: 14px 0 0; font-size: 15.5px; color: #5A6B80; line-height: 1.55; max-width: 400px; }

/* ── Dienst header — Fix #2 ───────────────────────────────── */
.whc-dienst-header { margin-bottom: 24px; }
.whc-dienst-title { margin: 12px 0 8px; font-size: 28px; color: #0A315D; line-height: 1.2; letter-spacing: -0.03em; }
.whc-title-accent { background: linear-gradient(135deg,#09EBF8,#06B8D4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.whc-dienst-sub { margin: 0 0 16px; font-size: 14px; color: #5A6B80; line-height: 1.5; font-weight: 400; }

/* ── USP Bar ──────────────────────────────────────────────── */
.whc-usp-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 16px; margin-top: 20px; }
.whc-usp-bar.light { padding: 18px 20px; background: #fff; border: 1px solid #D8E0E8; }
.whc-usp-bar.dark  { padding: 20px 22px; background: rgba(9,235,248,0.06); border: 1px solid rgba(9,235,248,0.12); }
.whc-usp-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.whc-usp-icon { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #06B8D4; }
.whc-usp-bar.light .whc-usp-icon { background: rgba(9,235,248,0.06); }
.whc-usp-bar.dark  .whc-usp-icon { background: rgba(9,235,248,0.1); }
.whc-usp-item span { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.whc-usp-bar.light .whc-usp-item span { color: #5A6B80; }
.whc-usp-bar.dark  .whc-usp-item span { color: #0A315D; }

/* ── Service Cards ────────────────────────────────────────── */
.whc-service-list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.whc-service-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; width: 100%; padding: 24px 26px; background: #fff; border: 1.5px solid #D8E0E8; border-radius: 20px; cursor: pointer; text-align: left; box-shadow: 0 1px 3px rgba(10,49,93,0.04),0 4px 12px rgba(10,49,93,0.04); transition: all 0.25s cubic-bezier(0.22,1,0.36,1); opacity: 0; }
.whc-service-card.whc-card-visible { opacity: 1; }
.whc-service-card:hover { border-color: #09EBF8; box-shadow: 0 2px 8px rgba(10,49,93,0.07),0 8px 24px rgba(10,49,93,0.07); transform: translateY(-3px); }
.whc-service-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 20px 0 0 20px; opacity: 0.35; transition: opacity 0.25s; }
.whc-service-card:hover .whc-service-accent { opacity: 1; }
.whc-service-icon-wrap { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.whc-service-text { flex: 1; min-width: 0; }
.whc-service-name { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.whc-service-name strong { font-size: 16.5px; font-weight: 700; color: #0A315D; }
.whc-service-tag { font-size: 10.5px; font-weight: 700; color: #0A315D; background: rgba(9,235,248,0.12); padding: 2px 8px; border-radius: 6px; letter-spacing: 0.03em; text-transform: uppercase; }
.whc-service-sub { font-size: 13.5px; color: #5A6B80; }
.whc-service-arrow { width: 36px; height: 36px; border-radius: 10px; background: #F0F4F7; display: flex; align-items: center; justify-content: center; transition: all 0.25s; flex-shrink: 0; }
.whc-service-card:hover .whc-service-arrow { background: #09EBF8; }
.whc-service-arrow svg .arrow-path { stroke: #8E9BAD; transition: stroke 0.25s; }
.whc-service-card:hover .whc-service-arrow svg .arrow-path { stroke: #0A315D; }

/* ── Wizard nav ───────────────────────────────────────────── */
.whc-nav { display: flex; align-items: center; gap: 14px; padding: 12px 0 20px; }
.whc-back-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid #D8E0E8; background: #fff; cursor: pointer; transition: all 0.2s; flex-shrink: 0; }
.whc-back-btn:hover { border-color: #09EBF8; background: rgba(9,235,248,0.06); }
.whc-nav-title { flex: 1; font-size: 15px; font-weight: 700; color: #0A315D; }
.whc-step-badge { font-size: 12.5px; font-weight: 600; color: #8E9BAD; background: #fff; padding: 5px 12px; border-radius: 8px; border: 1px solid #D8E0E8; }

/* ── Progress bar ─────────────────────────────────────────── */
.whc-progress { display: flex; gap: 4px; margin-bottom: 36px; }
.whc-progress-seg { flex: 1; height: 4px; border-radius: 2px; background: #D8E0E8; transition: background 0.35s cubic-bezier(0.22,1,0.36,1); }
.whc-progress-seg.active   { background: #09EBF8; }
.whc-progress-seg.complete { background: #16A34A; }

/* ── FadeSlide ────────────────────────────────────────────── */
.whc-step-content { transition: all 0.28s cubic-bezier(0.22,1,0.36,1); }
.whc-step-content.slide-out-right { opacity: 0; transform: translateX(40px); }
.whc-step-content.slide-out-left  { opacity: 0; transform: translateX(-40px); }
.whc-step-content.slide-in        { opacity: 1; transform: translateX(0); }

/* ── Question ─────────────────────────────────────────────── */
.whc-question { margin: 0 0 28px; font-size: 24px; color: #0A315D; line-height: 1.2; letter-spacing: -0.03em; }

/* ── Option grid ──────────────────────────────────────────── */
.whc-options-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.whc-options-1 { display: grid; grid-template-columns: 1fr; gap: 10px; }

/* ── Option button ────────────────────────────────────────── */
.whc-opt-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; background: #fff; border: 2px solid #D8E0E8; border-radius: 14px; cursor: pointer; text-align: left; box-shadow: 0 1px 3px rgba(10,49,93,0.04),0 4px 12px rgba(10,49,93,0.04); transition: all 0.2s cubic-bezier(0.22,1,0.36,1); }
.whc-opt-btn:hover { border-color: #B8C5D3; transform: translateY(-2px); box-shadow: 0 2px 8px rgba(10,49,93,0.07),0 8px 24px rgba(10,49,93,0.07); }
.whc-opt-btn.selected, .whc-opt-btn.flash { background: rgba(9,235,248,0.06); border-color: #09EBF8; box-shadow: 0 2px 8px rgba(10,49,93,0.07),0 8px 24px rgba(10,49,93,0.07); }
.whc-opt-btn.flash { transform: scale(0.97); box-shadow: 0 0 0 3px rgba(9,235,248,0.06); }
.whc-opt-icon { width: 42px; height: 42px; border-radius: 11px; background: #F0F4F7; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #0A315D; transition: all 0.2s; }
.whc-opt-btn.selected .whc-opt-icon, .whc-opt-btn.flash .whc-opt-icon { background: rgba(9,235,248,0.12); color: #06B8D4; }
.whc-opt-label { font-size: 15px; font-weight: 650; color: #0A315D; line-height: 1.3; }
.whc-opt-sub   { font-size: 13px; color: #5A6B80; margin-top: 2px; }
.whc-opt-check { width: 24px; height: 24px; border-radius: 12px; background: #09EBF8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto; }

/* ── Price card ───────────────────────────────────────────── */
.whc-price-card { background: linear-gradient(145deg,#0A315D,#071E3D); border-radius: 20px; padding: 36px 30px 32px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(10,49,93,0.08),0 16px 48px rgba(10,49,93,0.10); }
.whc-orb1 { position: absolute; top:-50px; right:-50px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle,rgba(9,235,248,0.12) 0%,transparent 70%); pointer-events:none; }
.whc-orb2 { position: absolute; bottom:-40px; left:-30px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle,rgba(9,235,248,0.06) 0%,transparent 70%); pointer-events:none; }
.whc-price-inner { position: relative; }
.whc-price-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:100px; background:rgba(9,235,248,0.12); margin-bottom:18px; }
.whc-price-badge span { font-size:12.5px; font-weight:600; color:#09EBF8; letter-spacing:0.03em; }
.whc-price-amount { font-size:44px; color:#fff; line-height:1.1; letter-spacing:-0.04em; margin-bottom:8px; }
.whc-price-sep { color:rgba(255,255,255,0.3); margin:0 8px; font-weight:400; font-family:'DM Sans',sans-serif; }
.whc-price-note { margin:0; font-size:13.5px; color:rgba(255,255,255,0.45); line-height:1.55; }

/* ── Summary card ─────────────────────────────────────────── */
.whc-summary-card { background:#fff; border-radius:14px; border:1.5px solid #D8E0E8; padding:22px 24px; }
.whc-summary-title { font-size:13px; font-weight:700; color:#8E9BAD; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px; }
.whc-summary-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid #F0F4F7; }
.whc-summary-row:first-of-type { border-top:none; }
.whc-summary-icon { width:32px; height:32px; border-radius:8px; background:rgba(9,235,248,0.06); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#06B8D4; }
.whc-summary-icon svg { transform: scale(0.75); }
.whc-summary-q { flex:1; font-size:13.5px; color:#5A6B80; }
.whc-summary-a { font-size:13.5px; font-weight:650; color:#0A315D; background:rgba(9,235,248,0.06); padding:3px 10px; border-radius:6px; white-space:nowrap; }

/* ── Lead form ────────────────────────────────────────────── */
.whc-lead-card { background:#fff; border-radius:14px; border:1.5px solid #D8E0E8; padding:24px; }
.whc-lead-title { font-size:16px; color:#0A315D; margin-bottom:4px; }
.whc-lead-sub   { font-size:13.5px; color:#5A6B80; margin:0 0 16px; line-height:1.5; }
.whc-lead-success { font-size:14px; color:#16A34A; margin:8px 0 0; }
.whc-lead-form  { display:flex; flex-direction:column; gap:10px; }
.whc-lead-row   { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.whc-input { width:100%; padding:14px 16px; border-radius:12px; border:2px solid #D8E0E8; font-size:15px; font-family:inherit; color:#0A315D; background:#fff; outline:none; transition:border-color 0.2s; }
.whc-input:focus { border-color:#09EBF8; }
.whc-submit-btn { padding:16px; border-radius:12px; background:#09EBF8; color:#0A315D; font-weight:700; font-size:15px; border:none; cursor:pointer; transition:all 0.15s; font-family:inherit; opacity:0.5; }
.whc-submit-btn.ready { opacity:1; }
.whc-submit-btn:hover.ready { background:#06B8D4; }

/* ── CTA block ────────────────────────────────────────────── */
.whc-cta-card { background:#F0FDF4; border-radius:14px; border:1.5px solid #BBF7D0; padding:26px 24px; }
.whc-cta-title { font-size:17px; color:#0A315D; margin-bottom:4px; }
.whc-cta-sub   { margin:0 0 20px; font-size:13.5px; color:#5A6B80; line-height:1.5; }
.whc-cta-buttons { display:flex; flex-direction:column; gap:10px; }
.whc-btn-call { display:flex; align-items:center; justify-content:center; gap:10px; padding:16px 20px; background:#0A315D; color:#fff; border-radius:12px; font-weight:700; font-size:15.5px; text-decoration:none; box-shadow:0 4px 16px rgba(10,49,93,0.25); transition:all 0.15s; }
.whc-btn-call:hover { background:#071E3D; }
.whc-btn-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.whc-btn-whatsapp { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 16px; background:#25D366; color:#fff; border-radius:12px; font-weight:700; font-size:14px; text-decoration:none; }
.whc-btn-offerte  { display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 16px; background:#fff; color:#0A315D; border-radius:12px; font-weight:700; font-size:14px; text-decoration:none; border:2px solid #D8E0E8; }

/* ── Result 2-col grid — Fix #6 ──────────────────────────── */
.whc-result-grid-top,
.whc-result-grid-bottom { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; align-items:stretch; }

/* ── Trust strip ──────────────────────────────────────────── */
.whc-trust { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:20px; padding:14px 0; flex-wrap:wrap; }
.whc-trust span { font-size:12px; color:#8E9BAD; font-weight:500; }

/* ── Recalculate ──────────────────────────────────────────── */
.whc-recalc-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px; margin-top:12px; background:transparent; border:1.5px solid #D8E0E8; border-radius:12px; font-size:14px; font-weight:600; color:#5A6B80; cursor:pointer; transition:all 0.2s; font-family:inherit; }
.whc-recalc-btn:hover { border-color:#09EBF8; color:#06B8D4; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:768px) {
  .whc-inner.whc-view-result { padding: 0 20px; max-width: 100%; }
  .whc-result-grid-top,
  .whc-result-grid-bottom { grid-template-columns:1fr; }
  .whc-lead-row { grid-template-columns:1fr; }
}

@media (max-width:480px) {
  .whc-heading { font-size:28px; }
  .whc-price-amount { font-size:34px; }
  .whc-options-2 { grid-template-columns:1fr; }
  .whc-btn-row   { grid-template-columns:1fr; }
  .whc-usp-bar   { grid-template-columns:1fr; }
  .whc-service-card { padding:18px 18px; }
}