/* TamuBN v86.0.1 — Human-Centric Data Entry
   One form language for Buyer, Seller Studio and Admin Console. */
:root{
  --hf-purple:#6d28d9;
  --hf-purple-dark:#5b21b6;
  --hf-purple-soft:#f5f0ff;
  --hf-ink:#17131d;
  --hf-muted:#675d70;
  --hf-line:#ded5e7;
  --hf-line-strong:#c8b9d8;
  --hf-surface:#fff;
  --hf-soft:#faf8fc;
  --hf-success:#067647;
  --hf-danger:#b42318;
  --hf-focus:rgba(109,40,217,.16);
}

/* Forms receive this class from v86.0.1-human-forms.js. */
.tamubn-human-form{
  display:grid;
  gap:18px;
  width:100%;
  box-sizing:border-box;
}
.tamubn-human-form > h2,
.tamubn-human-form > h3{margin-bottom:0}
.tamubn-human-form .human-form-intro{
  margin:-8px 0 2px;
  color:var(--hf-muted);
  font-size:14px;
  line-height:1.55;
}
.tamubn-human-form fieldset.human-form-section{
  min-width:0;
  border:1px solid var(--hf-line);
  border-radius:18px;
  background:var(--hf-soft);
  padding:16px;
  margin:0;
  display:grid;
  gap:15px;
}
.tamubn-human-form fieldset.human-form-section > legend{
  padding:0 8px;
  color:var(--hf-ink);
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
}
.tamubn-human-form .human-form-section-note{
  color:var(--hf-muted);
  font-size:12px;
  line-height:1.45;
  margin:-4px 0 0;
}
.tamubn-human-form .human-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.tamubn-human-form .human-field-wide{grid-column:1/-1}

.tamubn-human-form label:not(.toggle-row):not(.v854-check):not(.v857-reserve-toggle):not(.v857-delivery-toggle):not(.v859-pickup-today-switch):not(.variant-active):not(.mobile-pref-row):not(.human-choice-option){
  display:grid;
  gap:7px;
  color:var(--hf-ink);
  font-size:13px;
  line-height:1.3;
  font-weight:800;
  min-width:0;
  position:relative;
}
.tamubn-human-form label small,
.tamubn-human-form .v857-field-help{
  display:block;
  color:var(--hf-muted)!important;
  font-size:11.5px!important;
  line-height:1.4;
  font-weight:500!important;
  margin:0;
}
.tamubn-human-form .human-required::after{
  content:'Required';
  position:absolute;
  top:0;right:0;
  margin:0;
  font-size:10px;
  line-height:1;
  font-weight:800;
  color:var(--hf-purple);
  background:var(--hf-purple-soft);
  border-radius:999px;
  padding:4px 7px;
}
.tamubn-human-form .human-optional::after{
  content:'Optional';
  position:absolute;
  top:0;right:0;
  margin:0;
  font-size:10px;
  line-height:1;
  font-weight:700;
  color:#756b7d;
}
/* Don't label checkboxes/radios as optional/required badges. */
.tamubn-human-form label:has(input[type="checkbox"])::after,
.tamubn-human-form label:has(input[type="radio"])::after{content:none!important}

