/**
 * ==================================================
 * REPORT TRIGGER
 * ==================================================
 */

.ik-report-trigger {
  display: flex;
  justify-content: center;

  margin-top: var(--ik-space-xs);
}

.ik-report-trigger__button {
  display: inline-flex;
  align-items: center;
  gap: var(--ik-space-xs);

  padding: var(--ik-space-xs) var(--ik-space-sm);

  background: transparent;
  border: none;

  color: var(--ik-color-muted);

  font-size: var(--ik-font-size-xs);

  cursor: pointer;

  transition: var(--ik-transition);
}

.ik-report-trigger__button:hover {
  color: var(--ik-color-danger);
}

.ik-report-trigger__icon {
  width: 15px;
  height: 15px;

  flex-shrink: 0;
}

/**
 * ==================================================
 * REPORT MODAL
 * ==================================================
 */

.ik-report-modal {
  display: none;

  position: fixed;
  inset: 0;
  z-index: 100000;

  align-items: center;
  justify-content: center;

  padding: var(--ik-space-md);
}

.ik-report-modal.is-open {
  display: flex;
}

.ik-report-modal__overlay {
  position: absolute;
  inset: 0;

  background: rgba(15, 23, 42, 0.55);
}

.ik-report-modal__dialog {
  position: relative;

  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - var(--ik-space-xl));

  overflow-y: auto;

  padding: var(--ik-space-lg);

  background: var(--ik-color-card);
  border-radius: var(--ik-radius-md);

  box-shadow: var(--ik-shadow-lg);
}

.ik-report-modal__close {
  position: absolute;
  top: var(--ik-space-md);
  right: var(--ik-space-md);

  width: 32px;
  height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;

  color: var(--ik-color-muted);

  font-size: 24px;
  line-height: 1;

  cursor: pointer;
}

.ik-report-modal__close:hover {
  color: var(--ik-color-heading);
}

.ik-report-modal__title {
  margin: 0 0 var(--ik-space-xs);
  padding-right: var(--ik-space-xl);

  color: var(--ik-color-heading);

  font-size: var(--ik-font-size-lg);
  font-weight: var(--ik-font-weight-bold);
}

.ik-report-modal__job-title {
  margin: 0 0 var(--ik-space-lg);

  color: var(--ik-color-muted);
  font-size: var(--ik-font-size-xs);
}

.ik-report-modal__textarea {
  min-height: 96px;
  padding: var(--ik-space-sm) var(--ik-space-md);

  resize: vertical;
}

.ik-report-modal__feedback {
  margin: 0;

  font-size: var(--ik-font-size-xs);
}

.ik-report-modal__feedback:empty {
  display: none;
}

.ik-report-modal__feedback--success {
  color: var(--ik-color-success);
}

.ik-report-modal__feedback--error {
  color: var(--ik-color-danger);
}

/* Honeypot — kosong dan tersembunyi untuk pengguna asli, tapi tetap
   ada di DOM/tab order netral supaya bot pengisi form otomatis kepancing. */
.ik-report-modal__honeypot {
  position: absolute !important;

  width: 1px;
  height: 1px;

  overflow: hidden;

  clip: rect(0 0 0 0);

  white-space: nowrap;
}