/* ============================================================
   eLife — Public site brand theme (Red + Black)
   Loaded AFTER site/css/* so these win. Non-destructive.
   Focus: registration page + global accent colour.
   ============================================================ */

:root {
    --brand:      #D32F2F;
    --brand-dark: #B71C1C;
    --brand-tint: #FCE4E4;
    --ink:        #1E1E1E;
    /* Bootstrap/site components read --info for the primary accent
       (e.g. the registration button) — repoint it to brand red */
    --info:       #D32F2F;
}

/* ---------- Registration button ---------- */
.user_regi_btn {
    background: var(--brand) !important;
    color: #fff !important;
    border: 0 !important;
}
.user_regi_btn:hover {
    background: var(--brand-dark) !important;
    color: #fff !important;
}

/* ---------- Form focus on the registration form ---------- */
.right_regis_form .form-control:focus,
.registration_section .form-control:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 .2rem rgba(211,47,47,.15) !important;
}

/* sponsor-name lookup feedback colours (kept readable on the form) */
#showSponsorId.text-success { color: #2E7D32 !important; }
#showSponsorId.text-danger  { color: var(--brand) !important; }

/* ---------- Generic primary buttons / links on the public site ---------- */
.btn-primary,
.btn-info {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-info:hover {
    background-color: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
}

/* ============================================================
   Modern Header
   ============================================================ */
.elife-header { position:relative; font-family:inherit; }
.elife-header .eh-wrap { max-width:1200px; margin:0 auto; padding:0 18px; }

.elife-header .eh-topbar { background:#161616; color:#fff; font-size:13px; }
.elife-header .eh-topbar-in { display:flex; align-items:center; justify-content:space-between; height:40px; }
.elife-header .eh-topbar-in a { color:#fff; text-decoration:none; }
.elife-header .eh-topbar-in .eh-tag { color:rgba(255,255,255,.7); }
.elife-header .eh-topbar i { color:#ff6b5e; margin-right:6px; }

.elife-header .eh-main { background:#fff; border-bottom:1px solid #eee; position:sticky; top:0; z-index:1000; box-shadow:0 2px 14px rgba(0,0,0,.05); }
.elife-header .eh-main-in { display:flex; align-items:center; justify-content:space-between; height:74px; }
.elife-header .eh-logo img { max-height:48px; width:auto; }
.elife-header .eh-nav { display:flex; align-items:center; gap:4px; }
.elife-header .eh-nav a { color:#1e1e1e; text-decoration:none; font-weight:600; font-size:15px; padding:9px 14px; border-radius:8px; transition:all .18s ease; }
.elife-header .eh-nav a:hover, .elife-header .eh-nav a.active { color:var(--brand); }
.elife-header .eh-nav a.eh-join { background:var(--brand); color:#fff !important; padding:10px 22px; border-radius:30px; box-shadow:0 8px 20px rgba(211,47,47,.28); }
.elife-header .eh-nav a.eh-join:hover { background:var(--brand-dark); transform:translateY(-1px); }
.elife-header .eh-burger { display:none; background:var(--brand); color:#fff; border:0; width:44px; height:44px; border-radius:10px; font-size:18px; cursor:pointer; }

/* Mobile drawer */
.eh-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; z-index:1100; }
.eh-backdrop.show { opacity:1; visibility:visible; }
.eh-drawer { position:fixed; top:0; right:-340px; width:300px; max-width:85vw; height:100%; background:#fff; z-index:1101;
    box-shadow:-6px 0 30px rgba(0,0,0,.2); transition:right .3s ease; display:flex; flex-direction:column; padding:18px; }
.eh-drawer.open { right:0; }
.eh-drawer-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid #eee; margin-bottom:14px; }
.eh-drawer-head img { max-height:42px; }
.eh-drawer-head button { background:#f1f1f1; border:0; width:38px; height:38px; border-radius:50%; font-size:16px; cursor:pointer; color:#1e1e1e; }
.eh-drawer-nav { display:flex; flex-direction:column; gap:4px; }
.eh-drawer-nav a { display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:10px; color:#1e1e1e; text-decoration:none; font-weight:600; }
.eh-drawer-nav a i { width:20px; color:var(--brand); }
.eh-drawer-nav a:hover { background:var(--brand-tint); color:var(--brand); }
.eh-drawer-cta { margin-top:16px; display:block; text-align:center; background:var(--brand); color:#fff; text-decoration:none; padding:13px; border-radius:30px; font-weight:700; }
.eh-drawer-foot { margin-top:auto; padding-top:14px; border-top:1px solid #eee; color:#6c757d; font-size:14px; }
.eh-drawer-foot i { color:var(--brand); margin-right:6px; }

@media (max-width:860px) {
    .elife-header .eh-nav { display:none; }
    .elife-header .eh-burger { display:inline-flex; align-items:center; justify-content:center; }
    .elife-header .eh-topbar-in .eh-tag { display:none; }
    .elife-header .eh-main-in { height:64px; }
    .elife-header .eh-logo img { max-height:40px; }
}

/* ============================================================
   Modern Footer
   ============================================================ */
.elife-footer { background:#161616; color:#fff; margin:0; padding:0; }
.elife-footer .eh-wrap { max-width:1200px; margin:0 auto; padding:0 18px; }
.elife-footer .ef-top { padding:56px 0 36px; }
.elife-footer .ef-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; }
.elife-footer .ef-about .ef-logo { background:#fff; padding:8px 12px; border-radius:10px; max-height:60px; margin-bottom:16px; }
.elife-footer .ef-about p { color:rgba(255,255,255,.65); font-size:14px; line-height:1.7; margin:0 0 18px; }
.elife-footer .ef-social { display:flex; gap:10px; }
.elife-footer .ef-social a { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center; transition:.2s; text-decoration:none; }
.elife-footer .ef-social a:hover { background:var(--brand); transform:translateY(-2px); }
.elife-footer .ef-col h5 { font-size:16px; font-weight:800; margin:0 0 18px; color:#fff; position:relative; padding-bottom:10px; }
.elife-footer .ef-col h5::after { content:""; position:absolute; left:0; bottom:0; width:34px; height:3px; background:var(--brand); border-radius:2px; }
.elife-footer .ef-col a, .elife-footer .ef-col span { display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.65); text-decoration:none; font-size:14px; padding:6px 0; transition:.18s; }
.elife-footer .ef-col a:hover { color:#ff6b5e; padding-left:4px; }
.elife-footer .ef-col a i, .elife-footer .ef-col span i { color:var(--brand); width:16px; }
.elife-footer .ef-bottom { border-top:1px solid rgba(255,255,255,.1); }
.elife-footer .ef-bottom-in { display:flex; align-items:center; justify-content:space-between; padding:18px 0; flex-wrap:wrap; gap:8px; }
.elife-footer .ef-bottom-in p { margin:0; color:rgba(255,255,255,.6); font-size:13px; }
.elife-footer .ef-bottom-in a { color:#ff6b5e; text-decoration:none; }

@media (max-width:860px) {
    .elife-footer .ef-grid { grid-template-columns:1fr 1fr; gap:28px; }
    .elife-footer .ef-about { grid-column:1 / -1; }
}
@media (max-width:520px) {
    .elife-footer .ef-grid { grid-template-columns:1fr; }
    .elife-footer .ef-bottom-in { flex-direction:column; text-align:center; }
}

/* ============================================================
   Registration page — mobile polish (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
    .right_regis_form {
        padding: 20px 16px !important;
        width: 100% !important;
    }
    .registration_inner { display: block !important; }
    .left_regis { display: none !important; }   /* hide decorative left panel on phones */
    .right_regis_form h2 { font-size: 1.5rem; }
    /* 16px inputs prevent iOS zoom-on-focus */
    .right_regis_form .form-control { font-size: 16px !important; }
    .user_regi_btn { width: 100%; }
}