/* ============================================================
   Siberische Kat Kleurencalculator — Stijlblad
   Thema: Siberisch woud — diep bosgroen, amber, ivoor
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');

#siberian-colour-calculator {
  --forest:    #1B3A2A;
  --forest-d:  #0F2219;
  --forest-l:  #2D5A40;
  --amber:     #C8963A;
  --amber-l:   #E0B05A;
  --amber-pale:#F5EDD0;
  --ivory:     #FDFAF4;
  --ivory-d:   #F3EDE0;
  --warm-grey: #8A8070;
  --warm-grey-l:#C8C0B0;
  --white:     #FFFFFF;
  --error:     #C0392B;
  --neva-color:#4A6080;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(15,34,25,0.10);
  --shadow-md: 0 6px 24px rgba(15,34,25,0.16);
  --transition:all 0.22s cubic-bezier(0.4,0,0.2,1);
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  font-family:var(--font-body);
  color:var(--forest-d);
  box-sizing:border-box;
  line-height:1.6;
}
#siberian-colour-calculator *, #siberian-colour-calculator *::before, #siberian-colour-calculator *::after { box-sizing:inherit; }

/* ── Init loader ─────────────────────────────────────────────── */
.sib-loading-init { display:flex; flex-direction:column; align-items:center; gap:16px; padding:60px 20px; color:var(--warm-grey); font-size:.95rem; }
.sib-paw-spinner svg { width:64px; height:64px; fill:var(--amber); animation:sib-pulse 1.4s ease-in-out infinite; }
@keyframes sib-pulse { 0%,100%{opacity:.4;transform:scale(.92)} 50%{opacity:1;transform:scale(1.08)} }

/* ── App ─────────────────────────────────────────────────────── */
.sib-app { max-width:1100px; margin:0 auto; padding:0 16px 60px; }

/* ── Header ──────────────────────────────────────────────────── */
.sib-header { text-align:center; padding:48px 20px 36px; position:relative; }
.sib-header::before { content:''; display:block; width:60px; height:2px; background:linear-gradient(90deg,transparent,var(--amber),transparent); margin:0 auto 24px; }
.sib-header h1 { font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:300; color:var(--forest); margin:0 0 10px; letter-spacing:.02em; line-height:1.2; }
.sib-header h1 em { font-style:italic; color:var(--amber); }
.sib-header p { font-size:.95rem; color:var(--warm-grey); max-width:540px; margin:0 auto; font-weight:300; }

/* ── Formulierkaart ──────────────────────────────────────────── */
.sib-form-card { background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); border:1px solid var(--ivory-d); padding:36px; margin-bottom:32px; position:relative; overflow:hidden; }
.sib-form-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--forest),var(--amber),var(--forest)); }
.sib-parents-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:680px) { .sib-parents-grid{grid-template-columns:1fr} .sib-form-card{padding:24px 20px} }

/* ── Ouderpanelen ────────────────────────────────────────────── */
.sib-parent-panel { background:var(--ivory); border-radius:var(--radius-md); padding:24px; border:1px solid var(--ivory-d); }
.sib-parent-panel h3 { font-family:var(--font-display); font-size:1.3rem; font-weight:600; color:var(--forest); margin:0 0 18px; display:flex; align-items:center; gap:10px; }
.sib-parent-panel h3 .role-badge { font-family:var(--font-body); font-size:.7rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; background:var(--forest); color:var(--white); padding:3px 10px; border-radius:20px; }
.sib-parent-panel h3 .role-badge.female { background:var(--amber); }

/* ── Velden ──────────────────────────────────────────────────── */
.sib-field { margin-bottom:14px; }
.sib-field label { display:block; font-size:.78rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--warm-grey); margin-bottom:6px; }
.sib-field select, .sib-field input[type="text"] { width:100%; padding:10px 14px; border:1.5px solid var(--warm-grey-l); border-radius:var(--radius-sm); background:var(--white); font-family:var(--font-body); font-size:.9rem; color:var(--forest-d); transition:var(--transition); appearance:none; -webkit-appearance:none; }
.sib-field select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8070' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; cursor:pointer; }
.sib-field select:focus, .sib-field input[type="text"]:focus { outline:none; border-color:var(--forest); box-shadow:0 0 0 3px rgba(27,58,42,.1); }

/* ── Kleurmonsterpreview ─────────────────────────────────────── */
.sib-swatch-preview { display:flex; align-items:center; gap:8px; margin-top:4px; padding:6px 10px; background:var(--ivory-d); border-radius:var(--radius-sm); font-size:.8rem; color:var(--warm-grey); }
.sib-swatch-dot { width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(0,0,0,.12); flex-shrink:0; transition:var(--transition); }

