/* ============================================================
   VERIXID — VERIFY PAGE CSS
   Tambahkan ke stylesheet utama kamu
   ============================================================ */

/* ─── VERIFY BOX ─────────────────────────────────────────── */
.verify-box {
  display        : flex;
  flex-direction : column;
  gap            : 1.25rem;
  width          : 100%;
  max-width      : 520px;
  margin         : 0 auto;
}

/* ─── FIELD GROUP ────────────────────────────────────────── */
.field-group {
  display        : flex;
  flex-direction : column;
  gap            : 0.375rem;
}

.field-label {
  font-size   : 0.8125rem;
  font-weight : 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color       : rgb(74, 74, 74);
}

.field-required {
  color        : #f87171;
  margin-left  : 2px;
}

.field-optional {
  font-weight  : 400;
  font-size    : 0.75rem;
  color        : var(--color-text-muted, #666);
  margin-left  : 4px;
  text-transform: none;
  letter-spacing: 0;
}

.field-input {
  width            : 100%;
  padding          : 0.75rem 1rem;
  background       : #fff;
  border           : 2px dashed var(--slate-200);
  border-radius    : 8px;
  color            : #171717;
  font-size        : 0.9375rem;
  outline          : none;
  transition       : border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing       : border-box;
}

.field-input::placeholder {
  color  : var(--color-text-muted, #444);
}

.field-input:focus {
  border-color : var(--blue-600);
  box-shadow   : 0 0 0 3px rgba(74, 222, 128, 0.08);
}

.field-input--mono {
  font-family  : 'JetBrains Mono', 'Fira Code', monospace;
  font-size    : 0.8125rem;
  letter-spacing: 0.03em;
}

.field-hint {
  font-size : 0.75rem;
  color     : var(--color-text-muted, #555);
  margin    : 0;
}

/* ─── VERIFY BUTTON ──────────────────────────────────────── */
.btn-verify {
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.5rem;
  width           : 100%;
  padding         : 0.875rem 1.5rem;
  background      : #0067b8;
  color           : #fff;
  font-size       : 0.9375rem;
  font-weight     : 700;
  letter-spacing  : 0.04em;
  text-transform  : uppercase;
  border          : none;
  border-radius   : 8px;
  cursor          : pointer;
  transition      : opacity 0.15s ease, transform 0.1s ease;
}

.btn-verify:hover:not(:disabled) {
  opacity   : 0.88;
  transform : translateY(-1px);
}

.btn-verify:active:not(:disabled) {
  transform : translateY(0);
}

.btn-verify:disabled {
  opacity : 0.5;
  cursor  : not-allowed;
}

/* ─── RESULT CARD ────────────────────────────────────────── */
.verify-result {
  width     : 100%;
  max-width : 520px;
  margin    : 1.5rem auto 0;
}

.result-card {
  background    : #fff;
  border        : 1px solid rgb(182, 182, 182);
  border-radius : 12px;
  padding       : 1.5rem;
  display       : flex;
  flex-direction: column;
  gap           : 0.875rem;
}

.result-card--empty {
  text-align : center;
  padding    : 2.5rem 1.5rem;
}

.result-card--error {
  border-color : rgba(248, 113, 113, 0.3);
  background   : rgba(248, 113, 113, 0.05);
  color        : #f87171;
  padding      : 1rem 1.25rem;
  font-size    : 0.9rem;
}

/* ─── BADGES ─────────────────────────────────────────────── */
.result-badges {
  display   : flex;
  flex-wrap : wrap;
  gap       : 0.5rem;
  margin-bottom: 0.25rem;
}

.badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 0.25rem;
  font-size     : 0.75rem;
  font-weight   : 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding       : 0.25rem 0.625rem;
  border-radius : 999px;
  border        : 1px solid transparent;
}

.badge--active {
  color        : #4ade80;
  background   : rgba(74, 222, 128, 0.08);
  border-color : rgba(74, 222, 128, 0.2);
}

.badge--expired {
  color        : #f87171;
  background   : rgba(248, 113, 113, 0.08);
  border-color : rgba(248, 113, 113, 0.2);
}

.badge--unknown {
  color        : #a3a3a3;
  background   : rgba(163, 163, 163, 0.08);
  border-color : rgba(163, 163, 163, 0.2);
}

.badge--owner {
  color        : #34d399;
  background   : rgba(52, 211, 153, 0.08);
  border-color : rgba(52, 211, 153, 0.25);
}

.badge--invalid {
  color        : #fb923c;
  background   : rgba(251, 146, 60, 0.08);
  border-color : rgba(251, 146, 60, 0.2);
}

/* ─── RESULT ROWS ────────────────────────────────────────── */
.result-row {
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
  gap            : 1rem;
  padding        : 0.5rem 0;
  border-bottom  : 1px solid rgb(182, 182, 182));
  font-size      : 0.875rem;
}

.result-row:last-of-type {
  border-bottom : none;
}

.result-row--hash {
  flex-direction : column;
  align-items    : flex-start;
  gap            : 0.5rem;
}

.result-key {
  color       : var(--color-text-secondary, #666);
  font-size   : 0.75rem;
  font-weight : 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space : nowrap;
  flex-shrink : 0;
}

.result-val {
  color      : #171717;
  text-align : right;
  word-break : break-all;
}

/* ─── HASH DISPLAY ───────────────────────────────────────── */
.hash-output {
  display      : block;
  font-family  : 'JetBrains Mono', 'Fira Code', monospace;
  font-size    : 0.775rem;
  letter-spacing: 0.03em;
  line-height  : 1.8;
  color        : var(--color-text, #e0e0e0);
  word-break   : break-all;
  text-align   : left;
}

.hash-line {
  display : block;
  color   : #171717;
}

.hash-preview {
  font-family  : 'JetBrains Mono', 'Fira Code', monospace;
  font-size    : 0.8rem;
  color        : #171717;
  letter-spacing: 0.03em;
}

/* ─── NOTICES ────────────────────────────────────────────── */
.result-notice {
  font-size     : 0.8125rem;
  padding       : 0.625rem 0.875rem;
  border-radius : 6px;
  line-height   : 1.5;
}

.result-notice--warn {
  color        : #fbbf24;
  background   : rgba(251, 191, 36, 0.07);
  border       : 1px solid rgba(251, 191, 36, 0.2);
}

.result-notice--warn a {
  color           : #fbbf24;
  text-decoration : underline;
}

.result-notice--error {
  color      : #f87171;
  background : rgba(248, 113, 113, 0.07);
  border     : 1px solid rgba(248, 113, 113, 0.2);
}

/* ─── NOT FOUND ──────────────────────────────────────────── */
.not-found-icon {
  font-size     : 2rem;
  color         : var(--color-text-muted, #444);
  margin        : 0 0 0.5rem;
  line-height   : 1;
}

.not-found-title {
  font-size   : 1rem;
  font-weight : 600;
  color       : var(--color-text, #e0e0e0);
  margin      : 0 0 0.375rem;
}

.not-found-hint {
  font-size : 0.8125rem;
  color     : var(--color-text-muted, #555);
  margin    : 0;
}

.not-found-hint code {
  font-family  : 'JetBrains Mono', 'Fira Code', monospace;
  font-size    : 0.775rem;
  color        : rgb(74, 74, 74);
  background   : var(--color-surface-alt, #1a1a1a);
  padding      : 0.1em 0.4em;
  border-radius: 4px;
}

/* ─── SHARE LINK ─────────────────────────────────────────── */
.result-verify-link {
  margin-top : 0.25rem;
  text-align : center;
}

.link-share {
  font-size       : 0.8125rem;
  color           : var(--color-text-muted, #555);
  text-decoration : none;
  transition      : color 0.15s ease;
}

.link-share:hover {
  color : var(--color-accent, #4ade80);
}

/* ─── ANIMATE FADE IN ────────────────────────────────────── */
.animate-fade-in {
  animation : fadeIn 0.25s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}