/* ✨ Mooie, moderne button styles voor FlashCard! ✨ */
@import url('./colors.css');

.fc-btn, .button-fancy, .btn {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  border-radius: 0.7em;
  padding: 0.6em 1.6em;
  border: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s, transform 0.1s;
  box-shadow: 0 2px 8px var(--black-shadow);
  margin: 0.2em;
  outline: none;
  font-size: 1.05em;
  letter-spacing: 0.02em;
  background: var(--button-gradient);
  color: var(--main-fg);
}

.fc-btn:hover, .button-fancy:hover, .btn:hover {
  filter: brightness(1.08) drop-shadow(0 0 8px var(--glow));
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 16px var(--black-shadow);
}

/* 🎨 Button Variaties */
.fc-btn-primary, .btn-primary, .button-fancy.primary {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  color: #fff;
}
.fc-btn-primary:hover, .btn-primary:hover, .button-fancy.primary:hover {
  background: linear-gradient(90deg, var(--accent), var(--primary));
}

.fc-btn-secondary, .btn-secondary, .button-fancy.secondary {
  background: linear-gradient(90deg, var(--secondary), var(--gold));
  color: #333;
}
.fc-btn-secondary:hover, .btn-secondary:hover, .button-fancy.secondary:hover {
  background: linear-gradient(90deg, var(--gold), var(--secondary));
}

.fc-btn-success, .btn-success, .button-fancy.success {
  background: linear-gradient(90deg, var(--success), var(--success-hover));
  color: #fff;
}
.fc-btn-success:hover, .btn-success:hover, .button-fancy.success:hover {
  background: linear-gradient(90deg, var(--success-hover), var(--success));
}

.fc-btn-danger, .btn-danger, .button-fancy.danger {
  background: linear-gradient(90deg, var(--danger), var(--danger-hover));
  color: #fff;
}
.fc-btn-danger:hover, .btn-danger:hover, .button-fancy.danger:hover {
  background: linear-gradient(90deg, var(--danger-hover), var(--danger));
}

.fc-btn-warning, .btn-warning, .button-fancy.warning {
  background: linear-gradient(90deg, var(--orange), var(--darkorange));
  color: #fff;
}
.fc-btn-warning:hover, .btn-warning:hover, .button-fancy.warning:hover {
  background: linear-gradient(90deg, var(--darkorange), var(--orange));
}

.fc-btn-info, .btn-info, .button-fancy.info {
  background: linear-gradient(90deg, var(--info), var(--blue-body));
  color: #fff;
}
.fc-btn-info:hover, .btn-info:hover, .button-fancy.info:hover {
  background: linear-gradient(90deg, var(--blue-body), var(--info));
}

/* 🕶️ Disabled state */
.fc-btn:disabled, .btn:disabled, .button-fancy:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.3);
  box-shadow: none;
}

/* 🟦 Extra: Outlined buttons */
.fc-btn-outline, .btn-outline, .button-fancy.outline {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}
.fc-btn-outline:hover, .btn-outline:hover, .button-fancy.outline:hover {
  background: var(--primary);
  color: #fff;
}

/* 🟣 Shadow & Glow */
.fc-btn-glow, .button-fancy.glow {
  box-shadow: 0 0 12px 2px var(--glow);
}

/* 🟡 Kleine variant */
.fc-btn-sm, .btn-sm, .button-fancy.sm {
  padding: 0.3em 1em;
  font-size: 0.95em;
}

/* 🟢 Grote variant */
.fc-btn-lg, .btn-lg, .button-fancy.lg {
  padding: 0.9em 2.2em;
  font-size: 1.2em;
}

/* 🟠 Icon button */
.fc-btn-icon, .button-fancy.icon {
  padding: 0.5em 0.7em;
  border-radius: 50%;
  font-size: 1.3em;
  background: var(--main-bg);
  color: var(--accent);
  border: 2px solid var(--accent);
}
.fc-btn-icon:hover, .button-fancy.icon:hover {
  background: var(--accent);
  color: #fff;
}

/* 🎉 Animatie bij klik */
.fc-btn:active, .btn:active, .button-fancy:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px var(--black-shadow);
}

/* 🌈 Tab buttons */
.tab-btn {
  background: var(--light);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  box-shadow: 0 1px 6px var(--black-shadow);
}
.tab-btn.fc-btn-info {
  color: var(--info);
  border-color: var(--info);
}
.tab-btn.fc-btn-secondary {
  color: var(--secondary);
  border-color: var(--secondary);
}
.tab-btn:hover, .tab-btn:focus {
  filter: brightness(1.08) drop-shadow(0 0 8px var(--glow));
  background: var(--button-gradient);
  color: #fff;
  border-color: var(--accent);
}

