:root{
  --bhb-primary:#C49A34;
  --bhb-secondary:#10B981;
  --bhb-bg:#F8F0E8;
  --bhb-text:#085234;
  --bhb-success:#22C55E;
  --bhb-danger:#EF4444;
  --bhb-font:Inter;
  --bhb-font-size:16px;
  --bhb-button-font-weight:400;
  --bhb-radius:12px;
  --bhb-card-padding:16px;
  --bhb-shadow:0 18px 48px rgba(0,0,0,.20);
  --bhb-anim:.35s;
  --bhb-primary-dark:#60A5FA;
  --bhb-secondary-dark:#34D399;
}

.bhb-kda-root,
.bhb-kda-embed{
  font-family: var(--bhb-font), Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--bhb-font-size);
  color: var(--bhb-text);
}

/*
  Keep colors exactly as configured in the plugin settings.
  (Some mobile browsers apply prefers-color-scheme: light and would override the configured text color.)
*/

/* Ensure the widget looks identical regardless of the embedding page background */
.bhb-kda-embed{
  /*
    Match the surrounding website by default.
    If you want an explicit wrapper background, define --bhb-embed-bg.
  */
  background: var(--bhb-embed-bg, transparent);
  border-radius: 22px;
  padding: 16px;
}

.bhb-glass{
  border-radius: 18px;
  background: var(--bhb-glass-bg, rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--bhb-shadow);
}

.bhb-card{
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: none;
  padding: var(--bhb-card-padding);
  transition: transform var(--bhb-anim) ease, border-color var(--bhb-anim) ease;
}

.bhb-card:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); }

.bhb-btn{
  font-weight: var(--bhb-button-font-weight, 400);
  border-radius: var(--bhb-radius);
  border: 1px solid rgba(255,255,255,.15);
  transition: transform var(--bhb-anim) ease, opacity var(--bhb-anim) ease;
  min-height: 44px;
}

.bhb-btn:active{ transform: translateY(1px) scale(.99); }

.bhb-btn-primary{
  background: var(--bhb-primary);
  color: white;
  border-color: rgba(255,255,255,.12);
}

.bhb-btn-secondary{
  background: var(--bhb-secondary);
  color: white;
  border-color: rgba(255,255,255,.12);
}

.bhb-input{
  border-radius: var(--bhb-radius);
  border: 1px solid rgba(255,255,255,.18);
  /* Inputs are rendered on a light surface -> use dark text for readability */
  background: #fff;
  color: #111827;
  padding: 0 12px;
  outline: none;
  min-height: 44px;
}

.bhb-input::placeholder{ color:#4F8069; }

.bhb-input:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,.22);
}

.bhb-actionbar{
  position: sticky;
  bottom: 0;
  padding-top: 12px;
}

/* --------------------------------------------------------------------------
   Frontend: minimal utility set (scoped)
   --------------------------------------------------------------------------
   The frontend widget originally used a few Tailwind utility classes.
   Loading Tailwind CDN on the frontend can conflict with theme CSS (e.g. it
   defines a global .container class). To keep the widget self-contained, we
   implement the small subset of utilities we need, scoped to .bhb-kda-embed.
*/

.bhb-kda-embed,
.bhb-kda-embed *{
  box-sizing: border-box;
}

.bhb-kda-embed .block{ display:block; }
.bhb-kda-embed .flex{ display:flex; }
.bhb-kda-embed .flex-col{ flex-direction:column; }
.bhb-kda-embed .items-center{ align-items:center; }
.bhb-kda-embed .justify-between{ justify-content:space-between; }

.bhb-kda-embed .gap-2{ gap:.5rem; }
.bhb-kda-embed .gap-3{ gap:.75rem; }

.bhb-kda-embed .mx-auto{ margin-left:auto; margin-right:auto; }
.bhb-kda-embed .max-w-xl{ max-width:36rem; }

.bhb-kda-embed .p-4{ padding:1rem; }
.bhb-kda-embed .px-4{ padding-left:1rem; padding-right:1rem; }

.bhb-kda-embed .mt-1{ margin-top:.25rem; }
.bhb-kda-embed .mt-2{ margin-top:.5rem; }
.bhb-kda-embed .mt-4{ margin-top:1rem; }
.bhb-kda-embed .mb-1{ margin-bottom:.25rem; }

.bhb-kda-embed .text-xs{ font-size:.75rem; line-height:1rem; }
.bhb-kda-embed .text-sm{ font-size:.875rem; line-height:1.25rem; }
.bhb-kda-embed .text-base{ font-size:1rem; line-height:1.5rem; }
.bhb-kda-embed .text-2xl{ font-size:1.5rem; line-height:2rem; }

.bhb-kda-embed .font-medium{ font-weight:500; }
.bhb-kda-embed .font-semibold{ font-weight:600; }
.bhb-kda-embed .leading-tight{ line-height:1.25; }

.bhb-kda-embed .opacity-70{ opacity:.7; }
.bhb-kda-embed .opacity-75{ opacity:.75; }
.bhb-kda-embed .opacity-80{ opacity:.8; }

.bhb-kda-embed .h-11{ height:2.75rem; }
.bhb-kda-embed .w-28{ width:7rem; }
.bhb-kda-embed .h-28{ height:7rem; }

/* Make inputs behave nicely inside the flex row on larger screens */
.bhb-kda-embed .bhb-input{ width:100%; }

@media (min-width: 640px){
  .bhb-kda-embed .sm\:p-6{ padding:1.5rem; }
  .bhb-kda-embed .sm\:flex-row{ flex-direction:row; }
  .bhb-kda-embed .sm\:flex-row > .bhb-input{ flex:1 1 auto; min-width: 220px; }
  .bhb-kda-embed .sm\:flex-row > .bhb-btn{ flex:0 0 auto; }
}