/**
 * BM.Market registration page ("BM Market Register" design). Skins the existing
 * Magento-widget form markup (fields, selects, cards, labels, radios, buttons)
 * to the showcase style — scoped under .bm-reg so no widget markup/wiring is
 * touched (styling only). Uses showcase tokens (--color-primary/--color-fg*).
 */
.bm-reg { width: 100%; }
.bm-reg-sub { margin: 0 0 26px; font-size: 15px; color: var(--color-fg-secondary); }

/* Cards + section headings */
.bm-reg .card {
    background: #fff;
    border: 1px solid #EEF0F3;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 12px 28px -18px rgba(15,23,42,.16);
    padding: 26px;
    margin: 0 0 22px;
}
.bm-reg .grid-cols-2 { gap: 22px; }
.bm-reg legend { width: 100%; }
.bm-reg legend span {
    display: block;
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-fg);
}
/* the account-type card heading is smaller in the design */
.bm-reg .bm-b2b-toggle legend span,
.bm-reg fieldset[x-data*="bmBusinessType"] legend span { font-size: 15px; margin-bottom: 14px; }

/* Fields + labels. Keep Hyvä's native .field-reserved validation reserve (28px
   one-line slot via a negative-margin trick) INTACT — only space non-reserved
   fields, so one-line messages always fit without overlapping the next field. */
.bm-reg .field:not(.field-reserved) { margin: 0 0 16px; }
.bm-reg .field > .label,
.bm-reg label.label {
    display: block;
    margin: 0 0 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-fg);
}
.bm-reg .field.required > .label > span:after,
.bm-reg .field._required > .label > span:after { color: #E30613; }

/* Inputs + selects — the showcase .bm-in look (50px, slate-300, focus ring) */
.bm-reg input[type="text"],
.bm-reg input[type="email"],
.bm-reg input[type="tel"],
.bm-reg input[type="date"],
.bm-reg input[type="password"],
.bm-reg input[type="number"],
.bm-reg input.form-input,
.bm-reg select,
.bm-reg .form-input {
    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-reg input::placeholder { color: var(--color-fg-muted); }
.bm-reg input[type="text"]:focus,
.bm-reg input[type="email"]:focus,
.bm-reg input[type="tel"]:focus,
.bm-reg input[type="date"]:focus,
.bm-reg input[type="password"]:focus,
.bm-reg input[type="number"]:focus,
.bm-reg input.form-input:focus,
.bm-reg select:focus,
.bm-reg .form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,134,206,.15); }

/* Styled select (chevron) */
.bm-reg select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

/* Compact 2-column rows (DOB+Gender, City+Region, Postcode+Country). Flex so a
   hidden sibling (e.g. region for a region-less country) lets the other grow. */
.bm-reg-2col { display: flex; gap: 16px; align-items: flex-start; }
.bm-reg-2col > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 640px) { .bm-reg-2col { flex-direction: column; } }

/* Password field: input full-width with the eye inside; strength meter below. */
.bm-reg .bm-pw-control { position: relative; }
.bm-reg .bm-pw-control input.form-input { padding-right: 48px; }
.bm-reg .bm-pw-eye { position: absolute; top: 0; right: 0; width: 48px; height: 50px; display: flex; align-items: center; justify-content: center; border: none; background: none; color: var(--color-fg-muted); cursor: pointer; }
.bm-reg .bm-pw-eye:hover { color: var(--color-primary); }

/* Strength meter (design): 4-segment bar + coloured label, always in flow below
   the input. The password rules are TWO lines — more than Hyvä's one-line
   .field-reserved slot — so for THIS field we drop the fixed reserve and let the
   message flow: compact when valid, and it pushes the confirm field down only
   when a rule message actually shows (no overlap, no permanent gap). */
.bm-reg .field.bm-pw-field { --reserved-space: 0px; margin-bottom: 20px; }
.bm-reg .field.bm-pw-field ul:last-of-type { margin-block-end: 0; }
.bm-reg .bm-pwmeter { margin-top: 9px; }
.bm-reg .bm-pwbar { display: flex; gap: 5px; }
.bm-reg .bm-pwbar span { flex: 1; height: 5px; border-radius: 999px; background: #E5E7EB; transition: background .2s; }
.bm-reg .bm-pwmeter-text { margin-top: 7px; font-size: 12.5px; color: var(--color-fg-muted); }
.bm-reg .bm-pwmeter-text strong { font-weight: 700; }
#password-strength-meter-container.password-weak .bm-pwbar span:nth-child(1) { background: #E30613; }
#password-strength-meter-container.password-medium .bm-pwbar span:nth-child(-n+2) { background: #F59E0B; }
#password-strength-meter-container.password-strong .bm-pwbar span:nth-child(-n+3) { background: #16A34A; }
#password-strength-meter-container.password-very-strong .bm-pwbar span { background: #16A34A; }
#password-strength-meter-container.password-weak #password-strength-meter-label { color: #E30613; }
#password-strength-meter-container.password-medium #password-strength-meter-label { color: #F59E0B; }
#password-strength-meter-container.password-strong #password-strength-meter-label,
#password-strength-meter-container.password-very-strong #password-strength-meter-label { color: #16A34A; }

.bm-reg .field .control button[type="button"] { color: var(--color-fg-muted); }
.bm-reg .field .control button[type="button"]:hover { color: var(--color-primary); }

/* Account-type radios */
.bm-reg input[type="radio"].form-radio,
.bm-reg input[type="radio"] { accent-color: var(--color-primary); width: 18px; height: 18px; cursor: pointer; }
.bm-reg fieldset[x-data*="bmBusinessType"] label { font-size: 14.5px; color: var(--color-fg); }

/* Newsletter / remote-assist toggles keep their own control; just spacing */
.bm-reg .field.choice { display: flex; align-items: center; gap: 10px; }
.bm-reg .field.choice > .label { margin: 0; font-weight: 500; }
/* Small muted help icon (remote-assist tooltip) — matches the site style */
.bm-reg .bm-help { display: inline-flex; align-items: center; color: var(--color-fg-muted); cursor: help; }
.bm-reg .bm-help:hover { color: var(--color-primary); }

/* Footer actions — Back link on the left, Register button on the right.
   Override Hyvä's flex-direction:row-reverse; space-between puts them on
   opposite sides. */
.bm-reg .actions-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #E5E7EB;
}
.bm-reg .actions-toolbar .secondary { order: 1; margin: 0; }
.bm-reg .actions-toolbar .primary { order: 2; }
.bm-reg .actions-toolbar .action.back { font-size: 14.5px; font-weight: 600; color: var(--color-fg-secondary); }
.bm-reg .actions-toolbar .action.back:hover { color: var(--color-primary); }
.bm-reg .actions-toolbar .btn-primary {
    height: 50px;
    padding: 0 32px;
    border: none;
    border-radius: 10px;
    background: var(--color-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.bm-reg .actions-toolbar .btn-primary:hover { background: var(--color-marine-700); }