/* KBT Sell Intake — mobile-first. Scoped to .kbt-sell so it can't leak into the theme. */
.kbt-sell{
  /* KBT blue, same family as the KBT Inventory and KBT Purchases apps.
     Three steps rather than two, because one cyan cannot do every job:
     #00b0f0 is only 2.48:1 on white, so it is decoration only — anything
     carrying meaning (text, buttons, the focus ring) uses a darker step.
       brand      decorative accents only, never text and never a fill under white text
       brand-dark buttons, borders, focus ring          4.53:1 on white  (AA)
       brand-ink  brand-coloured text on white or tint  9.89 / 9.06:1    (AA) */
  --kbt-brand:#00b0f0;
  --kbt-brand-dark:#0078d4;
  --kbt-brand-ink:#004578;
  --kbt-tint:#eaf7fe;
  --kbt-ink:#1f2225;
  --kbt-ink-2:#3b3b3b;
  --kbt-muted:#6f767d;
  --kbt-line:#dfe3e7;
  --kbt-line-soft:#eef1f3;
  --kbt-danger:#b32d2e;
  --kbt-radius:12px;

  max-width:640px;
  margin:0 auto;
  padding:20px 16px 56px;
  color:var(--kbt-ink-2);
  font-size:16px;              /* 16px minimum stops iOS zooming on focus */
  line-height:1.55;
  -webkit-text-size-adjust:100%;
  box-sizing:border-box;
}
.kbt-sell *,.kbt-sell *::before,.kbt-sell *::after{box-sizing:inherit}

.kbt-head{margin:0 0 22px}
.kbt-sell .kbt-h1{
  font-size:26px;line-height:1.2;margin:0 0 8px;color:var(--kbt-ink);
  font-weight:700;letter-spacing:-.01em;
}
.kbt-intro{margin:0;color:var(--kbt-muted);font-size:15.5px}

/* ---- fields ---- */
.kbt-field{margin:0 0 20px;border:0;padding:0;min-width:0}
.kbt-sell label,.kbt-sell legend{
  display:block;font-weight:600;color:var(--kbt-ink);font-size:15px;margin:0 0 6px;padding:0;
}
.kbt-req{color:var(--kbt-brand-ink);font-weight:700}
.kbt-opt{color:var(--kbt-muted);font-weight:400;font-size:13px}
.kbt-hint{margin:6px 0 0;font-size:13.5px;color:var(--kbt-muted)}
.kbt-hint-strong{color:var(--kbt-ink-2);background:var(--kbt-tint);border-left:3px solid var(--kbt-brand);
  padding:9px 12px;border-radius:0 8px 8px 0;font-size:13.5px}

.kbt-sell input[type=text],
.kbt-sell input[type=email],
.kbt-sell input[type=tel],
.kbt-sell input[type=number],
.kbt-sell textarea{
  width:100%;
  font:inherit;font-size:16px;
  color:var(--kbt-ink);
  background:#fff;
  border:1px solid var(--kbt-line);
  border-radius:var(--kbt-radius);
  padding:13px 14px;
  -webkit-appearance:none;appearance:none;
  transition:border-color .15s,box-shadow .15s;
}
.kbt-sell textarea{resize:vertical;min-height:120px;line-height:1.5}
.kbt-sell input:focus,.kbt-sell textarea:focus{
  outline:none;border-color:var(--kbt-brand-dark);box-shadow:0 0 0 3px rgba(0,120,212,.18);
}
.kbt-sell input::placeholder,.kbt-sell textarea::placeholder{color:#a6adb4}

.kbt-money{position:relative}
.kbt-money>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--kbt-muted);font-weight:600;pointer-events:none}
.kbt-sell .kbt-money input[type=number]{padding-left:30px}
.kbt-sell input[type=number]{-moz-appearance:textfield}
.kbt-sell input[type=number]::-webkit-outer-spin-button,
.kbt-sell input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---- errors ---- */
.kbt-err{margin:6px 0 0;font-size:13.5px;color:var(--kbt-danger);font-weight:600;display:none}
.kbt-field.has-error .kbt-err{display:block}
.kbt-field.has-error input,.kbt-field.has-error textarea{border-color:var(--kbt-danger)}
.kbt-field.has-error input:focus,.kbt-field.has-error textarea:focus{box-shadow:0 0 0 3px rgba(179,45,46,.14)}

.kbt-alert{
  background:#fdf1f1;border:1px solid #f0c7c7;border-left:4px solid var(--kbt-danger);
  color:#7d2223;border-radius:8px;padding:12px 14px;margin:0 0 20px;font-size:14.5px;
}
.kbt-alert strong{display:block;margin-bottom:2px}

/* ---- contact preference segments ---- */
.kbt-segs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kbt-sell label.kbt-seg{position:relative;margin:0;display:block;font-weight:400}
.kbt-seg input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.kbt-seg span{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:48px;padding:8px 6px;
  border:1px solid var(--kbt-line);border-radius:var(--kbt-radius);
  background:#fff;font-weight:500;font-size:14.5px;color:var(--kbt-ink-2);
  transition:all .15s;
}
.kbt-seg input:checked + span{
  background:var(--kbt-brand-dark);border-color:var(--kbt-brand-dark);color:#fff;font-weight:600;
}
.kbt-seg input:focus-visible + span{box-shadow:0 0 0 3px rgba(0,120,212,.3)}