.tamubn-human-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
.tamubn-human-form select,
.tamubn-human-form textarea{
  appearance:auto;
  -webkit-appearance:auto;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:52px;
  padding:12px 14px;
  border:1px solid var(--hf-line);
  border-radius:14px;
  background:var(--hf-surface)!important;
  color:var(--hf-ink)!important;
  font:inherit;
  font-size:16px!important; /* prevents iOS zoom */
  font-weight:500!important;
  line-height:1.35;
  outline:none;
  box-shadow:0 1px 1px rgba(20,10,30,.02);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.tamubn-human-form textarea{
  min-height:108px;
  resize:vertical;
  line-height:1.5;
}
.tamubn-human-form input::placeholder,
.tamubn-human-form textarea::placeholder{color:#8a808f!important;opacity:1}
.tamubn-human-form input:focus,
.tamubn-human-form select:focus,
.tamubn-human-form textarea:focus{
  border-color:var(--hf-purple)!important;
  box-shadow:0 0 0 4px var(--hf-focus)!important;
}
.tamubn-human-form input:disabled,
.tamubn-human-form select:disabled,
.tamubn-human-form textarea:disabled{
  background:#f1edf4!important;
  color:#776e7d!important;
  cursor:not-allowed;
}
.tamubn-human-form input[readonly]{background:#f7f4f9!important;color:#5d5265!important}
.tamubn-human-form .human-invalid{
  border-color:var(--hf-danger)!important;
  box-shadow:0 0 0 3px rgba(180,35,24,.10)!important;
}
.tamubn-human-form .human-field-error{
  display:block;
  color:var(--hf-danger);
  font-size:11px;
  font-weight:700;
  margin-top:0;
}
.tamubn-human-form .human-char-count{
  justify-self:end;
  color:var(--hf-muted);
  font-size:10.5px;
  font-weight:600;
  margin-top:-3px;
}

/* Native selects remain native so iOS/Android get their best picker UI. */
.tamubn-human-form select{cursor:pointer;padding-right:34px}
.tamubn-human-form input[type="date"],
.tamubn-human-form input[type="time"],
.tamubn-human-form input[type="datetime-local"]{cursor:pointer}
.tamubn-human-form input[type="number"]{font-variant-numeric:tabular-nums}

.tamubn-human-form .human-choice-group{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:0;
  border:0;
  margin:0;
}
.tamubn-human-form .human-choice-group > legend{
  grid-column:1/-1;
  margin-bottom:2px;
  font-size:13px;
  font-weight:850;
  color:var(--hf-ink);
}
.tamubn-human-form .human-choice-option{
  min-height:48px;
  border:1px solid var(--hf-line);
  border-radius:13px;
  background:#fff;
  display:flex!important;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  color:var(--hf-ink)!important;
  font-size:13px!important;
  font-weight:750!important;
  cursor:pointer;
}
.tamubn-human-form .human-choice-option:has(input:checked){
  border-color:var(--hf-purple);
  background:var(--hf-purple-soft);
  box-shadow:inset 0 0 0 1px var(--hf-purple);
}
.tamubn-human-form input[type="checkbox"],
.tamubn-human-form input[type="radio"]{
  width:19px;
  height:19px;
  accent-color:var(--hf-purple);
  flex:0 0 auto;
}

.tamubn-human-form .toggle-row,
.tamubn-human-form .v854-check,
.tamubn-human-form .v857-reserve-toggle,
.tamubn-human-form .v857-delivery-toggle,
.tamubn-human-form .v859-pickup-today-switch,
.tamubn-human-form .variant-active,
.tamubn-human-form .mobile-pref-row{
  border:1px solid var(--hf-line);
  border-radius:14px;
  background:#fff!important;
  padding:12px 13px;
  color:var(--hf-ink)!important;
}

.tamubn-human-form button[type="submit"],
.tamubn-human-form > .button.primary,
.tamubn-human-form .human-primary-action{
  min-height:52px;
  border-radius:14px!important;
  font-size:14px!important;
  font-weight:900!important;
  margin-top:2px;
}
.tamubn-human-form button[type="submit"]:focus-visible,
.tamubn-human-form button[type="button"]:focus-visible{
  outline:3px solid rgba(109,40,217,.28);
  outline-offset:2px;
}

.human-password-wrap{position:relative;display:block}
.human-password-wrap > input{padding-right:72px!important}
.human-password-toggle{
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  border:0!important;
  background:transparent!important;
  color:var(--hf-purple)!important;
  min-height:36px!important;
  padding:0 9px!important;
  margin:0!important;
  font-size:11px!important;
  font-weight:850!important;
  cursor:pointer;
}

.human-form-help-card{
  padding:12px 13px;
  border-radius:14px;
  background:var(--hf-purple-soft);
  color:#4b286d;
  font-size:12px;
  line-height:1.5;
}
.human-form-help-card b{display:block;color:#35194e;margin-bottom:2px}
.human-form-action-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  border:1px solid #dccdf0;
  border-radius:14px;
  background:#faf7ff;
  color:#4c1d75;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}

/* Key portal editors: readable width, not edge-to-edge data walls. */
.workspace-form.tamubn-human-form,
#productForm.tamubn-human-form,
#variantForm.tamubn-human-form,
.pickup-location-form.tamubn-human-form,
.seller-bank-form.tamubn-human-form,
.seller-whatsapp-form.tamubn-human-form,
.campaign-builder.tamubn-human-form{
  gap:16px;
}
#productForm .human-form-section{background:#fff}
#productForm .human-form-section:first-of-type{background:#fbf9fd}

/* Buyer checkout/address forms should feel like short guided steps. */
.checkout-v85-buyer.tamubn-human-form,
#mobileCheckoutV85.tamubn-human-form,
.v857-account-address.tamubn-human-form,
.v857-address-sheet .tamubn-human-form{
  gap:14px;
}
.checkout-v85-buyer.tamubn-human-form label,
#mobileCheckoutV85.tamubn-human-form label{font-size:12.5px}

/* Forms rendered on dark page areas keep a light form surface and dark field text. */
.cube-view-page .tamubn-human-form,
.dark-section .tamubn-human-form{color:var(--hf-ink)}

@media(max-width:760px){
  .tamubn-human-form{gap:14px}
  .tamubn-human-form .human-form-grid,
  .tamubn-human-form .human-choice-group{grid-template-columns:1fr}
  .tamubn-human-form fieldset.human-form-section{padding:14px;border-radius:16px}
  .tamubn-human-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="hidden"]),
  .tamubn-human-form select,
  .tamubn-human-form textarea{min-height:50px;border-radius:13px;padding:11px 12px}
  .tamubn-human-form textarea{min-height:104px}
  .portal-auth-card{padding:22px!important}
  .v859-wanted-compose form.tamubn-human-form,
  .mobile-form.tamubn-human-form{gap:13px}
}

/* Optional advanced sections use disclosure rather than front-loading fields. */
.tamubn-human-form details.human-form-section{
  border:1px solid var(--hf-line);
  border-radius:16px;
  background:#fff;
  padding:0;
  overflow:hidden;
}
.tamubn-human-form details.human-form-section > summary{
  cursor:pointer;
  padding:14px 15px;
  color:var(--hf-ink);
  font-size:13px;
  font-weight:850;
  list-style:none;
}
.tamubn-human-form details.human-form-section > summary::-webkit-details-marker{display:none}
.tamubn-human-form details.human-form-section > summary::after{content:'＋';float:right;color:var(--hf-purple)}
.tamubn-human-form details.human-form-section[open] > summary::after{content:'−'}
.tamubn-human-form details.human-form-section[open]{padding-bottom:14px}
.tamubn-human-form details.human-form-section[open] > :not(summary){margin-left:14px;margin-right:14px;margin-top:12px}

#marketFilters.tamubn-human-form{
  grid-template-columns:minmax(220px,2fr) minmax(160px,1fr) minmax(130px,.7fr) minmax(160px,1fr) auto!important;
  align-items:end!important;
  gap:12px!important;
}
.support-form.tamubn-human-form .form-grid,
.contact-card.tamubn-human-form,
.seller-form.tamubn-human-form{gap:15px}

/* Login/register: clearer rhythm and bigger touch targets. */
.portal-auth-form.tamubn-human-form,
.buyer-auth-form.tamubn-human-form,
.mobile-auth-form.tamubn-human-form{gap:14px}
.portal-auth-form.tamubn-human-form button[type="submit"],
.buyer-auth-form.tamubn-human-form button[type="submit"]{width:100%}

/* Datalists preserve free entry while providing a native suggestion dropdown. */
.tamubn-human-form input[list]{background-image:linear-gradient(45deg,transparent 50%,#6d28d9 50%),linear-gradient(135deg,#6d28d9 50%,transparent 50%)!important;background-position:calc(100% - 17px) 23px,calc(100% - 12px) 23px!important;background-size:5px 5px,5px 5px!important;background-repeat:no-repeat!important;padding-right:34px!important}

@media(max-width:900px){
  #marketFilters.tamubn-human-form{grid-template-columns:1fr 1fr!important}
  #marketFilters.tamubn-human-form button{grid-column:1/-1}
}
@media(max-width:620px){
  #marketFilters.tamubn-human-form{grid-template-columns:1fr!important}
  #marketFilters.tamubn-human-form button{grid-column:auto}
}

/* Human entry modal replaces browser prompt() for operational data entry. */
.human-entry-modal{
  position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px;
  background:rgba(19,12,26,.58);backdrop-filter:blur(5px);
}
.human-entry-card{
  width:min(560px,100%);max-height:min(760px,calc(100dvh - 36px));overflow:auto;
  box-sizing:border-box;background:#fff;color:var(--hf-ink);border-radius:22px;padding:22px;
  box-shadow:0 30px 90px rgba(22,10,34,.28);border:1px solid rgba(255,255,255,.7);
}
.human-entry-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:4px}
.human-entry-head h2{margin:0;font-size:22px;line-height:1.15;color:var(--hf-ink)}
.human-entry-head p{margin:6px 0 0;color:var(--hf-muted);font-size:13px;line-height:1.5}
.human-entry-close{border:0;background:#f5f0f8;color:#3d3145;border-radius:999px;width:38px;height:38px;flex:0 0 38px;font-size:20px;cursor:pointer}
.human-entry-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:2px}
.human-entry-actions button{min-height:46px;padding:0 16px;border-radius:12px;border:1px solid var(--hf-line);background:#fff;color:var(--hf-ink);font-weight:850;cursor:pointer}
.human-entry-actions .human-entry-submit{background:var(--hf-purple);border-color:var(--hf-purple);color:#fff}
.human-entry-card .human-form-help-card{margin-top:-3px}
@media(max-width:620px){
  .human-entry-modal{align-items:end;padding:0}
  .human-entry-card{width:100%;max-height:88dvh;border-radius:22px 22px 0 0;padding:20px 16px calc(18px + env(safe-area-inset-bottom))}
  .human-entry-actions{display:grid;grid-template-columns:1fr 1fr}
}