:root {
  --bg:#f5f8fa;
  --text:#0f172a;
  --card:#fff;
  --accent:#27F55B;
  --muted:#6b7280;
  --radius:10px;
}

* { box-sizing:border-box; }

body {
  margin:0;
  font-family:Inter, sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

html { max-width:100%; overflow-x:hidden; }

/* ===========================
   HEADER
=========================== */
.site-header {
  background:var(--card);
  border-bottom:1px solid rgba(0,0,0,0.05);
  position:sticky; top:0; z-index:100;
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
}

.brand {
  font-weight:700; color:var(--text); text-decoration:none; font-size:1.1rem;
}

/* ===========================
   NAVIGATIE
=========================== */
.nav {
  display:flex;
  gap:14px;
  align-items:center;
}

.dropdown { position:relative; }

.drop-btn {
  background:none; border:none; cursor:pointer;
  color:var(--text); font:inherit;
}

.dropdown-content {
  display:none;
  position:absolute;
  top:100%;
  right:0;
  background:var(--card);
  border:1px solid rgba(0,0,0,0.05);
  border-radius:var(--radius);
  min-width:250px;
  box-shadow:0 4px 8px rgba(0,0,0,0.05);
}

.dropdown-content a {
  display:block; padding:8px 12px;
  text-decoration:none; color:var(--text);
}

.dropdown-content a:hover {
  background:rgba(14,165,164,0.08);
}

.dropdown.open .dropdown-content { display:block; }

.menu-toggle {
  display:none;
  background:none; border:none; font-size:1.5rem;
}

@media (max-width:768px) {
  .nav {
    display:none;
    flex-direction:column;
    background:#fff;
    position:absolute;
    top:60px;
    left:10px;
    width:95%;
    padding:10px 0;
    border-top:1px solid rgba(0,0,0,0.05);
    border-radius:8px;
    box-shadow:0 4px 14px rgba(0,0,0,0.12);
  }
  .nav.open { display:flex; align-items:flex-start; }
  
  .dropdown-content {
    position:static;
    box-shadow:none;
    border:none;
    left:0;
  }
  
  .menu-toggle { display:block; }
}

/* ===========================
   CONTAINER + CARDS
=========================== */
.container {
  padding:20px;
  max-width:900px;
  margin:0 auto;
}

.cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:10px;
}

.card {
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 3px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform:translateY(-5px);
  box-shadow:0 8px 16px rgba(0,0,0,0.1);
}

.card .icon {
  font-size:2rem;
  margin-bottom:8px;
  transition:transform 0.2s ease;
}

.card:hover .icon { transform:scale(1.2) rotate(5deg); }

.btn {
  background:var(--accent);
  //color:#fff;
  border:none;
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
}

.btn:hover { opacity:0.9; }

/* ===========================
   TOOL WRAPPER
=========================== */
.tool-wrapper {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  padding: 20px;
  margin-top: 20px;
}

.tool-wrapper form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tool-wrapper label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  color: var(--text);
}

.tool-wrapper input,
.tool-wrapper select,
.tool-wrapper button {
  padding: 8px 10px;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px;
  font-size: 1rem;
  margin-top: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width:100%;
}

.tool-wrapper .btn {
  align-self: flex-start;
  margin-top: 8px;
  padding: 10px;
  cursor: pointer;
}

/* ===========================
   RESULT BOX
=========================== */
.result, .result-box {
  margin-top: 20px;
  background: #ecfdf5;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 0.95rem;
}

.print-logo {
  width:150px;
  margin-bottom:20px;
}

/* ===========================
   SEARCHBOX
=========================== */
.search-wrapper { position: relative; }

.search-icon {
  background: none; border:none; font-size:22px; cursor:pointer;
}

.search-box {
  display: block;
  position: absolute;
  right:0; top:40px;
  width:250px; max-width:90vw;
  background:#fff;
  padding:0;
  border-radius:8px;
  box-shadow:0 3px 10px rgba(0,0,0,0.15);
  overflow:hidden;
  transform:scaleY(0);
  transform-origin:top;
  transition:transform 0.25s ease, opacity 0.25s ease;
  opacity:0;
  z-index:999;
}