/* ---- photos ---- */
.kbt-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.kbt-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:132px;padding:20px 16px;margin-top:4px;
  border:2px dashed #cdd3d9;border-radius:14px;background:#fafbfc;
  color:var(--kbt-muted);text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
}
.kbt-drop:hover,.kbt-drop:focus-visible,.kbt-drop.is-over{
  border-color:var(--kbt-brand-dark);background:var(--kbt-tint);color:var(--kbt-brand-ink);outline:none;
}
.kbt-drop-main{font-weight:600;color:var(--kbt-ink);font-size:15.5px}
.kbt-drop:hover .kbt-drop-main,.kbt-drop.is-over .kbt-drop-main{color:var(--kbt-brand-ink)}
.kbt-drop-sub{font-size:13px}

.kbt-actions-row{display:flex;gap:8px;margin-top:10px}
.kbt-actions-row .kbt-btn{flex:1}

.kbt-thumbs{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kbt-thumb{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#eef1f3;border:1px solid var(--kbt-line)}
.kbt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kbt-thumb.is-bad{border-color:var(--kbt-danger);background:#fdf1f1}
.kbt-thumb-x{
  position:absolute;top:5px;right:5px;width:28px;height:28px;border:0;border-radius:50%;
  background:rgba(20,22,24,.72);color:#fff;font-size:17px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.kbt-thumb-x:hover{background:var(--kbt-brand-dark)}
.kbt-thumb-note{
  position:absolute;left:0;right:0;bottom:0;background:rgba(179,45,46,.92);color:#fff;
  font-size:10.5px;line-height:1.25;padding:4px 5px;text-align:center;font-weight:600;
}

/* ---- consent ---- */
.kbt-consent{background:#fafbfc;border:1px solid var(--kbt-line-soft);border-radius:var(--kbt-radius);padding:14px}
.kbt-sell label.kbt-check{display:flex;align-items:flex-start;gap:11px;font-weight:500;color:var(--kbt-ink-2);margin:0;cursor:pointer;font-size:15px}
.kbt-check>span{flex:1}
.kbt-sell .kbt-check input[type=checkbox]{width:22px;height:22px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--kbt-brand-dark)}

/* ---- buttons ---- */
.kbt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;width:100%;padding:14px 20px;
  font:inherit;font-size:16px;font-weight:600;
  border-radius:var(--kbt-radius);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:all .15s;
}
.kbt-btn-primary{background:var(--kbt-brand-dark);color:#fff;border-color:var(--kbt-brand-dark)}
.kbt-btn-primary:hover{background:var(--kbt-brand-ink);border-color:var(--kbt-brand-ink);color:#fff}
.kbt-btn-primary:disabled{opacity:.6;cursor:progress}
.kbt-btn-ghost{background:#fff;color:var(--kbt-ink-2);border-color:var(--kbt-line)}
.kbt-btn-ghost:hover{border-color:var(--kbt-brand-dark);color:var(--kbt-brand-ink);background:var(--kbt-tint)}
.kbt-btn-sm{min-height:44px;font-size:14.5px;padding:10px 14px}
.kbt-sell .kbt-cam{display:none}
@media (hover:none) and (pointer:coarse){ .kbt-sell .kbt-cam{display:inline-flex} }

.kbt-spin{display:none;width:17px;height:17px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:kbtspin .7s linear infinite}
.is-sending .kbt-spin{display:block}
@keyframes kbtspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .kbt-spin{animation-duration:2s} }

.kbt-fine{margin:12px 0 0;font-size:12.5px;color:var(--kbt-muted);text-align:center}

/* ---- honeypot ---- */
.kbt-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* ---- success ---- */
.kbt-done{text-align:center;padding:32px 20px;background:#fff;border:1px solid var(--kbt-line);border-radius:16px}
.kbt-done-mark{
  width:64px;height:64px;margin:0 auto 16px;border-radius:50%;
  background:var(--kbt-tint);color:var(--kbt-brand-ink);
  display:flex;align-items:center;justify-content:center;
}
.kbt-done h2{margin:0 0 8px;font-size:23px;color:var(--kbt-ink);line-height:1.25}
.kbt-ref{margin:0 0 10px;font-size:15px}
.kbt-ref strong{background:var(--kbt-tint);color:var(--kbt-brand-ink);padding:3px 10px;border-radius:999px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.kbt-done-sub{margin:0 0 20px;color:var(--kbt-muted);font-size:14.5px}
.kbt-done .kbt-btn{width:auto;min-width:200px}

/* ---- a touch wider on tablets and up ---- */
@media (min-width:600px){
  .kbt-sell{padding:32px 24px 64px}
  .kbt-sell .kbt-h1{font-size:32px}
  .kbt-thumbs{grid-template-columns:repeat(4,1fr)}
  .kbt-actions-row .kbt-btn{flex:0 1 auto;min-width:170px}
  .kbt-btn{width:auto;min-width:260px}
}