/* ── Toggle ──────────────────────────────────────────────────── */
.sib-toggle-field { display:flex; align-items:center; gap:10px; margin-bottom:12px; cursor:pointer; }
.sib-toggle { position:relative; width:40px; height:22px; flex-shrink:0; }
.sib-toggle input { opacity:0; width:0; height:0; position:absolute; }
.sib-toggle-track { position:absolute; inset:0; background:var(--warm-grey-l); border-radius:11px; transition:var(--transition); }
.sib-toggle-thumb { position:absolute; left:3px; top:3px; width:16px; height:16px; background:var(--white); border-radius:50%; transition:var(--transition); box-shadow:0 1px 4px rgba(0,0,0,.2); }
.sib-toggle input:checked ~ .sib-toggle-track { background:var(--forest); }
.sib-toggle input:checked ~ .sib-toggle-thumb { transform:translateX(18px); }
.sib-toggle-label { font-size:.88rem; color:var(--forest-d); user-select:none; }

/* ── Bereken-knop ────────────────────────────────────────────── */
.sib-calculate-btn { width:100%; padding:16px 24px; margin-top:24px; background:linear-gradient(135deg,var(--forest),var(--forest-l)); color:var(--white); border:none; border-radius:var(--radius-md); font-family:var(--font-display); font-size:1.2rem; font-weight:400; letter-spacing:.06em; cursor:pointer; transition:var(--transition); }
.sib-calculate-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.sib-calculate-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* ── Laadscherm ──────────────────────────────────────────────── */
.sib-loading { text-align:center; padding:48px 20px; display:none; }
.sib-loading.active { display:block; }
.sib-spinner { width:48px; height:48px; border:3px solid var(--ivory-d); border-top-color:var(--forest); border-radius:50%; animation:sib-spin .9s linear infinite; margin:0 auto 16px; }
@keyframes sib-spin { to{transform:rotate(360deg)} }
.sib-loading p { font-size:.9rem; color:var(--warm-grey); font-style:italic; }

/* ── Fout ────────────────────────────────────────────────────── */
.sib-error { background:#FDF0EE; border:1.5px solid #E8B0A8; border-radius:var(--radius-md); padding:16px 20px; color:var(--error); font-size:.9rem; display:none; align-items:center; gap:10px; margin-bottom:24px; }
.sib-error.active { display:flex; }

/* ── Resultaten ──────────────────────────────────────────────── */
.sib-results { display:none; }
.sib-results.active { display:block; }
.sib-results-header { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--ivory-d); }
.sib-results-header h2 { font-family:var(--font-display); font-size:1.8rem; font-weight:300; color:var(--forest); margin:0; }
.sib-parent-summary { font-size:.82rem; color:var(--warm-grey); font-style:italic; }
.sib-parent-name-tag { display:inline-block; background:var(--forest); color:var(--white); font-family:var(--font-display); font-size:1rem; padding:3px 14px 4px; border-radius:20px; margin:0 4px; }

/* ── Printknop ───────────────────────────────────────────────── */
.sib-print-btn { display:inline-flex; align-items:center; gap:7px; padding:10px 22px; background:var(--white); color:var(--forest); border:2px solid var(--forest); border-radius:var(--radius-md); font-family:var(--font-body); font-size:.9rem; font-weight:500; cursor:pointer; transition:var(--transition); white-space:nowrap; }
.sib-print-btn:hover { background:var(--forest); color:var(--white); }

/* ── Printtabel (verborgen op scherm) ───────────────────────── */
.sib-print-summary { display:none; margin-bottom:28px; }
.sib-print-parents { width:100%; border-collapse:collapse; font-size:.88rem; }
.sib-print-parents th, .sib-print-parents td { padding:8px 12px; border:1px solid var(--ivory-d); text-align:left; }
.sib-print-parents th { background:var(--forest); color:var(--white); font-size:.8rem; letter-spacing:.06em; }
.sib-print-parents tr:nth-child(even) td { background:var(--ivory); }

/* ── Resultatenraster ────────────────────────────────────────── */
.sib-results-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-bottom:36px; }

/* ── Resultaatkaart ──────────────────────────────────────────── */
.sib-result-card { background:var(--white); border-radius:var(--radius-md); border:1.5px solid var(--ivory-d); padding:20px; box-shadow:var(--shadow-sm); transition:var(--transition); opacity:0; transform:translateY(12px); animation:sib-fadeup .4s forwards; }
.sib-result-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--amber-l); }
@keyframes sib-fadeup { to{opacity:1;transform:translateY(0)} }
.sib-result-top { display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
.sib-result-swatch { width:44px; height:44px; border-radius:50%; border:2px solid rgba(0,0,0,.1); flex-shrink:0; }
.sib-result-name { font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--forest); line-height:1.2; margin:0 0 4px; }
.sib-result-code { font-size:.72rem; letter-spacing:.1em; color:var(--warm-grey); font-family:'Courier New',monospace; text-transform:uppercase; }
.sib-neva-badge { display:inline-block; margin-top:4px; background:var(--neva-color); color:var(--white); font-size:.65rem; padding:2px 8px; border-radius:10px; letter-spacing:.06em; }

