/* Baltic Accounts — auth pages. Scoped to .bc-auth; relies on theme tokens. */

.bc-auth { max-width: 1180px; margin: clamp(2rem, 6vw, 4.5rem) auto; padding-inline: var(--bc-space, 1.5rem); }
.bc-auth--wide { max-width: 1180px; }

/* ---- account-type tabs ---- */
.bc-auth__tabs { display: flex; gap: .5rem; justify-content: center; max-width: 640px; margin: 0 auto 1.25rem; }
.bc-tab { flex: 1 1 0; padding: .9rem 1rem; border: 0; cursor: pointer; border-radius: 8px; background: var(--bc-bg-soft, #eff2f5); color: var(--bc-ink, #0f1011); font-family: var(--bc-font, sans-serif); font-weight: 700; font-size: .92rem; letter-spacing: .02em; text-transform: uppercase; transition: background .15s, color .15s; }
.bc-tab.is-active { background: var(--bc-primary, #0536b2); color: #fff; }

/* ---- card ---- */
.bc-auth__card { background: #fff; border: 1px solid var(--bc-line, #e8ecf2); border-radius: var(--bc-radius-lg, 16px); box-shadow: var(--bc-shadow, 0 8px 24px rgba(13,27,62,.06)); padding: clamp(1.5rem, 4vw, 2.75rem); max-width: 860px; margin: 0 auto; }
.bc-auth:not(.bc-auth--wide) .bc-auth__card { max-width: 480px; }
.bc-auth__title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .35rem; }
.bc-auth__sub { color: var(--bc-muted, #6b7a99); margin-bottom: 1.5rem; }

/* ---- fields ---- */
.bc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.bc-field { display: block; margin-bottom: 1.1rem; }
/* the [hidden] attribute must beat display:block for role-conditional fields */
.bc-field[hidden], [data-role][hidden] { display: none !important; }
.bc-field > span { display: block; font-family: var(--bc-font, sans-serif); font-weight: 600; font-size: .85rem; color: var(--bc-ink, #0f1011); margin-bottom: .4rem; }
.bc-field em { color: #d33; font-style: normal; }
.bc-field input, .bc-field textarea { width: 100%; border: 1px solid var(--bc-line, #e8ecf2); border-radius: var(--bc-radius, 10px); padding: .8rem .9rem; background: var(--bc-bg-soft, #f5f7fb); font-size: .98rem; transition: border-color .15s, background .15s, box-shadow .15s; }
.bc-field input:focus, .bc-field textarea:focus { outline: none; border-color: var(--bc-primary, #0536b2); background: #fff; box-shadow: 0 0 0 3px rgba(5,54,178,.12); }
.bc-field.has-error input { border-color: #d33; background: #fff5f5; }
.bc-field__err { display: block; color: #d33; font-size: .8rem; margin-top: .35rem; min-height: 0; }
.bc-field__hint { display: block; color: var(--bc-muted, #6b7a99); font-size: .78rem; margin-top: .35rem; }

/* password field with eye toggle */
.bc-field__pw { position: relative; display: block; }
.bc-field__pw input { padding-right: 3rem; }
.bc-pw-toggle { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: .35rem; cursor: pointer; color: var(--bc-muted, #6b7a99); line-height: 0; }
.bc-pw-toggle.is-on, .bc-pw-toggle:hover { color: var(--bc-primary, #0536b2); }

/* honeypot — visually + AT hidden but present in DOM */
.bc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- avatar upload ---- */
.bc-avatar-field { display: flex; align-items: center; gap: 1.15rem; margin: .5rem 0 1.5rem; }
.bc-avatar-field__preview { width: 76px; height: 76px; border-radius: 50%; background: var(--bc-bg-soft, #eff2f5) center/cover no-repeat; border: 2px dashed var(--bc-line, #cdd6e6); display: flex; align-items: center; justify-content: center; flex: none; }
.bc-avatar-field__preview.has-image { border-style: solid; border-color: var(--bc-primary, #0536b2); }
.bc-avatar-field__preview.has-image svg { display: none; }
.bc-avatar-field__btn { cursor: pointer; }

/* ---- rows / checks / links ---- */
.bc-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.bc-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--bc-body, #545454); cursor: pointer; }
.bc-auth__link { font-size: .9rem; }
.bc-auth__foot { text-align: center; margin-top: 1.5rem; color: var(--bc-muted, #6b7a99); font-size: .92rem; }

/* ---- submit + spinner ---- */
.bc-auth__submit { width: 100%; justify-content: center; margin-top: .25rem; position: relative; }
.bc-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: bc-spin .6s linear infinite; }
.bc-auth__submit.is-loading .bc-spinner { display: inline-block; }
.bc-auth__submit.is-loading .bc-btn__label { opacity: .8; }
@keyframes bc-spin { to { transform: rotate(360deg); } }

/* ---- notices ---- */
.bc-auth__notice { border-radius: var(--bc-radius, 10px); padding: .85rem 1rem; margin-bottom: 1.25rem; font-size: .92rem; background: #fdecec; color: #a11; border: 1px solid #f5c6c6; }
.bc-auth__notice.is-ok { background: #eafaf0; color: #1a7f43; border-color: #b8e6c8; }
.bc-auth--note { text-align: center; max-width: 520px; }

/* ==========================================================================
   Responsive — tablet + mobile
   ========================================================================== */
@media (max-width: 760px) {
	.bc-grid { grid-template-columns: 1fr; gap: 0; }         /* single column on tablet/phone */
	.bc-auth__tabs { max-width: 100%; }
	.bc-tab { font-size: .8rem; padding: .8rem .5rem; }
}
@media (max-width: 440px) {
	.bc-tab { font-size: .68rem; padding: .8rem .3rem; letter-spacing: 0; }  /* keep 3 across, don't wrap */
	.bc-avatar-field { flex-direction: column; align-items: flex-start; }
	.bc-auth__row { flex-direction: column; align-items: flex-start; gap: .6rem; }
}