/* =====================================================================
   BABAKRI — SHARED FORM STYLES  (theme/forms.css)
   Fields, labels, hints, password toggle, tabs and status messages.
   Used by the login module now; reused by the seller and offer forms.
   Reads all values from theme/tokens.css.
   ===================================================================== */

/* ---- 1. Field: label + input + optional hint ---------------------- */
.bk-field { display: grid; gap: 6px; }
.bk-field__label { font-weight: 700; font-size: var(--bk-step--1); color: var(--bk-ink); }
html[lang="ur"] .bk-field__label { font-size: var(--bk-step-0); }
.bk-field__hint { color: var(--bk-ink-faint); font-size: var(--bk-step--1); }
.bk-input {
  width: 100%; min-height: 48px; padding: 0.7rem 0.95rem;
  background: var(--bk-milk); color: var(--bk-ink);
  border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm);
  font: inherit; font-size: var(--bk-step-0);
  transition: border-color 160ms, box-shadow 160ms;
}
.bk-input:hover { border-color: #d3c5ae; }
.bk-input:focus { outline: none; border-color: var(--bk-tan); box-shadow: 0 0 0 3px rgba(156, 107, 69, 0.18); }
.bk-input[aria-invalid="true"] { border-color: var(--bk-henna); }
.bk-input[type="email"] { direction: ltr; text-align: start; } /* emails always read left-to-right */
html[dir="rtl"] .bk-input[type="email"] { text-align: right; }

/* ---- 2. Password field with Show / Hide button --------------------- */
.bk-password { position: relative; }
.bk-password .bk-input { padding-inline-end: 5rem; direction: ltr; }
.bk-password__toggle {
  position: absolute; inset-block: 6px; inset-inline-end: 6px; padding: 0 0.8rem;
  border: 0; border-radius: 6px; background: var(--bk-cream); color: var(--bk-ink-soft);
  font: inherit; font-size: var(--bk-step--1); font-weight: 700; cursor: pointer;
}
.bk-password__toggle:hover { color: var(--bk-ink); }

/* ---- 3. Tabs (e.g. Sign in / Create an account) -------------------- */
.bk-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; gap: 4px; background: var(--bk-cream); border-radius: var(--bk-radius-pill); }
.bk-tabs button {
  min-height: 42px; border: 0; border-radius: var(--bk-radius-pill); background: transparent;
  color: var(--bk-ink-soft); font: inherit; font-weight: 700; cursor: pointer;
}
.bk-tabs button[aria-selected="true"] { background: var(--bk-milk); color: var(--bk-ink); box-shadow: var(--bk-shadow); }

/* ---- 4. Status message (success / error), announced to screen readers */
.bk-status {
  display: flex; gap: var(--bk-space-2); align-items: flex-start;
  padding: 0.8rem 1rem; border-radius: var(--bk-radius-sm); font-size: var(--bk-step--1);
}
.bk-status[hidden] { display: none; }
.bk-status::before { content: ""; flex-shrink: 0; width: 9px; height: 9px; margin-top: 0.45em; transform: rotate(45deg); border-radius: 1px; }
.bk-status.is-ok { background: #e8ecdf; color: #3f4a2c; }
.bk-status.is-ok::before { background: var(--bk-olive); }
.bk-status.is-error { background: #f5e4dc; color: var(--bk-henna-deep); }
.bk-status.is-error::before { background: var(--bk-henna); }
html[lang="ur"] .bk-status { font-size: var(--bk-step-0); }

/* ---- 5. Text-style button (links that are actions) ----------------- */
.bk-linkbtn {
  padding: 0; border: 0; background: none; color: var(--bk-henna); font: inherit; font-weight: 700;
  font-size: var(--bk-step--1); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.bk-linkbtn:hover { color: var(--bk-henna-deep); }

/* ---- 6. Full-width button + disabled state ------------------------- */
.bk-btn--block { width: 100%; }
.bk-btn:disabled { opacity: 0.6; cursor: progress; }