.fc-btn-truncate {
  display: inline-block;
  width: auto;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.button-back {
  font-size: 1.2em;
}
.icon-back {
  color: var(--main-fg);
  background: var(--primary);
  border-radius: 50%;
  padding: 0.18em 0.38em;
  margin-right: 0.4em;
  box-shadow: 0 1px 6px var(--glow);
  vertical-align: middle;
}

.button-reload {
  font-size: 1.4em;
  background: var(--warning);
  border-radius: 50%;
  padding: 0.18em 0.38em;
  box-shadow: 0 2px 10px var(--glow);
  border: 2px solid var(--darkorange);
  transition: background 0.2s, box-shadow 0.2s, border 0.2s;
}
.button-reload:hover, .button-reload:focus {
  background: var(--orange);
  box-shadow: 0 4px 16px var(--glow);
  border-color: var(--orange);
}
.icon-reload {
  color: var(--main-fg);
  background: transparent;
  border-radius: 50%;
  padding: 0.18em 0.38em;
  vertical-align: middle;
  font-size: 1.1em;
  transition: color 0.2s;
}
.button-reload:hover .icon-reload {
  color: var(--gold);
}

.progress-hangman {
  height: 100%;
  min-width: 32px;
  min-height: 220px;
  max-height: 520px;
}
.progress-bar-hangman {
  border-radius: 0 0 1em 1em;
  box-shadow: 0 2px 12px var(--glow);
  transition: height 0.5s cubic-bezier(.4,2,.6,1);
  min-height: 8px;
}
.progress-hangman-label {
  text-shadow: 0 1px 6px var(--black-shadow);
  letter-spacing: 0.04em;
}

.btn-guess {
  font-size: 1.1em;
  min-width: 120px;
  background: var(--blue-body);
  color: var(--main-fg);
  border-radius: 0.7em;
  box-shadow: 0 2px 8px var(--black-shadow);
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
  letter-spacing: 0.03em;
  margin-bottom: 0.5em;
}
.btn-guess.fc-btn-outline {
  background: transparent;
  color: var(--info);
  border: 2px solid var(--info);
}
.btn-guess:hover, .btn-guess:focus {
  background: var(--info);
  color: #fff;
  box-shadow: 0 4px 16px var(--glow);
}
.guess-letter {
  color: var(--accent);
  background: var(--light);
  border-radius: 0.5em;
  padding: 0.1em 0.5em;
  font-weight: 700;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 1.1em;
  box-shadow: 0 1px 4px var(--black-shadow);
  margin-right: 0.5em;
}
.guess-letter-badge {
  background: var(--accent);
  color: #fff;
  border-radius: 1.2em;
  padding: 0.18em 0.7em 0.18em 0.55em;
  font-weight: 700;
  font-size: 1.15em;
  box-shadow: 0 2px 8px var(--black-shadow);
  margin-right: 0.5em;
  min-width: 2.1em;
  min-height: 2.1em;
  line-height: 1.1;
  letter-spacing: 0.04em;
  border: 2px solid var(--main-bg);
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.guess-letter-text {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.guess-letter-paren {
  font-size: 0.95em;
  opacity: 0.7;
  margin-left: 0.1em;
}

.btn-guess-group {
  display: flex;
  align-items: stretch;
  min-width: 140px;
  max-width: 450px;
  box-shadow: 0 2px 8px var(--black-shadow);
  border-radius: 0.7em;
  overflow: hidden;
  margin-bottom: 0.5em;
  padding: 0;
}
.guess-letter-group {
  background: var(--accent);
  color: #fff;
  border-radius: 0.7em 0 0 0.7em;
  font-weight: 700;
  font-size: 1.1em;
  padding: 0.18em 0.7em;
  min-width: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  letter-spacing: 0.04em;
  border-right: 2px solid var(--main-bg);
}
.guess-word-content {
  display: flex;
  align-items: center;
  padding-left: 0.5em;
  flex: 1 1 0%;
}

.btn-guess-group.fc-btn-info:hover, .btn-guess-group.fc-btn-info:focus, .btn-guess-group.fc-btn-outline:hover, .btn-guess-group.fc-btn-outline:focus {
  background: linear-gradient(90deg, var(--info), var(--accent));
  color: #fff;
  box-shadow: 0 4px 16px var(--glow);
  border-color: var(--info);
}
.btn-guess-group:hover .guess-letter-group, .btn-guess-group:focus .guess-letter-group {
  background: var(--info);
  color: #fff;
  border-right: 2px solid var(--accent);
}