/* === Request a song =========================================================
   One question to start, everything else behind a toggle. A wall of four
   labelled inputs is what stops people bothering.
   ========================================================================== */

.cw-req { position: relative; }

/* --- the one question ---------------------------------------------------- */

.cw-req__ask {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .35rem .35rem .8rem;
  border: 1px solid var(--icrt-line, #e3e5ea);
  border-radius: 999px;
  background: var(--icrt-paper, #fff);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.cw-req__ask:focus-within {
  border-color: var(--icrt-accent, #1160d4);
  box-shadow: 0 0 0 4px rgba(17, 96, 212, .14);
}

.cw-req__icon {
  flex: 0 0 auto;
  display: flex;
  color: var(--icrt-accent, #1160d4);
}

.cw-req__icon svg { width: 18px; height: 18px; }

.cw-req__song {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: .5rem 0;
  font: inherit;
  font-size: .95rem;
  color: var(--icrt-ink, #14161a);
}

.cw-req__song:focus { outline: none; }

.cw-req button.cw-req__go {
  flex: 0 0 auto;
  min-height: 0;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  /* border-box and a padding reset, or the theme's button padding turns this
     circle into an ellipse. */
  box-sizing: border-box;
  padding: 0;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--icrt-accent, #1160d4);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease;
}

.cw-req button.cw-req__go:hover:not(:disabled) { background: var(--icrt-accent-dark, #0c47a0); transform: scale(1.06); }
.cw-req button.cw-req__go:disabled { opacity: .55; cursor: default; }
.cw-req button.cw-req__go svg { width: 17px; height: 17px; }

/* --- the rest, on request ------------------------------------------------ */

/* The theme styles every <button> as a solid black pill in uppercase, and a
   plain class selector loses to it — hence the element-qualified selectors and
   the explicit resets. Same for the "request another" link below. */
.cw-req button.cw-req__more,
.cw-req button.cw-req__again {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: .7rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-image: none;
  box-shadow: none;
  color: var(--icrt-accent, #1160d4);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  text-align: left;
  width: auto;
  min-height: 0;
  cursor: pointer;
}

.cw-req button.cw-req__more:hover,
.cw-req button.cw-req__again:hover {
  background: none;
  color: var(--icrt-accent-dark, #0c47a0);
  text-decoration: underline;
}

.cw-req__more-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: rgba(17, 96, 212, .12);
  font-size: .8rem;
  line-height: 1;
  transition: transform .15s ease;
}

.cw-req.is-open .cw-req__more-plus { transform: rotate(45deg); }

.cw-req__details { display: grid; gap: .55rem; margin-top: .75rem; }
.cw-req__field { margin: 0; display: grid; gap: .2rem; }

.cw-req__input {
  width: 100%;
  box-sizing: border-box;
  padding: .55rem .8rem;
  border: 1px solid var(--icrt-line, #e3e5ea);
  border-radius: .6rem;
  background: var(--icrt-paper, #fff);
  color: var(--icrt-ink, #14161a);
  font: inherit;
  font-size: .9rem;
}

.cw-req__input:focus {
  outline: none;
  border-color: var(--icrt-accent, #1160d4);
  box-shadow: 0 0 0 3px rgba(17, 96, 212, .14);
}

.cw-req__area { resize: vertical; min-height: 2.7rem; }
.cw-req__hint { font-size: .72rem; color: var(--icrt-muted, #6b7280); }

/* Off-screen rather than display:none — a bot that skips hidden inputs would
   walk straight past the trap. */
.cw-req__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cw-req__status { margin: .6rem 0 0; font-size: .82rem; min-height: 1.1rem; }
.cw-req__status[data-state="error"] { color: #b91c1c; }
.cw-req__status[data-state="busy"]  { color: var(--icrt-muted, #6b7280); }

/* --- sent ---------------------------------------------------------------- */

.cw-req__done { text-align: center; padding: .5rem 0 .25rem; }

.cw-req__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(21, 128, 61, .12);
  color: #15803d;
  margin-bottom: .6rem;
}

.cw-req__tick svg { width: 20px; height: 20px; }

.cw-req__done-title { margin: 0; font-weight: 700; color: var(--icrt-ink, #14161a); }

.cw-req__done-body {
  margin: .3rem 0 .8rem;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--icrt-ink-soft, #2a2e35);
}

.cw-req button.cw-req__again { margin-top: 0; }