.mmenu:hover .dropdown-menu{display:block}.mmenu .dropdown-menu li:hover{background:#ccc}.btn-link,a{text-decoration:none}.panel-title{font-size:14px}.ltr_font{font-family:calibri}h1{font-size:24px}.text-justify{text-align:justify}.zoom_ltr img:hover,.zoom_rtl img:hover{transform:scale(4);border:1px dashed #777;position:relative}.modal_aw{max-width:fit-content;margin-left:auto;margin-right:auto}.list-article-title{font-size:16px}#ju_header{max-height:300px;overflow:hidden}.relj:hover img,.social_icon:hover{transform:translateY(-4px) scale(1.2);transition:.3s}.navbar-nav .nav-link{position:relative;padding:.5rem;margin:0 .3rem;transition:.3s}.navbar-nav .nav-item:hover{background:#bbb}.hid_ac_ico::after{display:none}.ac_ico_sm::after{background-size:80%;background-position:top}.modern-tabs .nav-link{border:none;color:#6c757d;position:relative;padding:.6rem 2rem;transition:.3s;background:0 0}.modern-tabs .nav-link.active{background:0 0}.modern-tabs .nav-link.active::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:#000;animation:.3s tabIndicator}@keyframes tabIndicator{from{transform:scaleX(0)}to{transform:scaleX(1)}}.mtooltip .tooltip-inner{text-align:start;line-height:2;max-width:40rem!important;padding:10px}.brandBar{min-height:120px;max-height:140px}.logo{max-height:110px}.btn:hover{transform: translateY(1px) scale(.98);}.alert-aw {display: inline-block;max-width: 100%;padding-inline-end: 50px;}.text-container{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;transition:.3s}.text-container.expanded{-webkit-line-clamp:unset;overflow:visible}

/* ── Unified login form UI — geometry + theme variables only ─────────────────
   Colours are NOT hardcoded: they are inherited from the active theme via
   Bootstrap button classes (.btn-primary / .btn-light) and Bootstrap CSS
   variables (var(--bs-*)). Hover/focus come from Bootstrap's own button states.
   So the login page restyles automatically when the theme changes.
   Scoped to .login-* hooks so other pages/components are unaffected.
   ------------------------------------------------------------------------- */
.login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}
.login-btn i {
    font-size: 1.05rem;
}

/* Secondary auth (Google): keep a subtle themed outline using the theme border colour */
.login-btn--google {
    border-color: var(--bs-border-color);
}

/* Consistent vertical spacing between stacked actions */
.login-action + .login-action {
    margin-top: 0.75rem;
}

/* Secondary links — typography/spacing; colour follows the theme link colour */
.login-links {
    margin-top: 0.75rem;
    text-align: center;
}
.login-link {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bs-link-color, currentColor);
    text-decoration: none;
}
.login-link:hover,
.login-link:focus {
    color: var(--bs-link-hover-color, currentColor);
    text-decoration: underline;
}
.login-link--end {
    float: right;
    margin: 0.15rem 0;
}

/* Responsive */
@media (max-width: 575.98px) {
    .login-btn { width: 100%; }
    .login-link--end { float: none; display: block; text-align: right; }
}