/* Member pages (members/*.master: Plain, LoginPage, User) - login, register, forgot password, activation and the
   signed-in member area. Replaces master/content/members-mobile CSS for these pages: a header like the main site's,
   content in cards, modern form rows/inputs/buttons, and a navy footer. The page controls in includes/public/user
   keep their old class names (.index, .sco, .mail-row, .joinbtn ...); they are styled here. */

body.mb {
    margin: 0;
    background: #eef2f7;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #1d2733;
}
/* Footer at the bottom of the window on short pages (User / LoginPage masters wrap everything in a server form). */
body.mb { display: flex; flex-direction: column; min-height: 100vh; }
body.mb > form { display: flex; flex-direction: column; flex: 1 0 auto; }
.mb-page { flex: 1 0 auto; width: 100%; }
.mb a { color: #2a6ad3; }
.mb a:hover, .mb a:focus { color: #1f56b0; }
.mb form { margin: 0; }

/* ---------- Header (same look as the main site header) ---------- */
.mb-header { position: sticky; top: 0; z-index: 100; background: #eceff3; border-bottom: 1px solid #d5dbe3; box-shadow: 0 2px 10px rgba(16, 36, 68, .08); }
.mb-header-inner { max-width: 1100px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 24px; }
.mb-logo { flex: 0 0 auto; display: block; line-height: 0; }
.mb-logo img { width: 200px; height: auto; }
.mb-links { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 14px; white-space: nowrap; }
.mb-links a { color: #1d2733; font-weight: 600; text-decoration: none; }
.mb-links a:hover, .mb-links a:focus { color: #2a6ad3; }
.mb-links .mb-cta { background: #f39c12; color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 13px; }
.mb-links .mb-cta:hover, .mb-links .mb-cta:focus { background: #d9860a; color: #fff; }
.mb-user { color: #5b6675; }

/* ---------- Layout: main column + side column ---------- */
.mb-page { max-width: 1100px; margin: 0 auto; padding: 28px 16px 44px; box-sizing: border-box; }
.mb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.mb-main, .mb-side { min-width: 0; }
.mb-side:empty { display: none; }

/* Cards: the columns themselves, unless the page brings its own cards (Register: .rg-card / .rg-why). */
.mb-main:not(:has(.rg-card)), .mb-side:not(:has(.rg-why)):not(:empty) {
    background: #fff;
    border: 1px solid #e1e6ed;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(16, 36, 68, .08);
    padding: 28px 28px 24px;
    box-sizing: border-box;
}

/* ---------- Legacy content blocks ---------- */
.mb .index { background: none !important; padding: 0; margin: 0 0 14px; height: auto; width: auto; float: none; }
.mb .index h1 { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 700; color: #1f3a5f; }
.mb .index h2 { margin: 0; font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #2a6ad3; }
.mb .sco, .mb .lco, .mb .rbo, .mb #aboutmail { background: none; padding: 0; margin: 0; width: auto; float: none; }
.mb .scobottom { display: none; }
.mb .clear { clear: both; }
.mb p { margin: 0 0 12px; }
.mb p.bold { font-weight: 600; }
.mb .mailmark { background: #f3f6fa; border-radius: 10px; padding: 12px 14px; margin: 0 0 18px; color: #4a5565; }

/* Bulleted lists in content (e.g. "With your FREE listing you'll get...") as check-mark lists */
.mb .sco ul { list-style: none; margin: 0 0 16px; padding: 0; }
.mb .sco ul li { position: relative; padding: 0 0 0 30px; margin: 0 0 10px; color: #33415c; }
.mb .sco ul li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #e6f0fd; color: #2a6ad3; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }

/* Member-area navigation (navigation.ascx) */
.mb .lineen { list-style: none; margin: 0 0 16px; padding: 0; }
.mb .lineen li { margin: 0 0 6px; }
.mb .lineen a { display: block; padding: 10px 12px; border-radius: 8px; background: #f3f6fa; color: #1f3a5f; font-weight: 600; text-decoration: none; }
.mb .lineen a:hover, .mb .lineen a:focus { background: #e6f0fd; color: #2a6ad3; }
.mb [id$="profile"] { margin: 0 !important; }

/* ---------- Forms ---------- */
.mb table { border-collapse: collapse; width: 100%; }
.mb td { padding: 0; vertical-align: top; }
.mb label { font-weight: 600; color: #33415c; }

/* Row layout used by the profile / contact forms (label column + field column) */
.mb .mail-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 6px 16px; align-items: center; margin: 0 0 12px; }
.mb .mailfirst { font-size: 14px; font-weight: 600; color: #33415c; }
.mb .mailfirst b { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: #2a6ad3; }
.mb .mailfirst font[color] { color: #c62828; }
.mb .mailsec { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.mb .head-mode { flex: 1 1 260px; min-width: 0; }
.mb .mailselect { font-size: 12px; color: #c62828; }
.mb .mailselect:empty { display: none; }
.mb .join-now { grid-column: 2; }

/* Sign-in box rows (login_plain.ascx / login.ascx) */
.mb .login-row { margin: 0 0 14px; }
.mb .passwort-col label { display: block; margin: 0 0 5px; font-size: 14px; }
.mb .passwort { display: flex; align-items: center; gap: 8px; }
.mb .passwort label { font-weight: 400; }

/* Inputs (width !important: the controls set fixed pixel widths inline) */
.mb input[type="text"], .mb input[type="password"], .mb input[type="email"], .mb input[type="tel"], .mb select, .mb textarea {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    height: 42px;
    padding: 8px 12px;
    border: 1px solid #cfd6e2;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    color: #1d2733;
    transition: border-color .15s, box-shadow .15s;
}
.mb textarea { height: auto; min-height: 120px; line-height: 1.5; }
.mb input:focus, .mb select:focus, .mb textarea:focus { outline: none; border-color: #2a6ad3; box-shadow: 0 0 0 3px rgba(42, 106, 211, .15); }
.mb input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: #2a6ad3; }

/* Buttons: every old button class becomes the orange pill */
.mb .joinbtn, .mb .fgtpasswd, .mb .registerbtn, .mb .viewbtnmember, .mb input[type="submit"] {
    display: inline-block;
    box-sizing: border-box;
    width: auto;
    height: auto;
    margin: 4px 0 0;
    padding: 12px 24px;
    border: 0;
    border-radius: 10px;
    background: #f39c12 none;
    color: #fff !important;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-indent: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}
.mb .joinbtn:hover, .mb .fgtpasswd:hover, .mb .registerbtn:hover, .mb .viewbtnmember:hover, .mb input[type="submit"]:hover { background-color: #d9860a; }
.mb .lco .joinbtn { width: 100%; }               /* sign-in button spans the box */
.mb .viewbtnmember { width: 100%; background-color: #1f3a5f; }
.mb .viewbtnmember:hover { background-color: #2a6ad3; }

/* Message boxes: the controls style these inline (gray box, red/green bold text, icon) */
.mb [id$="errorMessageBox"], .mb [id$="successMessageBox"], .mb-main [role="alert"], .mb-main [role="status"], .mb-side [role="alert"] {
    margin: 0 0 18px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    text-align: left !important;
    font-weight: 600 !important;
}
.mb [id$="errorMessageBox"], .mb-main [role="alert"], .mb-side [role="alert"] { background: #fdecec !important; border: 1px solid #f5c2c2 !important; color: #a61b1b !important; }
.mb [id$="successMessageBox"], .mb-main [role="status"] { background: #e9f7ef !important; border: 1px solid #b8e2c8 !important; color: #1e6b3a !important; }
.mb [id$="MessageBox"] img, .mb-main [role="alert"] img, .mb-main [role="status"] img { display: none; }
.mb-side [role="alert"] span { color: inherit !important; }

/* ---------- Footer ---------- */
.mb-footer { background: #14253d; color: #8597b0; font-size: 13px; }
.mb-footer-inner { max-width: 1100px; margin: 0 auto; padding: 22px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; box-sizing: border-box; }
.mb-footer-logo img { width: 170px; height: auto; display: block; }
.mb-footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.mb-footer a { color: #b9c6d8; text-decoration: none; }
.mb-footer a:hover, .mb-footer a:focus { color: #fff; }

/* ---------- Phones ---------- */
@media (max-width: 860px) {
    .mb-layout { grid-template-columns: minmax(0, 1fr); }
    /* Login page (main card = the "Register Now" teaser): show the sign-in box first */
    .mb-layout:has(.registerbtn) .mb-side { order: -1; }
}
@media (max-width: 767px) {
    .mb-header-inner { padding: 10px 12px; }
    .mb-logo img { width: 230px; max-width: 100%; margin: -12px 0; } /* the logo image has ~14px of transparent space top and bottom */
    .mb-links { display: none; }                                      /* same as the main site: logo only on phones */
    .mb-page { padding: 16px 12px 28px; }
    .mb-main:not(:has(.rg-card)), .mb-side:not(:has(.rg-why)):not(:empty) { padding: 20px 16px; border-radius: 12px; }
    .mb .index h1 { font-size: 22px; }
    .mb .mail-row { grid-template-columns: minmax(0, 1fr); gap: 5px; }
    .mb .join-now { grid-column: 1; }
    .mb-footer-inner { flex-direction: column; align-items: flex-start; }
}