/* ── Kansbalken ──────────────────────────────────────────────── */
.sib-prob-bar-wrap { margin-top:12px; }
.sib-prob-label { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
.sib-prob-pct { font-family:var(--font-display); font-size:1.6rem; font-weight:300; color:var(--forest); line-height:1; }
.sib-prob-of { font-size:.75rem; color:var(--warm-grey); }
.sib-bar-track { height:6px; background:var(--ivory-d); border-radius:3px; overflow:hidden; }
.sib-bar-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--forest),var(--amber)); transform:scaleX(0); transform-origin:left; transition:transform .7s cubic-bezier(.4,0,.2,1); }
.sib-result-card.visible .sib-bar-fill { transform:scaleX(1); }

/* ── Geslachtsindeling ───────────────────────────────────────── */
.sib-sex-breakdown { display:flex; gap:10px; margin-top:12px; }
.sib-sex-chip { flex:1; background:var(--ivory); border-radius:var(--radius-sm); padding:7px 10px; text-align:center; }
.sib-sex-chip .sex-icon { font-size:.9rem; }
.sib-sex-chip .sex-pct { display:block; font-size:.9rem; font-weight:500; color:var(--forest-d); }
.sib-sex-chip .sex-label { font-size:.68rem; color:var(--warm-grey); text-transform:uppercase; letter-spacing:.06em; }
.sib-female-only-badge { display:inline-block; margin-top:10px; background:linear-gradient(135deg,#8B4B8B,#C47AC4); color:var(--white); font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:3px 10px; border-radius:12px; }

/* ── Genetica-notities ───────────────────────────────────────── */
.sib-genetics-notes { margin-top:32px; background:var(--amber-pale); border:1px solid rgba(200,150,58,.25); border-radius:var(--radius-md); padding:20px 24px; }
.sib-genetics-notes h4 { font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--forest); margin:0 0 8px; }
.sib-genetics-notes ul { font-size:.82rem; color:var(--warm-grey); line-height:1.7; padding-left:18px; }

/* ── Foto's ──────────────────────────────────────────────────── */
.sib-photos-section { margin-top:40px; }
.sib-photos-section h3 { font-family:var(--font-display); font-size:1.5rem; font-weight:300; color:var(--forest); margin:0 0 4px; }
.sib-photos-subtitle { font-size:.82rem; color:var(--warm-grey); font-style:italic; margin-bottom:18px; }
.sib-photos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.sib-photo-item { border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/3; background:var(--ivory-d); position:relative; box-shadow:var(--shadow-sm); transition:var(--transition); }
.sib-photo-item:hover { transform:scale(1.03); box-shadow:var(--shadow-md); }
.sib-photo-item img { width:100%; height:100%; object-fit:cover; display:block; }
.sib-photo-caption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(15,34,25,.75)); color:var(--white); font-size:.72rem; padding:16px 10px 8px; opacity:0; transition:var(--transition); }
.sib-photo-item:hover .sib-photo-caption { opacity:1; }
.sib-photo-source { position:absolute; top:8px; right:8px; background:rgba(15,34,25,.65); color:rgba(255,255,255,.9); font-size:.62rem; padding:2px 7px; border-radius:10px; text-transform:uppercase; letter-spacing:.06em; }

/* ── Voettekst ───────────────────────────────────────────────── */
.sib-footer { text-align:center; margin-top:48px; padding-top:20px; border-top:1px solid var(--ivory-d); font-size:.75rem; color:var(--warm-grey-l); }
.sib-footer a { color:var(--amber); text-decoration:none; }
.sib-footer a:hover { text-decoration:underline; }

/* ── Animatievertraging kaarten ──────────────────────────────── */
.sib-result-card:nth-child(1){animation-delay:.05s} .sib-result-card:nth-child(2){animation-delay:.10s}
.sib-result-card:nth-child(3){animation-delay:.15s} .sib-result-card:nth-child(4){animation-delay:.20s}
.sib-result-card:nth-child(5){animation-delay:.25s} .sib-result-card:nth-child(6){animation-delay:.30s}
.sib-result-card:nth-child(7){animation-delay:.35s} .sib-result-card:nth-child(8){animation-delay:.40s}
.sib-result-card:nth-child(n+9){animation-delay:.45s}

/* ── Responsief ──────────────────────────────────────────────── */
@media (max-width:500px) { .sib-results-grid{grid-template-columns:1fr} .sib-photos-grid{grid-template-columns:1fr 1fr} }