/*
 * WLC Worker Generator - Stylesheet
 * Loaded only when [wlcr_worker_generator] shortcode is on the page.
 */

.wlcr-gen__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  width: 100%;
}

/* Form card */
.wlcr-gen__form {
  background: #ffffff;
  border: 1px solid rgba(91,79,232,0.12);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.wlcr-gen__form-heading {
  font-size: 15px;
  font-weight: 500;
  color: #1C1C22;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(91,79,232,0.08);
}

.wlcr-gen__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.wlcr-gen__label {
  font-size: 13px;
  font-weight: 500;
  color: #1C1C22;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wlcr-gen__label-hint {
  font-size: 11px;
  font-weight: 300;
  color: #000000;
  opacity: 0.45;
}

.wlcr-gen__input,
.wlcr-gen__select {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 300;
  color: #1C1C22;
  background: #ffffff;
  border: 1px solid rgba(91,79,232,0.2);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.wlcr-gen__input:focus,
.wlcr-gen__select:focus {
  border-color: #5B4FE8;
  box-shadow: 0 0 0 3px rgba(91,79,232,0.1);
}

.wlcr-gen__input::placeholder { color: rgba(0,0,0,0.3); }

.wlcr-gen__field-preview {
  font-size: 12px;
  color: #5B4FE8;
  font-family: monospace;
  min-height: 16px;
  font-weight: 400;
}

/* Language route rows */
.wlcr-gen__routes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wlcr-gen__route {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  background: rgba(91,79,232,0.03);
  border: 1px solid rgba(91,79,232,0.1);
  border-radius: 10px;
  padding: 8px 10px;
}

.wlcr-gen__route-select,
.wlcr-gen__route-prefix {
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 300;
  color: #1C1C22;
  background: #ffffff;
  border: 1px solid rgba(91,79,232,0.18);
  border-radius: 8px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.wlcr-gen__route-prefix { font-family: monospace; font-size: 12px; }

.wlcr-gen__route-select:focus,
.wlcr-gen__route-prefix:focus { border-color: #5B4FE8; }

.wlcr-gen__route-prefix::placeholder { color: rgba(0,0,0,0.3); }

.wlcr-gen__route-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(220,38,38,0.08);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #DC2626;
  flex-shrink: 0;
  transition: background 0.15s;
  padding: 0;
}

.wlcr-gen__route-remove:hover { background: rgba(220,38,38,0.18); }

/* Add language button */
.wlcr-gen__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #5B4FE8;
  background: #EEF0FD;
  border: 1px solid rgba(91,79,232,0.2);
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
  align-self: flex-start;
}

.wlcr-gen__add-btn:hover { background: #ddd8fb; }

/* Output panel */
.wlcr-gen__output {
  background: #0d0b24;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  position: sticky;
  top: 24px;
}

.wlcr-gen__output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.wlcr-gen__output-title {
  font-size: 12px;
  font-weight: 500;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wlcr-gen__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #C5C8F7;
  background: rgba(91,79,232,0.25);
  border: 1px solid rgba(91,79,232,0.4);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}

.wlcr-gen__copy-btn:hover { background: rgba(91,79,232,0.4); }
.wlcr-gen__copy-btn.is-copied {
  background: rgba(5,150,105,0.25);
  border-color: rgba(5,150,105,0.4);
  color: #6EE7B7;
}

.wlcr-gen__code {
  display: block;
  padding: 20px;
  font-size: 12px;
  line-height: 1.75;
  color: #C5C8F7;
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
  white-space: pre;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 520px;
  margin: 0;
}

.wlcr-gen__output-note {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 20px;
  font-size: 12px;
  color: #ffffff;
  font-weight: 300;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Syntax highlight tokens - applied by JS via spans inside the <pre> */
.wlcr-code-kw   { color: #C792EA; }          /* keywords: addEventListener, async, function, const, let, if, else, return, try, catch */
.wlcr-code-fn   { color: #82AAFF; }          /* function names */
.wlcr-code-str  { color: #C3E88D; }          /* strings */
.wlcr-code-cmt  { color: #546E7A; font-style: italic; } /* comments */
.wlcr-code-punc { color: #89DDFF; }          /* => . () {} */
.wlcr-code-num  { color: #F78C6C; }          /* numbers e.g. 302 */
.wlcr-code-tmpl { color: #C3E88D; }          /* template literal content */
.wlcr-code-var  { color: #EEFFFF; }          /* plain identifiers / default text */

@media (max-width: 900px) {
  .wlcr-gen__layout { grid-template-columns: 1fr; }
  .wlcr-gen__output { position: static; }
}