@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&display=swap');

.klikmood-container {
  max-width:1000px;
  margin:0 auto;
  text-align:center;
  font-family:"Playfair Display","Helvetica Neue",serif;
}

.klikmood-step { margin-bottom:1.8rem; }

.klikmood-step strong {
  display:block;
  font-size:1.1rem;
  margin-bottom:.6rem;
  color:#5a3a3a;
  letter-spacing:.4px;
}

.klikmood-switches {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.6rem;
}

.qbutton {
  min-width:140px;
  padding:.6rem 1.2rem;
  border-radius:2rem;
  background:#eee;
  text-decoration:none;
  color:#333;
  font-weight:600;
}

.qbutton.active {
  box-shadow:0 0 0 3px rgba(255,255,255,.8),
             0 0 10px rgba(200,78,78,.6);
  transform:scale(1.03);
}

.klikmood-board {
  position:relative;
  width:100%;
  height:1000px;
  margin-top:1rem;
  background:radial-gradient(circle at 20% 20%,#fff7f4 0%,#faf0ec 70%,#f5e6e0 100%);
  border-radius:15px;
  box-shadow:inset 0 0 50px rgba(0,0,0,.08),
             0 10px 25px rgba(0,0,0,.2);
  overflow:hidden;
}

.klikmood-trashzone {
  position:absolute;
  top:0;
  left:0;
  width:22%;
  height:100%;
  background:linear-gradient(180deg,#f9f5f4 0%,#f3ebe9 100%);
  border-right:2px dashed #bda9a4;
  color:#9a7a74;
  text-align:center;
  padding-top:10px;
  font-size:.9rem;
  pointer-events:none;
}
.klikmood-trashzone::before { content:"🗑️ Afvalruimte"; }

.klikmood-placeholder {
  position:absolute;
  top:50%;
  left:60%;
  transform:translate(-50%,-50%);
  width:380px;
  max-width:60%;
  opacity:.9;
  transition:opacity .4s ease;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}

.klikmood-placeholder.hidden {
  opacity:0;
  pointer-events:none;
}

.klikmood-photo {
  position:absolute;
  border-radius:10px;
  box-shadow:0 8px 15px rgba(0,0,0,.15);
  transition:transform .4s ease,opacity .4s ease;
  opacity:0;
  cursor:grab;
  touch-action:none;
}

.klikmood-photo.loaded { opacity:1; }
.klikmood-photo:active { transform:scale(1.05); cursor:grabbing; }

button {
  margin-top:1rem;
  padding:.7rem 1.4rem;
  border:none;
  border-radius:2rem;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:all .3s ease;
}

#save-board {
  background:linear-gradient(135deg,#6a1a1a,#a63f3f);
}
#save-board:hover {
  background:linear-gradient(135deg,#7c1f1f,#c84e4e);
  transform:translateY(-2px);
}

#expand-board,
#align-board {
  background:linear-gradient(135deg,#5a3a3a,#9b5252);
}
#expand-board:hover,
#align-board:hover {
  background:linear-gradient(135deg,#6a4646,#b56363);
  transform:translateY(-2px);
}

#load-more {
  background:linear-gradient(135deg,#e200df,#b800b0);
}
#load-more:hover {
  background:linear-gradient(135deg,#ff4cff,#d900d0);
  transform:translateY(-2px);
}

.klikmood-logo {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:80%;
  max-width:800px;
  opacity:.22;
  pointer-events:none;
  z-index:5;
}

@media(max-width:768px){
  .klikmood-board { height:700px; }
  .klikmood-photo { max-width:120px!important; }
  .klikmood-logo { width:90%; opacity:.15; }
}