/* ============================================================
   SOEP WHOIS — Frontend stylesheet
   Selaras dengan theme "Supriyanto Personal" (dark + crimson),
   tapi tetap rapi di theme lain berkat fallback.
   ============================================================ */

/* Local fallback variables — dipakai kalau theme tidak menyediakan
   variabel yang sama. Kalau theme menyediakan --color-bg / --color-accent
   dst., variabel itu yang akan dipakai (root level lebih kuat). */
.swhois-wrap {
  --swhois-bg:        var(--color-bg3, #1a1a1a);
  --swhois-surface:   var(--color-surface, #161616);
  --swhois-border:    var(--color-border, rgba(255,255,255,0.08));
  --swhois-text:      var(--color-text, #c8c8c8);
  --swhois-primary:   var(--color-primary, #ffffff);
  --swhois-muted:     var(--color-muted, #666666);
  --swhois-accent:    var(--color-accent, #dc2626);
  --swhois-accent2:   var(--color-accent2, #ef4444);
  --swhois-radius:    var(--radius, 10px);
  --swhois-radius-lg: var(--radius-lg, 16px);
  --swhois-shadow:    var(--shadow, 0 4px 24px rgba(0,0,0,0.4));
  --swhois-font:      var(--font-body, 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif);

  font-family: var(--swhois-font);
  color: var(--swhois-text);
  max-width: 720px;
  margin: 0 auto;
}

/* ── Card container ─────────────────────────────────────────── */
.swhois-card {
  background: var(--swhois-surface);
  border: 1px solid var(--swhois-border);
  border-radius: var(--swhois-radius-lg);
  padding: 28px;
  box-shadow: var(--swhois-shadow);
  position: relative;
  overflow: hidden;
}
.swhois-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse at 90% 0%,
    rgba(220,38,38,0.08) 0%,
    transparent 55%
  );
  pointer-events: none;
}
.swhois-card-inner { position: relative; z-index: 1; }

.swhois-card-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--swhois-accent);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.swhois-card-title::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--swhois-accent);
  display: inline-block;
}
.swhois-card-subtitle {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--swhois-primary);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}

/* ── Form ──────────────────────────────────────────────────── */
#swhois_form { width: 100%; }
#swhois_form form#swhois_check {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
#swhois_form legend {
  display: block;
  width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--swhois-muted);
  margin-bottom: 4px;
  padding: 0;
}

/* prefix www. (kalau diaktifkan di settings) */
#swhois_form form#swhois_check {
  align-items: center;
}
.swhois-wrap .swhois-www-prefix {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 12px;
  background: var(--swhois-bg);
  border: 1px solid var(--swhois-border);
  border-radius: 8px;
  color: var(--swhois-muted);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Input domain */
.swhois-wrap input#swhois_domain {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--swhois-bg);
  border: 1px solid var(--swhois-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: var(--swhois-font);
  font-size: 0.95rem;
  color: var(--swhois-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  height: 46px;
  width: 100%;
  box-sizing: border-box;
}
.swhois-wrap input#swhois_domain::placeholder { color: var(--swhois-muted); }
.swhois-wrap input#swhois_domain:focus {
  outline: none;
  border-color: var(--swhois-accent);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.15);
}

/* Select TLD */
.swhois-wrap select#swhois_tld {
  flex: 0 0 auto;
  min-width: 130px;
  background: var(--swhois-bg);
  border: 1px solid var(--swhois-border);
  border-radius: 8px;
  padding: 12px 36px 12px 14px;
  font-family: var(--swhois-font);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--swhois-primary);
  height: 46px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;

  /* custom arrow (replace default ugly UA arrow) */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a8b3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;
}
.swhois-wrap select#swhois_tld:focus {
  outline: none;
  border-color: var(--swhois-accent);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.15);
}
.swhois-wrap select#swhois_tld option {
  background: #161616;
  color: var(--swhois-primary);
}

/* Submit button — match .btn-primary di theme */
.swhois-wrap input#swhois_submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--swhois-accent);
  color: #fff;
  font-family: var(--swhois-font);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  padding: 0 26px;
  height: 46px;
  border-radius: 8px;
  border: 1px solid var(--swhois-accent);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
}
.swhois-wrap input#swhois_submit:hover {
  background: var(--swhois-accent2);
  border-color: var(--swhois-accent2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(220,38,38,0.35);
}
.swhois-wrap input#swhois_submit:active {
  transform: translateY(0);
}
.swhois-wrap input#swhois_submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.swhois-wrap input#swhois_submit:focus-visible {
  outline: 2px solid var(--swhois-accent2);
  outline-offset: 2px;
}

