/* wwp-career-slot.css */

/* ========== Base ========== */
.wwp-career-slot {
  /*--wwp-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";*/
  --wwp-text: #000000;
  --wwp-muted: rgba(0, 0, 0, 0.72);
  --wwp-border: rgba(0, 0, 0, 0.14);
  --wwp-shadow: 0 16px 50px rgba(0, 0, 0, 0.10);

  --wwp-accent: #e5a100;
  --wwp-accent-2: #928f7a;

  /* Slotmachine-Casing */
  --wwp-machine-bg: #f7f4ed;
  --wwp-machine-border: rgba(0, 0, 0, 0.16);
  --wwp-machine-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);

  /* Reel Window */
  --wwp-window-bg: #ffffff;
  --wwp-window-border: rgba(0, 0, 0, 0.18);
  --wwp-window-inset: inset 0 12px 26px rgba(0, 0, 0, 0.08);

  /* Lever colors */
  --wwp-lever-orange: #e5a100;
  --wwp-lever-orange-2: #c0beae;

  font-family: var(--wwp-font);
  color: var(--wwp-text);
}

.wwp-career-slot, .wwp-career-slot * { box-sizing: border-box; }

.wwp-career-slot__inner {
  border-radius: 22px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background:
    radial-gradient(900px 450px at 15% 0%, rgba(229, 161, 0, 0.12), transparent 55%),
    radial-gradient(900px 450px at 85% 10%, rgba(146, 143, 122, 0.10), transparent 60%),
    linear-gradient(180deg, #ffffff, #fcfaf6);
  box-shadow: var(--wwp-shadow);
  padding: 24px;
  overflow: hidden;
}

.wwp-career-slot__eyebrow {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--wwp-muted);
  margin-bottom: 10px;
}

.wwp-career-slot__title {
  font-size: clamp(22px, 3vw, 32px);
  margin: 0 0 10px 0;
  color: #000000;
}

.wwp-career-slot__subtitle {
  margin: 0;
  color: var(--wwp-muted);
  max-width: 75ch;
  line-height: 1.45;
}

.wwp-career-slot__controls {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: end;
}

.wwp-label {
  display: block;
  font-size: 12px;
  color: var(--wwp-muted);
  margin-bottom: 6px;
}

.wwp-select {
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--wwp-border);
  background: rgba(255,255,255,0.98);
  color: #000000;
  padding: 0 14px;
  outline: none;
}

/* ========== Machine Layout (3 reels + lever column) ========== */
.wwp-career-slot__machine {
  margin-top: 18px;
}

.wwp-machine {
  border-radius: 22px;
  border: 1px solid var(--wwp-machine-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,244,236,0.82)),
    radial-gradient(1200px 420px at 50% 0%, rgba(146,143,122,0.10), transparent 65%);
  box-shadow: var(--wwp-machine-shadow);
  padding: 16px 16px;
  position: relative;
  overflow: hidden;
}

/* More “machine” feel: inner rim + screws (pure CSS) */
.wwp-machine:before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -12px 20px rgba(0, 0, 0, 0.05);
  pointer-events: none;
}

.wwp-machine:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  pointer-events: none;
  background:
    radial-gradient(circle at 18px 18px, rgba(0, 0, 0, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 18px) 18px, rgba(0, 0, 0, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 18px calc(100% - 18px), rgba(0, 0, 0, 0.16) 0 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), rgba(0, 0, 0, 0.16) 0 2px, transparent 3px);
  opacity: 0.75;
}

.wwp-machine__reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-right: 78px; /* Platz für Hebelspalte */
}

@media (max-width: 980px) {
  .wwp-machine__reels {
    grid-template-columns: 1fr;
    padding-right: 0;
  }
  .wwp-machine__lever {
    position: static;
    height: auto;
    margin-top: 12px;
    align-items: center;
    justify-content: flex-start;
  }
}

.wwp-reel__label {
  font-size: 12px;
  color: var(--wwp-muted);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.wwp-reel__window {
  height: 74px;
  border-radius: 18px;
  border: 1px solid var(--wwp-window-border);
  background: var(--wwp-window-bg);
  box-shadow: var(--wwp-window-inset);
  position: relative;
  overflow: hidden;
}

/* Slot “glass” */
.wwp-reel__window:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.10));
  opacity: 0.35;
}

/* Center indicator */
.wwp-reel__window:after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(229,161,0,0.45), transparent);
  opacity: 0.95;
}

.wwp-reel__track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
  transform: translateY(0);
}

.wwp-reel__item {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  text-align: center;
  font-weight: 780;
  letter-spacing: 0.01em;
  color: #000000;
}

