/* KOBDi BRN Checker — Polished UI for Twenty Twenty-Five */

.kobdi-brn-card{
  --bg:            var(--wp--preset--color--base, #ffffff);
  --surface:       color-mix(in oklab, var(--bg), black 3%);
  --surface-elev:  color-mix(in oklab, var(--bg), black 7%);
  --text:          var(--wp--preset--color--contrast, #0f172a);
  --muted:         color-mix(in oklab, var(--text), var(--bg) 55%);
  --border:        color-mix(in oklab, var(--text), var(--bg) 85%);
  --primary:       var(--wp--preset--color--primary, #2563eb);
  --accent:        var(--wp--preset--color--accent, #2563eb);
  --success:       #16a34a;
  --warning:       #b45309;
  --danger:        #dc2626;
  --radius:        14px;
  --shadow:        0 12px 30px rgba(0,0,0,.06);
  --focus:         color-mix(in oklab, var(--primary), var(--bg) 70%);

  position: relative;
  background:
    radial-gradient(900px 500px at 110% -10%, color-mix(in oklab, var(--accent), transparent 92%), transparent 60%),
    radial-gradient(600px 400px at -10% 10%, color-mix(in oklab, var(--primary), transparent 92%), transparent 50%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 2.4vw, 22px);
  color: var(--text);
}

@media (prefers-color-scheme: dark){
  .kobdi-brn-card{
    --bg:       var(--wp--preset--color--base, #0b1220);
    --surface:  color-mix(in oklab, var(--bg), white 4%);
    --surface-elev: color-mix(in oklab, var(--bg), white 8%);
    --text:     var(--wp--preset--color--contrast, #e5e7eb);
    --muted:    color-mix(in oklab, var(--text), var(--bg) 65%);
    --border:   color-mix(in oklab, var(--text), var(--bg) 78%);
    --shadow:   0 18px 46px rgba(0,0,0,.45);
    --focus:    color-mix(in oklab, var(--primary), var(--bg) 65%);
  }
}

/* Header */
.kobdi-brn-header{ margin-bottom: .6rem; }
.kobdi-brn-header .kobdi-title{ margin:0 0 .25rem 0; font-size: clamp(22px, 3.2vw, 28px); letter-spacing: -.015em; line-height: 1.2; }
.kobdi-brn-header .kobdi-desc{ margin:0; color: var(--muted); font-size: clamp(13px, 1.6vw, 15.5px); }

/* Form */
.kobdi-form{ margin-top: .8rem; }
.kobdi-label{ display:block; font-weight:600; margin-bottom:.5rem; }
.kobdi-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; }

.kobdi-input{ position:relative; flex:1 1 340px; min-width:0; max-width:100%; }
.kobdi-input input{
  width:100%; padding:14px 14px 14px 44px; border-radius:12px;
  border:1px solid var(--border); background: var(--bg); color: var(--text); font-size:16px;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.kobdi-input input::placeholder{ color: var(--muted); }
.kobdi-input input:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--focus), transparent 70%); }
.kobdi-icon{ position:absolute; left:12px; top:50%; transform: translateY(-50%); opacity:.55; font-weight:700; pointer-events:none; }

.kobdi-btn{ border:1px solid transparent; border-radius:12px; padding:12px 16px; font-weight:700; cursor:pointer; min-height:44px; transition: transform .02s, filter .15s, background-color .2s, border-color .2s; }
.kobdi-btn.primary{ background: linear-gradient(180deg, var(--primary), color-mix(in oklab, var(--primary), black 12%)); color:#fff; min-width:150px; }
.kobdi-btn.primary:hover{ filter: brightness(1.05); }
.kobdi-btn.primary:active{ transform: translateY(1px); }
.kobdi-btn.secondary{ background: var(--surface-elev); border-color: var(--border); color: var(--text); }
.kobdi-btn.tertiary{ background: transparent; border-color: var(--border); color: var(--muted); }
.kobdi-btn:focus-visible{ outline:none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--focus), transparent 70%); }

/* Inline error (no popups) */
.kobdi-error[hidden]{ display:none !important; }
.kobdi-error{
  margin-top: .6rem;
  color: color-mix(in oklab, var(--danger), black 10%);
  background: color-mix(in oklab, var(--danger), var(--bg) 88%);
  border: 1px solid color-mix(in oklab, var(--danger), var(--bg) 70%);
  padding: .6rem .75rem;
  border-radius: 10px;
  font-size: 14px;
}

/* Captcha note (shown only when PHP renders it) */
.kobdi-captcha-note{
  margin-top: .6rem;
  color: var(--muted);
  font-size: 13px;
  border: 1px dashed var(--border);
  padding: .6rem .75rem;
  border-radius: 10px;
}

/* Results */
.kobdi-results{ margin-top: 14px; }
.kobdi-placeholder{
  min-height: 84px; border-radius: 10px;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--surface-elev), transparent 40%) 25%,
      color-mix(in oklab, var(--surface-elev), transparent 10%) 37%,
      color-mix(in oklab, var(--surface-elev), transparent 40%) 63%);
  background-size: 400% 100%;
  animation: kobdi-skeleton 1.1s ease-in-out infinite;
}
@keyframes kobdi-skeleton{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }
@media (prefers-reduced-motion: reduce){ .kobdi-placeholder{ animation:none; } }