/* Optional "www." prefix label (kalau settings show-www aktif).
   Plugin men-output text "www." di luar input — kita rapikan dengan
   styling pada teks node milik form (selector :first-child :not(input)). */
.swhois-wrap form#swhois_check {
  position: relative;
}

/* ── Loading state ─────────────────────────────────────────── */
#swhois_work {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--swhois-radius);
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.15);
  color: var(--swhois-text);
  font-size: 0.9rem;
  align-items: center;
  gap: 10px;
}
/* Hide the legacy WP spinner gif — we use a CSS spinner instead */
#swhois_work img {
  display: none;
}
/* CSS spinner via ::before — only render when block is visible.
   jQuery.slideToggle akan set display:none/block/etc inline; selector
   :not([style*="display: none"]) memastikan spinner tidak ikut muncul saat
   element disembunyikan. */
#swhois_work:not([style*="display: none"]):not([style*="display:none"])::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 16px; height: 16px;
  margin-right: 4px;
  border-radius: 50%;
  border: 2px solid rgba(220,38,38,0.25);
  border-top-color: var(--swhois-accent);
  animation: swhois-spin 0.7s linear infinite;
}
@keyframes swhois-spin {
  to { transform: rotate(360deg); }
}

/* ── Result panel ──────────────────────────────────────────── */
#swhois_result { margin-top: 22px; }
#swhois_result:empty { margin-top: 0; }

/* The plugin emits the status as <p>...</p>. We style that as a banner. */
#swhois_result > p:first-child {
  margin: 0 0 14px;
  padding: 14px 18px;
  border-radius: var(--swhois-radius);
  background: var(--swhois-bg);
  border-left: 3px solid var(--swhois-accent);
  color: var(--swhois-primary);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Raw WHOIS output (when "Show whois output" is enabled in settings).
   Plugin defaults to wrapping the output in <pre class="swhois-output">. */
#swhois_result .swhois-output,
#swhois_result > pre {
  display: block;
  margin: 0;
  padding: 16px 18px;
  background: #0e0e0e;
  border: 1px solid var(--swhois-border);
  border-radius: var(--swhois-radius);
  color: var(--swhois-text);
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 420px;
  overflow-y: auto;
  text-align: left;
}

/* Scrollbar styling for the WHOIS output (webkit) */
#swhois_result .swhois-output::-webkit-scrollbar,
#swhois_result > pre::-webkit-scrollbar {
  width: 8px; height: 8px;
}
#swhois_result .swhois-output::-webkit-scrollbar-track,
#swhois_result > pre::-webkit-scrollbar-track {
  background: transparent;
}
#swhois_result .swhois-output::-webkit-scrollbar-thumb,
#swhois_result > pre::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
}
#swhois_result .swhois-output::-webkit-scrollbar-thumb:hover,
#swhois_result > pre::-webkit-scrollbar-thumb:hover {
  background: rgba(220,38,38,0.4);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 600px) {
  .swhois-card { padding: 22px 18px; }
  .swhois-card-subtitle { font-size: 1.1rem; }

  /* On mobile: stack the form vertically */
  #swhois_form form#swhois_check {
    flex-direction: column;
    gap: 8px;
  }
  .swhois-wrap input#swhois_domain,
  .swhois-wrap select#swhois_tld,
  .swhois-wrap input#swhois_submit {
    width: 100%;
    flex: 1 1 auto;
  }
  .swhois-wrap select#swhois_tld { min-width: 0; }
}

/* ── Light theme fallback ──────────────────────────────────── */
/* Kalau plugin dipakai di theme yang TIDAK punya --color-bg dkk,
   warna fallback di atas akan terlihat "dark" di latar putih. Detect
   menggunakan @media (prefers-color-scheme: light) untuk halaman yang
   secara eksplisit minta light mode. */
@media (prefers-color-scheme: light) {
  /* Hanya berlaku jika theme TIDAK men-define --color-bg sendiri.
     Kalau theme men-define-nya (seperti supriyanto-theme), variabel
     theme yang menang dan blok ini tidak relevan. */
  .swhois-wrap:not([data-theme]) {
    --swhois-bg:      #f7f7f8;
    --swhois-surface: #ffffff;
    --swhois-border:  rgba(0,0,0,0.08);
    --swhois-text:    #333;
    --swhois-primary: #111;
    --swhois-muted:   #888;
  }
  .swhois-wrap:not([data-theme]) select#swhois_tld option { background: #fff; color: #111; }
  .swhois-wrap:not([data-theme]) #swhois_result > p:first-child + * {
    background: #fafafa;
    color: #333;
  }
}