/* WZPassword - inline secret block styles.
 *
 * Theme detection happens in JS (`wzsecret.js`): it reads the page's
 * effective theme on load and writes `data-wz-theme="dark"|"light"` onto
 * every `.wz-secret-block`. CSS only branches on that single attribute,
 * which keeps the rules predictable and lets the explicit theme choice
 * always win over `prefers-color-scheme`.
 */

.wz-secret-block {
  --wz-accent: #4f46e5;
  --wz-accent-hover: #4338ca;
  --wz-accent-soft: rgba(99, 102, 241, 0.08);
  --wz-accent-border: rgba(99, 102, 241, 0.45);
  --wz-success-border: rgba(16, 185, 129, 0.45);
  --wz-success-soft: rgba(16, 185, 129, 0.08);
  --wz-input-bg: #ffffff;
  --wz-input-border: #d1d5db;
  --wz-input-text: #111827;
  --wz-text: inherit;
  --wz-muted: #6b7280;
  --wz-error: #dc2626;
  --wz-error-soft: rgba(220, 38, 38, 0.16);
  --wz-toggle-hover-bg: rgba(15, 23, 42, 0.05);

  margin: 1.25em 0;
  padding: 14px 16px;
  border: 1px dashed var(--wz-accent-border);
  border-radius: 10px;
  background: var(--wz-accent-soft);
  color: var(--wz-text);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wz-secret-block[data-wz-theme="dark"] {
  --wz-accent: #818cf8;
  --wz-accent-hover: #a5b4fc;
  --wz-accent-soft: rgba(129, 140, 248, 0.16);
  --wz-accent-border: rgba(129, 140, 248, 0.45);
  --wz-success-border: rgba(110, 231, 183, 0.45);
  --wz-success-soft: rgba(110, 231, 183, 0.12);
  --wz-input-bg: #1f2937;
  --wz-input-border: #374151;
  --wz-input-text: #e5e7eb;
  --wz-muted: #9ca3af;
  --wz-error: #fca5a5;
  --wz-error-soft: rgba(220, 38, 38, 0.32);
  --wz-toggle-hover-bg: rgba(255, 255, 255, 0.08);
}

.wz-secret-block--unlocked {
  border: 1px solid var(--wz-success-border);
  background: var(--wz-success-soft);
}

.wz-secret-block .wz-secret-placeholder {
  margin: 0;
  color: var(--wz-muted);
  font-size: 14px;
}

.wz-secret-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.wz-secret-hint {
  flex: 1 1 100%;
  margin: 0 0 2px;
  color: var(--wz-muted);
  font-size: 13px;
}

.wz-secret-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 220px;
  min-width: 0;
}

.wz-secret-input-wrap input[type="password"],
.wz-secret-input-wrap input[type="text"] {
  flex: 1;
  width: 100%;
  padding: 9px 40px 9px 12px;
  border: 1px solid var(--wz-input-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--wz-input-bg);
  color: var(--wz-input-text);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wz-secret-input-wrap input[type="password"]:focus,
.wz-secret-input-wrap input[type="text"]:focus {
  border-color: var(--wz-accent);
  box-shadow: 0 0 0 3px var(--wz-accent-soft);
}

.wz-secret-input--error {
  border-color: var(--wz-error) !important;
  box-shadow: 0 0 0 3px var(--wz-error-soft) !important;
}

.wz-secret-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--wz-muted);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.wz-secret-toggle:hover {
  color: var(--wz-input-text);
  background: var(--wz-toggle-hover-bg);
}

.wz-secret-toggle svg {
  width: 16px;
  height: 16px;
}

.wz-secret-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.wz-secret-submit {
  padding: 9px 16px;
  background: var(--wz-accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.wz-secret-submit:hover:not([disabled]) {
  background: var(--wz-accent-hover);
}

.wz-secret-submit[disabled] {
  cursor: not-allowed;
  opacity: 0.65;
}

.wz-secret-err[hidden] {
  display: none !important;
}

.wz-secret-err {
  flex: 1 1 100%;
  display: inline-block;
  color: var(--wz-error);
  font-size: 13px;
}

@media (max-width: 480px) {
  .wz-secret-input-wrap,
  .wz-secret-actions,
  .wz-secret-submit {
    flex: 1 1 100%;
  }
  .wz-secret-submit {
    width: 100%;
  }
}