/* KBT frontend layout helpers (safe for wp-theme-every)
   v6.4.9: Always 1-column on all devices (PC/iPad/mobile)
*/

#kbt-wrap{
  width:100%;
  clear:both;
  margin:20px 0;
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
  padding:0 16px;
}
#kbt-wrap *{box-sizing:border-box;}

/* Always 1-column: LEFT(inputs) -> RIGHT(preview & history) */
#kbt-wrap .kbt-grid{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:wrap !important;
  gap:16px !important;
  align-items:stretch !important;
}

#kbt-left,
#kbt-right{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  flex:0 0 auto !important;
}

/* History list should not lock height on desktop in 1-column layout */
#kbt-history{
  max-height:none !important;
  overflow:visible !important;
}

/* Usage bar (quota/period) */
.kbt-usage b{font-weight:900;}

/* Usage bar visual (force) */
#kbt-usage.kbt-usage{
  display:block;
  margin-top:6px !important;
  margin-bottom:8px !important;
  padding:10px 12px !important;
  border:1px solid #e5e7eb !important;
  border-radius:12px !important;
  background:#f9fafb !important;
  color:#111827 !important;
  font-size:13px !important;
  line-height:1.5 !important;
}


/* Usage bar - make it visually obvious */
#kbt-usage.kbt-usage{
  border-left:6px solid #60a5fa !important;
  box-shadow:0 6px 16px rgba(0,0,0,.06) !important;
}


/* ===== v1.0 UI improvement: headings & groups ===== */

.kbt-main-title{
  background:#111827;
  color:#fff;
  padding:14px 16px;
  border-radius:10px;
  font-size:20px;
  font-weight:800;
  margin-bottom:18px;
}

.kbt-section{
  margin-bottom:26px;
}

.kbt-section-title{
  background:#f3f4f6;
  padding:10px 14px;
  border-left:4px solid #2563eb;
  font-size:15px;
  font-weight:700;
  margin-bottom:12px;
  border-radius:6px;
}

.kbt-field{
  margin-bottom:16px !important;
}

.kbt-field label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
}

.kbt-field input,
.kbt-field select,
.kbt-field textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
}

.kbt-copy-box{
  background:#f9fafb;
  border:1px solid #e5e7eb;
  padding:14px;
  border-radius:10px;
  margin-top:10px;
}

.kbt-result-box{
  margin-top:20px;
  padding:14px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
}


/* v1.0.1 UI polish */
#kbt-wrap .kbt-panel{overflow:visible;}
#kbt-wrap #kbt-form > div > div{margin-bottom:18px;}
#kbt-wrap #kbt-form label{line-height:1.45;}
#kbt-wrap #kbt-form input[type="text"],
#kbt-wrap #kbt-form input[type="number"],
#kbt-wrap #kbt-form input[type="url"],
#kbt-wrap #kbt-form select,
#kbt-wrap #kbt-form textarea{
  width:100% !important;
  padding:10px 12px !important;
  border:1px solid #d1d5db !important;
  border-radius:10px !important;
  background:#fff !important;
  box-sizing:border-box !important;
}
#kbt-wrap #kbt-form input[type="text"],
#kbt-wrap #kbt-form input[type="number"],
#kbt-wrap #kbt-form input[type="url"],
#kbt-wrap #kbt-form select,
#kbt-wrap #kbt-form textarea{margin-top:4px !important;}
#kbt-wrap #kbt-form input[type="checkbox"],
#kbt-wrap #kbt-form input[type="radio"]{margin-right:4px;}
#kbt-wrap .kbt-section-title{
  display:block;
  background:linear-gradient(90deg,#fff1e8 0%,#fff7f2 100%);
  color:#9a3412;
  border-left:5px solid #f97316;
  border-radius:10px;
  padding:11px 14px;
  font-size:15px;
  font-weight:800;
  margin:6px 0 12px;
  box-shadow:0 2px 8px rgba(249,115,22,.08);
}
#kbt-wrap .kbt-main-title{
  background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 100%);
  color:#ea580c;
  border:1px solid #fdba74;
  box-shadow:0 6px 16px rgba(234,88,12,.08);
}
#kbt-wrap .kbt-group-card{
  background:#fcfcfd;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px;
  margin-bottom:18px;
}
#kbt-wrap .kbt-field{margin-bottom:16px !important;}
#kbt-wrap .kbt-field:last-child{margin-bottom:0 !important;}
#kbt-wrap .kbt-select-strong,
#kbt-wrap select[name="copy_variant"]{
  width:100% !important;
  max-width:420px;
  padding:10px 12px !important;
  border:1px solid #cbd5e1 !important;
  border-radius:10px !important;
  background:#fff !important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.03);
}
#kbt-wrap .kbt-panel > form > div{gap:0 !important;}
#kbt-wrap .kbt-panel > form > div > .kbt-section-title + div,
#kbt-wrap .kbt-panel > form > div > .kbt-group-card{margin-top:0;}
#kbt-wrap #kbt-form > div > .kbt-section-title:not(:first-child){margin-top:8px;}
#kbt-wrap .kbt-usage{margin-top:10px !important;}

textarea[readonly]{white-space:pre-wrap;}