/* ========== Lever column (right) ========== */
.wwp-machine__lever {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 62px;
  height: calc(100% - 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Lever is now “mounted” – no awkward panel text */
.wwp-handle {
  width: 62px;
  height: 160px;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

/* Mount bracket */
.wwp-handle:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 44px;
  height: 110px;
  transform: translateX(-50%);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(192,190,174,0.30), rgba(146,143,122,0.12));
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    0 10px 18px rgba(0, 0, 0, 0.12);
}

/* Focus ring */
.wwp-handle:focus-visible:before {
  box-shadow:
    0 0 0 3px rgba(229,161,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.70),
    0 10px 18px rgba(0, 0, 0, 0.12);
}

/* Metal stick */
.wwp-handle__stem {
  position: absolute;
  left: 50%;
  top: 28px;
  width: 8px;
  height: 118px;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.98) 0%,
      rgba(226,223,214,0.98) 14%,
      rgba(146,143,122,0.98) 35%,
      rgba(250,250,248,0.98) 55%,
      rgba(168,164,148,0.98) 78%,
      rgba(255,255,255,0.90) 100%
    );
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -12px 18px rgba(0,0,0,0.10),
    0 10px 18px rgba(0,0,0,0.14);
}

/* Golden knob */
.wwp-handle__knob {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 28px;
  height: 28px;
  transform: translateX(-50%) translateY(0);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0.55) 12%,
      rgba(248,220,128,0.98) 34%,
      rgba(229,161,0,1) 68%,
      rgba(138,111,24,1) 100%
    );
  border: 1px solid rgba(0,0,0,0.24);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.60),
    inset 0 -12px 18px rgba(0,0,0,0.22),
    0 14px 22px rgba(0,0,0,0.22);
  transition: transform 220ms ease;
}

/* Hover hint */
.wwp-handle:hover .wwp-handle__knob {
  transform: translateX(-50%) translateY(2px);
}

/* Press feedback */
.wwp-career-slot[data-lever-press="true"] .wwp-handle__knob {
  transform: translateX(-50%) translateY(12px);
}

/* During spinning: knob stays down */
.wwp-career-slot[data-spinning="true"] .wwp-handle__knob {
  transform: translateX(-50%) translateY(42px);
}

/* Optional: small machine shake while spinning (very subtle) */
.wwp-career-slot[data-spinning="true"] .wwp-machine {
  animation: wwpMachineShake 500ms ease-in-out infinite;
}
@keyframes wwpMachineShake {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}

/* ========== Result Card ========== */
.wwp-career-slot__result {
  margin-top: 16px;
}

.wwp-card {
  border-radius: 22px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255,255,255,0.94);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
  padding: 16px;
}

.wwp-card__top {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wwp-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wwp-badge {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(192,190,174,0.18);
  color: rgba(0, 0, 0, 0.78);
}

.wwp-person {
  display: flex;
  gap: 12px;
  align-items: center;
}

.wwp-avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(229, 161, 0, 0.16), rgba(192, 190, 174, 0.22));
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #000000;
  /* erstmal ausgeblendet */
  display: none;
}

.wwp-person__name { font-weight: 800; font-size: 16px; color: #000000; }
.wwp-person__role { font-size: 12px; color: var(--wwp-muted); margin-top: 2px; display: none; }

.wwp-card__quote {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.5;
  color: #000000;
  padding: 14px;
  border-radius: 16px;
  background: rgba(192,190,174,0.14);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.wwp-card__proof {
  margin-top: 14px;
}

.wwp-proof__title {
  font-size: 12px;
  color: var(--wwp-muted);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.wwp-proof__list {
  margin: 0;
  margin-left: 1rem;
  padding-left: 18px;
  color: rgba(0, 0, 0, 0.78);
  line-height: 1.55;
}

.wwp-proof__list > li:before {
    content: '\2714';
    color: #e5a100;
    display: inline-block;
    position: absolute;
    margin: 0 0.03rem 0 -1.3rem;
    width: 1rem;
    height: 1rem;
    background: none !important;
    vertical-align: top;
}

.wwp-card__cta {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.wwp-btn {
  height: 42px;
  padding: 0 18px;
  border-radius: 0;
  border: 1px solid #e5a100;
  background: #e5a100;
  color: #ffffff !important;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.wwp-btn:hover {
  background: #cc8f00;
  border-color: #cc8f00;
  color: #ffffff;
  transform: none;
}

.wwp-btn:active {
  background: #b88100;
  border-color: #b88100;
  color: #ffffff;
  transform: none;
}

.wwp-btn--primary {
  background: #e5a100;
  border-color: #e5a100;
  color: #ffffff;
}

.wwp-btn--ghost {
  background: #e5a100;
  border-color: #e5a100;
  color: #ffffff;
}