.search-wrapper.active .search-box {
  transform:scaleY(1); opacity:1;
}

#search-input {
  width:100%;
  padding:10px 12px;
  font-size:16px;
  border:none; outline:none; box-sizing:border-box;
}

.search-suggestions {
  max-height:250px;
  overflow-y:auto;
  border-top:1px solid #eee;
  background:#fff;
  animation: fadeIn 0.25s ease;
}

.suggest-item {
  display:block;
  padding:8px 12px;
  border-bottom:1px solid #eee;
  text-decoration:none;
  color:#000;
}

.suggest-item:hover { background:#f0f0f0; }

@keyframes fadeIn { from{opacity:0;transform:translateY(-5px);} to{opacity:1;transform:translateY(0);} }

/* ===========================
   RESPONSIVE MOBIEL
=========================== */
@media (max-width:600px){
  .tool-wrapper { padding:15px; margin-top:15px; }
  .tool-wrapper label { font-size:0.95rem; width:100%; }
  .tool-wrapper input, .tool-wrapper select, .tool-wrapper button { font-size:1rem; width:100%; }
  .result, .result-box { font-size:0.95rem; padding:10px; }
  .cards { grid-template-columns:1fr; }
  nav ul { flex-direction:column; gap:10px; }
}

@media (max-width:768px){
  .search-box {
    position:fixed; top:60px; right:0; left:0; width:100%; border-radius:0;
    box-shadow:0 2px 12px rgba(0,0,0,0.25);
  }
}

/* PRINT */
@media print{
  body * { visibility:hidden !important; }
  #resultaat, #resultaat * { visibility:visible !important; }
  #resultaat { position:absolute; inset:0; margin:0; padding:20px; background:#fff; }
  .print-logo { display:block !important; }
}
.share-wrapper {
    position: relative;
    //display: inline-block;
	display: grid; /* Stelt de container in als een Grid-container */
	grid-template-columns: 1fr 1fr; /* Maakt twee gelijke kolommen */
	gap: 10px; /* Voegt wat ruimte toe tussen de knoppen */
}

.share-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    flex-direction: column;
    z-index: 1000;
    min-width: 140px;
}

.share-menu button {
    width: 100%;
    text-align: left;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
}

.share-menu button:hover {
    background: rgba(0, 165, 164, 0.1);
}
.tool-buttons {
    margin-top: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tool-buttons .btn-secondary {
    flex: 1 1 calc(50% - 10px);
    padding: 12px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    background: #6b7280; /* grijs */
    color: #fff;
    cursor: pointer;
    transition: 0.2s ease;
}

.tool-buttons .btn-secondary:hover {
    background: #4b5563;
}

@media(max-width:400px){
    .tool-buttons .btn-secondary{
        flex: 1 1 100%;
    }
}
.similar-tools {
    margin-top: 40px;
    padding: 20px;
    border-top: 1px solid #ddd;
}
.similar-tools ul li{
    padding: 4px;
}
.similar-tools a {
    text-decoration: none;
    color: #0066cc;
}
.similar-tools a:hover {
    text-decoration: underline;
}
.rating-box {
    margin-top: 40px;
    padding: 20px;
    border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
.rating-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 17px;
    color: #444;
}

.star-svg {
    width: 22px;
    height: 22px;
    display: inline-block;
    background-size: cover;
}

/* Volle ster 
.star-svg.full {
    background-image: url('/assets/img/star-full.svg');
}


.star-svg.half {
    background-image: url('/assets/img/star-half.svg');
}


.star-svg.empty {
    background-image: url('/assets/img/star-empty.svg');
}
*/
.star {
  font-size: 22px;
  color: #ccc;
}
.star.full { color: gold; }

/* halve ster */
.star.half {
  background: linear-gradient(90deg, gold 50%, #ccc 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rating-vote {
    display: flex;
    align-items: center;
    gap: 8px; /* ruimte tussen label en sterren */
}

.vote-label {
    font-weight: 600;
    font-size: 15px;
}
.stars span {
    font-size: 22px;
    cursor: pointer;
    color: #aaa;
}
.stars span:hover,
.stars span.active {
    color: gold;
}