/**
 * BM.Market login page ("BM Market Login" design) — two cards (Sign in /
 * New customer) + trust bar. Scoped under .bm-login so nothing collides with
 * cart/showcase classes. Uses showcase colour tokens (--color-primary,
 * --color-cta, --color-marine-*, --color-fg*) with the example's dimensions.
 */
/* The stock login container is a 2-column grid (built for separate login +
   new-customer blocks, styled by #id so it outranks a plain class). We render
   both cards inside one block, so collapse it to a single full-width column —
   otherwise our block only fills half. */
#customer-login-container.login-container { display: block; grid-template-columns: none; }
/* Full container width — the page-main container already provides the site
   max-width; the block must fill it, not add its own narrower cap. The page
   heading is the standard Magento .page-title (matches other pages); we don't
   render our own. */
.bm-login { width: 100%; padding: 8px 0; }

.bm-login-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
@media (max-width: 767px) { .bm-login-grid { grid-template-columns: 1fr; } }

.bm-login-card { background: #fff; border: 1px solid #EEF0F3; border-radius: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 12px 28px -16px rgba(15,23,42,.18); padding: 32px; display: flex; flex-direction: column; }
/* Single-card pages (forgot password): the card sits in the login grid's left
   column (same width/position as the "Sign in" card). Footer = the profile-page
   pattern: Back link left, action button right. */
.bm-login-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 22px;
    border-top: 1px solid #EEF0F3;
}
.bm-login-actions .bm-login-submit { width: auto; padding: 0 32px; }
.bm-login-back { font-size: 14.5px; font-weight: 600; text-decoration: underline; color: var(--color-fg-secondary); transition: color .15s; }
.bm-login-back:hover { color: var(--color-primary); }
.bm-login-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.bm-login-badge { width: 40px; height: 40px; border-radius: 10px; background: var(--color-marine-50); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bm-login-h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--color-fg); }
.bm-login-cardsub { margin: 0 0 22px; font-size: 14px; color: var(--color-fg-secondary); line-height: 1.55; }

/* form */
.bm-login-form { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.bm-login-field > .label,
.bm-login-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--color-fg); }
.bm-login-req { color: #E30613; }
.bm-login-labelrow { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.bm-login-forgot { font-size: 13px; font-weight: 600; color: var(--color-primary); transition: color .15s; }
.bm-login-forgot:hover { color: var(--color-marine-700); text-decoration: underline; }
/* The forgot link lives AFTER the password input in the DOM (so Tab goes
   email → password → forgot), pinned back up into the label row visually. */
.bm-login-field-pw { position: relative; }
.bm-login-field-pw .bm-login-forgot { position: absolute; top: 0; right: 0; line-height: 1.4; }
.bm-login-inwrap { position: relative; }
.bm-login-in { width: 100%; height: 50px; border: 1px solid #CBD5E1; border-radius: 8px; padding: 0 16px; font-family: inherit; font-size: 15px; color: var(--color-fg); background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.bm-login-in::placeholder { color: var(--color-fg-muted); }
.bm-login-in:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,134,206,.15); }
.bm-login-in.pw { padding-right: 48px; }
.bm-login-eye { position: absolute; top: 0; right: 0; width: 48px; height: 50px; border: none; background: none; cursor: pointer; color: var(--color-fg-muted); display: flex; align-items: center; justify-content: center; transition: color .12s; }
.bm-login-eye:hover { color: var(--color-primary); }

.bm-login-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.bm-login-fine { font-size: 12.5px; color: var(--color-fg-muted); text-align: center; }

/* buttons */
.bm-login-submit { width: 100%; height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: none; border-radius: 10px; background: var(--color-primary); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s; }
.bm-login-submit:hover { background: var(--color-marine-700); }
.bm-login-submit:disabled { opacity: .5; cursor: not-allowed; }
.bm-login-create { width: 100%; height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: none; border-radius: 10px; background: var(--color-cta); color: #111; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s; }
.bm-login-create:hover { background: var(--color-cta-hover); color: #111; }

/* new-customer benefits */
.bm-login-benefits { display: flex; flex-direction: column; gap: 15px; margin-bottom: 26px; }
.bm-login-benefit { display: flex; align-items: flex-start; gap: 12px; }
.bm-login-benefit-ic { width: 24px; height: 24px; border-radius: 50%; background: var(--color-marine-50); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.bm-login-benefit-tx { font-size: 14.5px; line-height: 1.4; color: var(--color-fg); }

/* error box */
.bm-login-err { display: flex; align-items: center; gap: 8px; color: #B91C1C; font-size: 14px; }

/* trust bar */
.bm-login-trust { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; margin-top: 32px; padding-top: 26px; border-top: 1px solid #E5E7EB; }
.bm-login-trust-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--color-fg-secondary); }
.bm-login-trust-item svg { color: var(--color-primary); flex-shrink: 0; }