/* Status card */
.kobdi-status-card{ background: var(--bg); border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow: var(--shadow); }
.kobdi-status-line{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:.25rem; }

/* Badges */
.kobdi-badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; border:1px solid transparent; }
.kobdi-badge.success{ background: color-mix(in oklab, var(--success), var(--bg) 85%); color: color-mix(in oklab, var(--success), black 15%); border-color: color-mix(in oklab, var(--success), var(--bg) 70%); }
.kobdi-badge.warning{ background: color-mix(in oklab, var(--warning), var(--bg) 86%); color: color-mix(in oklab, var(--warning), black 10%); border-color: color-mix(in oklab, var(--warning), var(--bg) 70%); }
.kobdi-badge.danger{  background: color-mix(in oklab, var(--danger), var(--bg) 88%);  color: color-mix(in oklab, var(--danger),  black 8%); border-color: color-mix(in oklab, var(--danger),  var(--bg) 70%); }

/* KV grid */
.kobdi-kv{ display:grid; gap:10px 16px; grid-template-columns:160px 1fr; font-size:14px; color: var(--muted); }
.kobdi-kv strong{ color: var(--text); }
@media (max-width:720px){ .kobdi-kv{ grid-template-columns:1fr; } }

/* Report line */
.kobdi-report{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:8px; margin-top:8px; border-top:1px dashed var(--border); }
.kobdi-report a{ color: var(--accent); text-decoration:none; border-bottom:1px dotted var(--accent); }
.kobdi-report a:hover{ filter: brightness(1.08); }

/* Layout fixes for wrapping */
.kobdi-btn{ flex:0 0 auto; position:relative; z-index:2; }
@media (max-width:720px){
  .kobdi-row{ display:grid; grid-template-columns:1fr; gap:10px; }
  .kobdi-btn.primary, .kobdi-btn.secondary, .kobdi-btn.tertiary{ width:100%; }
}

/* RTL */
:where(html[dir="rtl"]) .kobdi-icon{ left:auto; right:12px; }
:where(html[dir="rtl"]) .kobdi-input input{ padding:14px 44px 14px 14px; }

/* === Layout fixes: consistent widths & improved mobile === */
.kobdi-input input{ box-sizing: border-box; }
.kobdi-row{ align-items: stretch; flex-wrap: wrap; }

@media (max-width: 900px){
  .kobdi-row{
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 10px;
  }
  .kobdi-input,
  .kobdi-input input,
  .kobdi-btn.primary,
  .kobdi-btn.secondary,
  .kobdi-btn.tertiary{
    width: 100%;
  }
  .kobdi-brn-card{ padding: 16px; }
  .kobdi-brn-header .kobdi-title{ font-size: clamp(20px, 5vw, 24px); }
}

@media (max-width: 420px){
  .kobdi-input input{ padding: 12px 12px 12px 42px; }
  .kobdi-btn{ padding: 12px 14px; }
}

/* === Inline spinner for loading state (optional if used inside button) === */
.kobdi-btn.primary .kobdi-spinner{
  display:inline-block; width:16px; height:16px; margin-right:8px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation: kobdi-spin .8s linear infinite;
  vertical-align: -2px;
}
@keyframes kobdi-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .kobdi-btn.primary .kobdi-spinner{ animation: none; border-top-color: rgba(255,255,255,.8); }
}

/* While loading, dim secondary/tertiary buttons too */
.kobdi-form.is-loading .kobdi-btn{ opacity:.8; pointer-events:none; }

/* === Inline loader row (visible during fetch) === */
.kobdi-inline-loader[hidden]{ display:none !important; }
.kobdi-inline-loader{
  display:flex; align-items:center; gap:10px; margin-top:10px; color: var(--muted);
  font-size: 14px;
}
.kobdi-ring{
  width:16px; height:16px; border-radius:50%;
  border:2px solid currentColor; border-right-color: transparent;
  animation: kobdi-spin .8s linear infinite;
}
@keyframes kobdi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .kobdi-ring{ animation: none; opacity:.7; }
}

.kobdi-collection h1{ margin-top:0; }
.kobdi-col-list{ margin: 0; padding-left: 1.25rem; }
.kobdi-col-item{ margin: .4rem 0; }
.kobdi-col-label{ font-weight: 600; }